使用概要

SlotFillsにアクセスするためには、次の4つのことを行う必要があります：

  • 1. @wordpress/pluginsパッケージからregisterPluginメソッドをインポートします。
  • 2. @wordpress/editor'パッケージから必要なSlotFillをインポートします。
  • 3. 変更をレンダリングするコンポーネントを定義します。私たちの変更/追加は、インポートしたSlotFillコンポーネントでラップされます。
  • 4. プラグインを登録します。

以下は、PluginPostStatusInfo slotFillを使用した例です： 

  1. import { registerPlugin } from '@wordpress/plugins';
  2. import { PluginPostStatusInfo } from '@wordpress/editor';
  4. const PluginPostStatusInfoTest = () => (
  5.    <PluginPostStatusInfo>
  6.    <p>Post Status Info SlotFill</p>
  7.    </PluginPostStatusInfo>
  8. );
  10. registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );

条件付きでSlotFillコンテンツをレンダリングする

MainDashboardButtonを除いて、利用可能なすべてのSlotFillは、Post EditorとSite Editorの両方で公開されており、登録されたFillは両方のコンテキストでレンダリングされます。Fillsを条件付きでレンダリングするために実装できるアプローチはいくつかあります。

Post EditorにFillsを制限する

Fillは、現在の投稿タイプオブジェクトプロパティviewableがtrueに設定されているかどうかを確認することで、Post Editorに制限できます。viewableに設定されていない投稿タイプは、関連する投稿編集画面を持たず、ユーザーがPost Editorにいないことを示す良い指標です。以下の例は、登録された投稿タイプの編集投稿画面でそのコンテンツをレンダリングします。 

  1. /**
  2.  * WordPress dependencies
  3.  */
  4. import { registerPlugin } from '@wordpress/plugins';
  5. import {
  6.    PluginDocumentSettingPanel,
  7.    store as editorStore,
  8. } from '@wordpress/editor';
  9. import { store as coreStore } from '@wordpress/core-data';
  10. import { useSelect } from '@wordpress/data';
  11. import { __ } from '@wordpress/i18n';
  13. /**
  14.  * The component to be rendered  as part of the plugin.
  15.  */
  16. const EditPostDocumentSettingPanel = () => {
  17.    // Retrieve information about the current post type.
  18.    const isViewable = useSelect( ( select ) => {
  19.    const postTypeName = select( editorStore ).getCurrentPostType();
  20.    const postTypeObject = select( coreStore ).getPostType( postTypeName );
  21.    return postTypeObject?.viewable;
  22.    }, [] );
  24.    // If the post type is not viewable, then do not render my the fill.
  25.    if ( ! isViewable ) {
  26.    return null;
  27.    }
  29.    return (
  30.    <PluginDocumentSettingPanel
  31.    name="custom-panel"
  32.    title={ __( 'Post Editor Example' ) }
  33.    className="custom-panel"
  34.    >
  35.    <p>{ __( 'Only appears in the Edit Post screen' ) }</p>
  36.    </PluginDocumentSettingPanel>
  37.    );
  38. };
  40. registerPlugin( 'example-post-edit-only', {
  41.    render: EditPostDocumentSettingPanel,
  42. } );

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

以下の例は、Fillがレンダリングされる投稿タイプの許可リストを作成することによって、上記の例を拡張します。この場合、Fillはページを編集しているときのみレンダリングされます。 

  1. /**
  2.  * WordPress dependencies
  3.  */
  4. import { registerPlugin } from '@wordpress/plugins';
  5. import {
  6.    PluginDocumentSettingPanel,
  7.    store as editorStore,
  8. } from '@wordpress/editor';
  9. import { store as coreStore } from '@wordpress/core-data';
  10. import { useSelect } from '@wordpress/data';
  11. import { __, sprintf } from '@wordpress/i18n';
  13. /**
  14.  * The component to be rendered  as part of the plugin.
  15.  */
  16. const RestrictPostTypes = () => {
  17.    // Retrieve information about the current post type.
  18.    const { isViewable, postTypeName } = useSelect( ( select ) => {
  19.    const postType = select( editorStore ).getCurrentPostType();
  20.    const postTypeObject = select( coreStore ).getPostType( postType );
  21.    return {
  22.    isViewable: postTypeObject?.viewable,
  23.    postTypeName: postType,
  24.    };
  25.    }, [] );
  27.    // The list of post types that are allowed to render the plugin.
  28.    const allowedPostTypes = [ 'page' ];
  30.    // If the post type is not viewable or not in the allowed list, do not render the plugin.
  31.    if ( ! isViewable || ! allowedPostTypes.includes( postTypeName ) ) {
  32.    return null;
  33.    }
  35.    return (
  36.    <PluginDocumentSettingPanel
  37.    name="custom-panel"
  38.    title={ __( 'Restrict Post Types Example' ) }
  39.    className="custom-panel"
  40.    >
  41.    <p>
  42.    { sprintf(
  43.    __(
  44.    'Only appears on Post Types that are in the allowed list. %s'
  45.    ),
  46.    allowedPostTypes.join( ', ' )
  47.    ) }
  48.    </p>
  49.    </PluginDocumentSettingPanel>
  50.    );
  51. };
  53. registerPlugin( 'example-restrict-post-types', {
  54.    render: RestrictPostTypes,
  55. } );

Site EditorにFillsを制限する

FillsをSite Editorに制限するには、逆の論理が適用されます。投稿タイプオブジェクトのviewableプロパティがtrueに設定されている場合、Fillはレンダリングされるべきではありません。以下の例は、任意のSite Editor画面でそのコンテンツをレンダリングします。 

  1. /**
  2.  * WordPress dependencies
  3.  */
  4. import { registerPlugin } from '@wordpress/plugins';
  5. import {
  6.    PluginDocumentSettingPanel,
  7.    store as editorStore,
  8. } from '@wordpress/editor';
  9. import { store as coreStore } from '@wordpress/core-data';
  10. import { useSelect } from '@wordpress/data';
  11. import { __ } from '@wordpress/i18n';
  13. /**
  14.  * The component to be rendered  as part of the plugin.
  15.  */
  16. const SiteEditorDocumentSettingPanel = () => {
  17.    // Retrieve information about the current post type.
  18.    const isViewable = useSelect( ( select ) => {
  19.    const postTypeName = select( editorStore ).getCurrentPostType();
  20.    const postTypeObject = select( coreStore ).getPostType( postTypeName );
  22.    // A viewable post type is one than can be viewed in the WordPress admin. Internal ones are not set to viewable.
  23.    return postTypeObject?.viewable;
  24.    }, [] );
  26.    // If the post type is viewable, do not render my fill
  27.    if ( isViewable ) {
  28.    return null;
  29.    }
  31.    return (
  32.    <PluginDocumentSettingPanel
  33.    name="custom-panel"
  34.    title={ __( 'Site Editor Example' ) }
  35.    className="custom-panel"
  36.    >
  37.    <p>{ __( 'Only appears in the Site Editor' ) }</p>
  38.    </PluginDocumentSettingPanel>
  39.    );
  40. };
  42. registerPlugin( 'example-site-editor', {
  43.    render: SiteEditorDocumentSettingPanel,
  44. } );

Site Editorの特定の画面にFillsを制限する

この例は、Site Editor内でFillがレンダリングできる画面を制御するための許可リストを提供することによって、上記の例を基にしています。 

  1. /**
  2.  * WordPress dependencies
  3.  */
  4. import { registerPlugin } from '@wordpress/plugins';
  5. import {
  6.    PluginDocumentSettingPanel,
  7.    store as editorStore,
  8. } from '@wordpress/editor';
  9. import { store as coreStore } from '@wordpress/core-data';
  10. import { useSelect } from '@wordpress/data';
  11. import { __, sprintf } from '@wordpress/i18n';
  13. /**
  14.  * The component to be rendered  as part of the plugin.
  15.  */
  16. const SiteEditorDocumentSettingPanel = () => {
  17.    // Allowed areas in the Site Editor.
  18.    const allowedSiteEditorScreens = [
  19.    'wp_template', // Templates
  20.    'wp_block', // Patterns
  21.    'wp_template_part', // Template Parts
  22.    ];
  24.    const { isViewable, postType } = useSelect( ( select ) => {
  25.    const postTypeName = select( editorStore ).getCurrentPostType();
  26.    const postTypeObject = select( coreStore ).getPostType( postTypeName );
  28.    return {
  29.    // A viewable post type is one than can be viewed in the WordPress admin. Internal ones are not set to viewable.
  30.    isViewable: postTypeObject?.viewable,
  31.    postType: postTypeName,
  32.    };
  33.    }, [] );
  35.    // If the post type is viewable, do not render my plugin.
  36.    if ( isViewable || ! allowedSiteEditorScreens.includes( postType ) ) {
  37.    return null;
  38.    }
  40.    return (
  41.    <PluginDocumentSettingPanel
  42.    name="custom-panel"
  43.    title={ __( 'Restricted to Site Editor screens' ) }
  44.    className="custom-panel"
  45.    >
  46.    <p>
  47.    { sprintf(
  48.    __(
  49.    'Only appears on Editor Screens that are in the allowed list. %s'
  50.    ),
  51.    allowedSiteEditorScreens.join( ', ' )
  52.    ) }
  53.    </p>
  54.    </PluginDocumentSettingPanel>
  55.    );
  56. };
  58. registerPlugin( 'example-site-editor-only', {
  59.    render: SiteEditorDocumentSettingPanel,
  60. } );

どのように機能するのか？

SlotFillsはcreateSlotFillを使用して作成されます。これにより、SlotとFillの2つのコンポーネントが作成され、次にwp.pluginsグローバルでエクスポートされる新しいコンポーネントを作成するために使用されます。

PluginPostStatusInfo SlotFillの定義 (コアコードを参照) 

  1. /**
  2.  * Defines as extensibility slot for the Summary panel.
  3.  */
  5. /**
  6.  * WordPress dependencies
  7.  */
  8. import { createSlotFill, PanelRow } from '@wordpress/components';
  10. export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  12. const PluginPostStatusInfo = ( { children, className } ) => (
  13.    <Fill>
  14.    <PanelRow className={ className }>{ children }</PanelRow>
  15.    </Fill>
  16. );
  18. PluginPostStatusInfo.Slot = Slot;
  20. export default PluginPostStatusInfo;

この新しいSlotは、エディタで公開されます。以下の例はコアからのもので、Summaryパネルを表しています。

ご覧のように、<PluginPostStatusInfo.Slot>はパネルに表示されるすべてのアイテムをラップしています。

SlotFillを介して追加されたアイテム（上記の例を参照）は、fillsパラメータに含まれ、コンポーネントの最後に表示されます。

コアコードを参照。 

  1. export default function PostSummary( { onActionPerformed } ) {
  2.    const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
  3.    // We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
  4.    // not use isEditorPanelEnabled since this panel should not be disabled through the UI.
  5.    const { isEditorPanelRemoved } = select( editorStore );
  6.    return {
  7.    isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
  8.    };
  9.    }, [] );
  11.    return (
  12.    <PostPanelSection className="editor-post-summary">
  13.    <PluginPostStatusInfo.Slot>
  14.    { ( fills ) => (
  15.    <>
  16.    <VStack spacing={ 4 }>
  17.    <PostCardPanel
  18.    onActionPerformed={ onActionPerformed }
  19.    />
  20.    <PostFeaturedImagePanel withPanelBody={ false } />
  21.    <PostExcerptPanel />
  22.    <VStack spacing={ 1 }>
  23.    <PostContentInformation />
  24.    <PostLastEditedPanel />
  25.    </VStack>
  26.    { ! isRemovedPostStatusPanel && (
  27.    <VStack spacing={ 2 }>
  28.    <VStack spacing={ 1 }>
  29.    <PostStatusPanel />
  30.    <PostSchedulePanel />
  31.    <PostURLPanel />
  32.    <PostAuthorPanel />
  33.    <PostTemplatePanel />
  34.    <PostDiscussionPanel />
  35.    <PageAttributesPanel />
  36.    <PostSyncStatus />
  37.    <BlogTitle />
  38.    <PostsPerPage />
  39.    <SiteDiscussion />
  40.    <PostFormatPanel />
  41.    <PostStickyPanel />
  42.    </VStack>
  43.    <TemplateAreas />
  44.    { fills }
  45.    </VStack>
  46.    ) }
  47.    </VStack>
  48.    </>
  49.    ) }
  50.    </PluginPostStatusInfo.Slot>
  51.    </PostPanelSection>
  52.    );
  53. }

現在利用可能なSlotFillsと例

以下のSlotFillsは、edit-postまたはeditorパッケージで利用可能です。使用法と例の詳細については、以下の個別のアイテムを参照してください：