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. git-svn-id: https://develop.svn.wordpress.org/trunk@57631 602fd350-edb4-49c9-b593-d223f7449a82
ramonjd · Feb 13, 2024 · 8ec4d9d · 8ec4d9d
1 parent 835b372
commit 8ec4d9d
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 47 deletions.
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/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/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css.map b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css.map
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/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/src/wp-content/themes/twentytwentyone/assets/css/ie.css.map b/src/wp-content/themes/twentytwentyone/assets/css/ie.css.map
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/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/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css.map b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css.map
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss b/src/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/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss b/src/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/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/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/src/wp-content/themes/twentytwentyone/style.css b/src/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/src/wp-content/themes/twentytwentyone/style.css.map b/src/wp-content/themes/twentytwentyone/style.css.map