Try: add padding CSS rules instead of in the templates (#291)

* removed paddings from templates * padding rules and adjustments for home header * fix padding for full page pattern * add padding to the page title in the editor * target direct siblings full aligned * fixed syntax errors * undo change to only direct siblings * removed padding exceptions * reset margins for column exception * inherit margin in all column cases * Fix header template part. * Fix large dark header. * Update code comments. * Push fix for an edge case. * add rule for the editor * fix for horizontal scroll when we have nexted full aligned blocks * Add additional wrappers to the headers. * Remove unneeded wrapper so alignment works on mobile. * Remove unneeded wrappers and inherit: true attributes. * Override has-background Gutenberg CSS. * Add more warning/clarification in code comments. * Correct styles inside of full-with group blocks. * Fix header. * Tidy up code comments. * Use more specific selectors. * Revert "Use more specific selectors." This reverts commit c4a80d3. Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: Jeff Ong <[email protected]>
WordPress · Dec 14, 2021 · 88a8f2e · 88a8f2e
1 parent 1fc1d85
commit 88a8f2e
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 60 deletions.
diff --git a/inc/patterns/footer-default.php b/inc/patterns/footer-default.php
@@ -6,9 +6,8 @@
 	'title'      => __( 'Default footer', 'twentytwentytwo' ),
 	'categories' => array( 'footer' ),
 	'blockTypes' => array( 'core/template-part/footer' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:site-title {"level":0} /-->
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:site-title /-->
 
 					<!-- wp:paragraph {"align":"right"} -->
 					<p class="has-text-align-right">' .
@@ -18,6 +17,5 @@
 						'<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a>'
 					) . '</p>
 					<!-- /wp:paragraph --></div>
-					<!-- /wp:group --></div>
 					<!-- /wp:group -->',
 );
diff --git a/inc/patterns/page-layout-image-text-and-video.php b/inc/patterns/page-layout-image-text-and-video.php
@@ -6,8 +6,8 @@
 	'title'      => __( 'Page layout with image, text and video', 'twentytwentytwo' ),
 	'categories' => array( 'pages' ),
 	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"8rem","bottom":"8rem","left":"0px","right":"0px"}}},"backgroundColor":"primary","textColor":"background"} -->
-					<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background" style="padding-top:8rem;padding-bottom:8rem;padding-left:0px;padding-right:0px"><!-- wp:group {"align":"full","layout":{"inherit":true},"style":{"spacing":{"padding":{"left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}}} -->
-					<div class="wp-block-group alignfull" style="padding-left:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw)"><!-- wp:heading {"level":1,"align":"wide","style":{"typography":{"fontSize":"clamp(3rem, 6vw, 4.5rem)"}}} -->
+					<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background" style="padding-top:8rem;padding-bottom:8rem;padding-left:0px;padding-right:0px"><!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}}} -->
+					<div class="wp-block-group" style="padding-left:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw)"><!-- wp:heading {"level":1,"align":"wide","style":{"typography":{"fontSize":"clamp(3rem, 6vw, 4.5rem)"}}} -->
 					<h1 class="alignwide" style="font-size:clamp(3rem, 6vw, 4.5rem)">' . wp_kses_post( __( '<em>Warble</em>, a film about <br>hobbyist bird watchers.', 'twentytwentytwo' ) ) . '</h1>
 					<!-- /wp:heading -->
 					

diff --git a/parts/footer.html b/parts/footer.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--large, 8rem)","right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--custom--spacing--large, 8rem);padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--large, 8rem)"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--custom--spacing--large, 8rem)">
 <!-- wp:pattern {"slug":"twentytwentytwo/footer-default"} /-->
 </div>
 <!-- /wp:group -->
diff --git a/parts/header-large-dark.html b/parts/header-large-dark.html
@@ -1,5 +1,7 @@
-<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","bottom":"var(--wp--custom--spacing--large, 8rem)","right":"0px","left":"0px"},"margin":{"bottom":"var(--wp--custom--spacing--large, 8rem)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
-<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="margin-bottom:var(--wp--custom--spacing--large, 8rem);padding-top:0px;padding-right:0px;padding-bottom:var(--wp--custom--spacing--large, 8rem);padding-left:0px"><!-- wp:template-part {"slug":"header","tagName":"header","align":"full"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"bottom":"var(--wp--custom--spacing--large, 8rem)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
+<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="margin-bottom:var(--wp--custom--spacing--large, 8rem);padding-top:0px;padding-bottom:0px"><!-- wp:template-part {"slug":"header","tagName":"header","align":"wide"} /-->
 
 <!-- wp:pattern {"slug":"twentytwentytwo/hidden-heading-and-bird"} /--></div>
+<!-- /wp:group --></div>
 <!-- /wp:group -->
diff --git a/parts/header-small-dark.html b/parts/header-small-dark.html
@@ -1,5 +1,7 @@
-<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","bottom":"0px","right":"0px","left":"0px"},"margin":{"bottom":"var(--wp--custom--spacing--large, 8rem)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
-<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="margin-bottom:var(--wp--custom--spacing--large, 8rem);padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:template-part {"slug":"header","tagName":"header","align":"full"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"bottom":"var(--wp--custom--spacing--large, 8rem)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
+<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="margin-bottom:var(--wp--custom--spacing--large, 8rem);padding-top:0px;padding-bottom:0px"><!-- wp:template-part {"slug":"header","tagName":"header","align":"wide"} /-->
 
 <!-- wp:pattern {"slug":"twentytwentytwo/hidden-bird"} /--></div>
+<!-- /wp:group --></div>
 <!-- /wp:group -->
diff --git a/parts/header.html b/parts/header.html
@@ -1,15 +1,13 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
-	<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--large, 8rem)","top":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--large, 8rem)"><!-- wp:group {"layout":{"type":"flex"}} -->
-	<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--large, 8rem)","top":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--large, 8rem)"><!-- wp:group {"layout":{"type":"flex"}} -->
+<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
 
-	<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
-	<!-- /wp:group -->
-
-	<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
-	<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
-	<!-- /wp:navigation --></div>
-	<!-- /wp:group -->
-</div>
+<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
 <!-- /wp:group -->
+
+<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
diff --git a/style.css b/style.css
@@ -82,3 +82,42 @@ a:active {
 .wp-block-button__link:hover {
 	opacity: 0.90;
 } 
+
+/*
+ * Alignment styles.
+ * These rules are temporary, and should not be relied on or 
+ * modified too heavily by themes or plugins that build on 
+ * Twenty Twenty-Two. These are meant to be a precursor to 
+ * a global solution provided by the Block Editor. 
+ * 
+ * Relevant issues:
+ * https://github.com/WordPress/gutenberg/issues/35607
+ * https://github.com/WordPress/gutenberg/issues/35884
+ */
+
+.wp-site-blocks,
+.is-root-container,
+.edit-post-visual-editor__post-title-wrapper,
+.wp-block-group.alignfull,
+.is-root-container .wp-block[data-align="full"] > .wp-block-group {
+	padding-left: var(--wp--custom--spacing--outer);
+	padding-right: var(--wp--custom--spacing--outer);
+}
+
+.wp-site-blocks .alignfull,
+.is-root-container .wp-block[data-align="full"] {
+	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	width: unset;
+}
+
+/* Blocks inside columns don't have negative margins. */
+.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
+.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
+/* We also want to avoid stacking negative margins. */
+.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
+.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
+	margin-left: auto !important;
+	margin-right: auto !important;
+	width: inherit;
+}
diff --git a/templates/404.html b/templates/404.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group">
 <!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} /-->
 </div>

diff --git a/templates/archive.html b/templates/archive.html
@@ -1,24 +1,19 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
-
 <!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group"><!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)"},"spacing":{"margin":{"bottom":"6rem"}}}} /--></div>
-<!-- /wp:group -->
+<div class="wp-block-group"><!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)"},"spacing":{"margin":{"bottom":"6rem"}}}} /-->
 
-<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"inherit":true},"tagName":"main"} -->
-<main class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}},"fontSize":"huge"} /-->
+<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","align":"wide","layout":{"inherit":false}} -->
+<main class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
+<!-- wp:post-title {"isLink":true,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}},"fontSize":"huge"} /-->
 
 <!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"calc(1.75 * var(--wp--style--block-gap))"}}}} /-->
 
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"width":"650px"} -->
 <div class="wp-block-column" style="flex-basis:650px"><!-- wp:post-excerpt /-->
 
-<!-- wp:post-date {"isLink":true,"format":"F j, Y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
+<!-- wp:post-date {"format":"F j, Y","isLink":true,"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"width":""} -->
@@ -28,8 +23,7 @@
 
 <!-- wp:spacer {"height":112} -->
 <div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer --></div>
-<!-- /wp:group -->
+<!-- /wp:spacer -->
 <!-- /wp:post-template -->
 
 <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->

diff --git a/templates/home.html b/templates/home.html
@@ -1,8 +1,5 @@
 <!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
-
 <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"inherit":true},"tagName":"main"} -->
 <main class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
 <!-- wp:group {"layout":{"inherit":true}} -->
@@ -35,7 +32,6 @@
 
 <!-- wp:query-pagination-next {"fontSize":"small"} /-->
 <!-- /wp:query-pagination --></main>
-<!-- /wp:query --></div>
-<!-- /wp:group -->
+<!-- /wp:query -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/index.html b/templates/index.html
@@ -1,8 +1,5 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
-
 <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"inherit":true},"tagName":"main"} -->
 <main class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
 <!-- wp:group {"layout":{"inherit":true}} -->
@@ -35,7 +32,6 @@
 
 <!-- wp:query-pagination-next {"fontSize":"small"} /-->
 <!-- /wp:query-pagination --></main>
-<!-- /wp:query --></div>
-<!-- /wp:group -->
+<!-- /wp:query -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/templates/page-large-header.html b/templates/page-large-header.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header-large-dark","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)">
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->

diff --git a/templates/page-no-separators.html b/templates/page-no-separators.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
 
 <!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /--></div>

diff --git a/templates/page.html b/templates/page.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
 
 <!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->

diff --git a/templates/single-no-separators.html b/templates/single-no-separators.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
 
 <!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /--></div>

diff --git a/templates/single.html b/templates/single.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"var(--wp--custom--spacing--small, 1.25rem)","left":"var(--wp--custom--spacing--small, 1.25rem)"}}}} -->
-<main class="wp-block-group" style="padding-right:var(--wp--custom--spacing--small, 1.25rem);padding-left:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->
 
 <!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->