WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 4 days ago

#50120 assigned defect (bug)

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

Reported by: kjellr Owned by: notlaura
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch dev-feedback
Focuses: css Cc:

Description

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:

https://cldup.com/m5GNXkhznA.png


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

Attachments (3)

50120.patch (16.1 KB) - added by sabernhardt 4 months ago.
Twenty Ten to Twenty Sixteen, same :root .editor-styles-wrapper .has-x-color pattern for each
50120.1.patch (12.8 KB) - added by sabernhardt 4 months ago.
Twenty Ten has .editor-styles-wrapper .has-x-color; Twenty Eleven to Twenty Sixteen only need .has-x-color
50120.2020-theme.patch (5.3 KB) - added by sabernhardt 3 months ago.
Twenty Twenty: setting customized colors in block editor

Download all attachments as: .zip

Change History (24)

#1 @SergeyBiryukov
6 months ago

  • Milestone changed from Awaiting Review to 5.5

@sabernhardt
4 months ago

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

@sabernhardt
4 months ago

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

#2 @sabernhardt
4 months ago

  • Focuses css added

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

Last edited 4 months ago by sabernhardt (previous) (diff)

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


4 months ago

#4 @whyisjake
4 months ago

  • Owner set to whyisjake
  • Status changed from new to accepted

#5 @whyisjake
4 months ago

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

#6 @ianbelanger
4 months ago

  • Keywords has-patch commit added
  • Owner changed from whyisjake to ianbelanger
  • Status changed from accepted to assigned

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

#7 @whyisjake
4 months ago

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.

#8 @whyisjake
4 months ago

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.

#9 @whyisjake
4 months ago

  • Keywords needs-patch dev-feedback added; has-patch commit removed

#10 @davidbaumwald
3 months ago

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

#11 @whyisjake
3 months ago

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

#12 @sabernhardt
3 months ago

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.

#13 @ianbelanger
3 months ago

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
3 months ago

Twenty Twenty: setting customized colors in block editor

#14 @sabernhardt
3 months ago

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

Last edited 3 months ago by sabernhardt (previous) (diff)

#15 @sabernhardt
3 months ago

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.

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


3 months ago

#17 @SergeyBiryukov
3 months ago

  • Milestone changed from 5.5 to 5.6

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.

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


2 months ago

#19 @kburgoine
2 months ago

  • Owner changed from ianbelanger to notlaura

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


5 weeks ago

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


4 days ago

Note: See TracTickets for help on using tickets.