Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Template Editor: Use the label 'Clear customizations' when changes are revertable #40935

Merged
merged 5 commits into from
May 12, 2022
Merged

Template Editor: Use the label 'Clear customizations' when changes are revertable #40935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
22c59d5
Template Editor: Use the label 'Clear customizations' when changes ar…
Mamaduka May 9, 2022
30b4e26
Add info text and adjust styles
Mamaduka May 11, 2022
602378d
Align styling with site editor
jameskoster May 11, 2022
f308dfe
Remove fragment
Mamaduka May 11, 2022
7c3a0c2
Restore min-width
Mamaduka May 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions packages/edit-post/src/components/header/template-title/delete-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export default function DeleteTemplate() {
templateTitle = template.title;
}

const isRevertable = template?.has_theme_file;

const onDelete = () => {
clearSelectedBlock();
setIsEditingTemplate( false );
Expand Down Expand Up @@ -77,14 +79,19 @@ export default function DeleteTemplate() {
<>
<MenuItem
className="edit-post-template-top-area__delete-template-button"
isDestructive
variant="secondary"
aria-label={ __( 'Delete template' ) }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component already has a text label, no need to use the aria.

isDestructive={ ! isRevertable }
onClick={ () => {
setShowConfirmDialog( true );
} }
info={
isRevertable
? __( 'Restore template to default state' )
: undefined
}
>
{ __( 'Delete template' ) }
{ isRevertable
? __( 'Clear customizations' )
: __( 'Delete template' ) }
</MenuItem>
<ConfirmDialog
isOpen={ showConfirmDialog }
Expand Down
52 changes: 27 additions & 25 deletions packages/edit-post/src/components/header/template-title/edit-template-title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,31 +42,33 @@ export default function EditTemplateTitle() {
}

return (
<TextControl
label={ __( 'Title' ) }
value={ templateTitle }
help={ __(
'Give the template a title that indicates its purpose, e.g. "Full Width".'
) }
onChange={ ( newTitle ) => {
const settings = getEditorSettings();
const newAvailableTemplates = mapValues(
settings.availableTemplates,
( existingTitle, id ) => {
if ( id !== template.slug ) {
return existingTitle;
<div className="edit-site-template-details__group">
<TextControl
label={ __( 'Title' ) }
value={ templateTitle }
help={ __(
'Give the template a title that indicates its purpose, e.g. "Full Width".'
) }
onChange={ ( newTitle ) => {
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,
} );
} }
/>
</div>
);
}
31 changes: 26 additions & 5 deletions packages/edit-post/src/components/header/template-title/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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%;
}
}
}
5 changes: 3 additions & 2 deletions packages/edit-post/src/components/header/template-title/template-description.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export default function TemplateDescription() {
if ( ! description ) {
return null;
}

return (
<>
<div className="edit-site-template-details__group">
<Heading level={ 4 } weight={ 600 }>
{ title }
</Heading>
Expand All @@ -36,6 +37,6 @@ export default function TemplateDescription() {
>
{ description }
</Text>
</>
</div>
);
}