[Multiple Bundled Themes] Custom color palette styles need to be added to the editor stylesheet

[kjellr]

Recent changes in Gutenberg 7.9 require themes to bundle their custom color styles in the editor. Previously, these styles were only needed on the front end:

​https://github.com/WordPress/gutenberg/pull/21428#issuecomment-610874932

If themes do not include their custom colors in the editor styles, the color swatches will have no effect:

---

The following default themes need their custom color palette rules included in their editor styles by the time 7.9 gets into core (or sooner, as they won't hurt anything if they're in there beforehand):

• Twenty Nineteen
• Twenty Sixteen
• Twenty Fifteen
• Twenty Fourteen
• Twenty Thirteen
• Twenty Twelve
• Twenty Eleven

[sabernhardt]

Twenty Ten to Twenty Sixteen, same :root .editor-styles-wrapper .has-x-color pattern for each

[sabernhardt]

Twenty Ten has .editor-styles-wrapper .has-x-color; Twenty Eleven to Twenty Sixteen only need .has-x-color

[sabernhardt]

50120.patch​ gives the same :root .editor-styles-wrapper .has-x-color pattern in each theme from Twenty Ten to Twenty Sixteen.

50120.1.patch​ uses selectors with lower specificity, depending on what is necessary, for Twenty Ten to Twenty Sixteen. This would not override the default editor stylesheet's colors, but currently only the black and white have the same class names (and the colors match anyway).

Additional work is needed for (at least) the two most recent themes:

1. Twenty Twenty - The theme's default colors correctly show in the editor, but the user-customized colors do not. (Editor styles use twentytwenty_generate_css.)
2. Twenty Nineteen - I noticed that choosing background colors can set the block's text color but no background color in the editor. Both theme default and user-customized colors require attention.

(Twenty Seventeen does not have its own color palette.)

[whyisjake]

Would love to get @ianbelanger to weigh in on this ticket too.

[ianbelanger]

I tested the patch in 2010 - 2016 and it works well. I think we are good to commit this one.

[whyisjake]

In 48459:

Bundled Themes: Add custom color pallettes for block editor.

Gutenberg 7.9 added support for themes to bundle their own custom styles in to the editor. These changes have been added to 2010 - 2016.

See #50120.

Props kjellr, sabernhardt, ianbelanger.

[whyisjake]

Thanks for the patch @sabernhardt. I left the ticket open to account for:

Additional work is needed for (at least) the two most recent themes:

• Twenty Twenty - The theme's default colors correctly show in the editor, but the user-customized colors do not. (Editor styles use twentytwenty_generate_css.)
• Twenty Nineteen - I noticed that choosing background colors can set the block's text color but no background color in the editor. Both theme default and user-customized colors require attention.

[davidbaumwald]

@ianbelanger @whyisjake Is this still in the cards for 5.5?

[whyisjake]

@sabernhardt, can you work on a patch for 2019/2020?

[sabernhardt]

I should be able to create a patch for Twenty Twenty. If no one else makes a patch for Twenty Nineteen by the time the other is done, I could give it a try.

[ianbelanger]

Sorry all, I am in the process of moving so I'm afraid I can't be much help right now, other than testing and committing patches.

[sabernhardt]

Twenty Twenty: setting customized colors in block editor

[sabernhardt]

50120.2020-theme.patch​ adds block editor support for any user-customized colors in Twenty Twenty (Accent, Primary, Secondary, Background, Subtle Background).

[sabernhardt]

I'm having trouble creating a patch for Twenty Nineteen.

For standard theme colors, this is what worked for me in the style-editor.scss file. I put the following code in the Base Typography section, between the .has-white-background-color settings and the figcaption styles, and there may a better place for it.

.has-primary-color {
	color: $color__link;
}

.has-secondary-color {
	color: $color__border-link-hover;
}

.has-dark-gray-color {
	color: $color__text-main;
}

.has-light-gray-color {
	color: $color__text-light;
}

.has-white-color {
	color: #FFF;
}

I couldn't figure out how to set the user-customized colors for inline text, but Twenty Nineteen apparently does not yet support those on the front end either.

[SergeyBiryukov]

Per the ​latest bug scrub:

youknowriad
So for this one, we included a fix in Gutenberg to avoid having themes include these stylesheets by default.

sabernhardt
2019 still needs a patch, and both 2019 and 2020 need testing/commit

youknowriad
The recommendation is that folks need to include these stylesheets but since in 5.4 it was not enforced, we kept it as is.

davidb
So, is this a close as resolved upstream?

youknowriad
I’d say it would be still good to do but it’s not a blocker for 5.5

williampatton
I'm with riad here, this is not a hard requirement in 5.5
It would be nice but can be added in future release.

[notlaura]

I'm getting started on this later than intended, but progress is underway! I am working on testing the Twenty Twenty patch, then investigating the update for Twenty Nineteen.

[helen]

@notlaura Have you had a chance to look at this yet? We're a bit past the ideal window to get this committed but I think it's still okay for the next couple days.

[notlaura]

@helen Somewhat - for TwentyTwenty, the user-selected styles (set in Customizer) seem to apply as expected in both the front-end and block editor with and without 50120.2020-theme.patch. I have not made progress on the TwentyNineteen piece.

My process for testing TwentyTwenty was:

1. Add a block and set the text and background colors
2. Update the colors selected in the Customizer
3. See if the color updated in both the editor and front-end

@sabernhardt does that sound like the right testing approach? I know there was mention of some issue being fixed upstream - could that be the case here?

[sabernhardt]

@notlaura Your testing process sounds good, but please check one more thing.

When I checked this in Twenty Twenty (without a patch) during the past week, I apparently forgot to try the inline text color option in addition to the block's text and background colors. With the Gutenberg fix for WordPress 5.5, the editor supplies the block with inline CSS again, though the span within a (paragraph) block does not specify color in the style attribute.

Inline text color seems to work with Twenty Twenty's standard palette yet not a custom palette. Twenty Nineteen still does not honor the inline color at all.

[sabernhardt]

Inline color in a paragraph block (highlight text and find "Text color" in the dropdown)

[notlaura]

The specificity of the default color causes the user set color to be overridden

[notlaura]

Ah, indeed - the inline text color is updated to the user-selected one on the front-end, but not in the editor (I did not know the text color option existed there! Nice).

In TwentyTwenty this looks to be a specificity battle - in twentytwenty/assets/css/editor-style-block.css, the styles that apply the default color palette are overriding those added in the twentytwenty_generate_css method (see above).

If we can remove :root from the selector in this block of styles:

/* CUSTOM COLORS */


:root .has-accent-color {
	color: #cd2653;
}

:root .has-accent-background-color {
	background-color: #cd2653;
	color: #fff;
}

/* etc */

...then the user-selected colors were applied as expected when I tested. Does anyone know if this specificity added by :root required?

I haven't created a patch before, so I am figuring that out, and I can push up this change tomorrow if someone else hasn't gotten to it yet!

[sabernhardt]

The :root was added in [46714]
See also ​https://github.com/WordPress/twentytwenty/issues/964

I think I've seen the explanation for that somewhere else (probably for a different theme), but I'm not finding it today.

[helen]

Punting due to impending RC, this is not new to block editor in 5.6, since it's in bundled themes I think technically it can even go into a maintenance release but for now I've put it in 5.7.

[notlaura]

I haven't gotten my patch together yet for the final bit of the 2020 theme piece yet, but for 2019, there is ticket 49787 that outlines the issue affecting both the editor and front end. We discussed in #core-css triage that the 2019 bit can be handled as part of that ticket since it adds complexity here.

[hellofromTonya]

@notlaura Is this one on your radar to fix in 5.7? What's the next for it?

[lukecarbis]

We're too late in the release cycle for 5.7 to get this one through. Moving to 5.8.

[desrosj]

This one still needs a patch to be considered for 5.8. The cutoff date is 1 week from today (8 June).

[ryelle]

Is this still an issue? I just tested with Twenty Nineteen & Twenty Twenty, and I'm seeing text and background colors correctly on a paragraph. It looks like the editor adds these colors to the element's inline style=… attribute, so the theme doesn't need to add these to the editor style.

I also checked on the 5.7 branch and it seems to do the same.

[sabernhardt]

adding :root .has-accent-color in custom Twenty Twenty palette (in addition to .has-accent-color)

[sabernhardt]

without patch: custom Accent color does not match with inline text

[sabernhardt]

Testing Twenty Twenty 1.7 with WordPress 5.7 and Gutenberg 10.7.2:

• When text and/or background colors are applied to the paragraph block, the inline style correctly applies that color in the editor (whether the primary color is default or custom).
• If one of the theme's standard colors is applied to text within a paragraph block, that also is correct.
• When the primary color is custom, though, inline text given the standard Accent color class does not match the front end. Because it's only the one color that doesn't match, I made a simpler patch for consideration.

Custom theme colors could be outside the scope of this ticket, so I would accept closing as fixed on 5.5 with changeset:48459 if that patch is not desirable. Then if any changes are necessary for Twenty Nineteen, those can be part of #49787.

[ryelle]

While testing this, I also noticed that link colors are not right, both with the default and custom primary color. It would be nice to see that fixed too, so I've attached an iteration on @sabernhardt's patch to fix that. The editor-block-list__layout class was changed to block-editor-block-list__layout, but it seems like it's not necessary, so I removed it.

Marking this for commit - it's the end of my day, but I can swing back to commit tomorrow US-morning.

[sabernhardt]

Good catch! That works for me.

[ryelle]

In 51095:

Twenty Twenty: Ensure custom primary color is applied to text in the editor.

Update the specificity of the custom CSS to match the editor styles. This overrides the default primary color with the selected custom color, matching the frontend display.

Props sabernhardt, notlaura.
Fixes #50120.

[desrosj]

In 51100:

Twenty Twenty: Regenerate the RTL editor stylesheet.

This applies the change made in [51095] to the RTL stylesheet.

See #50120.