Editor: Unify PluginMoreMenuItem API between post and site editors (#…

…60778) Co-authored-by: youknowriad <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]>
WordPress · Apr 17, 2024 · b9a29cd · ellatrix · Apr 17, 2024 · b9a29cd
1 parent ce24b85
commit b9a29cd
Show file tree

Hide file tree

Showing 37 changed files with 172 additions and 251 deletions.
diff --git 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 = () => (
-	<PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
-		{ __( 'My button title' ) }
-	</PluginMoreMenuItem>
-);
-```
-
-_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
@@ -190,7 +190,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					}
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core/edit-post" />
+					<PinnedItems.Slot scope="core" />
 				) }
 				<MoreMenu showIconLabels={ showIconLabels } />
 			</motion.div>

diff --git 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 && (
 						<PinnedItems.Slot
 							className={ showIconLabels && 'show-icon-labels' }
-							scope="core/edit-post"
+							scope="core"
 						/>
 					) }
 					<WritingMenu />
 					<ModeSwitcher />
 					<ActionItem.Slot
-						name="core/edit-post/plugin-more-menu"
+						name="core/plugin-more-menu"
 						label={ __( 'Plugins' ) }
 						as={ MenuGroup }
 						fillProps={ { onClick: onClose } }

diff --git a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
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
@@ -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
@@ -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 && (
-						<ComplementaryArea.Slot scope="core/edit-post" />
+						<ComplementaryArea.Slot scope="core" />
 					)
 				}
 				notices={ <EditorSnackbars /> }

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 );
 	} );