Gutenberg how to make attribute to save to meta

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.

Read more here:: Gutenberg how to make attribute to save to meta

Leave a Reply

Your email address will not be published. Required fields are marked *