Varia: Fix quote font in editor and colour of citation

varia/sass/blocks/quote/_editor.scss

@@ -4,20 +4,22 @@
 	padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 
 	p {
+		font-family: #{map-deep-get($config-quote, "font", "family")};
 		font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h4")) + 0em);
 		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h4")};
 		line-height: #{map-deep-get($config-global, "font", "line-height", "h4")};
 	}
 
-    &.is-large,
-    &.is-style-large {
+	&.is-large,
+	&.is-style-large {
 		border: none;
 		padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")};
 
 		p {
+			font-family: #{map-deep-get($config-quote, "font", "family")};
 			font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h3")) + 0em);
 			letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h3")};
 			line-height: #{map-deep-get($config-heading, "font", "line-height", "h3")};
 		}
 	}
-}
+}

varia/sass/blocks/quote/_style.scss

@@ -30,6 +30,10 @@
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 		letter-spacing: #{map-deep-get($config-global, "font", "letter-spacing", "sm")};
+
+		.has-background & {
+			color: currentColor;
+		}
 	}
 
 	/**

varia/sass/blocks/utilities/_editor.scss

@@ -53,7 +53,9 @@
 .has-primary-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -61,7 +63,9 @@
 .has-secondary-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -69,7 +73,9 @@
 .has-foreground-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -77,7 +83,9 @@
 .has-foreground-light-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -85,7 +93,9 @@
 .has-foreground-dark-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -93,7 +103,9 @@
 .has-background-light-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -101,7 +113,9 @@
 .has-background-dark-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }
@@ -109,7 +123,9 @@
 .has-background-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	p, h1, h2, h3, h4, h5, h6 {
+
+	p, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
 		color: currentColor;
 	}
 }

varia/style-editor.css

@@ -489,6 +489,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote p {
+	font-family: sans-serif;
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -499,6 +500,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
+	font-family: sans-serif;
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -593,7 +595,8 @@ table th,
 	color: white;
 }
 
-.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
+.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
+.has-primary-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -602,7 +605,8 @@ table th,
 	color: white;
 }
 
-.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
+.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
+.has-secondary-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -611,7 +615,8 @@ table th,
 	color: white;
 }
 
-.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
+.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
+.has-foreground-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -620,7 +625,8 @@ table th,
 	color: white;
 }
 
-.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
+.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
+.has-foreground-light-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -629,7 +635,8 @@ table th,
 	color: white;
 }
 
-.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
+.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
+.has-foreground-dark-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -638,7 +645,8 @@ table th,
 	color: #444444;
 }
 
-.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
+.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
+.has-background-light-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -647,7 +655,8 @@ table th,
 	color: #444444;
 }
 
-.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
+.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
+.has-background-dark-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 
@@ -656,7 +665,8 @@ table th,
 	color: #444444;
 }
 
-.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
+.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
+.has-background-background-color[class] .wp-block-quote__citation {
 	color: currentColor;
 }
 

varia/style-rtl.css

@@ -1753,6 +1753,12 @@ p.has-background:not(.has-background-background-color) a {
 	letter-spacing: normal;
 }
 
+.has-background .wp-block-quote .wp-block-quote__citation, .has-background
+.wp-block-quote cite, .has-background
+.wp-block-quote footer {
+	color: currentColor;
+}
+
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
 	border-left-color: blue;
 }

varia/style.css

@@ -1753,6 +1753,12 @@ p.has-background:not(.has-background-background-color) a {
 	letter-spacing: normal;
 }
 
+.has-background .wp-block-quote .wp-block-quote__citation, .has-background
+.wp-block-quote cite, .has-background
+.wp-block-quote footer {
+	color: currentColor;
+}
+
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
 	border-right-color: blue;
 }