Make WordPress Core

Opened 2 years ago

Last modified 12 days ago

#53146 assigned defect (bug)

Bundled Themes: More consistent styling of the search block

Reported by: deborah86's profile deborah86 Owned by: poena's profile poena
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.7.1
Component: Bundled Theme Keywords: needs-design
Focuses: css Cc:

Description (last modified by sabernhardt)

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/

Attachments (12)

twentyten.png (476.3 KB) - added by desrosj 2 years ago.
twentyeleven.png (597.3 KB) - added by desrosj 2 years ago.
twentytwelve.png (81.4 KB) - added by desrosj 2 years ago.
twentythirteen.png (217.4 KB) - added by desrosj 2 years ago.
twentyfourteen.png (72.0 KB) - added by desrosj 2 years ago.
twentyfifteen.png (84.1 KB) - added by desrosj 2 years ago.
twentysixteen.png (67.9 KB) - added by desrosj 2 years ago.
twentyseventeen.png (376.7 KB) - added by desrosj 2 years ago.
twentynineteen.png (104.7 KB) - added by desrosj 2 years ago.
twentytwenty.png (118.0 KB) - added by desrosj 2 years ago.
twentytwentyone.png (99.8 KB) - added by desrosj 2 years ago.
search-wp62.png (66.8 KB) - added by poena 6 weeks ago.
Search blocks that are already styled in 6.2

Change History (20)

#1 @deborah86
2 years ago

  • Focuses css added
  • Version set to 5.7.1

#2 @desrosj
2 years ago

  • Component changed from Themes to Bundled Theme
  • Keywords needs-design added
  • Summary changed from Twenty Twenty: Search Block Missing Styling when Used in Post or Page to Bundled Themes: More consistent styling of the search block

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.

@desrosj
2 years ago

@desrosj
2 years ago

@desrosj
2 years ago

@desrosj
2 years ago

@desrosj
2 years ago

@desrosj
2 years ago

#3 @sabernhardt
2 years ago

  • Description modified (diff)

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)

#4 @deborah86
22 months ago

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

#5 @poena
6 weeks ago

  • Owner set to poena
  • Status changed from new to assigned

#6 @poena
6 weeks ago

  • Milestone changed from Awaiting Review to 6.3

#7 @poena
6 weeks ago

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.

Last edited 6 weeks ago by poena (previous) (diff)

@poena
6 weeks ago

Search blocks that are already styled in 6.2

#8 @poena
12 days ago

  • Milestone changed from 6.3 to Awaiting Review
Note: See TracTickets for help on using tickets.