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 } ) => ( + + { + revertTemplate( template ); + onClose(); + } } + > + { __( 'Clear customizations' ) } + + + ) } + + ); +}