From 14236f3575ec553b839f4459d65140583f2d4ef1 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 5 Jun 2023 09:46:00 +0400
Subject: [PATCH] ListView: Converted additional content render into a
 Component (#51163)

---
 .../components/list-view/block-contents.js    | 15 +--
 .../src/components/list-view/index.js         | 34 +++----
 .../edit/menu-inspector-controls.js           | 93 +++++++++----------
 3 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index e3550bcd39eb14..8d5b03395f3e20 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -47,7 +47,7 @@ const ListViewBlockContents = forwardRef(
 			[]
 		);
 
-		const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
+		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
 			useListViewContext();
 
 		const isBlockMoveTarget =
@@ -67,12 +67,13 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
-				{ renderAdditionalBlockUI &&
-					renderAdditionalBlockUI(
-						block,
-						insertedBlock,
-						setInsertedBlock
-					) }
+				{ AdditionalBlockContent && (
+					<AdditionalBlockContent
+						block={ block }
+						insertedBlock={ insertedBlock }
+						setInsertedBlock={ setInsertedBlock }
+					/>
+				) }
 				<BlockDraggable clientIds={ draggableClientIds }>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index ea637f0fe3131a..8a60c875a83030 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -57,19 +57,19 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                         Components props.
- * @param {string}         props.id                      An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?HTMLElement}   props.dropZoneElement         Optional element to be used as the drop zone.
- * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
- * @param {string}         props.description             Optional accessible description for the tree grid component.
- * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
- * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
- * @param {Ref}            ref                           Forwarded ref
+ * @param {Object}         props                        Components props.
+ * @param {string}         props.id                     An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.
+ * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description            Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
+ * @param {Ref}            ref                          Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -83,7 +83,7 @@ function ListViewComponent(
 		rootClientId,
 		description,
 		onSelect,
-		renderAdditionalBlockUI,
+		additionalBlockContent: AdditionalBlockContent,
 	},
 	ref
 ) {
@@ -224,7 +224,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
-			renderAdditionalBlockUI,
+			AdditionalBlockContent,
 			insertedBlock,
 			setInsertedBlock,
 			treeGridElementRef: elementRef,
@@ -236,7 +236,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			instanceId,
-			renderAdditionalBlockUI,
+			AdditionalBlockContent,
 			insertedBlock,
 			setInsertedBlock,
 		]
@@ -297,7 +297,7 @@ export default forwardRef( ( props, ref ) => {
 			showAppender={ false }
 			rootClientId={ null }
 			onSelect={ null }
-			renderAdditionalBlockUI={ null }
+			additionalBlockContent={ null }
 			blockSettingsMenu={ undefined }
 		/>
 	);
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 23f005beb43502..79ab409d62b602 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -33,6 +33,48 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-submenu',
 ];
 
+function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+		insertedBlock?.name
+	);
+	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
+	const showLinkControls = supportsLinkControls && blockWasJustInserted;
+
+	if ( ! showLinkControls ) {
+		return null;
+	}
+
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) return;
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
+
+	return (
+		<LinkUI
+			clientId={ insertedBlock?.clientId }
+			link={ insertedBlock?.attributes }
+			onClose={ () => {
+				setInsertedBlock( null );
+			} }
+			hasCreateSuggestion={ false }
+			onChange={ ( updatedValue ) => {
+				updateAttributes(
+					updatedValue,
+					setInsertedBlockAttributes( insertedBlock?.clientId ),
+					insertedBlock?.attributes
+				);
+				setInsertedBlock( null );
+			} }
+			onCancel={ () => {
+				setInsertedBlock( null );
+			} }
+		/>
+	);
+}
+
 const MainContent = ( {
 	clientId,
 	currentMenuId,
@@ -52,14 +94,6 @@ const MainContent = ( {
 		[ clientId ]
 	);
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const setInsertedBlockAttributes =
-		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			if ( ! _insertedBlockClientId ) return;
-			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
-		};
-
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
@@ -80,47 +114,6 @@ const MainContent = ( {
 				'You have not yet created any menus. Displaying a list of your Pages'
 		  );
 
-	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 (
-			shouldShowLinkUIForBlock && (
-				<LinkUI
-					clientId={ lastInsertedBlock?.clientId }
-					link={ lastInsertedBlock?.attributes }
-					onClose={ () => {
-						setLastInsertedBlock( null );
-					} }
-					hasCreateSuggestion={ false }
-					onChange={ ( updatedValue ) => {
-						updateAttributes(
-							updatedValue,
-							setInsertedBlockAttributes(
-								lastInsertedBlock?.clientId
-							),
-							lastInsertedBlock?.attributes
-						);
-						setLastInsertedBlock( null );
-					} }
-					onCancel={ () => {
-						setLastInsertedBlock( null );
-					} }
-				/>
-			)
-		);
-	};
-
 	return (
 		<div className="wp-block-navigation__menu-inspector-controls">
 			{ clientIdsTree.length === 0 && (
@@ -135,7 +128,7 @@ const MainContent = ( {
 				description={ description }
 				showAppender
 				blockSettingsMenu={ LeafMoreMenu }
-				renderAdditionalBlockUI={ renderLinkUI }
+				additionalBlockContent={ AdditionalBlockContent }
 			/>
 		</div>
 	);