WordPress.org

Make WordPress Core

Opened 10 months ago

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

Download all attachments as: .zip

Change History (48)

@laurelfulford
10 months ago

Twenty Seventeen - custom colours applied in the editor - before

@laurelfulford
10 months ago

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

@laurelfulford
10 months ago

Twenty Seventeen - custom colours applied in the editor - after

@laurelfulford
10 months ago

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

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


10 months ago

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


10 months ago

#5 @laurelfulford
10 months ago

  • Milestone changed from 5.0 to 5.0.1

#6 @Joen
10 months ago

Patch looks good, thank you! 👍 👍

@laurelfulford
9 months ago

Twenty Seventeen - outlined button in editor with original patch

@laurelfulford
9 months ago

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

@laurelfulford
9 months ago

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

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

  • Milestone changed from 5.0.1 to 5.0.2

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

Current outline buttin state: has box-shadow.

@desrosj
9 months ago

Proposed outline button state: no box-shadow.

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

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

#13 @laurelfulford
9 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
9 months ago

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

@laurelfulford
9 months ago

Twenty Seventeen - custom colours with 45426.1.patch

@laurelfulford
9 months ago

Twenty Seventeen - dark scheme with 45426.1.patch

#15 @laurelfulford
9 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
9 months ago

Twenty Seventeen - custom colours with 45426.2.patch

@laurelfulford
9 months ago

Twenty Seventeen - dark colour scheme with 45426.2.patch

#16 @laurelfulford
9 months ago

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

#17 @pento
9 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#18 @laurelfulford
9 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
9 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
9 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
9 months ago

Thanks @desrosj!

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

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