open convert to links modal on select of a page item

Author: draganescu

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

@@ -2,10 +2,10 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -35,7 +35,12 @@ function useFrontPageId() {
 	}, [] );
 }
 
-export default function PageListItemEdit( { context, attributes } ) {
+export default function PageListItemEdit( {
+	context,
+	attributes,
+	isSelected,
+	setAttributes,
+} ) {
 	const { id, label, link, hasChildren } = attributes;
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const frontPageId = useFrontPageId();
@@ -50,6 +55,12 @@ export default function PageListItemEdit( { context, attributes } ) {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps );
 
+	useEffect( () => {
+		if ( isSelected ) {
+			setAttributes( { isSelected: true } );
+		}
+	}, [ isSelected ] );
+
 	return (
 		<li
 			key={ id }

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

@@ -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 = () => setOpen( true );
+	const closeModal = () => setOpen( false );
 
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
@@ -269,7 +249,11 @@ export default function PageListEdit( {
 		__unstableDisableDropZone: true,
 		templateLock: 'all',
 		onInput: NOOP,
-		onChange: NOOP,
+		onChange: () => {
+			if ( hasResolvedPages ) {
+				openModal();
+			}
+		},
 		value: blockList,
 	} );
 
@@ -325,10 +309,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 }