WordPress
Global Colors in 2021 conflicting with Editor-Set Colors?
Description
I found some strange behaviour and at least half a dozen posts in the Core Trac regarding this topic. At first I thought it simply was a 2021 problem but then I thought that this could somehow transcend to Gutenberg implementation, or not, this is what I'm trying to find out here. The thing is that i'm yet not too experience on how Gutenberg works and I would like a 2nd opinion on what could be happening
The problem:
First we have to go into 2021 theme. This is the last non-block theme. It was introduced just in the middle of this transition. This is the first theme that introduces global variables like --global--color-primary
If we go to the style.css we can find something like this:
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary);
This global variables are being referenced in a big amount of places. For example, here (around L2448)
.wp-block-latest-posts .wp-block-latest-posts__post-author {
color: var(--global--color-primary);
font-size: var(--global--font-size-md);
line-height: var(--global--line-height-body);
}
This snippet references specifically to the block "Latest Posts". Which happens to have a color selector editor.
If I'm not wrong, Technically, in a regular Block Theme --global--colors are editable via Editor > Styles > Colors > Edit Palette. Here we will can select the global color. And even after then, they can be overwritten in the block specific colors.
But 2021 seems to have a foot in both camps. Its like it was fully implemented to be ready to be a block theme, but it doesnt have the features required for such.
But I'm not 100% sure if this behaviour could be overriden by gutenberg block specific styles somehow, or if its matter of simply wiping all the global variables from the 2021, setting specific colors, and letting Gutenberg do his job.
I'm going to leave here a list of all the Core Trac Reports I find with this problem:
Step-by-step reproduction instructions
- Enable 2021 theme
- Add a latest posts block
- Add the post author meta to the block
- Change the block text colors.
Screenshots, screen recording, code snippet
No response
Environment info
- WordPress: 6.9-alpha-60093-src
- PHP: 8.2.28
- Server: nginx/1.27.5
- Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
- Browser: Chrome 137.0.0.0
- OS: Windows 10/11
- Theme: Twenty Twenty-One 2.5
Please confirm that you have searched existing issues in the repo.
- [x] Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- [x] Yes
Please confirm which theme type you used for testing.
- [ ] Block
- [x] Classic
- [ ] Hybrid (e.g. classic with theme.json)
- [ ] Not sure
But 2021 seems to have a foot in both camps. Its like it was fully implemented to be ready to be a block theme, but it doesnt have the features required for such.
I think Twenty-Twenty-One is a pure classic theme without a theme.json and is not intended to be compatible with block themes.
if this behaviour could be overriden by gutenberg block specific styles somehow, or if its matter of simply wiping all the global variables from the 2021, setting specific colors, and letting Gutenberg do his job.
In principle, we should be able to override the theme's default styles using the color, typography, spacing, and other controls via the block sidebar.
However, new block support is sometimes added after a theme is released, which can cause unintended issues.
For example, Twenty Twenty-One was released in WordPress 5.6. And the color setting was added to the Latest Posts block in Gutenberg 14.6, i.e. WordPress 6.2. At the time the theme was released, the Latest Posts block did not support color, so it was impossible to imagine cases where the colors would be overridden.
.wp-block-latest-posts .wp-block-latest-posts__post-author {
color: var(--global--color-primary);
}
I'm not sure what this style is for, but since color: var(--global--color-primary) is also applied to the body element, it looks like it can be deleted. I checked https://github.com/WordPress/twentytwentyone/pull/153 why this style was added, but I couldn't find a clear reason.
These issues, which are not limited to colors, need to be fixed in the theme. TT1 can not be turned into a block theme without making a second, new theme. Because it is required to be compatible with the WordPress version that is listed as the "requirers at least" WordPress version in style.css: 5.3.
What makes the color settings more difficult is that the theme has a color contrast feature and dark mode, where if the background color changes, so does the text.
I n principle, we should be able to override the theme's default styles using the color, typography, spacing, and other controls > via the block sidebar.
Correct, but due to CSS specificity in the theme currently almost everything needs adjustments: That is why all the color options have NOT been enabled in this theme. Such as link color, border. Much of this exists as separate trac tickets.
Therefor, I think this issue should be closed.
@SirLouen There is a WordPress GitHub issue tracker for managing these larger theme and block setting compatibility issues. There is not much activity (because out of the 3 active contributors, none of us are sponsored to work on it anymore), but the information that has already been collected, is there.
https://github.com/WordPress/Default-theme-issue-tracker/issues
@carolinan Thanks for the feedback.
I also believe this issue should be resolved on the theme side, but I think the fundamental problem is that the minimum WordPress version supported by the default theme is too low.
In particular, the CSS selectors and specificity of the CSS output by Gutenberg may differ depending on the WordPress version. I feel that it is very difficult to guarantee that a single theme will have the correct styles applied in all major versions from WordPress 5.3 to WordPress 6.8 (My related comment).
Yes, I agree.
We are not allowed to change the minimum required versions, this is a decision made by Matt Mullenweg. We are also not allowed to retire these themes and stop solving non-critical bugs.
I don't like the idea of loading different stylesheets for different versions, but it is what I keep coming back to.