Archived topic
Gutenberg Code Block - font size not changing
7 replies · Started by Trevor on March 16, 2022
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
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. :)
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.
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. :)
Hi Fernando,
You linked this thread to itself. What article did you mean?
Sorry about that.
Fixed the link on my previous reply. Kindly let us know how it goes. :)
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.
Great! Thank you for sharing Trevor! :)
