Make WordPress Core

Opened 10 years ago

Last modified 3 years ago

#26940 new enhancement

Toolbar Search: Drop down instead of expanding

Reported by: georgestephanis's profile georgestephanis Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.8
Component: Toolbar Keywords: needs-patch
Focuses: ui Cc:


Stop sliding the entire menu bar contents needlessly, when it would be simpler (and possibly better for accessibility -- less needless movement on the screen) to just drop down a field the way the search field works in twentyfourteen.

This also makes the search more usable on a cluttered adminbar that's already prone to wrapping onto a second line.

Patch is not intended as the final version -- final version would use admin-bar.js to attach the onfocus and onfocusout events -- this is just intended as a proof of concept for UX testing.

Attachments (1)

26940.diff (7.3 KB) - added by georgestephanis 10 years ago.

Download all attachments as: .zip

Change History (9)

#1 @nacin
10 years ago

  • Summary changed from Admin Bar Search: Stop sliding! to Toolbar Search: Drop down instead of expanding

#2 @melchoyce
10 years ago

George asked me to give this patch a quick look-over for UI/UX stuff.

Overall, it looks good. The menu feels a little slow to appear, but I understand that it's acting the same way as the user dropdown, so maybe that's something we look at separately another time. Otherwise, I'd bump up the padding a bit to match the top/left padding in the user menu: (I think it's an extra 6px)

I'd also increase the width of the search bar to accommodate at least another 5 characters — right now it fits around 22 characters comfortable, when ideally we should allow for around 27 characters. (

I definitely like this better than the slide-out — it feels a lot less alarming.

#3 @SergeyBiryukov
10 years ago

  • Version changed from trunk to 3.8

#4 @chriscct7
9 years ago

  • Severity changed from minor to normal

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

7 years ago

#6 @melchoyce
7 years ago

  • Keywords ux-feedback removed

@georgestephanis Any interest in working on this again?

#7 @georgestephanis
7 years ago

Sure, I'll take a swing at it some evening this week.

#8 @sabernhardt
3 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Awaiting Review to Future Release

This might be easier (perhaps even without script) if the search icon is moved from the form element to a span within the label tag:

<label for="adminbar-search">
	<span class="ab-icon" aria-hidden="true"></span>
	<span class="screen-reader-text">Search</span>
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
Note: See TracTickets for help on using tickets.