Gutenberg how to make attribute to save to meta

by

I am playing with Gutenberg and I am a bit confused about how it should save to meta. Here is my custom post and meta:

add_action( 'init', function() {
    register_post_type( 'game', [
        'label' => 'Games',
        'public' => true,
        'supports' => [ 'editor', 'custom-fields' ],
        'show_in_rest' => true,
    ] );

    register_meta( 'game', 'logo', [
        'single' => true,
        'show_in_rest' => true,
        'description'  => 'A meta key associated with a string meta value.',
        'type' => 'string'
    ] );
} );

And my Block JS file:

( function( blocks, i18n, element ) {

    var el = element.createElement;
    var MediaUploadButton = wp.blocks.MediaUploadButton;
    var BlockControls = wp.blocks.BlockControls;

    blocks.registerBlockType( 'game-post/meta', {
        title: i18n.__( 'Game' ),
        description: i18n.__( 'Meta Box for Game' ),
        icon: 'businessman',
        category: 'common',
        attributes: { 
            logo: {
                type: 'string',
                source: 'meta',
                meta: 'logo'
            }   
        },
        edit: function(props) {
            console.log(props.attributes);
            var mediaURL = props.attributes.logo;
            return el('div', {
                classname: mediaURL ? 'image-active' : 'image-inactive'
            }, el('input', {
                defaultValue: mediaURL,
                type: 'text',
                onChange: function(e) {
                    props.setAttributes({ logo: e.target.value });
                }  
            }));
        },
        save: function(props) {
            return el( 'img', { src: props.attributes.logo } );
        }
    } );

} )(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element,
);

I took the source idea from WP Gutenberg Handbook. The attribute is created etc but the values are empty and the meta field is not saved. And the console log in edit function always returns null because there is no meta attribute. What am I doing wrong? If I change the attribute source to attribute, the field is saved properly.

3 Answers
3

The meta value is read when the block loads and assigned to the block attribute. Changes to the block will update the attribute and when the post saves the value will save to the meta. So, as far as I understood, there is no need to actually save anything in the registerBlockType js function. The block only saves to the meta so in the front end nothing will be rendered (unlike non-meta blocks).

So in your case:

add_action( 'init', function() {
    register_post_type( 'game', [
        'label' => 'Games',
        'public' => true,
        'supports' => [ 'editor', 'custom-fields' ],
        'show_in_rest' => true,
    ] );

    register_post_meta( 'game', 'logo', [
        'single' => true,
        'show_in_rest' => true,
        'description'  => 'A meta key associated with a string meta value.',
        'type' => 'string'
    ] );
} );

Notice that I used register_post_meta which was included in version 4.9.8 and allows to use the post type name (“game” in this case). As noticed by @LABCAT in the other answer using register_meta requires the type to be “post” even for custom post types.

Then in the JavaScript file:

registerBlockType( 'game-post/meta', {
    //...
    save: () => null,
});

I hope this helps.

Leave a Comment