From 5bec9347d690084b07d82d2882940475694c88dc Mon Sep 17 00:00:00 2001 From: Ren <18050944+renintw@users.noreply.github.com> Date: Thu, 1 Aug 2024 00:08:35 +0800 Subject: [PATCH] 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 --- .../themes/pub/wporg-learn-2024/functions.php | 22 ++++++ .../pub/wporg-learn-2024/inc/block-config.php | 68 ++++++++++++------- .../pub/wporg-learn-2024/inc/block-hooks.php | 2 + .../patterns/front-page-content.php | 10 +++ .../patterns/search-all-content.php | 63 +++++++++++++++++ .../templates/front-page.html | 4 +- .../templates/search-all.html | 17 +++++ 7 files changed, 159 insertions(+), 27 deletions(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/patterns/search-all-content.php create mode 100644 wp-content/themes/pub/wporg-learn-2024/templates/search-all.html diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index 2532a532f..d8058d1ee 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/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. * diff --git a/wp-content/themes/pub/wporg-learn-2024/inc/block-config.php b/wp-content/themes/pub/wporg-learn-2024/inc/block-config.php index c71798916..0bdd26e6f 100644 --- a/wp-content/themes/pub/wporg-learn-2024/inc/block-config.php +++ b/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 ), ); diff --git a/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php b/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php index 2e04c329e..e384201b1 100644 --- a/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php +++ b/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. * diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php index c4127543f..328885d22 100644 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php @@ -7,6 +7,16 @@ ?> + +
+ +
+ + + + + +

diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/search-all-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/search-all-content.php new file mode 100644 index 000000000..8096d4ab4 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/search-all-content.php @@ -0,0 +1,63 @@ + + + +
+ + +

+ + +
+ + + +
+ + + + +
+ + +
+ + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html b/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html index 12a49a00f..95880eb68 100644 --- a/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html +++ b/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html @@ -3,8 +3,8 @@
- -
+ +
diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/search-all.html b/wp-content/themes/pub/wporg-learn-2024/templates/search-all.html new file mode 100644 index 000000000..a5cede22a --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/templates/search-all.html @@ -0,0 +1,17 @@ + + + +
+ + +
+ + + +
+ + +
+ + +