WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 9 months ago

#52433 closed defect (bug) (fixed)

Twenty Twenty-One: Search block editor styles are broken in 5.7

Reported by: poena Owned by: peterwilsoncc
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.7
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description (last modified by poena)

CSS changes were made to the search block in Gutenberg version 9.4.

When a search block is added with the default settings,
the padding on the button is too small in the editor, and the editor and front does not match.

When the option "Use button with icon" is enabled,
the padding on the button is too large. This only affects the editor.

This is easiest to illustrate with the attached screenshot (Windows 10, Chrome).

Attachments (6)

tt1-search-block-editor.png (33.4 KB) - added by poena 9 months ago.
Search block padding, editor
tt1-search-block-front.png (22.6 KB) - added by poena 9 months ago.
Search block padding, front
52433.patch (9.1 KB) - added by poena 9 months ago.
Adjust padding in the blocks editor styles
tt1-search-block-editor-after-firefox.png (24.4 KB) - added by poena 9 months ago.
Editor, with patch applied, Firefox.
After-applying-patch.png (72.7 KB) - added by paaljoachim 9 months ago.
After applying the patch the various Search block styles looks good.
searchblock.png (12.5 KB) - added by Boniu91 9 months ago.
Chrome Win10

Download all attachments as: .zip

Change History (18)

@poena
9 months ago

Search block padding, editor

@poena
9 months ago

Search block padding, front

#1 @poena
9 months ago

  • Version set to trunk

#2 @poena
9 months ago

  • Description modified (diff)
  • Keywords needs-patch added

@poena
9 months ago

Adjust padding in the blocks editor styles

#3 @poena
9 months ago

  • Keywords has-patch added; needs-patch removed

@poena
9 months ago

Editor, with patch applied, Firefox.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


9 months ago

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


9 months ago

#6 @hellofromTonya
9 months ago

  • Keywords needs-testing added

#7 @paaljoachim
9 months ago

Testing

Local test site.
5.7 Beta
Twenty Twenty One.
Chrome

OSX 10.15.7

I am seeing the same results as @poena is getting.

Testing the patch.
http://localhost:8889/
5.7 Beta
Twenty Twenty One
Chrome
OSX 10.15.7

The patch works well.

@paaljoachim
9 months ago

After applying the patch the various Search block styles looks good.

#8 @hellofromTonya
9 months ago

  • Keywords commit added; needs-testing removed

Marking for commit.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


9 months ago

#10 @peterwilsoncc
9 months ago

  • Owner set to peterwilsoncc
  • Resolution set to fixed
  • Status changed from new to closed

In 50262:

Twenty Twenty-One: Update editor styles of search block.

Update editor styles to more closely match the front-end following upstream changes.

Props poena, paaljoachim, hellofromTonya.
Fixes #52433.

This ticket was mentioned in Slack in #core by monikarao. View the logs.


9 months ago

@Boniu91
9 months ago

Chrome Win10

#12 @Boniu91
9 months ago

Worked as expected on 5.7-beta2. Tested on Chrome, Mozilla, Edge.

Version 0, edited 9 months ago by Boniu91 (next)
Note: See TracTickets for help on using tickets.