Gutenberg meta information is saved as HTML comment in post_content field

Question

I am very new to Gutenberg and just started learning block development. Today I have tried to create a meta field taking references of this and this.

This is how I registered the meta field for my custom post type:

function gb_meta_box_init() {
    register_meta( 'ss_event', 'event_hosted_by', array(
        'show_in_rest' => true,
        'single'       => true,
    ) );
}

add_action( 'init', 'gb_meta_box_init' );

Block registration:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( 'ss-events/event-info', {
    title: __( 'Event Info' ),
    icon: 'welcome-view-site',
    category: 'common',
    keywords: [],

    attributes: {
        ev_date:{
            type: 'array',
            source: 'children',
            selector: '.event-date',
        },
        ev_time: {
            type: 'array',
            source: 'children',
            selector: '.event-time',
        },
        venue: {
            type: 'array',
            source: 'children',
            selector: '.event-venue',
        },
        ev_host: {
            type: 'string',
            meta: 'event_hosted_by',
        },
    },

    edit: function( props ) {

        /* define variables */
        let ev_date   = props.attributes.ev_date;
        let venue     = props.attributes.venue;
        let ev_time   = props.attributes.ev_time;
        let host      = props.attributes.ev_host;

        /* define functions */
        function onChangeEventDate( content ) {
            props.setAttributes( { ev_date: content } );
        }

        function onChangeEventTime( content ) {
            props.setAttributes( { ev_time: content } );
        }

        function onChangeVenue( content ) {
            props.setAttributes( { venue: content } );
        }

        function onChangeHost( content ) {
            props.setAttributes( { ev_host: content } );
        }


        return (
            <div id="ss-event-info">
                <h2>Event Information</h2>

                <div>
                    <label><b>Event Date</b></label>
                    <RichText
                        tagName="p"
                        className="event-date"
                        value={ ev_date }
                        onChange={ onChangeEventDate }
                        role="textbox"
                        aria-multiline="false"
                    />
                </div>

                <div>
                    <label>Event Time</label>
                    <RichText
                        tagName="p"
                        className="event-time"
                        value={ ev_time }
                        onChange={ onChangeEventTime }
                        role="textbox"
                        aria-multiline="false"
                    />
                </div>

                <div>
                    <label>Venue</label>
                    <RichText
                        tagName="p"
                        className="event-venue"
                        value={ venue }
                        onChange={ onChangeVenue }
                        role="textbox"
                        aria-multiline="false"
                    />
                </div>

                <div>
                    <label>Hosted by (this is defined as meta)</label>
                    <RichText
                        tagName="p"
                        className="event-host"
                        value={ host }
                        onChange={ onChangeHost }
                        role="textbox"
                        aria-multiline="false"
                    />
                </div>
            </div>
        );
    },

    save: function() {
        return null;
    },
} );

When I saved the post and checked the the content of post_content field, the value I see there is like this:

<!-- wp:ss-events/event-info {"ev_host":["Dipankar Ghosh and Subrata Sarkar"]} -->
<div class="wp-block-ss-events-event-info"><div class="event-teaser">Travel Talk is an event where people come and share their experiences of their trips. It helps others to know more about a place.</div><div class="event-date">September 09, 2018</div><div class="event-time">4.30 PM to 8.30 PM</div><div class="event-venue">PRC Uttarpara, 1st floor</div><div class="event-nature">Travel Talk</div><div class="event-org">Uttarpara Tourists' Association</div></div>
<!-- /wp:ss-events/event-info -->

The meta information is saved but as an HTML comment.

<!-- wp:ss-events/event-info {"ev_host":["Dipankar Ghosh and Subrata
Sarkar"]} -->

Then I went on and tried REST API to see how the JSON looks like. As predicted, since the data was saved as HTML comment, it did not have any meta key in it.

Here is the JSON output (without any meta key) of http://local.subratasarkar.com/wp-json/wp/v2/ss_event/654

{
    "id": 654,
    "date": "2018-09-04T18:32:44",
    "date_gmt": "2018-09-04T13:02:44",
    "guid": {
        "rendered": "http:\/\/local.subratasarkar.com\/?post_type=ss_event&p=654"
    },
    "modified": "2018-09-04T18:32:44",
    "modified_gmt": "2018-09-04T13:02:44",
    "slug": "travel-talk-2018",
    "status": "publish",
    "type": "ss_event",
    "link": "http:\/\/local.subratasarkar.com\/events\/travel-talk-2018\/",
    "title": {
        "rendered": "Travel Talk 2018"
    },
    "content": {
        "rendered": "<div class=\"wp-block-ss-events-event-info\"><div class=\"event-teaser\">Travel Talk is an event where people come and share their experiences of their trips. It helps others to know more about a place.<\/div><div class=\"event-date\">September 09, 2018<\/div><div class=\"event-time\">4.30 PM to 8.30 PM<\/div><div class=\"event-venue\">PRC Uttarpara, 1st floor<\/div><div class=\"event-nature\">Travel Talk<\/div><div class=\"event-org\">Uttarpara Tourists&#8217; Association<\/div><\/div>\n",
        "protected": false
    },
    "featured_media": 0,
    "parent": 0,
    "template": "",
    "_links": {
        "self": [{
            "href": "http:\/\/local.subratasarkar.com\/wp-json\/wp\/v2\/ss_event\/654"
        }],
        "collection": [{
            "href": "http:\/\/local.subratasarkar.com\/wp-json\/wp\/v2\/ss_event"
        }],
        "about": [{
            "href": "http:\/\/local.subratasarkar.com\/wp-json\/wp\/v2\/types\/ss_event"
        }],
        "wp:attachment": [{
            "href": "http:\/\/local.subratasarkar.com\/wp-json\/wp\/v2\/media?parent=654"
        }],
        "curies": [{
            "name": "wp",
            "href": "https:\/\/api.w.org\/{rel}",
            "templated": true
        }]
    }
}

But according to the articles I am referencing (above), it should have the meta key.

And I may be wrong, when I declare a meta, does it get saved in wp_postmeta table?

Update

I have just taken the reference of this and changed the attribute to

ev_host: {
   type: 'string',
   source: 'meta',
   meta: 'ev_host',
},

and now the meta data is not saving at all! When I come back to edit the post the meta box is empty. I don't see the value saved in the post_content field either.

Answer 1

Does your custom post type support 'custom-fields' ?

$args = array( //...
'supports' => array( 'editor', 'title', 'revisions', 'page-attributes', 'custom-fields' ),
//...
);

I had the same problem and found this solution here : https://github.com/WordPress/gutenberg/issues/5622.

I can see the meta-property appearing for my posts now, but I get a 403 Forbidden every time I try to save a post :/

I hope this helps :)

EDIT :

I fixed the Forbiden error by removing '_' prefixes from my meta attributes. Meta attributes prefixed with underscore are meant to be private, and I guess that's why it was forbidden.