0

我对 Gutenberg 很陌生,刚刚开始学习块开发。今天我尝试创建一个引用thisthis的元字段。

这就是我为自定义帖子类型注册元字段的方式:

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' );

块注册:

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;
    },
} );

当我保存帖子并检查post_content字段内容时,我看到的值是这样的:

<!-- 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 -->

元信息保存为 HTML 注释。

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

然后我继续尝试使用 REST API 来查看 JSON 的样子。正如预测的那样,由于数据被保存为 HTML 注释,因此其中没有任何meta键。

这是 JSON 输出(没有任何meta键)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&#038;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
        }]
    }
}

但是根据我引用的文章(上面),它应该有元键。

而且我可能错了,当我声明 a 时meta,它会保存在wp_postmeta表中吗?

更新

我刚刚参考了这个并将属性更改为

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

现在元数据根本没有保存!当我回来编辑帖子时,元框是空的。我也没有看到保存在该post_content字段中的值。

4

1 回答 1

2

您的自定义帖子类型是否支持“自定义字段”?

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

我遇到了同样的问题,在这里找到了这个解决方案:https ://github.com/WordPress/gutenberg/issues/5622 。

我现在可以看到我的帖子出现的元属性,但每次我尝试保存帖子时都会收到 403 Forbidden :/

我希望这有帮助 :)

编辑 :

我通过从我的元属性中删除“_”前缀来修复禁止错误。带有下划线前缀的元属性是私有的,我想这就是它被禁止的原因。

于 2018-09-19T17:22:51.527 回答