Move the search bar control into the site-title. #75

StevenDufresne · 2022-06-03T06:16:24Z

This PR is an experiment related to #40. Using the pattern directory & learn as the model, move the search bar into the site title.

Example

Screenshots

Function/Class/Hook

Before	After

`is_page( 'reference' )`

I removed everything below the breadcrumb and above the 2 boxes since I didn't really know what to do with the layout and I'm not convinced they are used much.

Before	After

`is_search()`

Before	After

`is_handbook && is_search()`

Before	After

renintw · 2022-06-07T19:48:29Z

This looks great!

Done testing on Mac/Chrome & Firefox with different screen sizes.
Some thoughts:

The filter is removed from the API detail page, I think it's ok to me as it's still kept on the reference home page and I personally didn't use that filter that much. But not sure if it's a convenient tool for a veteran developer?
I saw there's a tiny space under the search icon and there's no outline style when clicking on it, perhaps we can give it some styles just like the one in the pattern directory?
It would be great if we can change the cursor to pointer for these two icons
I seem not able to see the search bar on the searching page like your screenshot shows
I noted that if I'd like to get rid of the search suggestion block, I need to use the mouse to click elsewhere on the page instead of just pressing the ESC button. If so, users need to select the filter options first before typing in the search or they must use a mouse. I think in the original UX, the suggestion block can be gotten rid of by pressing ESC.

5a. Also tested on Firefox, and the suggestion block can be closed by pressing ESC, but it has a weird behavior that after closing it, it will pop up again.
Curious about what "This needs some clean up" means in the Reference Home screenshot, does it mean that you expect some new style design for it?
Commit message typepo: Move searhc into site title

StevenDufresne · 2022-06-07T23:58:59Z

Thanks for the detailed review! I should have been more clear. The code needs cleaning up and some of the UI interactions/layouts are still a bit rough.

I am interested to get this approach validated since we don't have an agreed-on path forward on the search UX. Do you think this is a good idea (moving the search bar)? Is it an improvement?

renintw · 2022-06-08T03:48:57Z

To me, it's an improvement and I'm probably more into this new layout for 3 reasons.

It's more consistent with the design of other WP sites.
I like it I don't have to toggle on the search bar every time, it's an extra step as far as I'm concerned.
I like the new UI, it's more obvious and looks nicer by putting it in the title header.

StevenDufresne · 2022-06-09T05:15:49Z

@renintw Ok, cycling back to your feedback. I think I addressed most of them except:

I noted that if I'd like to get rid of the search suggestion block, I need to use the mouse to click elsewhere on the page instead of just pressing the ESC button. If so, users need to select the filter options first before typing in the search or they must use a mouse. I think in the original UX, the suggestion block can be gotten rid of by pressing ESC.

This is an external plugin and I suspect this functionality is already broken. We can address it in a later PR.

ryelle

Great update, this is much more discoverable than the little 🔍 tab.

I noted that if I'd like to get rid of the search suggestion block, I need to use the mouse to click elsewhere on the page instead of just pressing the ESC button. If so, users need to select the filter options first before typing in the search or they must use a mouse. I think in the original UX, the suggestion block can be gotten rid of by pressing ESC.

For what it's worth, using ESC to close the dropdown is working for me, in both Chrome & Firefox.

I really like this UI for the checked element 💯

I did notice the the autocomplete dropdown is now applied to the other searches too, like here in the block editor handbook. Hitting enter (ignoring the suggestions) does direct me to the correct search results page (ex, /block-editor/?s=block), so I'd guess the autocomplete JS is a little too overzealous.

ryelle · 2022-06-09T19:25:44Z

source/wp-content/themes/wporg-developer/header.php

+			<nav id="site-navigation" class="main-navigation" role="navigation">
+				<button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg' ); ?>"></button>
+				<?php
+				$active_menu = is_post_type_archive( 'command' ) || is_singular( 'command' ) ? 'devhub-cli-menu' : 'devhub-menu';
+				wp_nav_menu( array(
+					'theme_location'  => $active_menu,
+					'container_class' => 'menu-container',
+					'container_id'    => 'primary-menu',
+				) ); ?>
+			</nav>


If I add items to this menu, they show up kind of unexpectedly:

It looks like this menu is empty on production, so perhaps it's fine, but it might be good to at least make this presentable (or remove the menu). That can happen in a followup PR.

StevenDufresne · 2022-06-10T01:40:27Z

I did notice the the autocomplete dropdown is now applied to the other searches too, like here in the block editor handbook. Hitting enter (ignoring the suggestions) does direct me to the correct search results page (ex, /block-editor/?s=block), so I'd guess the autocomplete JS is a little too overzealous.

This must be a configuration issue. On the live site, the search gets class="searchform searchform-handbook" and the js specifically excludes searchform-handbook search inputs.

StevenDufresne · 2022-06-10T02:22:38Z

I added code to hide the menu on the homepage/reference, although the menu is still stacked under the search bar when you're looking at a page with the searchbar beside the site-title. Since production doesn't have a menu right now, as @ryelle mentions we can probably just follow it up later.

@renintw I had to squash merge because of conflicts introduced in #40. Do you mind double-checking to make sure I didn't overwrite any changes? I had to manually merge them. 🙏

renintw · 2022-06-10T14:18:14Z

I noted that if I'd like to get rid of the search suggestion block, I need to use the mouse to click elsewhere on the page instead of just pressing the ESC button. If so, users need to select the filter options first before typing in the search or they must use a mouse. I think in the original UX, the suggestion block can be gotten rid of by pressing ESC.

For what it's worth, using ESC to close the dropdown is working for me, in both Chrome & Firefox.

I should have been more clear. I can use ESC to close dropdown in Chrome as well, but in Chrome it also clears the user input while Firefox doesn't.
It would affect one scenario that if users want to select filter types below, they need to use the mouse to close the dropdown or select the types before inputting.

Note: A possible solution is mentioned in #57

renintw

Looks good to me, It's nice!

I've added three commits to adjust styles and a11y and also have rebased to trunk.
Original small style defect (focus state):

The search.js file is not needed anymore, since the tab UI was removed. These CSS selectors are also not used in the markup anymore.

ryelle · 2022-06-10T18:27:02Z

This must be a configuration issue. On the live site, the search gets class="searchform searchform-handbook" and the js specifically excludes searchform-handbook search inputs.

It wasn't a config issue, this PR was removing the logic that added the class. I brought it back & styled the search a little more. I also removed some unused code now that we don't have the drawer-search UI.

I'm going to merge this so it doesn't block other work.

iandunn · 2022-06-10T20:23:31Z

Anyone else seeing this in Firefox?

( on trunk after running build, at 1900px )

Oddly, the horizontal bar goes away in responsive mode.

iandunn · 2022-06-10T20:59:17Z

I included a fix for ^ in #114

StevenDufresne · 2022-06-12T22:54:45Z

Thanks for jumping in on this all!

StevenDufresne mentioned this pull request Jun 3, 2022

WIP: display a kinda-sorta sidebar menu on function reference pages #73

Closed

renintw mentioned this pull request Jun 6, 2022

Enhance search bar UX #83

Merged

StevenDufresne force-pushed the try/search-in-site-title branch 2 times, most recently from e6094c5 to b617871 Compare June 7, 2022 02:57

StevenDufresne marked this pull request as ready for review June 9, 2022 06:15

StevenDufresne requested review from ryelle, renintw and adamwoodnz June 9, 2022 06:15

ryelle reviewed Jun 9, 2022

View reviewed changes

StevenDufresne force-pushed the try/search-in-site-title branch from 5298c9c to 74a6cfb Compare June 10, 2022 02:11

StevenDufresne force-pushed the try/search-in-site-title branch from 74a6cfb to 236de42 Compare June 10, 2022 02:35

StevenDufresne changed the title ~~Experiment: Move the search bar control into the site-title.~~ Move the search bar control into the site-title. Jun 10, 2022

StevenDufresne added this to the Docs Sprint milestone Jun 10, 2022

StevenDufresne and others added 6 commits June 10, 2022 22:36

Add searchbar into a title.

1781b76

Re-add class that was killed by merge.

c9c00b7

Only show 'code reference' when we are on that page.

2251ae5

Fix button focus style and adjust a11y

ac69995

Add curosr for filter checkbox

0dfdf01

Fix linting error

1c1cac9

renintw force-pushed the try/search-in-site-title branch from 236de42 to 1c1cac9 Compare June 10, 2022 15:54

renintw approved these changes Jun 10, 2022

View reviewed changes

renintw mentioned this pull request Jun 10, 2022

Search autocomplete covers filter options #57

Open

Remove unused code

d954ad6

The search.js file is not needed anymore, since the tab UI was removed. These CSS selectors are also not used in the markup anymore.

iandunn mentioned this pull request Jun 10, 2022

Move search filters above input so not hidden behind autocomplete. #114

Open

ryelle added 2 commits June 10, 2022 14:22

Add back the searchform-handbook class

3a26838

Update the search placeholder for handbooks

482e8ed

ryelle merged commit 6197ea3 into trunk Jun 10, 2022

ryelle deleted the try/search-in-site-title branch June 10, 2022 18:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move the search bar control into the site-title. #75

Move the search bar control into the site-title. #75

StevenDufresne commented Jun 3, 2022 •

edited

Loading

renintw commented Jun 7, 2022

StevenDufresne commented Jun 7, 2022

renintw commented Jun 8, 2022 •

edited

Loading

StevenDufresne commented Jun 9, 2022

ryelle left a comment

ryelle Jun 9, 2022

StevenDufresne commented Jun 10, 2022

StevenDufresne commented Jun 10, 2022

renintw commented Jun 10, 2022 •

edited

Loading

renintw left a comment •

edited

Loading

ryelle commented Jun 10, 2022

iandunn commented Jun 10, 2022

iandunn commented Jun 10, 2022

StevenDufresne commented Jun 12, 2022

Move the search bar control into the site-title. #75

Move the search bar control into the site-title. #75

Conversation

StevenDufresne commented Jun 3, 2022 • edited Loading

Screenshots

Function/Class/Hook

is_page( 'reference' )

is_search()

is_handbook && is_search()

renintw commented Jun 7, 2022

StevenDufresne commented Jun 7, 2022

renintw commented Jun 8, 2022 • edited Loading

StevenDufresne commented Jun 9, 2022

ryelle left a comment

Choose a reason for hiding this comment

ryelle Jun 9, 2022

Choose a reason for hiding this comment

StevenDufresne commented Jun 10, 2022

StevenDufresne commented Jun 10, 2022

renintw commented Jun 10, 2022 • edited Loading

renintw left a comment • edited Loading

Choose a reason for hiding this comment

ryelle commented Jun 10, 2022

iandunn commented Jun 10, 2022

iandunn commented Jun 10, 2022

StevenDufresne commented Jun 12, 2022

StevenDufresne commented Jun 3, 2022 •

edited

Loading

`is_page( 'reference' )`

`is_search()`

`is_handbook && is_search()`

renintw commented Jun 8, 2022 •

edited

Loading

renintw commented Jun 10, 2022 •

edited

Loading

renintw left a comment •

edited

Loading