Skip to content

TwentyTwenty: make presets back compatible with older versions #2154

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

Closed
oandregal wants to merge 2 commits into from
Closed

TwentyTwenty: make presets back compatible with older versions #2154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6482f4f
Add back the regular css properties
oandregal Jan 13, 2022
187bcc9
Add missing font sizes
oandregal Jan 13, 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
8 changes: 8 additions & 0 deletions src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,20 +206,24 @@ Inter variable font. Usage:
/* GENERAL COLORS */

.has-black-background-color {
--wp--preset--color--black: #000;
Copy link
Member Author

@oandregal oandregal Jan 13, 2022

Choose a reason for hiding this comment

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

Apparently, in addition to bringing back the regular CSS Properties, #2154 missed generating the CSS Custom Properties for these values. This PR also fixes it.

background-color: #000;
color: #fff;
}

.has-white-background-color {
--wp--preset--color--white: #fff;
background-color: #fff;
color: #000;
}

.has-black-color {
--wp--preset--color--black: #000;
color: #000;
}

.has-white-color {
--wp--preset--color--white: #fff;
color: #fff;
}

Expand Down Expand Up @@ -352,19 +356,23 @@ Inter variable font. Usage:

.editor-styles-wrapper p.has-small-font-size {
--wp--preset--font-size--small: 0.842em;
font-size: 0.842em;
}

.editor-styles-wrapper p.has-normal-font-size,
.editor-styles-wrapper p.has-regular-font-size {
--wp--preset--font-size--normal: 1em;
font-size: 1em;
}

.editor-styles-wrapper p.has-medium-font-size {
--wp--preset--font-size--medium: 1.1em;
font-size: 1.1em;
}

.editor-styles-wrapper p.has-large-font-size {
--wp--preset--font-size--large: 1.25em;
font-size: 1.25em;
}

.editor-styles-wrapper p.has-larger-font-size {
Copy link
Contributor

@hellofromtonya hellofromtonya Jan 18, 2022

Choose a reason for hiding this comment

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

What about the "larger" font size? Should it receive x-large or similar preset?

Copy link
Member Author

@oandregal oandregal Jan 19, 2022

Choose a reason for hiding this comment

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

The existing issue is with the theme presets that have the same slug than one defined by WordPress. Because WordPress doesn't define any larger (see) this still works as before.

Copy link
Contributor

@hellofromtonya hellofromtonya Jan 19, 2022

Choose a reason for hiding this comment

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

Could it not use the x-large slug in this case? Or does there need to be a direction naming match been, i.e. the slug would need to be larger which isn't defined?

Copy link
Member Author

@oandregal oandregal Jan 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

This PR doesn't aim to make any design change, just adapting existing presets, so that change is not required for the to work. If people think that's something worth doing I'd address it as a separate issue where design is involved, I'm not the best person to respond to that question :)

Copy link
Contributor

@hellofromtonya hellofromtonya Jan 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Isn't x-large slug an existing preset as defined here in theme.json? If yes, couldn't that slug be used for the "larger" styles:

.editor-styles-wrapper p.has-larger-font-size {
	--wp--preset--font-size--large: 1.5em;
	font-size: 1.5em;
}

(Sorry if my question is redundant. Seeking to understand)

Copy link
Member Author

@oandregal oandregal Jan 19, 2022

Choose a reason for hiding this comment

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

Yes, x-large is a new preset introduced by WordPress 5.9 and it'll generate the following class: .has-x-large-font-size. My point is that this PR only aims to fix how presets are updated by using CSS Custom Properties. So, as long as a theme doesn't have a .has-x-large-font-size class it doesn't need any change.

A different matter is whether the existing .has-larger-font-size provided by this theme can be .has-x-large-font-size now that WordPress has introduced the x-large preset. That's a design decision I don't have enough context about and that's not necessary for this PR. Does this help?

Copy link
Contributor

@hellofromtonya hellofromtonya Jan 19, 2022

Choose a reason for hiding this comment

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

Aha, I see. There is a direct correlation then between the slug and the CSS class generated. Cool. Thanks for your patience in explaining that to me.

Expand Down
8 changes: 8 additions & 0 deletions src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,20 +207,24 @@ Inter variable font. Usage:

.has-black-background-color {
--wp--preset--color--black: #000;
background-color: #000;
color: #fff;
}

.has-white-background-color {
--wp--preset--color--white: #fff;
background-color: #fff;
color: #000;
}

.has-black-color {
--wp--preset--color--black: #000;
color: #000;
}

.has-white-color {
--wp--preset--color--white: #fff;
color: #fff;
}


Expand Down Expand Up @@ -352,19 +356,23 @@ Inter variable font. Usage:

.editor-styles-wrapper p.has-small-font-size {
--wp--preset--font-size--small: 0.842em;
font-size: 0.842em;
}

.editor-styles-wrapper p.has-normal-font-size,
.editor-styles-wrapper p.has-regular-font-size {
--wp--preset--font-size--normal: 1em;
font-size: 1em;
}

.editor-styles-wrapper p.has-medium-font-size {
--wp--preset--font-size--medium: 1.1em;
font-size: 1.1em;
}

.editor-styles-wrapper p.has-large-font-size {
--wp--preset--font-size--large: 1.25em;
font-size: 1.25em;
}

.editor-styles-wrapper p.has-larger-font-size {
Expand Down
6 changes: 6 additions & 0 deletions src/wp-content/themes/twentytwenty/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,12 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
font-size: 20pt;
}

.has-normal-font-size,
.has-large-font-size {
--wp--preset--font-size--large: 14pt;
--wp--preset--font-size--normal: 14pt;
}

h2,
h2.entry-title,
h3,
Expand Down
4 changes: 4 additions & 0 deletions src/wp-content/themes/twentytwenty/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2837,20 +2837,24 @@ h2.entry-title {

.entry-content .has-small-font-size {
--wp--preset--font-size--small: 0.842em;
font-size: 0.842em;
}

.entry-content .has-normal-font-size,
.entry-content .has-regular-font-size {
--wp--preset--font-size--normal: 1em;
font-size: 1em;
}

.entry-content .has-medium-font-size {
--wp--preset--font-size--medium: 1.1em;
font-size: 1.1em;
line-height: 1.45;
}

.entry-content .has-large-font-size {
--wp--preset--font-size--large: 1.25em;
font-size: 1.25em;
line-height: 1.4;
}

Expand Down
4 changes: 4 additions & 0 deletions src/wp-content/themes/twentytwenty/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2855,20 +2855,24 @@ h2.entry-title {

.entry-content .has-small-font-size {
--wp--preset--font-size--small: 0.842em;
font-size: 0.842em;
}

.entry-content .has-normal-font-size,
.entry-content .has-regular-font-size {
--wp--preset--font-size--normal: 1em;
font-size: 1em;
}

.entry-content .has-medium-font-size {
--wp--preset--font-size--medium: 1.1em;
font-size: 1.1em;
line-height: 1.45;
}

.entry-content .has-large-font-size {
--wp--preset--font-size--large: 1.25em;
font-size: 1.25em;
line-height: 1.4;
}

Expand Down