100 lines
2.7 KiB
Markdown
100 lines
2.7 KiB
Markdown
# 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>
|
|
);
|
|
};
|
|
``` |