Search Block: changes to width below 75% aren't reflected in editor

[annezazu]

Description

This was found as part of the ninth call for testing with the FSE Outreach Program:

The search bar width section, only 100% and 75% is working for me, the 25% and 50% shows the same width as that of 75%. The custom width section for users to enter manually doesn’t show any change below 92%. So I guess that is the default width for all other settings.

search.block.sizing.mov

Step-by-step reproduction instructions

1. Add a Search Block within a Navigation block
2. Open the sidebar settings and try to set the width to something other than 75%.
3. See that the block doesn't reflect any changes in the editor.
4. See changes reflected on the front end.

Screenshots, screen recording, code snippet

Editor:

Front end:

Environment info

• WordPress 5.8
• Gutenberg 11.4
• TT1 Blocks
• Desktop MacOS

Pre-checks

• I have searched the existing issues.
• I have tested with all plugins deactivated except Gutenberg.

[jasmussen]

Looks like there's a 220px min-width applied to the search box, making it impossible to make it smaller than that. I'm happy to remove that min-width if there's agreement, but I'm wondering why that was added in the first place. @kjellr I recall you working a lot with the search block and width presets, do you have any insights?

[kjellr]

I think the min-width makes sense in general, but it becomes a problem when it interferes with the controls. Can we keep the min-width by default, but lose it/override it when someone chooses a specific width value?

[jasmussen]

Good thought. It's a tricky balance of providing intuitive behavior along with smart defaults. CSS obviously has both min-widht and width properties to give you the control, a nuance probably best not surfaced here. Would a solution be to set both min-width and width properties at the same time?

[kjellr]

I think so — in this case, when you set it to be 25%, you want it to be exactly 25%. So setting both rules would make that happen.