Add a Submenu block for use in Navigation (#33775)

* Add a Dropdown block for use in Navigation

* display dropdowns below buttons in editor

* Add open on click functionality.

* Adjustments to click behaviour.

* Fix submenu logic

* Transform nav links to submenus

* Change block name to Submenu and update classnames

* Add submenu transform to navigation link.

* Remove button default styling

* Don't split at end.

* Add block fixture.

* Fix php lint errors.

* Update submenu icon classname.

* Use Submenu in Page List conversion to blocks.

* Don't lose children when transforming to Submenu.

* Fix link conversion in Page List block.

* Add link to empty submenu and default navigation class.

* Introduce hover/click toggle on Navigation.

* Don't add link in submenu straightaway.

* Open link control on parent element when hover is set.

* Always show icons when opening on click.

* Open submenus on click in the editor.

* Fix button styles and change toggle label.

* Update navigation fixture and fix php lint errors.

* Fix php lint error.

* Fix php lint error.

* Try hiding submenu in block inserter.

* Update menu items to blocks conversion.

* Update menu items to blocks test.

* Fix navigation link top level item status.

* Update and add new e2e test for open on click.

* Fix undo/redo trap.

* Fix styling for nested submenus in the editor.

* Remove obsolete lint ignore

* Display block label in list view.

* Fix dropdown z-index

* Switch toggle position

* Pointer cursor on button toggles.

* Fix max nesting and top level link logic.

* Show in inserter.

lib/blocks.php

@@ -33,6 +33,7 @@ function gutenberg_reregister_core_block_types() {
 				'missing',
 				'more',
 				'navigation-link',
+				'navigation-submenu',
 				'nextpage',
 				'paragraph',
 				'preformatted',
@@ -59,6 +60,7 @@ function gutenberg_reregister_core_block_types() {
 				'loginout.php'                  => 'core/loginout',
 				'navigation.php'                => 'core/navigation',
 				'navigation-link.php'           => 'core/navigation-link',
+				'navigation-submenu.php'        => 'core/navigation-submenu',
 				'home-link.php'                 => 'core/home-link',
 				'rss.php'                       => 'core/rss',
 				'search.php'                    => 'core/search',

packages/block-library/src/editor.scss

@@ -18,6 +18,7 @@
 @import "./more/editor.scss";
 @import "./navigation/editor.scss";
 @import "./navigation-link/editor.scss";
+@import "./navigation-submenu/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";

packages/block-library/src/index.js

@@ -33,6 +33,7 @@ import * as html from './html';
 import * as mediaText from './media-text';
 import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
+import * as navigationSubmenu from './navigation-submenu';
 import * as homeLink from './home-link';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
@@ -231,6 +232,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 					navigation,
 					navigationLink,
 					homeLink,
+					navigationSubmenu,
 
 					// Register Full Site Editing Blocks.
 					...( enableFSEBlocks

packages/block-library/src/navigation-link/edit.js

@@ -292,7 +292,7 @@ export default function NavigationLinkEdit( {
 	const { showSubmenuIcon } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const {
-		insertBlock,
+		replaceBlock,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
@@ -302,18 +302,21 @@ export default function NavigationLinkEdit( {
 	const ref = useRef();
 
 	const {
+		innerBlocks,
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
 		isImmediateParentOfSelectedBlock,
 		hasDescendants,
 		selectedBlockHasDescendants,
-		numberOfDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlocks,
+				getBlockName,
+				getBlockRootClientId,
 				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
@@ -326,11 +329,15 @@ export default function NavigationLinkEdit( {
 				.length;
 
 			return {
+				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
-					getBlockParentsByBlockName( clientId, name ).length >=
-					MAX_NESTING,
+					getBlockParentsByBlockName( clientId, [
+						name,
+						'core/navigation-submenu',
+					] ).length >= MAX_NESTING,
 				isTopLevelLink:
-					getBlockParentsByBlockName( clientId, name ).length === 0,
+					getBlockName( getBlockRootClientId( clientId ) ) ===
+					'core/navigation',
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
 					clientId,
 					true
@@ -343,7 +350,6 @@ export default function NavigationLinkEdit( {
 				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
 					selectedBlockId,
 				] )?.length,
-				numberOfDescendants: descendants,
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -367,12 +373,15 @@ export default function NavigationLinkEdit( {
 	}, [ isTopLevelLink ] );
 
 	/**
-	 * Insert a link block when submenu is added.
+	 * Transform to submenu block.
 	 */
-	function insertLinkBlock() {
-		const insertionPoint = numberOfDescendants;
-		const blockToInsert = createBlock( 'core/navigation-link' );
-		insertBlock( blockToInsert, insertionPoint, clientId );
+	function transformToSubmenu() {
+		const newSubmenu = createBlock(
+			'core/navigation-submenu',
+			attributes,
+			innerBlocks
+		);
+		replaceBlock( clientId, newSubmenu );
 	}
 
 	// Show the LinkControl on mount if the URL is empty
@@ -596,7 +605,7 @@ export default function NavigationLinkEdit( {
 							name="submenu"
 							icon={ addSubmenu }
 							title={ __( 'Add submenu' ) }
-							onClick={ insertLinkBlock }
+							onClick={ transformToSubmenu }
 						/>
 					) }
 				</ToolbarGroup>

packages/block-library/src/navigation-link/index.js

@@ -5,6 +5,7 @@ import { _x } from '@wordpress/i18n';
 import { customLink as linkIcon } from '@wordpress/icons';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { addFilter } from '@wordpress/hooks';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -84,6 +85,20 @@ export const settings = {
 			},
 		},
 	],
+	transforms: {
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'core/navigation-submenu' ],
+				transform: ( attributes, innerBlocks ) =>
+					createBlock(
+						'core/navigation-submenu',
+						attributes,
+						innerBlocks
+					),
+			},
+		],
+	},
 };
 
 // importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects

packages/block-library/src/navigation-submenu/block.json

@@ -0,0 +1,66 @@
+{
+	"apiVersion": 2,
+	"name": "core/navigation-submenu",
+	"title": "Submenu",
+	"category": "design",
+	"parent": [
+		"core/navigation"
+	],
+	"description": "Add a submenu to your navigation.",
+	"textdomain": "default",
+	"attributes": {
+		"label": {
+			"type": "string"
+		},
+		"type": {
+			"type": "string"
+		},
+		"description": {
+			"type": "string"
+		},
+		"rel": {
+			"type": "string"
+		},
+		"id": {
+			"type": "number"
+		},
+		"opensInNewTab": {
+			"type": "boolean",
+			"default": false
+		},
+		"url": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
+		},
+		"kind": {
+			"type": "string"
+		},
+		"isTopLevelItem": {
+			"type": "boolean"
+		}
+	},
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"overlayTextColor",
+		"customOverlayTextColor",
+		"overlayBackgroundColor",
+		"customOverlayBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon",
+		"openSubmenusOnClick",
+		"style"
+	],
+	"supports": {
+		"reusable": false,
+		"html": false
+	},
+	"viewScript": "file:./view.min.js",
+	"editorStyle": "wp-block-navigation-submenu-editor",
+	"style": "wp-block-navigation-submenu"
+}