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

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

@@ -0,0 +1,103 @@
+/**
+ * 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 } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function AddNewPageModal( { onSave, onClose } ) {
+	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+	const [ title, setTitle ] = useState( '' );
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	async function createPage( event ) {
+		event.preventDefault();
+
+		if ( isCreatingPage ) {
+			return;
+		}
+		setIsCreatingPage( true );
+		try {
+			const newPage = await saveEntityRecord(
+				'postType',
+				'page',
+				{
+					status: 'draft',
+					title,
+					slug: kebabCase( title || __( 'Untitled' ) ),
+				},
+				{ throwOnError: true }
+			);
+
+			onSave( newPage );
+
+			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 );
+		}
+	}
+
+	return (
+		<Modal title="Draft a new page" onRequestClose={ onClose }>
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<TextControl
+						help="You can always change this later"
+						label="Page title"
+						onChange={ setTitle }
+						placeholder={ __( 'Untitled' ) }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+						>
+							{ __( 'Create draft' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

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

@@ -5,9 +5,12 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -16,6 +19,11 @@ 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';
+import AddNewPageModal from '../add-new-page';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const PageItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
@@ -31,52 +39,81 @@ export default function SidebarNavigationScreenPages() {
 		'page'
 	);
 
+	const [ showAddPage, setShowAddPage ] = useState( false );
+
+	const history = useHistory();
+
+	const handleNewPage = ( { type, 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.' ) }
-			content={
-				<>
-					{ isLoading && (
-						<ItemGroup>
-							<Item>{ __( 'Loading pages' ) }</Item>
-						</ItemGroup>
-					) }
-					{ ! isLoading && (
-						<>
-							<SidebarNavigationSubtitle>
-								{ __( 'Recent' ) }
-							</SidebarNavigationSubtitle>
+		<>
+			{ showAddPage && (
+				<AddNewPageModal
+					onSave={ handleNewPage }
+					onClose={ () => setShowAddPage( false ) }
+				/>
+			) }
+			<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>
+							</>
+						) }
+					</>
+				}
+			/>
+		</>
 	);
 }