Skip to content

Commit

Permalink
Provide better examples and remove outdating site edit references.
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanwelcher committed Aug 23, 2024
1 parent 447293e commit acb9f4f
Showing 1 changed file with 13 additions and 31 deletions.
44 changes: 13 additions & 31 deletions docs/reference-guides/slotfills/main-dashboard-button.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
# 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.

## 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 +25,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 +50,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')

0 comments on commit acb9f4f

Please sign in to comment.