소스 검색

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 {