From 23392f40072b3fc2a635db03c8ef88cc35ae032f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 29 May 2023 16:43:59 +0300 Subject: [PATCH 1/4] Add template actions in site editor navigation sidebar --- .../edit-site/src/components/list/table.js | 7 +++-- .../index.js | 30 +++++++++++++------ .../actions => template-actions}/index.js | 17 +++++++---- .../rename-menu-item.js | 6 ++-- packages/edit-site/src/store/actions.js | 2 +- 5 files changed, 43 insertions(+), 19 deletions(-) rename packages/edit-site/src/components/{list/actions => template-actions}/index.js (86%) rename packages/edit-site/src/components/{list/actions => template-actions}/rename-menu-item.js (94%) diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js index 59ff5a9187ab09..bca0e1e5854298 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -13,8 +13,8 @@ import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ +import TemplateActions from '../template-actions'; import Link from '../routes/link'; -import Actions from './actions'; import AddedBy from './added-by'; export default function Table( { templateType } ) { @@ -126,7 +126,10 @@ export default function Table( { templateType } ) { ) : null } - + ) ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js index 99139b55d87a5c..c1b35df1fff34b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js @@ -19,6 +19,7 @@ import { unlock } from '../../private-apis'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; import { useAddedBy } from '../list/added-by'; +import TemplateActions from '../template-actions'; function useTemplateTitleAndDescription( postType, postId ) { const { getDescription, getTitle, record } = useEditedEntityRecord( @@ -83,14 +84,16 @@ function useTemplateTitleAndDescription( postType, postId ) { ); - return { title, description }; + return { title, description, template: record }; } export default function SidebarNavigationScreenTemplate() { - const { params } = useNavigator(); - const { postType, postId } = params; + const navigator = useNavigator(); + const { + params: { postType, postId }, + } = navigator; const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { title, description } = useTemplateTitleAndDescription( + const { title, description, template } = useTemplateTitleAndDescription( postType, postId ); @@ -99,11 +102,20 @@ export default function SidebarNavigationScreenTemplate() { setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> +
+ { + navigator.goTo( `/${ postType }/all` ); + } } + /> + setCanvasMode( 'edit' ) } + label={ __( 'Edit' ) } + icon={ pencil } + /> +
} description={ description } /> diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/template-actions/index.js similarity index 86% rename from packages/edit-site/src/components/list/actions/index.js rename to packages/edit-site/src/components/template-actions/index.js index 652cbe0f74e15a..754ef9f22c9c02 100644 --- a/packages/edit-site/src/components/list/actions/index.js +++ b/packages/edit-site/src/components/template-actions/index.js @@ -11,12 +11,17 @@ 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 { 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 } ) { +export default function TemplateActions( { + template, + className, + toggleProps, + onRemove, +} ) { const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); const { saveEditedEntityRecord } = useDispatch( coreStore ); const { createSuccessNotice, createErrorNotice } = @@ -62,7 +67,8 @@ export default function Actions( { template } ) { { ( { onClose } ) => ( @@ -77,6 +83,7 @@ export default function Actions( { template } ) { isTertiary onClick={ () => { removeTemplate( template ); + onRemove?.(); onClose(); } } > diff --git a/packages/edit-site/src/components/list/actions/rename-menu-item.js b/packages/edit-site/src/components/template-actions/rename-menu-item.js similarity index 94% rename from packages/edit-site/src/components/list/actions/rename-menu-item.js rename to packages/edit-site/src/components/template-actions/rename-menu-item.js index dec7f0bc8bf7dd..c3837857d4c15d 100644 --- a/packages/edit-site/src/components/list/actions/rename-menu-item.js +++ b/packages/edit-site/src/components/template-actions/rename-menu-item.js @@ -16,7 +16,9 @@ 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 [ title, setTitle ] = useState( + () => template.title?.rendered || template.title + ); const [ isModalOpen, setIsModalOpen ] = useState( false ); const { editEntityRecord, saveEditedEntityRecord } = @@ -67,7 +69,7 @@ export default function RenameMenuItem( { template, onClose } ) { { setIsModalOpen( true ); - setTitle( template.title.rendered ); + setTitle( template.title?.rendered || template.title ); } } > { __( 'Rename' ) } diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index d1f41d5a62aca5..667176928660c8 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -144,7 +144,7 @@ export const removeTemplate = sprintf( /* translators: The template/part's name. */ __( '"%s" deleted.' ), - template.title.rendered + template.title?.rendered || template.title ), { type: 'snackbar', id: 'site-editor-template-deleted-success' } ); From 2c78a51d00c233609b744afe8db06fb5ee702704 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 30 May 2023 12:30:53 +0300 Subject: [PATCH 2/4] add snackbars in site editor and change position to `absolute` --- packages/edit-site/src/components/editor/index.js | 7 +------ packages/edit-site/src/components/editor/style.scss | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 44b31c6945f57f..72a8d41fb22f04 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -180,12 +180,7 @@ export default function Editor( { isLoading } ) { 'is-loading': isLoading, } ) } - notices={ - ( isEditMode || - window?.__experimentalEnableThemePreviews ) && ( - - ) - } + notices={ } content={ <> diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index b8795d9ba7cb31..17107820ffb83c 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -20,7 +20,7 @@ // Adjust the position of the notices .edit-site .components-editor-notices__snackbar { - position: fixed; + position: absolute; right: 0; bottom: 40px; padding-left: 16px; From 9fed86f4324f11cceefc204262b7e97c060495db Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 30 May 2023 12:46:36 +0300 Subject: [PATCH 3/4] temp title fix for template revert --- packages/edit-site/src/components/template-actions/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js index 754ef9f22c9c02..2724e7da3a4425 100644 --- a/packages/edit-site/src/components/template-actions/index.js +++ b/packages/edit-site/src/components/template-actions/index.js @@ -46,7 +46,7 @@ export default function TemplateActions( { sprintf( /* translators: The template/part's name. */ __( '"%s" reverted.' ), - template.title.rendered + template.title.rendered || template.title ), { type: 'snackbar', From f6e284e7a09a806bed57b9aa6c0b6c6b3a0a8efa Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 30 May 2023 15:40:03 +0300 Subject: [PATCH 4/4] fetch data in TemplateActions --- packages/edit-site/src/components/list/table.js | 3 ++- .../sidebar-navigation-screen-template/index.js | 7 ++++--- .../src/components/template-actions/index.js | 12 +++++++++--- .../components/template-actions/rename-menu-item.js | 6 ++---- packages/edit-site/src/store/actions.js | 3 ++- 5 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js index bca0e1e5854298..18198cb600ddae 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -127,7 +127,8 @@ export default function Table( { templateType } ) { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js index c1b35df1fff34b..753957f2fe725a 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js @@ -84,7 +84,7 @@ function useTemplateTitleAndDescription( postType, postId ) { ); - return { title, description, template: record }; + return { title, description }; } export default function SidebarNavigationScreenTemplate() { @@ -93,7 +93,7 @@ export default function SidebarNavigationScreenTemplate() { params: { postType, postId }, } = navigator; const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { title, description, template } = useTemplateTitleAndDescription( + const { title, description } = useTemplateTitleAndDescription( postType, postId ); @@ -104,7 +104,8 @@ export default function SidebarNavigationScreenTemplate() { actions={
{ navigator.goTo( `/${ postType }/all` ); diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js index 2724e7da3a4425..0b54d6ef3ea716 100644 --- a/packages/edit-site/src/components/template-actions/index.js +++ b/packages/edit-site/src/components/template-actions/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { __, sprintf } from '@wordpress/i18n'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; @@ -17,11 +17,17 @@ import isTemplateRevertable from '../../utils/is-template-revertable'; import RenameMenuItem from './rename-menu-item'; export default function TemplateActions( { - template, + postType, + postId, className, toggleProps, onRemove, } ) { + const template = useSelect( + ( select ) => + select( coreStore ).getEntityRecord( 'postType', postType, postId ), + [ postType, postId ] + ); const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); const { saveEditedEntityRecord } = useDispatch( coreStore ); const { createSuccessNotice, createErrorNotice } = @@ -46,7 +52,7 @@ export default function TemplateActions( { sprintf( /* translators: The template/part's name. */ __( '"%s" reverted.' ), - template.title.rendered || template.title + template.title.rendered ), { type: 'snackbar', diff --git a/packages/edit-site/src/components/template-actions/rename-menu-item.js b/packages/edit-site/src/components/template-actions/rename-menu-item.js index c3837857d4c15d..dec7f0bc8bf7dd 100644 --- a/packages/edit-site/src/components/template-actions/rename-menu-item.js +++ b/packages/edit-site/src/components/template-actions/rename-menu-item.js @@ -16,9 +16,7 @@ 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 || template.title - ); + const [ title, setTitle ] = useState( () => template.title.rendered ); const [ isModalOpen, setIsModalOpen ] = useState( false ); const { editEntityRecord, saveEditedEntityRecord } = @@ -69,7 +67,7 @@ export default function RenameMenuItem( { template, onClose } ) { { setIsModalOpen( true ); - setTitle( template.title?.rendered || template.title ); + setTitle( template.title.rendered ); } } > { __( 'Rename' ) } diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 667176928660c8..a67406349e1644 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -12,6 +12,7 @@ import { store as interfaceStore } from '@wordpress/interface'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { speak } from '@wordpress/a11y'; import { store as preferencesStore } from '@wordpress/preferences'; +import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies @@ -144,7 +145,7 @@ export const removeTemplate = sprintf( /* translators: The template/part's name. */ __( '"%s" deleted.' ), - template.title?.rendered || template.title + decodeEntities( template.title.rendered ) ), { type: 'snackbar', id: 'site-editor-template-deleted-success' } );