Site Editor: Template list add rename action #36879
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,95 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; | ||
| import { moreVertical } from '@wordpress/icons'; | ||
| import { store as noticesStore } from '@wordpress/notices'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as editSiteStore } from '../../../store'; | ||
| import isTemplateRemovable from '../../../utils/is-template-removable'; | ||
| import isTemplateRevertable from '../../../utils/is-template-revertable'; | ||
| import RenameMenuItem from './rename-menu-item'; | ||
|
|
||
| export default function Actions( { template } ) { | ||
| const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); | ||
| const { saveEditedEntityRecord } = useDispatch( coreStore ); | ||
| const { createSuccessNotice, createErrorNotice } = useDispatch( | ||
| noticesStore | ||
| ); | ||
|
|
||
| const isRemovable = isTemplateRemovable( template ); | ||
| const isRevertable = isTemplateRevertable( template ); | ||
|
|
||
| if ( ! isRemovable && ! isRevertable ) { | ||
| return null; | ||
| } | ||
|
|
||
| async function revertAndSaveTemplate() { | ||
| try { | ||
| await revertTemplate( template, { allowUndo: false } ); | ||
| await saveEditedEntityRecord( | ||
| 'postType', | ||
| template.type, | ||
| template.id | ||
| ); | ||
|
|
||
| createSuccessNotice( __( 'Template reverted.' ), { | ||
| type: 'snackbar', | ||
| } ); | ||
| } catch ( error ) { | ||
| const errorMessage = | ||
| error.message && error.code !== 'unknown_error' | ||
| ? error.message | ||
| : __( 'An error occurred while reverting the template.' ); | ||
|
|
||
| createErrorNotice( errorMessage, { type: 'snackbar' } ); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <DropdownMenu | ||
| icon={ moreVertical } | ||
| label={ __( 'Actions' ) } | ||
| className="edit-site-list-table__actions" | ||
| > | ||
| { ( { onClose } ) => ( | ||
| <MenuGroup> | ||
| { isRemovable && ( | ||
| <> | ||
| <RenameMenuItem | ||
| template={ template } | ||
| onClose={ onClose } | ||
| /> | ||
| <MenuItem | ||
| isDestructive | ||
| onClick={ () => { | ||
| removeTemplate( template ); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Delete template' ) } | ||
| </MenuItem> | ||
| </> | ||
| ) } | ||
| { isRevertable && ( | ||
| <MenuItem | ||
| info={ __( 'Restore template to theme default' ) } | ||
| onClick={ () => { | ||
| revertAndSaveTemplate(); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Clear customizations' ) } | ||
| </MenuItem> | ||
| ) } | ||
| </MenuGroup> | ||
| ) } | ||
| </DropdownMenu> | ||
| ); | ||
| } |
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,134 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useState } from '@wordpress/element'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { | ||
| Button, | ||
| Flex, | ||
| FlexItem, | ||
| MenuItem, | ||
| Modal, | ||
| TextControl, | ||
| } from '@wordpress/components'; | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
| import { store as noticesStore } from '@wordpress/notices'; | ||
|
|
||
| export default function RenameMenuItem( { template, onClose } ) { | ||
| const [ title, setTitle ] = useState( () => template.title.rendered ); | ||
| const [ isModalOpen, setIsModalOpen ] = useState( false ); | ||
|
|
||
| const { getLastEntitySaveError } = useSelect( coreStore ); | ||
| const { editEntityRecord, saveEditedEntityRecord } = useDispatch( | ||
| coreStore | ||
| ); | ||
| const { createSuccessNotice, createErrorNotice } = useDispatch( | ||
| noticesStore | ||
| ); | ||
|
|
||
| if ( ! template.is_custom ) { | ||
| return null; | ||
| } | ||
|
|
||
| async function onTemplateRename( event ) { | ||
| event.preventDefault(); | ||
|
|
||
| try { | ||
| await editEntityRecord( 'postType', template.type, template.id, { | ||
| title, | ||
| } ); | ||
|
|
||
| // Update state before saving rerenders the list. | ||
| setTitle( '' ); | ||
| setIsModalOpen( false ); | ||
| onClose(); | ||
|
|
||
| // Persist edited entity. | ||
| await saveEditedEntityRecord( | ||
| 'postType', | ||
| template.type, | ||
| template.id | ||
| ); | ||
|
|
||
| const lastError = getLastEntitySaveError( | ||
| 'postType', | ||
| template.type, | ||
| template.id | ||
| ); | ||
|
|
||
| if ( lastError ) { | ||
| throw lastError; | ||
| } | ||
|
|
||
| createSuccessNotice( __( 'Template has been renamed.' ), { | ||
| type: 'snackbar', | ||
| } ); | ||
| } catch ( error ) { | ||
| const errorMessage = | ||
| error.message && error.code !== 'unknown_error' | ||
| ? error.message | ||
| : __( 'An error occurred while renaming the template.' ); | ||
|
|
||
| createErrorNotice( errorMessage, { type: 'snackbar' } ); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <MenuItem | ||
| onClick={ () => { | ||
| setIsModalOpen( true ); | ||
| setTitle( template.title.rendered ); | ||
| } } | ||
| > | ||
| { __( 'Rename' ) } | ||
| </MenuItem> | ||
| { isModalOpen && ( | ||
| <Modal | ||
| title={ __( 'Rename template' ) } | ||
| closeLabel={ __( 'Close' ) } | ||
| onRequestClose={ () => { | ||
| setIsModalOpen( false ); | ||
|
There was a problem hiding this comment. This seems a little weird to me, as I'd imagine closing the modal would also remove previously edited title. I believe that's the side-effect of using |
||
| } } | ||
| overlayClassName="edit-site-list__rename-modal" | ||
| > | ||
| <form onSubmit={ onTemplateRename }> | ||
| <Flex align="flex-start" gap={ 8 }> | ||
| <FlexItem> | ||
| <TextControl | ||
| label={ __( 'Name' ) } | ||
| value={ title } | ||
| onChange={ setTitle } | ||
|
There was a problem hiding this comment. This should be |
||
| required | ||
| /> | ||
| </FlexItem> | ||
| </Flex> | ||
|
|
||
| <Flex | ||
| className="edit-site-list__rename-modal-actions" | ||
| justify="flex-end" | ||
| expanded={ false } | ||
| > | ||
| <FlexItem> | ||
| <Button | ||
| variant="tertiary" | ||
| onClick={ () => { | ||
| setIsModalOpen( false ); | ||
| } } | ||
| > | ||
| { __( 'Cancel' ) } | ||
| </Button> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <Button variant="primary" type="submit"> | ||
| { __( 'Save' ) } | ||
| </Button> | ||
| </FlexItem> | ||
| </Flex> | ||
| </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
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.
Why not calling
onClosehere once the modal is opened?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.
Calling
onClosehere will unmount dropdown, so modal is never rendered.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.
I see. Then why aren't we rendering the modal outside of the dropdown?
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.
No strong preference for this. I just thought having a separate component would be a little cleaner. Happy to move logic in the main file. Probably going to save a few lines of code as well :)
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.
BTW, I don't think we should be closing the modal for accessibility reasons. Closing the modal should move focus back to the Rename button again.
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.
I also like that behavior but wasn't sure if it was accessibility improvement.