search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.57k stars 4.22k forks source link

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

Open vyskoczilova opened 2 years ago

vyskoczilova commented 2 years ago

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 https://github.com/WordPress/gutenberg/issues/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

ndiego commented 2 years ago

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.

skorasaurus commented 2 years ago

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

vyskoczilova commented 2 years ago

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.

maffi-git commented 2 years ago

And do we really need !important styles?

skorasaurus commented 2 years ago

And do we really need !important styles? @maffi-git regarding the use !important in css, there is an issue about this at https://github.com/WordPress/gutenberg/issues/37590

kauaicreative commented 2 years ago

@ndiego Even with "defaultPalette": false, set I'm still getting the core colors on the front end. This is the case with or without the gutenberg plugin installed.

 ...
"settings": {
        "appearanceTools": true,
        "color": {
            "defaultDuotone": false,
            "defaultGradients": false,
            "defaultPalette": false,
            ...
image
WORX-Developer commented 1 year ago

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,

georgepetridis commented 1 year ago

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.

webexpr-dhenriet commented 1 year ago

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

maddisondesigns commented 11 months ago

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

Kac-per commented 11 months ago

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?

maheshwaghmare commented 4 months ago

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%);