Twenty Seventeen: Search block button's styles are not set in the editor

[viralsampat]

Hello Team,

I have checked "Search Block" and found that it's button background color, text color, and font-weight is not same on back-end & front-end.

I think that it should be same on the both sides(Back-end & Front-end).

Here, I have provided its screenshots for reference.

Thanks,

[viralsampat]

Back-end:

[viralsampat]

Front-end:

[pamprn]

Should frontend or backend be the determinant?

[sabernhardt]

The editor-blocks stylesheet needs styles to match button styles on the front end.

/* Search */

.wp-block-search__button {
	background-color: #222;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.5;
}

[shailu25]

Patch Added.

[karmatosed]

I am going to test this now thanks.

[karmatosed]

I can confirm this patch now resolves it being the same in both experiences. Thank you everyone.

[karmatosed]

In 58911:

Twenty Seventeen Fixes search block button styles not being the same.

The search block button was not the same back and front for background, text and font weight. This also reflects in editor-blocks stylesheet.

Props viralsampat, pamprn, sabernhardt, shailu25.
Fixes #61888.

[sabernhardt]

option 1: removes the font size and moves the new rules to the Widgets section

[sabernhardt]

option 2: removes font size, moves new rules, and adds some styles for the Search block label and input

[sabernhardt]

Search blocks with default styling and large font size preset in both post content and a widget, on the front end

[sabernhardt]

editor styles with patch option 1 (button only)

[sabernhardt]

editor styles with patch option 2 (button, label and input styles)

[sabernhardt]

This should have an iteration, and I uploaded two options.

1. I was wrong about adding a font-size in the button styles. The theme uses the same size for body and button, and my suggestion would override theme preset classes for font size.
2. The new styles are located in the middle of the Quote block's styles. They would fit better in the Widgets section, at the end of the file.
3. The label and input are slightly different in the editor, though I am not sure whether trying to match those to the front is worth an extra 15 lines. I chose not to copy the theme's form element styles into editor-style.css (form elements can be used in other situations, but that is about 100 lines and the Search label still would need its own rules).

Extra styles to consider in 61888.label-input-button.patch​:

• The label sets a font-weight of 700 in the editor and 800 on the front (which does not look any different for me because the theme does not have font files for the 700 weight).
• The label's 0.5em margin on the front is missing in the editor, and that is more noticeable with larger fonts.
• Adding the input's #333 text color would override the admin styles (forms.css, which give the search input a very similar #2c3338. I also included the background color and gradient to make sure it has contrast.
• The input border radius is also very similar to the admin styles (3 pixels instead of 4).
• Inputs have a lighter border in Twenty Seventeen than what admin styles or the block-library styles define.
• The input padding and line-height could also match the front end.

[karmatosed]

My instinct is that the first patch is a good one to get in @sabernhardt and we can always consider having the extra styles even in another issue. As a result I am going to push that one through for now.

[karmatosed]

In 58930:

Twenty Seventeen: Fixes search block button styling variations.

The search block button was not the same back and front for background, text and font weight. This is an additional patch solving the previous issue of styles being in wrong section and also differences..

Props sabernhardt.
Fixes #61888.