Gutenberg Trainingをはじめました

Gutenbergで記事は書いてるけどそもそもカスタマイズとかそのへんが全然ノータッチで仕組みもよくわかってなかったので、お勉強をはじめました。

課題を出してもらいながらちょっとずつ。今回のお題はこんな感じ！

Training 1

PHPだけでエディタのカスタマイズに挑戦する

About

「Gutenbergでのエディタカスタマイズ = React = つらい」というイメージを持たれていることが多いですが、実はそんなことありません。

Gutenbergコアに用意されているブロックを並び変えることで、投稿タイプ別にカスタマイズしたエディタを作ることができます。

第一回は、まず「PHPだけ」を使ってどこまでエディタをカスタマイズできるかに挑戦しましょう。

Goal

簡単にエディタをカスタマイズする方法を覚える
カスタムブロックを作るべきか否かの判断ができるようになる
コアブロックの種類とTemplate機能を理解する

Tasks

PHP（Templates）だけでチャレンジしてください
投稿のエディタを３ブロック以上使用してカスタマイズしてください
カスタム投稿タイプを作成し、投稿で使用していないブロックを用いたエディタカスタマイズに挑戦しましょう
templateをネストさせて、カラム分割したエディタをつくりましょう

Output

実践した内容をコード付きで紹介するブログ記事（最低１本）

参考

やってみて

今回は導入という感じでハンドブックのソースをまるっと書くくらいのことしかやってませんが、Gutenbergのカスタマイズはこうやればいいのかーくらいのことは把握しました。

デフォルトで用意されているブロックを活用すればテンプレートのようなものも作れるし、投稿タイプ別に順番のロックもできるのでウェブリテラシーのない人が運用していく上ですごく助かるのではないかな？と思いました。

クラシックエディターだとプラグイン入れてテンプレート作って・・・ってやらないとだめだった気が。（やったことないから人のを見た記憶）

あとはカスタムフィールドでやりましたね。そっちの方が私は馴染み深い。
ただ、カスタムフィールドでやるとテーマ側で色々と書き足しが必要になるので工数が増えるんですよね・・・。
その点、Gutenbergで完結させるとthe_content()のみで済むのがとてもよいですね。何でもかんでもGutenbergで完結させると縛りプレイになってつらそうですが・・・何事も適切に使うべしということですね。

デフォルトで用意されているブロックの一覧はちょっと見つけられませんでしたが、GitHubから参照することができます。

Gutenberg – GitHub

まだまだ課題は続く（はず）なので、使いこなせるようにがんばります。