Merge pull request #2595 from Automattic/add/spearhead-search-results

Spearhead: Search Results page

seedlet/assets/css/style-editor.css

@@ -68,6 +68,8 @@
 	--form--border-width: 2px;
 	--form--border-radius: 0;
 	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	--form--background-color: transparent;
+	--form--box-shadow: none;
 	/* Blocks */
 	--button--color-text: var(--global--color-background);
 	--button--color-text-hover: var(--button--color-text);

seedlet/assets/sass/base/_accessibility.scss

@@ -1,5 +1,7 @@
-/* Text meant only for screen readers. */
-.screen-reader-text {
+@mixin screen-reader-text() {
+
+	/* Text meant only for screen readers. */
+
 	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
@@ -32,6 +34,10 @@
 	}
 }
 
+.screen-reader-text {
+	@include screen-reader-text();
+}
+
 /* Do not show the outline on the skip link target. */
 #content[tabindex="-1"]:focus {
 	outline: 0;

seedlet/assets/sass/child-theme/variables-editor.css

@@ -84,6 +84,8 @@ body {
 	--form--border-width: 2px;
 	--form--border-radius: 0;
 	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	--form--background-color: transparent;
+	--form--box-shadow: none;
 	/* Blocks */
 	--button--color-text: var(--global--color-background);
 	--button--color-text-hover: var(--button--color-text);

seedlet/assets/sass/child-theme/variables.css

@@ -84,6 +84,8 @@
 	--form--border-width: 2px;
 	--form--border-radius: 0;
 	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	--form--background-color: transparent;
+	--form--box-shadow: none;
 	/* Blocks */
 	--button--color-text: var(--global--color-background);
 	--button--color-text-hover: var(--button--color-text);

seedlet/assets/sass/elements/_config.scss

@@ -10,4 +10,7 @@
 	--form--border-radius: 0;
 
 	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+
+	--form--background-color: transparent;
+	--form--box-shadow: none;
 }

seedlet/assets/sass/elements/_forms.scss

@@ -19,6 +19,8 @@ textarea {
 	color: var(--form--color-text);
 	line-height: var(--global--line-height-body);
 	padding: var(--form--spacing-unit);
+	background: var(--form--background-color);
+	box-shadow: var(--form--box-shadow);
 
 	&:focus {
 		color: var(--form--color-text);
@@ -39,4 +41,4 @@ input[type=checkbox] + label {
 	display: inline;
 	margin-left: 0.5em;
 	line-height: 1em;
-}
+}

seedlet/style-rtl.css

@@ -135,6 +135,8 @@ Included in theme screenshot and in block patterns.
 	--form--border-width: 2px;
 	--form--border-radius: 0;
 	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	--form--background-color: transparent;
+	--form--box-shadow: none;
 	--button--color-text: var(--global--color-background);
 	--button--color-text-hover: var(--button--color-text);
 	--button--color-text-active: var(--button--color-text);
@@ -965,8 +967,8 @@ a {
 	outline-color: var(--global--color-secondary);
 }
 
-/* Text meant only for screen readers. */
 .screen-reader-text {
+	/* Text meant only for screen readers. */
 	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
@@ -1133,6 +1135,8 @@ textarea {
 	color: var(--form--color-text);
 	line-height: var(--global--line-height-body);
 	padding: var(--form--spacing-unit);
+	background: var(--form--background-color);
+	box-shadow: var(--form--box-shadow);
 }
 
 input[type="text"]:focus,

seedlet/style.css

@@ -135,6 +135,8 @@ Included in theme screenshot and in block patterns.
 	--form--border-width: 2px;
 	--form--border-radius: 0;
 	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	--form--background-color: transparent;
+	--form--box-shadow: none;
 	--button--color-text: var(--global--color-background);
 	--button--color-text-hover: var(--button--color-text);
 	--button--color-text-active: var(--button--color-text);
@@ -965,8 +967,8 @@ a {
 	outline-color: var(--global--color-secondary);
 }
 
-/* Text meant only for screen readers. */
 .screen-reader-text {
+	/* Text meant only for screen readers. */
 	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
@@ -1133,6 +1135,8 @@ textarea {
 	color: var(--form--color-text);
 	line-height: var(--global--line-height-body);
 	padding: var(--form--spacing-unit);
+	background: var(--form--background-color);
+	box-shadow: var(--form--box-shadow);
 }
 
 input[type="text"]:focus,

seedlet/template-parts/content/content-none.php

@@ -15,7 +15,7 @@
 		<h1 class="page-title"><?php _e( 'Nothing Found', 'seedlet' ); ?></h1>
 	</header><!-- .page-header -->
 
-	<div class="page-content">
+	<div class="page-content default-max-width">
 		<?php
 		if ( is_home() && current_user_can( 'publish_posts' ) ) :
 

spearhead/assets/sass/_meta.scss

@@ -0,0 +1,5 @@
+.site-main > article > .entry-footer {
+    margin-top: calc( var(--global--spacing-vertical) / 2);
+    padding-top: 0;
+    border: none;
+}

spearhead/assets/sass/_search.scss

@@ -0,0 +1,62 @@
+.search-results {
+    .site-main > * {
+        padding: var(--global--spacing-vertical) 0;
+    }
+
+    .search-form {
+        padding-bottom: 0;
+        margin-bottom: var(--global--spacing-vertical);
+    }
+
+    .entry-title {
+        font-size: var(--heading--font-size-h2);
+    }
+
+    .entry-header {
+        margin-bottom: 0;
+    }
+}
+
+.search-form {
+    border-bottom: var(--form--border-width) solid var(--form--border-color);
+    flex-direction: row-reverse;
+
+    & > label {
+        margin-right: 0;
+        padding-left: 30px;
+        position: relative;
+        &:before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            width: 24px;
+            height: 100%;
+        }
+    }
+    input[type="search"] {
+        border: none;
+        padding-top: var(--button--padding-vertical);
+        padding-bottom: var(--button--padding-vertical);
+        font-size: var(--global--font-size-sm);
+        color: var(--entry-header--color);
+    }
+    input[type="submit"] {
+        background: none;
+        color: var(--entry-header--color);
+        @extend .screen-reader-text;
+    }
+}
+
+@media ( prefers-color-scheme: dark ) {
+    .search-form {
+        & > label {
+            &:before {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+            }
+        }
+    }
+}

spearhead/assets/sass/style.scss

@@ -14,9 +14,12 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 */
 
 @import "../../../seedlet/assets/sass/abstracts/mixins";
+@import "../../../seedlet/assets/sass/base/accesibility";
 @import "breakpoints";
 @import "responsive";
 @import "posts-and-pages";
 @import "text";
 @import "header";
 @import "block-extends";
+@import "search";
+@import "meta";

spearhead/functions.php

@@ -245,3 +245,61 @@ add_filter( 'the_content_more_link', 'spearhead_continue_reading_link' );
 
 // Filter the excerpt
 add_filter( 'get_the_excerpt', 'spearhead_the_excerpt' );
+
+/*
+ * Post footer meta
+ */
+
+if ( ! function_exists( 'seedlet_entry_meta_footer' ) ) :
+	/**
+	 * Prints HTML with meta information for the categories, tags and comments.
+	 */
+	function seedlet_entry_meta_footer() {
+
+		seedlet_posted_on();
+
+		// Edit post link.
+		edit_post_link(
+			sprintf(
+				wp_kses(
+					/* translators: %s: Name of current post. Only visible to screen readers. */
+					__( 'Edit <span class="screen-reader-text">%s</span>', 'spearhead' ),
+					array(
+						'span' => array(
+							'class' => array(),
+						),
+					)
+				),
+				get_the_title()
+			),
+			'<span class="edit-link">',
+			'</span>'
+		);
+	}
+endif;
+
+if ( ! function_exists( 'seedlet_posted_on' ) ) :
+	/**
+	 * Prints HTML with meta information for the current post-date/time.
+	 */
+	function seedlet_posted_on() {
+		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
+		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
+			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
+		}
+
+		$time_string = sprintf(
+			$time_string,
+			esc_attr( get_the_date( DATE_W3C ) ),
+			esc_html( get_the_date( 'M d Y' ) ),
+			esc_attr( get_the_modified_date( DATE_W3C ) ),
+			esc_html( get_the_modified_date() )
+		);
+
+		printf(
+			'<span class="posted-on"><a href="%1$s" rel="bookmark">%2$s</a></span>',
+			esc_url( get_permalink() ),
+			$time_string
+		);
+	}
+endif;

spearhead/search.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * The template for displaying search results pages
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
+ *
+ * @package Spearhead
+ * @since 1.0.0
+ */
+
+get_header();
+?>
+
+	<section id="primary" class="content-area">
+		<main id="main" class="site-main" role="main">
+
+		<?php if ( have_posts() ) : ?>
+
+			<?php get_search_form(); ?>
+
+			<?php
+			// Start the Loop.
+			while ( have_posts() ) :
+				the_post();
+				?>
+
+				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+					<header class="entry-header default-max-width">
+						<?php
+						if ( is_sticky() && is_home() && ! is_paged() ) {
+							printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'spearhead' ) );
+						}
+						the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
+						?>
+					</header><!-- .entry-header -->
+
+					<footer class="entry-footer default-max-width">
+						<?php seedlet_entry_meta_footer(); ?>
+					</footer><!-- .entry-footer -->
+				</article><!-- #post-${ID} -->
+
+
+				<?php
+				// End the loop.
+			endwhile;
+
+			// Previous/next page navigation.
+			seedlet_the_posts_navigation();
+
+			// If no content, include the "No posts found" template.
+		else :
+			get_template_part( 'template-parts/content/content-none' );
+
+		endif;
+		?>
+		</main><!-- #main -->
+	</section><!-- #primary -->
+
+<?php
+get_footer();

spearhead/style-rtl.css

@@ -30,6 +30,47 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+/* Text meant only for screen readers. */
+.screen-reader-text, .search-form input[type="submit"] {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}
+
+.screen-reader-text:focus, .search-form input:focus[type="submit"] {
+	background-color: var(--global--color-background);
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: var(--global--color-foreground);
+	display: block;
+	font-size: var(--global--font-size-md);
+	font-weight: bold;
+	height: auto;
+	right: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+	/* Above WP toolbar. */
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+	outline: 0;
+}
+
 .archive .post .entry-title,
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
@@ -308,4 +349,69 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-family: var(--global--font-primary);
 	font-size: var(--global--font-size-xs);
 	text-transform: uppercase;
+}
+
+.search-results .site-main > * {
+	padding: var(--global--spacing-vertical) 0;
+}
+
+.search-results .search-form {
+	padding-bottom: 0;
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.search-results .entry-title {
+	font-size: var(--heading--font-size-h2);
+}
+
+.search-results .entry-header {
+	margin-bottom: 0;
+}
+
+.search-form {
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+	flex-direction: row-reverse;
+}
+
+.search-form > label {
+	margin-left: 0;
+	padding-right: 30px;
+	position: relative;
+}
+
+.search-form > label:before {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center center;
+	width: 24px;
+	height: 100%;
+}
+
+.search-form input[type="search"] {
+	border: none;
+	padding-top: var(--button--padding-vertical);
+	padding-bottom: var(--button--padding-vertical);
+	font-size: var(--global--font-size-sm);
+	color: var(--entry-header--color);
+}
+
+.search-form input[type="submit"] {
+	background: none;
+	color: var(--entry-header--color);
+}
+
+@media (prefers-color-scheme: dark) {
+	.search-form > label:before {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+	}
+}
+
+.site-main > article > .entry-footer {
+	margin-top: calc( var(--global--spacing-vertical) / 2);
+	padding-top: 0;
+	border: none;
 }

spearhead/style.css

@@ -30,6 +30,47 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+/* Text meant only for screen readers. */
+.screen-reader-text, .search-form input[type="submit"] {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}
+
+.screen-reader-text:focus, .search-form input:focus[type="submit"] {
+	background-color: var(--global--color-background);
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: var(--global--color-foreground);
+	display: block;
+	font-size: var(--global--font-size-md);
+	font-weight: bold;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+	/* Above WP toolbar. */
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+	outline: 0;
+}
+
 .archive .post .entry-title,
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
@@ -310,4 +351,69 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+.search-results .site-main > * {
+	padding: var(--global--spacing-vertical) 0;
+}
+
+.search-results .search-form {
+	padding-bottom: 0;
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.search-results .entry-title {
+	font-size: var(--heading--font-size-h2);
+}
+
+.search-results .entry-header {
+	margin-bottom: 0;
+}
+
+.search-form {
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+	flex-direction: row-reverse;
+}
+
+.search-form > label {
+	margin-right: 0;
+	padding-left: 30px;
+	position: relative;
+}
+
+.search-form > label:before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center center;
+	width: 24px;
+	height: 100%;
+}
+
+.search-form input[type="search"] {
+	border: none;
+	padding-top: var(--button--padding-vertical);
+	padding-bottom: var(--button--padding-vertical);
+	font-size: var(--global--font-size-sm);
+	color: var(--entry-header--color);
+}
+
+.search-form input[type="submit"] {
+	background: none;
+	color: var(--entry-header--color);
+}
+
+@media (prefers-color-scheme: dark) {
+	.search-form > label:before {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+	}
+}
+
+.site-main > article > .entry-footer {
+	margin-top: calc( var(--global--spacing-vertical) / 2);
+	padding-top: 0;
+	border: none;
+}
+
 /*# sourceMappingURL=style.css.map */

spearhead/variables.css

@@ -83,6 +83,12 @@
 	--sticky-posts--color-background: #F9F9F9;
 	--sticky-posts--entry-title-font-size: 24px;
 	--sticky-posts--entry-content-font-size: 20px;
+
+	/* Forms */
+	--form--border-color: var(--global--color-secondary);
+	--form--border-width: 1px;
+	--button--padding-vertical: calc(12px - var(--button--border-width));
+	--button--padding-horizontal: var(--button--padding-vertical);
 }
 
 @media ( prefers-color-scheme: dark ) {