Fix inconsistent Link UI in Nav block list view editor (#50774)

Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Jerry Jones <[email protected]>

packages/block-editor/src/components/list-view/appender.js

@@ -4,19 +4,20 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { forwardRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useListViewContext } from './context';
 import Inserter from '../inserter';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
-		const [ insertedBlock, setInsertedBlock ] = useState( null );
+		const { insertedBlock, setInsertedBlock } = useListViewContext();
 
 		const instanceId = useInstanceId( Appender );
 		const { hideInserter } = useSelect(

packages/block-editor/src/components/list-view/block-contents.js

@@ -47,7 +47,8 @@ const ListViewBlockContents = forwardRef(
 			[ clientId ]
 		);
 
-		const { renderAdditionalBlockUI } = useListViewContext();
+		const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
+			useListViewContext();
 
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
@@ -66,7 +67,12 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
-				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
+				{ renderAdditionalBlockUI &&
+					renderAdditionalBlockUI(
+						block,
+						insertedBlock,
+						setInsertedBlock
+					) }
 				<BlockDraggable clientIds={ draggableClientIds }>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton

packages/block-editor/src/components/list-view/block.js

@@ -135,6 +135,7 @@ function ListViewBlock( {
 		BlockSettingsMenu,
 		listViewInstanceId,
 		expandedState,
+		setInsertedBlock,
 	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
@@ -339,6 +340,7 @@ function ListViewBlock( {
 							__experimentalSelectBlock={ updateSelection }
 							expand={ expand }
 							expandedState={ expandedState }
+							setInsertedBlock={ setInsertedBlock }
 						/>
 					) }
 				</TreeGridCell>

packages/block-editor/src/components/list-view/index.js

@@ -16,6 +16,7 @@ import {
 	useRef,
 	useReducer,
 	forwardRef,
+	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -128,6 +129,9 @@ function ListViewComponent(
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
 	const isMounted = useRef( false );
+
+	const [ insertedBlock, setInsertedBlock ] = useState( null );
+
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
 		firstSelectedBlockClientId: selectedClientIds[ 0 ],
 		setExpandedState,
@@ -212,6 +216,8 @@ function ListViewComponent(
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
 			renderAdditionalBlockUI,
+			insertedBlock,
+			setInsertedBlock,
 		} ),
 		[
 			draggedClientIds,
@@ -221,6 +227,8 @@ function ListViewComponent(
 			BlockSettingsMenu,
 			instanceId,
 			renderAdditionalBlockUI,
+			insertedBlock,
+			setInsertedBlock,
 		]
 	);
 

packages/block-editor/src/store/private-selectors.js

@@ -8,13 +8,3 @@
 export function isBlockInterfaceHidden( state ) {
 	return state.isBlockInterfaceHidden;
 }
-
-/**
- * Gets the client ids of the last inserted blocks.
- *
- * @param {Object} state Global application state.
- * @return {Array|undefined} Client Ids of the last inserted block(s).
- */
-export function getLastInsertedBlocksClientIds( state ) {
-	return state?.lastBlockInserted?.clientIds;
-}

packages/block-editor/src/store/test/private-selectors.js

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	isBlockInterfaceHidden,
-	getLastInsertedBlocksClientIds,
-} from '../private-selectors';
+import { isBlockInterfaceHidden } from '../private-selectors';
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -24,29 +21,4 @@ describe( 'private selectors', () => {
 			expect( isBlockInterfaceHidden( state ) ).toBe( false );
 		} );
 	} );
-
-	describe( 'getLastInsertedBlocksClientIds', () => {
-		it( 'should return undefined if no blocks have been inserted', () => {
-			const state = {
-				lastBlockInserted: {},
-			};
-
-			expect( getLastInsertedBlocksClientIds( state ) ).toEqual(
-				undefined
-			);
-		} );
-
-		it( 'should return clientIds if blocks have been inserted', () => {
-			const state = {
-				lastBlockInserted: {
-					clientIds: [ '123456', '78910' ],
-				},
-			};
-
-			expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
-				'123456',
-				'78910',
-			] );
-		} );
-	} );
 } );

packages/block-library/src/navigation/edit/leaf-more-menu.js

@@ -24,7 +24,13 @@ const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
 	'core/navigation-submenu',
 ];
 
-function AddSubmenuItem( { block, onClose, expandedState, expand } ) {
+function AddSubmenuItem( {
+	block,
+	onClose,
+	expandedState,
+	expand,
+	setInsertedBlock,
+} ) {
 	const { insertBlock, replaceBlock, replaceInnerBlocks } =
 		useDispatch( blockEditorStore );
 
@@ -69,6 +75,12 @@ function AddSubmenuItem( { block, onClose, expandedState, expand } ) {
 						updateSelectionOnInsert
 					);
 				}
+
+				// This call sets the local List View state for the "last inserted block".
+				// This is required for the Nav Block to determine whether or not to display
+				// the Link UI for this new block.
+				setInsertedBlock( newLink );
+
 				if ( ! expandedState[ block.clientId ] ) {
 					expand( block.clientId );
 				}
@@ -138,6 +150,7 @@ export default function LeafMoreMenu( props ) {
 							expanded
 							expandedState={ props.expandedState }
 							expand={ props.expand }
+							setInsertedBlock={ props.setInsertedBlock }
 						/>
 					</MenuGroup>
 					<MenuGroup>

packages/block-library/src/navigation/edit/menu-inspector-controls.js

@@ -12,8 +12,7 @@ import {
 	__experimentalHeading as Heading,
 	Spinner,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -26,7 +25,6 @@ import useNavigationMenu from '../use-navigation-menu';
 import LeafMoreMenu from './leaf-more-menu';
 import { updateAttributes } from '../../navigation-link/update-attributes';
 import { LinkUI } from '../../navigation-link/link-ui';
-import { useInsertedBlock } from '../../navigation-link/use-inserted-block';
 
 /* translators: %s: The name of a menu. */
 const actionLabel = __( "Switch to '%s'" );
@@ -54,40 +52,13 @@ const MainContent = ( {
 		[ clientId ]
 	);
 
-	const [ clientIdWithOpenLinkUI, setClientIdWithOpenLinkUI ] = useState();
-	const { lastInsertedBlockClientId } = useSelect( ( select ) => {
-		const { getLastInsertedBlocksClientIds } = unlock(
-			select( blockEditorStore )
-		);
-		const lastInsertedBlocksClientIds = getLastInsertedBlocksClientIds();
-		return {
-			lastInsertedBlockClientId:
-				lastInsertedBlocksClientIds && lastInsertedBlocksClientIds[ 0 ],
-		};
-	}, [] );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const {
-		insertedBlockAttributes,
-		insertedBlockName,
-		setInsertedBlockAttributes,
-	} = useInsertedBlock( lastInsertedBlockClientId );
-
-	const hasExistingLinkValue = insertedBlockAttributes?.url;
-
-	useEffect( () => {
-		if (
-			lastInsertedBlockClientId &&
-			BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) &&
-			! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value.
-		) {
-			setClientIdWithOpenLinkUI( lastInsertedBlockClientId );
-		}
-	}, [
-		lastInsertedBlockClientId,
-		clientId,
-		insertedBlockName,
-		hasExistingLinkValue,
-	] );
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) return;
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
 
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
@@ -109,23 +80,42 @@ const MainContent = ( {
 				'You have not yet created any menus. Displaying a list of your Pages'
 		  );
 
-	const renderLinkUI = ( block ) => {
+	const renderLinkUI = (
+		currentBlock,
+		lastInsertedBlock,
+		setLastInsertedBlock
+	) => {
+		const blockSupportsLinkUI = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+			lastInsertedBlock?.name
+		);
+		const currentBlockWasJustInserted =
+			lastInsertedBlock?.clientId === currentBlock.clientId;
+
+		const shouldShowLinkUIForBlock =
+			blockSupportsLinkUI && currentBlockWasJustInserted;
+
 		return (
-			clientIdWithOpenLinkUI === block.clientId && (
+			shouldShowLinkUIForBlock && (
 				<LinkUI
-					clientId={ lastInsertedBlockClientId }
-					link={ insertedBlockAttributes }
-					onClose={ () => setClientIdWithOpenLinkUI( null ) }
+					clientId={ lastInsertedBlock?.clientId }
+					link={ lastInsertedBlock?.attributes }
+					onClose={ () => {
+						setLastInsertedBlock( null );
+					} }
 					hasCreateSuggestion={ false }
 					onChange={ ( updatedValue ) => {
 						updateAttributes(
 							updatedValue,
-							setInsertedBlockAttributes,
-							insertedBlockAttributes
+							setInsertedBlockAttributes(
+								lastInsertedBlock?.clientId
+							),
+							lastInsertedBlock?.attributes
 						);
-						setClientIdWithOpenLinkUI( null );
+						setLastInsertedBlock( null );
+					} }
+					onCancel={ () => {
+						setLastInsertedBlock( null );
 					} }
-					onCancel={ () => setClientIdWithOpenLinkUI( null ) }
 				/>
 			)
 		);