WordPress.org

Make WordPress Core

Opened 7 weeks ago

Closed 10 days ago

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

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 7 weeks ago.
Twenty Seventeen - custom colours applied in the editor - before
twentyseventeen-colors-frontend-before.png (49.9 KB) - added by laurelfulford 7 weeks ago.
Twenty Seventeen - custom colours applied to the front-end - before
45426.patch (3.9 KB) - added by laurelfulford 7 weeks ago.
twentyseventeen-colors-editor-after.png (58.5 KB) - added by laurelfulford 7 weeks ago.
Twenty Seventeen - custom colours applied in the editor - after
twentyseventeen-colors-frontend-after.png (50.7 KB) - added by laurelfulford 7 weeks ago.
Twenty Seventeen - custom colours applied to the front-end - after
45426.1.patch (4.8 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - original patch editor.png (18.5 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - outlined button in editor with original patch
Twenty Seventeen - original patch front end.png (12.4 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - outlined button on front-end with original patch
Twenty Seventeen - updated patch front end.png (12.8 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - outlined button on front-end with updated patch (45426.1.patch)
box-shadow.png (11.3 KB) - added by desrosj 5 weeks ago.
Current outline buttin state: has box-shadow.
no-box-shadow.png (10.7 KB) - added by desrosj 5 weeks ago.
Proposed outline button state: no box-shadow.
Twenty seventeen button outline.png (6.4 KB) - added by laurelfulford 5 weeks 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 5 weeks ago.
Twenty Seventeen - custom colours with 45426.1.patch
twenty-seventeen-dark-scheme-patch-1.png (29.1 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - dark scheme with 45426.1.patch
45426.2.patch (5.3 KB) - added by laurelfulford 5 weeks ago.
twenty-seventeen-custom-colors-patch-2.png (30.1 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - custom colours with 45426.2.patch
twenty-seventeen-dark-colors-patch-2.png (28.3 KB) - added by laurelfulford 5 weeks ago.
Twenty Seventeen - dark colour scheme with 45426.2.patch
45426.3.patch (6.5 KB) - added by laurelfulford 2 weeks ago.
45426.4.patch (6.5 KB) - added by laurelfulford 12 days ago.
45426.5.patch (12.9 KB) - added by laurelfulford 12 days ago.
45426.6.patch (6.9 KB) - added by laurelfulford 12 days ago.

Download all attachments as: .zip

Change History (48)

@laurelfulford
7 weeks ago

Twenty Seventeen - custom colours applied in the editor - before

@laurelfulford
7 weeks ago

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

@laurelfulford
7 weeks ago

@laurelfulford
7 weeks ago

Twenty Seventeen - custom colours applied in the editor - after

@laurelfulford
7 weeks ago

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

#1 @laurelfulford
7 weeks 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
7 weeks 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.


7 weeks ago

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


7 weeks ago

#5 @laurelfulford
7 weeks ago

  • Milestone changed from 5.0 to 5.0.1

#6 @Joen
7 weeks ago

Patch looks good, thank you! 👍 👍

@laurelfulford
5 weeks ago

Twenty Seventeen - outlined button in editor with original patch

@laurelfulford
5 weeks ago

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

@laurelfulford
5 weeks ago

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

#7 @laurelfulford
5 weeks 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
5 weeks ago

  • Milestone changed from 5.0.1 to 5.0.2

#9 @laurelfulford
5 weeks 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
5 weeks ago

Current outline buttin state: has box-shadow.

@desrosj
5 weeks ago

Proposed outline button state: no box-shadow.

#10 follow-up: @desrosj
5 weeks 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
5 weeks 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
5 weeks 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
5 weeks ago

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

#13 @laurelfulford
5 weeks 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
5 weeks ago

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

@laurelfulford
5 weeks ago

Twenty Seventeen - custom colours with 45426.1.patch

@laurelfulford
5 weeks ago

Twenty Seventeen - dark scheme with 45426.1.patch

#15 @laurelfulford
5 weeks 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
5 weeks ago

Twenty Seventeen - custom colours with 45426.2.patch

@laurelfulford
5 weeks ago

Twenty Seventeen - dark colour scheme with 45426.2.patch

#16 @laurelfulford
5 weeks ago

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

#17 @pento
5 weeks ago

  • Milestone changed from 5.0.2 to 5.0.3

#18 @laurelfulford
2 weeks ago

  • Keywords needs-refresh added

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

#19 @laurelfulford
2 weeks 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
12 days 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
12 days ago

Thanks @desrosj!

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

#22 @laurelfulford
12 days 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
12 days 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
12 days 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
12 days 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 days 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 days 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.