Changeset 57631 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss

Timestamp:

02/13/2024 09:22:35 PM (2 years ago)

Author:

hellofromTonya

Message:

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.

File:

• trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss

@@ -8 +8 @@
     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 {
@@ -22 +26 @@
     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);
+        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);
-        margin: 0;
     }