SlotFill リファレンス

Topics

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

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

基本的な使用方法

SlotFill にアクセスするには4つの手順が必要です。

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

PluginPostStatusInfo SlotFill を使用するサンプルコードです。

import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/editor';

const PluginPostStatusInfoTest = () => (
	<PluginPostStatusInfo>
		<p>Post Status Info SlotFill</p>
	</PluginPostStatusInfo>
);

registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );

Top ↑

SlotFill コンテンツの条件付きレンダリング

すべての利用可能な SlotFill は、MainDashboardButton を除き、投稿エディターとサイトエディターの両方に公開され、登録された Fill は両方のコンテキストでレンダーされます。条件付きで Fill をレンダーする複数の実装アプローチがあります。

Top ↑

Fill を投稿エディターに制限する

Fill を投稿エディターに制限するには、現在の投稿タイプのオブジェクトプロパティ viewable が true に設定されているかどうかを確認します。viewable に設定されていない投稿タイプは、関連する投稿編集画面を持っていません。以下の例では任意の登録された投稿タイプに対して、コンテンツを投稿編集画面に表示します。

/**
 * WordPress の依存
 */
import { registerPlugin } from '@wordpress/plugins';
import {
	PluginDocumentSettingPanel,
	store as editorStore,
} from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
 * プラグインの一部としてレンダーされるコンポーネント
 */
const EditPostDocumentSettingPanel = () => {
	// 現在の投稿タイプの情報を取得
	const isViewable = useSelect( ( select ) => {
		const postTypeName = select( editorStore ).getCurrentPostType();
		const postTypeObject = select( coreStore ).getPostType( postTypeName );
		return postTypeObject?.viewable;
	}, [] );

	// 投稿タイプが viewable でなければ、Fill をレンダーしない
	if ( ! isViewable ) {
		return null;
	}

	return (
		<PluginDocumentSettingPanel
			name="custom-panel"
			title={ __( 'Post Editor Example' ) }
			className="custom-panel"
		>
			<p>{ __( 'Only appears in the Edit Post screen' ) }</p>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin( 'example-post-edit-only', {
	render: EditPostDocumentSettingPanel,
} );

Top ↑

Fill を特定の投稿タイプに制限する

次の例では、上の例を拡張して、Fill のレンダーを許可する投稿タイプのリストを作成します。ここでは Fill はページの編集時にのみレンダーされます。

/**
 * WordPress の依存
 */
import { registerPlugin } from '@wordpress/plugins';
import {
	PluginDocumentSettingPanel,
	store as editorStore,
} from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';

/**
 * プラグインの一部としてレンダーされるコンポーネント
 */
const RestrictPostTypes = () => {
	// 現在の投稿タイプの情報を取得
	const { isViewable, postTypeName } = useSelect( ( select ) => {
		const postType = select( editorStore ).getCurrentPostType();
		const postTypeObject = select( coreStore ).getPostType( postType );
		return {
			isViewable: postTypeObject?.viewable,
			postTypeName: postType,
		};
	}, [] );

	// プラグインのレンダーを許可された投稿タイプのリスト
	const allowedPostTypes = [ 'page' ];

	// 投稿タイプが viewable でない、または、許可リストになければ、プラグインをレンダーしない
	if ( ! isViewable || ! allowedPostTypes.includes( postTypeName ) ) {
		return null;
	}

	return (
		<PluginDocumentSettingPanel
			name="custom-panel"
			title={ __( 'Restrict Post Types Example' ) }
			className="custom-panel"
		>
			<p>
				{ sprintf(
					__(
						'Only appears on Post Types that are in the allowed list. %s'
					),
					allowedPostTypes.join( ', ' )
				) }
			</p>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin( 'example-restrict-post-types', {
	render: RestrictPostTypes,
} );

Top ↑

Fill をサイトエディターに制限する

Fill をサイトエディターに制限するには、逆の論理が成り立ちます。投稿タイプオブジェクトの viewable プロパティが true に設定されていれば Fill はレンダーしません。以下の例では、任意のサイトエディターの画面でコンテンツがレンダーされます。

/**
 * WordPress の依存
 */
import { registerPlugin } from '@wordpress/plugins';
import {
	PluginDocumentSettingPanel,
	store as editorStore,
} from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
 * プラグインの一部としてレンダーされるコンポーネント
 */
const SiteEditorDocumentSettingPanel = () => {
	// 現在の投稿タイプの情報を取得
	const isViewable = useSelect( ( select ) => {
		const postTypeName = select( editorStore ).getCurrentPostType();
		const postTypeObject = select( coreStore ).getPostType( postTypeName );

		// viewable な投稿タイプは、WordPress の管理画面で表示可能。内部的なものは viewable に設定されない。
		return postTypeObject?.viewable;
	}, [] );

	// 投稿タイプが viewable なら、Fill をレンダーしない
	if ( isViewable ) {
		return null;
	}

	return (
		<PluginDocumentSettingPanel
			name="custom-panel"
			title={ __( 'Site Editor Example' ) }
			className="custom-panel"
		>
			<p>{ __( 'Only appears in the Site Editor' ) }</p>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin( 'example-site-editor', {
	render: SiteEditorDocumentSettingPanel,
} );

Top ↑

Fill をサイトエディターの特定の画面に制限する

次の例は上の例をベースに、サイトエディター内で Fill をレンダーする画面を制御する、許可リストが提供されています。

/**
 * WordPress の依存
 */
import { registerPlugin } from '@wordpress/plugins';
import {
	PluginDocumentSettingPanel,
	store as editorStore,
} from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';

/**
 * プラグインの一部としてレンダーされるコンポーネント
 */
const SiteEditorDocumentSettingPanel = () => {
	// サイトエディター内の許可されるエリア
	const allowedSiteEditorScreens = [
		'wp_template', // テンプレート
		'wp_block', // パターン
		'wp_template_part', // テンプレートパーツ
	];

	const { isViewable, postType } = useSelect( ( select ) => {
		const postTypeName = select( editorStore ).getCurrentPostType();
		const postTypeObject = select( coreStore ).getPostType( postTypeName );

		return {
			// viewable な投稿タイプは、WordPress の管理画面で表示可能。内部的なものは viewable に設定されない。
			isViewable: postTypeObject?.viewable,
			postType: postTypeName,
		};
	}, [] );

	// 投稿タイプが viewable なら、Fill をレンダーしない
	if ( isViewable || ! allowedSiteEditorScreens.includes( postType ) ) {
		return null;
	}

	return (
		<PluginDocumentSettingPanel
			name="custom-panel"
			title={ __( 'Restricted to Site Editor screens' ) }
			className="custom-panel"
		>
			<p>
				{ sprintf(
					__(
						'Only appears on Editor Screens that are in the allowed list. %s'
					),
					allowedSiteEditorScreens.join( ', ' )
				) }
			</p>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin( 'example-site-editor-only', {
	render: SiteEditorDocumentSettingPanel,
} );

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 パラメータに含まれ、コンポーネントの最後に表示されます。

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

export default function PostSummary( { onActionPerformed } ) {
	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
		// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
		const { isEditorPanelRemoved } = select( editorStore );
		return {
			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
		};
	}, [] );

	return (
		<PostPanelSection className="editor-post-summary">
			<PluginPostStatusInfo.Slot>
				{ ( fills ) => (
					<>
						<VStack spacing={ 4 }>
							<PostCardPanel
								onActionPerformed={ onActionPerformed }
							/>
							<PostFeaturedImagePanel withPanelBody={ false } />
							<PostExcerptPanel />
							<VStack spacing={ 1 }>
								<PostContentInformation />
								<PostLastEditedPanel />
							</VStack>
							{ ! isRemovedPostStatusPanel && (
								<VStack spacing={ 2 }>
									<VStack spacing={ 1 }>
										<PostStatusPanel />
										<PostSchedulePanel />
										<PostURLPanel />
										<PostAuthorPanel />
										<PostTemplatePanel />
										<PostDiscussionPanel />
										<PageAttributesPanel />
										<PostSyncStatus />
										<BlogTitle />
										<PostsPerPage />
										<SiteDiscussion />
										<PostFormatPanel />
										<PostStickyPanel />
									</VStack>
									<TemplateAreas />
									{ fills }
								</VStack>
							) }
						</VStack>
					</>
				) }
			</PluginPostStatusInfo.Slot>
		</PostPanelSection>
	);
}

Top ↑

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

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

原文

最終更新日: