Gutenbergの Slot と Fill を理解する
Gutenberg（ブロックエディタ）の開発において Slot と Fill の理解は重要です。
- RichTextToolbarButton で追加したものがリッチテキストのツールバーに表示される
- InspectorControls で追加したものがサイドバーに表示される
- BlockControls で追加したものがブロック用のツールバーに表示される
これらはすべて Slot と Fill で実現されています。
仕組み
React の createContext を利用して実装されています。
上のハンドブックの例のように Slot と同じ name で Fill を作成すると 、Slot に Fill の要素が表示されます。
Gutenbergにはあらかじめいくつかの Slot が埋め込まれているため、 Fill を使用することでその場所にコンポーネントを追加することが可能です。
ただし Fill を直接利用することは恐らく推奨されていません。
その代わりに Fill を意識しなくても利用できるような仕組みが提供されています。
利用可能な Slot とそれを使用するための手段
この情報は 2019/03/26 時点のものです。
ツールバー系のSlot
RichText.ToolbarControls
RichText のツールバーボタンはこの Slot を利用して実装されています。
RichTextToolbarButtonを使用することで、この Slot を利用するための Fill が作成されます。
Gutenberg v5.3 からはこの Slot の要素はすべてドロップダウンにまとまるようになっています。
BlockControls
ブロック用のコントロールを追加するための Slot です。
BlockControlsを使用することで Slot を利用できます。
リッチテキストコンポーネントの場合、ツールバーボタンより前に追加されます。
BlockFormatControls
ブロック用のフォーマットコントロールを追加するための Slot です。
BlockFormatControlsを使用することで Slot を利用できます。
リッチテキストコンポーネントの場合、ツールバーボタンより後ろに追加されます。
サイドバー系のSlot
InspectorControls
サイドバーを使用するための Slot です。
InspectorControlsを使用することで Slot を利用できます。
InspectorAdvancedControls
高度な設定用のサイドバーを利用するための Slot です。
InspectorAdvancedControlsを使用することで Slot を利用できます。
ToolsMoreMenuGroup
さらに表示で表示されるポップアップに表示させることができます。
Plugin系のSlot
registerPlugin で登録されたプラグインから利用されることが想定される Slot です。
プラグインの登録に関しては以下の記事を参考にしてください。
PluginPrePublishPanel
公開前のパネルに表示させることができます。
使用方法は下記参照
PluginPostPublishPanel
公開後のパネルに表示させることができます。
使用方法は下記参照
PluginPostStatusInfo
投稿ステータス情報のパネルに表示させることができます。
使用方法は下記参照
PluginBlockSettingsMenuGroup
ブロック設定ポップアップに表示させることができます。
使用方法は下記参照
PluginsMoreMenuGroup
さらに表示で表示されるポップアップに表示させることができます。
使用方法は下記参照
PinnedPlugins と Sidebar
プラグイン用のパネルを追加できます。
PluginSidebar を使用して登録します。
PinnedPlugins は isPinnable を true （デフォルトでtrue） にすると利用できます。
まとめ
Gutenbergはまだまだ発展段階ですが、現時点でも多くの開発者が思っているより多くの場所に割り込むことができることができる拡張性を持っていると思います。
これらの拡張性を生かせればGutenberg開発の可能性は大きく広がるでしょう
