Search block styles in the style variations, option 1

[carolinan]

Description

This PR changes the border radius of the search block button and search input field.
It also sets the border color of the search input field to accent color 6, the color with the opacity.
In one variation, it also updates the font family for the button.

With this option, the input field styles are limited to this single block, and managed in multiple theme.json files.

Screenshots
Noon, after

Dusk, after:

Testing Instructions

Add a search form.
Confirm that the style matches the expectations listed in this issue: #485
Repeat the test for all style variations

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.

Note

The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[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: carolinan <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: beafialho <[email protected]>

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

[beafialho]

I'm having issues with my testing setup and I don't see the same as your screenshot 😞 However, if that's how it looks for you, it's looking as intended.

[carolinan]

Yes the shadow for example is working well for me on the search block button.

But I am concerned about how well the border radius on the input works with other inputs, mainly the comment form which always has a border radius of 4px.

[carolinan]

Like in this screenshot

[beafialho]

the comment form which always has a border radius of 4px.

Visually, the comment form radius should inherit the styles of each variation.

Also, if we could remove this option for the search block, it would be good. It looks less than ideal in every variation.

[carolinan]

There is no way for the theme to remove this option, that I am aware of 🤔 Not even with PHP or JavaScript.

[carolinan]

Visually, the comment form radius should inherit the styles of each variation.

I agree with this. Short term I can try to add it to this PR.

I am still thinking of how we could do this for all inputs including the third party blocks as requested here:
#484. Yes, I opened this issue, but because it was requested by a user on Twitter.
In case you missed it, especially the select list looks bad in my opinion.

[beafialho]

Yes, I saw that. It would be great if we could do it for all inputs.

In case you missed it, especially the select list looks bad in my opinion.

I have replied with a visual suggestion for the select list.

[carolinan]

If we handle the comment form and the select list in separate PR's, this is ready for review.

[juanfra]

It looks well. I noticed that when you switch the style variation to one of these and then go back to one where the input has a rounded shape, then that doesn't take effect. For example, trying to go back to the default style.

Screen.Recording.2024-10-14.at.16.21.15.mov

[carolinan]

How strange.
It looks like the variations that are supposed to have 0 border radius on the inputs still have 4px.

My guess would be that it is the styles> blocks > block name > CSS that is not clearing / refreshing.

[carolinan]

Because of this bug, I don't think it is worth implementing this change. I think it might be too confusing that the style changes depending on what order you preview the theme variations in...

[carolinan]

This still needs a decision.

[beafialho]

The default variation looks ok, as well as Noon and Dusk, but the other input fields aren't matching the buttons.

[carolinan]

How are you testing it?
Are you saving and resetting the style variation every time you are changing variation?

If you are not saving and resetting, then you are running into the the editor bug that Juan mentioned, and this is why I think this change should not be implemented, the bug is too confusing.

[beafialho]

I'm saving the variation, seeing on the front end, I go back to the editor and pick another variation.

[carolinan]

Yes, that's it. When we don't click on "reset styles" in between, the CSS for the input field is not updated, that is the bug.
I think this bug is blocking.

What we can do is open an issue for it on Trac, so that once it is fixed in the editor, the theme can be updated.
(There is already an issue for it in the Gutenberg GitHub repository)