WordPress.org

Make WordPress Core

#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:
PR Number:

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 11 months ago.
Twenty Twelve - custom colours in editor, before.
twenty-twelve-custom-colors-front-end-before.png (29.0 KB) - added by laurelfulford 11 months ago.
Twenty Twelve - custom colours on front end, before
45432.patch (6.8 KB) - added by laurelfulford 11 months ago.
twenty-twelve-custom-colors-editor-after.png (18.5 KB) - added by laurelfulford 11 months ago.
Twenty Twelve - custom colours in editor, after.
twenty-twelve-custom-colors-front-end-after.png (30.5 KB) - added by laurelfulford 11 months ago.
Twenty Twelve - custom colours on front end, after

Download all attachments as: .zip

Change History (14)

@laurelfulford
11 months ago

Twenty Twelve - custom colours in editor, before.

@laurelfulford
11 months ago

Twenty Twelve - custom colours on front end, before

@laurelfulford
11 months ago

Twenty Twelve - custom colours in editor, after.

@laurelfulford
11 months ago

Twenty Twelve - custom colours on front end, after

#1 @laurelfulford
11 months 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
11 months ago

  • Keywords commit added; needs-testing removed

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

#3 @laurelfulford
11 months ago

  • Milestone changed from 5.0 to 5.0.1

#4 @Joen
11 months ago

Patch looks good 👍 👍! ⛴🛳🚢

#5 @pento
10 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#6 @laurelfulford
10 months 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
10 months ago

  • Keywords fixed-5.0 added

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

#8 @SergeyBiryukov
10 months 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
10 months 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.