Selaa lähdekoodia

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 vuotta sitten
vanhempi
commit
b5df6835f1
2 muutettua tiedostoa jossa 36 lisäystä ja 13 poistoa
  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 {