Add Search bar to the homepage #2801

outdoor2kode · 2024-07-30T19:48:49Z

Resolves #2744

As the screencast shows, when searching on the homepage, it goes to the newly added template - search-front-page. When switching to another content type, "course" or "lesson", the behavior remains as is - stay in the archive-course, or archive-lesson templates, displaying their own dedicated UI and filters. And it switches back to the search-front-page template when the content type "Any" is chosen.

The unclear and confusing wording of the filter mentioned in #2787 will be addressed in another PR.

Please also feel free to provide feedback on the flow or design. For example like including a label somewhere on the card to allow users to know whether they are looking at a Course or a Lesson, or do we still want the big text on top of the search page when there's already a text functioning similarly under the search bar. @ndiego @kathrynwp @WordPress/meta-design

Big text	Text under the search bar

Testing

Search on the homepage.
Play around with various filters.
Search on the Course / Lesson / Learning pathway archive page, and the results should be on the same page (ie, the header, hero section as well as the filters should still be there)

Screencast

search.mov

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

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

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

ndiego · 2024-07-30T19:55:35Z

Thanks @renintw. Regarding the placement of the Search on the Homepage, can we mirror the placement on Forums exactly? This will provide consistency. In the video, it looks like there is a bit of extra padding/margin at the top.

outdoor2kode · 2024-07-30T19:59:44Z

can we mirror the placement on Forums exactly

Oh, no problem, I was referring to the Showcase, will change that. And it appears that Plugins also needs an update.

ndiego · 2024-07-30T20:03:13Z

Oh, no problem, I was referring to the Showcase, will change that. And it appears that Plugins also needs an update.

Hmm, you are right. It looks like the search field on pages in the Learn category on WordPress.org is in a slightly different spot than those under Extend and Showcase. My recommendation is we update it so it's similar to Forums and then address post launch if we want to make everything consistent.

do we still want the big text on top of the search page when there's already a text functioning similarly under the search bar.

I like the text underneath the search field, but I do think the page needs a title. What if we went with "Search Learn WordPress" as a static title?

kathrynwp · 2024-07-30T20:13:51Z

I like "Search for resources", what do you think @kathrynwp?

Agreed, I like it!

kathrynwp · 2024-07-30T20:14:25Z

What if we went with "Search Learn WordPress" as a static title?

I like this for a static title, too.

ndiego · 2024-07-30T20:19:00Z

The only thing I am unsure about is whether we need some sort of label distinguishing between courses and lessons. Visually, I think it's relatively clear which one is a course, but less clear that a lesson is a lesson based on the visuals, if that makes sense. I personally would be fine leaving it the way it is, but I could easily be swayed in the other direction. 😅

Course	Lesson

kathrynwp · 2024-07-30T20:37:23Z

@ndiego Definitely see your point. Personally I think this should wait til after launch, as there are a few related issues that relate to distinguishing between:

different audiences - see: Feedback - Consider adding the Audience tag #2690
lessons with the same name / what course a lesson belongs to - see: Lessons archive pages - Better distinguish between lessons with the same name #2767

...and they should probably all be dealt with holistically.

outdoor2kode · 2024-07-30T20:46:58Z

can we mirror the placement on Forums exactly

39b64fa

Learn	Forum

What if we went with "Search Learn WordPress" as a static title?

I like this for a static title, too.

3a60523

Version A or B? Version A has the same gap as the homepage. Version B has the same gap as the course archive. The current implementation is version B.

Version A	Version B	Course Archive

ndiego · 2024-07-30T20:56:17Z

Version A or B? Version A has the same gap as the homepage. Version B has the same gap as the course archive.

The homepage looks good, and I would go with Version B.

ryelle

The search is working, but I had a few other comments about some details.

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

ryelle · 2024-07-30T21:16:10Z

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


 	<!-- 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} /-->


Do we really need the content type dropdown on Lesson & Course archives?

Good question. I added it because if selecting a course or lesson from the search all page, without this filter, you can't go back from the course or lesson archive. Seems to be somewhat inconsistent in the searching process starting from homepage.

Ah, I see, if you do the search first and then filter by type, it moves over to the archive template for those search results.

IMO, people can use the back button to get back to all search results if they filter the post type— it's more confusing to me just landing on /lessons/ and seeing the content type dropdown, since it brings you to a totally different page (also with different filtering options) if you use it.

Open to other opinions though, cc @ndiego @kathrynwp (not sure who else has input here)

I think both options are fine with me. What might ultimately influence my decision is which path the users use most frequently. If most users explore the site from the homepage search, then having a content type filter on the /lessons/ or /courses/ pages would provide a better experience IMO.

Alternatively, we could consider showing the filter on the /lessons/ or /courses/ pages only when users use the content type filter from the all search results page and are redirected to those pages. If they visit those pages directly, the filter would not be displayed.

I've removed the filter from the lesson and course archive for now. Let me know if we want it back.
b6be6ea

IMO, people can use the back button to get back to all search results if they filter the post type— it's more confusing to me just landing on /lessons/ and seeing the content type dropdown, since it brings you to a totally different page (also with different filtering options) if you use it.

That's a good point. I have no strong opinions though. I found it nice that I could switch over to Courses from Lessons, but I'm not a typical user.

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

kathrynwp · 2024-07-31T14:15:54Z

Do we really need the content type dropdown on Lesson & Course archives?

I think this could be a useful toggle to have, although not strictly necessary.

ryelle

Looking good! I still have a few minor code improvement suggestions around the filter code.

ryelle · 2024-07-31T14:33:15Z

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

+	);
+
+	$selected_slug = $wp_query->get( 'post_type' ) ? $wp_query->get( 'post_type' ) : 'any';
+	$label = get_label_by_slug( $selected_slug, $options );


Since these are keyed by the slug, do you need an extra function? I think this should work for both here and get_student_course_options (though the fallback there should be all).

Suggested change

$label = get_label_by_slug( $selected_slug, $options );

$label = $options[ $selected_slug ] ?? $options['any'];

yeah, you're exactly right, those logic are unnecessary..
I removed the ?? $options['any']; as $options[ $selected_slug ] will always have a value.
18c28a6

It will, but it could be something not in the list — if someone manually types in a post type, for example. Adding the fallback works as a guard, just in case.

ah, yes. Missed the fact that it fetches the value from the URL. ae09e8e

ryelle · 2024-07-31T14:45:12Z

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

+	$path = isset( $parsed_url['path'] ) ? $parsed_url['path'] : '';
+	$filtered_path = preg_replace( '#/page/\d+/?$#', '', $path );
+
+	return home_url() . $filtered_path;


You can pass the filtered_path to home_url as a parameter, it accepts a path parameter.

Suggested change

return home_url() . $filtered_path;

return home_url( $filtered_path );

Thanks! 999b6c2

ryelle · 2024-07-31T14:52:27Z

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

+	$current_url = home_url( add_query_arg( array(), $wp->request ) );
+
+	// Remove the page query var.
+	// If the path retains "page," the filtered result might be a 404 page.
+	$parsed_url = wp_parse_url( $current_url );
+	$path = isset( $parsed_url['path'] ) ? $parsed_url['path'] : '';


I believe $wp->request will be just the path, no query args, so I don't think you need to do this extra parsing.

ryelle · 2024-07-31T14:54:30Z

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

+ * 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.


Documentation improvements like this could be committed right to trunk IMO, to avoid extra changes in PRs like this. No change requested for this PR, just a suggestion for the future 🙂

Noted, thanks!

ryelle

Great, I think this is good to merge now 👍🏻

outdoor2kode commented Jul 30, 2024

View reviewed changes

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

outdoor2kode commented Jul 30, 2024

View reviewed changes

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

outdoor2kode commented Jul 30, 2024

View reviewed changes

wp-content/themes/pub/wporg-learn-2024/functions.php Outdated Show resolved Hide resolved

outdoor2kode requested a review from ryelle July 30, 2024 19:54

outdoor2kode self-assigned this Jul 30, 2024

outdoor2kode added [Type] Enhancement New feature request for the Learn website. [Component] Learn Theme Website development issues related to the Learn theme. labels Jul 30, 2024

outdoor2kode added this to the Learning Pathways launch milestone Jul 30, 2024

ryelle requested changes Jul 30, 2024

View reviewed changes

outdoor2kode force-pushed the 2744-add-search-bar branch from 12a21f1 to 33e992c Compare July 31, 2024 13:22

outdoor2kode added 10 commits July 31, 2024 23:52

Add the search bar to the front page

2f67a45

Add search result page

880765e

Add content type filter

6dcdefe

Fix filter on last page would result in 404 page

abfd9da

Change template name to search-all

adc6e28

Adjust the space between search box and header

0b983a4

Add "Search Learn WordPress" as a static title

4d9017c

Update search all title.

0aaf23e

Remove content type filter for archive course/lesson

9928f3c

Add comment for modify_header_template_part

fab2573

outdoor2kode added 2 commits July 31, 2024 23:53

Fix filter on pagination would result in 404 page - enhanced

731ec92

Make search options translatable.

040de3e

outdoor2kode force-pushed the 2744-add-search-bar branch from d1f703d to 040de3e Compare July 31, 2024 14:54

ryelle reviewed Jul 31, 2024

View reviewed changes

outdoor2kode added 4 commits August 1, 2024 00:15

Pass the filtered_path to home_url as a parameter

999b6c2

Update get_filtered_url

bccee01

Remove redundant function

18c28a6

Add fallback to $options[ $selected_slug ]

ae09e8e

ryelle approved these changes Jul 31, 2024

View reviewed changes

outdoor2kode merged commit 5bec934 into trunk Jul 31, 2024

outdoor2kode deleted the 2744-add-search-bar branch July 31, 2024 16:08

	$label = get_label_by_slug( $selected_slug, $options );
	$label = $options[ $selected_slug ] ?? $options['any'];

	return home_url() . $filtered_path;
	return home_url( $filtered_path );

		* 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.

Add Search bar to the homepage #2801

Add Search bar to the homepage #2801

Uh oh!

Conversation

outdoor2kode commented Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Screencast

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ndiego commented Jul 30, 2024

Uh oh!

outdoor2kode commented Jul 30, 2024

Uh oh!

ndiego commented Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kathrynwp commented Jul 30, 2024

Uh oh!

kathrynwp commented Jul 30, 2024

Uh oh!

ndiego commented Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kathrynwp commented Jul 30, 2024

Uh oh!

outdoor2kode commented Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ndiego commented Jul 30, 2024

Uh oh!

ryelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

outdoor2kode Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kathrynwp commented Jul 31, 2024

Uh oh!

ryelle left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryelle left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

outdoor2kode commented Jul 30, 2024 •

edited

Loading

ndiego commented Jul 30, 2024 •

edited

Loading

ndiego commented Jul 30, 2024 •

edited

Loading

outdoor2kode commented Jul 30, 2024 •

edited

Loading

outdoor2kode Jul 30, 2024 •

edited

Loading