first commit
This commit is contained in:
368
reference-guides/slotfills/README.md
Normal file
368
reference-guides/slotfills/README.md
Normal file
@@ -0,0 +1,368 @@
|
||||
## 当前可用的 SlotFill 及示例
|
||||
|
||||
以下 SlotFill 可在 `edit-post` 或 `editor` 包中使用。具体用法及示例请参阅下列各项：
|
||||
|
||||
- [主仪表板按钮](/docs/reference-guides/slotfills/main-dashboard-button.md)
|
||||
- [插件区块设置菜单项](/docs/reference-guides/slotfills/plugin-block-settings-menu-item.md)
|
||||
- [插件文档设置面板](/docs/reference-guides/slotfills/plugin-document-setting-panel.md)
|
||||
- [插件更多菜单项](/docs/reference-guides/slotfills/plugin-more-menu-item.md)
|
||||
- [插件文章发布后面板](/docs/reference-guides/slotfills/plugin-post-publish-panel.md)
|
||||
- [插件文章状态信息](/docs/reference-guides/slotfills/plugin-post-status-info.md)
|
||||
- [插件文章发布前面板](/docs/reference-guides/slotfills/plugin-pre-publish-panel.md)
|
||||
- [插件侧边栏](/docs/reference-guides/slotfills/plugin-sidebar.md)
|
||||
- [插件侧边栏更多菜单项](/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md)
|
||||
|
||||
# SlotFills 参考文档
|
||||
|
||||
Slot（插槽）与 Fill（填充）是已公开的组件，允许开发者将项目注入到 Gutenberg 管理体验中的某些预定义位置。
|
||||
更多详细信息请参阅 [SlotFill 组件文档](/packages/components/src/slot-fill/README.md)。
|
||||
|
||||
要使用这些组件，我们必须利用 [@wordpress/plugins](/packages/plugins/README.md) API 注册一个用于注入项目的插件。
|
||||
|
||||
## 使用概览
|
||||
|
||||
使用 SlotFills 需要完成以下四个步骤：
|
||||
|
||||
1. 从 `@wordpress/plugins` 包导入 `registerPlugin` 方法
|
||||
2. 从 `@wordpress/editor` 包导入所需的 SlotFill 组件
|
||||
3. 定义渲染内容的组件。需将修改/新增内容包裹在导入的 SlotFill 组件中
|
||||
4. 注册插件
|
||||
|
||||
以下是通过 `PluginPostStatusInfo` 插槽填充的示例：
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginPostStatusInfo } from '@wordpress/editor';
|
||||
|
||||
const PluginPostStatusInfoTest = () => (
|
||||
<PluginPostStatusInfo>
|
||||
<p>文章状态信息插槽填充</p>
|
||||
</PluginPostStatusInfo>
|
||||
);
|
||||
|
||||
registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
|
||||
```
|
||||
|
||||
## 条件化渲染 SlotFill 内容
|
||||
|
||||
除 [MainDashboardButton](/docs/reference-guides/slotfills/main-dashboard-button.md) 外，所有可用的 SlotFill 同时在文章编辑器和站点编辑器中公开，任何已注册的 Fill 都会在两种上下文中渲染。可通过多种方式实现条件化渲染。
|
||||
|
||||
### 限定填充内容至文章编辑器
|
||||
|
||||
通过检查当前文章类型对象的 `viewable` 属性是否为 `true`，可将填充内容限定在文章编辑器内。未设置为 `viewable` 的文章类型没有关联的文章编辑界面，这是判断用户不在文章编辑器中的有效依据。以下示例将在所有已注册文章类型的编辑界面中渲染内容：
|
||||
|
||||
```js
|
||||
/**
|
||||
* 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;
|
||||
}, [] );
|
||||
|
||||
// 若文章类型不可查看，则不渲染填充内容
|
||||
if ( ! isViewable ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PluginDocumentSettingPanel
|
||||
name="custom-panel"
|
||||
title={ __( '文章编辑器示例' ) }
|
||||
className="custom-panel"
|
||||
>
|
||||
<p>{ __( '仅出现在文章编辑界面' ) }</p>
|
||||
</PluginDocumentSettingPanel>
|
||||
);
|
||||
};
|
||||
|
||||
registerPlugin( 'example-post-edit-only', {
|
||||
render: EditPostDocumentSettingPanel,
|
||||
} );
|
||||
```
|
||||
|
||||
### 限定填充内容至特定文章类型
|
||||
|
||||
以下示例在前例基础上创建允许渲染的文章类型白名单。此处填充内容仅在编辑页面时渲染：
|
||||
|
||||
```js
|
||||
/**
|
||||
* 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' ];
|
||||
|
||||
// 若文章类型不可查看或不在允许列表中，则不渲染插件
|
||||
if ( ! isViewable || ! allowedPostTypes.includes( postTypeName ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PluginDocumentSettingPanel
|
||||
name="custom-panel"
|
||||
title={ __( '文章类型限制示例' ) }
|
||||
className="custom-panel"
|
||||
>
|
||||
<p>
|
||||
{ sprintf(
|
||||
__(
|
||||
'仅出现在允许列表中的文章类型上。%s'
|
||||
),
|
||||
allowedPostTypes.join( ', ' )
|
||||
) }
|
||||
</p>
|
||||
</PluginDocumentSettingPanel>
|
||||
);
|
||||
};
|
||||
|
||||
registerPlugin( 'example-restrict-post-types', {
|
||||
render: RestrictPostTypes,
|
||||
} );
|
||||
```
|
||||
|
||||
### 将填充内容限定在站点编辑器中显示
|
||||
|
||||
若要将填充内容限定在站点编辑器中显示，则需要采用反向逻辑。如果文章类型对象的 `viewable` 属性设置为 `true`，则不应渲染该填充内容。以下示例将在任意站点编辑器界面中渲染其内容。
|
||||
|
||||
```js
|
||||
/**
|
||||
* 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 );
|
||||
|
||||
// 可查看的文章类型指能在 WordPress 后台查看的类型，内部类型不会设置为可查看
|
||||
return postTypeObject?.viewable;
|
||||
}, [] );
|
||||
|
||||
// 若文章类型可查看，则不渲染填充内容
|
||||
if ( isViewable ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PluginDocumentSettingPanel
|
||||
name="custom-panel"
|
||||
title={ __( '站点编辑器示例' ) }
|
||||
className="custom-panel"
|
||||
>
|
||||
<p>{ __( '仅出现在站点编辑器中' ) }</p>
|
||||
</PluginDocumentSettingPanel>
|
||||
);
|
||||
};
|
||||
|
||||
registerPlugin( 'example-site-editor', {
|
||||
render: SiteEditorDocumentSettingPanel,
|
||||
} );
|
||||
```
|
||||
|
||||
### 将填充内容限定在站点编辑器的特定界面中
|
||||
|
||||
此示例在前例基础上，通过提供允许列表来控制填充内容在站点编辑器中的显示界面。
|
||||
|
||||
```js
|
||||
/**
|
||||
* 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 {
|
||||
// 可查看的文章类型指能在 WordPress 后台查看的类型，内部类型不会设置为可查看
|
||||
isViewable: postTypeObject?.viewable,
|
||||
postType: postTypeName,
|
||||
};
|
||||
}, [] );
|
||||
|
||||
// 若文章类型可查看或不在允许列表中，则不渲染插件
|
||||
if ( isViewable || ! allowedSiteEditorScreens.includes( postType ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PluginDocumentSettingPanel
|
||||
name="custom-panel"
|
||||
title={ __( '仅限站点编辑器界面' ) }
|
||||
className="custom-panel"
|
||||
>
|
||||
<p>
|
||||
{ sprintf(
|
||||
__(
|
||||
'仅显示在允许列表中的编辑器界面。%s'
|
||||
),
|
||||
allowedSiteEditorScreens.join( '，' )
|
||||
) }
|
||||
</p>
|
||||
</PluginDocumentSettingPanel>
|
||||
);
|
||||
};
|
||||
|
||||
registerPlugin( 'example-site-editor-only', {
|
||||
render: SiteEditorDocumentSettingPanel,
|
||||
} );
|
||||
```
|
||||
|
||||
## 运作原理
|
||||
|
||||
SlotFill 通过 `createSlotFill` 创建。这会生成 `Slot` 和 `Fill` 两个组件，随后用于创建在 `wp.plugins` 全局变量上导出的新组件。
|
||||
|
||||
**`PluginPostStatusInfo` SlotFill 的定义**（[查看核心代码](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55)）
|
||||
|
||||
```js
|
||||
/**
|
||||
* 定义摘要面板的可扩展性插槽
|
||||
*/
|
||||
|
||||
/**
|
||||
* WordPress 依赖项
|
||||
*/
|
||||
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` 参数中，并最终显示在组件末尾。
|
||||
|
||||
参见[核心代码](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39)。
|
||||
|
||||
```js
|
||||
export default function PostSummary( { onActionPerformed } ) {
|
||||
const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
|
||||
// 使用 isEditorPanelRemoved 来在面板被程序化移除时隐藏它
|
||||
// 不使用 isEditorPanelEnabled 是因为此面板不应通过 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>
|
||||
);
|
||||
}
|
||||
```
|
||||
57
reference-guides/slotfills/main-dashboard-button.md
Normal file
57
reference-guides/slotfills/main-dashboard-button.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# MainDashboardButton
|
||||
|
||||
该插槽用于替换文章编辑器中的默认主仪表盘按钮。自WordPress 6.2起，站点编辑器中不再提供此功能。
|
||||
其主要作用是在编辑器处于全屏模式时，提供返回主wp-admin仪表盘的入口。
|
||||
|
||||
<div class="callout callout-warning">
|
||||
请注意：此SlotFill仍被视为实验性功能，后续可能发生变更
|
||||
</div>
|
||||
|
||||
## 示例
|
||||
|
||||
### 修改图标
|
||||
|
||||
此操作会将顶部的W图标按钮替换为关闭图标。
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
|
||||
import { close } from '@wordpress/icons';
|
||||
|
||||
const MainDashboardButtonTest = () => (
|
||||
<MainDashboardButton>
|
||||
<FullscreenModeClose icon={ close } />
|
||||
</MainDashboardButton>
|
||||
);
|
||||
|
||||
registerPlugin( 'main-dashboard-button-test', {
|
||||
render: MainDashboardButtonTest,
|
||||
} );
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 修改图标与链接
|
||||
|
||||
此示例将顶部图标更改为外部链接标识，点击后将跳转至 https://wordpress.org
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import {
|
||||
__experimentalFullscreenModeClose as FullscreenModeClose,
|
||||
__experimentalMainDashboardButton as MainDashboardButton,
|
||||
} from '@wordpress/edit-post';
|
||||
import { external } from '@wordpress/icons';
|
||||
|
||||
const MainDashboardButtonIconTest = () => (
|
||||
<MainDashboardButton>
|
||||
<FullscreenModeClose icon={ external } href="https://wordpress.org" />
|
||||
</MainDashboardButton>
|
||||
);
|
||||
|
||||
registerPlugin( 'main-dashboard-button-icon-test', {
|
||||
render: MainDashboardButtonIconTest,
|
||||
} );
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
# PluginBlockSettingsMenuItem
|
||||
|
||||
该插槽用于在“更多选项”区域添加新项目。根据用户设置，该项目将显示在每个区块的控件中或顶部工具栏中。
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
|
||||
|
||||
const PluginBlockSettingsMenuGroupTest = () => (
|
||||
<PluginBlockSettingsMenuItem
|
||||
allowedBlocks={ [ 'core/paragraph' ] }
|
||||
icon="smiley"
|
||||
label="菜单项文本"
|
||||
onClick={ () => {
|
||||
alert( '已点击' );
|
||||
} }
|
||||
/>
|
||||
);
|
||||
|
||||
registerPlugin( 'block-settings-menu-group-test', {
|
||||
render: PluginBlockSettingsMenuGroupTest,
|
||||
} );
|
||||
```
|
||||
|
||||
## 位置
|
||||
|
||||
|
||||
100
reference-guides/slotfills/plugin-document-setting-panel.md
Normal file
100
reference-guides/slotfills/plugin-document-setting-panel.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# PluginDocumentSettingPanel
|
||||
|
||||
此插槽填充允许注册用于编辑文档设置的用户界面。
|
||||
|
||||
## 可用属性
|
||||
|
||||
- **name** `string`: 用于识别面板的字符串
|
||||
- **className** `string`: 可选类名，将添加到侧边栏主体
|
||||
- **title** `string`: 显示在侧边栏顶部的标题
|
||||
- **icon** `(string|Element)`: [Dashicon](https://developer.wordpress.org/resource/dashicons/) 图标标识字符串或SVG WP元素
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginDocumentSettingPanel } from '@wordpress/editor';
|
||||
|
||||
const PluginDocumentSettingPanelDemo = () => (
|
||||
<PluginDocumentSettingPanel
|
||||
name="custom-panel"
|
||||
title="Custom Panel"
|
||||
className="custom-panel"
|
||||
>
|
||||
Custom Panel Contents
|
||||
</PluginDocumentSettingPanel>
|
||||
);
|
||||
|
||||
registerPlugin( 'plugin-document-setting-panel-demo', {
|
||||
render: PluginDocumentSettingPanelDemo,
|
||||
icon: 'palmtree',
|
||||
} );
|
||||
```
|
||||
|
||||
## 以编程方式访问面板
|
||||
|
||||
核心面板和自定义面板可以使用其面板名称以编程方式访问。核心面板名称为：
|
||||
|
||||
- 摘要面板: `post-status`
|
||||
- 分类目录面板: `taxonomy-panel-category`
|
||||
- 标签面板: `taxonomy-panel-post_tag`
|
||||
- 特色图片面板: `featured-image`
|
||||
- 摘要面板: `post-excerpt`
|
||||
- 讨论面板: `discussion-panel`
|
||||
|
||||
自定义面板使用传递给 `registerPlugin` 的插件名称进行命名空间划分。
|
||||
为了使用 `toggleEditorPanelOpened` 或 `toggleEditorPanelEnabled` 等函数访问面板，请确保添加命名空间前缀。
|
||||
|
||||
要以编程方式切换面板，请使用以下代码：
|
||||
|
||||
```js
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { store as editorStore } from '@wordpress/editor';
|
||||
|
||||
const Example = () => {
|
||||
const { toggleEditorPanelOpened } = useDispatch( editorStore );
|
||||
return (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={ () => {
|
||||
// 切换摘要面板
|
||||
toggleEditorPanelOpened( 'post-status' );
|
||||
|
||||
// 切换上面示例中引入的自定义面板
|
||||
toggleEditorPanelOpened(
|
||||
'plugin-document-setting-panel-demo/custom-panel'
|
||||
);
|
||||
} }
|
||||
>
|
||||
切换面板
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
也可以通过传递已注册面板的名称，使用 `removeEditorPanel` 函数从管理界面移除面板。
|
||||
|
||||
```js
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { store as editorStore } from '@wordpress/editor';
|
||||
|
||||
const Example = () => {
|
||||
const { removeEditorPanel } = useDispatch( editorStore );
|
||||
return (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={ () => {
|
||||
// 移除特色图片面板
|
||||
removeEditorPanel( 'featured-image' );
|
||||
|
||||
// 移除上面示例中引入的自定义面板
|
||||
removeEditorPanel(
|
||||
'plugin-document-setting-panel-demo/custom-panel'
|
||||
);
|
||||
} }
|
||||
>
|
||||
切换面板
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
```
|
||||
28
reference-guides/slotfills/plugin-more-menu-item.md
Normal file
28
reference-guides/slotfills/plugin-more-menu-item.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# PluginMoreMenuItem
|
||||
|
||||
该插槽将向“更多工具与选项”区域添加一个新项目。
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginMoreMenuItem } from '@wordpress/editor';
|
||||
import { image } from '@wordpress/icons';
|
||||
|
||||
const MyButtonMoreMenuItemTest = () => (
|
||||
<PluginMoreMenuItem
|
||||
icon={ image }
|
||||
onClick={ () => {
|
||||
alert( '按钮已点击' );
|
||||
} }
|
||||
>
|
||||
更多菜单项
|
||||
</PluginMoreMenuItem>
|
||||
);
|
||||
|
||||
registerPlugin( 'more-menu-item-test', { render: MyButtonMoreMenuItemTest } );
|
||||
```
|
||||
|
||||
## 位置
|
||||
|
||||
|
||||
24
reference-guides/slotfills/plugin-post-publish-panel.md
Normal file
24
reference-guides/slotfills/plugin-post-publish-panel.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# PluginPostPublishPanel
|
||||
|
||||
该插槽用于在文章发布后显示的发布完成面板底部注入内容项。
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginPostPublishPanel } from '@wordpress/editor';
|
||||
|
||||
const PluginPostPublishPanelTest = () => (
|
||||
<PluginPostPublishPanel>
|
||||
<p>文章发布面板</p>
|
||||
</PluginPostPublishPanel>
|
||||
);
|
||||
|
||||
registerPlugin( 'post-publish-panel-test', {
|
||||
render: PluginPostPublishPanelTest,
|
||||
} );
|
||||
```
|
||||
|
||||
## 位置说明
|
||||
|
||||
|
||||
22
reference-guides/slotfills/plugin-post-status-info.md
Normal file
22
reference-guides/slotfills/plugin-post-status-info.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# PluginPostStatusInfo
|
||||
|
||||
该插槽用于在文档侧边栏的摘要面板中插入项目。
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginPostStatusInfo } from '@wordpress/editor';
|
||||
|
||||
const PluginPostStatusInfoTest = () => (
|
||||
<PluginPostStatusInfo>
|
||||
<p>文章状态信息插槽填充</p>
|
||||
</PluginPostStatusInfo>
|
||||
);
|
||||
|
||||
registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
|
||||
```
|
||||
|
||||
## 位置
|
||||
|
||||
|
||||
24
reference-guides/slotfills/plugin-pre-publish-panel.md
Normal file
24
reference-guides/slotfills/plugin-pre-publish-panel.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# PluginPrePublishPanel
|
||||
|
||||
该插槽允许在预发布面板底部注入内容项，该面板会在用户点击"发布"后出现以确认发布操作。
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { PluginPrePublishPanel } from '@wordpress/editor';
|
||||
|
||||
const PluginPrePublishPanelTest = () => (
|
||||
<PluginPrePublishPanel>
|
||||
<p>预发布面板</p>
|
||||
</PluginPrePublishPanel>
|
||||
);
|
||||
|
||||
registerPlugin( 'pre-publish-panel-test', {
|
||||
render: PluginPrePublishPanelTest,
|
||||
} );
|
||||
```
|
||||
|
||||
## 位置示意
|
||||
|
||||
|
||||
80
reference-guides/slotfills/plugin-sidebar-more-menu-item.md
Normal file
80
reference-guides/slotfills/plugin-sidebar-more-menu-item.md
Normal file
@@ -0,0 +1,80 @@
|
||||
# PluginSidebarMoreMenuItem
|
||||
|
||||
此插槽用于允许从“选项”下拉菜单中打开 `<PluginSidebar />` 面板。
|
||||
当注册 `<PluginSidebar />` 时，系统会自动使用 `<PluginSidebar />` 的标题属性注册 `<PluginSidebarMoreMenuItem />`，因此无需使用此插槽来创建菜单项。
|
||||
|
||||
## 示例
|
||||
|
||||
此示例展示了如何自定义菜单项的文本，而不是使用 `<PluginSidebar />` 标题提供的默认文本。
|
||||
|
||||
```js
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
|
||||
import {
|
||||
PanelBody,
|
||||
Button,
|
||||
TextControl,
|
||||
SelectControl,
|
||||
} from '@wordpress/components';
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { image } from '@wordpress/icons';
|
||||
|
||||
const PluginSidebarMoreMenuItemTest = () => {
|
||||
const [ text, setText ] = useState( '' );
|
||||
const [ select, setSelect ] = useState( 'a' );
|
||||
return (
|
||||
<>
|
||||
<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
|
||||
{ __( '自定义菜单项文本' ) }
|
||||
</PluginSidebarMoreMenuItem>
|
||||
<PluginSidebar
|
||||
name="sidebar-name"
|
||||
icon={ image }
|
||||
title="我的侧边栏"
|
||||
>
|
||||
<PanelBody>
|
||||
<h2>
|
||||
{ __(
|
||||
'这是 PluginSidebar 示例的标题。'
|
||||
) }
|
||||
</h2>
|
||||
<p>
|
||||
{ __(
|
||||
'这是 PluginSidebar 示例的一些示例文本。'
|
||||
) }
|
||||
</p>
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
label={ __( '文本控件' ) }
|
||||
value={ text }
|
||||
onChange={ ( newText ) => setText( newText ) }
|
||||
/>
|
||||
<SelectControl
|
||||
label={ __( '选择控件' ) }
|
||||
value={ select }
|
||||
options={ [
|
||||
{ value: 'a', label: __( '选项 A' ) },
|
||||
{ value: 'b', label: __( '选项 B' ) },
|
||||
{ value: 'c', label: __( '选项 C' ) },
|
||||
] }
|
||||
onChange={ ( newSelect ) => setSelect( newSelect ) }
|
||||
/>
|
||||
<Button variant="primary">
|
||||
{ __( '主要按钮' ) }{ ' ' }
|
||||
</Button>
|
||||
</PanelBody>
|
||||
</PluginSidebar>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
registerPlugin( 'plugin-sidebar-more-menu-item-example', {
|
||||
render: PluginSidebarMoreMenuItemTest,
|
||||
} );
|
||||
```
|
||||
|
||||
## 位置
|
||||
|
||||
|
||||
69
reference-guides/slotfills/plugin-sidebar.md
Normal file
69
reference-guides/slotfills/plugin-sidebar.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# PluginSidebar
|
||||
|
||||
此插槽允许向文章或站点编辑器的工具栏添加项目。
|
||||
使用此插槽将在工具栏中添加一个图标，点击该图标会打开一个面板，其中包含封装在 `<PluginSidebar />` 组件中的项目。
|
||||
此外，它还会创建一个 `<PluginSidebarMoreMenuItem />`，点击该菜单项可以从选项面板中打开该面板。
|
||||
|
||||
## 示例
|
||||
|
||||
```jsx
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { PluginSidebar } from '@wordpress/editor';
|
||||
import {
|
||||
PanelBody,
|
||||
Button,
|
||||
TextControl,
|
||||
SelectControl,
|
||||
} from '@wordpress/components';
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const PluginSidebarExample = () => {
|
||||
const [ text, setText ] = useState( '' );
|
||||
const [ select, setSelect ] = useState( 'a' );
|
||||
|
||||
return (
|
||||
<PluginSidebar
|
||||
name="plugin-sidebar-example"
|
||||
title={ __( '我的 PluginSidebar' ) }
|
||||
icon={ 'smiley' }
|
||||
>
|
||||
<PanelBody>
|
||||
<h2>
|
||||
{ __( '这是 PluginSidebar 示例的标题。' ) }
|
||||
</h2>
|
||||
<p>
|
||||
{ __(
|
||||
'这是 PluginSidebar 示例的一些示例文本。'
|
||||
) }
|
||||
</p>
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
label={ __( '文本控件' ) }
|
||||
value={ text }
|
||||
onChange={ ( newText ) => setText( newText ) }
|
||||
/>
|
||||
<SelectControl
|
||||
label={ __( '选择控件' ) }
|
||||
value={ select }
|
||||
options={ [
|
||||
{ value: 'a', label: '选项 A' },
|
||||
{ value: 'b', label: '选项 B' },
|
||||
{ value: 'c', label: '选项 C' },
|
||||
] }
|
||||
onChange={ ( newSelect ) => setSelect( newSelect ) }
|
||||
/>
|
||||
<Button variant="primary">{ __( '主要按钮' ) } </Button>
|
||||
</PanelBody>
|
||||
</PluginSidebar>
|
||||
);
|
||||
};
|
||||
|
||||
// 注册插件。
|
||||
registerPlugin( 'plugin-sidebar-example', { render: PluginSidebarExample } );
|
||||
```
|
||||
|
||||
## 位置
|
||||
|
||||
|
||||
Reference in New Issue
Block a user