-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add the ability to create a new page in the Site Editor #50565
Merged
Merged
Changes from 6 commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
b39b236
create new page
SaxonF f045425
remove pages nesting
SaxonF f3e097a
add redirectAfterSave to add page modal
SaxonF 67c222f
reset redirectAfterSave
SaxonF 216bb20
adjust copy of new page to show draft
SaxonF 6558f3f
redirect after adding page
SaxonF 5fc86cf
create page modal use local state
SaxonF 205a2a6
fix import add page
SaxonF 13c4eee
add page use onClose and remove setPage
SaxonF b4f4817
cleaning up add page
SaxonF 7f0140e
Merge branch 'trunk' into add/add-new-page
SaxonF 7ad5b2b
removed value and used placeholder for add page
SaxonF 2148ede
add page modal translations
SaxonF e46efae
e2e test new page modal
SaxonF 28d80f4
Merge branch 'trunk' into add/add-new-page
SaxonF 79d1116
move setting current canvas
SaxonF 604051c
removed unnecessary help text
SaxonF a2426d5
Revert "move setting current canvas"
SaxonF ef1c31c
Merge branch 'trunk' into add/add-new-page
SaxonF 0f168d2
update add new page placeholder
SaxonF 3edbff5
auto focus add new page input
SaxonF 49635c0
Merge branch 'add/add-new-page' of https://github.com/WordPress/guten…
SaxonF 0efe958
add no title placeholder
SaxonF File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
146 changes: 146 additions & 0 deletions
146
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,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 | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
help="You can always change this later" | ||
label="Page title" | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
onChange={ setTitle } | ||
value={ title } | ||
SaxonF marked this conversation as resolved.
Show resolved
Hide resolved
|
||
/> | ||
<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> | ||
); | ||
} |
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
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
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.