gutenbergdocs/docs/reference-guides/slotfills/main-dashboard-button.md
2025-10-22 01:40:18 +08:00

57 lines
2.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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,
} );
```
![全屏模式下的文章编辑界面显示关闭图标而非默认的W图标](https://developer.wordpress.org/files/2024/08/main-dashboard-button-close-icon-example.png '将顶部的W图标按钮替换为关闭图标')
### 修改图标与链接
此示例将顶部图标更改为外部链接标识,点击后将跳转至 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,
} );
```
![全屏模式下的文章编辑界面显示外部链接图标而非默认的W图标](https://developer.wordpress.org/files/2024/08/main-dashboard-button-external-link-example.png '将顶部图标更改为外部链接标识,点击后将跳转至 https://wordpress.org')