SlotFill リファレンス

Slot と Fill は外部に公開されたコンポーネントで、開発者は Gutenberg 管理画面内の事前定義された場所に項目を注入できます。 詳細については SlotFill コンポーネントのドキュメントを参照してください。

SlotFill を使用するには @wordpress/plugins API を使用して項目を注入するプラグインを登録する必要があります。

基本的な使用方法

SlotFill に悪世するには4つの手順が必要です。

  1. wp.plugins から registerPlugin メソッドを import します。
  2. wp.editPost から必要な SlotFill を import します。
  3. 変更をレンダリングするメソッドを定義します。変更や追加は import した SlotFill コンポーネントにラップされます。
  4. プラグインを登録します。

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 Status & visibility 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 はエディター内で外部に公開されます。以下の例はコアのもので「ステータスと公開状態」パネルを表します。

見て分かるように <PluginPostStatusInfo.Slot> はパネルに表示されるすべての項目をラップします。SlotFill 経由で追加されたすべての項目 (上の例参照) は、fills パラメータに含まれ、<PostAuthor/> と <PostTrash/> コンポーネントの間に表示されます。

コアのコードを参照してください。

const PostStatus = ( { isOpened, onTogglePanel } ) => (
    <PanelBody
        className="edit-post-post-status"
        title={ __( 'Status & visibility' ) }
        opened={ isOpened }
        onToggle={ onTogglePanel }
    >
        <PluginPostStatusInfo.Slot>
            { ( fills ) => (
                <Fragment>
                    <PostVisibility />
                    <PostSchedule />
                    <PostFormat />
                    <PostSticky />
                    <PostPendingStatus />
                    <PostAuthor />
                    { fills }
                    <PostTrash />
                </Fragment>
            ) }
        </PluginPostStatusInfo.Slot>
    </PanelBody>
);

現在利用可能な SlotFill とサンプル

現在 edit-post パッケージでは8個の SlotFill が利用可能です。詳細な使用方法と例についてはそれぞれの項目を参照してください。

最終更新日: