Gutenbergとは
Gutenbergとは、WordPress5.0から標準となったエディタです。
読み方：ぐーてんべるぐ
どんなものなのかは公式のドキュメントに載っています。
https://ja.wordpress.org/gutenberg/
WordPress5.0からTinyMCEエディタ（便宜上、以下クラシックエディタと呼びます）はGutenbergエディタに置き換わりました。
エディタをどちらかから選べるようになったではなくて、置き換わりました。
今回はその新しいエディタ「Gutenberg」について調べたことを書きます。
よくある導入記事だと思ってください。色々と試行して感じたことを中心に書いています。
Gutenbergからクラシックエディタに戻すことができる
プラグインから戻す
これまでのクラシックエディタは公式からプラグインとして提供されています。
https://ja.wordpress.org/plugins/classic-editor/
こちらのプラグインをインストールして有効化すればGutenbergがクラシックエディタに置き換わります。
記事フィールドが対象となります。プラグインにもよりますが、カスタムフィールドは置き換わりません。
一括で置き換わるので、エディタの併用はできません。
また、TinyMCEで使用していたエディタ装飾のプラグインはGutenbergでは使用できない、というものがほとんどです。
コードからフィルターを使用して戻す
use_block_editor_for_postフィルターを使用すると、クラシックエディタを使用するかしないかを切り替えることができます。
こちらの方法だと投稿タイプごとの分岐も作成できます。
https://developer.wordpress.org/reference/functions/use_block_editor_for_post/
function my_use_block_editor_for_post($use_block_editor, $post)
{
if($post->post_type == 'fuga')
{
return true;
}
return false;
}
add_filter( 'use_block_editor_for_post', 'my_use_block_editor_for_post',10,2);
参考
https://www.nxworld.net/wordpress/wp-disable-gutenberg.html
Gutenbergでの入力/表示のカスタマイズはほぼJavaScriptで行う
Gutenbergのカスタマイズ…というはほぼブロックの作成になるのですが、ブロックの作成自体はJavaScriptで行います。
カスタマイズしたブロックをプラグインとして登録します。登録する処理はPHPで書きますが、ブロックの作成はJavaScriptです。
どうにかしてPHPのみでできないのか…というのはほぼ不可能なのでカスタマイズが必要な場合はJavaScriptを覚えましょう。
（注：React+JSXで作成しますが、そのあたりは別で書きます）
誤解の招かないように書いておくと、JavaScriptのみでも作成できません。PHPとJavaScript両方の知識が必要です。
複数人で分業して作成もできなくはない…ですが、だれかが完璧でなくてもいいので、両方を知っている方が楽なように感じます。
HTML/CSSについては書けなくてもいいのですが、人が書いたものを理解できる程度の知識はあったほうがいいです。
実際にブロックを作った時には、ブロック要素/インライン要素についてと、class名とid名の違い、セレクタについては頭に入れておいたほうがいいと感じました。
解説サイトは少ない
2020年1月現在、Gutenbergについて解説しているサイトは本当に少ないです。
エディタの使用方法についてという観点ではそれなりに存在しますが、カスタマイズについては少ないです。
そのため「コピペして動かせる」というようなサンプルはほぼ出回ってません。
カスタムフィールドとの併用について
カスタムフィールドとは併用できます。こちらの場合、エディタにWYSIWYGを指定するとクラシックエディタを使用できます。
（むしろエディタとしてGutenbergを使用するプラグインは今のところ少数派なような気がします）
おそらくなのですが、カスタムフィールドを操作するプラグインの場合はプラグイン独自でWYSIWYGエディタを持っているので、WordPressの変更点とはあまり関係がないのかも…ですね。
画像はカスタム投稿に記事入力としてGutenbergを使用して、カスタムフィールドのプラグイン「Smart Custom Fields」にてカスタムフィールドを追加してみたものです。
作成した独自ブロックはプラグインとして登録する（ほうが良い）
Gutenbergをカスタマイズする場合は、だいたいは「独自のブロックを作成」という方法になります。
作成した独自のブロックをプラグインとして登録し、有効化させることで独自ブロックが使用できます。
また、使用しないときは作成したプラグインを停止させます。
functions.phpに書かなくても良いので、コードがしっちゃかめっちゃかにならなくて済みますね。
（プラグイン化せずともfunctions.phpで登録できなくもないですが、管理が面倒になります）
プラグインにしておくと、別のサイトでも使おうとなった時に設定が楽です。プラグインを持ってくれば良いだけなので。
チュートリアルに沿ったブロック作成+開発環境について
長くなりましたので、記事を分けました。続きは次回に。
追記
2020/1/15
クラシックエディタに戻す方法にフィルターでの方法を追記しました。