私はグーテンベルグを初めて使用し、ブロック開発の学習を始めたばかりです。今日、 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 がどのように見えるかを確認しました。meta予想通り、データは HTML コメントとして保存されたため、キーは含まれていませんでした。
の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
}]
}
}
しかし、私が参照している記事 (上記) によると、メタ キーが必要です。
を宣言すると、テーブルmetaに保存されますか?wp_postmeta
アップデート
thisの参照を取得し、属性をに変更しました
ev_host: {
type: 'string',
source: 'meta',
meta: 'ev_host',
},
そして今、メタデータはまったく保存されていません! 投稿を編集するために戻ってきたとき、メタボックスは空です。post_contentフィールドに保存された値も表示されません。