Reorganize convert to links modal

WordPress · Feb 15, 2023 · 131350d · 131350d
1 parent a43447f
commit 131350d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 42 deletions.
diff --git a/packages/block-library/src/page-list/convert-to-links-modal.js b/packages/block-library/src/page-list/convert-to-links-modal.js
@@ -1,53 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarButton, Button, Modal } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
 
 export const convertDescription = __(
 	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
 );
 
-export function ConvertToLinksModal( { onClick, disabled } ) {
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
+export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 	return (
-		<>
-			<BlockControls group="other">
-				<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-					{ __( 'Edit' ) }
-				</ToolbarButton>
-			</BlockControls>
-			{ isOpen && (
-				<Modal
-					onRequestClose={ closeModal }
-					title={ __( 'Edit this menu' ) }
-					className={ 'wp-block-page-list-modal' }
-					aria={ {
-						describedby: 'wp-block-page-list-modal__description',
-					} }
+		<Modal
+			onRequestClose={ onClose }
+			title={ __( 'Edit this menu' ) }
+			className={ 'wp-block-page-list-modal' }
+			aria={ {
+				describedby: 'wp-block-page-list-modal__description',
+			} }
+		>
+			<p id={ 'wp-block-page-list-modal__description' }>
+				{ convertDescription }
+			</p>
+			<div className="wp-block-page-list-modal-buttons">
+				<Button variant="tertiary" onClick={ onClose }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					variant="primary"
+					disabled={ disabled }
+					onClick={ onClick }
 				>
-					<p id={ 'wp-block-page-list-modal__description' }>
-						{ convertDescription }
-					</p>
-					<div className="wp-block-page-list-modal-buttons">
-						<Button variant="tertiary" onClick={ closeModal }>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							disabled={ disabled }
-							onClick={ onClick }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					</div>
-				</Modal>
-			) }
-		</>
+					{ __( 'Edit' ) }
+				</Button>
+			</div>
+		</Modal>
 	);
 }
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { createBlock } from '@wordpress/blocks';
 import {
 	InspectorControls,
+	BlockControls,
 	useBlockProps,
 	useInnerBlocksProps,
 	getColorClassName,
@@ -17,13 +18,14 @@ import {
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
+	ToolbarButton,
 	Spinner,
 	Notice,
 	ComboboxControl,
 	Button,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -109,6 +111,29 @@ 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,
@@ -298,7 +323,7 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinksModal
+				<ConvertToLinks
 					disabled={ ! hasResolvedPages }
 					onClick={ convertToNavigationLinks }
 				/>