MENU

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

2019 11/05
WordPress 5.0 で実装されたブロックエディをカスタマイしたかったので調べたことをまとめました。
WordPress Developer Resources
No Image
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」のカスタムブロック開発についてご紹介します。
ブロックエディタのカスタムブロックを開発する手引き
参考記事をいくつか組み合わせて、意図するマージンをブロックのコントローラで実装できるプラグインで試すことはできたのですが開発フローを編みだすのに少々時間がかかりそうです。
あわせて読みたい
No Image
GitHub - musus/custom-gutenberg-block
前述のリンクは僕のテストをしたファイルのリポジトリです。ダウンロードしてプラグインディレクトリに入れればとりあえず段落ブロックのマージン設定コントローラは表示されます。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のようにプラグインメニューをエディター内に作る方法

この記事を書いた人

aniuma はデジタルパブリッシングのお手伝いをおこないます。 WordPress のエキスパートがシステムの企画・開発・保守をお手伝いします。

コメント

コメントする

目次
閉じる