Block Search: Fixed the issue of width not updating to 25%

[amitraj2203]

What?

Fixes: #60414

Why?

In the Search block, when we put width 25% in the editor, it doesn't get applied on the frontend.

How?

I noticed that the search block has CSS set in the editor to ensure a minimum width of 220px because if the width goes beyond this value, it doesn't look good in terms of styling. Therefore, adding this to the frontend resolves the issue.

Testing Instructions

1. Open/Edit a Post
2. Add Search Block
3. Apply width - 25%, 50%, 75%, 100% or in px and see the result in both frontend and editor.

Testing Instructions for Keyboard

NIL

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

Hi @amitraj2203

I did not understand how the change solves that the setting doesn't work when you enter a pixel value?
Is this pull request not for #34469?

[amitraj2203]

Hi @carolinan, I created this PR for issue #60414. Now have fixed the issue where the Search block width setting did not work correctly the first time the px value was updated.
Also the Search block had a min-width of 220px in the editor, but it didn't have any min-width on the frontend. Applying the same min-width on the frontend fixes the 25% width issue, but it still constrains us from setting a width smaller than 220px.

After reviewing the issue #34469, I found a discussion about removing the min-width. By doing this, the initial width would still be 220px, but it would allow us to change the width to any value.

Additionally, on the frontend, the button block uses the styles of the default button, which reduces the width of the search input. Consequently, the Search block will have the same width as in the editor, but the ratio will differ due to the different button styles.

Screen.Recording.2024-06-04.at.1.52.29.PM.mov