From addcdf43c52deb513a24cd2d619073ea7adde9e4 Mon Sep 17 00:00:00 2001
From: alaczek <ola@bodera.com>
Date: Tue, 5 Mar 2024 15:07:43 +1100
Subject: [PATCH] Lettre: round of fixes (#7664)

* Add search template

Add missing search template, including a "no-results" message.
See #7662

* Update theme.json

Add values to top and bottom spacing to fix the mobile nav spacing issues.
See #7662

* Update archive.html

Add query navigation on the archive pages. See #7231

* Update style.css

* Add spacing to comment reply heading
* Try fixing the underline issue in navigation
* Add spacing to the search input field, to bring the styling in line with subscription block.
---
 lettre/patterns/hidden-no-results-content.php | 10 ++++
 lettre/style.css                              | 13 +++++-
 lettre/templates/archive.html                 |  7 ++-
 lettre/templates/search.html                  | 46 +++++++++++++++++++
 lettre/theme.json                             |  4 +-
 5 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 lettre/patterns/hidden-no-results-content.php
 create mode 100644 lettre/templates/search.html

diff --git a/lettre/patterns/hidden-no-results-content.php b/lettre/patterns/hidden-no-results-content.php
new file mode 100644
index 0000000000..e3572b40ee
--- /dev/null
+++ b/lettre/patterns/hidden-no-results-content.php
@@ -0,0 +1,10 @@
+<?php
+/**
+ * Title: Hidden No Results Content
+ * Slug: lettre/hidden-no-results-content
+ * Inserter: no
+ */
+?>
+<!-- wp:paragraph -->
+<p><?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', 'lettre' ); ?></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/lettre/style.css b/lettre/style.css
index dc82375779..5585c25068 100644
--- a/lettre/style.css
+++ b/lettre/style.css
@@ -97,6 +97,10 @@ input:not([type="submit"]):not([type="button"]):focus {
 	margin-top: var(--wp--style--block-gap);
 }
 
+.wp-block-post-comments-form h3#reply-title {
+	margin-bottom: var(--wp--style--block-gap);
+}
+
 .wp-block-post-comments .navigation + .comment-respond {
 	margin-top: calc(3 * var(--wp--style--block-gap));
 }
@@ -151,7 +155,7 @@ input:not([type="submit"]):not([type="button"]):focus {
  */
 .wp-block-navigation a:where(:not(.wp-element-button)):focus,
 .wp-block-pages-list__item:focus.wp-block-navigation a:where(:not(.wp-element-button)):focus {
-	text-decoration: none;
+	text-decoration: none !important;
 }
 
 .wp-block-pages-list__item.current-menu-item a:where(:not(.wp-element-button)) {
@@ -164,3 +168,10 @@ input:not([type="submit"]):not([type="button"]):focus {
 		text-align: right;
 	}
 }
+
+/*
+ * Add spacing to the search input field, to bring the styling in line with subscription block.
+ */
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
+	padding-left: 23px;
+}
diff --git a/lettre/templates/archive.html b/lettre/templates/archive.html
index 67c2c1d307..1c1916cae9 100644
--- a/lettre/templates/archive.html
+++ b/lettre/templates/archive.html
@@ -32,7 +32,12 @@
 <!-- wp:separator {"backgroundColor":"tertiary","className":"is-style-wide"} -->
 <hr class="wp-block-separator has-text-color has-tertiary-color has-alpha-channel-opacity has-tertiary-background-color has-background is-style-wide"/>
 <!-- /wp:separator -->
-  <!-- /wp:post-template --></div>
+  <!-- /wp:post-template -->
+<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<!-- wp:query-pagination-previous {"fontSize":"small"} /-->
+
+<!-- wp:query-pagination-next {"fontSize":"small"} /-->
+<!-- /wp:query-pagination --></div>
 <!-- /wp:query --></div>
 <!-- /wp:group --></main>
 <!-- /wp:group -->
diff --git a/lettre/templates/search.html b/lettre/templates/search.html
new file mode 100644
index 0000000000..bf887cd484
--- /dev/null
+++ b/lettre/templates/search.html
@@ -0,0 +1,46 @@
+<!-- wp:template-part {"slug":"header-archive","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+<!-- wp:search {"showLabel":false,"width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"style":{"border":{"radius":"190px","width":"1px"}},"borderColor":"primary","backgroundColor":"primary","textColor":"secondary"} /-->
+
+<!-- wp:spacer {"height":"70px"} -->
+<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+  <!-- wp:columns -->
+  <div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
+    <div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-featured-image {"height":"200px"} /--></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column {"width":"66.66%"} -->
+    <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
+
+      <!-- wp:post-excerpt {"showMoreOnNewLine":false,"fontSize":"small"} /-->
+
+      <!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
+      <div class="wp-block-group"><!-- wp:post-author-name {"fontSize":"small"} /-->
+
+        <!-- wp:post-date {"format":"F j, Y","fontSize":"small"} /--></div>
+      <!-- /wp:group --></div>
+    <!-- /wp:column --></div>
+  <!-- /wp:columns -->
+
+<!-- wp:separator {"backgroundColor":"tertiary","className":"is-style-wide"} -->
+<hr class="wp-block-separator has-text-color has-tertiary-color has-alpha-channel-opacity has-tertiary-background-color has-background is-style-wide"/>
+<!-- /wp:separator -->
+  <!-- /wp:post-template -->
+
+<!-- wp:query-no-results -->
+<!-- wp:pattern {"slug":"lettre/hidden-no-results-content"} /-->
+<!-- /wp:query-no-results -->
+
+</div>
+<!-- /wp:query --></div>
+<!-- /wp:group --></main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
\ No newline at end of file
diff --git a/lettre/theme.json b/lettre/theme.json
index 78cb0ad946..83734db43f 100644
--- a/lettre/theme.json
+++ b/lettre/theme.json
@@ -395,9 +395,9 @@
 		"spacing": {
 			"blockGap": "1.5rem",
 			"padding": {
-				"bottom": "",
+				"bottom": "0px",
 				"left": "var(--wp--custom--spacing--outer)",
-				"top": "",
+				"top": "0px",
 				"right": "var(--wp--custom--spacing--outer)"
 			}
 		},