Add Search bar to the homepage (#2801)

* Add the search bar to the front page

* Add search result page

* Add content type filter

* Fix filter on pagination would result in 404 page - enhanced

* Add comment for modify_header_template_part

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

@@ -39,6 +39,7 @@
 	return $args;
 } );
 add_filter( 'single_template_hierarchy', __NAMESPACE__ . '\modify_single_template' );
+add_filter( 'search_template_hierarchy', __NAMESPACE__ . '\modify_search_template' );
 add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' );
 add_filter( 'wporg_block_site_breadcrumbs', __NAMESPACE__ . '\set_site_breadcrumbs' );
 add_filter( 'taxonomy_template_hierarchy', __NAMESPACE__ . '\modify_taxonomy_template_hierarchy' );
@@ -63,6 +64,27 @@ function modify_single_template( $templates ) {
 	return $templates;
 }
 
+/**
+ * Modify the search template hierarchy to use search-all templates.
+ *
+ * @param array $templates Array of template files.
+ * @return array
+ */
+function modify_search_template( $templates ) {
+	// Should not change the search result template of course, lesson, and learning-pathway.
+	// Currently, they each use their specific templates: archive-course, archive-lesson, and taxonomy-learning-pathway,
+	// which have their own dedicated UI and filters.
+	if (
+		is_search() &&
+		! ( is_post_type_archive( 'course' ) || is_post_type_archive( 'lesson' ) ) &&
+		! is_tax( 'learning-pathway' )
+		) {
+			array_unshift( $templates, 'search-all' );
+	}
+
+	return $templates;
+}
+
 /**
  * Sets up theme defaults and registers support for various WordPress features.
  *

wp-content/themes/pub/wporg-learn-2024/inc/block-config.php

@@ -8,6 +8,8 @@
 use function WPOrg_Learn\Post_Meta\{get_available_post_type_locales};
 use Sensei_Learner;
 
+add_filter( 'wporg_query_filter_options_content_type', __NAMESPACE__ . '\get_content_type_options' );
+
 add_filter( 'wporg_query_filter_options_language', __NAMESPACE__ . '\get_language_options' );
 add_filter( 'wporg_query_filter_options_archive_language', __NAMESPACE__ . '\get_language_options_by_post_type' );
 
@@ -25,13 +27,44 @@
 add_filter( 'query_loop_block_query_vars', __NAMESPACE__ . '\modify_course_query' );
 
 /**
- * Get the current URL.
+ * Get the filtered URL by removing the page query var.
+ * If the path retains "page," the filtered result might be a 404 page.
  *
- * @return string The current URL.
+ * @return string The filtered URL.
  */
-function get_current_url() {
+function get_filtered_url() {
 	global $wp;
-	return home_url( add_query_arg( array(), $wp->request ) );
+	$filtered_path = preg_replace( '#page/\d+/?$#', '', $wp->request );
+	return home_url( $filtered_path );
+}
+
+/**
+ * Get the content type options.
+ * Used for the search filters and the archive filters.
+ *
+ * @param array $options The options for this filter.
+ * @return array New list of custom content type options.
+ */
+function get_content_type_options( $options ) {
+	global $wp_query;
+
+	$options = array(
+		'any' => __( 'Any', 'wporg-learn' ),
+		'course' => __( 'Course', 'wporg-learn' ),
+		'lesson' => __( 'Lesson', 'wporg-learn' ),
+	);
+
+	$selected_slug = $wp_query->get( 'post_type' ) ? $wp_query->get( 'post_type' ) : 'any';
+	$label = $options[ $selected_slug ] ?? $options['any'];
+
+	return array(
+		'label' => $label,
+		'title' => __( 'Content Type', 'wporg-learn' ),
+		'key' => 'post_type',
+		'action' => get_filtered_url(),
+		'options' => $options,
+		'selected' => array( $selected_slug ),
+	);
 }
 
 /**
@@ -91,7 +124,7 @@ function ( $level ) use ( $selected_slug ) {
 		'label' => $label,
 		'title' => __( 'Level', 'wporg-learn' ),
 		'key' => 'wporg_lesson_level',
-		'action' => get_current_url(),
+		'action' => get_filtered_url(),
 		'options' => array_combine( wp_list_pluck( $levels, 'slug' ), wp_list_pluck( $levels, 'name' ) ),
 		'selected' => array( $selected_slug ),
 	);
@@ -233,7 +266,7 @@ function ( $a, $b ) {
 		'label' => $label,
 		'title' => __( 'Filter', 'wporg-learn' ),
 		'key' => 'wporg_workshop_topic',
-		'action' => get_current_url(),
+		'action' => get_filtered_url(),
 		'options' => array_combine( wp_list_pluck( $topics, 'slug' ), wp_list_pluck( $topics, 'name' ) ),
 		'selected' => $selected,
 	);
@@ -414,7 +447,7 @@ function create_language_options( $languages ) {
 		'label' => $label,
 		'title' => __( 'Filter', 'wporg-learn' ),
 		'key' => 'language',
-		'action' => get_current_url(),
+		'action' => get_filtered_url(),
 		'options' => $languages,
 		'selected' => $selected,
 	);
@@ -497,29 +530,14 @@ function get_student_course_options( $options ) {
 		'completed' => __( 'Completed', 'wporg-learn' ),
 	);
 
-	$selected_slug = $wp_query->get( $key );
-	if ( $selected_slug ) {
-		// Find the selected option from $options by slug and then get the name.
-		$selected_option = array_filter(
-			$options,
-			function ( $option, $slug ) use ( $selected_slug ) {
-				return $slug === $selected_slug;
-			},
-			ARRAY_FILTER_USE_BOTH
-		);
-		if ( ! empty( $selected_option ) ) {
-			$label = array_shift( $selected_option );
-		}
-	} else {
-		$selected_slug = 'all';
-		$label = __( 'All', 'wporg-learn' );
-	}
+	$selected_slug = $wp_query->get( $key ) ? $wp_query->get( $key ) : 'all';
+	$label = $options[ $selected_slug ] ?? $options['all'];
 
 	return array(
 		'label' => $label,
 		'title' => __( 'Completion status', 'wporg-learn' ),
 		'key' => $key,
-		'action' => get_current_url(),
+		'action' => get_filtered_url(),
 		'options' => $options,
 		'selected' => array( $selected_slug ),
 	);

wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php

@@ -15,6 +15,8 @@
 
 /**
  * Update header template based on current query.
+ * Since the search results for courses and lessons still use their respective archive templates,
+ * we need to update the header template part to display the correct title.
  *
  * @param array $parsed_block The block being rendered.
  *

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

@@ -7,6 +7,16 @@
 
 ?>
 
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
+<div class="wp-block-group">
+	<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search for resources', 'wporg-learn' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg-learn' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true} /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"var:preset|spacing|40","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
 <!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|10"}}}} -->
 <h2 class="wp-block-heading" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--10)"><?php esc_html_e( 'Get Started', 'wporg-learn' ); ?></h2>
 <!-- /wp:heading -->

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

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Title: Search All Content
+ * Slug: wporg-learn-2024/search-all-content
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"750px"}} -->
+<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--50)">
+
+	<!-- wp:heading {"level":1} -->
+	<h1 class="wp-block-heading"><?php esc_html_e( 'Search Results', 'wporg-learn' ); ?></h1>
+	<!-- /wp:heading -->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
+<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">
+
+	<!-- wp:search {"label":"<?php esc_attr_e( 'Search', 'wporg-learn' ); ?>","showLabel":false,"placeholder":"<?php esc_attr_e( 'Search for resources', 'wporg-learn' ); ?>","width":290,"widthUnit":"px","buttonText":"<?php esc_attr_e( 'Search', 'wporg-learn' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true} /-->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
+	<div class="wp-block-group wporg-query-filters">
+		<!-- wp:wporg/query-filter {"key":"content_type","multiple":false} /-->
+		<!-- wp:wporg/query-filter {"key":"level","multiple":false} /-->
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:wporg-learn/search-results-context {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+<!-- wp:query {"className":"wporg-learn-card-grid","queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
+<div class="wp-block-query wporg-learn-card-grid">
+
+	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
+
+		<!-- wp:template-part {"slug":"card","className":"has-display-contents"} /-->
+
+	<!-- /wp:post-template -->
+
+	<!-- wp:query-no-results -->
+
+		<!-- wp:pattern {"slug":"wporg-learn-2024/query-no-results"} /-->
+
+	<!-- /wp:query-no-results -->
+
+	<!-- 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/templates/front-page.html

@@ -3,8 +3,8 @@
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
 <main class="wp-block-group entry-content">
 
-	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|50","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60)">
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|20","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60)">
 
 		<!-- wp:pattern {"slug":"wporg-learn-2024/front-page-content"} /-->
 

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

@@ -0,0 +1,17 @@
+<!-- wp:template-part {"slug":"header-second","className":"has-display-contents","tagName":"div"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
+<main class="wp-block-group entry-content">
+
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
+
+		<!-- wp:pattern {"slug":"wporg-learn-2024/search-all-content"} /-->
+
+	</div>
+	<!-- /wp:group -->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->