Add the ability to create a new page in the Site Editor

docs/reference-guides/data/data-core-edit-site.md

@@ -131,6 +131,18 @@ _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**
@@ -256,6 +268,15 @@ _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.

packages/edit-site/src/components/add-new-page/index.js

@@ -0,0 +1,146 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useSelect } 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() {
+	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();
+
+		if ( isCreatingPage ) {
+			return;
+		}
+		setIsCreatingPage( true );
+		try {
+			const newPage = await saveEntityRecord(
+				'postType',
+				'page',
+				{
+					status: 'draft',
+					title,
+					slug: kebabCase( title || DEFAULT_TITLE ),
+				},
+				{ 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 } );
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created template e.g: "Category".
+					__( '"%s" successfully created.' ),
+					newPage.title?.rendered || title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the page.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsCreatingPage( false );
+		}
+	}
+
+	const handleClose = () => {
+		setIsCreatePageModalOpened( false );
+	};
+
+	if ( ! isCreatePageModalOpen.isOpen ) return null;
+
+	return (
+		<Modal title="Draft a new page" onRequestClose={ handleClose }>
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<TextControl
+						help="You can always change this later"
+						label="Page title"
+						onChange={ setTitle }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button variant="tertiary" onClick={ handleClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+						>
+							{ __( 'Create draft' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

packages/edit-site/src/components/layout/index.js

@@ -45,6 +45,7 @@ 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 );
 
@@ -132,6 +133,7 @@ export default function Layout() {
 	return (
 		<>
 			{ window?.__experimentalEnableCommandCenter && <CommandMenu /> }
+			<AddNewPageModal />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }

packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js

@@ -8,14 +8,18 @@ import {
 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';
 
 /**
  * Internal dependencies
  */
+import { store as editSiteStore } from '../../store';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
+import SidebarButton from '../sidebar-button';
 
 const PageItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
@@ -31,10 +35,23 @@ export default function SidebarNavigationScreenPages() {
 		'page'
 	);
 
+	const { setIsCreatePageModalOpened } = useDispatch( editSiteStore );
+
 	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,
+						} )
+					}
+				/>
+			}
 			content={
 				<>
 					{ isLoading && (

packages/edit-site/src/store/actions.js

@@ -354,6 +354,21 @@ 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.
  *

packages/edit-site/src/store/reducer.js

@@ -157,13 +157,32 @@ 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,
 } );

packages/edit-site/src/store/selectors.js

@@ -289,6 +289,17 @@ 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
  */