Block editor: can’t change format of inline code blocks

  • Resolved defjaf

    (@defjaf)


    6 months, 2 weeks ago

    I’ve just to moved an old Movable Type 5 blog over to wordpress, and the process was relatively straightforward. But now I am trying to tweak the styles of my site.

    (For what it’s worth, this is using WP Multisite with the GroundWP theme.)

    One particular issue I am having is with <code> blocks. I didn’t like the white-on-black default, so I changed it in the block editor (for both code and pre) to something nicer. This worked fine for preformatted multiline code blocks, but it had no effect on inline code. (To be clear, I just mean this: <code>def f(x): pass</code>)

    According to this question, all I need to do is add the appropriate CSS to the theme’s “Additional CSS” box. I tried this (e.g., code {color: green;}) and it modified the multiline code blocks, but not the inline code.

    Am I missing something? Is there a more fine-grained selector I should use?

Viewing 2 replies - 1 through 2 (of 2 total)

  • You’re dealing with basic HTML & CSS issues here.

    If you inspect the HTML, you’ll see the Preformatted block is rendered as <pre class="wp-block-preformatted">...</pre>, while the Code block is ended as <pre class="wp-block-code"><code>... </code></pre>.

    So the Preformatted block’s styling will never work for the inline <code> element.

    As to why the Code block’s styling and your Additional CSS code don’t work for your inline <code> element, it’s simply because your theme has a CSS rule in its style.css file which has a more specific selector *:not(.wp-block-code) > code:

    *:not(.wp-block-code) > code, kbd {
    background-color: var(--wp--preset--color--main);
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--small);
    padding: 5px 8px;
    position: relative;
    top: -1px;
}

    So, this is the CSS code that you must override. But note that this style, in the theme’s style.css file, is way down the page: the output of the “Additional CSS” is ABOVE this code. And since the code lower down the page wins in CSS, the selector used must have a higher specificity than *:not(.wp-block-code) > code.

    Without an examination of your HTML, I’m unable to offer what I’d consider an elegant solution. The “lazy” way out is to add the !important flag to your declarations, like this: 

    *:not(.wp-block-code) > code {
    background-color: red !important;
    color: green !important;
}

    If you could add a class to your inline code tags, you could then target this class specifically… and that would be a more elegant solution.

    Thread Starter defjaf

    (@defjaf)

    Thank you! It may not be elegant, but it works (and now I sort of understand what’s going, so also thank you for your explanation).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Block editor: can’t change format of inline code blocks’ is closed to new replies.