Pendant: add 404 template (#5786)

* Pendant: add 404 template
* Made 404 heading H1 and moved H1 sizes from page to configuration
* Tweaks to search block style overrides
Co-authored-by: Jason Crist <jcrist@pbking.com>

pendant/patterns/404.php

@@ -7,10 +7,24 @@
 
 ?>
 
-<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"medium"} -->
-<h1 class="has-text-align-center has-medium-font-size" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'Oops! That page can&rsquo;t be found.', 'pendant' ); ?></h1>
+<!-- wp:heading {"textAlign":"left","level":1,"align":"wide"} -->
+<h1 class="alignwide has-text-align-left" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'There\'s nothing here.', 'pendant' ); ?></h1>
 <!-- /wp:heading -->
 
+<!-- wp:spacer {"height":"0.8em"} -->
+<div style="height:0.8em" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"align":"wide"} -->
+<div class="wp-block-group alignwide">
 <!-- wp:paragraph -->
-<p><?php echo  esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'pendant' ); ?></p>
+<p class="has-text-align-left has-medium-font-size">
+<?php echo  esc_html__( 'This page could not be found. Try searching posts using the search field.', 'pendant' ); ?>
+</p>
 <!-- /wp:paragraph -->
+
+<!-- wp:search {"showLabel":false,"placeholder":"<?php echo  esc_html__( 'Search…', 'pendant' ); ?>","width":500,"widthUnit":"px","buttonText":"<?php echo  esc_html__( 'Search', 'pendant' ); ?>","buttonPosition":"button-inside"} /-->
+
+</div>
+<!-- /wp:group -->
+

pendant/style.css

@@ -72,7 +72,7 @@ a:focus {
 	background-color: var(--wp--preset--color--background);
 	color: var(--wp--preset--color--foreground);
 	border: 2px solid var(--wp--preset--color--foreground);
-    	padding: 0.667em 1.333em;
+    	padding: 0.667em 1.333em !important;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover {
@@ -87,15 +87,25 @@ a:focus {
  * https://github.com/WordPress/gutenberg/issues/36444
  * https://github.com/WordPress/gutenberg/issues/27760
  */
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 0;
+	border-color: var(--wp--preset--color--foreground);
+}
 
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding-left: 1em;
+}
 .wp-block-search__button,
 .wp-block-file .wp-block-file__button {
 	background-color: var(--wp--preset--color--foreground);
-	border-radius: 0;
-	border: none;
 	color: var(--wp--preset--color--background);
-	font-size: var(--wp--preset--typography--font-size--normal);
-	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+	font-size: var(--wp--preset--typography--font-size--medium);
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	font-weight: 600;
+	line-height: 1.7;
+	border:none;
+	padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
 }
 
 /*
@@ -157,3 +167,7 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	margin-right: auto !important;
 	width: inherit;
 }
+
+.custom-404-wp-search {
+	max-width: 500px;
+}

pendant/templates/404.html

@@ -1,12 +1,10 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
-<main class="wp-block-group">
-
-	<!-- wp:pattern {"slug":"pendant/404"} /-->
-	<!-- wp:search {"label":""} /-->
-
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"72px","bottom":"128px"}}},"layout":{"inherit":true}} -->
+<main class="wp-block-group" style="padding-top:72px;padding-bottom:128px">
+<!-- wp:pattern {"slug":"pendant/404"} /-->
 </main>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+

pendant/theme.json

@@ -182,7 +182,7 @@
 		},
 		"layout": {
 			"contentSize": "820px",
-			"wideSize": "1000px"
+			"wideSize": "1240px"
 		},
 		"border": {
 			"color": true,
@@ -250,7 +250,7 @@
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": 400,
-					"fontSize": "clamp(3.75rem, 8vw, 6.25rem)"
+					"fontSize": "clamp(4rem, 10vw, 8rem)"
 				}
 			},
 			"h2": {