Contact Info

  • aniuma OÜ Harju maakond, Tallinn, Lasnamäe linnaosa, Sepapaja tn 6, 15551

ブロックエディタのコントローラーやパネルをカスタマイズする時に調べたこと

WordPress 5.0 で実装されたブロックエディをカスタマイしたかったので調べたことをまとめました。
WordPress 公式のブロクエディタのハンドブック(フィルター)
https://www.webopixel.net/wordpress/1499.html
ブロックのカスタム設定(コントローラ)を追加する方法

手順としてはプラグイン化してJSのビルド環境を整え、各ブロックのスクリプトを読み込むといった作業が必要でした。
https://www.archetyp.jp/blog/gutenberg/
ブロックエディタのカスタムブロックを開発する手引き
参考記事をいくつか組み合わせて、意図するマージンをブロックのコントローラで実装できるプラグインで試すことはできたのですが開発フローを編みだすのに少々時間がかかりそうです。
https://github.com/musus/custom-gutenberg-block
前述のリンクは僕のテストをしたファイルのリポジトリです。ダウンロードしてプラグインディレクトリに入れればとりあえず段落ブロックのマージン設定コントローラは表示されます。CSSは実装していないのでクラスが付与されるだけです。 Not Wiz Grimoireというブログにブロックエディタのカスタマイズについて何記事あったので一度見ておくとよいでしょう。 ブロックエディター(Gutenberg) – Not Wiz Grimoire

ブロックエディタのカスタマイズ関連記事

https://richardtape.com/2018/10/05/add-a-custom-sidebar-panel-to-gutenberg/
前述の記事と同様にブロックのコントローラを追加する方法
https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/
コントローラにトグル形式のオンオフボタンを設置する
https://not-wiz.net/articles/block-editor/plugin-menu/
Jetpackのようにプラグインメニューをエディター内に作る方法