Add color support to the quote block

WordPress · Apr 1, 2022 · dfc93b7 · dfc93b7
1 parent 88689f0
commit dfc93b7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -680,7 +680,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, typography (fontSize, lineHeight)
+-	**Supports:** anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
 -	**Attributes:** align, citation, value
 
 ## Read More

diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
@@ -41,6 +41,14 @@
 				"fontSize": true,
 				"fontAppearance": true
 			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"styles": [

diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss
@@ -1,4 +1,5 @@
 .wp-block-quote {
+	box-sizing: border-box;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
 	&.is-style-large:not(.is-style-plain),
@@ -18,4 +19,8 @@
 			text-align: right;
 		}
 	}
+
+	&.has-background {
+		padding: $block-bg-padding--v $block-bg-padding--h;
+	}
 }