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

Props scruffian, desrosj, poena.
See #53398.



git-svn-id: https://develop.svn.wordpress.org/trunk@51233 602fd350-edb4-49c9-b593-d223f7449a82

src/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;

src/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;
 

src/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;

src/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";

src/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";

src/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);
+		}
+	}
+}

src/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);
+		}
+	}
+}

src/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;
 

src/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;