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.

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.

I am trying to learn how to do this also. You have incorrectly registered your meta value, it should be:

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

See the documentation for the $object_type param here: https://codex.wordpress.org/Function_Reference/register_meta

I don't think will make your JS code work though.

  • You are adding meta to default post but I have a custom post game and I want logo meta to only appear on that post type. The problem is that the meta does not save. I believe it is a JS problem. – Gasim Jun 19 at 6:23
  • 2
    No, if you read the documentation linked above, the first parameter of register_meta should be 'post' even for custom post types. I got it working that way. You can check your meta field is available using the rest link, eg: example.com/wp-json/wp/v2/book/$ID If logo is not listed as a meta field then it will not save and it won't be listed until you change the first parameter of register_meta. – LABCAT Jun 19 at 21:10
  • Since version 4.9.8 there is register_post_meta which accepts the post type. – Alvaro Nov 24 at 21:52

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.