Enable easier drag and drop for navigation building (#45906)

* tweaks the way navigation link and navigation submenu work to enable drag and drop in list view

* Adds deps list to effects for submenu and navigation link blocks.

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>
Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>
Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>
Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>
Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>

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

@@ -32,6 +32,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	getColorClassName,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
 import {
@@ -527,7 +528,9 @@ export default function NavigationLinkEdit( {
 		const newSubmenu = createBlock(
 			'core/navigation-submenu',
 			attributes,
-			innerBlocks
+			innerBlocks.length > 0
+				? innerBlocks
+				: [ createBlock( 'core/navigation-link' ) ]
 		);
 		replaceBlock( clientId, newSubmenu );
 	}
@@ -540,11 +543,14 @@ export default function NavigationLinkEdit( {
 		if ( ! url ) {
 			setIsLinkOpen( true );
 		}
+	}, [ url ] );
+
+	useEffect( () => {
 		// If block has inner blocks, transform to Submenu.
 		if ( hasChildren ) {
 			transformToSubmenu();
 		}
-	}, [] );
+	}, [ hasChildren ] );
 
 	/**
 	 * The hook shouldn't be necessary but due to a focus loss happening
@@ -675,6 +681,20 @@ export default function NavigationLinkEdit( {
 		onKeyDown,
 	} );
 
+	const ALLOWED_BLOCKS = [
+		'core/navigation-link',
+		'core/navigation-submenu',
+	];
+	const DEFAULT_BLOCK = {
+		name: 'core/navigation-link',
+	};
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: ALLOWED_BLOCKS,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: true,
+		renderAppender: false,
+	} );
+
 	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
 	}
@@ -915,6 +935,7 @@ export default function NavigationLinkEdit( {
 						</Popover>
 					) }
 				</a>
+				<div { ...innerBlocksProps } />
 			</div>
 		</Fragment>
 	);

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

@@ -541,6 +541,13 @@ export default function NavigationSubmenuEdit( {
 		replaceBlock( clientId, newLinkBlock );
 	}
 
+	useEffect( () => {
+		// If block is empty, transform to Navigation Link.
+		if ( ! hasChildren ) {
+			transformToLink();
+		}
+	}, [ hasChildren ] );
+
 	const canConvertToLink =
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;