From 137ad68e41b0ed2e48d7d70f3428cc4245a856a4 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 7 Nov 2023 20:55:30 +0900
Subject: [PATCH] Edit Post: Fix pattern modal reopening when making the title
 empty again (#55873)

* Fix pattern modal reopening when making the title empty again

* Use boolean value
---
 .../components/start-page-options/index.js    | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js
index 02473fd4eaa14..77264d27a5e7d 100644
--- a/packages/edit-post/src/components/start-page-options/index.js
+++ b/packages/edit-post/src/components/start-page-options/index.js
@@ -3,7 +3,7 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
@@ -62,19 +62,11 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	);
 }
 
-function StartPageOptionsModal() {
-	const [ modalState, setModalState ] = useState( 'initial' );
+function StartPageOptionsModal( { onClose } ) {
 	const startPatterns = useStartPatterns();
 	const hasStartPattern = startPatterns.length > 0;
-	const shouldOpenModal = hasStartPattern && modalState === 'initial';
 
-	useEffect( () => {
-		if ( shouldOpenModal ) {
-			setModalState( 'open' );
-		}
-	}, [ shouldOpenModal ] );
-
-	if ( modalState !== 'open' ) {
+	if ( ! hasStartPattern ) {
 		return null;
 	}
 
@@ -83,12 +75,12 @@ function StartPageOptionsModal() {
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			isFullScreen
-			onRequestClose={ () => setModalState( 'closed' ) }
+			onRequestClose={ onClose }
 		>
 			<div className="edit-post-start-page-options__modal-content">
 				<PatternSelection
 					blockPatterns={ startPatterns }
-					onChoosePattern={ () => setModalState( 'closed' ) }
+					onChoosePattern={ onClose }
 				/>
 			</div>
 		</Modal>
@@ -96,6 +88,7 @@ function StartPageOptionsModal() {
 }
 
 export default function StartPageOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
 	const shouldEnableModal = useSelect( ( select ) => {
 		const { isCleanNewPost } = select( editorStore );
 		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
@@ -107,9 +100,9 @@ export default function StartPageOptions() {
 		);
 	}, [] );
 
-	if ( ! shouldEnableModal ) {
+	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}
 
-	return <StartPageOptionsModal />;
+	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
 }