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
- 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
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:
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
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