From afa93c112b723201f4589c8e6b9ae5981dd6ea50 Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 10 May 2021 22:07:46 +0100 Subject: [PATCH 1/8] Add. Delete template action. --- .../header/template-title/delete-template.js | 84 +++++++++++++++++++ .../components/header/template-title/index.js | 43 ++++++++-- .../header/template-title/style.scss | 24 ++++++ 3 files changed, 144 insertions(+), 7 deletions(-) create mode 100644 packages/edit-post/src/components/header/template-title/delete-template.js diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js new file mode 100644 index 00000000000000..61a954f2d67550 --- /dev/null +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -0,0 +1,84 @@ +/** + * External dependencies + */ +import { pickBy } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { MenuGroup, MenuItem } from '@wordpress/components'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import { store as editPostStore } from '../../../store'; + +export default function DeleteTemplate() { + const { clearSelectedBlock } = useDispatch( blockEditorStore ); + const { setIsEditingTemplate } = useDispatch( editPostStore ); + const { getEditorSettings } = useSelect( editorStore ); + const { updateEditorSettings, editPost } = useDispatch( editorStore ); + const { deleteEntityRecord } = useDispatch( coreStore ); + const { template } = useSelect( ( select ) => { + const { isEditingTemplate, getEditedPostTemplate } = select( + editPostStore + ); + const _isEditing = isEditingTemplate(); + return { + template: _isEditing ? getEditedPostTemplate() : null, + }; + }, [] ); + + if ( ! template || ! template.wp_id ) { + return null; + } + return ( + + { + if ( + // eslint-disable-next-line no-alert + window.confirm( + __( + 'Are you sure you want to delete this template? It may be currently in use by other pages or posts.' + ) + ) + ) { + clearSelectedBlock(); + setIsEditingTemplate( false ); + + editPost( { + template: '', + } ); + const settings = getEditorSettings(); + const newAvailableTemplates = pickBy( + settings.availableTemplates, + ( _title, id ) => { + return id !== template.slug; + } + ); + updateEditorSettings( { + ...settings, + availableTemplates: newAvailableTemplates, + } ); + deleteEntityRecord( + 'postType', + 'wp_template', + template.id + ); + } + } } + > + { __( 'Delete' ) } + + + ); +} diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js index 4cc78782ab620b..81d07a85133257 100644 --- a/packages/edit-post/src/components/header/template-title/index.js +++ b/packages/edit-post/src/components/header/template-title/index.js @@ -1,13 +1,21 @@ /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; +import { + Button, + NavigableMenu, + Dropdown, + MenuGroup, + MenuItem, +} from '@wordpress/components'; /** * Internal dependencies */ import { store as editPostStore } from '../../../store'; +import DeleteTemplate from './delete-template'; function TemplateTitle() { const { template, isEditing } = useSelect( ( select ) => { @@ -33,12 +41,33 @@ function TemplateTitle() { } return ( - - { - /* translators: 1: Template name. */ - sprintf( __( 'Editing template: %s' ), templateTitle ) - } - + ( + <> +
+ { __( 'About' ) } +
+ + + ) } + renderContent={ () => ( + + + { templateTitle } + + + + ) } + /> ); } diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss index b4d6132c089757..08c4e593755084 100644 --- a/packages/edit-post/src/components/header/template-title/style.scss +++ b/packages/edit-post/src/components/header/template-title/style.scss @@ -3,3 +3,27 @@ flex-grow: 1; justify-content: center; } + +.edit-post-template-top-area { + display: flex; + flex-direction: column; + align-content: space-between; + width: 100%; + align-items: center; +} + +.edit-post-template-top-area__popover .components-popover__content { + min-width: 360px; +} + +.edit-post-template-top-area__popover.components-dropdown__content .components-popover__content > div { + padding: 0; +} + +.edit-post-template-top-area__first-menu-group { + padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15; +} + +.edit-post-template-top-area__second-menu-group { + padding: $grid-unit-15; +} From b98025fe17672e8374274496a4d66e1f34b927f0 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 19 May 2021 15:05:42 +0100 Subject: [PATCH 2/8] Update packages/edit-post/src/components/header/template-title/delete-template.js Co-authored-by: Carolina Nymark --- .../src/components/header/template-title/delete-template.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index 61a954f2d67550..0e75317d4027eb 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -43,6 +43,7 @@ export default function DeleteTemplate() { isDestructive isTertiary isLink + aria-label = { __( 'Delete template' ) } onClick={ () => { if ( // eslint-disable-next-line no-alert From ba756a562cb64b43bd6502e771033b8abffbdcba Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 19 May 2021 15:06:14 +0100 Subject: [PATCH 3/8] Update packages/edit-post/src/components/header/template-title/delete-template.js Co-authored-by: Carolina Nymark --- .../src/components/header/template-title/delete-template.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index 0e75317d4027eb..53e8c03bdae51f 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -37,6 +37,11 @@ export default function DeleteTemplate() { if ( ! template || ! template.wp_id ) { return null; } + let templateTitle = template.slug; + if ( template?.title?.raw ) { + templateTitle = template.title.raw; + } + return ( Date: Wed, 19 May 2021 15:06:27 +0100 Subject: [PATCH 4/8] Update packages/edit-post/src/components/header/template-title/delete-template.js Co-authored-by: Carolina Nymark --- .../src/components/header/template-title/delete-template.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index 53e8c03bdae51f..fdd9eb45c72067 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -6,7 +6,7 @@ import { pickBy } from 'lodash'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { MenuGroup, MenuItem } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; From a2deb75c4076e715eefa55173117af0d5572b267 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 19 May 2021 15:06:55 +0100 Subject: [PATCH 5/8] Update packages/edit-post/src/components/header/template-title/delete-template.js Co-authored-by: Carolina Nymark --- .../src/components/header/template-title/delete-template.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index fdd9eb45c72067..e1501e2325cfdc 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -53,8 +53,10 @@ export default function DeleteTemplate() { if ( // eslint-disable-next-line no-alert window.confirm( - __( - 'Are you sure you want to delete this template? It may be currently in use by other pages or posts.' + /* translators: %1$s: template name */ + sprintf( + 'Are you sure you want to delete the %s template? It may be used by other pages or posts.', + templateTitle ) ) ) { From 23a6e0e05f01aff24116d43683ecaeb7b1ed1bb2 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 19 May 2021 15:07:56 +0100 Subject: [PATCH 6/8] Update packages/edit-post/src/components/header/template-title/index.js Co-authored-by: Carolina Nymark --- .../edit-post/src/components/header/template-title/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js index 81d07a85133257..bd81ba8055b4d7 100644 --- a/packages/edit-post/src/components/header/template-title/index.js +++ b/packages/edit-post/src/components/header/template-title/index.js @@ -50,7 +50,7 @@ function TemplateTitle() {
{ __( 'About' ) }
- From 8def5f57aa044733ea60fef1c78dc84671a63316 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 19 May 2021 15:08:54 +0100 Subject: [PATCH 7/8] Update packages/edit-post/src/components/header/template-title/delete-template.js Co-authored-by: Carolina Nymark --- .../src/components/header/template-title/delete-template.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index e1501e2325cfdc..b3f2ec26ee5dad 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -85,7 +85,7 @@ export default function DeleteTemplate() { } } } > - { __( 'Delete' ) } + { __( 'Delete template' ) } ); From ff304721f0ab1f154c818b083702d99532293550 Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 19 May 2021 16:54:07 +0100 Subject: [PATCH 8/8] Add edit template name. --- .../header/template-title/delete-template.js | 6 +- .../template-title/edit-template-title.js | 64 +++++++++++++++++++ .../components/header/template-title/index.js | 32 ++++------ .../header/template-title/style.scss | 12 ---- .../sidebar/template-summary/index.js | 2 +- .../src/components/sidebar/template/index.js | 2 +- packages/edit-post/src/store/selectors.js | 10 ++- 7 files changed, 91 insertions(+), 37 deletions(-) create mode 100644 packages/edit-post/src/components/header/template-title/edit-template-title.js diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index b3f2ec26ee5dad..7a3f5d5c382073 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -38,8 +38,8 @@ export default function DeleteTemplate() { return null; } let templateTitle = template.slug; - if ( template?.title?.raw ) { - templateTitle = template.title.raw; + if ( template?.title ) { + templateTitle = template.title; } return ( @@ -48,7 +48,7 @@ export default function DeleteTemplate() { isDestructive isTertiary isLink - aria-label = { __( 'Delete template' ) } + aria-label={ __( 'Delete template' ) } onClick={ () => { if ( // eslint-disable-next-line no-alert diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js new file mode 100644 index 00000000000000..feabafcb9fdd09 --- /dev/null +++ b/packages/edit-post/src/components/header/template-title/edit-template-title.js @@ -0,0 +1,64 @@ +/** + * External dependencies + */ +import { mapValues } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { TextControl } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import { store as editPostStore } from '../../../store'; + +export default function EditTemplateTitle() { + const { template } = useSelect( ( select ) => { + const { getEditedPostTemplate } = select( editPostStore ); + return { + template: getEditedPostTemplate(), + }; + }, [] ); + + const { editEntityRecord } = useDispatch( coreStore ); + const { getEditorSettings } = useSelect( editorStore ); + const { updateEditorSettings } = useDispatch( editorStore ); + + let templateTitle = __( 'Default' ); + if ( template?.title ) { + templateTitle = template.title; + } else if ( !! template ) { + templateTitle = template.slug; + } + + return ( + { + const settings = getEditorSettings(); + const newAvailableTemplates = mapValues( + settings.availableTemplates, + ( existingTitle, id ) => { + if ( id !== template.slug ) { + return existingTitle; + } + return newTitle; + } + ); + updateEditorSettings( { + ...settings, + availableTemplates: newAvailableTemplates, + } ); + editEntityRecord( 'postType', 'wp_template', template.id, { + title: newTitle, + } ); + } } + /> + ); +} diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js index bd81ba8055b4d7..907badf27de95d 100644 --- a/packages/edit-post/src/components/header/template-title/index.js +++ b/packages/edit-post/src/components/header/template-title/index.js @@ -3,19 +3,14 @@ */ import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { - Button, - NavigableMenu, - Dropdown, - MenuGroup, - MenuItem, -} from '@wordpress/components'; +import { Button, Dropdown } from '@wordpress/components'; /** * Internal dependencies */ import { store as editPostStore } from '../../../store'; import DeleteTemplate from './delete-template'; +import EditTemplateTitle from './edit-template-title'; function TemplateTitle() { const { template, isEditing } = useSelect( ( select ) => { @@ -34,8 +29,8 @@ function TemplateTitle() { } let templateTitle = __( 'Default' ); - if ( template?.title?.raw ) { - templateTitle = template.title.raw; + if ( template?.title ) { + templateTitle = template.title; } else if ( !! template ) { templateTitle = template.slug; } @@ -50,22 +45,21 @@ function TemplateTitle() {
{ __( 'About' ) }
- ) } renderContent={ () => ( - - - { templateTitle } - + <> + - + ) } /> ); diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss index 08c4e593755084..40262e0573ee87 100644 --- a/packages/edit-post/src/components/header/template-title/style.scss +++ b/packages/edit-post/src/components/header/template-title/style.scss @@ -15,15 +15,3 @@ .edit-post-template-top-area__popover .components-popover__content { min-width: 360px; } - -.edit-post-template-top-area__popover.components-dropdown__content .components-popover__content > div { - padding: 0; -} - -.edit-post-template-top-area__first-menu-group { - padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15; -} - -.edit-post-template-top-area__second-menu-group { - padding: $grid-unit-15; -} diff --git a/packages/edit-post/src/components/sidebar/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js index ec29d428f0ac84..f9e9f93cee2701 100644 --- a/packages/edit-post/src/components/sidebar/template-summary/index.js +++ b/packages/edit-post/src/components/sidebar/template-summary/index.js @@ -29,7 +29,7 @@ function TemplateSummary() {

- { template?.title?.raw || template?.slug } + { template?.title || template?.slug }

{ template?.description }

 diff --git a/packages/edit-post/src/components/sidebar/template/index.js b/packages/edit-post/src/components/sidebar/template/index.js index b8308afefa8579..205812819d6bc0 100644 --- a/packages/edit-post/src/components/sidebar/template/index.js +++ b/packages/edit-post/src/components/sidebar/template/index.js @@ -79,7 +79,7 @@ export function TemplatePanel() { panelTitle = sprintf( /* translators: %s: template title */ __( 'Template: %s' ), - template?.title?.raw ?? template.slug + template?.title ?? template.slug ); } diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index a1db999ea12667..7dabddec5e90d0 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -361,9 +361,17 @@ export const getEditedPostTemplate = createRegistrySelector( 'template' ); if ( currentTemplate ) { - return select( coreStore ) + const templateWithSameSlug = select( coreStore ) .getEntityRecords( 'postType', 'wp_template' ) ?.find( ( template ) => template.slug === currentTemplate ); + if ( ! templateWithSameSlug ) { + return templateWithSameSlug; + } + return select( coreStore ).getEditedEntityRecord( + 'postType', + 'wp_template', + templateWithSameSlug.id + ); } const post = select( editorStore ).getCurrentPost();