Merge pull request #2109 from Automattic/fix/alignwide-full-nested-multiple-themes

Multiple Themes: Fix nested wide/full blocks

apostrophe-2/css/blocks.css

@@ -62,7 +62,8 @@ body {
 	overflow-x: hidden;
 }
 
-.apostrophe-2-no-sidebar .alignfull {
+.apostrophe-2-no-sidebar .alignfull,
+.apostrophe-2-no-sidebar .wp-block-group .alignfull {
 	width: 100vw;
 	max-width: 100vw;
 	margin-left: 0;
@@ -72,7 +73,8 @@ body {
 	transform: translateX( -50% );
 }
 
-.rtl.apostrophe-2-no-sidebar .alignfull {
+.rtl.apostrophe-2-no-sidebar .alignfull,
+.rtl.apostrophe-2-no-sidebar .wp-block-group .alignfull {
 	left: auto;
 	right: 50%;
 	transform: translateX(50%);
@@ -112,7 +114,8 @@ body {
 /* Wide Width */
 
 @media (min-width: 1024px) {
-	.apostrophe-2-no-sidebar .alignwide {
+	.apostrophe-2-no-sidebar .alignwide,
+	.apostrophe-2-no-sidebar .wp-block-group .alignwide {
 		width: 860px;
 		max-width: 860px;
 		margin-left: -65px;
@@ -136,6 +139,20 @@ body {
 	}
 }
 
+/* Nested Blocks */
+
+.apostrophe-2-no-sidebar *[class^="wp-block"] .alignwide,
+.apostrophe-2-no-sidebar *[class^="wp-block"] .alignfull,
+.rtl.apostrophe-2-no-sidebar *[class^="wp-block"] .alignwide,
+.rtl.apostrophe-2-no-sidebar *[class^="wp-block"] .alignfull {
+	width: inherit;
+	max-width: 100%;
+	margin-left: inherit;
+	margin-right: inherit;
+	left: inherit;
+	transform: inherit;
+}
+
 /* Gallery */
 
 .wp-block-gallery {

independent-publisher-2/css/blocks.css

@@ -30,7 +30,8 @@ Description: Used to style Gutenberg Blocks.
 }
 
 @media (min-width: 1140px) {
-	body:not(.has-sidebar) .alignwide {
+	body:not(.has-sidebar) .alignwide,
+	body:not(.has-sidebar) .wp-block-group.alignfull .alignwide {
 		margin-left: -25%;
 		margin-right: -25%;
 		max-width: 1000%;
@@ -38,7 +39,8 @@ Description: Used to style Gutenberg Blocks.
 	}
 }
 
-body:not(.has-sidebar) .alignfull {
+body:not(.has-sidebar) .alignfull,
+body:not(.has-sidebar) .wp-block-group.alignfull .alignfull {
 	margin-left: calc(50% - 50vw);
 	margin-right: calc(50% - 50vw);
 	max-width: 1000%;
@@ -65,6 +67,13 @@ body:not(.has-sidebar) .wp-block-latest-posts.alignfull {
 	height: 100% !important;
 }
 
+body:not(.has-sidebar) *[class^="wp-block"] .alignwide,
+body:not(.has-sidebar) *[class^="wp-block"] .alignfull {
+	max-width: inherit;
+	margin-left: inherit;
+	margin-right: inherit;
+}
+
 /*--------------------------------------------------------------
 2.0 General Block Styles
 --------------------------------------------------------------*/

ixion/blocks.css

@@ -26,7 +26,8 @@ Description: Used to style Gutenberg Blocks.
 
 /* Full Width */
 
-.no-sidebar .alignfull {
+.no-sidebar .alignfull,
+.no-sidebar .wp-block-group .alignfull {
 	position: relative;
 	min-width: 100vw;
 	margin-left: 50%;
@@ -57,7 +58,8 @@ Description: Used to style Gutenberg Blocks.
 /* Wide Width */
 
 @media (min-width: 1024px) {
-	.no-sidebar .alignwide {
+	.no-sidebar .alignwide,
+	.no-sidebar .wp-block-group .alignwide {
 		width: 120%;
 		max-width: 120%;
 		margin-left: -10%;
@@ -71,6 +73,18 @@ Description: Used to style Gutenberg Blocks.
 	}
 }
 
+/* Nested Blocks */
+
+.no-sidebar *[class^="wp-block"] .alignwide,
+.no-sidebar *[class^="wp-block"] .alignfull {
+	min-width: inherit;
+	max-width: inherit;
+	margin-left: inherit;
+	margin-right: inherit;
+	left: initial;
+	transform: none;
+}
+
 /* Captions */
 
 [class^="wp-block-"] figcaption {

libre-2/css/blocks.css

@@ -29,7 +29,8 @@ Description: Used to style Gutenberg Blocks.
 }
 
 @media (min-width: 1140px) {
-	.singular.no-sidebar .alignwide {
+	.singular.no-sidebar .alignwide,
+	.singular.no-sidebar .wp-block-group .alignwide {
 		margin-left: -25%;
 		margin-right: -25%;
 		max-width: 1000%;
@@ -42,7 +43,8 @@ Description: Used to style Gutenberg Blocks.
 	}
 }
 
-.singular.no-sidebar .alignfull {
+.singular.no-sidebar .alignfull,
+.singular.no-sidebar .wp-block-group .alignfull {
 	margin-left: calc(50% - 50vw);
 	margin-right: calc(50% - 50vw);
 	max-width: 1000%;
@@ -69,6 +71,13 @@ Description: Used to style Gutenberg Blocks.
 	height: 100% !important;
 }
 
+.singular.no-sidebar *[class^="wp-block"] .alignwide,
+.singular.no-sidebar *[class^="wp-block"] .alignfull {
+	max-width: inherit;
+	margin-left: inherit;
+	margin-right: inherit;
+}
+
 /*--------------------------------------------------------------
 2.0 General Block Styles
 --------------------------------------------------------------*/

radcliffe-2/assets/css/blocks.css

@@ -52,7 +52,8 @@ p.alignfull {
 }
 
 @media (min-width: 1160px) {
-	.alignwide {
+	.alignwide,
+	.wp-block-group.alignfull .alignwide {
 		margin-left: -25%;
 		margin-right: -25%;
 		width: auto;
@@ -61,7 +62,8 @@ p.alignfull {
 }
 
 @media (min-width: 750px) {
-	.alignfull {
+	.alignfull,
+	.wp-block-group.alignfull .alignfull {
 		margin-left: calc(50% - 50vw);
 		margin-right: calc(50% - 50vw);
 		width: auto;
@@ -92,12 +94,21 @@ p.alignfull {
 	}
 }
 
+/* Nested Blocks */
+
 .alignfull > *,
 .alignwide > * {
 	margin-left: auto;
 	margin-right: auto;
 }
 
+*[class^="wp-block"] .alignwide,
+*[class^="wp-block"] .alignfull {
+	max-width: 100%;
+	margin-left: inherit;
+	margin-right: inherit;
+}
+
 .alignfull img,
 .alignwide img,
 .alignfull iframe,