2024 Theme: Add a basic search results template

Search results context block copied from the wporg-developer theme.

See #2437

wp-content/themes/pub/wporg-learn-2024/functions.php

@@ -6,6 +6,7 @@
 
 // Block files
 require_once __DIR__ . '/src/learning-pathway-cards/index.php';
+require_once __DIR__ . '/src/search-results-context/index.php';
 require_once __DIR__ . '/src/upcoming-online-workshops/index.php';
 
 /**

wp-content/themes/pub/wporg-learn-2024/patterns/search-content.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * Title: Search Content
+ * Slug: wporg-learn-2024/search-content
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:query {"queryId":0,"query":{"inherit":true,"perPage":25},"align":"wide"} -->
+<div class="wp-block-query alignwide">
+
+	<!-- wp:group {"className":"align-left","layout":{"type":"constrained","contentSize":"","justifyContent":"left"},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
+	<div class="wp-block-group align-left" style="margin-bottom:var(--wp--preset--spacing--40)">
+
+		<!-- wp:group {"align":"wide","className":"wporg-search-controls","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} -->
+		<div id="wporg-search" class="wp-block-group alignwide wporg-search-controls" style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)">
+
+			<!-- wp:search {"label":"<?php esc_attr_e( 'Search', 'wporg-learn' ); ?>","showLabel":false,"placeholder":"<?php esc_attr_e( 'Search learning resources', 'wporg-learn' ); ?>","width":232,"widthUnit":"px","buttonText":"<?php esc_attr_e( 'Search', 'wporg-learn' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control wporg-filtered-search-form"} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:wporg-learn/search-results-context {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+		<!-- wp:post-template {"align":"wide"} -->
+
+			<!-- wp:post-title {"isLink":true} /-->
+
+			<!-- wp:post-excerpt /-->
+
+		<!-- /wp:post-template -->
+
+		<!-- wp:query-no-results -->
+
+			<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results.","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
+			<p style="margin-top:var(--wp--preset--spacing--40)"><?php esc_attr_e( 'Sorry, but nothing matched your search terms.', 'wporg-learn' ); ?></p>
+			<!-- /wp:paragraph -->
+
+		<!-- /wp:query-no-results -->
+
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+		<!-- wp:query-pagination-previous {"label":"Previous"} /-->
+
+		<!-- wp:query-pagination-numbers /-->
+
+		<!-- wp:query-pagination-next {"label":"Next"} /-->
+	<!-- /wp:query-pagination -->
+
+</div>
+<!-- /wp:query -->

wp-content/themes/pub/wporg-learn-2024/src/search-results-context/block.json

@@ -0,0 +1,44 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg-learn/search-results-context",
+	"version": "0.1.0",
+	"title": "Search Results Context",
+	"category": "design",
+	"icon": "",
+	"description": "Displays context information for search results.",
+	"textdomain": "wporg-learn",
+	"attributes": {
+		"tagName": {
+			"type": "string",
+			"default": "p"
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": true,
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true,
+				"textTransform": true
+			}
+		}
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

wp-content/themes/pub/wporg-learn-2024/src/search-results-context/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+function Edit() {
+	return <div { ...useBlockProps() }>Search Results Context</div>;
+}
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );

wp-content/themes/pub/wporg-learn-2024/src/search-results-context/index.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Block Name: Search Results Context
+ * Description: Displays context information for search results.
+ *
+ * @package wporg-learn
+ */
+
+namespace WordPressdotorg\Theme\Learn_2024\Search_Results_Context;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Render the block content.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes ) {
+	global $wp_query;
+
+	if ( ! is_search() ) {
+		return '';
+	}
+
+	$results_count = $wp_query->found_posts;
+
+	if ( 0 === $results_count ) {
+		return;
+	}
+
+	$posts_per_page = get_query_var( 'posts_per_page' );
+	$current_page = get_query_var( 'paged' ) ?: 1;
+	$first_result = ( $current_page - 1 ) * $posts_per_page + 1;
+	$last_result = min( $current_page * $posts_per_page, $results_count );
+
+	$content = sprintf(
+		/* translators: %1$s number of results; %2$s keyword. */
+		_n(
+			'%1$s result found for "%2$s".',
+			'%1$s results found for "%2$s".',
+			$results_count,
+			'wporg-learn'
+		),
+		number_format_i18n( $results_count ),
+		esc_html( $wp_query->query['s'] ),
+	);
+
+	$showing = sprintf(
+		/* translators: %1$s number of first displayed result, %2$s number of last displayed result. */
+		'Showing results %1$s to %2$s.',
+		number_format_i18n( $first_result ),
+		number_format_i18n( $last_result ),
+	);
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<%1$s %2$s>%3$s %4$s</%1$s>',
+		esc_attr( $attributes['tagName'] ),
+		$wrapper_attributes,
+		$content,
+		$showing,
+	);
+}
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/search-results-context',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
+}

wp-content/themes/pub/wporg-learn-2024/templates/search.html

@@ -0,0 +1,11 @@
+<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained","justifyContent":"left"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
+<main class="wp-block-group alignfull" style="padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space)">
+
+	<!-- wp:pattern {"slug":"wporg-learn-2024/search-content"} /-->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->