插槽和填充是已经公开的组件，允许开发人员将项目注入Gutenberg管理体验中的一些预定义位置。
请参阅SlotFill组件文档了解更多详细信息。
为了使用它们，我们必须利用@wordpress/插件api来注册将注入我们项目的插件。
为了访问SlotFill，我们需要做四件事：
- 导入
寄存器插件方法@wordpress/插件包裹。
- 从
@wordpress/编辑器'包裹。
- 定义一个组件来呈现我们的更改。我们的更改/添加将封装在我们导入的SlotFill组件中。
- 注册插件。
下面是一个使用插件PostStatusInfo插槽填充：
从“@wordpress/plugins”导入{registerPlugin}；从“@wordpress/editor”导入{PluginPostStatusInfo}；常量插件PostStatusInfoTest=（）=>(<插件PostStatusInfo><p>发布状态信息槽填充</p></PluginPostStatusInfo>);registerPlugin（“post status info test”，｛render:PluginPostStatusInfo test｝）；
除了主仪表板按钮，每个可用的SlotFill都在Post Editor和Site Editor中公开，并且任何注册的Fill都将在这两个上下文中呈现。可以实现许多方法来有条件地呈现Fill。
通过检查当前Post类型对象属性是否为可查看的设置为真实的。任何帖子类型都未设置为可查看的，没有关联的编辑帖子屏幕，是用户不在帖子编辑器中的良好指示。下面的示例将在任何注册帖子类型的编辑帖子屏幕上呈现其内容。
/***WordPress依赖项*/从“@wordpress/plugins”导入{registerPlugin}；导入{插件文档设置面板，存储为editorStore，}来自“@wordpress/editor”；从“@wordpress/core-data”导入{store as coreStore}；从“@wordpress/data”导入{useSelect}；从'@wordpress/i18n'导入{__}；/***要作为插件的一部分呈现的组件。*/const EditPostDocumentSettingsPanel=（）=>{//检索有关当前帖子类型的信息。const isViewable=使用select（（select）=>{const postTypeName=选择（editorStore）.getCurrentPostType（）；const postTypeObject=选择（coreStore）.getPostType（postTypeName）；return postTypeObject？。可视；}, [] );//如果帖子类型不可见，则不要渲染我的填充。if（！isViewable）{返回null；}返回(<插件文档设置面板name=“custom-panel”title={__（“Post Editor示例”）}className=“custom-panel”><p>{__（'仅显示在编辑帖子屏幕中'）}</p></PluginDocumentSettingsPanel>);};registerPlugin（'示例-post-edit-only'{渲染：编辑PostDocumentSettingsPanel，} );
下面的示例通过创建应在其中呈现填充的帖子类型的允许列表，对上面的示例进行了扩展。在这种情况下，填充仅在编辑页面时呈现。
/***WordPress依赖项*/从“@wordpress/plugins”导入｛registerPlugin｝；导入{插件文档设置面板，存储为editorStore，}来自“@wordpress/editor”；从“@wordpress/core-data”导入{store as coreStore}；从“@wordpress/data”导入{useSelect}；从'@wordpress/i18n'导入{__，sprintf}；/***要作为插件的一部分呈现的组件。*/const限制PostTypes=（）=>{//检索有关当前帖子类型的信息。const{isViewable，postTypeName}=useSelect（（select）=>{const postType=选择（editorStore）.getCurrentPostType（）；const postTypeObject=选择（coreStore）.getPostType（postType）；返回{isViewable:postTypeObject？。可查看，postTypeName:postType，};}, [] );//允许呈现插件的帖子类型列表。const allowedPostTypes=['页面']；//如果帖子类型不可见或不在允许列表中，请不要呈现插件。if（！isViewable||！allowedPostTypes.includes（postTypeName））{返回null；}返回(<插件文档设置面板name=“custom-panel”title={__（'限制帖子类型示例'）}className=“custom-panel”><p>｛疾跑(__('仅显示在允许列表中的帖子类型上。%s’),allowedPostTypes.join（'，'）) }</p></PluginDocumentSettingsPanel>);};registerPlugin（'示例-限制-后类型'{render:限制PostTypes，} );
要将填充限制到站点编辑器，则相反的逻辑为true。如果post类型对象的可查看的属性设置为真实的，则不应渲染填充。下面的示例将在任何“站点编辑器”屏幕上呈现其内容。
/***WordPress依赖项*/从“@wordpress/plugins”导入{registerPlugin}；导入{插件文档设置面板，存储为editorStore，}来自“@wordpress/editor”；从“@wordpress/core-data”导入{store as coreStore}；从“@wordpress/data”导入{useSelect}；从'@wordpress/i18n'导入{__}；/***要作为插件的一部分呈现的组件。*/const SiteEditorDocumentSettingPanel=（）=>{//检索有关当前帖子类型的信息。const isViewable=使用select（（select）=>{const postTypeName=选择（editorStore）.getCurrentPostType（）；const postTypeObject=选择（coreStore）.getPostType（postTypeName）；//可查看的帖子类型是可以在WordPress管理员中查看的类型。内部文件未设置为可查看。return postTypeObject？。可视；}, [] );//如果帖子类型可见，请不要呈现我的填充if（可查看）{返回null；}返回(<插件文档设置面板name=“custom-panel”title={__（'站点编辑器示例'）}className=“custom-panel”><p>｛__（“仅显示在网站编辑器中”）｝</p></PluginDocumentSettingsPanel>);};registerPlugin（'示例site-editor'{渲染：SiteEditorDocumentSettingsPanel，} );
此示例以上述示例为基础，提供了一个允许列表来控制可以在站点编辑器中呈现填充的屏幕。
/***WordPress依赖项*/从“@wordpress/plugins”导入{registerPlugin}；导入{插件文档设置面板，存储为editorStore，}来自“@wordpress/editor”；从“@wordpress/core-data”导入{store as coreStore}；从“@wordpress/data”导入{useSelect}；从'@wordpress/i18n'导入｛__，sprintf｝；/***要作为插件的一部分呈现的组件。*/const SiteEditorDocumentSettingPanel=（）=>{//站点编辑器中允许的区域。const allowedSiteEditorScreens=[“wp_template”，//模板“wp_block”，//模式“wp_template_part”，//模板部件];const{isViewable，postType}=useSelect（（select）=>{const postTypeName=选择（editorStore）.getCurrentPostType（）；const postTypeObject=选择（coreStore）.getPostType（postTypeName）；返回{//可查看的帖子类型是可以在WordPress管理员中查看的类型。内部文件未设置为可查看。isViewable:postTypeObject？。可查看，postType:postTypeName，};}, [] );//如果帖子类型是可见的，不要渲染我的插件。if（isViewable||！allowedSiteEditorScreens.includes（postType））{返回null；}返回(<插件文档设置面板name=“custom-panel”title={__（'仅限于站点编辑器屏幕'）}className=“custom-panel”><p>{冲刺(__('仅显示在允许列表中的编辑器屏幕上。%s的),allowedSiteEditorScreens.join（'，'）) }</p></PluginDocumentSettingsPanel>);};registerPlugin（'示例-仅限编辑'{渲染：SiteEditorDocumentSettingsPanel，} );
SlotFill是使用创建的创建SlotFill。这将创建两个组件，狭槽和填充然后用于创建导出到wp.插头全球的。
定义插件PostStatusInfo插槽填充(参见核心代码)
/***定义为“摘要”面板的可扩展性插槽。*//***WordPress依赖项*/从“@wordpress/components”导入{createSlotFill，PanelRow}；export const{Fill，Slot}=createSlotFill（'PluginPostStatusInfo'）；const插件PostStatusInfo=（{children，className}）=>(<填充><PanelRow className={className}>{childrens}</PanelRow></填充>);插件PostStatusInfo。插槽=插槽；导出默认插件PostStatusInfo；
然后在编辑器中显示此新插槽。下面的示例来自核心，代表“摘要”面板。
正如我们所见<插件PostStatusInfo。插槽>正在包装将显示在面板中的所有项目。
通过SlotFill添加的任何项目（请参阅上面的示例）都将包含在填充参数，并显示在组件的末尾。
请参见核心代码.
导出默认函数PostSummary（{onActionPerformed}）{const{isRemovedPostStatusPanel}=useSelect（（select）=>{//我们使用isEditorPanelRemoved隐藏以编程方式删除的面板。我们知道//不要使用isEditorPanelEnabled，因为不应通过UI禁用此面板。const{isEditorPanelRemoved}=选择（editorStore）；返回{isRemovedPostStatusPanel:isEditorPanelRemoved（PANEL_NAME），};}, [] );返回(<PostPanelSection className=“editor-post-summary”><插件PostStatusInfo。插槽>{（填充）=>(<><V堆栈间距={4}><PostCardPanel（明信片面板）onActionPerformed={onActionPerformed}/><PostFeaturedImagePanel withPanelBody={false}/>＜文章摘要面板/＞<V堆栈间距={1}>＜发布内容信息＞<PostLastEditedPanel/></V堆栈>{！isRemovedPostStatusPanel&&(<V堆栈间距={2}><V堆栈间距={1}><PostStatusPanel/><PostSchedulePanel/><PostURL面板/><PostAuthorPanel/><PostTemplatePanel/><帖子讨论面板/><PageAttributesPanel/><后同步状态/><博客标题/><每页帖子/><网站讨论/><PostFormatPanel/><PostStickyPanel/></V堆栈><模板区域/>{填充}</V堆栈>) }</V堆栈></>) }</插件PostStatusInfo。插槽></PostPanelSection>);}
以下插槽填充可用于编辑-发布或编辑包装。有关用法和示例的详细信息，请参阅以下各个项目：