Add the ellipsis menu to the post editor block navigation

WordPress · May 20, 2020 · 30cdfaa · 30cdfaa
1 parent b1dc7c8
commit 30cdfaa
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
@@ -49,6 +49,7 @@ export default function BlockNavigationBlock( {
 	);
 	const {
 		__experimentalWithEllipsisMenu: withEllipsisMenu,
+		__experimentalWithEllipsisMenuMinLevel: ellipsisMenuMinLevel,
 	} = useBlockNavigationContext();
 	const ellipsisMenuClassName = classnames(
 		'block-editor-block-navigation-block__menu-cell',
@@ -115,7 +116,7 @@ export default function BlockNavigationBlock( {
 				</>
 			) }
 
-			{ withEllipsisMenu && level > 1 && (
+			{ withEllipsisMenu && level >= ellipsisMenuMinLevel && (
 				<TreeGridCell className={ ellipsisMenuClassName }>
 					{ ( props ) => (
 						<BlockSettingsDropdown

diff --git a/packages/block-editor/src/components/block-navigation/context.js b/packages/block-editor/src/components/block-navigation/context.js
@@ -6,6 +6,7 @@ import { createContext, useContext } from '@wordpress/element';
 export const BlockNavigationContext = createContext( {
 	__experimentalWithBlockNavigationSlots: false,
 	__experimentalWithEllipsisMenu: false,
+	__experimentalWithEllipsisMenuMinLevel: 0,
 } );
 
 export const useBlockNavigationContext = () =>

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -56,6 +56,7 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
 function BlockNavigationDropdown( {
 	isDisabled,
 	__experimentalWithBlockNavigationSlots,
+	__experimentalWithEllipsisMenu,
 } ) {
 	const hasBlocks = useSelect(
 		( select ) => !! select( 'core/block-editor' ).getBlockCount(),
@@ -79,6 +80,9 @@ function BlockNavigationDropdown( {
 					__experimentalWithBlockNavigationSlots={
 						__experimentalWithBlockNavigationSlots
 					}
+					__experimentalWithEllipsisMenu={
+						__experimentalWithEllipsisMenu
+					}
 				/>
 			) }
 		/>

diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js
@@ -20,8 +20,9 @@ function BlockNavigation( {
 	rootBlocks,
 	selectedBlockClientId,
 	selectBlock,
-	__experimentalWithEllipsisMenu,
 	__experimentalWithBlockNavigationSlots,
+	__experimentalWithEllipsisMenu,
+	__experimentalWithEllipsisMenuMinLevel,
 } ) {
 	if ( ! rootBlocks || rootBlocks.length === 0 ) {
 		return null;
@@ -45,6 +46,9 @@ function BlockNavigation( {
 					__experimentalWithEllipsisMenu={
 						__experimentalWithEllipsisMenu
 					}
+					__experimentalWithEllipsisMenuMinLevel={
+						__experimentalWithEllipsisMenuMinLevel
+					}
 					__experimentalWithBlockNavigationSlots={
 						__experimentalWithBlockNavigationSlots
 					}
@@ -59,6 +63,9 @@ function BlockNavigation( {
 					__experimentalWithEllipsisMenu={
 						__experimentalWithEllipsisMenu
 					}
+					__experimentalWithEllipsisMenuMinLevel={
+						__experimentalWithEllipsisMenuMinLevel
+					}
 					__experimentalWithBlockNavigationSlots={
 						__experimentalWithBlockNavigationSlots
 					}

diff --git a/packages/block-editor/src/components/block-navigation/tree.js b/packages/block-editor/src/components/block-navigation/tree.js
@@ -22,16 +22,22 @@ import { BlockNavigationContext } from './context';
 export default function BlockNavigationTree( {
 	__experimentalWithBlockNavigationSlots,
 	__experimentalWithEllipsisMenu,
+	__experimentalWithEllipsisMenuMinLevel,
 	...props
 } ) {
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalWithBlockNavigationSlots,
 			__experimentalWithEllipsisMenu,
+			__experimentalWithEllipsisMenuMinLevel:
+				typeof __experimentalWithEllipsisMenuMinLevel === 'number'
+					? __experimentalWithEllipsisMenuMinLevel
+					: 0,
 		} ),
 		[
 			__experimentalWithBlockNavigationSlots,
 			__experimentalWithEllipsisMenu,
+			__experimentalWithEllipsisMenuMinLevel,
 		]
 	);
 

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -86,6 +86,7 @@ function Navigation( {
 
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
 		clientId,
+		true,
 		true
 	);
 

diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
@@ -27,6 +27,7 @@ export default function NavigationStructurePanel( { blocks, initialOpen } ) {
 						selectBlock={ selectBlock }
 						__experimentalWithBlockNavigationSlots={ true }
 						__experimentalWithEllipsisMenu={ true }
+						__experimentalWithEllipsisMenuMinLevel={ 2 }
 						showNestedBlocks
 						showAppender
 						showBlockMovers

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -77,7 +77,10 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
 			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
-			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
+			<BlockNavigationDropdown
+				isDisabled={ isTextModeEnabled }
+				__experimentalWithEllipsisMenu
+			/>
 			{ displayBlockToolbar && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar hideDragHandle />
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,6 +86,7 @@ function Navigation( { @@
     	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
     		clientId,
+    		true,
     		true
     	);
@@ Expand Down @@