[Resolved] Gutenberg Code Block – font size not changing

[Trevor]

Hi,
I’m using the Code Block to show some code snippet in a post. But the font size selection from the built in right hand menu ‘Typography’ section seem to be overwritten by GeneratePress. I believe the theme file GeneratePress: all.css (assets/css/all.css) line 800:

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

Is superseding the built in WordPress code block size. I know I could write my own css to overwrite your css but I want individual control of it from the wordpress menu for different posts.

Am I missing something / do you have any advice?

-Thanks

[Fernando]

Hi Trevor,

Alternatively, to control the font size of all Code Blocks globally, you may set a Typography in Appearance > Customize > Typography as such:

https://share.getcloudapp.com/YEurvLBv

https://share.getcloudapp.com/7KuQxDQm

Kindly let us know if this works. 🙂

[Trevor]

The Typography options in Customize don’t look like that image.

Additionally as I said in my first post I don’t want to globally control the Code Block font. I can change the default size with css easily enough but I want the built in WordPress block controls to override the defaults as anyone would expect it to function.

[Fernando]

I see.

With regards to the Dynamic Typography options in the Customizer here is an article which may assist: https://docs.generatepress.com/article/switching-to-dynamic-typography/

With regards to the WP font size settings for the Code Block, spoke with Tom and as of now, to make it work, you would need to add a custom CSS code.

For instance:

.has-x-large-font-size code {
    font-size: var(--wp--preset--font-size--x-large) !important;
}

Also see: https://share.getcloudapp.com/nOuRWql8

Hope this clarifies. Thank you for understanding. 🙂

[Trevor]

Hi Fernando,

You linked this thread to itself. What article did you mean?

[Fernando]

Sorry about that.

Fixed the link on my previous reply. Kindly let us know how it goes. 🙂

[Trevor]

Thanks Fernando, I will look into updating to the dynamic typography.

In case it helps someone else the solution I ended up using was adding this to the Custom CSS:

/*Override GeneratePress code block font size*/
code{font-size: inherit;}

That gives the font size control back to the default Gutenberg code block controls.

[Fernando]

Great! Thank you for sharing Trevor! 🙂

[Author]

Posts