Add the ability to create a new page in the Site Editor #50565
+254
−83
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }> | ||
|
There was a problem hiding this comment. Not a blocker, but I noticed that when I throttled my connection I could close the modal and click around, only to be redirected to the new page, which seemed confusing. A bit of an edge case though, unless you live in an area with bad internet speeds like me 😄 2023-06-06.12.01.53.mp4Maybe in another iteration we could look at blocking the modal close until the save callback is fired? const closeModal = () => {
if ( isCreatingPage ) {
return;
}
onClose();
}; |
||
| <form onSubmit={ createPage }> | ||
| <VStack spacing={ 3 }> | ||
| <TextControl | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| help={ __( 'You can always change this later' ) } | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| label={ __( 'Page title' ) } | ||
|
There was a problem hiding this comment.
Not a blocker, just asking if we're not enforcing a page title for creation, maybe add |
||
| onChange={ setTitle } | ||
| placeholder={ __( 'Untitled' ) } | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| value={ title } | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /> | ||
| <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> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); | ||
|
|
||
| test.describe( 'Pages', () => { | ||
| test.beforeAll( async ( { requestUtils } ) => { | ||
| await requestUtils.activateTheme( 'emptytheme' ); | ||
| } ); | ||
| test( 'Create a new page', async ( { admin, page } ) => { | ||
| const pageName = 'demo'; | ||
| await admin.visitSiteEditor(); | ||
| await page.getByRole( 'button', { name: 'Pages' } ).click(); | ||
| await page.getByRole( 'button', { name: 'Draft a new page' } ).click(); | ||
| // Fill the page title and submit. | ||
| const newPageDialog = page.locator( | ||
| 'role=dialog[name="Draft a new page"i]' | ||
| ); | ||
| const pageTitleInput = newPageDialog.locator( | ||
| 'role=textbox[name="Page title"i]' | ||
| ); | ||
| await pageTitleInput.fill( pageName ); | ||
| await page.keyboard.press( 'Enter' ); | ||
| await expect( | ||
| page.locator( | ||
| `role=button[name="Dismiss this notice"i] >> text="${ pageName }" successfully created.` | ||
| ) | ||
| ).toBeVisible(); | ||
| } ); | ||
| } ); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After the page is created, where should focus get placed? Right now it's being dropped at the hidden Back button in the closed sidebar. I agree with @carolinan that the current mode of being moved to the site editor template for this page is an odd experience. I'd be fine with it if the sidebar stayed open, in which case, handling the focus here isn't an issue since it's being placed in a sensible spot.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This will make more sense once the content editing PR is merged. There is also some follow up work around improving the add page experience, including selecting starter patterns.