Gutenbergでカスタムフィールドを使う

説明

Gutenbergの新エディターではカスタムフィールドのウィジェットが表示されない。既存のカスタムフィールドのデータはなくなるわけでないので、新エディター上で編集・更新できないか調べてみた。

wp_insert_post関数で網を張る

Gutenbergの新エディターでは、「下書き保存」や「公開する」ボタンを押すことで、投稿内容を更新できる。どんなデータが送信されているかを調べてる手がかりとして、wp_insert_post関数内が呼び出されているかを確認。WordPressの投稿情報はこの関数を使って更新されるのだが、Gutenbergの新エディターになってもそれは変わらないようだ。さらに関数が受け取ったパラメータの内容を確認していくと、ウィジェットのフォーム要素の値を受け取ることが可能なことが判明した。

独自ウィジェットを追加することでカスタムフィールドのデータを更新できそうな雰囲気になったので、さっそく試してみた。

Gutenbergでカスタムフィールドプラグインを作る

小1時間ほど試行錯誤し、プラグインとして実装してみた。そのコードは次の通りである。

$cf4g = new cf4g();

class cf4g {
	public function __construct() {
		global $pagenow;
		if ( in_array( $pagenow,
			array( 'post.php', 'post-new.php', 'page.php', 'page-new.php' ) ) ) {
			add_action( 'admin_init', array( &$this, 'admin_init' ) );
		}
	}
	function admin_init() {
		$title = __( 'Custom fields for gutenberg' );
		$types = get_post_types( array( 'public' => true, 'show_in_rest' => true ) );
		foreach ( $types as $type ) {
			add_meta_box( 'cf4g_meta_box', $title, array( &$this, 'meta_box' ), $type );
		}
	}
	function meta_box() {
		global $post;
		if ( function_exists( 'is_gutenberg_page' ) && is_gutenberg_page() ) {
			$value1 = get_post_meta( $post->ID, 'key1', true );
?>
<label>key1:</label>
<input type="text" id="meta_key1" name="meta_input[key1]" value="<?php echo esc_attr( $value1 ); ?>">
<?php
		}
	}
}

機能の概略としては、

• リクエストが投稿編集ページの場合のみ'admin_init'アクションを登録する。
• REST APIに対応した投稿タイプ向けにウィジェットを登録する。
• Gutenbergの新エディターの場合のみカスタムフィールド用のフォームを表示する。

とシンプルな構成になっている。この中にはカスタムフィールドの値を更新するコードは含まれていないが、これはinput要素のname属性値がポイントで'meta_input'の配列として指定しているところがポイント。このように指定することにより、投稿情報の更新を行うwp_insert_post関数内で適切に処理してくれる。ここで紹介したコードでは1つのカスタムフィールドの値を更新しているが、工夫しだいで複数のカスタムフィールドの値を扱うごとも可能である。

なおGutenbergの新エディター向けにフォームを含んだウィジェットを使用する場合は、name属性値を意識すること。name属性値が投稿情報のプロパティ名と重複してしまうと、意図した通りにデータを更新できないといった不具合が生じる可能性がある。この点は十分に注意してほしい。