Changeset 52549 for trunk

Timestamp:

01/10/2022 06:27:45 PM (3 years ago)

Author:

jorgefilipecosta

Message:

Fix: Update some default presets in use by default themes to the new format.

Themes that use the same preset slugs as WordPress uses need to be updated.
From the devnote ​https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/
The CSS for some of the presets defined by WordPress (font sizes, colors, and gradients) was loaded twice for most themes in WordPress 5.8: in the block-library stylesheet plus in the global stylesheet. Additionally, there were slight differences in the CSS in both places.
In WordPress 5.9 those were consolidated into a single place, the global stylesheet whose name is global-styles-inline-css that is now loaded for all themes in the front-end.
For themes to override the default values they can use the theme.json and provide the same slug. Themes that do not use a theme.json can still override the default values by enqueuing some CSS that sets the corresponding CSS Custom Property. This commit does the second for the twenty twenty theme.

Props oandregal.
Fixes #54782.

Location:

trunk/src/wp-content/themes/twentytwenty

Files:

• assets/css/editor-style-block-rtl.css (modified) (1 diff)
• assets/css/editor-style-block.css (modified) (2 diffs)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

@@ -352 +352 @@
 
 .editor-styles-wrapper p.has-small-font-size {
-    font-size: 0.842em;
+    --wp--preset--font-size--small: 0.842em;
 }
 
 .editor-styles-wrapper p.has-normal-font-size,
 .editor-styles-wrapper p.has-regular-font-size {
-    font-size: 1em;
+    --wp--preset--font-size--normal: 1em;
 }
 
 .editor-styles-wrapper p.has-medium-font-size {
-    font-size: 1.1em;
+    --wp--preset--font-size--medium: 1.1em;
 }
 
 .editor-styles-wrapper p.has-large-font-size {
-    font-size: 1.25em;
+    --wp--preset--font-size--large: 1.25em;
 }
 

trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css

@@ -207 +207 @@
 
 .has-black-background-color {
-    background-color: #000;
+    --wp--preset--color--black: #000;
     color: #fff;
 }
 
 .has-white-background-color {
-    background-color: #fff;
+    --wp--preset--color--white: #fff;
     color: #000;
 }
 
 .has-black-color {
-    color: #000;
+    --wp--preset--color--black: #000;
 }
 
 .has-white-color {
-    color: #fff;
+    --wp--preset--color--white: #fff;
 }
 
@@ -352 +352 @@
 
 .editor-styles-wrapper p.has-small-font-size {
-    font-size: 0.842em;
+    --wp--preset--font-size--small: 0.842em;
 }
 
 .editor-styles-wrapper p.has-normal-font-size,
 .editor-styles-wrapper p.has-regular-font-size {
-    font-size: 1em;
+    --wp--preset--font-size--normal: 1em;
 }
 
 .editor-styles-wrapper p.has-medium-font-size {
-    font-size: 1.1em;
+    --wp--preset--font-size--medium: 1.1em;
 }
 
 .editor-styles-wrapper p.has-large-font-size {
-    font-size: 1.25em;
+    --wp--preset--font-size--large: 1.25em;
 }
 

trunk/src/wp-content/themes/twentytwenty/style-rtl.css

@@ -2837 +2837 @@
 
 .entry-content .has-small-font-size {
-    font-size: 0.842em;
+    --wp--preset--font-size--small: 0.842em;
 }
 
 .entry-content .has-normal-font-size,
 .entry-content .has-regular-font-size {
-    font-size: 1em;
+    --wp--preset--font-size--normal: 1em;
 }
 
 .entry-content .has-medium-font-size {
-    font-size: 1.1em;
+    --wp--preset--font-size--medium: 1.1em;
     line-height: 1.45;
 }
 
 .entry-content .has-large-font-size {
-    font-size: 1.25em;
+    --wp--preset--font-size--large: 1.25em;
     line-height: 1.4;
 }

trunk/src/wp-content/themes/twentytwenty/style.css

@@ -2855 +2855 @@
 
 .entry-content .has-small-font-size {
-    font-size: 0.842em;
+    --wp--preset--font-size--small: 0.842em;
 }
 
 .entry-content .has-normal-font-size,
 .entry-content .has-regular-font-size {
-    font-size: 1em;
+    --wp--preset--font-size--normal: 1em;
 }
 
 .entry-content .has-medium-font-size {
-    font-size: 1.1em;
+    --wp--preset--font-size--medium: 1.1em;
     line-height: 1.45;
 }
 
 .entry-content .has-large-font-size {
-    font-size: 1.25em;
+    --wp--preset--font-size--large: 1.25em;
     line-height: 1.4;
 }