From 5e52fa847731e14983ce118a07f73c768b553260 Mon Sep 17 00:00:00 2001 From: hellofromTonya Date: Tue, 13 Feb 2024 21:24:10 +0000 Subject: [PATCH] Bundled Themes: Support pullquote block typography options in Twenty Twenty-One. Pullquotes were not inheriting the correct styling from the block editor. This commit resolves the issue by supporting typography options. 1. The `font-family` variable remains on the paragraph (both editor and front) so the citation continues to use the body font even when the site redefines `var(--pullquote--font-family)`. 2. The `font-size`, `font-style`, `font-weight`, `letter-spacing` and `line-height` are set on the Pullquote block to allow overriding with the sidebar settings. Then the block's paragraph element inherits those styles. 3. When the settings do not give a custom `line-height` from the sidebar, these stylesheets set the paragraph to `var(--pullquote--line-height)` instead of inheriting 1.6 from the block styles. This patch uses `:where()` to avoid increasing specificity. Moving styles from the paragraph element to the block should not affect the citation, which has had its own styles for `font-size`, `font-style`, `font-weight` and `letter-spacing`. Follow-up to [56959], [56451], [55089], [55088], [49574], [49320], [49216]. Props sabernhardt, poena, darshitrajyaguru97, harshgajipara, shailu25, skyakash12. Fixes #57854. Built from https://develop.svn.wordpress.org/trunk@57631 git-svn-id: http://core.svn.wordpress.org/trunk@57132 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentytwentyone/assets/css/ie-editor.css | 27 ++++++++++++------- .../themes/twentytwentyone/assets/css/ie.css | 27 ++++++++++++------- .../assets/css/style-editor.css | 18 +++++++++---- .../sass/05-blocks/pullquote/_editor.scss | 18 +++++++++---- .../sass/05-blocks/pullquote/_style.scss | 18 +++++++++---- .../themes/twentytwentyone/style-rtl.css | 18 +++++++++---- wp-content/themes/twentytwentyone/style.css | 18 +++++++++---- wp-includes/version.php | 2 +- 8 files changed, 102 insertions(+), 44 deletions(-) diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 707ade6b4b..d892ab7c7f 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -1306,6 +1306,17 @@ pre.wp-block-preformatted { color: currentColor; border-color: currentColor; position: relative; + font-size: 2rem; + font-style: normal; + font-weight: 700; + letter-spacing: normal; +} + +@media only screen and (min-width: 652px) { + + .wp-block-pullquote { + font-size: 2rem; + } } .wp-block-pullquote blockquote::before { @@ -1321,18 +1332,16 @@ pre.wp-block-preformatted { .wp-block-pullquote p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-style: normal; - font-weight: 700; - letter-spacing: normal; - line-height: 1.3; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } -@media only screen and (min-width: 652px) { - .wp-block-pullquote p { - font-size: 2rem; - } +.wp-block-pullquote:where(:not([style*=line-height])) p { + line-height: 1.3; } .wp-block-pullquote a { diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 801540b2ab..fe93796a3f 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -2977,12 +2977,23 @@ pre.wp-block-preformatted { color: currentColor; border-color: currentColor; position: relative; + font-size: 2rem; + font-style: normal; + font-weight: 700; + letter-spacing: normal; /** * Block Options */ } +@media only screen and (min-width: 652px) { + + .wp-block-pullquote { + font-size: 2rem; + } +} + .wp-block-pullquote blockquote::before { color: currentColor; content: "“"; @@ -2996,18 +3007,16 @@ pre.wp-block-preformatted { .wp-block-pullquote p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-style: normal; - font-weight: 700; - letter-spacing: normal; - line-height: 1.3; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } -@media only screen and (min-width: 652px) { - .wp-block-pullquote p { - font-size: 2rem; - } +.wp-block-pullquote:where(:not([style*=line-height])) p { + line-height: 1.3; } .wp-block-pullquote a { diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index a40208428b..b2535e111e 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -1418,6 +1418,10 @@ pre.wp-block-preformatted { color: currentColor; border-color: currentColor; position: relative; + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); } .wp-block-pullquote blockquote::before { @@ -1433,14 +1437,18 @@ pre.wp-block-preformatted { .wp-block-pullquote p { font-family: var(--pullquote--font-family); - font-size: var(--pullquote--font-size); - font-style: var(--pullquote--font-style); - font-weight: 700; - letter-spacing: var(--pullquote--letter-spacing); - line-height: var(--pullquote--line-height); + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } +.wp-block-pullquote:where(:not([style*=line-height])) p { + line-height: var(--pullquote--line-height); +} + .wp-block-pullquote a { color: currentColor; } diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss index 5b223b19e2..fdf7ed64c3 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss @@ -7,6 +7,10 @@ color: currentColor; border-color: currentColor; position: relative; + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); blockquote::before { color: currentColor; @@ -21,14 +25,18 @@ p { font-family: var(--pullquote--font-family); - font-size: var(--pullquote--font-size); - font-style: var(--pullquote--font-style); - font-weight: 700; - letter-spacing: var(--pullquote--letter-spacing); - line-height: var(--pullquote--line-height); + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } + &:where(:not([style*="line-height"])) p { + line-height: var(--pullquote--line-height); + } + a { color: currentColor; } diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss index ad0bc2cb9d..da5f2d18fc 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss @@ -7,6 +7,10 @@ color: currentColor; border-color: currentColor; position: relative; + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); blockquote::before { color: currentColor; @@ -21,14 +25,18 @@ p { font-family: var(--pullquote--font-family); - font-size: var(--pullquote--font-size); - font-style: var(--pullquote--font-style); - font-weight: 700; - letter-spacing: var(--pullquote--letter-spacing); - line-height: var(--pullquote--line-height); + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } + &:where(:not([style*="line-height"])) p { + line-height: var(--pullquote--line-height); + } + a { color: currentColor; } diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css index 142bd60ad8..aae3b49e53 100644 --- a/wp-content/themes/twentytwentyone/style-rtl.css +++ b/wp-content/themes/twentytwentyone/style-rtl.css @@ -2813,6 +2813,10 @@ pre.wp-block-preformatted { color: currentColor; border-color: currentColor; position: relative; + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); /** * Block Options @@ -2832,14 +2836,18 @@ pre.wp-block-preformatted { .wp-block-pullquote p { font-family: var(--pullquote--font-family); - font-size: var(--pullquote--font-size); - font-style: var(--pullquote--font-style); - font-weight: 700; - letter-spacing: var(--pullquote--letter-spacing); - line-height: var(--pullquote--line-height); + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } +.wp-block-pullquote:where(:not([style*=line-height])) p { + line-height: var(--pullquote--line-height); +} + .wp-block-pullquote a { color: currentColor; } diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css index e3a3af8521..f657b7f5b3 100644 --- a/wp-content/themes/twentytwentyone/style.css +++ b/wp-content/themes/twentytwentyone/style.css @@ -2823,6 +2823,10 @@ pre.wp-block-preformatted { color: currentColor; border-color: currentColor; position: relative; + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); /** * Block Options @@ -2842,14 +2846,18 @@ pre.wp-block-preformatted { .wp-block-pullquote p { font-family: var(--pullquote--font-family); - font-size: var(--pullquote--font-size); - font-style: var(--pullquote--font-style); - font-weight: 700; - letter-spacing: var(--pullquote--letter-spacing); - line-height: var(--pullquote--line-height); + font-size: inherit; + font-style: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; margin: 0; } +.wp-block-pullquote:where(:not([style*=line-height])) p { + line-height: var(--pullquote--line-height); +} + .wp-block-pullquote a { color: currentColor; } diff --git a/wp-includes/version.php b/wp-includes/version.php index 027a85567d..8a759d10b2 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.5-beta1-57630'; +$wp_version = '6.5-beta1-57631'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.