=Simplified event fields a bit, removed the recurrence for now to get North...

Jake Vanderwerf

2026-09-09 8318f60480aedd4aa1e64dc35468247dfbba9316

 src/meta/edit.js

@@ -1,38 +1,51 @@
/**

 * Retrieves the translation of text.

 *

 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/

 */

import { __ } from '@wordpress/i18n';

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';

import { PanelBody, SelectControl, Placeholder } from '@wordpress/components';

import { useEntityProp } from '@wordpress/core-data';

import { useSelect } from '@wordpress/data';

import Fields from '../_meta/Fields';



/**

 * React hook that is used to mark the block wrapper element.

 * It provides all the necessary props like the class name.

 *

 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops

 */

import { useBlockProps } from '@wordpress/block-editor';

const Edit = ({ attributes, setAttributes }) => {

   const { fieldName } = attributes;

   const { fields } = window.jvbFieldConfig || {};



/**

 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.

 * Those files can contain any CSS code that gets applied to the editor.

 *

 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css

 */

import './editor.scss';



/**

 * The edit function describes the structure of your block in the context of the

 * editor. This represents what the editor will render when the block is used.

 *

 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit

 *

 * @return {Element} Element to render.

 */

export default function Edit() {

   return (

      <p { ...useBlockProps() }>

         { __( 'Will output the menu', 'jvb' ) }

      </p>

   const postType = useSelect(

      (select) => select('core/editor').getCurrentPostType(),

      []

   );

}

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



   const field = (fields || []).find((f) => f.name === fieldName);



   const blockProps = useBlockProps();



   return (

      <div {...blockProps}>

         <InspectorControls>

            <PanelBody title="Field">

               <SelectControl

                  label="Meta field"

                  value={fieldName}

                  options={[

                     { label: 'Select a field…', value: '' },

                     ...(fields || []).map((f) => ({ label: f.label || f.name, value: f.name })),

                  ]}

                  onChange={(value) => setAttributes({ fieldName: value })}

               />

            </PanelBody>

         </InspectorControls>



         { !field && <Placeholder label="Meta Field" instructions="Select a field in the block settings." /> }



         { field && (

            <Fields

               field={field}

               value={meta?.[fieldName]}

               onChange={(value) => setMeta({ ...meta, [fieldName]: value })}

               meta={meta}

            />

         ) }

      </div>

   );

};



export default Edit;