forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* create new page * remove pages nesting * add redirectAfterSave to add page modal * reset redirectAfterSave * adjust copy of new page to show draft * redirect after adding page * create page modal use local state * fix import add page * add page use onClose and remove setPage * cleaning up add page * removed value and used placeholder for add page * add page modal translations * e2e test new page modal * move setting current canvas * removed unnecessary help text * Revert "move setting current canvas" This reverts commit 79d1116. * update add new page placeholder * auto focus add new page input Co-authored-by: Ramon <ramonjd@users.noreply.github.com> * add no title placeholder --------- Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
- Loading branch information
1 parent
e393252
commit 0a9c3c5
Showing
3 changed files
with
254 additions
and
83 deletions.
There are no files selected for viewing
105 changes: 105 additions & 0 deletions
105
packages/edit-site/src/components/add-new-page/index.js
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,105 @@ | ||
| /** | ||
| * 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 || __( 'No title' ) ), | ||
| }, | ||
| { 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 | ||
| /* eslint-disable jsx-a11y/no-autofocus */ | ||
| autoFocus | ||
| /* eslint-enable jsx-a11y/no-autofocus */ | ||
| label={ __( 'Page title' ) } | ||
| onChange={ setTitle } | ||
| placeholder={ __( 'No title' ) } | ||
| 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> | ||
| ); | ||
| } |
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(); | ||
| } ); | ||
| } ); |