Block Canvas: small updates (#6705)

* Add semi-colon

* Remove blank template

* Tidy CSS formatting

* Move root padding to theme.json

* Add issue links

* Update header markup

* Update post-meta markup

* Update all layout settings

* Update footer credit text

* Remove index.php file

* Update comments markup

* Remove extra word from footer

* Update markup

* Hide avatar

* Remove layout setting from template part

* Remove _unstableLocation from nav

block-canvas/index.php

@@ -1,2 +0,0 @@
-<?php
-	# This page intentionally left blank

block-canvas/parts/header.html

@@ -1,19 +1,23 @@
-<!-- wp:group {"layout":{"inherit":"true"}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60","top":"var:preset|spacing|60","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"flex"}} -->
-	<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--40)">
+		<!-- wp:group {"layout":{"type":"flex"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"width":64} /-->
 	
-	<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
-	<div class="wp-block-group"><!-- wp:site-title /-->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
+			<div class="wp-block-group">
+				<!-- wp:site-title /-->
+				<!-- wp:site-tagline /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
 	
-	<!-- wp:site-tagline /--></div>
-	<!-- /wp:group --></div>
+		<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+	</div>
 	<!-- /wp:group -->
-	
-	<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
-	<!-- /wp:group -->
-
 </div>
 <!-- /wp:group -->
 

block-canvas/parts/post-meta.html

@@ -1,12 +1,12 @@
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 	<!-- wp:group {"layout":{"type":"flex"}} -->
 	<div class="wp-block-group">
-		<!-- wp:post-author-name {"isLink":true,"fontSize":"small"} /-->
+		<!-- wp:post-author {"showAvatar":false,"fontSize":"small"} /-->
 		<!-- wp:post-date {"isLink":true,"fontSize":"small"} /-->
 		<!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
 		<!-- wp:post-terms {"term": "post_tag","fontSize":"small"} /-->
 	</div>
 	<!-- /wp:group -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

block-canvas/patterns/comments.php

@@ -7,38 +7,46 @@
 
 ?>
 
-<!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-<div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:comments-title {"level":3} /-->
-
-<!-- wp:comment-template -->
-<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
-<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0.5em"}}} -->
-<div class="wp-block-group"><!-- wp:avatar {"size":40,"style":{"spacing":{"margin":{"top":"0.5em"}}}} /-->
-
-<!-- wp:group -->
-<div class="wp-block-group"><!-- wp:comment-author-name /-->
-
-<!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}}} -->
-<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-<!-- wp:comment-edit-link /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
-<!-- wp:comment-content /-->
-
-<!-- wp:comment-reply-link /--></div>
-<!-- /wp:group -->
-<!-- /wp:comment-template -->
-
-<!-- wp:comments-pagination -->
-<!-- wp:comments-pagination-previous /-->
-
-<!-- wp:comments-pagination-numbers /-->
-
-<!-- wp:comments-pagination-next /-->
-<!-- /wp:comments-pagination -->
-
-<!-- wp:post-comments-form /--></div>
-<!-- /wp:comments -->
+<!-- wp:comments {"className":"wp-block-comments-query-loop"} -->
+<div class="wp-block-comments wp-block-comments-query-loop">
+	<!-- wp:comments-title {"level":3} /-->
+
+	<!-- wp:comment-template -->
+		<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
+		<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0.5em"}}} -->
+			<div class="wp-block-group">
+				<!-- wp:avatar {"size":40,"style":{"spacing":{"margin":{"top":"0.5em"}}}} /-->
+
+				<!-- wp:group -->
+				<div class="wp-block-group">
+					<!-- wp:comment-author-name /-->
+
+					<!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}}} -->
+					<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
+						<!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
+
+						<!-- wp:comment-edit-link /-->
+					</div>
+					<!-- /wp:group -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:comment-content /-->
+
+			<!-- wp:comment-reply-link /-->
+		</div>
+		<!-- /wp:group -->
+	<!-- /wp:comment-template -->
+
+	<!-- wp:comments-pagination -->
+		<!-- wp:comments-pagination-previous /-->
+		<!-- wp:comments-pagination-numbers /-->
+		<!-- wp:comments-pagination-next /-->
+	<!-- /wp:comments-pagination -->
+
+	<!-- wp:post-comments-form /-->
+</div>
+<!-- /wp:comments -->

block-canvas/patterns/footer.php

@@ -11,7 +11,7 @@
 <div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--60)","bottom":"var(--wp--preset--spacing--60)"}}}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
@@ -21,7 +21,7 @@
                 /* Translators: WordPress link. */
                 $wordpress_link = '<a href="' . esc_url( __( 'https://wordpress.org', 'block-canvas' ) ) . '" rel="nofollow">WordPress</a>';
                 echo sprintf(
-                    esc_html__( 'Proudly Powered by %1$s', 'block-canvas' ),
+                    esc_html__( 'Designed with %1$s', 'block-canvas' ),
                     $wordpress_link
                 );
             ?>

block-canvas/style.css

@@ -25,36 +25,22 @@ This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
-
 */
 
 /*
  * Font smoothing
+ * https://github.com/WordPress/gutenberg/issues/35934
  */
-
- body {
+body {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
 
 /*
- * Responsive menu container padding.
- * This ensures the responsive container inherits the same
- * spacing defined above. This behavior may be built into
- * the Block Editor in the future.
+ * Control the hover stylings of outline block style.
+ * Unnecessary once block styles are configurable via theme.json
+ * https://github.com/WordPress/gutenberg/issues/42794
  */
-
-.wp-block-navigation__responsive-container.is-menu-open {
-	padding-top: var(--wp--preset--spacing--50);
-	padding-bottom: var(--wp--preset--spacing--50);
-	padding-right: var(--wp--preset--spacing--50);
-	padding-left: var(--wp--preset--spacing--50);
-}
-
-/*
-* Control the hover stylings of outline block style.
-* Unnecessary once block styles are configurable via theme.json
-*/
 .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
 	background-color: var(--wp--preset--color--secondary);
 	color: var(--wp--preset--color--background);
@@ -62,8 +48,10 @@ GNU General Public License for more details.
 }
 
 /**
- * Currently table styles are only available with 'wp-block-styles' theme support (block css) thus the following needs to be included
+ * Currently table styles are only available with 'wp-block-styles' 
+ * theme support (block css) thus the following needs to be included
  * since 'wp-block-styles' aren't used for this theme.
+ * https://github.com/WordPress/gutenberg/issues/45065
  */
 .wp-block-table thead {
 	border-bottom: 3px solid;
@@ -84,8 +72,9 @@ GNU General Public License for more details.
 
 /*
  * Link styles
+ * https://github.com/WordPress/gutenberg/issues/42319
  */
 a {
 	text-decoration-thickness: .0625em !important;
-	text-underline-offset: .15em
+	text-underline-offset: .15em;
 }

block-canvas/templates/404.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"inherit":true,"type":"constrained"},"style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|60"}}}} -->
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|60"}}}} -->
 <main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--60)">
 	
 	<!-- wp:pattern {"slug":"block-canvas/404"} /-->

block-canvas/templates/archive.html

@@ -1,30 +1,31 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
+<!-- wp:query {"tagName":"main","layout":{"type":"constrained"}} -->
 <main class="wp-block-query">
-<!-- wp:query-title {"type":"archive","style":{"spacing":{"margin":{"bottom":"100px"}}}} /-->
-<!-- wp:post-template -->
-<!-- wp:group -->
-<div class="wp-block-group">
-	<!-- wp:post-title {"isLink":true} /-->
-	<!-- wp:post-featured-image {"isLink":true} /-->
-	<!-- wp:post-excerpt /-->
-	<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
-	<!-- wp:spacer {"height":40} -->
-	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
-</div>
-<!-- /wp:group -->
-<!-- /wp:post-template -->
-<!-- wp:group {"layout":{"inherit":true}} -->
-	<div class="wp-block-group">
-	<!-- wp:query-pagination -->
-		<!-- wp:query-pagination-previous /-->
+	<!-- wp:query-title {"type":"archive","style":{"spacing":{"margin":{"bottom":"100px"}}}} /-->
+
+	<!-- wp:post-template -->
+		<!-- wp:group -->
+		<div class="wp-block-group">
+			<!-- wp:post-title {"isLink":true} /-->
+			<!-- wp:post-featured-image {"isLink":true} /-->
+			<!-- wp:post-excerpt /-->
+			<!-- wp:template-part {"slug":"post-meta"} /-->
 
-		<!-- wp:query-pagination-numbers /-->
+			<!-- wp:spacer {"height":40} -->
+			<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+		</div>
+		<!-- /wp:group -->
+	<!-- /wp:post-template -->
 
-		<!-- wp:query-pagination-next /-->
-	<!-- /wp:query-pagination -->
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:query-pagination -->
+			<!-- wp:query-pagination-previous /-->
+			<!-- wp:query-pagination-numbers /-->
+			<!-- wp:query-pagination-next /-->
+		<!-- /wp:query-pagination -->
 	</div>
 	<!-- /wp:group -->
 </main>

block-canvas/templates/blank.html

@@ -1 +0,0 @@
-<!-- wp:post-content {"layout":{"inherit":true},"lock":{"move":false,"remove":true}} /-->

block-canvas/templates/index.html

@@ -1,33 +1,33 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
+<!-- wp:query {"tagName":"main","layout":{"type":"constrained"}} -->
 <main class="wp-block-query">
 	<!-- wp:post-template -->
-	<!-- wp:group -->
-	<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true} /-->
-		<!-- wp:post-featured-image {"isLink":true} /-->
-		<!-- wp:post-excerpt /-->
-		<!-- wp:template-part {"slug":"post-meta"} /-->
-		<!-- wp:spacer {"height":40} -->
-		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
-	<!-- /wp:group -->
-	<!-- /wp:post-template -->
-	<!-- wp:group {"layout":{"inherit":true}} -->
+		<!-- wp:group -->
 		<div class="wp-block-group">
+			<!-- wp:post-title {"isLink":true} /-->
+			<!-- wp:post-featured-image {"isLink":true} /-->
+			<!-- wp:post-excerpt /-->
+			<!-- wp:template-part {"slug":"post-meta"} /-->
+			
+			<!-- wp:spacer {"height":40} -->
+			<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+		</div>
+		<!-- /wp:group -->
+	<!-- /wp:post-template -->
+
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
 		<!-- wp:query-pagination -->
 			<!-- wp:query-pagination-previous /-->
-	
 			<!-- wp:query-pagination-numbers /-->
-	
 			<!-- wp:query-pagination-next /-->
 		<!-- /wp:query-pagination -->
-		</div>
-		<!-- /wp:group -->
-	</main>
-	<!-- /wp:query -->
+	</div>
+	<!-- /wp:group -->
+</main>
+<!-- /wp:query -->
 	
-	<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
 	

block-canvas/templates/page.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 <!-- wp:post-title /-->
 </div>
@@ -10,11 +10,11 @@
 <main class="wp-block-group">
 <!-- wp:post-featured-image {"align":"full"} /-->
 
-<!-- wp:post-content {"layout":{"inherit":true},"lock":{"move":false,"remove":true}} /-->
+<!-- wp:post-content {"layout":{"type":"constrained"},"lock":{"move":false,"remove":true}} /-->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
     <!-- wp:spacer {"height":60} -->
     <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

block-canvas/templates/search.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 	<!-- wp:search /-->
 
@@ -10,34 +10,29 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"layout":{"inherit":true}} -->
+<!-- wp:query {"layout":{"type":"constrained"}} -->
 <main class="wp-block-query">
 	<!-- wp:post-template -->
-	<!-- wp:group -->
-	<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true} /-->
-
-		<!-- wp:post-featured-image {"isLink":true} /-->
-
-		<!-- wp:post-excerpt /-->
-
-		<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
-
-		<!-- wp:spacer {"height":40} -->
-		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
-	<!-- /wp:group -->
+		<!-- wp:group -->
+		<div class="wp-block-group">
+			<!-- wp:post-title {"isLink":true} /-->
+			<!-- wp:post-featured-image {"isLink":true} /-->
+			<!-- wp:post-excerpt /-->
+			<!-- wp:template-part {"slug":"post-meta"} /-->
+
+			<!-- wp:spacer {"height":40} -->
+			<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+		</div>
+		<!-- /wp:group -->
 	<!-- /wp:post-template -->
 
-	<!-- wp:group {"layout":{"inherit":true}} -->
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group">
 		<!-- wp:query-pagination -->
-		<!-- wp:query-pagination-previous /-->
-
-		<!-- wp:query-pagination-numbers /-->
-
-		<!-- wp:query-pagination-next /-->
+			<!-- wp:query-pagination-previous /-->
+			<!-- wp:query-pagination-numbers /-->
+			<!-- wp:query-pagination-next /-->
 		<!-- /wp:query-pagination -->
 	</div>
 	<!-- /wp:group -->

block-canvas/templates/single.html

@@ -1,26 +1,27 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
-<!-- wp:post-title /-->
+    <!-- wp:post-title /-->
 </div>
 <!-- /wp:group -->
 
 <!-- wp:group {"tagName":"main","lock":{"move":false,"remove":true}} -->
 <main class="wp-block-group">
-<!-- wp:post-featured-image {"align":"full"} /-->
-
-<!-- wp:post-content {"layout":{"type":"constrained"},"lock":{"move":false,"remove":true}} /-->
-
-<!-- wp:template-part {"slug":"post-meta"} /-->
+    <!-- wp:post-featured-image {"align":"full"} /-->
+    <!-- wp:post-content {"layout":{"type":"constrained"},"lock":{"move":false,"remove":true}} /-->
+    <!-- wp:template-part {"slug":"post-meta"} /-->
 </main>
 <!-- /wp:group -->
 
 <!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:spacer {"height":"4rem"} -->
-<div style="height:4rem" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-<!-- wp:pattern {"slug":"block-canvas/comments"} /--></div>
+<div class="wp-block-group">
+    <!-- wp:spacer {"height":"4rem"} -->
+    <div style="height:4rem" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+    
+    <!-- wp:pattern {"slug":"block-canvas/comments"} /-->
+</div>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

block-canvas/theme.json

@@ -1,16 +1,6 @@
 {
 	"version": 2,
     "$schema": "https://schemas.wp.org/trunk/theme.json",
-    "customTemplates": [
-        {
-            "name": "blank",
-            "postTypes": [
-                "page",
-                "post"
-            ],
-            "title": "Blank"
-        }
-    ],
     "settings": {
         "appearanceTools": true,
         "useRootPaddingAwareAlignments": true,
@@ -391,6 +381,8 @@
         "spacing": {
             "blockGap": "1.5rem",
             "padding": {
+                "top": "var(--wp--preset--spacing--50)",
+                "bottom": "var(--wp--preset--spacing--50)",
                 "right": "var(--wp--preset--spacing--50)",
                 "left": "var(--wp--preset--spacing--50)"
             }