Blank Canvas Blocks: Add Pullquote Block styles (#3501)

* Add rules for pullquotes

* Refactored pullquote and quote to use Gutenberg styles instead of custom where possible

Co-authored-by: Jason Crist <jcrist@pbking.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -347,7 +347,49 @@ p.has-drop-cap:not(:focus):first-letter {
 	margin: var(--wp--custom--paragraph--dropcap--margin);
 }
 
-.wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
+.wp-block-pullquote.is-style-solid-color,
+.wp-block-pullquote {
+	text-align: var(--wp--custom--pullquote--typography--text-align);
+}
+
+.wp-block-pullquote.is-style-solid-color blockquote,
+.wp-block-pullquote blockquote {
+	padding: 0;
+	margin: 0;
+}
+
+.wp-block-pullquote.is-style-solid-color blockquote p,
+.wp-block-pullquote blockquote p {
+	font-size: 1em;
+	padding: 0;
+	margin: 0;
+}
+
+.wp-block-pullquote.is-style-solid-color blockquote .wp-block-pullquote__citation,
+.wp-block-pullquote.is-style-solid-color blockquote cite,
+.wp-block-pullquote blockquote .wp-block-pullquote__citation,
+.wp-block-pullquote blockquote cite {
+	display: block;
+	font-size: var(--wp--custom--pullquote--citation--typography--font-size);
+	font-style: var(--wp--custom--pullquote--citation--typography--font-style);
+	margin-top: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-pullquote.is-style-solid-color.is-style-solid-color,
+.wp-block-pullquote.is-style-solid-color {
+	background-color: var(--wp--custom--color--foreground);
+	color: var(--wp--custom--color--background);
+}
+
+.wp-block-quote.is-style-large p,
+.wp-block-quote p {
+	font-style: unset;
+}
+
+.wp-block-quote.is-style-large .wp-block-quote__citation,
+.wp-block-quote.is-style-large cite,
+.wp-block-quote .wp-block-quote__citation,
+.wp-block-quote cite {
 	font-size: var(--wp--custom--quote--citation--typography--font-size);
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }

blank-canvas-blocks/experimental-theme.json

@@ -148,9 +148,23 @@
 					}
 				},
 				"quote": {
+					"typography": {
+						"textAlign": "left"
+					},
+					"citation": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--tiny)",
+							"fontStyle": "italic"
+						}
+					}
+				},
+				"pullquote": {
+					"typography": {
+						"textAlign": "left"
+					},
 					"citation": {
 						"typography": {
-							"fontSize": "var(--wp--preset--font-size--small)",
+							"fontSize": "var(--wp--preset--font-size--tiny)",
 							"fontStyle": "italic"
 						}
 					}
@@ -361,15 +375,38 @@
 			}
 		},
 		"core/quote": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"fontStyle": "normal"
+			},
 			"border": {
 				"color": "var(--wp--custom--color--secondary)",
-				"width": "1px"
+				"style": "solid",
+				"width": "0 0 0 1px"
 			},
 			"spacing": {
 				"padding": {
 					"left": "var(--wp--custom--margin--horizontal)"
 				}
 			}
+		},
+		"core/pullquote": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--huge)",
+				"fontStyle": "italic"
+			},
+			"border": {
+				"style": "solid",
+				"width": "1px 0"
+			},
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)",
+					"right": "var(--wp--custom--margin--horizontal)",
+					"top": "var(--wp--custom--margin--horizontal)",
+					"bottom": "var(--wp--custom--margin--horizontal)"
+				}
+			}
 		}
 	}
 }

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

@@ -0,0 +1,26 @@
+.wp-block-pullquote.is-style-solid-color,
+.wp-block-pullquote {
+	text-align: var(--wp--custom--pullquote--typography--text-align);
+	blockquote {
+		padding: 0;
+		margin: 0;
+		p {
+			font-size: 1em;
+			padding: 0;
+			margin: 0;
+		}
+
+		.wp-block-pullquote__citation, // For the editor
+		cite {
+			display: block;
+			font-size: var(--wp--custom--pullquote--citation--typography--font-size);
+			font-style: var(--wp--custom--pullquote--citation--typography--font-style);
+			margin-top: var(--wp--custom--margin--vertical);
+		}
+	}
+
+	&.is-style-solid-color {
+		background-color: var(--wp--custom--color--foreground);
+		color: var(--wp--custom--color--background);
+	}
+}

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

@@ -1,5 +1,10 @@
+.wp-block-quote.is-style-large,
 .wp-block-quote {
-	cite, .wp-block-quote__citation {
+	p {
+		font-style: unset;
+	}
+	.wp-block-quote__citation, // For the editor
+	cite {
 		font-size: var(--wp--custom--quote--citation--typography--font-size);
 		font-style: var(--wp--custom--quote--citation--typography--font-style);
 	}

blank-canvas-blocks/sass/ponyfill.scss

@@ -15,6 +15,7 @@
 @import "blocks/list";
 @import "blocks/navigation";
 @import "blocks/paragraph";
+@import "blocks/pullquote";
 @import "blocks/quote";
 @import "blocks/search";
 @import "blocks/file";