diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index c550b552bbd7e..879660238507d 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -48,6 +48,8 @@ export default function DeleteTemplate() { templateTitle = template.title; } + const isRevertable = template?.has_theme_file; + const onDelete = () => { clearSelectedBlock(); setIsEditingTemplate( false ); @@ -77,14 +79,19 @@ export default function DeleteTemplate() { <> { setShowConfirmDialog( true ); } } + info={ + isRevertable + ? __( 'Restore template to default state' ) + : undefined + } > - { __( 'Delete template' ) } + { isRevertable + ? __( 'Clear customizations' ) + : __( 'Delete template' ) } { - const settings = getEditorSettings(); - const newAvailableTemplates = mapValues( - settings.availableTemplates, - ( existingTitle, id ) => { - if ( id !== template.slug ) { - return existingTitle; +
+ { + const settings = getEditorSettings(); + const newAvailableTemplates = mapValues( + settings.availableTemplates, + ( existingTitle, id ) => { + if ( id !== template.slug ) { + return existingTitle; + } + return newTitle; } - return newTitle; - } - ); - updateEditorSettings( { - ...settings, - availableTemplates: newAvailableTemplates, - } ); - editEntityRecord( 'postType', 'wp_template', template.id, { - title: newTitle, - } ); - } } - /> + ); + updateEditorSettings( { + ...settings, + availableTemplates: newAvailableTemplates, + } ); + editEntityRecord( 'postType', 'wp_template', template.id, { + title: newTitle, + } ); + } } + /> +
); } diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss index 3a74eb70d5af6..bf8d6d7703a92 100644 --- a/packages/edit-post/src/components/header/template-title/style.scss +++ b/packages/edit-post/src/components/header/template-title/style.scss @@ -49,7 +49,18 @@ .edit-post-template-top-area__popover { .components-popover__content { min-width: 280px; - padding: $grid-unit-10; + + > div { + padding: 0; + } + } + + .edit-site-template-details__group { + padding: $grid-unit-20; + + .components-base-control__help { + margin-bottom: 0; + } } .edit-post-template-details__description { @@ -58,19 +69,29 @@ } .edit-post-template-top-area__second-menu-group { - margin-left: -$grid-unit-20; - margin-right: -$grid-unit-20; - padding: $grid-unit-20; - padding-bottom: 0; border-top: $border-width solid $gray-300; + padding: $grid-unit-20 $grid-unit-10; .edit-post-template-top-area__delete-template-button { display: flex; justify-content: center; + padding: $grid-unit-05 $grid-unit; + + &.is-destructive { + padding: inherit; + margin-left: $grid-unit-10; + margin-right: $grid-unit-10; + width: calc(100% - #{($grid-unit * 2)}); + + .components-menu-item__item { + width: auto; + } + } .components-menu-item__item { margin-right: 0; min-width: 0; + width: 100%; } } } diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js index c30fcce6b85c5..3513496852c33 100644 --- a/packages/edit-post/src/components/header/template-title/template-description.js +++ b/packages/edit-post/src/components/header/template-title/template-description.js @@ -23,8 +23,9 @@ export default function TemplateDescription() { if ( ! description ) { return null; } + return ( - <> +
{ title } @@ -36,6 +37,6 @@ export default function TemplateDescription() { > { description } - +
); }