From 4e49d91af87ed805bd07f1942e9a639be3c377ea Mon Sep 17 00:00:00 2001 From: Marko Andrijasevic Date: Thu, 7 May 2020 16:49:38 +0200 Subject: [PATCH 1/3] Site Editor: refactor close button slot --- .../header/fullscreen-mode-close/index.js | 22 ++++++++++++-- .../edit-site/src/components/header/index.js | 15 +++++++++- .../main-dashboard-button-icon/index.js | 14 +++++++++ .../header/main-dashboard-button/index.js | 29 ++++--------------- packages/edit-site/src/index.js | 3 +- 5 files changed, 55 insertions(+), 28 deletions(-) create mode 100644 packages/edit-site/src/components/header/main-dashboard-button-icon/index.js diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js index e5a14f30af66b..cdd50e4a2d502 100644 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js @@ -2,10 +2,18 @@ * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { Button } from '@wordpress/components'; +import { + __experimentalUseSlot as useSlot, + Button, +} from '@wordpress/components'; import { Path, SVG } from '@wordpress/primitives'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import MainDashboardButtonIcon from '../main-dashboard-button-icon'; + const wordPressLogo = ( @@ -13,6 +21,8 @@ const wordPressLogo = ( ); function FullscreenModeClose() { + const slot = useSlot( MainDashboardButtonIcon.slotName ); + const isActive = useSelect( ( select ) => { return select( 'core/edit-site' ).isFeatureActive( 'fullscreenMode' ); }, [] ); @@ -21,10 +31,18 @@ function FullscreenModeClose() { return null; } + const hasFills = Boolean( slot.fills && slot.fills.length ); + + const icon = hasFills ? ( + + ) : ( + wordPressLogo + ); + return (
- +
( - - { ( fills ) => { - // Return default Close button if no fills are provided, otherwise replace it with available fills. - if ( isEmpty( fills ) ) { - return ; - } +const { Fill, Slot } = createSlotFill( name ); - return <> { fills } ; - } } - -); +const MainDashboardButton = Fill; +MainDashboardButton.Slot = Slot; +MainDashboardButton.slotName = name; export default MainDashboardButton; diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index c390e2f4c7dd7..ad2b73c82a5d4 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -29,4 +29,5 @@ export function initialize( id, settings ) { render( , document.getElementById( id ) ); } -export { default as MainDashboardButton } from './components/header/main-dashboard-button'; +export { default as __experimentalSiteEditorMainDashboardButton } from './components/header/main-dashboard-button'; +export { default as __experimentalSiteEditorMainDashboardButtonIcon } from './components/header/main-dashboard-button-icon'; From e273752183bc661674942a813d123db458f2b868 Mon Sep 17 00:00:00 2001 From: Marko Andrijasevic Date: Thu, 7 May 2020 17:50:47 +0200 Subject: [PATCH 2/3] Refactor icon extensibility --- .../developers/slotfills/README.md | 1 + .../slotfills/main-dashboard-button.md | 44 +++++++++++++++++++ .../header/fullscreen-mode-close/index.js | 37 +++++----------- .../header/fullscreen-mode-close/style.scss | 2 +- .../main-dashboard-button-icon/index.js | 14 ------ packages/edit-site/src/index.js | 4 +- 6 files changed, 58 insertions(+), 44 deletions(-) create mode 100644 docs/designers-developers/developers/slotfills/main-dashboard-button.md delete mode 100644 packages/edit-site/src/components/header/main-dashboard-button-icon/index.js diff --git a/docs/designers-developers/developers/slotfills/README.md b/docs/designers-developers/developers/slotfills/README.md index 2b241ffb979ca..3ab5536f55f82 100644 --- a/docs/designers-developers/developers/slotfills/README.md +++ b/docs/designers-developers/developers/slotfills/README.md @@ -97,6 +97,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => ( There are currently eight available SlotFills in the `edit-post` package. Please refer to the individual items below for usage and example details: +* [MainDashboardButton](/docs/designers-developers/developers/slotfills/main-dashboard-button.md) * [PluginBlockSettingsMenuItem](/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md) * [PluginDocumentSettingPanel](/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md) * [PluginMoreMenuItem](/docs/designers-developers/developers/slotfills/plugin-more-menu-item.md) diff --git a/docs/designers-developers/developers/slotfills/main-dashboard-button.md b/docs/designers-developers/developers/slotfills/main-dashboard-button.md new file mode 100644 index 0000000000000..f036fd3e08141 --- /dev/null +++ b/docs/designers-developers/developers/slotfills/main-dashboard-button.md @@ -0,0 +1,44 @@ +# MainDashboardButton + +This slot allows replacing the default main dashboard button that's used for closing +the editor in fullscreen mode. + +## Example + +```js +import { registerPlugin } from '@wordpress/plugins'; +import { __experimentalMainDashboardButton } from '@wordpress/edit-site'; + +const MainDashboardButtonTest = () => ( + <__experimentalMainDashboardButton> + Custom main dashboard button content + +); + +registerPlugin( 'main-dashboard-button-test', { + render: MainDashboardButtonTest, +} ); +``` + +If your goal is just to replace the icon of the existing button, that can be achieved +in the following way: + +```js +import { registerPlugin } from '@wordpress/plugins'; +import { + __experimentalMainDashboardButton, + __experimentalFullscrenModeClose +} from '@wordpress/edit-site'; +import { close } from '@wordpress/icons'; + + +const MainDashboardButtonIconTest = () => ( + <__experimentalMainDashboardButton> + <__experimentalFullscrenModeClose icon={ close } /> + +); + +registerPlugin( 'main-dashboard-button-icon-test', { + render: MainDashboardButtonIconTest, +} ); +``` diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js index cdd50e4a2d502..ed75081060a0e 100644 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js @@ -1,28 +1,17 @@ /** - * WordPress dependencies + * External dependencies */ -import { useSelect } from '@wordpress/data'; -import { - __experimentalUseSlot as useSlot, - Button, -} from '@wordpress/components'; -import { Path, SVG } from '@wordpress/primitives'; -import { __ } from '@wordpress/i18n'; +import { isEmpty } from 'lodash'; /** - * Internal dependencies + * WordPress dependencies */ -import MainDashboardButtonIcon from '../main-dashboard-button-icon'; - -const wordPressLogo = ( - - - -); - -function FullscreenModeClose() { - const slot = useSlot( MainDashboardButtonIcon.slotName ); +import { useSelect } from '@wordpress/data'; +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { wordpress } from '@wordpress/icons'; +function FullscreenModeClose( { icon } ) { const isActive = useSelect( ( select ) => { return select( 'core/edit-site' ).isFeatureActive( 'fullscreenMode' ); }, [] ); @@ -31,18 +20,12 @@ function FullscreenModeClose() { return null; } - const hasFills = Boolean( slot.fills && slot.fills.length ); - - const icon = hasFills ? ( - - ) : ( - wordPressLogo - ); + const buttonIcon = ! isEmpty( icon ) ? icon : wordpress; return (