Blockbase: make 404 into a php template so it can be translated (#4332)

* Make 404 and search translatable.

* Remove heading from search template so the theme i18n ready.

blockbase/404.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * The template for displaying 404 pages (not found)
+ *
+ * @package Blockbase
+ * @since 1.1.1
+ */
+wp_head();
+
+echo gutenberg_block_template_part( 'header' );
+?>
+
+<main class="container-404">
+	<h1 class="has-text-align-center has-large-font-size"><?php _e( 'Oops! That page can&rsquo;t be found.', 'blockbase' ); ?></h1>
+
+	<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'blockbase' ); ?></p>
+
+	<?php echo do_blocks('<!-- wp:search {"label":""} /-->'); ?>
+</main>
+
+<?php
+echo gutenberg_block_template_part( 'footer' );
+
+wp_footer();

blockbase/assets/ponyfill.css

@@ -83,6 +83,12 @@ img {
 	text-align: center;
 }
 
+.container-404 {
+	max-width: var(--wp--custom--layout--content-size);
+	margin-left: auto !important;
+	margin-right: auto !important;
+}
+
 .site-header {
 	align-items: center;
 	flex-wrap: wrap;

blockbase/block-templates/404.html

@@ -1,18 +0,0 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-
-<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
-<main class="wp-block-group">
-
-<!-- wp:heading {"level":1,"fontSize":"large"} -->
-<h1 class="has-large-font-size">Oops! That page can’t be found.</h1>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>It looks like nothing was found at this location. Maybe try a search?</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:search {"label":"","buttonText":"Search"} /-->
-</main>
-<!-- /wp:group -->
-
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/block-templates/search.html

@@ -3,10 +3,6 @@
 <!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
 <main class="wp-block-group">
 
-<!-- wp:heading -->
-<h2>Results:</h2>
-<!-- /wp:heading -->
-
 <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
 <div class="wp-block-query">
 <!-- wp:post-template -->

blockbase/sass/base/_alignment.scss

@@ -31,3 +31,10 @@
 .aligncenter {
 	text-align: center;
 }
+
+// Mimick the Gutenberg-generated rules of the layout container on the 404 template
+.container-404 {
+	max-width: var(--wp--custom--layout--content-size);
+	margin-left: auto !important;
+	margin-right: auto !important;
+}

blockbase/style.css

@@ -7,7 +7,7 @@ Description: Blockbase is a simple theme that supports full-site editing. It com
 Requires at least: 5.7
 Tested up to: 5.7
 Requires PHP: 5.7
-Version: 1.1.0
+Version: 1.1.1
 License: GNU General Public License v2 or later
 License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE 
 Text Domain: blockbase

blockbase/theme.json

@@ -198,6 +198,9 @@
 					}
 				}
 			},
+			"layout": {
+				"contentSize": "620px"
+			},
 			"list": {
 				"spacing": {
 					"padding": {

quadrat/block-templates/404.html

@@ -1,18 +0,0 @@
-<!-- wp:template-part {"slug":"header"} /-->
-
-<!-- wp:group {"layout":{"inherit":true}, "tagName":"main"} -->
-<main class="wp-block-group">
-
-	<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"large"} -->
-	<h1 class="has-text-align-center has-large-font-size">Oops! That page can’t be found.</h1>
-	<!-- /wp:heading -->
-
-	<!-- wp:paragraph -->
-	<p>It looks like nothing was found at this location. Maybe try a search?</p>
-	<!-- /wp:paragraph -->
-
-	<!-- wp:search {"label":"","buttonText":"Search"} /-->
-</main>
-<!-- /wp:group -->
-
-<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/block-templates/search.html

@@ -3,10 +3,6 @@
 <!-- wp:group {"layout":{"inherit":true}, "tagName":"main"} -->
 <main class="wp-block-group">
 
-	<!-- wp:heading -->
-	<h2>Results:</h2>
-	<!-- /wp:heading -->
-
 	<!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
 	<!-- wp:query-loop -->
 

quadrat/child-theme.json

@@ -173,6 +173,9 @@
 					"fontSize": "min(max(28px, 5vw), 38px)"
 				}
 			},
+			"layout": {
+				"contentSize":"664px"
+			},
 			"line-height": {
 				"body": 1.7
 			},

quadrat/theme.json

@@ -250,6 +250,9 @@
 					}
 				}
 			},
+			"layout": {
+				"contentSize": "664px"
+			},
 			"list": {
 				"spacing": {
 					"padding": {