[Resolved] Gutenberg Code Block – font size not changing

Home Forums Support [Resolved] Gutenberg Code Block – font size not changing

Home Forums Support Gutenberg Code Block – font size not changing

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by Fernando.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2157361
    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

    #2157380
    Fernando
    Customer Support

    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. πŸ™‚

    #2157395
    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.

    #2157431
    Fernando
    Customer Support

    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. πŸ™‚

    #2157445
    Trevor

    Hi Fernando,

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

    #2157447
    Fernando
    Customer Support

    Sorry about that.

    Fixed the link on my previous reply. Kindly let us know how it goes. πŸ™‚

    #2178076
    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.

    #2178101
    Fernando
    Customer Support

    Great! Thank you for sharing Trevor! πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.