この記事は最後に更新してから1年以上経過しています。

Gutenberg、初見です

説明

先週末、WordPress 4.9.8がリリースされ、事前に告知されてたように「Gutenberg」がお披露目になった。投稿編集ページがガラリと変わり、影響範囲はそれなりに大きいと思われる。まずはこの週末に感じたことを整理してみた。

「新しいエディター」と「旧エディター」

4.9.8へアップデートすると、ダッシュボードに「新しいエディター」ウィジェットが表示される。ここで「Gutenberg」をプラグインとしてインストールし、有効化するのが第一歩となる。なお影響範囲がはっきりしないので、開発環境で試していく。

まずは「投稿一覧」。「新規追加」の「▼」をクリックすると「Gutenberg」と「旧エディター」のプルダウンメニューが表示されている。また一覧中の記事タイトルにマウスを移動すると、「編集」の次に「旧エディター」が追加されている。ここで「旧エディター」をクリックすれば、従来の投稿編集ページになる。

投稿一覧では編集方法が選択できる

この投稿一覧表の上部にある「すべての日付」や「カテゴリー一覧」が標準と異なっているのは、自作プラグイン「Posts filter multiselect」によるものだ。ざっと試したところではこのプラグインは4.9.8環境でも問題なく動作している。

正常に動作しなかったのは、記事タイトルにマウスを移動させた際に表示される「複製」リンク。これはダッシュボードや投稿編集ページにおいて投稿記事の検索ボックスを表示する自作プラグイン「Somewhere search box」の機能の1つで、指定された投稿の本文などを読み込んだ状態で新規投稿ページを開く機能だが、期待通りの動作にはなっていない。この機能の実装は'default_content'フィルターを利用しているのだが、何らかの修正が必要である。

「ビジュアルエディター」と「コードエディター」

「投稿一覧」ページにおいて「新規追加」の「Gutenberg」、記事タイトルおよびその下にある「編集」をクリックすると、「Gutenberg」の新しい編集ページが表示される。

「ビジュアルエディター」と「コードエディター」で切替可能

新しい編集ページはすっきりな構成で、見慣れた「カスタムフィールド」のエリアがない。カスタムフィールドはいくつかのサイトで利用しているので、ここにも対策が必要になる。また、一部サイトにおいて'edit_form_after_title'アクションを使用して投稿タイトル直下にフォームを追加しているのだが、新しい編集ページでは何も表示されない。新しい編集ページへの移行はかなり悩ましい。

REST API必須

さて「Gutenberg」の新しい編集ページだが、カスタム投稿タイプを使っている場合は注意が必要である。新しい編集ページに切り替わるためにはいくつか条件があり、その1つがREST APIが有効になっていること。 register_post_type関数で投稿タイプを登録する際、'show_in_rest'プロパティの値がtrueになっていないと編集ページは従来のままとなる。またREST APIを無効化している場合は、新しい編集ページに切り替わったタイミングで何も表示されない(何かエラーメッセージが表示されてもいいと思う)。

WordPress 5.0のリリース日はまだ発表されていないと思うのだが、自作のプラグインやサイトの改修をリリース日までに対応するのはかなり厳しい。できるだけ公開しているプラグインは対応したいのだが。。。


最終更新 : 2018年08月06日 17:47

お勧め

add_rewrite_rule(2018年5月27日 更新)

void add_rewrite_rule( string $regex, string $redirect [ , string $after = 'bottom' ] )
リライトルールを追加する(リライトルール追加用のデータを登録する)。

post_type_supports(2018年5月27日 更新)

bool post_type_supports( string $post_type, string $feature )
投稿タイプが特徴(≒編集要素)を有しているか調べる。

sanitize_textarea_field(2018年5月27日 更新)

string sanitize_textarea_field( string $str )
TEXTAREA要素に入力された文字列またはデータベースに格納された複数行文字列をサニタイズする。

get_all_category_ids(2014年9月5日 更新)

array get_all_category_ids( )
すべてのカテゴリIDを取得する。

esc_xml(2020年8月17日 更新)

string esc_xml( string $text )
XML要素向けにエスケープする。