Open convert to links modal on select of a page item (#48723)

docs/reference-guides/data/data-core-block-editor.md

@@ -860,6 +860,20 @@ _Returns_
 
 -   `string`: Client Id of moving block.
 
+### hasDraggedInnerBlock
+
+Returns true if one of the block's inner blocks is dragged.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _clientId_ `string`: Block client ID.
+-   _deep_ `boolean`: Perform a deep check.
+
+_Returns_
+
+-   `boolean`: Whether the block has an inner block dragged
+
 ### hasInserterItems
 
 Determines whether there are items to show in the inserter.
@@ -909,7 +923,7 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: Whether the block as an inner block selected
+-   `boolean`: Whether the block has an inner block selected
 
 ### isAncestorBeingDragged
 

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

@@ -1199,7 +1199,7 @@ export function isBlockSelected( state, clientId ) {
  * @param {string}  clientId Block client ID.
  * @param {boolean} deep     Perform a deep check.
  *
- * @return {boolean} Whether the block as an inner block selected
+ * @return {boolean} Whether the block has an inner block selected
  */
 export function hasSelectedInnerBlock( state, clientId, deep = false ) {
 	return getBlockOrder( state, clientId ).some(
@@ -1210,6 +1210,23 @@ export function hasSelectedInnerBlock( state, clientId, deep = false ) {
 	);
 }
 
+/**
+ * Returns true if one of the block's inner blocks is dragged.
+ *
+ * @param {Object}  state    Editor state.
+ * @param {string}  clientId Block client ID.
+ * @param {boolean} deep     Perform a deep check.
+ *
+ * @return {boolean} Whether the block has an inner block dragged
+ */
+export function hasDraggedInnerBlock( state, clientId, deep = false ) {
+	return getBlockOrder( state, clientId ).some(
+		( innerClientId ) =>
+			isBlockBeingDragged( state, innerClientId ) ||
+			( deep && hasDraggedInnerBlock( state, innerClientId, deep ) )
+	);
+}
+
 /**
  * Returns true if the block corresponding to the specified client ID is
  * currently selected but isn't the last of the selected blocks. Here "last"

packages/block-library/src/page-list-item/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */

packages/block-library/src/page-list/edit.js

@@ -25,9 +25,9 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useState, useEffect } from '@wordpress/element';
+import { useMemo, useState, useEffect, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -113,36 +113,16 @@ function BlockContent( {
 	}
 }
 
-function ConvertToLinks( { onClick, disabled } ) {
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
-	return (
-		<>
-			<BlockControls group="other">
-				<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-					{ __( 'Edit' ) }
-				</ToolbarButton>
-			</BlockControls>
-			{ isOpen && (
-				<ConvertToLinksModal
-					onClick={ onClick }
-					onClose={ closeModal }
-					disabled={ disabled }
-				/>
-			) }
-		</>
-	);
-}
-
 export default function PageListEdit( {
 	context,
 	clientId,
 	attributes,
 	setAttributes,
 } ) {
 	const { parentPageID } = attributes;
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = useCallback( () => setOpen( true ), [] );
+	const closeModal = () => setOpen( false );
 
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
@@ -263,34 +243,69 @@ export default function PageListEdit( {
 		parentPageID,
 	] );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/page-list-item' ],
-		renderAppender: false,
-		__unstableDisableDropZone: true,
-		templateLock: 'all',
-		onInput: NOOP,
-		onChange: NOOP,
-		value: blockList,
-	} );
-
-	const { isNested } = useSelect(
+	const {
+		isNested,
+		hasSelectedChild,
+		parentBlock,
+		hasDraggedChild,
+		isChildOfNavigation,
+	} = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			const {
+				getBlockParentsByBlockName,
+				hasSelectedInnerBlock,
+				getBlockRootClientId,
+				hasDraggedInnerBlock,
+			} = select( blockEditorStore );
 			const blockParents = getBlockParentsByBlockName(
 				clientId,
 				'core/navigation-submenu',
 				true
 			);
+			const navigationBlockParents = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation',
+				true
+			);
 			return {
 				isNested: blockParents.length > 0,
+				isChildOfNavigation: navigationBlockParents.length > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
+				hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
+				parentBlock: getBlockRootClientId( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/page-list-item' ],
+		renderAppender: false,
+		__unstableDisableDropZone: true,
+		templateLock: isChildOfNavigation ? false : 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
+	} );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( hasSelectedChild || hasDraggedChild ) {
+			openModal();
+			selectBlock( parentBlock );
+		}
+	}, [
+		hasSelectedChild,
+		hasDraggedChild,
+		parentBlock,
+		selectBlock,
+		openModal,
+	] );
+
 	useEffect( () => {
 		setAttributes( { isNested } );
-	}, [ isNested ] );
+	}, [ isNested, setAttributes ] );
 
 	return (
 		<>
@@ -325,10 +340,23 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinks
-					disabled={ ! hasResolvedPages }
-					onClick={ convertToNavigationLinks }
-				/>
+				<>
+					<BlockControls group="other">
+						<ToolbarButton
+							title={ __( 'Edit' ) }
+							onClick={ openModal }
+						>
+							{ __( 'Edit' ) }
+						</ToolbarButton>
+					</BlockControls>
+					{ isOpen && (
+						<ConvertToLinksModal
+							onClick={ convertToNavigationLinks }
+							onClose={ closeModal }
+							disabled={ ! hasResolvedPages }
+						/>
+					) }
+				</>
 			) }
 			<BlockContent
 				blockProps={ blockProps }