カスタムフィールド製造業からの脱却 〜ブロックエディター（Gutenberg）をカスタムする方法〜

概要

これまでカスタムフィールドを活用して、オリジナルブロックエディタを作成していましたが、Gutenbergの登場により、同様のことができるようになりました。

もちろん標準の機能ではできないこともありますが、カスタムすることで、これまで同様に。むしろ、カスタムフィールドでのオリジナルブロックエディタの問題点を解決した形で実装できるようになります。

実際に切り替えを行っていく中での考え方や、開発のポイント等をご紹介する中で、ブロックエディター（Gutenberg）のカスタマイズの方法をお伝えして行きたいと思います。

スピーカー

株式会社サンナナ しずみさん

スライド

内容

カスタムフィールド製造業とは

カスタムフィールドを駆使してWordPressのサイトを作る仕事

Gutenbergとブロックエディタの違い

2019年11月1時点のお話。2018年12月までは「Gutenberg」はエディタの名前でもあった。混同して使いやすいのでお気を付けを。

• Gutenbergはプロジェクト名
• ブロックエディタはエディタの名前

Gutenbergの先

• 基盤整備
• コンテンツの外側をカスタマイズする
• コラボレーション機能（Googleドキュメントみたいに複数人の同時編集
• 複数言語の入力支援

Advanced Custom Fieldの問題

• 標準検索ではインデックスされない
  • カスタムフィールドを検索対象にするためのプラグインもあるが検索に時間がかかる
• 操作ミスで別テーマに変更すると内容が何も表示されない
  • ちょっと知見のある人がテーマをすると白い画面…

Gutenbergのブロックエディタをカスタマイズ

Advanced Custom Fieldを使わずしても同様のことはブロックエディタをカスタマイズしてできるようになった。

見出し

• 見出し要素のレベルを決定
• 画像にするか

左右に分けるコンテンツ

• ブロックエディタはカラムブロックを使えば解決

さらに細かく制御が必要な場合

基本的な部分は標準機能でいけるのだけど、出力については一工夫必要する。例えば次のような見出しを

<h2>Heading</h2>

以下のようにする場合は、

<div class="grid-x">
<div class="cell">Heading</div>
</div>

blocks.getSaveElementを使用して保存形式を書き換える

参考）Block Editor Handbook > Block filters

まったく新しいタイプのブロックエディタ

• 複数個の入力欄が存在するものも作成できる
• blocks.registerBlockType
• editor.BlockEdit
• blocks.getSaveContent.extraProps

設計

• 立ち止まって考えることも必要だけど、設計を実証するためのデモWPは用意しておくと良い

Q&A

ACFの繰り返しはブロックエディタで実装できる？

理論上の実装は可能。inner blockというものがヒントになるらしい。 ブロックの中にブロックを作ればなんとか。

複合検索の精度は？

（ここは正直よく聴き取れなかった）
カスタムタクソノミーを使って使いやすくする

感想

• いつの間にかACFを使うまでもなく複雑なフィールドが使えそう
• これを実装する人のスキルセットって難しそう
• フロントとバックとそこそこできる人でないとなぁ…。