Twenty Thirteen: Search block button background does not reflect block setting of solid color

[viralsampat]

Hello Team,

I have reviewed "Search" block and found that when we trying to change it's button background color using block setting then it not would not change on frontend side. It appear only on editor side.

So, I think that it should be same on both( Editor & Front-end ) sides.

For more understanding here, I have attached its screenshots:

Thanks,

[viralsampat]

Back-end

[viralsampat]

Front-end

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

After resolved issue Back-end:

[viralsampat]

After resolved issue front-end:

[shailu25]

Related: 59207

[sabernhardt]

The patch would change the front end to be like the incorrect editor styles.

• The default Search block should continue to show the white text on an orange gradient.
• Twenty Thirteen has a blocks.css file for block-specific styles.
• The text color cannot be set to a specific value when the background inherits an unknown value.

When someone sets the background to a solid color, the front end only needs to remove the background image.

.wp-block-search__button.has-background:not([class*="-gradient"]) {
	background-image: none;
}

Twenty Thirteen has some other issues with the Search block that might not fit the scope of this ticket.

• The theme's editor styles do not include the button or related elements.
• Search buttons with a theme preset gradient selection would still have the default orange gradient in hover and focus states.
• The input field takes the 1px solid #949494 border from block-library/style.css, but the theme sets the border to 2px solid #c3c0ab on the focus state. The simplest—not necessarily the best—edit might be to replace border: 2px solid #c3c0ab with border-color: #c3c0ab so the width does not change due to a higher specificity.

  input:focus,
  textarea:focus {
  	border-color: #c3c0ab;
  	outline: 0;
  }
  

[sabernhardt]

some ​sample Search blocks