create page modal use local state

WordPress · May 17, 2023 · 5fc86cf · 5fc86cf
1 parent 6558f3f
commit 5fc86cf
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 170 deletions.
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
@@ -131,18 +131,6 @@ _Returns_
 
 -   `Object`: Settings.
 
-### isCreatePageModalOpened
-
-Returns the current opened/closed state of the create page modal.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `boolean`: True if the create page modal should be open; false if closed.
-
 ### isFeatureActive
 
 > **Deprecated**
@@ -268,15 +256,6 @@ _Returns_
 
 > **Deprecated**
 
-### setIsCreatePageModalOpened
-
-Sets whether the create new page modal is open
-
-_Parameters_
-
--   _isOpen_ `boolean`: If true, opens the create new page modal. If false, closes it. It does not toggle the state, but sets it directly.
--   _options_ `Object`: Options for the create new page modal.
-
 ### setIsInserterOpened
 
 Opens or closes the inserter.

diff --git a/packages/edit-site/src/components/add-new-page/index.js b/packages/edit-site/src/components/add-new-page/index.js
@@ -14,43 +14,21 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
 
 const DEFAULT_TITLE = __( 'Untitled page' );
 
-const { useHistory } = unlock( routerPrivateApis );
-
-export default function AddNewPageModal() {
+export default function AddNewPageModal( { onSave, onCancel } ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
 	const [ title, setTitle ] = useState( DEFAULT_TITLE );
 
-	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
-	const { isCreatePageModalOpen } = useSelect( ( select ) => {
-		const { isCreatePageModalOpened } = unlock( select( editSiteStore ) );
-
-		return {
-			isCreatePageModalOpen: isCreatePageModalOpened(),
-		};
-	}, [] );
-
-	const { setIsCreatePageModalOpened } = useDispatch( editSiteStore );
-
-	const { setPage } = unlock( useDispatch( editSiteStore ) );
-
 	async function createPage( event ) {
 		event.preventDefault();
 
@@ -70,21 +48,7 @@ export default function AddNewPageModal() {
 				{ throwOnError: true }
 			);
 
-			if ( isCreatePageModalOpen.options?.redirectAfterSave ) {
-				// Set template before navigating away to avoid initial stale value.
-				setPage( {
-					context: { postType: 'page', postId: newPage.id },
-				} );
-				// Navigate to the created template editor.
-				history.push( {
-					postId: newPage.id,
-					postType: newPage.type,
-					canvas: 'edit',
-				} );
-			}
-
-			// Close the modal when complete
-			setIsCreatePageModalOpened( false, { redirectAfterSave: false } );
+			onSave( newPage );
 
 			createSuccessNotice(
 				sprintf(
@@ -110,14 +74,8 @@ export default function AddNewPageModal() {
 		}
 	}
 
-	const handleClose = () => {
-		setIsCreatePageModalOpened( false );
-	};
-
-	if ( ! isCreatePageModalOpen.isOpen ) return null;
-
 	return (
-		<Modal title="Draft a new page" onRequestClose={ handleClose }>
+		<Modal title="Draft a new page" onRequestClose={ onCancel }>
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl
@@ -127,7 +85,7 @@ export default function AddNewPageModal() {
 						value={ title }
 					/>
 					<HStack spacing={ 2 } justify="end">
-						<Button variant="tertiary" onClick={ handleClose }>
+						<Button variant="tertiary" onClick={ onCancel }>
 							{ __( 'Cancel' ) }
 						</Button>
 						<Button

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -45,7 +45,6 @@ import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-import AddNewPageModal from '../add-new-page';
 
 const { useCommands } = unlock( coreCmmandsPrivateApis );
 
@@ -133,7 +132,6 @@ export default function Layout() {
 	return (
 		<>
 			{ window?.__experimentalEnableCommandCenter && <CommandMenu /> }
-			<AddNewPageModal />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -5,11 +5,13 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 } from '@wordpress/components';
+import { useState } from '@wordpress/elements';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { plus } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -20,6 +22,10 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
 import SidebarButton from '../sidebar-button';
+import AddNewPageModal from '../add-new-page';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const PageItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
@@ -35,65 +41,85 @@ export default function SidebarNavigationScreenPages() {
 		'page'
 	);
 
-	const { setIsCreatePageModalOpened } = useDispatch( editSiteStore );
+	const [ showAddPage, setShowAddPage ] = useState( false );
+
+	const history = useHistory();
+	const { setPage } = unlock( useDispatch( editSiteStore ) );
+
+	const handleNewPage = ( { type, id } ) => {
+		setPage( {
+			context: { postType: type, postId: id },
+		} );
+		// Navigate to the created template editor.
+		history.push( {
+			postId: id,
+			postType: type,
+			canvas: 'edit',
+		} );
+		setShowAddPage( false );
+	};
 
 	return (
-		<SidebarNavigationScreen
-			title={ __( 'Pages' ) }
-			description={ __( 'Browse and edit pages on your site.' ) }
-			actions={
-				<SidebarButton
-					icon={ plus }
-					label={ __( 'Draft a new page' ) }
-					onClick={ () =>
-						setIsCreatePageModalOpened( true, {
-							redirectAfterSave: true,
-						} )
-					}
+		<>
+			{ showAddPage && (
+				<AddNewPageModal
+					onSave={ handleNewPage }
+					onCancel={ () => setShowAddPage( false ) }
 				/>
-			}
-			content={
-				<>
-					{ isLoading && (
-						<ItemGroup>
-							<Item>{ __( 'Loading pages' ) }</Item>
-						</ItemGroup>
-					) }
-					{ ! isLoading && (
-						<>
-							<SidebarNavigationSubtitle>
-								{ __( 'Recent' ) }
-							</SidebarNavigationSubtitle>
+			) }
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				description={ __( 'Browse and edit pages on your site.' ) }
+				actions={
+					<SidebarButton
+						icon={ plus }
+						label={ __( 'Draft a new page' ) }
+						onClick={ () => setShowAddPage( true ) }
+					/>
+				}
+				content={
+					<>
+						{ isLoading && (
 							<ItemGroup>
-								{ ! pages?.length && (
-									<Item>{ __( 'No page found' ) }</Item>
-								) }
-								{ pages?.map( ( page ) => (
-									<PageItem
-										postId={ page.id }
-										key={ page.id }
-										withChevron
-									>
-										{ decodeEntities(
-											page.title?.rendered
-										) ?? __( '(no title)' ) }
-									</PageItem>
-								) ) }
-								<SidebarNavigationItem
-									className="edit-site-sidebar-navigation-screen-pages__see-all"
-									href="edit.php?post_type=page"
-									onClick={ () => {
-										document.location =
-											'edit.php?post_type=page';
-									} }
-								>
-									{ __( 'Manage all pages' ) }
-								</SidebarNavigationItem>
+								<Item>{ __( 'Loading pages' ) }</Item>
 							</ItemGroup>
-						</>
-					) }
-				</>
-			}
-		/>
+						) }
+						{ ! isLoading && (
+							<>
+								<SidebarNavigationSubtitle>
+									{ __( 'Recent' ) }
+								</SidebarNavigationSubtitle>
+								<ItemGroup>
+									{ ! pages?.length && (
+										<Item>{ __( 'No page found' ) }</Item>
+									) }
+									{ pages?.map( ( page ) => (
+										<PageItem
+											postId={ page.id }
+											key={ page.id }
+											withChevron
+										>
+											{ decodeEntities(
+												page.title?.rendered
+											) ?? __( '(no title)' ) }
+										</PageItem>
+									) ) }
+									<SidebarNavigationItem
+										className="edit-site-sidebar-navigation-screen-pages__see-all"
+										href="edit.php?post_type=page"
+										onClick={ () => {
+											document.location =
+												'edit.php?post_type=page';
+										} }
+									>
+										{ __( 'Manage all pages' ) }
+									</SidebarNavigationItem>
+								</ItemGroup>
+							</>
+						) }
+					</>
+				}
+			/>
+		</>
 	);
 }
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
@@ -354,21 +354,6 @@ export function setIsSaveViewOpened( isOpen ) {
 	};
 }
 
-/**
- * Sets whether the create new page modal is open
- *
- * @param {boolean} isOpen  If true, opens the create new page modal. If false, closes it.
- *                          It does not toggle the state, but sets it directly.
- * @param {Object}  options Options for the create new page modal.
- */
-export function setIsCreatePageModalOpened( isOpen, options ) {
-	return {
-		type: 'SET_IS_CREATE_PAGE_MODAL_OPENED',
-		isOpen,
-		options,
-	};
-}
-
 /**
  * Reverts a template to its original theme-provided file.
  *

diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
@@ -157,32 +157,13 @@ function editorCanvasContainerView( state = undefined, action ) {
 	return state;
 }
 
-/**
- * Reducer used to track the create new page modal which can be opened in and out of editor
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- */
-function createPageModal( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_IS_CREATE_PAGE_MODAL_OPENED':
-			return {
-				isOpen: action.isOpen,
-				options: action.options,
-			};
-	}
-
-	return state;
-}
-
 export default combineReducers( {
 	deviceType,
 	settings,
 	editedPost,
 	blockInserterPanel,
 	listViewPanel,
 	saveViewPanel,
-	createPageModal,
 	canvasMode,
 	editorCanvasContainerView,
 } );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
@@ -289,17 +289,6 @@ export function getEditorMode( state ) {
 	return __unstableGetPreference( state, 'editorMode' );
 }
 
-/**
- * Returns the current opened/closed state of the create page modal.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} True if the create page modal should be open; false if closed.
- */
-export function isCreatePageModalOpened( state ) {
-	return state.createPageModal;
-}
-
 /**
  * @deprecated
  */