Edit post: Convert tools more menu group into internal plugin (WordPr…

…ess#10194)

* Edit post: Convert tools more menu group into internal plugin

* Refactor check for children count in MenuGroup

* Update failing snapshot test

edit-post/components/header/mode-switcher/index.js

@@ -37,7 +37,6 @@ function ModeSwitcher( { onSwitch, mode } ) {
 	return (
 		<MenuGroup
 			label={ __( 'Editor' ) }
-			filterName="editPost.MoreMenu.editor"
 		>
 			<MenuItemsChoice
 				choices={ choices }

edit-post/components/header/more-menu/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
-import { IconButton, Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { IconButton, Dropdown } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 
 /**
@@ -11,10 +11,9 @@ import { Fragment } from '@wordpress/element';
 import './style.scss';
 import ModeSwitcher from '../mode-switcher';
 import PluginMoreMenuGroup from '../plugins-more-menu-group';
-import TipsToggle from '../tips-toggle';
-import KeyboardShortcutsHelpMenuItem from '../keyboard-shortcuts-help-menu-item';
+import ToolsMoreMenuGroup from '../tools-more-menu-group';
+
 import WritingMenu from '../writing-menu';
-import PublishSidebarToggle from '../publish-sidebar-toggle';
 
 const MoreMenu = () => (
 	<Dropdown
@@ -34,20 +33,7 @@ const MoreMenu = () => (
 				<WritingMenu onClose={ onClose } />
 				<ModeSwitcher onSelect={ onClose } />
 				<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
-				<MenuGroup
-					label={ __( 'Tools' ) }
-					filterName="editPost.MoreMenu.tools"
-				>
-					<MenuItem
-						role="menuitem"
-						href="edit.php?post_type=wp_block"
-					>
-						{ __( 'Manage All Reusable Blocks' ) }
-					</MenuItem>
-					<TipsToggle onToggle={ onClose } />
-					<PublishSidebarToggle onToggle={ onClose } />
-					<KeyboardShortcutsHelpMenuItem onSelect={ onClose } />
-				</MenuGroup>
+				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
 			</Fragment>
 		) }
 	/>

edit-post/components/header/tools-more-menu-group/index.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, MenuGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill( 'ToolsMoreMenuGroup' );
+
+ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
+	<Slot fillProps={ fillProps }>
+		{ ( fills ) => ! isEmpty( fills ) && (
+			<MenuGroup label={ __( 'Tools' ) }>
+				{ fills }
+			</MenuGroup>
+		) }
+	</Slot>
+);
+
+export default ToolsMoreMenuGroup;

edit-post/components/header/writing-menu/index.js

@@ -14,7 +14,6 @@ function WritingMenu( { onClose } ) {
 	return (
 		<MenuGroup
 			label={ __( 'View' ) }
-			filterName="editPost.MoreMenu.writing"
 		>
 			<FeatureToggle feature="fixedToolbar" label={ __( 'Unified Toolbar' ) } onToggle={ onClose } />
 			<FeatureToggle feature="focusMode" label={ __( 'Spotlight Mode' ) } onToggle={ onClose } />

edit-post/hooks/index.js

@@ -2,5 +2,4 @@
  * Internal dependencies
  */
 import './components';
-import './more-menu';
 import './validate-multiple-use';

edit-post/index.js

@@ -14,6 +14,7 @@ import { dispatch } from '@wordpress/data';
  */
 import './assets/stylesheets/main.scss';
 import './hooks';
+import './plugins';
 import store from './store';
 import { initializeMetaBoxState } from './store/actions';
 import Editor from './editor';

edit-post/plugins/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import CopyContentMenuItem from './copy-content-menu-item';
+import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
+import PublishSidebarToggleMenuItem from './publish-sidebar-toggle-menu-item';
+import TipsToggleMenuItem from './tips-toggle-menu-item';
+import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
+
+registerPlugin( 'edit-post', {
+	render() {
+		return (
+			<Fragment>
+				<ToolsMoreMenuGroup>
+					{ ( { onClose } ) => (
+						<Fragment>
+							<MenuItem
+								role="menuitem"
+								href="edit.php?post_type=wp_block"
+							>
+								{ __( 'Manage All Reusable Blocks' ) }
+							</MenuItem>
+							<TipsToggleMenuItem onToggle={ onClose } />
+							<PublishSidebarToggleMenuItem onToggle={ onClose } />
+							<KeyboardShortcutsHelpMenuItem onSelect={ onClose } />
+							<CopyContentMenuItem />
+						</Fragment>
+					) }
+				</ToolsMoreMenuGroup>
+			</Fragment>
+		);
+	},
+} );

edit-post/components/header/keyboard-shortcuts-help-menu-item/index.js → edit-post/plugins/keyboard-shortcuts-help-menu-item/index.js

@@ -1,14 +1,10 @@
 /**
  * WordPress Dependencies
  */
+import { MenuItem } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
-
-/**
- * WordPress Dependencies
- */
 import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
+import { displayShortcut } from '@wordpress/keycodes';
 
 export function KeyboardShortcutsHelpMenuItem( { openModal, onSelect } ) {
 	return (

edit-post/components/header/publish-sidebar-toggle/index.js → edit-post/plugins/publish-sidebar-toggle-menu-item/index.js

@@ -6,7 +6,7 @@ import { MenuItem } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 
-const PublishSidebarToggle = function( { onToggle, isEnabled } ) {
+const PublishSidebarToggleMenuItem = function( { onToggle, isEnabled } ) {
 	return (
 		<MenuItem
 			className={ 'edit-post__pre-publish-checks' }
@@ -35,4 +35,4 @@ export default compose( [
 			ownProps.onToggle();
 		},
 	} ) ),
-] )( PublishSidebarToggle );
+] )( PublishSidebarToggleMenuItem );

edit-post/components/header/tips-toggle/index.js → edit-post/plugins/tips-toggle-menu-item/index.js

@@ -2,15 +2,11 @@
  * WordPress Dependencies
  */
 import { withSelect, withDispatch } from '@wordpress/data';
-
-/**
- * WordPress Dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
 
-function TipsToggle( { onToggle, isActive } ) {
+function TipsToggleMenuItem( { onToggle, isActive } ) {
 	return (
 		<MenuItem
 			icon={ isActive && 'yes' }
@@ -38,4 +34,4 @@ export default compose( [
 			ownProps.onToggle();
 		},
 	} ) ),
-] )( TipsToggle );
+] )( TipsToggleMenuItem );

packages/components/src/menu-group/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Children } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
 import { withInstanceId } from '@wordpress/compose';
 
 /**
@@ -18,16 +17,10 @@ import { NavigableMenu } from '../navigable-container';
 export function MenuGroup( {
 	children,
 	className = '',
-	filterName,
 	instanceId,
 	label,
 } ) {
-	const childrenArray = Children.toArray( children );
-	const menuItems = filterName ?
-		applyFilters( filterName, childrenArray ) :
-		childrenArray;
-
-	if ( ! Array.isArray( menuItems ) || ! menuItems.length ) {
+	if ( ! Children.count( children ) ) {
 		return null;
 	}
 
@@ -40,7 +33,7 @@ export function MenuGroup( {
 				<div className="components-menu-group__label" id={ labelId }>{ label }</div>
 			}
 			<NavigableMenu orientation="vertical" aria-labelledby={ labelId }>
-				{ menuItems }
+				{ children }
 			</NavigableMenu>
 		</div>
 	);

packages/components/src/menu-group/test/__snapshots__/index.js.snap

@@ -14,9 +14,7 @@ exports[`MenuGroup should match snapshot 1`] = `
     aria-labelledby="components-menu-group-label-1"
     orientation="vertical"
   >
-    <p
-      key=".0"
-    >
+    <p>
       My item
     </p>
   </NavigableMenu>