Block editor not respecting block color setting

  • When using the latest Twenty twenty two theme(tested this on three different servers with default WordPress installs), setting the color for a code block does not work properly. Setting the background color that is right beside the color setting does work though.

    It appears that the parent of the blocks generated <code> element is automatically a <pre> element with css classes added to it depending on what color you choose for the block color and background color, like below:

    <code><pre class="wp-block-code has-vivid-red-color has-vivid-purple-background-color has-text-color has-background"><code><?php echo "Some code goes here"; ?></code></pre>

    However the actual <code> element that is generated has its color overridden by an inline block of css that appears to be automatically added, from I have no idea what, like below:

    .wp-block-code > code {
  font-family: Menlo,Consolas,monaco,monospace;
  color: #1e1e1e; /* I can over ride this line in my style.css sheet, but why is this whole css block being generated that overrides my block setting for color? */
  padding: .8em 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}

    Does anyone know if the above css block can be changed in the dashboard settings somewhere without having to override it with css, or is this a bug with the twenty twenty two theme, or maybe the block editor?

    • This topic was modified 2 years, 6 months ago by Ben HartLenn.
    • This topic was modified 2 years, 6 months ago by Ben HartLenn.
    • This topic was modified 2 years, 6 months ago by Ben HartLenn.
    • This topic was modified 2 years, 6 months ago by Ben HartLenn.
    • This topic was modified 2 years, 6 months ago by Ben HartLenn.
Viewing 1 replies (of 1 total)
  • MaxD

    (@max-dayala)

    I don’t know, but I had a go at reproducing this.

    First, your code fragment seems to contain an unbalanced code element before the start of the pre element. Is this a copying error?

    To reproduce something similar I first created a pre block in the editor with several lines of text and set the color.

    Then I highlighted an inline block of text and made it into inline-code using the block editor bar.

    Then I clicked on the down error in the editor bar and selected the highlight command which allowed me to set the text color of the inline code block.

    Here is the generated code:

    <pre class="wp-block-preformatted has-vivid-green-cyan-color has-text-color">Preformatted block of text.
Another line of text
This is a <code><mark style="background-color:rgba(0, 0, 0, 0);color:#512ccf" class="has-inline-color">code=1234</mark></code> block.
In the middle of the pre block.
</pre>

    I ended up with a pre block with green text and the inline “code=1234” code block having blue text.

    This looks to be a different structure to what you have since it uses the <mark> element to set the color.

    • This reply was modified 2 years, 6 months ago by MaxD.
    • This reply was modified 2 years, 6 months ago by MaxD.
    • This reply was modified 2 years, 6 months ago by MaxD.
    • This reply was modified 2 years, 6 months ago by MaxD.
Viewing 1 replies (of 1 total)
  • The topic ‘Block editor not respecting block color setting’ is closed to new replies.

Tags