Lessons & Courses archive - Provide a way to clear search to view all lessons/courses again

[kathrynwp]

Type of feedback

//dev

Description

After performing a search on the lessons or courses archive page, I haven't found a way to clear the search, in order to view all lessons or courses again.

Step-by-step reproduction instructions

1. Visit the lessons archive page at https://learn.wordpress.org/lessons/ or the courses archive page at https://learn.wordpress.org/courses/
2. Put a search term like blocks in the search box and click the magnifying glass
3. Now I would like to try to view all lessons or courses again... remove the word blocks from the search field and click the magnifying glass again.

Result

The words Please fill out this field appear below the search box, and the lessons/courses still remain filtered, showing only a subset. Even refreshing the page in the browser does not clear the search.

Expected

There needs to be a way to clear the search so a visitor can see all lessons and courses.

Screenshots or screen recording (optional)

learn-clear-search.mov

[adamwoodnz]

Entering the search is a navigation, so going back clears it. But I think this is a valid point. It's the same UX across our others sites, eg. https://wordpress.org/themes/search/business/

@WordPress/meta-design have we considered how this might be solved?

[fcoveram]

It is a point we have discussed when talking about the search and filter flow component for the whole site.

Since most sections in the site are going under an style refresh, I would keep this flow as is include it once we start addressing the redesign of general flows in the next version.

We could consider a temporary solution that adds a "clear" button next to the search input that takes the user back to the archive page, but if the implementation can't be applied to all repositories (Showcase, Themes, Plugins, and Patterns), then I would continue as is.

I also noticed that the search input keeps the text typed when going back from the browser's back action. Clearing that would help convey the feeling of landing on a page without a search.

[kathrynwp]

@adamwoodnz Thanks for pointing out that this is site-wide and not just a Learn issue! What do you mean by "going back clears it"?

@fcoveram I would vote very strongly for a "Clear" button.

[adamwoodnz]

@adamwoodnz Thanks for pointing out that this is site-wide and not just a Learn issue! What do you mean by "going back clears it"?

When you submit a search you navigate to a reloaded page with the search term in the url, eg. ?s=blocks. If you go back a step in your browser navigation history (ie. using the back button), you'll go back to the initial page state with no search.

[kathrynwp]

@adamwoodnz Ah, got it. I'm not sure it would be a best practice to have to rely on browser's "back" button in order to clear a search. It's also not very intuitive – at least to me! I tried a lot of things to clear the search but not that.

[fcoveram]

The back button is not for clearing the search but for going back to the previous page where there is no search.

I think a possible interim solution relies on weighing the technical feasibility and the times involved. Please correct me if I'm wrong, and your thoughts on the idea shared here @adamwoodnz

[kathrynwp]

The back button is not for clearing the search but for going back to the previous page where there is no search.

Yep, I get that. Was just shorthand for "I'm not sure it would be a best practice to have to rely on browser's "back" button in order to reach a page from which a user could then return to the page with the search box, in order to perform a new search." ;-)

[adamwoodnz]

I also noticed that the search input keeps the text typed when going back from the browser's back action. Clearing that would help convey the feeling of landing on a page without a search.

This behaviour happens across multiple browsers, and across our sites, and I'm not sure whether it's just default browser behaviour to remember search terms, or a WP thing. AFAICS we don't have custom code to do this.

We could consider a temporary solution that adds a "clear" button next to the search input that takes the user back to the archive page, but if the implementation can't be applied to all repositories (Showcase, Themes, Plugins, and Patterns), then I would continue as is.

I've tested, and a 'Clear' link would work, as it would provide a new navigation rather than a back navigation. At this point I don't think we have time to update all the sites to be consistent though.