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

WordPress 5.0 で実装されたブロックエディをカスタマイしたかったので調べたことをまとめました。
WordPress Developer Resources
Block Filters | Block Editor Handbook | WordPress Developer ResourcesTo modify the behavior of existing blocks, WordPress exposes several APIs: Block Style Variations Block Style Variations allow providing…
WordPress 公式のブロクエディタのハンドブック(フィルター)
webOpixel
Gutenbergで既存のブロックにカスタム設定を追加する方法
Gutenbergで既存のブロックにカスタム設定を追加する方法Gutenbergはサイドバーに「高度な設定」というクラス名を入力できる欄があるのですが、これだとクラス名を覚えていなくてはいけなくて、制作者以外の人に入力してもらうの...
ブロックのカスタム設定(コントローラ)を追加する方法

手順としてはプラグイン化してJSのビルド環境を整え、各ブロックのスクリプトを読み込むといった作業が必要でした。
ARCHETYP BLOG
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン|株式会社アーキタ...
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン|株式会社アーキタ...WordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発についてご紹介します。
ブロックエディタのカスタムブロックを開発する手引き
参考記事をいくつか組み合わせて、意図するマージンをブロックのコントローラで実装できるプラグインで試すことはできたのですが開発フローを編みだすのに少々時間がかかりそうです。
GitHub
musus/custom-gutenberg-block
musus/custom-gutenberg-blockContribute to musus/custom-gutenberg-block development by creating an account on GitHub.
前述のリンクは僕のテストをしたファイルのリポジトリです。ダウンロードしてプラグインディレクトリに入れればとりあえず段落ブロックのマージン設定コントローラは表示されます。CSSは実装していないのでクラスが付与されるだけです。 Not Wiz Grimoireというブログにブロックエディタのカスタマイズについて何記事あったので一度見ておくとよいでしょう。 ブロックエディター(Gutenberg) – Not Wiz Grimoire
目次

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

richardtape.com
Add a custom sidebar panel to Gutenberg - richardtape.com
Add a custom sidebar panel to Gutenberg - richardtape.comNeed to add a custom sidebar panel to Gutenberg? With your own control? Which can control core or custom blocks? Here's how!
前述の記事と同様にブロックのコントローラを追加する方法
Jeffrey Carandang
Extend Gutenberg Blocks with Custom Attributes and Controls – Jeffrey Carandang
Extend Gutenberg Blocks with Custom Attributes and Controls – Jeffrey CarandangCreate custom Gutenberg block attributes & control using these available filters: blocks.registerBlockType, editor.BlockEdit & blocks.getSaveContent.extraProps
コントローラにトグル形式のオンオフボタンを設置する
https://not-wiz.net/articles/block-editor/plugin-menu/
Jetpackのようにプラグインメニューをエディター内に作る方法
よかったらシェアしてね!

この記事を書いた人

Susumu Seinoのアバター Susumu Seino Lead Member

9歳から独学でプログラミングをはじめ、2014年にフリーランスのWebプログラマーとして独立。2019年にデジタルマーケティング事業をおこなう「aniuma OÜ」をエストニアで設立。特定の住居を持たないデジタルノマドとして、リモートワークで世界中を働きながら旅をする。

コメント

コメントする

目次
閉じる