Skip to content

Commit

Permalink
Interface package: move MainDashboardButton slot (#27213)
Browse files Browse the repository at this point in the history
Move MainDashboardButton slot from interface to appropriate
places in edit-post and edit-site packages.
  • Loading branch information
vindl authored Nov 24, 2020
1 parent eff9304 commit e8c58e1
Show file tree
Hide file tree
Showing 10 changed files with 61 additions and 24 deletions.
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
# MainDashboardButton

This slot allows replacing the default main dashboard button in the post editor
that's used for closing the editor in fullscreen mode. In the site editor this slot
refers to the "back to dashboard" button in the navigation sidebar.
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

Basic usage:
### Post editor example

This will override the W icon button in the header.

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

const MainDashboardButtonTest = () => (
<MainDashboardButton>
Expand All @@ -32,16 +33,14 @@ the post editor, that can be achieved in the following way:
import { registerPlugin } from '@wordpress/plugins';
import {
__experimentalFullscreenModeClose as FullscreenModeClose,
} from '@wordpress/edit-post';
import {
__experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/interface';
} from '@wordpress/edit-post';
import { close } from '@wordpress/icons';


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

Expand All @@ -50,13 +49,15 @@ registerPlugin( 'main-dashboard-button-icon-test', {
} );
```

Site editor example:
### 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/interface';
} from '@wordpress/edit-site';
import {
__experimentalNavigationBackButton as NavigationBackButton,
} from '@wordpress/components';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import { wordpress } from '@wordpress/icons';

function FullscreenModeClose( { showTooltip } ) {
function FullscreenModeClose( { showTooltip, icon, href } ) {
const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
( select ) => {
const { getCurrentPostType } = select( 'core/editor' );
Expand Down Expand Up @@ -50,16 +50,26 @@ function FullscreenModeClose( { showTooltip } ) {
src={ siteIconUrl }
/>
);
} else if ( isRequestingSiteIcon ) {
}

if ( isRequestingSiteIcon ) {
buttonIcon = null;
}

// Override default icon if custom icon is provided via props.
if ( icon ) {
buttonIcon = <Icon size="36px" icon={ icon } />;
}

return (
<Button
className="edit-post-fullscreen-mode-close has-icon"
href={ addQueryArgs( 'edit.php', {
post_type: postType.slug,
} ) }
href={
href ??
addQueryArgs( 'edit.php', {
post_type: postType.slug,
} )
}
label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
showTooltip={ showTooltip }
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
background: #23282e; // WP-admin gray.
color: $white;
border-radius: 0;
height: auto;
height: $header-height;
width: $header-height;

&:hover {
Expand All @@ -31,4 +31,3 @@
.edit-post-fullscreen-mode-close_site-icon {
width: 36px;
}

6 changes: 2 additions & 4 deletions packages/edit-post/src/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@ import classnames from 'classnames';
*/
import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import {
PinnedItems,
__experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/interface';
import { PinnedItems } from '@wordpress/interface';
import { useViewportMatch } from '@wordpress/compose';

/**
Expand All @@ -22,6 +19,7 @@ import HeaderToolbar from './header-toolbar';
import MoreMenu from './more-menu';
import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
import { default as DevicePreview } from '../device-preview';
import MainDashboardButton from '../header/main-dashboard-button';

function Header( { setEntitiesSavedStatesCallback } ) {
const {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,3 +162,4 @@ export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pr
export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
28 changes: 28 additions & 0 deletions packages/edit-site/src/components/main-dashboard-button/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import {
__experimentalUseSlot as useSlot,
createSlotFill,
} from '@wordpress/components';

const slotName = '__experimentalMainDashboardButton';

const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );

const MainDashboardButton = Fill;

const Slot = ( { children } ) => {
const slot = useSlot( slotName );
const hasFills = Boolean( slot.fills && slot.fills.length );

if ( ! hasFills ) {
return children;
}

return <MainDashboardButtonSlot bubblesVirtually />;
};

MainDashboardButton.Slot = Slot;

export default MainDashboardButton;
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
__experimentalNavigationItem as NavigationItem,
__experimentalNavigationBackButton as NavigationBackButton,
} from '@wordpress/components';
import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/interface';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

Expand All @@ -16,6 +15,7 @@ import { __ } from '@wordpress/i18n';
*/
import TemplatesMenu from './menus/templates';
import TemplatePartsMenu from './menus/template-parts';
import MainDashboardButton from '../../main-dashboard-button';
import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants';

export default function TemplatesNavigation() {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,5 @@ export function initialize( id, settings ) {
render( <Editor />, document.getElementById( id ) );
}

export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
1 change: 0 additions & 1 deletion packages/interface/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,4 @@ export { default as ComplementaryAreaMoreMenuItem } from './complementary-area-m
export { default as FullscreenMode } from './fullscreen-mode';
export { default as InterfaceSkeleton } from './interface-skeleton';
export { default as PinnedItems } from './pinned-items';
export { default as __experimentalMainDashboardButton } from './main-dashboard-button';
export { default as ActionItem } from './action-item';

0 comments on commit e8c58e1

Please sign in to comment.