Relate Post: Change theme color palette and gradient background – WordPress Theme Emulsion
Fixed In emulsion theme 1.8.2, when switching the theme to emulsion, the contrast between the foreground color and the background color of post created with other themes is lost.
If you change the emulsion theme to another theme, the background of the post created with the emulsion theme may be hidden. Added the ability to restore the background of the emulsion theme to the emulsion-addons plugin if the theme is changed to another theme.
The WordPress block editor has a function to specify the background color and text color for each block. This feature has the problem that when you change the theme, the contrast between the background color and the text disappears, and you have to modify all the articles created with the theme before the change.
An example where such a problem actually occurs
Create a post with the Twenty Twenty One theme.
<!-- wp:heading {"backgroundColor":"dark-gray","textColor":"white"} -->
<h2 class="has-white-color has-dark-gray-background-color has-text-color has-background">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"backgroundColor":"dark-gray","textColor":"red"} -->
<p class="has-red-color has-dark-gray-background-color has-text-color has-background">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"dropCap":true,"backgroundColor":"dark-gray","textColor":"white"} -->
<p class="has-drop-cap has-white-color has-dark-gray-background-color has-text-color has-background">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br />THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br />THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<!-- /wp:paragraph -->
Why do these problems occur?
Many block editor themes use a function called add_theme_support ('editor-color-palette', array (…)) to set theme-specific color settings, which is the default color setting of the core. Overwrite.
If this setting is not made, the background color class (example: has-black-background-color) with the following name can be set. Also, the CSS colors for these classes are already set in the core.
black
white
cyan-bluish-gray
pale-pink
vivid-red
luminous-vivid-orange
luminous-vivid-amber
light-green-cyan
vivid-green-cyan
pale-cyan-blue
vivid-cyan-blue
vivid-purpleThe editor-color-palette set in the theme will be lost when you switch the theme, so the background color will not be applied.
If you switch themes if all the color specifications aren’t applied, the new color specifications should be applied and the contrast problem shouldn’t occur, but there is a pitfall.
Many themes have black and white color settings. This is a setting that you should have to maintain the contrast between the background and the text, but by having this, only the background color is disabled and the display is blank.
Is this seen as a problem?
As for WordPress, I think everyone agrees that various reviews and hacks have been published.
In particular, the theme team (formerly the theme review team changed the name of the team to be involved in the theme in general) has traditionally been content portability (in a nutshell, the content doesn’t disappear when the theme is changed). Was important.
No mention from the team about contrast was found
In particular, the emulsion theme decided to address this issue, with no one finding it to be a problem.
In the emulsion theme, I decided to look for a solution with this as the theme problem.
Immediate solution, part 1 If a background color is set, a class called has-background will be added at the same time as the theme color class (has-xxx-background-color), so CSS the fallback color to that class So I decided to add it.
Note:Note that the cover block does not have the has-background class, and many assume that media such as images exist, so the character string is fixed in white.
Note:If the theme after switching, such as Twenty Twenty theme, has a common background class, the background class of the theme after switching has priority.
With this, it seemed that I could somehow ensure the minimum readability for the problem that the content disappeared when switching from another theme to the emulsion theme.
Contrast issues when switching emulsion theme to another theme
Instead of taking a radical method such as automatically writing styles to custom CSS, if the theme is other than emulsion, we will deal with it by adding styles only to the theme color class. Did. This will allow you to roughly reproduce the background color of posts created with the emulsion theme in other themes only if the plugin is enabled.
Miscellaneous feelings
I recently noticed this problem. I didn’t usually look seriously at relationships with other themes, but rather admitted that block editors were getting better over the years.
However, when I turned my eyes to the user, incredible things happened in various block editor themes.
Many users will be experimenting with “themes they care about” while running the site.
If the new block editor theme changes and “the content of an existing post cannot be displayed”, that theme cannot be evaluated.
Perhaps it encourages aversion to block editor themes.
The core does not depend on class names that simply represent colors, such as luminous-vivid-orange, but changes to class names that have a more semantic meaning, and these color classes and CSS variable names, I’d like to change the theme to something that can be used flexibly, but what I need is to deal with it within the current function of WordPress.
In order to verify the problem with this theme, I repeated some work such as creating an article with some block editors and displaying it with other themes, but unfortunately many themes have color problems. It was seen. I hope this memo helps someone.