Merge pull request #1072 from Automattic/fix/fse-modern-business-content-alignment-in-post-content-block

Full Site Editing: Fix post content nested block alignment on modern business

modern-business/style-editor.css

@@ -797,6 +797,15 @@ blockquote {
   }
 }
 
+/** === Helper Functions === */
+/**
+ Given a string, $alignment, returns the nested FSE block selectors
+ required for Full Site Editing to look correct. If $alignment is given,
+ we use it to target wp-blocks with a matching data-align attribute.
+ If no alignment is given, we target the base wp-block class. In both
+ of these scenarios, we target top level blocks, and any top level blocks
+ inside one of the FSE template part blocks.
+ */
 /** === Editor Frame === */
 body {
   font-weight: 300;
@@ -807,7 +816,9 @@ body .wp-block[data-align="full"] {
 }
 
 @media only screen and (min-width: 600px) {
-  body .wp-block[data-align="full"] {
+  
+  body .wp-block[data-align="full"],
+  body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="full"] {
     width: calc( 100% + 90px);
     max-width: calc( 100% + 90px);
   }
@@ -818,39 +829,58 @@ body .wp-block[data-align="full"] {
     max-width: 80%;
     margin: 0 10%;
   }
-  body .wp-block[data-align="wide"] {
+  
+  body .wp-block[data-align="wide"],
+  body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="wide"] {
     width: 100%;
   }
-  body .wp-block[data-align="full"] {
+  
+  body .wp-block[data-align="full"],
+  body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="full"] {
     position: relative;
     left: calc( -12.5% - 14px);
     width: calc( 125% + 116px);
     max-width: calc( 125% + 115px);
   }
-  body .wp-block[data-align="right"] {
+  
+  body .wp-block[data-align="right"],
+  body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="right"] {
     max-width: 125%;
   }
 }
 
 /** === Content Width === */
-.wp-block {
+
+.wp-block,
+.wp-block[data-type="a8c/post-content"] .wp-block {
   width: calc(100vw - (2 * 1rem));
   max-width: 100%;
 }
 
 @media only screen and (min-width: 768px) {
-  .wp-block {
+  
+  .wp-block,
+  .wp-block[data-type="a8c/post-content"] .wp-block {
     width: calc(8 * (100vw / 12));
   }
 }
 
 @media only screen and (min-width: 1168px) {
-  .wp-block {
+  
+  .wp-block,
+  .wp-block[data-type="a8c/post-content"] .wp-block {
     width: calc(6 * (100vw / 12 ));
   }
 }
 
-.wp-block .wp-block {
+
+.wp-block .wp-block,
+.wp-block[data-type="a8c/post-content"] .wp-block .wp-block {
+  width: 100%;
+}
+
+/** === FSE Template Part Blocks === */
+.wp-block[data-type="a8c/post-content"] {
   width: 100%;
 }
 

modern-business/style-editor.scss

@@ -10,6 +10,27 @@ Modern Business Editor Styles
 @import "sass/navigation/menu-main-navigation";
 @import "sass/typography/headings";
 
+/** === Helper Functions === */
+
+/**
+ Given a string, $alignment, returns the nested FSE block selectors
+ required for Full Site Editing to look correct. If $alignment is given,
+ we use it to target wp-blocks with a matching data-align attribute.
+ If no alignment is given, we target the base wp-block class. In both
+ of these scenarios, we target top level blocks, and any top level blocks
+ inside one of the FSE template part blocks.
+ */
+@function get-block-selector($alignment) {
+	$main-block-selector: ".wp-block";
+	@if $alignment != "" {
+		$main-block-selector: ".wp-block[data-align=\"#{$alignment}\"]";
+	}
+
+	@return "
+	  #{$main-block-selector},
+	  .wp-block[data-type=\"a8c/post-content\"] #{$main-block-selector}";
+}
+
 /** === Editor Frame === */
 
 body {
@@ -21,7 +42,7 @@ body {
 
 	@include media(mobile) {
 
-		.wp-block[data-align="full"] {
+		#{get-block-selector("full")} {
 			width: calc( 100% + 90px );
 			max-width: calc( 100% + 90px );
 		}
@@ -34,18 +55,18 @@ body {
 			margin: 0 10%;
 		}
 
-		.wp-block[data-align="wide"] {
+		#{get-block-selector("wide")} {
 			width: 100%;
 		}
 
-		.wp-block[data-align="full"] {
+		#{get-block-selector("full")} {
 			position: relative;
 			left: calc( -12.5% - 14px );
 			width: calc( 125% + 116px );
 			max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
 		}
 
-		.wp-block[data-align="right"] {
+		#{get-block-selector("right")}  {
 			max-width: 125%;
 		}
 	}
@@ -53,7 +74,7 @@ body {
 
 /** === Content Width === */
 
-.wp-block {
+#{get-block-selector("")} {
 	width: calc(100vw - (2 * #{$size__spacing-unit}));
 	max-width: 100%;
 
@@ -71,6 +92,11 @@ body {
 	}
 }
 
+/** === FSE Template Part Blocks === */
+.wp-block[data-type="a8c/post-content"] {
+	width: 100%;
+}
+
 /** === Base Typography === */
 
 body {