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

Global style revisions: redesign style revision items #55913

Merged
merged 8 commits into from
Nov 19, 2023
Merged

Global style revisions: redesign style revision items #55913

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
53a0c14
First commit:
ramonjd Nov 7, 2023
1137710
- timeline redesign
ramonjd Nov 8, 2023
a5bd0ed
There is no "colors" property
ramonjd Nov 13, 2023
064c6dc
Some style tweaks
ramonjd Nov 15, 2023
857ee07
Tweak font sizes
ramonjd Nov 15, 2023
77ccfcf
Display Unsaved for unsaved changes
ramonjd Nov 15, 2023
e21cc6b
Remove revision changes labels. To be done in a follow up
ramonjd Nov 17, 2023
1b72bc2
Moving date format setting call into the comoponent
ramonjd Nov 17, 2023
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
40 changes: 40 additions & 0 deletions packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

const translationMap = {
blocks: __( 'Block styles' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we break out block names in a follow up? For example show "Paragraph block typography" etc instead of a generic "Block styles". I think block styles are going to change a bunch and a lot of "Block styles" being listed is not super useful.

Copy link
Member Author

@ramonjd ramonjd Nov 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

For blocks it makes sense. I think we have to put a limit on it at some point as it needs to be calculated for every revision item on render.

I'll see how memoizing/caching each one might work too.

@c4rl0sbr4v0 explored comparing the style/settings tree deeply: #52829 (comment)

border: __( 'Border' ),
color: __( 'Colors' ),
elements: __( 'Elements' ),
link: __( 'Links' ),
layout: __( 'Layout' ),
spacing: __( 'Spacing' ),
typography: __( 'Typography' ),
};

/**
* Returns an array of translated strings describing high level global styles and settings.
*
* @param {Object} revision
* @param {Object} revision.settings Global styles settings.
* @param {Object} revision.styles Global styles.
* @return {string[] | []} An array of translated labels.
*/
export default function getGlobalStylesChanges( {
settings = {},
styles = {},
} ) {
const changes = [];
if ( Object.keys( settings ).length > 0 ) {
changes.push( __( 'Global settings' ) );
}
Object.keys( styles ).forEach( ( key ) => {
if ( translationMap[ key ] ) {
changes.push( translationMap[ key ] );
}
} );

return changes;
}
103 changes: 62 additions & 41 deletions packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,40 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import getGlobalStylesChanges from './get-revision-changes';

const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
const dateFormat = getSettings().formats.date;
const datetimeAbbreviatedFormat = getSettings().formats.datetimeAbbreviated;

ramonjd marked this conversation as resolved.
Show resolved Hide resolved
/**
* Returns a button label for the revision.
*
* @param {Object} revision A revision object.
* @param {string|number} id A revision object.
* @param {boolean} isLatest Whether the revision is the most current.
* @param {string} authorDisplayName Author name.
* @param {Date} modifiedDate Revision modified date object.
* @return {string} Translated label.
*/
function getRevisionLabel( revision ) {
const authorDisplayName = revision?.author?.name || __( 'User' );

if ( 'parent' === revision?.id ) {
function getRevisionLabel( id, isLatest, authorDisplayName, modifiedDate ) {
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
if ( 'parent' === id ) {
return __( 'Reset the styles to the theme defaults' );
}

if ( 'unsaved' === revision?.id ) {
if ( 'unsaved' === id ) {
return sprintf(
/* translators: %s author display name */
__( 'Unsaved changes by %s' ),
authorDisplayName
);
}

const formattedDate = dateI18n(
getSettings().formats.datetimeAbbreviated,
getDate( revision?.modified )
);
const formattedDate = dateI18n( datetimeAbbreviatedFormat, modifiedDate );

return revision?.isLatest
return isLatest
? sprintf(
/* translators: %1$s author display name, %2$s: revision creation date */
__( 'Changes saved by %1$s on %2$s (current)' ),
Expand All @@ -65,25 +72,40 @@ function getRevisionLabel( revision ) {
* @return {JSX.Element} The modal component.
*/
function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
const currentTheme = useSelect(
( select ) => select( coreStore ).getCurrentTheme(),
[]
);
const { currentThemeName, currentUser } = useSelect( ( select ) => {
const { getCurrentTheme, getCurrentUser } = select( coreStore );
const currentTheme = getCurrentTheme();
return {
currentThemeName:
currentTheme?.name?.rendered || currentTheme?.stylesheet,
currentUser: getCurrentUser(),
};
}, [] );
const dateNowInMs = getDate().getTime();

return (
<ol
className="edit-site-global-styles-screen-revisions__revisions-list"
aria-label={ __( 'Global styles revisions' ) }
role="group"
>
{ userRevisions.map( ( revision, index ) => {
const { id, author, modified } = revision;
const authorDisplayName = author?.name || __( 'User' );
const authorAvatar = author?.avatar_urls?.[ '48' ];
const isUnsaved = 'unsaved' === revision?.id;
const { id, isLatest, author, modified } = revision;
const isUnsaved = 'unsaved' === id;
// Unsaved changes are created by the current user.
const revisionAuthor = isUnsaved ? currentUser : author;
const authorDisplayName = revisionAuthor?.name || __( 'User' );
const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
const isSelected = selectedRevisionId
? selectedRevisionId === revision?.id
? selectedRevisionId === id
: index === 0;
const isReset = 'parent' === revision?.id;
const isReset = 'parent' === id;
const modifiedDate = getDate( modified );
const displayDate =
modified &&
dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
? dateI18n( dateFormat, modifiedDate )
Copy link
Member Author

@ramonjd ramonjd Nov 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

The date is formatted as OCTOBER 20 2023

This doesn't match the designs, which specify an abbreviated month — OCT 20 2023 — however I think it's important to introduce new formats using the date library and into Core so that themes can override them.

So TL;DR I can open a new PR and corresponding core patch to introduce the abbreviated month format if folks think it's worth it.

: humanTimeDiff( modified );

return (
<li
Expand All @@ -102,40 +124,39 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
onClick={ () => {
onChange( revision );
} }
label={ getRevisionLabel( revision ) }
label={ getRevisionLabel(
id,
isLatest,
authorDisplayName,
modifiedDate
) }
>
{ isReset ? (
<span className="edit-site-global-styles-screen-revisions__description">
{ __( 'Default styles' ) }
<span className="edit-site-global-styles-screen-revisions__meta">
{ currentTheme?.name?.rendered ||
currentTheme?.stylesheet }
{ currentThemeName }
</span>
</span>
) : (
<span className="edit-site-global-styles-screen-revisions__description">
<time dateTime={ modified }>
{ humanTimeDiff( modified ) }
<time
className="edit-site-global-styles-screen-revisions__date"
dateTime={ modified }
>
{ displayDate }
</time>
<span className="edit-site-global-styles-screen-revisions__changes">
{ getGlobalStylesChanges(
revision
).join( ', ' ) }
</span>
<span className="edit-site-global-styles-screen-revisions__meta">
{ isUnsaved
? sprintf(
/* translators: %s author display name */
__(
'Unsaved changes by %s'
),
authorDisplayName
)
: sprintf(
/* translators: %s author display name */
__( 'Changes saved by %s' ),
authorDisplayName
) }

<img
alt={ author?.name }
alt={ authorDisplayName }
src={ authorAvatar }
/>
{ authorDisplayName }
</span>
</span>
) }
Expand Down
85 changes: 57 additions & 28 deletions packages/edit-site/src/components/global-styles/screen-revisions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,62 +8,80 @@
margin: 0;
li {
margin-bottom: 0;
border-left: 1px solid $gray-300;
}
}

.edit-site-global-styles-screen-revisions__revision-item {
position: relative;
padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
padding-left: $grid-unit-20;
overflow: hidden;
cursor: pointer;

&:first-child {
padding-top: 0;
&:hover {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
.edit-site-global-styles-screen-revisions__date {
color: var(--wp-admin-theme-color);
}
}

&:last-child {
padding-bottom: 0;
&::before,
&::after {
position: absolute;
content: "\a";
display: block;
}

&::before {
background: $gray-300;
border-radius: 50%;
content: "\a";
display: inline-block;
height: $grid-unit-10;
width: $grid-unit-10;
position: absolute;
top: 50%;
left: 0;
top: $grid-unit-20 + 2;
left: $grid-unit-20 + 1; // So the circle is centered on the line.
transform: translate(-50%, -50%);
z-index: 1;
}
&.is-selected::before {
background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
}
}

.edit-site-global-styles-screen-revisions__revision-button {
width: 100%;
height: auto;
display: block;
padding: $grid-unit-10 $grid-unit-15;
&::after {
height: 100%;
left: $grid-unit-20;
top: 0;
width: 0;
border: 0.5px solid #ddd;
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
}

&:hover {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
&:first-child::after {
top: $grid-unit-20 + 2;
}

.edit-site-global-styles-screen-revisions__date {
color: var(--wp-admin-theme-color);
&:last-child::after {
height: $grid-unit-20 + 2;
}

// Nested to override specificity of .components-button.
.edit-site-global-styles-screen-revisions__revision-button {
width: 100%;
height: auto;
display: block;
padding: $grid-unit-15 $grid-unit-15 $grid-unit-15 $grid-unit-30;
&:focus,
&:active {
outline: 0;
box-shadow: none;
}
}
}

.is-selected {
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
.edit-site-global-styles-screen-revisions__revision-button {
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
opacity: 1;
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
}

.edit-site-global-styles-screen-revisions__meta {
.edit-site-global-styles-screen-revisions__date {
color: var(--wp-admin-theme-color);
}
}
Expand All @@ -78,23 +96,34 @@
flex-direction: column;
align-items: flex-start;
gap: $grid-unit-10;
.edit-site-global-styles-screen-revisions__date {
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
andrewserong marked this conversation as resolved.
Show resolved Hide resolved
}
}

.edit-site-global-styles-screen-revisions__meta {
color: $gray-700;
color: $gray-600;
display: flex;
justify-content: space-between;
justify-content: start;
width: 100%;
align-items: center;
text-align: left;
font-size: 12px;

img {
width: $grid-unit-20;
height: $grid-unit-20;
border-radius: 100%;
margin-right: $grid-unit-10;
}
}

.edit-site-global-styles-screen-revisions__changes {
text-align: left;
color: $gray-900;
}

.edit-site-global-styles-screen-revisions__loading {
margin: $grid-unit-30 auto !important;
}
Loading