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

[laurelfulford]

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.

[laurelfulford]

Twenty Seventeen - custom colours applied in the editor - before

[laurelfulford]

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

[laurelfulford]

Twenty Seventeen - custom colours applied in the editor - after

[laurelfulford]

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

[laurelfulford]

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.

[davidakennedy]

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

[Joen]

Patch looks good, thank you! 👍 👍

[laurelfulford]

Twenty Seventeen - outlined button in editor with original patch

[laurelfulford]

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

[laurelfulford]

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

[laurelfulford]

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?

[laurelfulford]

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]

Current outline buttin state: has box-shadow.

[desrosj]

Proposed outline button state: no box-shadow.

[desrosj]

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! :)

[desrosj]

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.

[laurelfulford]

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]

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

[laurelfulford]

@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!

[desrosj]

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

[laurelfulford]

Twenty Seventeen - custom colours with 45426.1.patch

[laurelfulford]

Twenty Seventeen - dark scheme with 45426.1.patch

[laurelfulford]

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]

Twenty Seventeen - custom colours with 45426.2.patch

[laurelfulford]

Twenty Seventeen - dark colour scheme with 45426.2.patch

[laurelfulford]

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

[laurelfulford]

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

[laurelfulford]

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

[desrosj]

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;.

[laurelfulford]

Thanks @desrosj!

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

[laurelfulford]

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​

[laurelfulford]

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).

[desrosj]

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.

[laurelfulford]

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.

[SergeyBiryukov]

Reopening for merging to the 5.0 branch.

[SergeyBiryukov]

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.