Skip to content

Don't load core colors in editor when theme.json is used #40183

Closed
Closed
Don't load core colors in editor when theme.json is used#40183
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] EnhancementA suggestion for improvement.

Description

@vyskoczilova
vyskoczilova
opened on Apr 8, 2022

Description

Hi! Maybe I miss something, but why when we use theme.json and our colors the global colors are included? We're still fighting with overriding those and since they are inline, its absurdly hard and they are in fact no used in the theme.

I'm talking about these:

.editor-styles-wrapper .has-black-color {
color: var(--wp--preset--color--black) !important;
}

.editor-styles-wrapper .has-cyan-bluish-gray-color {
color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.editor-styles-wrapper .has-white-color {
color: var(--wp--preset--color--white) !important;
}

.editor-styles-wrapper .has-pale-pink-color {
color: var(--wp--preset--color--pale-pink) !important;
}

.editor-styles-wrapper .has-vivid-red-color {
color: var(--wp--preset--color--vivid-red) !important;
}

.editor-styles-wrapper .has-luminous-vivid-orange-color {
color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.editor-styles-wrapper .has-luminous-vivid-amber-color {
color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.editor-styles-wrapper .has-light-green-cyan-color {
color: var(--wp--preset--color--light-green-cyan) !important;
}

.editor-styles-wrapper .has-vivid-green-cyan-color {
color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.editor-styles-wrapper .has-pale-cyan-blue-color {
color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.editor-styles-wrapper .has-vivid-cyan-blue-color {
color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.editor-styles-wrapper .has-vivid-purple-color {
color: var(--wp--preset--color--vivid-purple) !important;
}

.editor-styles-wrapper .has-primary-color {
color: var(--wp--preset--color--primary) !important;
}

.editor-styles-wrapper .has-secondary-color {
color: var(--wp--preset--color--secondary) !important;
}

.editor-styles-wrapper .has-tertiary-color {
color: var(--wp--preset--color--tertiary) !important;
}

.editor-styles-wrapper .has-lightgray-color {
color: var(--wp--preset--color--lightgray) !important;
}

.editor-styles-wrapper .has-dark-color {
color: var(--wp--preset--color--dark) !important;
}

.editor-styles-wrapper .has-black-background-color {
background-color: var(--wp--preset--color--black) !important;
}

.editor-styles-wrapper .has-cyan-bluish-gray-background-color {
background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.editor-styles-wrapper .has-white-background-color {
background-color: var(--wp--preset--color--white) !important;
}

.editor-styles-wrapper .has-pale-pink-background-color {
background-color: var(--wp--preset--color--pale-pink) !important;
}

.editor-styles-wrapper .has-vivid-red-background-color {
background-color: var(--wp--preset--color--vivid-red) !important;
}

.editor-styles-wrapper .has-luminous-vivid-orange-background-color {
background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.editor-styles-wrapper .has-luminous-vivid-amber-background-color {
background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.editor-styles-wrapper .has-light-green-cyan-background-color {
background-color: var(--wp--preset--color--light-green-cyan) !important;
}

.editor-styles-wrapper .has-vivid-green-cyan-background-color {
background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.editor-styles-wrapper .has-pale-cyan-blue-background-color {
background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.editor-styles-wrapper .has-vivid-cyan-blue-background-color {
background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.editor-styles-wrapper .has-vivid-purple-background-color {
background-color: var(--wp--preset--color--vivid-purple) !important;
}

.editor-styles-wrapper .has-primary-background-color {
background-color: var(--wp--preset--color--primary) !important;
}

.editor-styles-wrapper .has-secondary-background-color {
background-color: var(--wp--preset--color--secondary) !important;
}

.editor-styles-wrapper .has-tertiary-background-color {
background-color: var(--wp--preset--color--tertiary) !important;
}

.editor-styles-wrapper .has-lightgray-background-color {
background-color: var(--wp--preset--color--lightgray) !important;
}

.editor-styles-wrapper .has-dark-background-color {
background-color: var(--wp--preset--color--dark) !important;
}

.editor-styles-wrapper .has-black-border-color {
border-color: var(--wp--preset--color--black) !important;
}

.editor-styles-wrapper .has-cyan-bluish-gray-border-color {
border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.editor-styles-wrapper .has-white-border-color {
border-color: var(--wp--preset--color--white) !important;
}

.editor-styles-wrapper .has-pale-pink-border-color {
border-color: var(--wp--preset--color--pale-pink) !important;
}

.editor-styles-wrapper .has-vivid-red-border-color {
border-color: var(--wp--preset--color--vivid-red) !important;
}

.editor-styles-wrapper .has-luminous-vivid-orange-border-color {
border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.editor-styles-wrapper .has-luminous-vivid-amber-border-color {
border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.editor-styles-wrapper .has-light-green-cyan-border-color {
border-color: var(--wp--preset--color--light-green-cyan) !important;
}

.editor-styles-wrapper .has-vivid-green-cyan-border-color {
border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.editor-styles-wrapper .has-pale-cyan-blue-border-color {
border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.editor-styles-wrapper .has-vivid-cyan-blue-border-color {
border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.editor-styles-wrapper .has-vivid-purple-border-color {
border-color: var(--wp--preset--color--vivid-purple) !important;
}

.editor-styles-wrapper .has-primary-border-color {
border-color: var(--wp--preset--color--primary) !important;
}

.editor-styles-wrapper .has-secondary-border-color {
border-color: var(--wp--preset--color--secondary) !important;
}

.editor-styles-wrapper .has-tertiary-border-color {
border-color: var(--wp--preset--color--tertiary) !important;
}

.editor-styles-wrapper .has-lightgray-border-color {
border-color: var(--wp--preset--color--lightgray) !important;
}

.editor-styles-wrapper .has-dark-border-color {
border-color: var(--wp--preset--color--dark) !important;
}

.editor-styles-wrapper .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
}

.editor-styles-wrapper .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
}

.editor-styles-wrapper .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
}

.editor-styles-wrapper .has-luminous-vivid-orange-to-vivid-red-gradient-background {
background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
}

.editor-styles-wrapper .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
}

.editor-styles-wrapper .has-cool-to-warm-spectrum-gradient-background {
background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}

.editor-styles-wrapper .has-blush-light-purple-gradient-background {
background: var(--wp--preset--gradient--blush-light-purple) !important;
}

.editor-styles-wrapper .has-blush-bordeaux-gradient-background {
background: var(--wp--preset--gradient--blush-bordeaux) !important;
}

.editor-styles-wrapper .has-luminous-dusk-gradient-background {
background: var(--wp--preset--gradient--luminous-dusk) !important;
}

.editor-styles-wrapper .has-pale-ocean-gradient-background {
background: var(--wp--preset--gradient--pale-ocean) !important;
}

.editor-styles-wrapper .has-electric-grass-gradient-background {
background: var(--wp--preset--gradient--electric-grass) !important;
}

.editor-styles-wrapper .has-midnight-gradient-background {
background: var(--wp--preset--gradient--midnight) !important;
}

.editor-styles-wrapper .has-dark-with-stripes-gradient-background {
background: var(--wp--preset--gradient--dark-with-stripes) !important;
}

.editor-styles-wrapper .has-small-font-size {
font-size: var(--wp--preset--font-size--small) !important;
}

.editor-styles-wrapper .has-medium-font-size {
font-size: var(--wp--preset--font-size--medium) !important;
}

.editor-styles-wrapper .has-large-font-size {
font-size: var(--wp--preset--font-size--large) !important;
}

.editor-styles-wrapper .has-x-large-font-size {
font-size: var(--wp--preset--font-size--x-large) !important;
}

.editor-styles-wrapper .has-normal-font-size {
font-size: var(--wp--preset--font-size--normal) !important;
}

.editor-styles-wrapper .has-huge-font-size {
font-size: var(--wp--preset--font-size--huge) !important;
}

Not sure if it's related to the #40181

I think it's a bug and Gutenberg should use avoid those hijacking style tactics - if you build standard CSS it's really time consuming to solve the conflicts you have no control about (since they happen when you update the Core).

Step-by-step reproduction instructions

  1. Go to the editor with a theme with the theme.json and they are still printed into head

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Activity

  1. ndiego
    added
    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json
    on Apr 8, 2022

  2. ndiego commented on Apr 8, 2022

    @ndiego
    ndiego
    on Apr 8, 2022
    Member

    HI @vyskoczilova, you can remove the core color specifications on the frontend by adding the following to your theme.json file. This will also remove the default color and gradient palettes from the color picker UI.

            ...
	"settings": {
		"color": {
			"defaultGradients": false,
			"defaultPalette": false, 
			...

    They are still printed in the Editor as you indicated, but this will ideally get resolved in future versions of Gutenberg. Thanks for flagging! More functionality for theme developers to opt-out of certain features is ongoing. I will link any relevant PRs as they get created.

  3. skorasaurus commented on Apr 8, 2022

    @skorasaurus
    skorasaurus
    on Apr 8, 2022
    Member

    @vyskoczilova Could you edit the issue's title to include 'editor' in the title (e.g. "Don't load core colors in editor..."; so it will be easier to find ?

  4. skorasaurus
    closed this as completedon Apr 8, 2022
  5. skorasaurus
    reopened this on Apr 8, 2022
  6. vyskoczilova
    changed the title [-]Don't load core colors when theme.json is used[/-] [+]Don't load core colors in editor when theme.json is used[/+] on Apr 12, 2022

  7. vyskoczilova commented on Apr 12, 2022

    @vyskoczilova
    vyskoczilova
    on Apr 12, 2022
    ContributorAuthor

    HI @skorasaurus thanks a lot. I know that I can get rid of them in the frontend, but backend styles are overwriting my styles and instead of having just only one set, I need to develop styles for the editor as well :( I thought that having compact and prefixed blocks will solve this problem, but since all bunch of styles are inline it causes a lot of troubles.

  8. maffi-git commented on Jul 6, 2022

    @maffi-git
    maffi-git
    on Jul 6, 2022

    And do we really need !important styles?

  9. skorasaurus commented on Jul 6, 2022

    @skorasaurus
    skorasaurus
    on Jul 6, 2022
    Member

    And do we really need !important styles?
    @maffi-git
    regarding the use !important in css, there is an issue about this at #37590

  11. WORX-Developer commented on Dec 7, 2022

    @WORX-Developer
    WORX-Developer
    on Dec 7, 2022

    I can verify this behavior. The --wp-preset--... definitions for default colors, gradients and duotone are still present on the frontend even with

    "defaultDuotone": false, "defaultGradients": false, "defaultPalette": false,

  12. georgepetridis commented on Dec 19, 2022

    @georgepetridis
    georgepetridis
    on Dec 19, 2022

    I can verify this also. I'm attempting to add a custom color palette to theme.json and only have that appear on the frontend with css variables. Generally the functionality is great but perhaps we need a way to remove the default colors/gradients and duotones from the frontend as listed by @kauaicreative.

  13. webexpr-dhenriet commented on Mar 26, 2023

    @webexpr-dhenriet
    webexpr-dhenriet
    on Mar 26, 2023

    I can see the problem too, if defaultPalette, defaultDuotone and defaultGradients are set to false then we don't want to display palette in back office and in front we don't want inline style and css variables "--wp--preset-yyyy--" either.
    Any news for this problem, is it possible to disable all this (back and front) ?

  14. skorasaurus
    added
    [Type] EnhancementA suggestion for improvement.
    on Mar 26, 2023

  15. maddisondesigns commented on Dec 19, 2023

    @maddisondesigns
    maddisondesigns
    on Dec 19, 2023

    Still seeing this issue. Adding the abovementioned false color settings to theme.json doesn't seem to do anything.

  16. Kac-per commented on Dec 20, 2023

    @Kac-per
    Kac-per
    on Dec 20, 2023

    I have the same problem, but the question is whether this is by accident or by design that this setting doesn't work as we expect. I have found many other discussions in this repo suggesting the core global palette intentionally always loads on frontend for compatibility reasons. So maybe the defaultPalette setting is not supposed to do anything right now and exists for future? Maybe someone from core development team could clarify that?

  17. maheshwaghmare commented on Jul 17, 2024

    @maheshwaghmare
    maheshwaghmare
    on Jul 17, 2024
    Contributor

    The issue still exists.

    JSON

    {
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "color": {
            "defaultDuotone": false,
            "defaultGradients": false,
            "defaultPalette": false,
            ...

    Still variable exists as:

    --wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
...
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);

  18. jasmussen commented on Sep 24, 2026

    @jasmussen
    jasmussen
    on Sep 24, 2026
    Contributor

    I'd like to see a fix for this. Any good simple ideas, @WordPress/gutenberg-design?

  19. t-hamano commented on Sep 25, 2026

    @t-hamano
    t-hamano
    on Sep 25, 2026
    Contributor

    From the perspective of backward compatibility, I don't think we can remove the default color variables. Instead, it should be possible to prevent these outputs using hooks.

  20. sunmorgn commented on Oct 6, 2026

    @sunmorgn
    sunmorgn
    on Oct 6, 2026

    Use case: get rid of the bloat. We should have options to slip down unneeded output even beyond this.

  21. t-hamano commented on Oct 6, 2026

    @t-hamano
    t-hamano
    on Oct 6, 2026
    Contributor

    Is there any output that cannot be stopped even when using these hooks? If not, we should be able to close this issue.

  22. skorasaurus commented on Oct 12, 2026

    @skorasaurus
    skorasaurus
    on Oct 12, 2026
    Member

    Hi @t-hamano ;

    Thank you so much for providing that code snippet and link..

    I can confirm across a couple different installations and setups ('classic' themes, a pure block themes with no php templates at all),
    with that code snippet using the wp_theme_json_data_default filter hook, the default core colors will not load in the DOM (in the editor).

    For reference, if anyone else is wondering:
    You may have also seen the following snippet recommended for theme.json, even with that snippet, the colors are still loaded in the DOM.

    "color": { "defaultDuotone": false, "defaultGradients": false, "defaultPalette": false, "palette": [] },

    That theme.json snippet, is helpful but it only prevents the default duotones, gradients, and palette display colors from appearing the blocks' settings in the block editor. Only by using the wp_theme_json_data_default filter hook, can you control the output of the css variables in the dom.

  23. skorasaurus
    closed this as completedon Oct 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions