SlotFill リファレンス
Slot と Fill は外部に公開されているコンポーネントです。開発者は Gutenberg 管理画面内の事前定義された場所に項目を注入できます。
詳細については SlotFill コンポーネントのドキュメントを参照してください。
SlotFill を使用するには @wordpress/plugins API を使用して項目を注入するプラグインを登録する必要があります。
基本的な使用方法
SlotFill にアクセスするには4つの手順が必要です。
wp.plugins
からregisterPlugin
メソッドを import します。wp.editPost
から必要な SlotFill を import します。- 変更をレンダリングするメソッドを定義します。変更や追加は import した SlotFill コンポーネントにラップされます。
- プラグインを登録します。
PluginPostStatusInfo
SlotFill を使用するサンプルコードです。
import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/edit-post';
const PluginPostStatusInfoTest = () => (
<PluginPostStatusInfo>
<p>Post Status Info SlotFill</p>
</PluginPostStatusInfo>
);
registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
どのように動作するか ?
SlotFill は createSlotFill
を使用して作成されます。createSlotFill
は2つのコンポーネント Slot
と Fill
を作成し、これらを使用して wp.plugins
グローバルにエクスポートされる新しいコンポーネントが作成されます。
PluginPostStatusInfo
SlotFill の定義 (コアのコード参照)
/**
* Defines as extensibility slot for the Summary panel.
*/
/**
* WordPress dependencies
*/
import { createSlotFill, PanelRow } from '@wordpress/components';
export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
const PluginPostStatusInfo = ( { children, className } ) => (
<Fill>
<PanelRow className={ className }>{ children }</PanelRow>
</Fill>
);
PluginPostStatusInfo.Slot = Slot;
export default PluginPostStatusInfo;
次にこの新しい Slot はエディター内で外部に公開されます。以下の例はコアのもので「Summary (概要)」パネルを表します。
見て分かるように <PluginPostStatusInfo.Slot>
はパネルに表示されるすべての項目をラップします。SlotFill 経由で追加されたすべての項目 (上の例参照) は、fills
パラメータに含まれ、<PostAuthor/>
と <PostTrash/>
コンポーネントの間に表示されます。
コアのコードを参照してください。
const PostStatus = ( { isOpened, onTogglePanel } ) => (
<PanelBody
className="edit-post-post-status"
title={ __( 'Summary' ) }
opened={ isOpened }
onToggle={ onTogglePanel }
>
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
<PostVisibility />
<PostSchedule />
<PostFormat />
<PostSticky />
<PostPendingStatus />
<PostAuthor />
{ fills }
<PostTrash />
</>
) }
</PluginPostStatusInfo.Slot>
</PanelBody>
);
現在利用可能な SlotFill とサンプル
edit-post
パッケージでは以下の SlotFill が利用可能です。詳細な使用方法と例についてはそれぞれの項目を参照してください。
- MainDashboardButton
- PluginBlockSettingsMenuItem
- PluginDocumentSettingPanel
- PluginMoreMenuItem
- PluginPostPublishPanel
- PluginPostStatusInfo
- PluginPrePublishPanel
- PluginSidebar
- PluginSidebarMoreMenuItem
最終更新日: