WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 7 weeks ago

#53146 new defect (bug)

Bundled Themes: More consistent styling of the search block

Reported by: deborah86 Owned by:
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 (11)

twentyten.png (476.3 KB) - added by desrosj 5 months ago.
twentyeleven.png (597.3 KB) - added by desrosj 5 months ago.
twentytwelve.png (81.4 KB) - added by desrosj 5 months ago.
twentythirteen.png (217.4 KB) - added by desrosj 5 months ago.
twentyfourteen.png (72.0 KB) - added by desrosj 5 months ago.
twentyfifteen.png (84.1 KB) - added by desrosj 5 months ago.
twentysixteen.png (67.9 KB) - added by desrosj 5 months ago.
twentyseventeen.png (376.7 KB) - added by desrosj 5 months ago.
twentynineteen.png (104.7 KB) - added by desrosj 5 months ago.
twentytwenty.png (118.0 KB) - added by desrosj 5 months ago.
twentytwentyone.png (99.8 KB) - added by desrosj 5 months ago.

Change History (15)

#1 @deborah86
5 months ago

  • Focuses css added
  • Version set to 5.7.1

#2 @desrosj
5 months 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
5 months ago

@desrosj
5 months ago

@desrosj
5 months ago

@desrosj
5 months ago

#3 @sabernhardt
5 months 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
7 weeks ago

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

Note: See TracTickets for help on using tickets.