feat: update post-content; adjust align left/right position (#280)

Automattic · Jul 19, 2024 · b1a5378 · b1a5378
1 parent 6e3da20
commit b1a5378
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 26 deletions.
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -141,27 +141,6 @@ ol {
 	}
 }
 
-.entry-content {
-	> :last-child:is(.alignfull):is(.has-background),
-	> :last-child:is(.alignfull):is(.wp-block-cover) {
-		margin-bottom: calc(-1 * var(--wp--preset--spacing--80)) !important;
-	}
-}
-
-.page-template-no-title,
-.home.page {
-	.entry-content {
-		> :first-child:is(.alignfull):is(.has-background),
-		> :first-child:is(.alignfull):is(.wp-block-cover) {
-			margin-top: calc(-1 * var(--wp--preset--spacing--50)) !important;
-
-			@include sass-utils.media(medium) {
-				margin-top: calc(-1 * var(--wp--preset--spacing--80)) !important;
-			}
-		}
-	}
-}
-
 .alignleft,
 .alignright {
 	margin-block-end: var(--wp--preset--spacing--50);
@@ -175,6 +154,7 @@ ol {
 	}
 }
 
+.is-layout-constrained,
 .is-layout-flow {
 	> .alignleft {
 		margin-inline-end: var(--wp--preset--spacing--50);

diff --git a/src/scss/blocks/_columns.scss b/src/scss/blocks/_columns.scss
@@ -128,6 +128,11 @@
 			.wp-block-post-content {
 				padding-left: 0;
 				padding-right: 0;
+
+				> .alignfull {
+					margin-left: 0;
+					margin-right: 0;
+				}
 			}
 		}
 

diff --git a/src/scss/blocks/_post-content.scss b/src/scss/blocks/_post-content.scss
@@ -1,8 +1,39 @@
+@use '../sass-utils';
+
 .wp-block-post-content {
+	.has-global-padding > &.alignwide {
+		padding-left: 0;
+		padding-right: 0;
+
+		> .alignfull {
+			margin-left: calc(50% - 50vw);
+			margin-right: calc(50% - 50vw);
+		}
+	}
+
+	main:not(:has(.post-footer)) & {
+		> :last-child:is(.alignfull):is(.has-background),
+		> :last-child:is(.alignfull):is(.wp-block-cover) {
+			margin-bottom: calc(-1 * var(--wp--preset--spacing--80)) !important;
+		}
+	}
+
 	> .alignfull {
 		margin-left: calc(-1 * var(--wp--preset--spacing--30));
 		margin-right: calc(-1 * var(--wp--preset--spacing--30));
 		padding-left: var(--wp--preset--spacing--30);
 		padding-right: var(--wp--preset--spacing--30);
 	}
+
+	.page-template-no-title &,
+	.home.page & {
+		> :first-child:is(.alignfull):is(.has-background),
+		> :first-child:is(.alignfull):is(.wp-block-cover) {
+			margin-top: calc(-1 * var(--wp--preset--spacing--50)) !important;
+
+			@include sass-utils.media(medium) {
+				margin-top: calc(-1 * var(--wp--preset--spacing--80)) !important;
+			}
+		}
+	}
 }
diff --git a/templates/single.html b/templates/single.html
@@ -13,7 +13,7 @@
 
 	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Post Content"},"align":"full","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--80)">
-		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"full","layout":{"type":"constrained"}} /-->
+		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"wide","layout":{"type":"constrained"}} /-->
 	</div>
 	<!-- /wp:group -->
 

diff --git a/templates/single/50-50-image.html b/templates/single/50-50-image.html
@@ -21,7 +21,7 @@
 
 	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Post Content"},"align":"full","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--80)">
-		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"full","layout":{"type":"constrained"}} /-->
+		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"wide","layout":{"type":"constrained"}} /-->
 	</div>
 	<!-- /wp:group -->
 

diff --git a/templates/single/full-width-image.html b/templates/single/full-width-image.html
@@ -13,7 +13,7 @@
 
 	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Post Content"},"align":"full","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--80)">
-		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"full","layout":{"type":"constrained"}} /-->
+		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"wide","layout":{"type":"constrained"}} /-->
 	</div>
 	<!-- /wp:group -->
 

diff --git a/templates/single/large-image.html b/templates/single/large-image.html
@@ -13,7 +13,7 @@
 
 	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Post Content"},"align":"full","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--80)">
-		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"full","layout":{"type":"constrained"}} /-->
+		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"wide","layout":{"type":"constrained"}} /-->
 	</div>
 	<!-- /wp:group -->
 

diff --git a/templates/single/wide-image.html b/templates/single/wide-image.html
@@ -13,7 +13,7 @@
 
 	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Post Content"},"align":"full","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--80)">
-		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"full","layout":{"type":"constrained"}} /-->
+		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"wide","layout":{"type":"constrained"}} /-->
 	</div>
 	<!-- /wp:group -->