Merge pull request #236 from WordPress/update/tt1-blocks-alignments

Update TT1 Blocks to use Gutenberg alignments
WordPress · Mar 25, 2021 · c234d5d · c234d5d
2 parents 95e33c5 + 28f2782
commit c234d5d
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 155 deletions.
diff --git a/tt1-blocks/assets/css/blocks.css b/tt1-blocks/assets/css/blocks.css
@@ -184,23 +184,6 @@ hr[style*="text-align: right"],
 	border-right-color: var(--wp--preset--color--dark-gray);
 }
 
-hr:not(.is-style-wide):not(.is-style-dots),
-.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-	max-width: var(--wp--custom--responsive--aligndefault-width);
-}
-
-.wp-block[data-align="wide"] .wp-block-separator:not(.is-style-wide):not(.is-style-dots),
-hr.alignwide:not(.is-style-wide):not(.is-style-dots),
-.wp-block-separator.alignwide:not(.is-style-wide):not(.is-style-dots) {
-	max-width: 100%;
-}
-
-.wp-block[data-align="full"] .wp-block-separator:not(.is-style-wide):not(.is-style-dots),
-hr.alignfull:not(.is-style-wide):not(.is-style-dots),
-.wp-block-separator.alignfull:not(.is-style-wide):not(.is-style-dots) {
-	max-width: inherit;
-}
-
 hr.is-style-twentytwentyone-separator-thick,
 .wp-block-separator.is-style-twentytwentyone-separator-thick {
 	border-bottom-width: 3px;
@@ -210,10 +193,6 @@ hr.is-style-twentytwentyone-separator-thick,
 	border-bottom: none;
 }
 
-.wp-block-separator.is-style-dots.alignwide {
-	width: 100%;
-}
-
 .wp-block-separator.is-style-dots > hr {
 	display: none;
 }

diff --git a/tt1-blocks/assets/css/style-editor.css b/tt1-blocks/assets/css/style-editor.css
diff --git a/tt1-blocks/block-template-parts/footer.html b/tt1-blocks/block-template-parts/footer.html
@@ -41,4 +41,4 @@
 <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 -->
diff --git a/tt1-blocks/block-templates/404.html b/tt1-blocks/block-templates/404.html
@@ -1,31 +1,29 @@
-<!-- wp:template-part {"slug":"header","align":"full","tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main", "align":"full"} -->
-<main class="wp-block-group alignfull">
-	<div class="wp-block-group__inner-container">
-		<!-- wp:heading {"level":1,"align":"wide"} -->
-		<h1 class="alignwide">Nothing Here</h1>
-		<!-- /wp:heading -->
+<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
+<main class="wp-block-group">
+	<!-- wp:heading {"level":1,"align":"wide"} -->
+	<h1 class="alignwide">Nothing Here</h1>
+	<!-- /wp:heading -->
 
-		<!-- wp:separator {"align":"wide","className":"is-style-twentytwentyone-separator-thick"} -->
-		<hr class="wp-block-separator alignwide is-style-twentytwentyone-separator-thick"/>
-		<!-- /wp:separator -->
+	<!-- wp:separator {"align":"wide","className":"is-style-twentytwentyone-separator-thick"} -->
+	<hr class="wp-block-separator alignwide is-style-twentytwentyone-separator-thick"/>
+	<!-- /wp:separator -->
 
-		<!-- wp:spacer {"height":70} -->
-		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
+	<!-- wp:spacer {"height":70} -->
+	<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
 
-		<!-- wp:paragraph -->
-		<p>It looks like nothing was found at this location. Maybe try a search?</p>
-		<!-- /wp:paragraph -->
+	<!-- wp:paragraph -->
+	<p>It looks like nothing was found at this location. Maybe try a search?</p>
+	<!-- /wp:paragraph -->
 
-		<!-- wp:search {"label":"Search...","buttonText":"Search","buttonUseIcon":true} /-->
+	<!-- wp:search {"label":"Search...","buttonText":"Search","buttonUseIcon":true} /-->
 
-		<!-- wp:spacer {"height":70} -->
-		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
+	<!-- wp:spacer {"height":70} -->
+	<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
diff --git a/tt1-blocks/block-templates/index.html b/tt1-blocks/block-templates/index.html
@@ -1,16 +1,20 @@
-<!-- wp:template-part {"slug":"header","align":"full","tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main", "align":"full"} -->
-<main class="wp-block-group alignfull">
-	<div class="wp-block-group__inner-container">
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+	<!-- wp:query {"queryId":1,"query":{"perPage":"10","pages":"100","offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
+	<!-- wp:query-loop -->
 
-		<!-- wp:query {"queryId":1,"query":{"perPage":"10","pages":"100","offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
-
-		<!-- wp:query-loop -->
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
 		<!-- wp:post-title {"isLink":true} /-->
+	</div>
+	<!-- /wp:group -->
 
-		<!-- wp:post-content {"align":"full"} /-->
+	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
+	<!-- 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 -->
@@ -36,23 +40,23 @@
 		<!-- wp:spacer {"height":70} -->
 		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->
+	</div>
+	<!-- /wp:group -->
+	<!-- /wp:query-loop -->
 
-		<!-- /wp:query-loop -->
-
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
 		<!-- wp:query-pagination -->
-		<div class="wp-block-query-pagination">
-			<!-- wp:query-pagination-previous /-->
+		<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->
 
-			<!-- wp:query-pagination-numbers /-->
+		<!-- wp:query-pagination-numbers /-->
 
-			<!-- wp:query-pagination-next /-->
-		</div>
+		<!-- wp:query-pagination-next /--></div>
 		<!-- /wp:query-pagination -->
-
-		<!-- /wp:query -->
-
 	</div>
+	<!-- /wp:group -->
+	<!-- /wp:query -->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
diff --git a/tt1-blocks/block-templates/page-home.html b/tt1-blocks/block-templates/page-home.html
@@ -1,10 +1,9 @@
-<!-- wp:template-part {"slug":"header","align":"full","tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main", "align":"full"} -->
-<main class="wp-block-group alignfull">
-	<div class="wp-block-group__inner-container">
-		<!-- wp:post-content {"align":"full"} /-->
-	</div>
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
diff --git a/tt1-blocks/block-templates/page.html b/tt1-blocks/block-templates/page.html
@@ -1,8 +1,9 @@
-<!-- wp:template-part {"slug":"header","align":"full","tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main", "align":"full"} -->
-<main class="wp-block-group alignfull">
-	<div class="wp-block-group__inner-container">
+<!-- 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"} /-->
 
 		<!-- wp:separator {"align":"wide","className":"is-style-twentytwentyone-separator-thick"} -->
@@ -12,11 +13,17 @@
 		<!-- wp:spacer {"height":70} -->
 		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-		<!-- wp:post-content {"align":"full"} /-->
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
 		<!-- wp:post-comments /-->
 	</div>
+	<!-- /wp:group -->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
diff --git a/tt1-blocks/block-templates/single.html b/tt1-blocks/block-templates/single.html
@@ -1,8 +1,9 @@
-<!-- wp:template-part {"slug":"header","align":"full","tagName":"header","className":"site-header"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->
 
-<!-- wp:group {"tagName":"main", "align":"full"} -->
-<main class="wp-block-group alignfull">
-	<div class="wp-block-group__inner-container">
+<!-- wp:group {"tagName":"main"} -->
+<div class="wp-block-group">
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
 		<!-- wp:post-title {"level":1,"align":"wide"} /-->
 
 		<!-- wp:separator {"align":"wide","className":"is-style-twentytwentyone-separator-thick"} -->
@@ -12,9 +13,13 @@
 		<!-- wp:spacer {"height":70} -->
 		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->
+	</div>
+	<!-- /wp:group -->
 
-		<!-- wp:post-content {"align":"full"} /-->
+	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
+	<!-- 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 -->
@@ -40,9 +45,11 @@
 		<!-- wp:spacer {"height":70} -->
 		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->
+
 		<!-- wp:post-comments /-->
 	</div>
-</main>
+	<!-- /wp:group -->
+</div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->
diff --git a/tt1-blocks/experimental-theme.json b/tt1-blocks/experimental-theme.json
@@ -107,6 +107,10 @@
 					}
 				]
 			},
+			"layout": {
+				"contentSize": "610px",
+				"wideSize": "1240px"
+			},
 			"typography": {
 				"customLineHeight": true,
 				"fontSizes": [
@@ -180,10 +184,6 @@
 					"heading": 1.3,
 					"page-title": 1.1
 				},
-				"responsive": {
-					"aligndefault-width": "610px",
-					"alignwide-width": "1240px"
-				},
 				"spacing": {
 					"unit": "20px",
 					"horizontal": "25px",

diff --git a/tt1-blocks/functions.php b/tt1-blocks/functions.php
@@ -44,17 +44,13 @@ function tt1_blocks_setup() {
 		// Add support for Block Styles.
 		add_theme_support( 'wp-block-styles' );
 
-		// Add support for full and wide align images.
-		add_theme_support( 'align-wide' );
-
 		// Add support for editor styles.
 		add_theme_support( 'editor-styles' );
 
 		// Enqueue editor styles.
 		add_editor_style( array( 
 			'./assets/css/blocks.css',
-			'./assets/css/style-shared.css',
-			'./assets/css/style-editor.css', 
+			'./assets/css/style-shared.css'
 		) );
 
 		// Add support for responsive embedded content.

diff --git a/tt1-blocks/style.css b/tt1-blocks/style.css
@@ -31,51 +31,3 @@ TT1 Blocks is distributed under the terms of the GNU GPL.
 body {
 	margin: 0;
 }
-
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-
-* {
-	box-sizing: border-box;
-}
-
-.wp-site-blocks,
-.wp-block-template-part.alignfull {
-	padding: 0 var(--wp--custom--spacing--horizontal);
-}
-
-.wp-site-blocks * {
-	margin-left: auto;
-	margin-right: auto;
-}
-
-.wp-site-blocks *:not(.wp-block-post-content):not(.alignfull):not(.alignwide):not([class$="__inner-container"]):not(img) {
-	max-width: var(--wp--custom--responsive--aligndefault-width);
-}
-
-.wp-site-blocks .alignwide {
-	width: var(--wp--custom--responsive--alignwide-width);
-	max-width: 100%;
-}
-
-.aligncenter {
-	text-align: center;
-}
-
-.wp-site-blocks .alignleft {
-	float: left;
-	margin-right: 2em;
-	max-width: 360px;
-}
-
-.wp-site-blocks .alignright {
-	float: right;
-	margin-left: 2em;
-	max-width: 360px;
-}
-
-.wp-site-blocks .alignfull {
-	margin: 0 calc(0px - var(--wp--custom--spacing--horizontal));
-	width: calc(100% + (2 - var(--wp--custom--spacing--horizontal)));
-}