From 3aaf7ab71eabc8c16ae0f899d8d0f6919a3344fd Mon Sep 17 00:00:00 2001 From: Sergey Biryukov Date: Thu, 13 Jun 2024 20:55:06 +0000 Subject: [PATCH] Twenty Twenty-One: Fix typography settings for the Quote block. Follow-up to [49216], [49478], [49574], [49633], [49800]. Props poena, jyolsna, deepakvijayan, audrasjb, whaze, ironprogrammer, suascat_wp, sannevndrmeulen, zunaid321, oglekler, sabernhardt, mukesh27, ugyensupport, devmuhib, priyanshii5, nicolefurlan, hellofromTonya, huzaifaalmesbah, shailu25, vivekawsm, imranhasanraaz, karmatosed. Fixes #55991. Built from https://develop.svn.wordpress.org/trunk@58410 git-svn-id: http://core.svn.wordpress.org/trunk@57859 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentytwentyone/assets/css/ie-editor.css | 35 ++++++++----- .../themes/twentytwentyone/assets/css/ie.css | 50 ++++++++++++++++--- .../assets/css/style-editor.css | 36 +++++++------ .../assets/sass/04-elements/blockquote.scss | 4 -- .../assets/sass/05-blocks/quote/_editor.scss | 38 +++++++++----- .../assets/sass/05-blocks/quote/_style.scss | 38 ++++++++++++-- .../themes/twentytwentyone/style-rtl.css | 45 +++++++++++++---- wp-content/themes/twentytwentyone/style.css | 45 +++++++++++++---- wp-includes/version.php | 2 +- 9 files changed, 218 insertions(+), 75 deletions(-) diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index cef8e02a0e..7776f60f9f 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -184,8 +184,6 @@ blockquote strong { blockquote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; position: absolute; left: -12px; } @@ -194,7 +192,6 @@ blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: #28303d; - font-size: 1rem; font-style: normal; } @media only screen and (max-width: 481.98px) { @@ -1428,9 +1425,6 @@ pre.wp-block-preformatted { border-left: none; margin: 30px auto 30px 25px; padding-left: 1em; -} - -.wp-block-quote p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; font-style: normal; @@ -1438,21 +1432,31 @@ pre.wp-block-preformatted { line-height: 1.7; } +.wp-block-quote p { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .wp-block-quote strong { font-weight: bolder; } .wp-block-quote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; left: 8px; } .wp-block-quote .wp-block-quote__citation { color: currentColor; - font-size: 1rem; - font-style: normal; + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; } .has-background .wp-block-quote .wp-block-quote__citation, @@ -1462,6 +1466,14 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-quote:where(:not([style*=font-style])) .wp-block-quote__citation { + font-style: normal; +} + +.wp-block-quote:where(:not([style*=font-weight])) .wp-block-quote__citation { + font-weight: normal; +} + .wp-block-quote.has-text-align-right { margin: 30px 25px 30px auto; padding-right: 0; @@ -1474,9 +1486,6 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right p:before { content: "”"; - font-size: 1.25rem; - font-weight: normal; - line-height: 1.7; margin-right: 5px; } diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 8a7a9904e8..0e542687fb 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -1210,8 +1210,6 @@ blockquote strong { blockquote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; position: absolute; left: -12px; } @@ -1220,7 +1218,6 @@ blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: #28303d; - font-size: 1rem; font-style: normal; } @media only screen and (max-width: 481.98px) { @@ -3128,19 +3125,41 @@ pre.wp-block-preformatted { .wp-block-quote { border-left: none; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: 1.7; /** * Block Options */ } +.wp-block-quote p { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .wp-block-quote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; left: 8px; } +.wp-block-quote .wp-block-quote__citation, +.wp-block-quote cite, +.wp-block-quote footer { + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .has-background .wp-block-quote .wp-block-quote__citation, [class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, @@ -3156,6 +3175,24 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-quote:where(:not([style*=font-style])) .wp-block-quote__citation { + font-style: normal; +} + +.wp-block-quote:where(:not([style*=font-style])) cite { + font-style: normal; +} + +.wp-block-quote:where(:not([style*=font-style])) footer { + font-style: normal; +} + +.wp-block-quote:where(:not([style*=font-weight])) .wp-block-quote__citation, +.wp-block-quote:where(:not([style*=font-weight])) cite, +.wp-block-quote:where(:not([style*=font-weight])) footer { + font-weight: normal; +} + .wp-block-quote.has-text-align-right { margin: 30px 25px 30px auto; padding-right: 0; @@ -3168,9 +3205,6 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right p:before { content: "”"; - font-size: 1.25rem; - font-weight: normal; - line-height: 1.7; margin-right: 5px; } diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 2cb3872b26..7c22719aee 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -338,7 +338,6 @@ blockquote cite, blockquote footer { font-weight: normal; color: var(--global--color-primary); - font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } @@ -368,8 +367,6 @@ blockquote strong { blockquote:before { content: "“"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -378,7 +375,6 @@ blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: var(--global--color-primary); - font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481.98px) { @@ -1530,9 +1526,6 @@ pre.wp-block-preformatted { border-left: none; margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); padding-left: 1em; -} - -.wp-block-quote p { font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); @@ -1540,21 +1533,31 @@ pre.wp-block-preformatted { line-height: var(--quote--line-height); } +.wp-block-quote p { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .wp-block-quote strong { font-weight: var(--quote--font-weight-strong); } .wp-block-quote:before { content: "“"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); left: 8px; } .wp-block-quote .wp-block-quote__citation { color: currentColor; - font-size: var(--global--font-size-xs); - font-style: var(--quote--font-style-cite); + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; } .has-background .wp-block-quote .wp-block-quote__citation, @@ -1564,6 +1567,14 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-quote:where(:not([style*=font-style])) .wp-block-quote__citation { + font-style: var(--quote--font-style-cite); +} + +.wp-block-quote:where(:not([style*=font-weight])) .wp-block-quote__citation { + font-weight: normal; +} + .wp-block-quote.has-text-align-right { margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; @@ -1576,9 +1587,6 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right p:before { content: "”"; - font-size: var(--quote--font-size); - font-weight: normal; - line-height: var(--quote--line-height); margin-right: 5px; } diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss index e599b0b206..906fb6b550 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss @@ -29,7 +29,6 @@ blockquote { footer { font-weight: normal; color: var(--global--color-primary); - font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } @@ -57,8 +56,6 @@ blockquote { &:before { content: "\201C"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -67,7 +64,6 @@ blockquote { cite, footer { color: var(--global--color-primary); - font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss index 91eabc6400..dcc7787864 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss @@ -3,13 +3,19 @@ border-left: none; margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); padding-left: 1em; + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); p { - font-family: var(--quote--font-family); - font-size: var(--quote--font-size); - font-style: var(--quote--font-style); - font-weight: var(--quote--font-weight); - line-height: var(--quote--line-height); + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; } strong { @@ -18,15 +24,16 @@ &:before { content: "\201C"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); left: 8px; } .wp-block-quote__citation { color: currentColor; - font-size: var(--global--font-size-xs); - font-style: var(--quote--font-style-cite); + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; .has-background &, [class*="background-color"] &, @@ -36,6 +43,15 @@ } } + &:where(:not([style*="font-style"])) .wp-block-quote__citation { + font-style: var(--quote--font-style-cite); + } + + // The cite has a lighter font-weight than the rest of the quote. + &:where(:not([style*="font-weight"])) .wp-block-quote__citation { + font-weight: normal; + } + &.has-text-align-right { margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; @@ -49,9 +65,6 @@ // Align the quote left of the text. p:before { content: "\201D"; - font-size: var(--quote--font-size); - font-weight: normal; - line-height: var(--quote--line-height); margin-right: 5px; } } @@ -64,6 +77,7 @@ } } + // The large style was removed in WordPress 6.0, the CSS is kept for backwards compatibility. &.is-large, &.is-style-large { padding-left: 0; diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss index 8d8e3c44e5..01305d9586 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss @@ -1,16 +1,33 @@ .wp-block-quote { border-left: none; + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); + + p { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + } &:before { content: "\201C"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); left: 8px; } .wp-block-quote__citation, cite, footer { + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; .has-background &, [class*="background-color"] &, @@ -20,6 +37,19 @@ } } + &:where(:not([style*="font-style"])) .wp-block-quote__citation, + &:where(:not([style*="font-style"])) cite, + &:where(:not([style*="font-style"])) footer { + font-style: var(--quote--font-style-cite); + } + + // The cite has a lighter font-weight than the rest of the quote. + &:where(:not([style*="font-weight"])) .wp-block-quote__citation, + &:where(:not([style*="font-weight"])) cite, + &:where(:not([style*="font-weight"])) footer { + font-weight: normal; + } + /** * Block Options */ @@ -36,9 +66,6 @@ // Align the quote left of the text. p:before { content: "\201D"; - font-size: var(--quote--font-size); - font-weight: normal; - line-height: var(--quote--line-height); margin-right: 5px; } } @@ -51,6 +78,7 @@ } } + // The large style was removed in WordPress 6.0, the CSS is kept for backwards compatibility. &.is-large, &.is-style-large { padding-left: 0; diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css index 47bda7ddab..321f6b13e6 100644 --- a/wp-content/themes/twentytwentyone/style-rtl.css +++ b/wp-content/themes/twentytwentyone/style-rtl.css @@ -1071,7 +1071,6 @@ blockquote cite, blockquote footer { font-weight: normal; color: var(--global--color-primary); - font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } @@ -1101,8 +1100,6 @@ blockquote strong { blockquote:before { content: "“"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); position: absolute; right: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -1111,7 +1108,6 @@ blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: var(--global--color-primary); - font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481.98px) { @@ -2924,19 +2920,41 @@ pre.wp-block-preformatted { .wp-block-quote { border-right: none; + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); /** * Block Options */ } +.wp-block-quote p { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .wp-block-quote:before { content: "“"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); right: 8px; } +.wp-block-quote .wp-block-quote__citation, +.wp-block-quote cite, +.wp-block-quote footer { + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .has-background .wp-block-quote .wp-block-quote__citation, [class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, @@ -2952,6 +2970,18 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-quote:where(:not([style*=font-style])) .wp-block-quote__citation, +.wp-block-quote:where(:not([style*=font-style])) cite, +.wp-block-quote:where(:not([style*=font-style])) footer { + font-style: var(--quote--font-style-cite); +} + +.wp-block-quote:where(:not([style*=font-weight])) .wp-block-quote__citation, +.wp-block-quote:where(:not([style*=font-weight])) cite, +.wp-block-quote:where(:not([style*=font-weight])) footer { + font-weight: normal; +} + .wp-block-quote.has-text-align-right { margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); padding-left: 0; @@ -2964,9 +2994,6 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right p:before { content: "”"; - font-size: var(--quote--font-size); - font-weight: normal; - line-height: var(--quote--line-height); margin-left: 5px; } diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css index 18e057722c..d7852e4092 100644 --- a/wp-content/themes/twentytwentyone/style.css +++ b/wp-content/themes/twentytwentyone/style.css @@ -1079,7 +1079,6 @@ blockquote cite, blockquote footer { font-weight: normal; color: var(--global--color-primary); - font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } @@ -1109,8 +1108,6 @@ blockquote strong { blockquote:before { content: "“"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -1119,7 +1116,6 @@ blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: var(--global--color-primary); - font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481.98px) { @@ -2934,19 +2930,41 @@ pre.wp-block-preformatted { .wp-block-quote { border-left: none; + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); /** * Block Options */ } +.wp-block-quote p { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .wp-block-quote:before { content: "“"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); left: 8px; } +.wp-block-quote .wp-block-quote__citation, +.wp-block-quote cite, +.wp-block-quote footer { + font-family: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + .has-background .wp-block-quote .wp-block-quote__citation, [class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, @@ -2962,6 +2980,18 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-quote:where(:not([style*=font-style])) .wp-block-quote__citation, +.wp-block-quote:where(:not([style*=font-style])) cite, +.wp-block-quote:where(:not([style*=font-style])) footer { + font-style: var(--quote--font-style-cite); +} + +.wp-block-quote:where(:not([style*=font-weight])) .wp-block-quote__citation, +.wp-block-quote:where(:not([style*=font-weight])) cite, +.wp-block-quote:where(:not([style*=font-weight])) footer { + font-weight: normal; +} + .wp-block-quote.has-text-align-right { margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; @@ -2974,9 +3004,6 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right p:before { content: "”"; - font-size: var(--quote--font-size); - font-weight: normal; - line-height: var(--quote--line-height); margin-right: 5px; } diff --git a/wp-includes/version.php b/wp-includes/version.php index 6695f3a513..76d7b46e5c 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.6-beta2-58409'; +$wp_version = '6.6-beta2-58410'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.