feat: update search templates (#137)

Automattic · May 10, 2024 · 5e89534 · 5e89534
1 parent 9b20bab
commit 5e89534
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 27 deletions.
diff --git a/parts/desktop-header.html b/parts/desktop-header.html
@@ -1,6 +1,6 @@
-<!-- wp:group {"lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"},"metadata":{"name":"Header"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"padding":{"bottom":"0","top":"0","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"},"metadata":{"name":"Top"}} -->
-<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"width":65,"lock":{"move":true,"remove":true}} /-->
+<!-- wp:group {"lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"0"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"},"metadata":{"name":"Header"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"padding":{"bottom":"0","top":"0","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"},"metadata":{"name":"Top"}} -->
+<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"lock":{"move":true,"remove":true}} /-->
 
 <!-- wp:buttons {"lock":{"move":true,"remove":false},"className":"has-small-size","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-small"} -->
 <div class="wp-block-buttons has-custom-font-size has-small-size has-x-small-font-size"><!-- wp:button -->
@@ -16,6 +16,6 @@
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"var:preset|spacing|70","lock":{"move":true,"remove":true}} -->
-<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var:preset|spacing|80","lock":{"move":true,"remove":true}} -->
+<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
diff --git a/parts/footer.html b/parts/footer.html
@@ -5,7 +5,7 @@
 <!-- wp:group {"lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"bottom":"0","top":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"},"metadata":{"name":"Footer"}} -->
 <div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"blockGap":"0"}}} -->
 <div class="wp-block-group alignwide" style="padding-top:0;padding-bottom:0"><!-- wp:group {"lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"},"metadata":{"name":"Content"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:site-logo {"width":65} /-->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:site-title {"level":0,"fontSize":"large"} /-->
 
 <!-- wp:paragraph {"fontSize":"large"} -->
 <p class="has-large-font-size">Our online newspaper delivers the latest news and insightful analysis.<br>Our experienced journalists ensure accurate and impartial reporting.<br>Stay informed with our engaging and informative articles.</p>

diff --git a/patterns/404.php b/patterns/404.php
@@ -1,4 +1,5 @@
 <?php
+// phpcs:ignoreFile
 /**
  * Title: A 404 page
  * Slug: newspack-block-theme/404
@@ -8,11 +9,11 @@
  */
 
 ?>
-<!-- wp:heading {"textAlign":"center","level":1} -->
-<h1 class="wp-block-heading has-text-align-center">Page not found.</h1>
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading"><?php esc_html_e( 'Page not found', 'newspack-block-theme' ); ?></h1>
 <!-- /wp:heading -->
 
-<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
-<p class="has-text-align-center has-x-large-font-size"><?php esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'newspack-block-theme' ); ?></p>
+<!-- wp:paragraph {"fontSize":"x-large"} -->
+<p class="has-x-large-font-size"><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'newspack-block-theme' ); ?></p>
 <!-- /wp:paragraph -->
 
diff --git a/patterns/hidden-no-results-content.php b/patterns/hidden-no-results-content.php
@@ -1,4 +1,5 @@
 <?php
+// phpcs:ignoreFile
 /**
  * Title: Hidden No Results Content
  * Slug: newspack-block-theme/hidden-no-results-content
@@ -9,21 +10,17 @@
 
 ?>
 <!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:spacer {"height":"var:preset|spacing|50"} -->
-<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
+<div class="wp-block-group">
 
 <!-- wp:paragraph {"fontSize":"x-large"} -->
 <p class="has-x-large-font-size"><?php echo esc_html_x( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'Message explaining that there are no results returned from a search', 'newspack-block-theme' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:spacer {"height":"var:preset|spacing|70"} -->
-<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:heading {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}},"fontSize":"x-large"} -->
-<h2 class="wp-block-heading alignwide has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--50)">Latest articles</h2>
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|80","bottom":"0"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--80);padding-bottom:0"><!-- wp:heading {"textAlign":"left","level":3,"align":"wide"} -->
+<h3 class="wp-block-heading alignwide has-text-align-left"><?php esc_html_e( 'Latest articles', 'newspack-block-theme' ); ?></h3>
 <!-- /wp:heading -->
 
 <!-- wp:newspack-blocks/homepage-articles {"showAvatar":false,"postLayout":"grid","columns":4,"postsToShow":4,"typeScale":3,"align":"wide"} /--></div>
+<!-- /wp:group --></div>
 <!-- /wp:group -->
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -63,3 +63,10 @@
 		visibility: visible;
 	}
 }
+
+// Header margin
+.wp-site-blocks {
+	> header + * {
+		margin-top: 0;
+	}
+}
diff --git a/templates/404.html b/templates/404.html
@@ -1,23 +1,23 @@
 <!-- wp:template-part {"slug":"header","theme":"newspack-block-theme","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
-<main class="wp-block-group has-base-2-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)">
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-group">
 
 <!-- wp:pattern {"slug":"newspack-block-theme/404"} /-->
 
-<!-- wp:search {"label":"","placeholder":"Search...","buttonPosition":"button-inside","buttonUseIcon":true,"backgroundColor":"contrast"} /-->
+<!-- wp:search {"label":"","placeholder":"Search...","buttonPosition":"button-inside","buttonUseIcon":true} /-->
 
-<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast","fontSize":"small"} -->
-<p class="has-text-align-center has-contrast-color has-text-color has-link-color has-small-font-size"><a href="/">No thanks, take me to the homepage</a></p>
+<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-3"}}}},"textColor":"contrast","fontSize":"small"} -->
+<p class="has-contrast-3-color has-text-color has-link-color has-small-font-size"><a href="/">No thanks, take me to the homepage</a>.</p>
 <!-- /wp:paragraph --></main>
 <!-- /wp:group -->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|70","bottom":"0"}}},"layout":{"type":"constrained"}} -->
-<main class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-bottom:0"><!-- wp:heading {"textAlign":"left","level":3,"align":"wide"} -->
+<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|80","bottom":"0"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--80);padding-bottom:0"><!-- wp:heading {"textAlign":"left","level":3,"align":"wide"} -->
 <h3 class="wp-block-heading alignwide has-text-align-left">Latest articles</h3>
 <!-- /wp:heading -->
 
-<!-- wp:newspack-blocks/homepage-articles {"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"align":"wide"} /--></main>
+<!-- wp:newspack-blocks/homepage-articles {"showAvatar":false,"postLayout":"grid","columns":4,"postsToShow":4,"typeScale":3,"align":"wide"} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","theme":"newspack-block-theme","tagName":"footer"} /-->