Club: Search page template (#6345)

* Club: using post list pattern in search template

* Club: removing unused template part

* Club: search form styles

* Club: search form layout full width

* Club: post list pattern: moving spacer below the pagination

* Club:  move search block to a pattern

club/parts/post-meta.html

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

club/patterns/404.php

@@ -20,7 +20,7 @@
 <p class="has-large-font-size"><?php echo esc_html__( 'This page could not be found. Try searching posts using the search field.', 'club' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:search {"label":"","showLabel":false,"placeholder":"<?php echo esc_html__( 'Search...', 'club' ); ?>","buttonText":"<?php echo esc_html__( 'WHAT R U WAITING FOR?', 'club' ); ?>"} /-->
+<!-- wp:pattern {"slug":"club/search"} /-->
 
 <!-- wp:spacer {"height":"4rem"} -->
 <div style="height:4rem" aria-hidden="true" class="wp-block-spacer"></div>

club/patterns/post-list.php

@@ -7,7 +7,7 @@
 
 ?>
 
-<!-- wp:query {"queryId":27,"query":{"perPage":"10","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"tagName":"main","displayLayout":{"type":"list","columns":3},"className":"club-post-list-pattern","layout":{"inherit":false}} -->
+<!-- wp:query {"query":{"perPage":"10","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","displayLayout":{"type":"list","columns":3},"className":"club-post-list-pattern","layout":{"inherit":false}} -->
 <main class="wp-block-query club-post-list-pattern"><!-- wp:post-template -->
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em"}}}} -->
 <div class="wp-block-group" style="padding-top:1em;padding-bottom:1em"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
@@ -47,10 +47,6 @@
 <p></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
 <!-- wp:query-pagination -->
 <!-- wp:query-pagination-previous /-->
 
@@ -58,4 +54,9 @@
 
 <!-- wp:query-pagination-next /-->
 <!-- /wp:query-pagination --></main>
+
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
 <!-- /wp:query -->

club/patterns/search.php

@@ -0,0 +1,10 @@
+<?php
+/**
+ * Title: Search block
+ * Slug: club/search
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:search {"label":"","showLabel":false,"placeholder":"<?php echo esc_html__( 'Search...', 'club' ); ?>","buttonText":"<?php echo esc_html__( 'WHAT R U WAITING FOR?', 'club' ); ?>"} /-->

club/style.css

@@ -199,7 +199,7 @@ a {
 /*
  * Navigation
  */
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
 	gap: 1rem;
 }
 
@@ -217,6 +217,17 @@ a {
 	gap: 0.5rem;
 }
 
+/*
+ * Block search
+ */
+ .wp-block-search__input {
+	color: var(--wp--preset--color--foreground);
+}
+
+.wp-block-search__input:focus-visible {
+	outline: 1.5px solid var(--wp--preset--color--foreground);
+}
+
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or

club/templates/search.html

@@ -1,47 +1,15 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"inherit":false}} -->
 <div class="wp-block-group">
-	<!-- wp:search /-->
 
-	<!-- wp:spacer {"height":40} -->
-	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
-</div>
-<!-- /wp:group -->
-
-<!-- wp:query {"layout":{"inherit":true}} -->
-<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:pattern {"slug":"club/search"} /-->
 
-		<!-- 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-pagination-numbers /-->
+<!-- wp:spacer {"height":"40px"} -->
+<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group -->
 
-		<!-- wp:query-pagination-next /-->
-		<!-- /wp:query-pagination -->
-	</div>
-	<!-- /wp:group -->
-</main>
-<!-- /wp:query -->
+<!-- wp:pattern {"slug":"club/posts-list"} /-->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

club/theme.json

@@ -383,8 +383,16 @@
             },
             "core/search": {
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--medium)",
-                    "lineHeight": "1.6"
+                    "fontSize": "var(--wp--preset--font-size--large)",
+                    "lineHeight": "1.6",
+                    "fontWeight": "700"
+                },
+                "elements": {
+                    "button": {
+                        "typography": {
+                            "fontSize": "var(--wp--preset--font-size--large)"
+                        }
+                    }
                 }
             },
             "core/separator": {