I have a custom WordPress theme. When I change the color in the block editor and preview the page the color does not update. I can alter the type size, weight, alignment, etc. but not the color.
I have tried targetting the id of the container div and while it will take other values if specified it will not take the color from the block editor despite the HTML tags receiving the assigned classes from WordPress.
More frustratingly, is if I add a color manually in the Chrome Inspector to the below code #landing-template.entry-content h2 for example, the color will update because it’s targetted correctly.
I have provided code below as well as screenshots for context.
CSS – Targetting the containing
#landing-template.entry-content h2,
#landing-template.entry-content p{
color:inherit !important; /* I have tried other values such as initial and unset and removing the call to this entirely to no desired effect */
font-weight:inherit !important; /* Changing font-weight not a problem */
}
Figure 1: As seen in Chrome Inspector: the id, class and element targetted is on and correct if I were to manually type in color:red in the Chrome Inspector it would work. However it will not take the WordPress block editor colors
Figure 2 this is the HTML element as it appears in the DOM with the WordPress classes such as .has-text-color
Figure 3: As mentioned earlier editing the color directly in the Chrome Inspector does work. In this example in the color selector color:blue does update the element to blue. However, it will not take the WordPress color assigned in the editor
