Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide better examples and remove outdating site edit references for the MainDashboardButton SlotFill #64753

Merged
merged 2 commits into from
Aug 23, 2024
Merged

Provide better examples and remove outdating site edit references for the MainDashboardButton SlotFill #64753

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
acb9f4f
Provide better examples and remove outdating site edit references.
ryanwelcher Aug 23, 2024
f0ba41b
Add experimental call out.
ryanwelcher Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 17 additions & 31 deletions docs/reference-guides/slotfills/main-dashboard-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
# MainDashboardButton

This slot allows replacing the default main dashboard button in the post editor and site editor.
This slot allows replacing the default main dashboard button in the post editor. It is no longer available in the site editor as of WordPress 6.2.
It's used for returning back to main wp-admin dashboard when editor is in fullscreen mode.

<div class="callout callout-warning">
Please note that this SlotFill is still considered experimental and may change
</div>

## Examples

### Post editor example
### Change the icon

This will override the W icon button in the header.
This will replace the W icon button in the header with a close icon.

```js
import { registerPlugin } from '@wordpress/plugins';
import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
import { close } from '@wordpress/icons';

const MainDashboardButtonTest = () => (
<MainDashboardButton>
Custom main dashboard button content
<FullscreenModeClose icon={ close } />
</MainDashboardButton>
);

Expand All @@ -24,20 +29,23 @@ registerPlugin( 'main-dashboard-button-test', {
} );
```

If your goal is just to replace the icon of the existing button in
the post editor, that can be achieved in the following way:
![The edit post screen in fullscreen mode displaying a close icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-close-icon-example.png 'Replace the W icon button in the header with a close icon')

### Change the icon and link

This example will change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked.

```js
import { registerPlugin } from '@wordpress/plugins';
import {
__experimentalFullscreenModeClose as FullscreenModeClose,
__experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/edit-post';
import { close } from '@wordpress/icons';
import { external } from '@wordpress/icons';

const MainDashboardButtonIconTest = () => (
<MainDashboardButton>
<FullscreenModeClose icon={ close } href="http://wordpress.org" />
<FullscreenModeClose icon={ external } href="http://wordpress.org" />
</MainDashboardButton>
);

Expand All @@ -46,26 +54,4 @@ registerPlugin( 'main-dashboard-button-icon-test', {
} );
```

### Site editor example

In the site editor this slot refers to the "back to dashboard" button in the navigation sidebar.

```js
import { registerPlugin } from '@wordpress/plugins';
import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-site';
import { __experimentalNavigationBackButton as NavigationBackButton } from '@wordpress/components';

const MainDashboardButtonIconTest = () => (
<MainDashboardButton>
<NavigationBackButton
backButtonLabel={ __( 'Back to dashboard' ) }
className="edit-site-navigation-panel__back-to-dashboard"
href="index.php"
/>
</MainDashboardButton>
);

registerPlugin( 'main-dashboard-button-icon-test', {
render: MainDashboardButtonIconTest,
} );
```
![The edit post screen in fullscreen mode displaying an external link icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-external-link-example.png 'Change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked')
Loading