Bundled Themes: More consistent styling of the search block

[deborah86]

The search block is missing styling from the theme. The search widget in the footer has the styles in the stylesheet. The search block used on pages and posts does not have styles.

The unstyled attributes are:

.wp-block-search
.wp-block-search__input
.wp-block-search__button svg

Image of the search block on a page vs the search bar widget in the footer.
​https://t2.dhostingsites.com/wp-content/uploads/2021/05/Screenshot-2021-05-03-5.36.53-PM-e1620088694646.png
​https://t2.dhostingsites.com/search-block-doesnt-have-styles/

[desrosj]

Thanks for this one, @deborah86!

I'm changing this ticket to be a bit more broad. It seems that several default themes have inconsistent styling for the search block in the sense that the block does not match or resemble other search forms in the theme. It's worth taking a look at all of these.

The block does have styles, they are just the default ones that ship with the block editor. For some of the default themes, it doesn't actually look that bad. But for others, it does stand out as pretty different. I've marked needs-design to get some feedback on what adjustments should be made in each theme.

I'll be attaching screenshots for each theme with both a serach form and a search block visible. These screenshots are all of the front end, but any adjustments that are made should also be made to the block's presentation in the editor.

Other search block related tickets: #52433, #50609.

[sabernhardt]

Is it possible to change the block markup in the editor to match the searchform.php markup for themes like Twenty Twenty? (as a block option)

[deborah86]

Has this been updated? The status is still awaiting review.

[poena]

In Twenty Ten, there is a spacing issue that should be solved, other than that, the search has no special styling.

For 11, 12, 13, and 15, I am not sure what the expected result is since the search widget is not really styled and the theme can not set a default setting for the search block that hides the submit button.

For 21 I am also not sure what the expected result/change is.

Update: I found that 14, 16, 17, 19, and 20 have already been fixed, the button color now matches the search widget. I am not sure if it was a theme change or a change to the block.

[poena]

Search blocks that are already styled in 6.2