WP 6.0 Code Block loses monospace font style

[diggeddy]

Core code block produces this HTML:

<pre class="wp-block-code">
    <code>Here is some code in a block</code>
</pre>

WP 6.0 amended the block styles to:

.wp-block-code code {
    display: block;
    font-family: inherit;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

The added font-family: inherit; now inherits from the pre tag. And GP has this CSS:

pre {
    ...
    font-family: inherit;
    font-size: inherit;
    ...
}

So code inherits from pre which inherits from body which overrides this GP style for the WP Code Block:

code, kbd, tt, var {
    font: 15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
}

Options:

1. Include the pre tag in the GP code, kbd, tt, var CSS. Concerns that this may affect users who have used the pre tag for other uses.

2. Leave alone and tell users how to fix in the Customizer > Typography

[JeanPaiva]

I vote for the second option, unless it become a common problem for many users.

[diggeddy]

Agree with 2nd option. Closing

[gabbsmo]

User here that just ran into this. I use this workaround CSS for now:

.wp-block-code code {
    font-family: Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
}