Edit Post: Refactor More (Ellipsis) Menu

components/index.js

@@ -17,6 +17,7 @@ export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
 export { default as IconButton } from './icon-button';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
+export { default as MenuItemsChoice } from './menu-items/menu-items-choice';
 export { default as MenuItemsGroup } from './menu-items/menu-items-group';
 export { default as MenuItemsToggle } from './menu-items/menu-items-toggle';
 export { NavigableMenu, TabbableContainer } from './navigable-container';

components/menu-items/menu-items-choice.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import MenuItemsToggle from './menu-items-toggle';
+
+export default function MenuItemsChoice( {
+	choices = [],
+	onSelect,
+	value,
+} ) {
+	return choices.map( ( item ) => {
+		const isSelected = value === item.value;
+		return (
+			<MenuItemsToggle
+				key={ item.value }
+				label={ item.label }
+				isSelected={ isSelected }
+				shortcut={ item.shortcut }
+				onClick={ () => {
+					if ( ! isSelected ) {
+						onSelect( item.value );
+					}
+				} }
+			/>
+		);
+	} );
+}

components/menu-items/menu-items-group.js

@@ -3,49 +3,45 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { Children } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { NavigableMenu } from '../navigable-container';
 import withInstanceId from '../higher-order/with-instance-id';
-import MenuItemsToggle from './menu-items-toggle';
 
-function MenuItemsGroup( {
-	label,
-	value,
-	choices = [],
-	onSelect,
+export function MenuItemsGroup( {
 	children,
-	instanceId,
 	className = '',
+	filterName,
+	instanceId,
+	label,
 } ) {
-	const labelId = `components-choice-menu-label-${ instanceId }`;
-	const classNames = classnames( className, 'components-choice-menu' );
+	const childrenArray = Children.toArray( children );
+	const menuItems = filterName ?
+		applyFilters( filterName, childrenArray ) :
+		childrenArray;
+
+	if ( ! Array.isArray( menuItems ) || ! menuItems.length ) {
+		return null;
+	}
+
+	const labelId = `components-menu-items-group-label-${ instanceId }`;
+	const classNames = classnames( className, 'components-menu-items-group' );
 
 	return (
 		<div className={ classNames }>
 			{ label &&
-				<div className="components-choice-menu__label" id={ labelId }>{ label }</div>
+				<div className="components-menu-items-group__label" id={ labelId }>{ label }</div>
 			}
 			<NavigableMenu orientation="vertical" aria-labelledby={ labelId }>
-				{ choices.map( ( item ) => {
-					const isSelected = value === item.value;
-					return (
-						<MenuItemsToggle
-							key={ item.value }
-							label={ item.label }
-							isSelected={ isSelected }
-							shortcut={ item.shortcut }
-							onClick={ () => {
-								if ( ! isSelected ) {
-									onSelect( item.value );
-								}
-							} }
-						/>
-					);
-				} ) }
-				{ children }
+				{ menuItems }
 			</NavigableMenu>
 		</div>
 	);

components/menu-items/style.scss

@@ -1,9 +1,9 @@
-.components-choice-menu {
+.components-menu-items-group {
 	width: 100%;
 	padding: 10px;
 }
 
-.components-choice-menu__label {
+.components-menu-items-group__label {
 	margin-bottom: 10px;
 	color: $dark-gray-300;
 }

components/menu-items/test/__snapshots__/menu-items-group.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemsGroup should match snapshot 1`] = `
+<div
+  className="components-menu-items-group"
+>
+  <div
+    className="components-menu-items-group__label"
+    id="components-menu-items-group-label-1"
+  >
+    My group
+  </div>
+  <NavigableMenu
+    aria-labelledby="components-menu-items-group-label-1"
+    orientation="vertical"
+  >
+    <p
+      key=".0"
+    >
+      My item
+    </p>
+  </NavigableMenu>
+</div>
+`;

components/menu-items/test/menu-items-group.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { MenuItemsGroup } from '../menu-items-group';
+
+describe( 'MenuItemsGroup', () => {
+	test( 'should render null when no children provided', () => {
+		const wrapper = shallow( <MenuItemsGroup /> );
+
+		expect( wrapper.html() ).toBe( null );
+	} );
+
+	test( 'should match snapshot', () => {
+		const wrapper = shallow(
+			<MenuItemsGroup
+				label="My group"
+				instanceId="1"
+			>
+				<p>My item</p>
+			</MenuItemsGroup>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );

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' ) }

edit-post/components/header/index.js

@@ -18,7 +18,7 @@ import {
  * Internal dependencies
  */
 import './style.scss';
-import EllipsisMenu from './ellipsis-menu';
+import MoreMenu from './more-menu';
 import HeaderToolbar from './header-toolbar';
 import { isSidebarOpened } from '../../store/selectors';
 import { toggleSidebar } from '../../store/actions';
@@ -52,7 +52,7 @@ function Header( {
 						label={ __( 'Settings' ) }
 						aria-expanded={ isDefaultSidebarOpened }
 					/>
-					<EllipsisMenu key="ellipsis-menu" />
+					<MoreMenu key="more-menu" />
 				</div>
 			) }
 		</div>

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

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuItemsGroup } from '@wordpress/components';
+import { MenuItemsChoice, MenuItemsGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -43,10 +43,14 @@ function ModeSwitcher( { onSwitch, mode } ) {
 	return (
 		<MenuItemsGroup
 			label={ __( 'Editor' ) }
-			choices={ choices }
-			value={ mode }
-			onSelect={ onSwitch }
-		/>
+			filterName="editPost.MoreMenu.editor"
+		>
+			<MenuItemsChoice
+				choices={ choices }
+				value={ mode }
+				onSelect={ onSwitch }
+			/>
+		</MenuItemsGroup>
 	);
 }
 

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

@@ -2,19 +2,18 @@
  * 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 element = (
+const MoreMenu = () => (
 	<Dropdown
-		className="edit-post-ellipsis-menu"
+		className="edit-post-more-menu"
 		position="bottom left"
 		renderToggle={ ( { isOpen, onToggle } ) => (
 			<IconButton
@@ -25,19 +24,16 @@ const element = (
 			/>
 		) }
 		renderContent={ ( { onClose } ) => (
-			<div>
+			<div className="edit-post-more-menu__content">
 				<ModeSwitcher onSelect={ onClose } />
-				<div className="edit-post-ellipsis-menu__separator" />
 				<FixedToolbarToggle onToggle={ onClose } />
-				<div className="edit-post-ellipsis-menu__separator" />
-				<EditorActions />
+				<MenuItemsGroup
+					label={ __( 'Tools' ) }
+					filterName="editPost.MoreMenu.tools"
+				/>
 			</div>
 		) }
 	/>
 );
 
-function EllipsisMenu() {
-	return element;
-}
-
-export default EllipsisMenu;
+export default MoreMenu;

edit-post/components/header/more-menu/style.scss

@@ -0,0 +1,21 @@
+.edit-post-more-menu {
+	// the padding and margin of the more menu is intentionally non-standard
+	@include break-small() {
+		margin-left: 4px;
+	}
+
+	.components-icon-button {
+		padding: 8px 4px;
+		width: auto;
+	}
+
+	.components-button svg {
+		transform: rotate(90deg);
+	}
+}
+
+.edit-post-more-menu__content {
+	.components-menu-items-group:not(:last-child) {
+  		border-bottom: 1px solid $light-gray-500;
+	}
+}

editor/hooks/index.js → edit-post/hooks/index.js

@@ -1,4 +1,4 @@
 /**
  * Internal dependencies
  */
-import './copy-content';
+import './more-menu';

editor/hooks/copy-content/index.js → edit-post/hooks/more-menu/copy-content-menu-item/index.js

@@ -4,10 +4,9 @@
 import { ClipboardButton, withState } from '@wordpress/components';
 import { compose } from '@wordpress/element';
 import { query } from '@wordpress/data';
-import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 
-function CopyContentButton( { editedPostContent, hasCopied, setState } ) {
+function CopyContentMenuItem( { editedPostContent, hasCopied, setState } ) {
 	return (
 		<ClipboardButton
 			text={ editedPostContent }
@@ -22,17 +21,9 @@ function CopyContentButton( { editedPostContent, hasCopied, setState } ) {
 	);
 }
 
-const Enhanced = compose(
+export default compose(
 	query( ( select ) => ( {
 		editedPostContent: select( 'core/editor' ).getEditedPostAttribute( 'content' ),
 	} ) ),
 	withState( { hasCopied: false } )
-)( CopyContentButton );
-
-const buttonElement = <Enhanced key="copy-content-button" />;
-
-addFilter(
-	'editor.EditorActions.tools',
-	'core/copy-content/button',
-	( children ) => [ ...children, buttonElement ]
-);
+)( CopyContentMenuItem );