WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 4 weeks ago

Last modified 3 weeks 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: trunk
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 4 weeks ago.
Search block padding, editor
tt1-search-block-front.png (22.6 KB) - added by poena 4 weeks ago.
Search block padding, front
52433.patch (9.1 KB) - added by poena 4 weeks ago.
Adjust padding in the blocks editor styles
tt1-search-block-editor-after-firefox.png (24.4 KB) - added by poena 4 weeks ago.
Editor, with patch applied, Firefox.
After-applying-patch.png (72.7 KB) - added by paaljoachim 4 weeks ago.
After applying the patch the various Search block styles looks good.
searchblock.png (12.5 KB) - added by Boniu91 3 weeks ago.
Chrome Win10

Download all attachments as: .zip

Change History (18)

@poena
4 weeks ago

Search block padding, editor

@poena
4 weeks ago

Search block padding, front

#1 @poena
4 weeks ago

  • Version set to trunk

#2 @poena
4 weeks ago

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

@poena
4 weeks ago

Adjust padding in the blocks editor styles

#3 @poena
4 weeks ago

  • Keywords has-patch added; needs-patch removed

@poena
4 weeks ago

Editor, with patch applied, Firefox.

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


4 weeks ago

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


4 weeks ago

#6 @hellofromTonya
4 weeks ago

  • Keywords needs-testing added

#7 @paaljoachim
4 weeks 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
4 weeks ago

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

#8 @hellofromTonya
4 weeks ago

  • Keywords commit added; needs-testing removed

Marking for commit.

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


4 weeks ago

#10 @peterwilsoncc
4 weeks 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.


3 weeks ago

@Boniu91
3 weeks ago

Chrome Win10

#12 @Boniu91
3 weeks ago

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

Last edited 3 weeks ago by Boniu91 (previous) (diff)
Note: See TracTickets for help on using tickets.