Explorar o código

Fix post content nested block alignment for FSE

- Make the post content block 100% width. As a result, the post content
   block takes up the same area that the post editor container takes up
   without the post content block.
- Allow nested blocks inside the post content block to maintain the
   default alignment styles for top level blocks. Previously, they were
   targeted as 2nd level blocks, thus making the alignment incorrect.
Noah Allen %!s(int64=6) %!d(string=hai) anos
pai
achega
b5df6835f1
Modificáronse 2 ficheiros con 36 adicións e 13 borrados
  1. 21 8
      modern-business/style-editor.css
  2. 15 5
      modern-business/style-editor.scss

+ 21 - 8
modern-business/style-editor.css

@@ -807,7 +807,8 @@ 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 +819,51 @@ 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 Post Content Block Override === */
+.wp-block[data-type="a8c/post-content"] {
   width: 100%;
 }
 

+ 15 - 5
modern-business/style-editor.scss

@@ -21,7 +21,8 @@ body {
 
 	@include media(mobile) {
 
-		.wp-block[data-align="full"] {
+		.wp-block[data-align="full"],
+		.wp-block[data-type="a8c/post-content"] .wp-block[data-align="full"] {
 			width: calc( 100% + 90px );
 			max-width: calc( 100% + 90px );
 		}
@@ -34,18 +35,21 @@ body {
 			margin: 0 10%;
 		}
 
-		.wp-block[data-align="wide"] {
+		.wp-block[data-align="wide"],
+		.wp-block[data-type="a8c/post-content"] .wp-block[data-align="wide"] {
 			width: 100%;
 		}
 
-		.wp-block[data-align="full"] {
+		.wp-block[data-align="full"],
+		.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 ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
 		}
 
-		.wp-block[data-align="right"] {
+		.wp-block[data-align="right"],
+		.wp-block[data-type="a8c/post-content"] .wp-block[data-align="right"] {
 			max-width: 125%;
 		}
 	}
@@ -53,7 +57,8 @@ body {
 
 /** === Content Width === */
 
-.wp-block {
+.wp-block,
+.wp-block[data-type="a8c/post-content"] .wp-block {
 	width: calc(100vw - (2 * #{$size__spacing-unit}));
 	max-width: 100%;
 
@@ -71,6 +76,11 @@ body {
 	}
 }
 
+/** === FSE Post Content Block Override === */
+.wp-block[data-type="a8c/post-content"] {
+	width: 100%;
+}
+
 /** === Base Typography === */
 
 body {