Gutenbergの Slot と Fill を理解する

WordPress

Gutenberg(ブロックエディタ)の開発において Slot Fill の理解は重要です。

  • RichTextToolbarButton で追加したものがリッチテキストのツールバーに表示される
  • InspectorControls で追加したものがサイドバーに表示される
  • BlockControls で追加したものがブロック用のツールバーに表示される

これらはすべて Slot Fill で実現されています。

仕組み

React の createContext を利用して実装されています。

React v16で実装された new Context APIを使って、Reduxへ別れを告げる - Qiita
!( React v1...
SlotFill
Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as “portal” rendering. I...

上のハンドブックの例のように Slot と同じ nameFill を作成すると 、Slot Fill の要素が表示されます。

Gutenbergにはあらかじめいくつかの Slot が埋め込まれているため、 Fill を使用することでその場所にコンポーネントを追加することが可能です。

ただし Fill を直接利用することは恐らく推奨されていません。

その代わりに Fill を意識しなくても利用できるような仕組みが提供されています。

利用可能な Slot とそれを使用するための手段

この情報は 2019/03/26 時点のものです。

ツールバー系のSlot

RichText.ToolbarControls

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

RichText のツールバーボタンはこの Slot を利用して実装されています。

RichTextToolbarButton コンポーネントを使用するとこの Slot を利用するための Fill が作成されます。

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

Gutenberg v5.3 からはこの Slot の要素はすべてドロップダウンにまとまるようになっています。

BlockControls

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

ブロック用のコントロールを追加するための Slot です。

BlockControls コンポーネントを使用することで Slot を利用できます。

リッチテキストコンポーネントの場合、ツールバーボタンより前に追加されます。

BlockFormatControls

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

ブロック用のフォーマットコントロールを追加するための Slot です。

BlockFormatControls コンポーネントを使用することで Slot を利用できます。

リッチテキストコンポーネントの場合、ツールバーボタンより後ろに追加されます。

サイドバー系のSlot

InspectorControls

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

サイドバーを使用するための Slot です。

InspectorControls コンポーネントを使用することで Slot を利用できます。

InspectorAdvancedControls

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

高度な設定用のサイドバーを利用するための Slot です。

InspectorAdvancedControls コンポーネントを使用することで Slot を利用できます。

ToolsMoreMenuGroup

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

さらに表示で表示されるポップアップに表示させることができます。

Plugin系のSlot

registerPlugin で登録されたプラグインから利用されることが想定される Slot です。

プラグインの登録に関しては以下の記事を参考にしてください。

PluginPrePublishPanel

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

公開前のパネルに表示させることができます。

使用方法は下記参照

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

PluginPostPublishPanel

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

公開後のパネルに表示させることができます。

使用方法は下記参照

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

PluginPostStatusInfo

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

投稿ステータス情報のパネルに表示させることができます。

使用方法は下記参照

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

PluginBlockSettingsMenuGroup

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

ブロック設定ポップアップに表示させることができます。

使用方法は下記参照

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

PluginsMoreMenuGroup

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

さらに表示で表示されるポップアップに表示させることができます。

使用方法は下記参照

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

PinnedPlugins と Sidebar

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg
WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

プラグイン用のパネルを追加できます。

PluginSidebar を使用して登録します。

PinnedPlugins は isPinnable を true (デフォルトでtrue) にすると利用できます。

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

まとめ

Gutenbergはまだまだ発展段階ですが、現時点でも多くの開発者が思っているより多くの場所に割り込むことができることができる拡張性を持っていると思います。

これらの拡張性を生かせればGutenberg開発の可能性は大きく広がるでしょう

コメント

タイトルとURLをコピーしました