WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#45432 closed defect (bug) (fixed)

Twenty Twelve: Button blocks don't apply custom colours

Reported by: laurelfulford Owned by: laurelfulford
Milestone: 5.0.2 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch has-screenshots commit fixed-5.0
Focuses: Cc:

Description

The selectors used for Twenty Twelve's button blocks are too specific, the styles for the editor custom colours don't override them on the front-end.

The styles also include a gradient that overrides the background custom colour, both on the front-end and in the editor.

Attachments (5)

twenty-twelve-custom-colors-editor-before.png (19.4 KB) - added by laurelfulford 3 years ago.
Twenty Twelve - custom colours in editor, before.
twenty-twelve-custom-colors-front-end-before.png (29.0 KB) - added by laurelfulford 3 years ago.
Twenty Twelve - custom colours on front end, before
45432.patch (6.8 KB) - added by laurelfulford 3 years ago.
twenty-twelve-custom-colors-editor-after.png (18.5 KB) - added by laurelfulford 3 years ago.
Twenty Twelve - custom colours in editor, after.
twenty-twelve-custom-colors-front-end-after.png (30.5 KB) - added by laurelfulford 3 years ago.
Twenty Twelve - custom colours on front end, after

Download all attachments as: .zip

Change History (14)

@laurelfulford
3 years ago

Twenty Twelve - custom colours in editor, before.

@laurelfulford
3 years ago

Twenty Twelve - custom colours on front end, before

@laurelfulford
3 years ago

@laurelfulford
3 years ago

Twenty Twelve - custom colours in editor, after.

@laurelfulford
3 years ago

Twenty Twelve - custom colours on front end, after

#1 @laurelfulford
3 years ago

45432.patch adjusts the specificity of the button colour selectors for the front end, so the custom colours can override them. It also takes the :visited colours into account, so the custom colours can also override them to make sure there's enough contrast.

Lastly, it makes it so the button gradient is only applied when there is no background colour, so it doesn't cover it up in the editor and on the front end.

#2 @davidakennedy
3 years ago

  • Keywords commit added; needs-testing removed

Hey @laurelfulford, took this patch for a spin and it's good to go.

#3 @laurelfulford
3 years ago

  • Milestone changed from 5.0 to 5.0.1

#4 @Joen
3 years ago

Patch looks good 👍 👍! ⛴🛳🚢

#5 @pento
3 years ago

  • Milestone changed from 5.0.1 to 5.0.2

#6 @laurelfulford
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 44194:

Twenty Twelve: Fix button block custom colors.

Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end.

Also make sure the button’s gradient is not applied when a custom background color is added, since it will hide it.

Fixes #45432.

#7 @desrosj
3 years ago

  • Keywords fixed-5.0 added

Reopening and marking fixed-5.0 so that this can be properly merged into trunk.

#8 @SergeyBiryukov
3 years ago

  • Keywords changed from has-patch, has-screenshots, commit, fixed-5.0 to has-patch has-screenshots commit fixed-5.0
  • Resolution fixed deleted
  • Status changed from closed to reopened

#9 @desrosj
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 44303:

Twenty Twelve: Fix button block custom colors.

Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end.

Also make sure the button’s gradient is not applied when a custom background color is added, since it will hide it.

Props laurelfulford.

Merges [44194] to trunk.

Fixes #45432.

Note: See TracTickets for help on using tickets.