Add template actions in site editor navigation sidebar (WordPress#51054)

* Add template actions in site editor navigation sidebar * add snackbars in site editor and change position to `absolute` * temp title fix for template revert * fetch data in TemplateActions
pewresearch · Jul 13, 2023 · 00524f0 · 00524f0
1 parent 74987d5
commit 00524f0
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 23 deletions.
diff --git 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 ) && (
-									<EditorSnackbars />
-								)
-							}
+							notices={ <EditorSnackbars /> }
 							content={
 								<>
 									<GlobalStylesRenderer />

diff --git 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;

diff --git 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,11 @@ export default function Table( { templateType } ) {
 							) : null }
 						</td>
 						<td className="edit-site-list-table-column" role="cell">
-							<Actions template={ template } />
+							<TemplateActions
+								postType={ template.type }
+								postId={ template.id }
+								className="edit-site-list-table__actions"
+							/>
 						</td>
 					</tr>
 				) ) }

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
@@ -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(
@@ -87,8 +88,10 @@ function useTemplateTitleAndDescription( postType, postId ) {
 }
 
 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(
 		postType,
@@ -99,11 +102,21 @@ export default function SidebarNavigationScreenTemplate() {
 		<SidebarNavigationScreen
 			title={ title }
 			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
+				<div>
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						toggleProps={ { as: SidebarButton } }
+						onRemove={ () => {
+							navigator.goTo( `/${ postType }/all` );
+						} }
+					/>
+					<SidebarButton
+						onClick={ () => setCanvasMode( 'edit' ) }
+						label={ __( 'Edit' ) }
+						icon={ pencil }
+					/>
+				</div>
 			}
 			description={ description }
 		/>

diff --git a/...site/src/components/list/actions/index.js → .../src/components/template-actions/index.js b/...site/src/components/list/actions/index.js → .../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';
@@ -11,12 +11,23 @@ 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( {
+	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 } =
@@ -62,7 +73,8 @@ export default function Actions( { template } ) {
 		<DropdownMenu
 			icon={ moreVertical }
 			label={ __( 'Actions' ) }
-			className="edit-site-list-table__actions"
+			className={ className }
+			toggleProps={ toggleProps }
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
@@ -77,6 +89,7 @@ export default function Actions( { template } ) {
 								isTertiary
 								onClick={ () => {
 									removeTemplate( template );
+									onRemove?.();
 									onClose();
 								} }
 							>

diff --git a/...mponents/list/actions/rename-menu-item.js → ...ents/template-actions/rename-menu-item.js b/...mponents/list/actions/rename-menu-item.js → ...ents/template-actions/rename-menu-item.js
diff --git 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
+					decodeEntities( template.title.rendered )
 				),
 				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
 			);