Browse Source

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 6 năm trước cách đây
mục cha
commit
b5df6835f1
2 tập tin đã thay đổi với 36 bổ sung13 xóa
  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 {