SlotFill リファレンス

Topics

  • 基本的な使用方法
  • どのように動作するか ?
  • 現在利用可能な 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 } );

Top ↑

どのように動作するか ?

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>
);

Top ↑

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

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

原文

Repoを選択する

最終更新日: