WordPress.org

Create Meta Block Edit

With the meta field registered in the previous step, next you will create a new block used to display the field value to the user. See the Block Tutorial for a deeper understanding of creating custom blocks.

For this block, you will use the TextControl component, which is similar to an HTML input text field. For additional components, check out the components and editor packages repositories.

Attributes are the information displayed in blocks. As shown in the block tutorial, the source of attributes come from the text or HTML a user writes in the editor. For your meta block, the attribute will come from the post meta field.

By specifying the source of the attributes as meta, the block editor automatically handles the loading and storing of the data; no REST API or data functions are needed.

Add this code to your JavaScript file (this tutorial will call the file myguten.js):

( function( wp ) {
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;
    var TextControl = wp.components.TextControl;

    registerBlockType( 'myguten/meta-block', {
        title: 'Meta Block',
        icon: 'smiley',
        category: 'common',

        attributes: {
            blockValue: {
                type: 'string',
                source: 'meta',
                meta: 'myguten_meta_block_field'
            }
        },

        edit: function( props ) {
            var className = props.className;
            var setAttributes = props.setAttributes;

            function updateBlockValue( blockValue ) {
                setAttributes({ blockValue });
            }

            return el(
                'div',
                { className: className },
                el( TextControl, {
                    label: 'Meta Block Field',
                    value: props.attributes.blockValue,
                    onChange: updateBlockValue
                } )
            );
        },

        // No information saved to the block
        // Data is saved to post meta via attributes
        save: function() {
            return null;
        }
    } );
} )( window.wp );

const { registerBlockType } = wp.blocks; const { TextControl } = wp.components; registerBlockType( 'myguten/meta-block', { title: 'Meta Block', icon: 'smiley', category: 'common', attributes: { blockValue: { type: 'string', source: 'meta', meta: 'myguten_meta_block_field', }, }, edit( { className, setAttributes, attributes } ) { function updateBlockValue( blockValue ) { setAttributes( { blockValue } ); } return ( <div className={ className }> <TextControl label="Meta Block Field" value={ attributes.blockValue } onChange={ updateBlockValue } /> </div> ); }, // No information saved to the block // Data is saved to post meta via attributes save() { return null; } } );

Important: Before you test, you need to enqueue your JavaScript file and its dependencies. Note the WordPress packages used above are wp.element, wp.blocks, and wp.components. Each of these need to be included in the array of dependencies. Update the myguten-meta-block.php file adding the enqueue function:

function myguten_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        plugins_url( 'myguten.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-components' )
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

You can now edit a draft post and add a Meta Block to the post. You will see your field that you can type a value in. When you save the post, either as a draft or published, the post meta value will be saved too. You can verify by saving and reloading your draft, the form will still be filled in on reload.

Meta Block

You can now use the post meta data in a template, or another block. See next section for using post meta data. You could also confirm the data is saved by checking the database table wp_postmeta and confirm the new post id contains the new field data.

Skip to toolbar