Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vyskoczilova opened this issue Apr 8, 2022 · 12 comments
Open

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

vyskoczilova opened this issue Apr 8, 2022 · 12 comments
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@vyskoczilova
Copy link
Contributor

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

@ndiego ndiego added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Apr 8, 2022
@ndiego
Copy link
Member

ndiego commented Apr 8, 2022

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
Copy link
Member

skorasaurus commented Apr 8, 2022

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

@skorasaurus skorasaurus reopened this Apr 8, 2022
@vyskoczilova 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 Apr 12, 2022
@vyskoczilova
Copy link
Contributor Author

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
Copy link

And do we really need !important styles?

@skorasaurus
Copy link
Member

skorasaurus commented Jul 6, 2022

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

@kauaicreative
Copy link

kauaicreative commented Jul 7, 2022

@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
Copy link

WORX-Developer commented 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,

@georgepetridis
Copy link

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
Copy link

webexpr-dhenriet commented 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) ?

@maddisondesigns
Copy link

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

@Kac-per
Copy link

Kac-per commented 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?

@maheshwaghmare
Copy link
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%);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests