WordPress.org

Make WordPress Core

#45426 closed defect (bug) (fixed)

Twenty Seventeen: Missing colours from blocks.css for editor colour palette

Reported by: laurelfulford Owned by: laurelfulford
Milestone: 5.0.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-screenshots has-patch fixed-major
Focuses: Cc:
PR Number:

Description

Twenty Seventeen is missing styles in the blocks.css to apply the custom editor colors.

In testing this, I also noticed the padding added to paragraph tags with background colours in the editor is being overridden by styles coming from the editor-style.css.

This was an oversight on my part when building out the original styles.

Attachments (21)

twentyseventeen-colors-editor-before.png (56.0 KB) - added by laurelfulford 12 months ago.
Twenty Seventeen - custom colours applied in the editor - before
twentyseventeen-colors-frontend-before.png (49.9 KB) - added by laurelfulford 12 months ago.
Twenty Seventeen - custom colours applied to the front-end - before
45426.patch (3.9 KB) - added by laurelfulford 12 months ago.
twentyseventeen-colors-editor-after.png (58.5 KB) - added by laurelfulford 12 months ago.
Twenty Seventeen - custom colours applied in the editor - after
twentyseventeen-colors-frontend-after.png (50.7 KB) - added by laurelfulford 12 months ago.
Twenty Seventeen - custom colours applied to the front-end - after
45426.1.patch (4.8 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - original patch editor.png (18.5 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - outlined button in editor with original patch
Twenty Seventeen - original patch front end.png (12.4 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - outlined button on front-end with original patch
Twenty Seventeen - updated patch front end.png (12.8 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - outlined button on front-end with updated patch (45426.1.patch)
box-shadow.png (11.3 KB) - added by desrosj 11 months ago.
Current outline buttin state: has box-shadow.
no-box-shadow.png (10.7 KB) - added by desrosj 11 months ago.
Proposed outline button state: no box-shadow.
Twenty seventeen button outline.png (6.4 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - outline button, why are you being difficult and not recreating the issue?
twenty-seventeen-custom-colors-patch-1.png (30.3 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - custom colours with 45426.1.patch
twenty-seventeen-dark-scheme-patch-1.png (29.1 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - dark scheme with 45426.1.patch
45426.2.patch (5.3 KB) - added by laurelfulford 11 months ago.
twenty-seventeen-custom-colors-patch-2.png (30.1 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - custom colours with 45426.2.patch
twenty-seventeen-dark-colors-patch-2.png (28.3 KB) - added by laurelfulford 11 months ago.
Twenty Seventeen - dark colour scheme with 45426.2.patch
45426.3.patch (6.5 KB) - added by laurelfulford 11 months ago.
45426.4.patch (6.5 KB) - added by laurelfulford 10 months ago.
45426.5.patch (12.9 KB) - added by laurelfulford 10 months ago.
45426.6.patch (6.9 KB) - added by laurelfulford 10 months ago.

Download all attachments as: .zip

Change History (48)

@laurelfulford
12 months ago

Twenty Seventeen - custom colours applied in the editor - before

@laurelfulford
12 months ago

Twenty Seventeen - custom colours applied to the front-end - before

@laurelfulford
12 months ago

Twenty Seventeen - custom colours applied in the editor - after

@laurelfulford
12 months ago

Twenty Seventeen - custom colours applied to the front-end - after

#1 @laurelfulford
12 months ago

45426.patch adds the colours to the blocks.css, and fixes the padding in the editor for paragraphs. It also adjusts the styles on the button block, to make sure the colours there can be overridden easier.

#2 @davidakennedy
12 months ago

  • Keywords commit added; needs-testing removed

Thanks for catching this, @laurelfulford. The patch looks good to go.

This ticket was mentioned in Slack in #core-committers by laurelfulford. View the logs.


12 months ago

This ticket was mentioned in Slack in #core by chanthaboune. View the logs.


12 months ago

#5 @laurelfulford
12 months ago

  • Milestone changed from 5.0 to 5.0.1

#6 @Joen
12 months ago

Patch looks good, thank you! 👍 👍

@laurelfulford
11 months ago

Twenty Seventeen - outlined button in editor with original patch

@laurelfulford
11 months ago

Twenty Seventeen - outlined button on front-end with original patch

@laurelfulford
11 months ago

Twenty Seventeen - outlined button on front-end with updated patch (45426.1.patch)

#7 @laurelfulford
11 months ago

In testing #45541, I noticed that even with 45426.patch, Twenty Seventeen was not applying custom background colours from the button block when it was set to outline, on the front-end.

45426.1.patch builds on the original patch, adding styles to make sure background colours are applied, to match how the block looks in the editor.

@davidakennedy can you please take another look at this one when you have time?

#8 @pento
11 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#9 @laurelfulford
11 months ago

  • Keywords needs-testing added; commit removed

Updating the tags to remove 'commit' and add 'needs-testing', since I updated this patch since it was last reviewed, to make sure the outline button background could be changed. It originally only changed in the editor, but not on the front-end.

@desrosj
11 months ago

Current outline buttin state: has box-shadow.

@desrosj
11 months ago

Proposed outline button state: no box-shadow.

#10 follow-up: @desrosj
11 months ago

This looks good, @laurelfulford and everything you described looks fixed. I have a few nits.

The outline style button has a box-shadow, and it doesn't look the best with certain button colors because it is inside the outline.

Second, the rounded and squared button styles appear to have the same border-radius. Can differentiate them a bit?

Of course if there were prior discussions I missed that resulted in the current styling, feel free to ignore! :)

#11 in reply to: ↑ 10 @desrosj
11 months ago

Second, the rounded and squared button styles appear to have the same border-radius. Can differentiate them a bit?

Ignore this one. I just came across #45541, which addresses that.

#12 @laurelfulford
11 months ago

The outline style button has a box-shadow, and it doesn't look the best with certain button colors because it is inside the outline.

Oh, thanks for catching that, @desrosj! Will look at tidying that up now.

Ignore this one. I just came across #45541, which addresses that.

Sorry about that - I ended up splitting up the button issues in an odd way, it added some extra confusion here!

@laurelfulford
11 months ago

Twenty Seventeen - outline button, why are you being difficult and not recreating the issue?

#13 @laurelfulford
11 months ago

@desrosj I'm not sure why, but I'm having a hard time recreating this -- for me the outlined buttons don't appear to have a box-shadow. It looks like the styles here should be taking care of it, but there must be some cases where they're not.

Could you please share the browser where you're seeing this, and whether the button has a URL (rather than an empty href), and if it's visited? I don't think the latter should make a difference, but figure it's worth a shot :) thanks!

#14 @desrosj
11 months ago

I am using Firefox, and only seeing it when I have custom colors selected for my button (both background and text).

@laurelfulford
11 months ago

Twenty Seventeen - custom colours with 45426.1.patch

@laurelfulford
11 months ago

Twenty Seventeen - dark scheme with 45426.1.patch

#15 @laurelfulford
11 months ago

I am using Firefox, and only seeing it when I have custom colors selected for my button (both background and text).

@desrosj Eureka! I was not testing with the custom colours in Twenty Seventeen. When I pick a different colour in the Customizer, or the dark colour scheme, I definitely see some weirdness with 45426.1.patch applied.

Thank you!

@laurelfulford
11 months ago

Twenty Seventeen - custom colours with 45426.2.patch

@laurelfulford
11 months ago

Twenty Seventeen - dark colour scheme with 45426.2.patch

#16 @laurelfulford
11 months ago

45426.2.patch tweaks the block CSS, so it also takes Twenty Seventeen's built-in colour functionality into account.

#17 @pento
11 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#18 @laurelfulford
11 months ago

  • Keywords needs-refresh added

It looks like with the commit of #45541, this patch needs a refresh - working on that now!

#19 @laurelfulford
11 months ago

  • Keywords needs-refresh removed

45426.3.patch fixes up some failing hunks, and fixes where the outline styles weren't working as expected.

#20 @desrosj
11 months ago

  • Keywords needs-testing removed

This is looking good! One thing I found, though. A custom background color for an outline style is being overridden by a background-color: transparent;.

#21 @laurelfulford
10 months ago

Thanks @desrosj!

45426.4.patch should take care of that, and correct a color classname issue I spotted as well.

#22 @laurelfulford
10 months ago

And one more to make sure I don't mess up the outline hover styles in the process of fixing the background colour: 45426.5.patch

#23 @laurelfulford
10 months ago

One more for luck! 45426.6.patch (actually to get rid of an accidental class-wp-block-parser.php update included in the last patch).

#24 @desrosj
10 months ago

45426.6.patch looks good! The outline style button is now respecting a custom background color, and the default outline style button's hover is preserved correctly. 👍🏼 @laurelfulford.

#25 @laurelfulford
10 months ago

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

In 44402:

Twenty Seventeen: Improve selectors for block editor custom colors.

Twenty Seventeen's original styles for the block editor custom colors had some issues: they weren't being applied to the button blocks due to lack of specificity, and when applied to paragraph blocks, there was no padding in the editor. This update makes sure the colors and related styles work as expected.

Fixes #45426.

#26 @SergeyBiryukov
10 months ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for merging to the 5.0 branch.

#27 @SergeyBiryukov
10 months ago

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

In 44425:

Twenty Seventeen: Improve selectors for block editor custom colors.

Twenty Seventeen's original styles for the block editor custom colors had some issues: they weren't being applied to the button blocks due to lack of specificity, and when applied to paragraph blocks, there was no padding in the editor. This update makes sure the colors and related styles work as expected.

Props laurelfulford.
Merges [44402] to the 5.0 branch.
Fixes #45426.

Note: See TracTickets for help on using tickets.