MainDashboardButton Edit

This slot allows replacing the default main dashboard button in the post editor and site editor.
It’s used for returning back to main wp-admin dashboard when editor is in fullscreen mode.

Examples Examples

Post editor example Post editor example

This will override the W icon button in the header.

import { registerPlugin } from '@wordpress/plugins';
import {
    __experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/edit-post';

const MainDashboardButtonTest = () => (
    <MainDashboardButton>
        Custom main dashboard button content
    </MainDashboardButton>
);

registerPlugin( 'main-dashboard-button-test', {
    render: MainDashboardButtonTest,
} );

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:

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


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

registerPlugin( 'main-dashboard-button-icon-test', {
    render: MainDashboardButtonIconTest,
} );

Top ↑

Site editor example Site editor example

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

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,
} );