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

[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).

[poena]

Search block padding, editor

[poena]

Search block padding, front

[poena]

Adjust padding in the blocks editor styles

[poena]

Editor, with patch applied, Firefox.

[paaljoachim]

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]

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

[hellofromTonya]

Marking for commit.

[peterwilsoncc]

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.

[Boniu91]

Chrome Win10

[Boniu91]

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