Search Block: Button Inside and Outside options behave similarly

[Rishit30G]

Description

Currently, the ‘Button Inside’ and ‘Button Outside’ options in the search block function the same way, with the only difference being the border. We should reconsider the ‘Button Inside’ implementation, as it should place the button inside the input field. However, it is currently still positioned outside. Additionally, if the border is removed from the ‘Button Inside’ option, it becomes identical to the ‘Button Outside’ option.

Step-by-step reproduction instructions

1. Create a new post.
2. Add the Search block to the post.
3. In the Block Toolbar, click on the 'Change Position Button' option.
4. From the dropdown, select 'Button Outside'.
5. Now, switch to 'Button Inside' from the same dropdown.
6. Observe that the only noticeable difference between the two options is a border enclosing the search input and button when 'Button Inside' is selected.
7. To remove this border, go to Styles > Border and set the Border value to 0 px.
8. Notice that now both the 'Button Inside' and 'Button Outside' options appear almost identical.

Screenshots, screen recording, code snippet

Screen.Recording.2025-02-26.at.11.07.53.AM.mov

Environment info

• WordPress 6.7.2
• Gutenberg 20.3.2

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Rishit30G]

Sharing a screenshot of how the current implementation can be improved:

First Search: Suggested Implementation for Button Inside
Second Search: Current Implementation for Button Inside

---

• The cross button will be hidden, which can be bought to the left of the button but it's part of the input and not explicitly available, needs some searching on the <input type="submit"> 🔍
• Text can be restricted to move underneath the button by giving some right padding

Screenshot of potential problems that can occur:

Would appreciate some discussions and views on this!

[carolinan]

as it should place the button inside the input field.

Hopefully needless to say, but a button element can not be placed inside an input field.

Even if it is only moved with CSS, it would take a large effort to make it accessible, as seen in the screenshot.

[Rishit30G]

Thanks @carolinan for sharing your views,

Even if it is only moved with CSS, it would take a large effort to make it accessible, as seen in the screenshot.

Agree with this point, that's why I shared the caveats as well with this approach 🙂
However, from a user’s perspective, it feels more intuitive for the button to be placed inside the text box when the 'Button Inside' option is selected.
If the drawbacks outweigh the benefits, we should reconsider. 👍🏻

[t-hamano]

from a user’s perspective, it feels more intuitive for the button to be placed inside the text box when the 'Button Inside' option is selected.

Can you elaborate a bit on why this feels intuitive to you?

Additionally, I don't think we should tolerate approaches that create accessibility issues.

[carolinan]

I think we "shot ourselves in the foot" with the decision to make the color options only apply to the button. That is also one of the reasons why the design in the screenshot can not be made with only the search block settings.

It can come closer by wrapping it in a group block and adding the colors and border, but not all the way.
And styling forms is discussed here #34198

[Rishit30G]

Sure @t-hamano, so from a user’s perspective, the term “Button Inside” naturally suggests that the button is placed within the input field. This interpretation is further reinforced by the icon associated with it.

Additionally, when exploring widely available design patterns on the internet for buttons inside input fields, the “Suggested Implementation” aligns more closely with common design practices compared to the “Current Implementation.” This makes it a more intuitive and expected approach for users.

---

Additionally, I don't think we should tolerate approaches that create accessibility issues.

In complete support of this, we can definitely close the issue if we feel it would be causing more problem than solving some minor UI/UX changes, I just wanted to bring this up to share some insights on the current implementation

Thanks for understanding!

[t-hamano]

so from a user’s perspective, the term “Button Inside” naturally suggests that the button is placed within the input field. This interpretation is further reinforced by the icon associated with it.

This will be interpreted differently by different people:

• Some will guess that the button will overlay the input element.
• Others will guess that the button will be placed within the visual border.

Additionally, when exploring widely available design patterns on the internet for buttons inside input fields, the “Suggested Implementation” aligns more closely with common design practices compared to the “Current Implementation.” This makes it a more intuitive and expected approach for users.

Do you have any concrete examples of this? I just want to understand what benefits would be gained by placing a button inside an input element 🤔

[carolinan]

Take this example from the GitHub search bar at the top of this page on desktop width:
The button is not inside the input: Buttons inside inputs is not valid HTML.