Components: Make MenuItemsGroup components extensible

WordPress · Feb 20, 2018 · 97ed1bc · 97ed1bc
1 parent 13680a2
commit 97ed1bc
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 24 deletions.
diff --git a/components/menu-items/menu-items-group.js b/components/menu-items/menu-items-group.js
@@ -3,6 +3,12 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { Children } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
@@ -15,17 +21,19 @@ function MenuItemsGroup( {
 	children,
 	instanceId,
 	className = '',
+	filterName,
 } ) {
 	const labelId = `components-menu-items-group-label-${ instanceId }`;
 	const classNames = classnames( className, 'components-menu-items-group' );
+	const menuItems = filterName ? applyFilters( filterName, Children.toArray( children ) ) : children;
 
 	return (
 		<div className={ classNames }>
 			{ label &&
 				<div className="components-menu-items-group__label" id={ labelId }>{ label }</div>
 			}
 			<NavigableMenu orientation="vertical" aria-labelledby={ labelId }>
-				{ children }
+				{ menuItems }
 			</NavigableMenu>
 		</div>
 	);

diff --git a/edit-post/components/header/editor-actions/index.js b/edit-post/components/header/editor-actions/index.js
diff --git a/edit-post/components/header/fixed-toolbar-toggle/index.js b/edit-post/components/header/fixed-toolbar-toggle/index.js
@@ -22,6 +22,7 @@ function FeatureToggle( { onToggle, active, onMobile } ) {
 	return (
 		<MenuItemsGroup
 			label={ __( 'Settings' ) }
+			filterName="editPost.MoreMenu.settings"
 		>
 			<MenuItemsToggle
 				label={ __( 'Fix Toolbar to Top' ) }

diff --git a/edit-post/components/header/mode-switcher/index.js b/edit-post/components/header/mode-switcher/index.js
@@ -42,7 +42,9 @@ function ModeSwitcher( { onSwitch, mode } ) {
 
 	return (
 		<MenuItemsGroup
-			label={ __( 'Editor' ) }>
+			label={ __( 'Editor' ) }
+			filterName="editPost.MoreMenu.editor"
+		>
 			<MenuItemsChoice
 				choices={ choices }
 				value={ mode }

diff --git a/edit-post/components/header/more-menu/index.js b/edit-post/components/header/more-menu/index.js
@@ -2,15 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Dropdown } from '@wordpress/components';
+import { IconButton, Dropdown, MenuItemsGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import ModeSwitcher from '../mode-switcher';
 import FixedToolbarToggle from '../fixed-toolbar-toggle';
-import EditorActions from '../editor-actions';
 
 const MoreMenu = () => (
 	<Dropdown
@@ -28,7 +27,10 @@ const MoreMenu = () => (
 			<div className="edit-post-more-menu__content">
 				<ModeSwitcher onSelect={ onClose } />
 				<FixedToolbarToggle onToggle={ onClose } />
-				<EditorActions />
+				<MenuItemsGroup
+					label={ __( 'Tools' ) }
+					filterName="editPost.MoreMenu.tools"
+				/>
 			</div>
 		) }
 	/>

diff --git a/edit-post/hooks/more-menu/index.js b/edit-post/hooks/more-menu/index.js
@@ -15,6 +15,6 @@ const withCopyContentMenuItem = ( menuItems ) => [
 
 addFilter(
 	'editPost.MoreMenu.tools',
-	'core/edit-post/more-menu/withCopyContentButton',
+	'core/edit-post/more-menu/withCopyContentMenuItem',
 	withCopyContentMenuItem
 );