Quadrat: Update Pullquote styles (#3780)

* Quadrat: Update Pullquote styles

* Add a default font weight value

* Don't remove padding and margin fro the blockquote element if this is a solid pullquote

* Refactored pullquote paddings so minimal overrides are done in child themes.

* Fixed merge issue and recompiled

* Refinements to pullquote font weight and style.

* Use variable font size and adjust the line height a bit.

Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Jeff Ong <jonger4@gmail.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -470,6 +470,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-size: var(--wp--custom--pullquote--citation--typography--font-size);
 	font-family: var(--wp--custom--pullquote--citation--typography--font-family);
 	font-style: var(--wp--custom--pullquote--citation--typography--font-style);
+	font-weight: var(--wp--custom--pullquote--citation--typography--font-weight);
 	margin-top: var(--wp--custom--pullquote--citation--spacing--margin--top);
 }
 

blank-canvas-blocks/experimental-theme.json

@@ -218,7 +218,8 @@
 				"citation": {
 					"typography": {
 						"fontSize": "var(--wp--preset--font-size--tiny)",
-						"fontStyle": "italic"
+						"fontStyle": "italic",
+						"fontWeight": "400"
 					}
 				},
 				"typography": {

blank-canvas-blocks/sass/blocks/_pullquote.scss

@@ -17,6 +17,7 @@
 			font-size: var(--wp--custom--pullquote--citation--typography--font-size);
 			font-family: var(--wp--custom--pullquote--citation--typography--font-family);
 			font-style: var(--wp--custom--pullquote--citation--typography--font-style);
+			font-weight: var(--wp--custom--pullquote--citation--typography--font-weight);
 			margin-top: var(--wp--custom--pullquote--citation--spacing--margin--top);
 		}
 	}
@@ -26,3 +27,4 @@
 		color: var(--wp--custom--color--background);
 	}
 }
+

mayland-blocks/assets/theme.css

@@ -5,6 +5,10 @@ body {
 }
 
 /* Adjust header spacing. */
+.site-header > .wp-block-columns {
+	padding: 0 var(--wp--custom--margin--horizontal);
+}
+
 .site-header .wp-block-site-title a {
 	text-decoration: none;
 }
@@ -31,9 +35,9 @@ h1, h2, h3 {
 	letter-spacing: -0.015em;
 }
 
-/* 
+/*
  * Preserve image ratios.
- * Needed until https://github.com/WordPress/gutenberg/pull/27518/ is merged. 
+ * Needed until https://github.com/WordPress/gutenberg/pull/27518/ is merged.
  */
 img {
 	height: auto;

mayland-blocks/experimental-theme.json

@@ -219,7 +219,8 @@
 				"citation": {
 					"typography": {
 						"fontSize": "var(--wp--preset--font-size--tiny)",
-						"fontStyle": "italic"
+						"fontStyle": "italic",
+						"fontWeight": "400"
 					}
 				},
 				"typography": {

quadrat/assets/theme.css

@@ -266,11 +266,8 @@ ul ul {
 	border-bottom-width: 1px;
 }
 
-@media (max-width: 479px) {
-	.headlines-pattern {
-		padding-top: 50px !important;
-		padding-bottom: 50px !important;
-	}
+.wp-block-pullquote.is-style-solid-color {
+	padding: var(--wp--custom--margin--horizontal);
 }
 
 a {

quadrat/child-experimental-theme.json

@@ -115,6 +115,14 @@
 						"fontWeight": "300"
 					}
 				}
+			},
+			"pullquote": {
+				"citation": {
+					"typography": {
+						"fontStyle": "normal",
+						"fontWeight": 300
+					}
+				}
 			}
 		},
 		"layout": {
@@ -216,6 +224,11 @@
 					"lineHeight": "var(--wp--custom--line-height--headings--h1)"
 				}
 			},
+			"list": {
+				"padding": {
+					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+				}
+			},
 			"core/quote": {
 				"border": {
 					"width": "0px"
@@ -237,6 +250,23 @@
 					"lineHeight": "40px"
 				}
 			},
+			"core/pullquote": {
+				"typography": {
+					"fontStyle": "normal",
+					"fontSize": "var(--wp--preset--font-size--huge)",
+					"fontWeight": "500",
+					"lineHeight": "1.4"
+				},
+				"spacing": {
+					"padding": {
+						"left": "0px",
+						"right": "0px"
+					}
+				},
+				"border": {
+					"width": "1px 0 0 0"
+				}
+			},
 			"core/site-title": {
 				"color": {
 					"link": "var(--wp--custom--color--primary)"

quadrat/experimental-theme.json

@@ -208,7 +208,8 @@
 					"typography": {
 						"fontSize": "var(--wp--preset--font-size--tiny)",
 						"fontFamily": "inherit",
-						"fontStyle": "italic"
+						"fontStyle": "normal",
+						"fontWeight": 300
 					},
 					"spacing": {
 						"margin": {
@@ -411,16 +412,18 @@
 			"core/pullquote": {
 				"border": {
 					"style": "solid",
-					"width": "1px 0"
+					"width": "1px 0 0 0"
 				},
 				"typography": {
-					"fontStyle": "italic",
-					"fontSize": "var(--wp--preset--font-size--huge)"
+					"fontStyle": "normal",
+					"fontSize": "var(--wp--preset--font-size--huge)",
+					"fontWeight": "500",
+					"lineHeight": "1.4"
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
+						"left": "0px",
+						"right": "0px",
 						"top": "var(--wp--custom--margin--horizontal)",
 						"bottom": "var(--wp--custom--margin--horizontal)"
 					}
@@ -468,6 +471,11 @@
 						"fontWeight": "300"
 					}
 				}
+			},
+			"list": {
+				"padding": {
+					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+				}
 			}
 		},
 		"color": {

quadrat/sass/blocks/_pullquote.scss

@@ -0,0 +1,3 @@
+.wp-block-pullquote.is-style-solid-color {
+	padding: var(--wp--custom--margin--horizontal);
+}

quadrat/sass/theme.scss

@@ -12,7 +12,7 @@
 @import "blocks/quote";
 @import "blocks/search";
 @import "blocks/table";
-@import "block-patterns/headlines";
+@import "blocks/pullquote";
 @import "elements/links";
 @import "header";
 @import "meta";

seedlet-blocks/assets/theme.css

@@ -176,6 +176,10 @@
 	}
 }
 
+.wp-block-pullquote.is-style-solid-color {
+	padding: var(--wp--custom--margin--horizontal);
+}
+
 /**
  * Author bio
  */

seedlet-blocks/experimental-theme.json

@@ -257,7 +257,8 @@
 				"citation": {
 					"typography": {
 						"fontSize": "var(--wp--preset--font-size--tiny)",
-						"fontStyle": "italic"
+						"fontStyle": "italic",
+						"fontWeight": "400"
 					}
 				},
 				"typography": {

seedlet-blocks/sass/blocks/_pullquote.scss

@@ -0,0 +1,3 @@
+.wp-block-pullquote.is-style-solid-color {
+	padding: var(--wp--custom--margin--horizontal);
+}

seedlet-blocks/sass/theme.scss

@@ -1,6 +1,7 @@
 @import './blocks/site-title.scss';
 @import './blocks/links.scss';
 @import './blocks/latest-posts';
+@import './blocks/pullquote';
 
 /**
  * Author bio