Make WordPress Core

Opened 2 weeks ago

Last modified 2 weeks ago

#61594 new defect (bug)

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

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5.5
Component: Bundled Theme Keywords: dev-feedback has-patch changes-requested
Focuses: ui, css Cc:

Description

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,

Attachments (5)

twenty-thirteen-search-block-editor-side.png (148.7 KB) - added by viralsampat 2 weeks ago.
Back-end
twenty-thirteen-search-block-front-end-side.png (281.8 KB) - added by viralsampat 2 weeks ago.
Front-end
61594.patch (501 bytes) - added by viralsampat 2 weeks ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.
after-resolved-twenty-thirteen-search-block-editor-side.png (143.3 KB) - added by viralsampat 2 weeks ago.
After resolved issue Back-end:
after-resolved-twenty-thirteen-search-block-front-end-side.png (173.5 KB) - added by viralsampat 2 weeks ago.
After resolved issue front-end:

Download all attachments as: .zip

Change History (8)

@viralsampat
2 weeks ago

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

@viralsampat
2 weeks ago

After resolved issue Back-end:

#1 @shailu25
2 weeks ago

Related: 59207

#2 @sabernhardt
2 weeks ago

  • Keywords changes-requested added
  • Summary changed from Twenty Thirteen Theme: The search block button background not change when we try to change it using block settings. to Twenty Thirteen: Search block button background does not reflect block setting of solid color

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;
    }
    
Note: See TracTickets for help on using tickets.