From b9a29cd48aea56070116eea83403838b2480e207 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 17 Apr 2024 11:39:15 +0100 Subject: [PATCH] Editor: Unify PluginMoreMenuItem API between post and site editors (#60778) Co-authored-by: youknowriad Co-authored-by: jorgefilipecosta --- packages/edit-post/README.md | 55 +------------ .../edit-post/src/components/header/index.js | 2 +- .../src/components/header/more-menu/index.js | 4 +- .../header/plugin-more-menu-item/index.js | 80 ------------------- .../plugin-sidebar-more-menu-item/index.js | 2 +- .../edit-post/src/components/layout/index.js | 7 +- .../sidebar/plugin-sidebar/index.js | 2 +- .../sidebar/settings-sidebar/index.js | 5 +- .../src/hooks/commands/use-common-commands.js | 7 +- packages/edit-post/src/index.js | 3 +- packages/edit-post/src/store/actions.js | 14 +--- packages/edit-post/src/store/selectors.js | 17 +--- packages/edit-post/src/store/test/actions.js | 12 +-- .../block-editor/block-inspector-button.js | 8 +- .../edit-site/src/components/editor/index.js | 6 +- .../src/components/header-edit-mode/index.js | 4 +- .../header-edit-mode/more-menu/index.js | 2 +- .../plugin-sidebar-more-menu-item/index.js | 2 +- .../keyboard-shortcuts/edit-mode.js | 11 +-- .../sidebar-edit-mode/default-sidebar.js | 4 +- .../global-styles-sidebar.js | 2 +- .../src/components/sidebar-edit-mode/index.js | 9 +-- .../sidebar-edit-mode/plugin-sidebar/index.js | 2 +- .../src/components/welcome-guide/styles.js | 6 +- .../hooks/commands/use-edit-mode-commands.js | 5 +- packages/edit-site/src/index.js | 5 +- packages/edit-site/src/store/actions.js | 7 +- packages/editor/README.md | 57 +++++++++++++ packages/editor/src/components/index.js | 1 + .../plugin-more-menu-item/index.js | 15 +--- packages/interface/README.md | 20 ++--- packages/interface/src/store/actions.js | 11 ++- packages/interface/src/store/deprecated.js | 17 ++++ packages/interface/src/store/selectors.js | 8 ++ .../convert-editor-settings.js | 2 + .../preferences-package-data/test/index.js | 7 +- packages/preferences/src/store/selectors.js | 2 + 37 files changed, 172 insertions(+), 251 deletions(-) delete mode 100644 packages/edit-post/src/components/header/plugin-more-menu-item/index.js rename packages/{edit-site/src/components/header-edit-mode => editor/src/components}/plugin-more-menu-item/index.js (86%) create mode 100644 packages/interface/src/store/deprecated.js diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 4b0585337ebd3..0279567209cff 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -49,60 +49,7 @@ Undocumented declaration. ### PluginMoreMenuItem -Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. The text within the component appears as the menu item label. - -_Usage_ - -```js -// Using ES5 syntax -var __ = wp.i18n.__; -var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem; -var moreIcon = React.createElement( 'svg' ); //... svg element. - -function onButtonClick() { - alert( 'Button clicked.' ); -} - -function MyButtonMoreMenuItem() { - return React.createElement( - PluginMoreMenuItem, - { - icon: moreIcon, - onClick: onButtonClick, - }, - __( 'My button title' ) - ); -} -``` - -```jsx -// Using ESNext syntax -import { __ } from '@wordpress/i18n'; -import { PluginMoreMenuItem } from '@wordpress/edit-post'; -import { more } from '@wordpress/icons'; - -function onButtonClick() { - alert( 'Button clicked.' ); -} - -const MyButtonMoreMenuItem = () => ( - - { __( 'My button title' ) } - -); -``` - -_Parameters_ - -- _props_ `Object`: Component properties. -- _props.href_ `[string]`: When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor. -- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. -- _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item. -- _props.other_ `[...*]`: Any additional props are passed through to the underlying [MenuItem](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/menu-item/README.md) component. - -_Returns_ - -- `Component`: The component to be rendered. +Undocumented declaration. ### PluginPostPublishPanel diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index c600e5b94c6ee..4ddbdf49de384 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -190,7 +190,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { } /> { ( isWideViewport || ! showIconLabels ) && ( - + ) } diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index f39f8cb7adab1..df67ddae775a5 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/header/more-menu/index.js @@ -40,13 +40,13 @@ const MoreMenu = ( { showIconLabels } ) => { { showIconLabels && ! isLargeViewport && ( ) } ( - * - * { __( 'My button title' ) } - * - * ); - * ``` - * - * @return {Component} The component to be rendered. - */ -export default compose( - withPluginContext( ( context, ownProps ) => { - return { - as: ownProps.as ?? MenuItem, - icon: ownProps.icon || context.icon, - name: 'core/edit-post/plugin-more-menu', - }; - } ) -)( ActionItem ); diff --git a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js index c8dda954b8193..1b0f122b9154b 100644 --- a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js +++ b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js @@ -64,7 +64,7 @@ export default function PluginSidebarMoreMenuItem( props ) { // Menu item is marked with unstable prop for backward compatibility. // @see https://github.com/WordPress/gutenberg/issues/14457 __unstableExplicitMenuItem - scope="core/edit-post" + scope="core" { ...props } /> ); diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index fe8f132f2568d..07fa3bc41ea17 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -169,9 +169,8 @@ function Layout( { initialPost } ) { showMetaBoxes: select( editorStore ).getRenderingMode() === 'post-only', sidebarIsOpened: !! ( - select( interfaceStore ).getActiveComplementaryArea( - editPostStore.name - ) || select( editorStore ).isPublishSidebarOpened() + select( interfaceStore ).getActiveComplementaryArea( 'core' ) || + select( editorStore ).isPublishSidebarOpened() ), isFullscreenActive: select( editPostStore ).isFeatureActive( 'fullscreenMode' ), @@ -308,7 +307,7 @@ function Layout( { initialPost } ) { secondarySidebar={ secondarySidebar() } sidebar={ ! isDistractionFree && ( - + ) } notices={ } diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js index f62dccbadeecc..a70603b002d50 100644 --- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js @@ -95,7 +95,7 @@ export default function PluginSidebarEditPost( { className, ...props } ) { panelClassName={ className } className="edit-post-sidebar" smallScreenTitle={ postTitle || __( '(no title)' ) } - scope="core/edit-post" + scope="core" toggleShortcut={ shortcut } { ...props } /> diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index b80edf2e6483e..ef2e077f16080 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -154,9 +154,8 @@ const SettingsSidebar = () => { keyboardShortcutsStore ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ); - const sidebar = select( interfaceStore ).getActiveComplementaryArea( - editPostStore.name - ); + const sidebar = + select( interfaceStore ).getActiveComplementaryArea( 'core' ); const _isEditorSidebarOpened = [ sidebars.block, sidebars.document, diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js index 09fe186d90b03..80da3434b9b2d 100644 --- a/packages/edit-post/src/hooks/commands/use-common-commands.js +++ b/packages/edit-post/src/hooks/commands/use-common-commands.js @@ -38,9 +38,10 @@ export default function useCommonCommands() { const { get } = select( preferencesStore ); return { - activeSidebar: select( - interfaceStore - ).getActiveComplementaryArea( editPostStore.name ), + activeSidebar: + select( interfaceStore ).getActiveComplementaryArea( + 'core' + ), isPublishSidebarEnabled: select( editorStore ).isPublishSidebarEnabled(), isFullscreen: get( 'core/edit-post', 'fullscreenMode' ), diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 68398ff74b20b..dad3d8a67a910 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -17,6 +17,7 @@ import { import { PluginBlockSettingsMenuItem, PluginDocumentSettingPanel, + PluginMoreMenuItem, privateApis as editorPrivateApis, store as editorStore, } from '@wordpress/editor'; @@ -164,7 +165,7 @@ export function reinitializeEditor() { export { PluginBlockSettingsMenuItem }; export { PluginDocumentSettingPanel }; -export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item'; +export { PluginMoreMenuItem }; export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel'; export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info'; export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel'; diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index fec4ade849f4e..8dd473dd9a33f 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -14,7 +14,6 @@ import { addFilter } from '@wordpress/hooks'; * Internal dependencies */ import { getMetaBoxContainer } from '../utils/meta-boxes'; -import { store as editPostStore } from '.'; import { unlock } from '../lock-unlock'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -29,7 +28,7 @@ export const openGeneralSidebar = ( { registry } ) => { registry .dispatch( interfaceStore ) - .enableComplementaryArea( editPostStore.name, name ); + .enableComplementaryArea( 'core', name ); }; /** @@ -38,9 +37,7 @@ export const openGeneralSidebar = export const closeGeneralSidebar = () => ( { registry } ) => - registry - .dispatch( interfaceStore ) - .disableComplementaryArea( editPostStore.name ); + registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' ); /** * Returns an action object used in signalling that the user opened a modal. @@ -223,14 +220,11 @@ export const togglePinnedPluginItem = ( { registry } ) => { const isPinned = registry .select( interfaceStore ) - .isItemPinned( 'core/edit-post', pluginName ); + .isItemPinned( 'core', pluginName ); registry .dispatch( interfaceStore ) - [ isPinned ? 'unpinItem' : 'pinItem' ]( - 'core/edit-post', - pluginName - ); + [ isPinned ? 'unpinItem' : 'pinItem' ]( 'core', pluginName ); }; /** diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index eb752f14ace23..787fc2f1d78d3 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -41,9 +41,7 @@ export const getEditorMode = createRegistrySelector( export const isEditorSidebarOpened = createRegistrySelector( ( select ) => () => { const activeGeneralSidebar = - select( interfaceStore ).getActiveComplementaryArea( - 'core/edit-post' - ); + select( interfaceStore ).getActiveComplementaryArea( 'core' ); return [ 'edit-post/document', 'edit-post/block' ].includes( activeGeneralSidebar ); @@ -60,9 +58,7 @@ export const isEditorSidebarOpened = createRegistrySelector( export const isPluginSidebarOpened = createRegistrySelector( ( select ) => () => { const activeGeneralSidebar = - select( interfaceStore ).getActiveComplementaryArea( - 'core/edit-post' - ); + select( interfaceStore ).getActiveComplementaryArea( 'core' ); return ( !! activeGeneralSidebar && ! [ 'edit-post/document', 'edit-post/block' ].includes( @@ -88,9 +84,7 @@ export const isPluginSidebarOpened = createRegistrySelector( */ export const getActiveGeneralSidebarName = createRegistrySelector( ( select ) => () => { - return select( interfaceStore ).getActiveComplementaryArea( - 'core/edit-post' - ); + return select( interfaceStore ).getActiveComplementaryArea( 'core' ); } ); @@ -350,10 +344,7 @@ export const isFeatureActive = createRegistrySelector( */ export const isPluginItemPinned = createRegistrySelector( ( select ) => ( state, pluginName ) => { - return select( interfaceStore ).isItemPinned( - 'core/edit-post', - pluginName - ); + return select( interfaceStore ).isItemPinned( 'core', pluginName ); } ); diff --git a/packages/edit-post/src/store/test/actions.js b/packages/edit-post/src/store/test/actions.js index cb0a3fb32952a..73918dabb93b9 100644 --- a/packages/edit-post/src/store/test/actions.js +++ b/packages/edit-post/src/store/test/actions.js @@ -45,7 +45,7 @@ describe( 'actions', () => { expect( registry .select( interfaceStore ) - .getActiveComplementaryArea( 'core/edit-post' ) + .getActiveComplementaryArea( 'core' ) ).toBe( 'test/sidebar' ); registry @@ -54,7 +54,7 @@ describe( 'actions', () => { expect( registry .select( interfaceStore ) - .getActiveComplementaryArea( 'core/edit-post' ) + .getActiveComplementaryArea( 'core' ) ).toBeNull(); } ); @@ -79,15 +79,11 @@ describe( 'actions', () => { // Sidebars are pinned by default. // @See https://github.com/WordPress/gutenberg/pull/21645 expect( - registry - .select( interfaceStore ) - .isItemPinned( editPostStore.name, 'rigatoni' ) + registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' ) ).toBe( false ); registry.dispatch( editPostStore ).togglePinnedPluginItem( 'rigatoni' ); expect( - registry - .select( interfaceStore ) - .isItemPinned( editPostStore.name, 'rigatoni' ) + registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' ) ).toBe( true ); } ); diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js index 295d318d6da75..d21d386aba854 100644 --- a/packages/edit-site/src/components/block-editor/block-inspector-button.js +++ b/packages/edit-site/src/components/block-editor/block-inspector-button.js @@ -11,8 +11,6 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ -import { store as editSiteStore } from '../../store'; -import { STORE_NAME } from '../../store/constants'; import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants'; import { unlock } from '../../lock-unlock'; @@ -28,7 +26,7 @@ export default function BlockInspectorButton( { onClick = () => {} } ) { ), isBlockInspectorOpen: select( interfaceStore ).getActiveComplementaryArea( - editSiteStore.name + 'core' ) === SIDEBAR_BLOCK, } ), [] @@ -44,10 +42,10 @@ export default function BlockInspectorButton( { onClick = () => {} } ) { { if ( isBlockInspectorOpen ) { - disableComplementaryArea( STORE_NAME ); + disableComplementaryArea( 'core' ); speak( __( 'Block settings closed' ) ); } else { - enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + enableComplementaryArea( 'core', SIDEBAR_BLOCK ); speak( __( 'Additional settings are now available in the Editor block settings sidebar' diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index a95c671f8e767..396a59ca6ede4 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -140,9 +140,7 @@ export default function Editor( { isLoading, onClick } ) { blockEditorMode: __unstableGetEditorMode(), isInserterOpen: isInserterOpened(), isListViewOpen: isListViewOpened(), - isRightSidebarOpen: getActiveComplementaryArea( - editSiteStore.name - ), + isRightSidebarOpen: getActiveComplementaryArea( 'core' ), isDistractionFree: get( 'core', 'distractionFree' ), showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), showIconLabels: get( 'core', 'showIconLabels' ), @@ -297,7 +295,7 @@ export default function Editor( { isLoading, onClick } ) { sidebar={ isEditMode && ! isDistractionFree && ( - + ) } footer={ diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index c54098558798a..8eb327ace6d4d 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -201,9 +201,7 @@ export default function HeaderEditMode() { ) } - { ! isDistractionFree && ( - - ) } + { ! isDistractionFree && } diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js index f297899e37b9d..db4e4f7b3ea71 100644 --- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js +++ b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js @@ -120,7 +120,7 @@ export default function MoreMenu( { showIconLabels } ) { ); diff --git a/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js b/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js index 33ca83afa3295..50d809d40a854 100644 --- a/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js +++ b/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js @@ -10,9 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ -import { store as editSiteStore } from '../../store'; import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants'; -import { STORE_NAME } from '../../store/constants'; import { unlock } from '../../lock-unlock'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -20,9 +18,8 @@ const { interfaceStore } = unlock( editorPrivateApis ); function KeyboardShortcutsEditMode() { const isBlockInspectorOpen = useSelect( ( select ) => - select( interfaceStore ).getActiveComplementaryArea( - editSiteStore.name - ) === SIDEBAR_BLOCK, + select( interfaceStore ).getActiveComplementaryArea( 'core' ) === + SIDEBAR_BLOCK, [] ); const { enableComplementaryArea, disableComplementaryArea } = @@ -65,9 +62,9 @@ function KeyboardShortcutsEditMode() { event.preventDefault(); if ( isBlockInspectorOpen ) { - disableComplementaryArea( STORE_NAME ); + disableComplementaryArea( 'core' ); } else { - enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + enableComplementaryArea( 'core', SIDEBAR_BLOCK ); } } ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js index 7cbd18565e51f..9b2e00f409fd1 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js @@ -26,7 +26,7 @@ export default function DefaultSidebar( { <> diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index db02312bbf564..f339b34784741 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -63,7 +63,7 @@ export default function GlobalStylesSidebar() { isStyleBookOpened: 'style-book' === canvasContainerView, shouldClearCanvasContainerView: 'edit-site/global-styles' !== - getActiveComplementaryArea( 'core/edit-site' ) || + getActiveComplementaryArea( 'core' ) || ! _isVisualEditorMode || ! _isEditCanvasMode, showListViewByDefault: _showListViewByDefault, diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js index 71eb093e98003..6a0c8062da5a9 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js @@ -18,7 +18,6 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; */ import DefaultSidebar from './default-sidebar'; import GlobalStylesSidebar from './global-styles-sidebar'; -import { STORE_NAME } from '../../store/constants'; import SettingsHeader from './settings-header'; import PagePanels from './page-panels'; import TemplatePanel from './template-panel'; @@ -111,7 +110,7 @@ export function SidebarComplementaryAreaFills() { isEditingPage, } = useSelect( ( select ) => { const sidebar = - select( interfaceStore ).getActiveComplementaryArea( STORE_NAME ); + select( interfaceStore ).getActiveComplementaryArea( 'core' ); const _isEditorSidebarOpened = [ SIDEBAR_BLOCK, @@ -144,10 +143,10 @@ export function SidebarComplementaryAreaFills() { } if ( hasBlockSelection ) { if ( ! isEditingPage ) { - enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + enableComplementaryArea( 'core', SIDEBAR_BLOCK ); } } else { - enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE ); + enableComplementaryArea( 'core', SIDEBAR_TEMPLATE ); } }, [ hasBlockSelection, @@ -163,7 +162,7 @@ export function SidebarComplementaryAreaFills() { const onTabSelect = useCallback( ( newSelectedTabId ) => { if ( !! newSelectedTabId ) { - enableComplementaryArea( STORE_NAME, newSelectedTabId ); + enableComplementaryArea( 'core', newSelectedTabId ); } }, [ enableComplementaryArea ] diff --git a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js index a67dd885758c0..9cdd3f589cba8 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js @@ -80,7 +80,7 @@ export default function PluginSidebarEditSite( { className, ...props } ) { ); diff --git a/packages/edit-site/src/components/welcome-guide/styles.js b/packages/edit-site/src/components/welcome-guide/styles.js index 8e832a2f7e88c..e1a5a0c451395 100644 --- a/packages/edit-site/src/components/welcome-guide/styles.js +++ b/packages/edit-site/src/components/welcome-guide/styles.js @@ -11,7 +11,6 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; * Internal dependencies */ import WelcomeGuideImage from './image'; -import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -20,9 +19,8 @@ export default function WelcomeGuideStyles() { const { toggle } = useDispatch( preferencesStore ); const { isActive, isStylesOpen } = useSelect( ( select ) => { - const sidebar = select( interfaceStore ).getActiveComplementaryArea( - editSiteStore.name - ); + const sidebar = + select( interfaceStore ).getActiveComplementaryArea( 'core' ); return { isActive: !! select( preferencesStore ).get( diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 1ad5861d5d0a2..53ff6834d8eb9 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -185,9 +185,8 @@ function useEditUICommands() { const { canvasMode, activeSidebar } = useSelect( ( select ) => { return { canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), - activeSidebar: select( interfaceStore ).getActiveComplementaryArea( - editSiteStore.name - ), + activeSidebar: + select( interfaceStore ).getActiveComplementaryArea( 'core' ), }; }, [] ); const { openModal } = useDispatch( interfaceStore ); diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index d4479af7cc853..f3a562d457103 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -11,6 +11,7 @@ import { dispatch } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { createRoot } from '@wordpress/element'; import { + PluginMoreMenuItem, store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; @@ -77,7 +78,7 @@ export function initializeEditor( id, settings ) { } ); dispatch( interfaceStore ).setDefaultComplementaryArea( - 'core/edit-site', + 'core', 'edit-site/template' ); @@ -108,8 +109,8 @@ export function reinitializeEditor() { } ); } +export { PluginMoreMenuItem }; export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar'; export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item'; -export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item'; export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel'; export { store } from './store'; diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index fcb077283176e..127dd9993b68f 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -14,7 +14,6 @@ import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies */ -import { STORE_NAME as editSiteStoreName } from './constants'; import { TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE, @@ -366,7 +365,7 @@ export const openGeneralSidebar = ( { registry } ) => { registry .dispatch( interfaceStore ) - .enableComplementaryArea( editSiteStoreName, name ); + .enableComplementaryArea( 'core', name ); }; /** @@ -375,9 +374,7 @@ export const openGeneralSidebar = export const closeGeneralSidebar = () => ( { registry } ) => { - registry - .dispatch( interfaceStore ) - .disableComplementaryArea( editSiteStoreName ); + registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' ); }; /** diff --git a/packages/editor/README.md b/packages/editor/README.md index 628edfbce427a..577591c2e7b58 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -515,6 +515,63 @@ _Returns_ - `Component`: The component to be rendered. +### PluginMoreMenuItem + +Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. The text within the component appears as the menu item label. + +_Usage_ + +```js +// Using ES5 syntax +var __ = wp.i18n.__; +var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem; +var moreIcon = wp.element.createElement( 'svg' ); //... svg element. + +function onButtonClick() { + alert( 'Button clicked.' ); +} + +function MyButtonMoreMenuItem() { + return wp.element.createElement( + PluginMoreMenuItem, + { + icon: moreIcon, + onClick: onButtonClick, + }, + __( 'My button title' ) + ); +} +``` + +```jsx +// Using ESNext syntax +import { __ } from '@wordpress/i18n'; +import { PluginMoreMenuItem } from '@wordpress/editor'; +import { more } from '@wordpress/icons'; + +function onButtonClick() { + alert( 'Button clicked.' ); +} + +const MyButtonMoreMenuItem = () => ( + + { __( 'My button title' ) } + +); +``` + +_Parameters_ + +- _props_ `Object`: Component properties. +- _props.href_ `[string]`: When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor. +- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. +- _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item. +- _props.other_ `[...*]`: Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component. + +_Returns_ + +- `Component`: The component to be rendered. + ### PluginPostPublishPanel Renders provided content to the post-publish panel in the publish flow (side panel that opens after a user publishes the post). diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 030db31a4023b..6e84621a64bf7 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -28,6 +28,7 @@ export { default as PageAttributesParent } from './page-attributes/parent'; export { default as PageTemplate } from './post-template/classic-theme'; export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel'; export { default as PluginBlockSettingsMenuItem } from './block-settings-menu/plugin-block-settings-menu-item'; +export { default as PluginMoreMenuItem } from './plugin-more-menu-item'; export { default as PluginPostPublishPanel } from './plugin-post-publish-panel'; export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel'; export { default as PostTemplatePanel } from './post-template/panel'; diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js b/packages/editor/src/components/plugin-more-menu-item/index.js similarity index 86% rename from packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js rename to packages/editor/src/components/plugin-more-menu-item/index.js index 67c6f286e0b60..1382aad29c433 100644 --- a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js +++ b/packages/editor/src/components/plugin-more-menu-item/index.js @@ -4,14 +4,7 @@ import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; import { withPluginContext } from '@wordpress/plugins'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { ActionItem } = unlock( editorPrivateApis ); +import { ActionItem } from '@wordpress/interface'; /** * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. @@ -27,7 +20,7 @@ const { ActionItem } = unlock( editorPrivateApis ); * ```js * // Using ES5 syntax * var __ = wp.i18n.__; - * var PluginMoreMenuItem = wp.editSite.PluginMoreMenuItem; + * var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem; * var moreIcon = wp.element.createElement( 'svg' ); //... svg element. * * function onButtonClick() { @@ -50,7 +43,7 @@ const { ActionItem } = unlock( editorPrivateApis ); * ```jsx * // Using ESNext syntax * import { __ } from '@wordpress/i18n'; - * import { PluginMoreMenuItem } from '@wordpress/edit-site'; + * import { PluginMoreMenuItem } from '@wordpress/editor'; * import { more } from '@wordpress/icons'; * * function onButtonClick() { @@ -74,7 +67,7 @@ export default compose( return { as: ownProps.as ?? MenuItem, icon: ownProps.icon || context.icon, - name: 'core/edit-site/plugin-more-menu', + name: 'core/plugin-more-menu', }; } ) )( ActionItem ); diff --git a/packages/interface/README.md b/packages/interface/README.md index 9d8fcd1f93498..27226850badb5 100644 --- a/packages/interface/README.md +++ b/packages/interface/README.md @@ -27,25 +27,25 @@ Below are some examples of how to control the active complementary area using th ```js wp.data .select( 'core/interface' ) - .getActiveComplementaryArea( 'core/edit-post' ); + .getActiveComplementaryArea( 'core' ); // -> "edit-post/document" wp.data .dispatch( 'core/interface' ) - .enableComplementaryArea( 'core/edit-post', 'edit-post/block' ); + .enableComplementaryArea( 'core', 'edit-post/block' ); wp.data .select( 'core/interface' ) - .getActiveComplementaryArea( 'core/edit-post' ); + .getActiveComplementaryArea( 'core' ); // -> "edit-post/block" wp.data .dispatch( 'core/interface' ) - .disableComplementaryArea( 'core/edit-post' ); + .disableComplementaryArea( 'core' ); wp.data .select( 'core/interface' ) - .getActiveComplementaryArea( 'core/edit-post' ); + .getActiveComplementaryArea( 'core' ); // -> null ``` @@ -56,17 +56,17 @@ wp.data Example usage: `ComplementaryArea` component makes use of `PinnedItems` and automatically adds a pinned item for the complementary areas marked as a favorite. ```js -wp.data.select( 'core/interface' ).isItemPinned( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' ); +wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); // -> false -wp.data.dispatch( 'core/interface' ).pinItem( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' ); +wp.data.dispatch( 'core/interface' ).pinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); -wp.data.select( 'core/interface' ).isItemPinned( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' ); +wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); // -> true -wp.data.dispatch( 'core/interface' ).unpinItem( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' ); +wp.data.dispatch( 'core/interface' ).unpinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); -wp.data.select( 'core/interface' ).isItemPinned( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' ); -> false +wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); -> false ``` ### Preferences diff --git a/packages/interface/src/store/actions.js b/packages/interface/src/store/actions.js index b7a9935e888b5..a19d0f509f3d4 100644 --- a/packages/interface/src/store/actions.js +++ b/packages/interface/src/store/actions.js @@ -4,6 +4,11 @@ import deprecated from '@wordpress/deprecated'; import { store as preferencesStore } from '@wordpress/preferences'; +/** + * Internal dependencies + */ +import { normalizeComplementaryAreaScope } from './deprecated'; + /** * Set a default complementary area. * @@ -14,7 +19,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; */ export const setDefaultComplementaryArea = ( scope, area ) => ( { type: 'SET_DEFAULT_COMPLEMENTARY_AREA', - scope, + scope: normalizeComplementaryAreaScope( scope ), area, } ); @@ -31,6 +36,7 @@ export const enableComplementaryArea = if ( ! area ) { return; } + scope = normalizeComplementaryAreaScope( scope ); const isComplementaryAreaVisible = registry .select( preferencesStore ) @@ -57,6 +63,7 @@ export const enableComplementaryArea = export const disableComplementaryArea = ( scope ) => ( { registry } ) => { + scope = normalizeComplementaryAreaScope( scope ); const isComplementaryAreaVisible = registry .select( preferencesStore ) .get( scope, 'isComplementaryAreaVisible' ); @@ -84,6 +91,7 @@ export const pinItem = return; } + scope = normalizeComplementaryAreaScope( scope ); const pinnedItems = registry .select( preferencesStore ) .get( scope, 'pinnedItems' ); @@ -113,6 +121,7 @@ export const unpinItem = return; } + scope = normalizeComplementaryAreaScope( scope ); const pinnedItems = registry .select( preferencesStore ) .get( scope, 'pinnedItems' ); diff --git a/packages/interface/src/store/deprecated.js b/packages/interface/src/store/deprecated.js new file mode 100644 index 0000000000000..1be1b891ad691 --- /dev/null +++ b/packages/interface/src/store/deprecated.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; + +export function normalizeComplementaryAreaScope( scope ) { + if ( [ 'core/edit-post', 'core/edit-site' ].includes( scope ) ) { + deprecated( `${ scope } interface scope`, { + alternative: + 'Use the core/editor interface scope instead. core/edit-post and core/edit-site are merging.', + version: '6.6', + } ); + return 'core/editor'; + } + + return scope; +} diff --git a/packages/interface/src/store/selectors.js b/packages/interface/src/store/selectors.js index 548cb2f70346a..4a882d004c0c0 100644 --- a/packages/interface/src/store/selectors.js +++ b/packages/interface/src/store/selectors.js @@ -5,6 +5,11 @@ import { createRegistrySelector } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { store as preferencesStore } from '@wordpress/preferences'; +/** + * Internal dependencies + */ +import { normalizeComplementaryAreaScope } from './deprecated'; + /** * Returns the complementary area that is active in a given scope. * @@ -15,6 +20,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; */ export const getActiveComplementaryArea = createRegistrySelector( ( select ) => ( state, scope ) => { + scope = normalizeComplementaryAreaScope( scope ); const isComplementaryAreaVisible = select( preferencesStore ).get( scope, 'isComplementaryAreaVisible' @@ -38,6 +44,7 @@ export const getActiveComplementaryArea = createRegistrySelector( export const isComplementaryAreaLoading = createRegistrySelector( ( select ) => ( state, scope ) => { + scope = normalizeComplementaryAreaScope( scope ); const isVisible = select( preferencesStore ).get( scope, 'isComplementaryAreaVisible' @@ -59,6 +66,7 @@ export const isComplementaryAreaLoading = createRegistrySelector( */ export const isItemPinned = createRegistrySelector( ( select ) => ( state, scope, item ) => { + scope = normalizeComplementaryAreaScope( scope ); const pinnedItems = select( preferencesStore ).get( scope, 'pinnedItems' diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js b/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js index 5c8d0cd7d9322..2f5a404634f99 100644 --- a/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js +++ b/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js @@ -19,6 +19,8 @@ export default function convertEditorSettings( data ) { 'showIconLabels', 'showListViewByDefault', 'isPublishSidebarEnabled', + 'isComplementaryAreaVisible', + 'pinnedItems', ]; settingsToMoveToCore.forEach( ( setting ) => { diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js b/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js index 16edf9d39636b..83253e1bb3881 100644 --- a/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js +++ b/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js @@ -50,6 +50,9 @@ describe( 'convertPreferencesPackageData', () => { "openPanels": [ "post-status", ], + "pinnedItems": { + "my-sidebar-plugin/title-sidebar": false, + }, }, "core/customize-widgets": { "fixedToolbar": true, @@ -57,13 +60,9 @@ describe( 'convertPreferencesPackageData', () => { }, "core/edit-post": { "fullscreenMode": false, - "pinnedItems": { - "my-sidebar-plugin/title-sidebar": false, - }, "welcomeGuide": false, }, "core/edit-site": { - "isComplementaryAreaVisible": true, "welcomeGuide": false, "welcomeGuideStyles": false, }, diff --git a/packages/preferences/src/store/selectors.js b/packages/preferences/src/store/selectors.js index 2a74feda6c419..a574251efe37b 100644 --- a/packages/preferences/src/store/selectors.js +++ b/packages/preferences/src/store/selectors.js @@ -19,6 +19,8 @@ const withDeprecatedKeys = ( originalGet ) => ( state, scope, name ) => { 'showIconLabels', 'showListViewByDefault', 'isPublishSidebarEnabled', + 'isComplementaryAreaVisible', + 'pinnedItems', ]; if (