Merge pull request #299 from WordPress/fix/tt1-layout

Fix TT1 Blocks layout issues
WordPress · Dec 17, 2021 · 5814997 · 5814997
2 parents 079234c + 0248eba
commit 5814997
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 20 deletions.
diff --git a/tt1-blocks/assets/css/style-shared.css b/tt1-blocks/assets/css/style-shared.css
@@ -29,4 +29,43 @@ a:hover {
  */
 .site-header h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
 	text-decoration: underline;
-}
+}
+
+/*
+ * 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,
+body > .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/tt1-blocks/block-template-parts/footer.html b/tt1-blocks/block-template-parts/footer.html
@@ -1,4 +1,5 @@
-<!-- wp:spacer {"height":70} -->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":70} -->
 <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
@@ -41,4 +42,5 @@
 <p class="has-text-align-right">Proudly powered by <a href="https://wordpress.org/">WordPress</a>.</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
-<!-- /wp:columns -->
+<!-- /wp:columns --></div>
+<!-- /wp:group -->
diff --git a/tt1-blocks/block-template-parts/header.html b/tt1-blocks/block-template-parts/header.html
@@ -1,4 +1,5 @@
-<!-- wp:spacer {"height":70} -->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":70} -->
 <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
@@ -11,11 +12,14 @@
 
 <!-- wp:column -->
 <div class="wp-block-column">
-<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} /-->
+<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+<!-- /wp:navigation -->
 </div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 
 <!-- wp:spacer {"height":70} -->
 <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
+<!-- /wp:spacer --></div>
+<!-- /wp:group -->
diff --git a/tt1-blocks/block-templates/404.html b/tt1-blocks/block-templates/404.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
 
 <!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-group">
@@ -26,4 +26,4 @@ <h1 class="alignwide">Nothing Here</h1>
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/tt1-blocks/block-templates/index.html b/tt1-blocks/block-templates/index.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
@@ -9,11 +9,10 @@
 		<!-- wp:group {"layout":{"inherit":true}} -->
 		<div class="wp-block-group">
 			<!-- wp:post-title {"isLink":true} /-->
+			<!-- wp:post-excerpt /-->
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:post-content {"layout":{"inherit":true}} /-->
-
 		<!-- wp:group {"layout":{"inherit":true}} -->
 		<div class="wp-block-group">
 			<!-- wp:spacer {"height":70} -->
@@ -61,4 +60,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/tt1-blocks/block-templates/page-home.html b/tt1-blocks/block-templates/page-home.html
@@ -1,9 +1,9 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/tt1-blocks/block-templates/page.html b/tt1-blocks/block-templates/page.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
@@ -26,4 +26,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/tt1-blocks/block-templates/single.html b/tt1-blocks/block-templates/single.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <div class="wp-block-group">
@@ -52,4 +52,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/tt1-blocks/readme.txt b/tt1-blocks/readme.txt
@@ -25,7 +25,7 @@ This theme is beta software, and is not meant for use on a production site. Bug
 
 == Changelog ==
 = 0.4.8 =
-* Change query-loop to post-template
+* Update for compatibility with Gutenberg v12.1
 
 = 0.4.7 =
 * Updates to theme.json

diff --git a/tt1-blocks/theme.json b/tt1-blocks/theme.json
@@ -201,7 +201,8 @@
 			"spacing": {
 				"unit": "20px",
 				"horizontal": "25px",
-				"vertical": "30px"
+				"vertical": "30px",
+				"outer": "calc(0.6 * var(--wp--custom--spacing--horizontal))"
 			},
 			"font-weight":{
 				"light": "300",