@wordpress/edit-site 4.6.0 → 4.9.0

package/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;
+}

package/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>
+	);
+}

package/src/components/sidebar/template-card/template-areas.js

@@ -16,14 +16,14 @@ import { __ } from '@wordpress/i18n';
 import { store as editSiteStore } from '../../../store';
 
 function TemplateAreaItem( { area, clientId } ) {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const templatePartArea = useSelect(
 		( select ) => {
-			const defaultAreas = select(
-				editorStore
-			).__experimentalGetDefaultTemplatePartAreas();
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
 
 			return defaultAreas.find(
 				( defaultArea ) => defaultArea.area === area

package/src/components/template-details/template-areas.js

@@ -75,14 +75,14 @@ function TemplatePartItem( {
 	clientId,
 	closeTemplateDetailsDropdown,
 } ) {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const templatePartArea = useSelect(
 		( select ) => {
-			const defaultAreas = select(
-				editorStore
-			).__experimentalGetDefaultTemplatePartAreas();
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
 
 			return defaultAreas.find(
 				( defaultArea ) => defaultArea.area === templatePart.area

package/src/components/template-part-converter/index.js

@@ -12,9 +12,8 @@ import ConvertToTemplatePart from './convert-to-template-part';
 
 export default function TemplatePartConverter() {
 	const { clientIds, blocks } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds, getBlocksByClientId } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientIds, getBlocksByClientId } =
+			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		return {
 			clientIds: selectedBlockClientIds,

package/src/components/url-query-controller/index.js

@@ -11,9 +11,8 @@ import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 export default function URLQueryController() {
-	const { setTemplate, setTemplatePart, setPage } = useDispatch(
-		editSiteStore
-	);
+	const { setTemplate, setTemplatePart, setPage } =
+		useDispatch( editSiteStore );
 	const {
 		params: { postId, postType },
 	} = useLocation();