WordPress.org

Make WordPress Core

Opened 2 years ago

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

Download all attachments as: .zip

Change History (48)

@laurelfulford
2 years ago

Twenty Seventeen - custom colours applied in the editor - before

@laurelfulford
2 years ago

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

@laurelfulford
2 years ago

@laurelfulford
2 years ago

Twenty Seventeen - custom colours applied in the editor - after

@laurelfulford
2 years ago

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

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


2 years ago

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


2 years ago

#5 @laurelfulford
2 years ago

  • Milestone changed from 5.0 to 5.0.1

#6 @Joen
2 years ago

Patch looks good, thank you! 👍 👍

@laurelfulford
2 years ago

Twenty Seventeen - outlined button in editor with original patch

@laurelfulford
2 years ago

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

@laurelfulford
2 years ago

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

#7 @laurelfulford
2 years 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
2 years ago

  • Milestone changed from 5.0.1 to 5.0.2

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

Current outline buttin state: has box-shadow.

@desrosj
2 years ago

Proposed outline button state: no box-shadow.

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

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

#13 @laurelfulford
2 years 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
2 years ago

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

@laurelfulford
2 years ago

Twenty Seventeen - custom colours with 45426.1.patch

@laurelfulford
2 years ago

Twenty Seventeen - dark scheme with 45426.1.patch

#15 @laurelfulford
2 years 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
2 years ago

Twenty Seventeen - custom colours with 45426.2.patch

@laurelfulford
2 years ago

Twenty Seventeen - dark colour scheme with 45426.2.patch

#16 @laurelfulford
2 years ago

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

#17 @pento
2 years ago

  • Milestone changed from 5.0.2 to 5.0.3

#18 @laurelfulford
2 years 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 years 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
2 years 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
2 years ago

Thanks @desrosj!

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

#22 @laurelfulford
2 years 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
2 years 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
2 years 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
2 years 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
2 years ago

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

Reopening for merging to the 5.0 branch.

#27 @SergeyBiryukov
2 years 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.