我对 Gutenberg 很陌生,刚刚开始学习块开发。今天我尝试创建一个引用this和this的元字段。
这就是我为自定义帖子类型注册元字段的方式:
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&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’ 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
字段中的值。