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

Close button: extensibility in post editor #22323

Merged
merged 2 commits into from
May 13, 2020
Merged

Close button: extensibility in post editor #22323

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0348ba7
Close button: extensibility in post editor
vindl May 13, 2020
7d1b948
Refactor slot
vindl May 13, 2020
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
22 changes: 13 additions & 9 deletions docs/designers-developers/developers/slotfills/main-dashboard-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ the editor in fullscreen mode.

```js
import { registerPlugin } from '@wordpress/plugins';
import { __experimentalMainDashboardButton } from '@wordpress/edit-site';
import {
Copy link
Contributor

@talldan talldan Nov 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's great that there are docs here for this, just had a request for this!

Looks like the file just needs to be added to the toc.json file for it to show up in the block editor handbook.

I've made a PR to publish them - #27317 - if you get a chance to review, @vindl.

edit: don't worry about the review, decided to admin merge it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was afk for a couple of days so just got to this now. Thanks for the update @talldan!

__experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/interface';

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

registerPlugin( 'main-dashboard-button-test', {
Expand All @@ -25,17 +27,19 @@ in the following way:

```js
import { registerPlugin } from '@wordpress/plugins';
import {
__experimentalMainDashboardButton,
__experimentalFullscrenModeClose
import {
__experimentalFullscrenModeClose as FullscrenModeClose,
} from '@wordpress/edit-site';
import {
__experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/interface';
import { close } from '@wordpress/icons';


const MainDashboardButtonIconTest = () => (
<__experimentalMainDashboardButton>
<__experimentalFullscrenModeClose icon={ close } />
</__experimentalMainDashboardButton>
<MainDashboardButton>
<FullscrenModeClose icon={ close } />
</MainDashboardButton>
);

registerPlugin( 'main-dashboard-button-icon-test', {
Expand Down
9 changes: 7 additions & 2 deletions packages/edit-post/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import { Button } from '@wordpress/components';
import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { cog } from '@wordpress/icons';
import { PinnedItems } from '@wordpress/interface';
import {
PinnedItems,
__experimentalCloseButtonSlot as CloseButtonSlot,
} from '@wordpress/interface';

/**
* Internal dependencies
Expand Down Expand Up @@ -66,7 +69,9 @@ function Header( {

return (
<div className="edit-post-header">
<FullscreenModeClose />
<CloseButtonSlot>
<FullscreenModeClose />
</CloseButtonSlot>
<div className="edit-post-header__toolbar">
<HeaderToolbar
onToggleInserter={ onToggleInserter }
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,3 +155,4 @@ export { default as PluginPostStatusInfo } from './components/sidebar/plugin-pos
export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this component be shared between edit-site and edit-post?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We considered that in #20989 (comment) but decided not to do it for now.

11 changes: 8 additions & 3 deletions packages/edit-site/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ import {
__experimentalPreviewOptions as PreviewOptions,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { PinnedItems } from '@wordpress/interface';
import {
PinnedItems,
__experimentalCloseButtonSlot as CloseButtonSlot,
} from '@wordpress/interface';

/**
* Internal dependencies
Expand All @@ -20,7 +23,7 @@ import TemplateSwitcher from '../template-switcher';
import SaveButton from '../save-button';
import UndoButton from './undo-redo/undo';
import RedoButton from './undo-redo/redo';
import { CloseButton } from './main-dashboard-button';
import FullscreenModeClose from './fullscreen-mode-close';

const inserterToggleProps = { isPrimary: true };

Expand Down Expand Up @@ -64,7 +67,9 @@ export default function Header( { openEntitiesSavedStates } ) {

return (
<div className="edit-site-header">
<CloseButton />
<CloseButtonSlot>
<FullscreenModeClose />
</CloseButtonSlot>
<div className="edit-site-header__toolbar">
<Inserter
position="bottom right"
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-site/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,4 @@ export function initialize( id, settings ) {
render( <Editor settings={ settings } />, document.getElementById( id ) );
}

export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
export { default as __experimentalFullscrenModeClose } from './components/header/fullscreen-mode-close';
export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
4 changes: 4 additions & 0 deletions packages/interface/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,7 @@ export { default as ComplementaryArea } from './complementary-area';
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,
CloseButtonSlot as __experimentalCloseButtonSlot,
} from './main-dashboard-button';
11 changes: 3 additions & 8 deletions ...nts/header/main-dashboard-button/index.js → ...components/main-dashboard-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,20 @@ import {
createSlotFill,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import FullscreenModeClose from '../fullscreen-mode-close';

const name = '__experimentalSiteEditorMainDashboardButton';
const name = '__experimentalMainDashboardButton';

const { Fill, Slot } = createSlotFill( name );

const MainDashboardButton = Fill;
MainDashboardButton.Slot = Slot;
MainDashboardButton.slotName = name;

export const CloseButton = () => {
export const CloseButtonSlot = ( { children } ) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not make this MainDashboardButton.Slot? Is there any place where we would just use the bare MainDashboardButton.Slot?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that you mentioned it - no, we probably don't. :) I refactored this in 7d1b948. I had to separate out the assignment though because the linter was complaining otherwise:

React Hook "useSlot" is called in function "MainDashboardButton.Slot" that is neither a React function component nor a custom React Hook function

Likely because it wasn't detected as valid component name for some reason. 🤔

const slot = useSlot( MainDashboardButton.slotName );
const hasFills = Boolean( slot.fills && slot.fills.length );

if ( ! hasFills ) {
return <FullscreenModeClose />;
return children;
}

return <MainDashboardButton.Slot bubblesVirtually />;
Expand Down