浏览代码

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 年之前
父节点
当前提交
b5df6835f1
共有 2 个文件被更改,包括 36 次插入13 次删除
  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 {