From 2aff2a60fc233415526c9da43ece078c185493c4 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Mon, 10 Jan 2022 18:27:45 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@52549 602fd350-edb4-49c9-b593-d223f7449a82 --- .../assets/css/editor-style-block-rtl.css | 8 ++++---- .../assets/css/editor-style-block.css | 16 ++++++++-------- src/wp-content/themes/twentytwenty/style-rtl.css | 8 ++++---- src/wp-content/themes/twentytwenty/style.css | 8 ++++---- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css index 98c02c4819..aa1cdc0feb 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css +++ b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css @@ -351,20 +351,20 @@ Inter variable font. Usage: } .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; } .editor-styles-wrapper p.has-larger-font-size { diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css index ed613946c4..841df00462 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css @@ -206,21 +206,21 @@ Inter variable font. Usage: /* GENERAL COLORS */ .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; } @@ -351,20 +351,20 @@ Inter variable font. Usage: } .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; } .editor-styles-wrapper p.has-larger-font-size { diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css index d823d31433..b0aa58a28d 100644 --- a/src/wp-content/themes/twentytwenty/style-rtl.css +++ b/src/wp-content/themes/twentytwenty/style-rtl.css @@ -2836,21 +2836,21 @@ h2.entry-title { /* Block Font Sizes -------------------------- */ .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; } diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css index a18ccc1018..06693752d2 100644 --- a/src/wp-content/themes/twentytwenty/style.css +++ b/src/wp-content/themes/twentytwenty/style.css @@ -2854,21 +2854,21 @@ h2.entry-title { /* Block Font Sizes -------------------------- */ .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; }