Varia: Add support for improved latest-posts block for Gutenberg 6.3

- Also improves utility classes for text colors on has-background and nested blocks

varia/sass/blocks/latest-posts/_editor.scss

@@ -1,3 +1,42 @@
 .wp-block-latest-posts {
 	padding-left: 0;
-}
+
+	& > li > a {
+		font-family: #{map-deep-get($config-heading, "font", "family")};
+		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
+		font-weight: #{map-deep-get($config-heading, "font", "weight")};
+		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};
+	}
+
+	&:not(.is-grid) > li {
+		/* Vertical margins logic */
+		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.wp-block-latest-posts__post-date {
+		color: #{map-deep-get($config-global, "color", "foreground", "light")};
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+		line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
+
+		[class*="inner-container"] &,
+		.has-background & {
+			color: currentColor;
+		}
+	}
+
+	.wp-block-latest-posts__post-excerpt,
+	.wp-block-latest-posts__post-full-content {
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+		line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
+		margin: 0;
+	}
+}

varia/sass/blocks/latest-posts/_style.scss

@@ -26,11 +26,22 @@
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};
 		font-size: #{map-deep-get($config-global, "font", "size", "xs")};
 		line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
+
+		.entry-content [class*="inner-container"] &,
+		.entry-content .has-background & {
+			color: currentColor;
+		}
 	}
 
-	.wp-block-latest-posts__post-excerpt {
+	.wp-block-latest-posts__post-excerpt,
+	.wp-block-latest-posts__post-full-content {
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 		line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
 		margin: 0;
 	}
+
+	&.alignfull {
+		padding-left: #{map-deep-get($config-global, "spacing", "unit")};
+		padding-right: #{map-deep-get($config-global, "spacing", "unit")};
+	}
 }

varia/sass/blocks/utilities/_editor.scss

@@ -48,86 +48,51 @@
 }
 
 // Gutenberg background-color options
-.has-background {}
+.has-background {
+	p, a, h1, h2, h3, h4, h5, h6,
+	.wp-block-quote__citation {
+		color: currentColor;
+	}
+}
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 .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,
-	.wp-block-quote__citation {
-		color: currentColor;
-	}
 }
 
 // Gutenberg Font-size utility classes

varia/sass/blocks/utilities/_style.scss

@@ -120,70 +120,50 @@
 }
 
 // Gutenberg background-color options
-.has-background {}
+.has-background {
+	p, a, h1, h2, h3, h4, h5, h6 {
+		color: currentColor;
+	}
+}
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 .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 {
-		color: currentColor;
-	}
 }
 
 // Gutenberg Font-size options

varia/style-editor.css

@@ -386,6 +386,45 @@ object {
 	padding-left: 0;
 }
 
+.wp-block-latest-posts > li > a {
+	font-family: sans-serif;
+	font-size: 1.728rem;
+	font-weight: bold;
+	line-height: 1.125;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li {
+	/* Vertical margins logic */
+	margin-top: 32px;
+	margin-bottom: 32px;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: #767676;
+	font-size: 0.83333rem;
+	line-height: 1.78;
+}
+
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
+	font-size: 0.83333rem;
+	line-height: 1.78;
+	margin: 0;
+}
+
 .wp-block-media-text .block-editor-inner-blocks {
 	padding-right: 16px;
 	padding-left: 16px;
@@ -594,86 +633,51 @@ table th,
 	color: white !important;
 }
 
+.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
+.has-background .wp-block-quote__citation {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: blue !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-secondary-background-color[class] {
 	background-color: red !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: white !important;
 	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] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333em;

varia/style-rtl.css

@@ -1490,12 +1490,23 @@ img {
 	line-height: 1.78;
 }
 
-.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
+.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
 
+.wp-block-latest-posts.alignfull {
+	padding-right: 16px;
+	padding-left: 16px;
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
@@ -2008,78 +2019,50 @@ table th,
 	color: white !important;
 }
 
+.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: blue !important;
 	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 {
-	color: currentColor;
-}
-
 .has-secondary-background-color[class] {
 	background-color: red !important;
 	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 {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
 	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 {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	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 {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	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 {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
 	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 {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
 	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 {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: white !important;
 	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 {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333rem;

varia/style.css

@@ -1490,12 +1490,23 @@ img {
 	line-height: 1.78;
 }
 
-.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
+.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
 
+.wp-block-latest-posts.alignfull {
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;
@@ -2014,78 +2025,50 @@ table th,
 	color: white !important;
 }
 
+.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: blue !important;
 	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 {
-	color: currentColor;
-}
-
 .has-secondary-background-color[class] {
 	background-color: red !important;
 	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 {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
 	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 {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	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 {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	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 {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
 	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 {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
 	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 {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: white !important;
 	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 {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333rem;