Twenty Twenty-One: Add spacing around Query block when there is a background color.

Props scruffian, desrosj, poena.
See #53398.


Built from https://develop.svn.wordpress.org/trunk@51233


git-svn-id: http://core.svn.wordpress.org/trunk@50842 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -1914,6 +1914,16 @@ pre.wp-block-preformatted {
 	padding: 20px;
 }
 
+.wp-block-query.has-background {
+	padding: 20px;
+}
+@media only screen and (min-width: 482px) {
+
+	.wp-block-query.has-background {
+		padding: 30px;
+	}
+}
+
 .wp-block-quote {
 	position: relative;
 	border-left: none;

wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -4235,6 +4235,16 @@ pre.wp-block-preformatted {
 	max-width: initial;
 }
 
+.wp-block-query.has-background {
+	padding: 20px;
+}
+@media only screen and (min-width: 482px) {
+
+	.wp-block-query.has-background {
+		padding: 30px;
+	}
+}
+
 .wp-block-quote {
 	border-left: none;
 

wp-content/themes/twentytwentyone/assets/css/style-editor.css

@@ -1536,6 +1536,16 @@ pre.wp-block-preformatted {
 	padding: var(--global--spacing-unit);
 }
 
+.wp-block-query.has-background {
+	padding: calc(0.666 * var(--global--spacing-vertical));
+}
+@media only screen and (min-width: 482px) {
+
+	.wp-block-query.has-background {
+		padding: var(--global--spacing-vertical);
+	}
+}
+
 .wp-block-quote {
 	position: relative;
 	border-left: none;

wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks-editor.scss

@@ -23,6 +23,7 @@
 @import "paragraph/editor";
 @import "preformatted/editor";
 @import "pullquote/editor";
+@import "query-loop/editor";
 @import "quote/editor";
 @import "rss/editor";
 @import "search/editor";

wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks.scss

@@ -23,6 +23,7 @@
 @import "paragraph/style";
 @import "preformatted/style";
 @import "pullquote/style";
+@import "query-loop/style";
 @import "quote/style";
 @import "rss/style";
 @import "search/style";

wp-content/themes/twentytwentyone/assets/sass/05-blocks/query-loop/_editor.scss

@@ -0,0 +1,10 @@
+.wp-block-query {
+
+	&.has-background {
+		padding: calc(0.666 * var(--global--spacing-vertical));
+
+		@include media(mobile) {
+			padding: var(--global--spacing-vertical);
+		}
+	}
+}

wp-content/themes/twentytwentyone/assets/sass/05-blocks/query-loop/_style.scss

@@ -0,0 +1,10 @@
+.wp-block-query {
+
+	&.has-background {
+		padding: calc(0.666 * var(--global--spacing-vertical));
+
+		@include media(mobile) {
+			padding: var(--global--spacing-vertical);
+		}
+	}
+}

wp-content/themes/twentytwentyone/style-rtl.css

@@ -3011,6 +3011,16 @@ pre.wp-block-preformatted {
 	max-width: initial;
 }
 
+.wp-block-query.has-background {
+	padding: calc(0.666 * var(--global--spacing-vertical));
+}
+@media only screen and (min-width: 482px) {
+
+	.wp-block-query.has-background {
+		padding: var(--global--spacing-vertical);
+	}
+}
+
 .wp-block-quote {
 	border-right: none;
 

wp-content/themes/twentytwentyone/style.css

@@ -3021,6 +3021,16 @@ pre.wp-block-preformatted {
 	max-width: initial;
 }
 
+.wp-block-query.has-background {
+	padding: calc(0.666 * var(--global--spacing-vertical));
+}
+@media only screen and (min-width: 482px) {
+
+	.wp-block-query.has-background {
+		padding: var(--global--spacing-vertical);
+	}
+}
+
 .wp-block-quote {
 	border-left: none;
 

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-beta3-51232';
+$wp_version = '5.8-beta3-51233';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.