diff --git a/packages/edit-site/src/components/sidebar/template-card/index.js b/packages/edit-site/src/components/sidebar/template-card/index.js
index 0c1f1a2ba09622..eec45cba850adc 100644
--- 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() {
-
{ title }
+
+
+ { title }
+
+
+
{ description }
-
diff --git a/packages/edit-site/src/components/sidebar/template-card/style.scss b/packages/edit-site/src/components/sidebar/template-card/style.scss
index 1ff35e65582719..b02717793bb9bb 100644
--- 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
new file mode 100644
index 00000000000000..09208c03edf781
--- /dev/null
+++ 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 (
+
+ { ( { onClose } ) => (
+
+
+
+ ) }
+
+ );
+}