[Site Editor]: Add clear customizations to template card (#41743)

WordPress · Jun 16, 2022 · 9f37df4 · 9f37df4
1 parent 48e96d5
commit 9f37df4
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 41 deletions.
diff --git a/packages/edit-site/src/components/sidebar/template-card/index.js b/packages/edit-site/src/components/sidebar/template-card/index.js
@@ -10,21 +10,26 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 
 export default function TemplateCard() {
-	const { title, description, icon } = useSelect( ( select ) => {
+	const {
+		info: { title, description, icon },
+		template,
+	} = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEntityRecord } = select( coreStore );
+		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
 			select( editorStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
-		const record = getEntityRecord( 'postType', postType, postId );
+		const record = getEditedEntityRecord( 'postType', postType, postId );
+
 		const info = record ? getTemplateInfo( record ) : {};
 
-		return info;
+		return { info, template: record };
 	}, [] );
 
 	if ( ! title && ! description ) {
@@ -35,11 +40,15 @@ export default function TemplateCard() {
 		<div className="edit-site-template-card">
 			<Icon className="edit-site-template-card__icon" icon={ icon } />
 			<div className="edit-site-template-card__content">
-				<h2 className="edit-site-template-card__title">{ title }</h2>
+				<div className="edit-site-template-card__header">
+					<h2 className="edit-site-template-card__title">
+						{ title }
+					</h2>
+					<TemplateActions template={ template } />
+				</div>
 				<div className="edit-site-template-card__description">
 					{ description }
 				</div>
-
 				<TemplateAreas />
 			</div>
 		</div>

diff --git a/packages/edit-site/src/components/sidebar/template-card/style.scss b/packages/edit-site/src/components/sidebar/template-card/style.scss
@@ -1,51 +1,65 @@
 .edit-site-template-card {
 	display: flex;
 	align-items: flex-start;
-}
 
-.edit-site-template-card__content {
-	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
-}
+	&__content {
+		flex-grow: 1;
+		margin-bottom: $grid-unit-05;
+	}
 
-.edit-site-template-card__title {
-	font-weight: 500;
-	line-height: $icon-size;
-	&.edit-site-template-card__title {
-		margin: 0 0 $grid-unit-05;
+	&__title {
+		font-weight: 500;
+		line-height: $icon-size;
+		&.edit-site-template-card__title {
+			margin: 0;
+		}
 	}
-}
 
-.edit-site-template-card__description {
-	font-size: $default-font-size;
-	margin: 0 0 $grid-unit-20;
-}
+	&__description {
+		font-size: $default-font-size;
+		margin: 0 0 $grid-unit-20;
+	}
 
-.edit-site-template-card__icon {
-	flex: 0 0 $icon-size;
-	margin-right: $grid-unit-15;
-	width: $icon-size;
-	height: $icon-size;
-}
+	&__icon {
+		flex: 0 0 $icon-size;
+		margin-right: $grid-unit-15;
+		width: $icon-size;
+		height: $icon-size;
+	}
 
-h3.edit-site-template-card__template-areas-title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
+	&__template-areas-list {
+		margin: 0;
 
-.edit-site-template-card__template-areas-list {
-	margin: 0;
+		> li {
+			margin: 0;
+		}
+	}
 
-	> li {
-		margin: 0;
+	&__template-areas-item {
+		width: 100%;
+
+		// Override the default padding.
+		&.components-button.has-icon {
+			padding: 0;
+		}
 	}
-}
 
-.edit-site-template-card__template-areas-item {
-	width: 100%;
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 0 $grid-unit-05;
+	}
 
-	// Override the default padding.
-	&.components-button.has-icon {
-		padding: 0;
+	&__actions {
+		line-height: 0;
+		> .components-button.is-small.has-icon {
+			padding: 0;
+			min-width: auto;
+		}
 	}
 }
+
+h3.edit-site-template-card__template-areas-title {
+	font-weight: 500;
+	margin: 0 0 $grid-unit-10;
+}
diff --git a/packages/edit-site/src/components/sidebar/template-card/template-actions.js b/packages/edit-site/src/components/sidebar/template-card/template-actions.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import isTemplateRevertable from '../../../utils/is-template-revertable';
+
+export default function Actions( { template } ) {
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const isRevertable = isTemplateRevertable( template );
+	if ( ! isRevertable ) {
+		return null;
+	}
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className="edit-site-template-card__actions"
+			toggleProps={ { isSmall: true } }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<MenuItem
+						info={ __( 'Restore to default state' ) }
+						onClick={ () => {
+							revertTemplate( template );
+							onClose();
+						} }
+					>
+						{ __( 'Clear customizations' ) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}