Opened 37 hours ago
Last modified 37 hours ago
#65221 new enhancement
Unify the UI of the frontend search with command palette
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Toolbar | Keywords: | has-patch |
| Focuses: | ui, css | Cc: |
Description
This is a continuation of https://core.trac.wordpress.org/ticket/65219. After making the command palette more prominent in the center of the admin bar, let's also make the frontend search box to look the same visually.
For now, unlike the command palette which opens an overlay modal, we can make the frontend search box to be a true input form, following the current behavior. In the future, maybe we can unify the UX more consistently.
Change History (1)
This ticket was mentioned in PR #11803 on WordPress/wordpress-develop by @fushar.
37 hours ago
#1
- Keywords has-patch added
Note: See
TracTickets for help on using
tickets.
Trac ticket: https://core.trac.wordpress.org/ticket/65221
### Summary
This PR updates the frontend search admin bar node to make it similar with the command palette changes from https://github.com/WordPress/wordpress-develop/pull/11796. Now, both the "search" functionalities have more consistent UI.
### Desktop
Before
After
https://github.com/user-attachments/assets/25a30918-43d8-463e-885f-7488253cfdbd
### Mobile
https://github.com/user-attachments/assets/0af5e0db-8da8-4fde-90eb-bd25d11bc21c
### Alternative considered
I considered making the search input collapsed first as per the current behavior, but move it to the left of the avatar node for more consistency, as follows:
https://github.com/user-attachments/assets/089e1f33-e283-4664-bcb5-e882205d062f
But I believe the proposed solution is better.
## Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.7
Used for: CSS implementation under my supervision.