Changeset 58410 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss

Timestamp:

06/13/2024 08:53:39 PM (11 months ago)

Author:

SergeyBiryukov

Message:

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.

File:

• trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss (modified) (6 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss

@@ -4 +4 @@
     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;
     }
 
@@ -19 +25 @@
     &:before {
         content: "\201C";
-        font-size: var(--quote--font-size);
-        line-height: var(--quote--line-height);
         left: 8px;
     }
@@ -26 +30 @@
     .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 &,
@@ -35 +42 @@
             color: currentColor;
         }
+    }
+
+    &: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;
     }
 
@@ -50 +66 @@
         p:before {
             content: "\201D";
-            font-size: var(--quote--font-size);
-            font-weight: normal;
-            line-height: var(--quote--line-height);
             margin-right: 5px;
         }
@@ -65 +78 @@
     }
 
+    // The large style was removed in WordPress 6.0, the CSS is kept for backwards compatibility.
     &.is-large,
     &.is-style-large {