Fix alignment for FSE header and footer blocks

- Add a helper function which creates the selectors we need to target
   the various block levels within FSE blocks.
- Extend the previous commit to work with the a8c/template block
   just like we did wor the a8c/post-content block.
- Should allow us to disable alignment options for template part blocks.

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-type="a8c/template"] .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);
@@ -819,50 +830,65 @@ body .wp-block[data-align="full"] {
     max-width: 80%;
     margin: 0 10%;
   }
+  
   body .wp-block[data-align="wide"],
+  body .wp-block[data-type="a8c/template"] .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-type="a8c/template"] .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-type="a8c/template"] .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[data-type="a8c/template"] .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[data-type="a8c/template"] .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[data-type="a8c/template"] .wp-block,
   .wp-block[data-type="a8c/post-content"] .wp-block {
     width: calc(6 * (100vw / 12 ));
   }
 }
 
+
 .wp-block .wp-block,
+.wp-block[data-type="a8c/template"] .wp-block .wp-block,
 .wp-block[data-type="a8c/post-content"] .wp-block .wp-block {
   width: 100%;
 }
 
-/** === FSE Post Content Block Override === */
+/** === FSE Template Part Blocks === */
+.wp-block[data-type="a8c/template"],
 .wp-block[data-type="a8c/post-content"] {
   width: 100%;
 }

modern-business/style-editor.scss

@@ -10,6 +10,28 @@ 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/template\"] #{$main-block-selector},
+	  .wp-block[data-type=\"a8c/post-content\"] #{$main-block-selector}";
+}
+
 /** === Editor Frame === */
 
 body {
@@ -21,8 +43,7 @@ body {
 
 	@include media(mobile) {
 
-		.wp-block[data-align="full"],
-		.wp-block[data-type="a8c/post-content"] .wp-block[data-align="full"] {
+		#{get-block-selector("full")} {
 			width: calc( 100% + 90px );
 			max-width: calc( 100% + 90px );
 		}
@@ -35,21 +56,18 @@ body {
 			margin: 0 10%;
 		}
 
-		.wp-block[data-align="wide"],
-		.wp-block[data-type="a8c/post-content"] .wp-block[data-align="wide"] {
+		#{get-block-selector("wide")} {
 			width: 100%;
 		}
 
-		.wp-block[data-align="full"],
-		.wp-block[data-type="a8c/post-content"] .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"],
-		.wp-block[data-type="a8c/post-content"] .wp-block[data-align="right"] {
+		#{get-block-selector("right")}  {
 			max-width: 125%;
 		}
 	}
@@ -57,8 +75,7 @@ body {
 
 /** === Content Width === */
 
-.wp-block,
-.wp-block[data-type="a8c/post-content"] .wp-block {
+#{get-block-selector("")} {
 	width: calc(100vw - (2 * #{$size__spacing-unit}));
 	max-width: 100%;
 
@@ -76,7 +93,8 @@ body {
 	}
 }
 
-/** === FSE Post Content Block Override === */
+/** === FSE Template Part Blocks === */
+.wp-block[data-type="a8c/template"],
 .wp-block[data-type="a8c/post-content"] {
 	width: 100%;
 }