Navigation > add search block > description is mandatory and its style cannot be deactivated

[Marc-pi]

Description

related to #41549

• block background color is different between Site Editor view vs Front side
• description is mandatory : people cannot only set the search icon within the nav
• if no description is set, the search block takes too much place !!! and there is no way to reduce its width (just display the icon)
• border is always visible

IMHO, a quick improvement is needed for 6.2 for user UX, to make it usable / clean (to not make any new WP user angry)
ping @annezazu (FSE Outreach)

Step-by-step reproduction instructions

Just add the search block within the nav component (here in the header partial part)

Screenshots, screen recording, code snippet

Site editor / nav view (edit partial part / header)	Front view

Environment info

• WP 6.1.1
• Gutenberg 15.2.0
• TT2 theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[getdave]

Thanks for reporting this. I trust you will understand I've removed the term "ugly" from the Issue title as it is quite emotive.

Question: would you be able to verify whether this is a bug that was present in WP 6.1 or is it something introduced during the 6.2 cycle?

I appreciate these UX issues can be frustrating, but there are many priorities and thus we have to be selective in which issues we will focus on. Of course, a pull request to fix this Issue would be greatly received by the community 🙇

[Marc-pi]

• i've just tested the new nav component in real condition, as if i were a newbie just onboarding on wordpress (like my customers).
• Improving the navigation component was indeed on top target for 6.2,
• Adding the search in the navigation is a very common usage (quite every website)
• A quick fix on this is a quickwin for the project, the probability that a wp user is struggled by this point is high!

So i do think this must be fixed asap, just to credit the hard work done by everyone for this release and ease the Gutenberg adoption. Having such a use case not working just discredits the efforts.
We stated that phase 2 is about to be closed, for me many small areas like this one need to be fixed.
Of course, we can fix this with custom css, but here the issue is more about the text placeholder.
I do know everyone is busy, but this point is major if we consider promoting Gutenberg is our target !

Moreover, I do think we need to test GB through the whole editing process, now that single components are quite all mature/done, to be sure that we cover common use case with efficiency.

[annezazu]

I tried replicating this with WP 6.6.1 and GB 19.1 using this WordPress playground link and I wasn't able to replicate:

search.button.color.mov

Specifically, the colors matched in the editor and on the front end. I'm going to close this out as a result but please let me know if I missed something about this issue.

[Marc-pi]

@annezazu things have been improved in between since Gutenberg 15.2 ;-à
there is just an inconcistencies in the Editor when clicking on the "button only" option, we have to insist and click twice to make it effective, but we can live with it
we can close

[annezazu]

@Marc-pi ah ha! I see some oddness there and opened a new issue for that here :)