Gutenberg: What is the right way to handle metaboxes in Gutenberg block development process? Is there a step-by-step tutorial available?

[emfluenceindia]

Hi. I am having trouble saving metaboxes using Gutenberg. I have purchased a course from Udemy and following https://github.com/zgordon/gutenberg-course/tree/master/blocks/14-meta-box as the starting point. According to this tutorial when I use:

registerBlockType(
    'sar/block-meta-box-handling',
    {
        title: __( 'Metabox handling' ),
        description: __( 'An example of how to build a block with metabox' ),
        icon: 'media-text',
        category: 'common',
        keywords: [],
        attributes: {
            text: {
                type: 'string',
                source: 'meta',
                meta: 'sar_gb_metabox',
            },
        },
        edit: props => {
            const { attributes: { text }, className, setAttributes, isSelected } = props;
            return (
                isSelected && (
                    <InspectorControls>
                        <PanelBody>
                            <TextControl
                                label={ __( 'Meta Box' ) }
                                value={ text }
                                onChange={ text => setAttributes( { text } ) }
                            />
                        </PanelBody>
                    </InspectorControls>
                ),

                <div className={ className }>
                    <p>{ __( 'Check the meta' ) }</p>
                </div>
            );
        },
        save: props => {
            return (
                <p>{ __( 'Check the meta' ) }</p>
            );
        },
    }
);

I am getting console error. When I change the angled brackets (i.e. return [ ... ]) in return statement to parenthesis (i.e. return ( ... )), the error goes away, but the data saves in post_content field like this:

<!-- wp:sar/block-meta-box-handling -->
<p class="wp-block-sar-block-meta-box-handling">Check the meta</p>
<!-- /wp:sar/block-meta-box-handling -->

I finding it hard to get a proper step by step tutorial about Metabox handling in Gutenberg. If any such tutorial available please help me by sharing it! I am very new to Gutenberg development.

One more question, when handing metaboxes, do they get saved in wp_posts as a part of post_content or they get saved in wp_postmeta table against a post_id? (edited)

I have already submitted the same question at https://chat.wordpress.org#core-editor but yet to receive a helpful answer. However nerrad said this tutorial is outdated.

[youknowriad]

Did you see this https://wordpress.org/gutenberg/handbook/block-api/attributes/#meta Does it help?

It should be brackets instead of parenthesis and the data is saved to the sar_gb_metabox according to your block's description. The save is just a fallback in that case.

[emfluenceindia]

Thank you for your quick response.

I tried that but it didn't work for me (so far). I am very new to this so I cannot say I did everything right. So you are suggesting this tutorial to follow? Can you please suggest me something where I can find some examples and understand it better? :)

And from what you said above it seems like the meta key sar_gb_metabox would get saved in wp_postmeta table against the post_id. Is this right?

[youknowriad]

This is not a tutorial, this is the official docs for Gutenberg and yes, it's a post meta you can access from php using get_post_meta https://developer.wordpress.org/reference/functions/get_post_meta/

(Make sure you register your meta like shown in the docs above)

[emfluenceindia]

Thank you @youknowriad :+1: Let me start over and get back to you.

[emfluenceindia]

I have used the approach as described in the official handbook. Here is my block code.

import './style.scss';
import './editor.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks

registerBlockType( 'sar/simple-meta-box', {
    title: __( 'Simple Meta Box Example' ),
    icon: 'media-text',
    category: 'common',
    keywords: [],
    attributes: {
        metakey: {
            type: 'string',
            source: 'meta',
            meta: 'sar_meta_key',
        }
    },
    edit: function( props ) {
        function onChangeMetaKeyValue( event ) {
            props.setAttributes( { metakey: event.target.value } );
        }

        return(
            <input
                value={ props.attributes.metakey }
                onChange={ onChangeMetaKeyValue }
            />
        );
    },
    save: function( props ) {
        return null;
    },
} );

This is how I registered my meta key in init.php (I am using create-guten-block tool)

function sar_simple_meta_box() {
    register_meta( 'post', 'sar_meta_key', array(
        'show_in_rest' => true,
        'single'       => true,
        'type'         => 'string',
    ) );
}

add_action( 'init', 'sar_simple_meta_box' );

But I don't see any meta information is saving in wp_postmeta table against meta key sar_meta_key for the post. What I am doing wrong? Am I missing something? Is there anything else I need to do? Please suggest.

I have attached the block plugin (without node_modules directory).
simple-meta-box.zip

NB: Also I am getting this following JS console error when typing into the input box:

Warning: input is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

I looked into React documentation but since I am very new to this world, I cannot figure this out. Any suggestion on this will greatly help.

[youknowriad]

The warning is not very important: just change value={ props.attributes.metakey } to value={ props.attributes.metakey || '' }

Do you have 'custom-fields' support enabled for your post type?

[emfluenceindia]

Great!! Now I can save custom fields against a custom post type as well. Thank you so much for your guidance.

[emfluenceindia]

I have uploaded a sample block at https://github.com/emfluenceindia/gutenberg-custom-field-example. Hope this might help others who has bee struggling to find a composite resource.