=Polishing up the gutenberg sidebar for custom meta. Seems to be working mo...

Jake Vanderwerf

2026-09-06 eef16f5a0f5af0aea313e411534643678ba4bea1

 src/editor-fields/SidePanel.js

@@ -1,9 +1,9 @@
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress/components';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
import { useEntityProp } from '@wordpress/core-data';
import Section from './Section';

const JVIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" strokeLinecap="square" strokeLinejoin="round" strokeMiterlimit="1.5" clipRule="evenodd" viewBox="0 0 32 32">
@@ -11,54 +11,36 @@
</svg>
);
const SidePanel = ( { postType, metaFields, setMetaFields } ) => {
   const { content, fields } = window.jvbFieldConfig || {};
   const [meta, setMeta] = useEntityProp('postType', content, 'meta');
   console.log(fields);
   const { fields, sections } = window.jvbFieldConfig || {};

   const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

   if (!fields || !fields.length) return null;
   return (
      <>
         <PluginSidebarMoreMenuItem
            target="metadata-sidebar"
            target="jvb-meta-fields"
            icon={<JVIcon /> }
         >
            Metadata Sidebar
            Additional Fields
         </PluginSidebarMoreMenuItem>
         <PluginSidebar
            name="metadata-sidebar"
            name="jvb-meta-fields"
            icon={<JVIcon /> }
            title="Fields"
            title="Additional Fields"
         >
            <PanelBody title="Book details" initialOpen={ true }>
               <PanelRow>
                  <TextControl
                     value={ metaFields._meta_fields_book_title }
                     label={ __( "Title" ) }
                     onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
                  />
               </PanelRow>
               <PanelRow>
                  <TextControl
                     value={ metaFields._meta_fields_book_author }
                     label={ __("Author", "textdomain") }
                     onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
                  />
               </PanelRow>
               <PanelRow>
                  <TextControl
                     value={ metaFields._meta_fields_book_publisher }
                     label={ __("Publisher", "textdomain") }
                     onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
                  />
               </PanelRow>
               <PanelRow>
                  <DateTimePicker
                     currentDate={ metaFields._meta_fields_book_date }
                     onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
                     __nextRemoveHelpButton
                     __nextRemoveResetButton
                  />
               </PanelRow>
            </PanelBody>
            {
               Object.values(sections).map((section, index) => {
                  return <Section
                     key={section.id}
                     name={section.title}
                     fields={filterFields({section, fields})}
                     meta={meta}
                     setMeta={setMeta}
                     isOpen={testOpen(index)}
                  />;
               })
            }
         </PluginSidebar>
      </>
   )
@@ -79,6 +61,14 @@
   }
} );

const filterFields = ({section, fields}) => {
   return fields.filter(item => section.fields.includes(item.name))
};

const testOpen = (index) => {
   return index === 0;
};

export default compose([
   applyWithSelect,
   applyWithDispatch