[Support request] Confused about Gutenberg image captions

Home Forums Support [Support request] Confused about Gutenberg image captions

Home Forums Support Confused about Gutenberg image captions

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2071450
    Dan

    I’m not sure how this happened because I think it all used to be fine.

    Gutenberg image captions are 13px but Gutenberg gallery captions are 17px? It seems strange that they would be different.

    Also, in the Gutenberg editor, image captions are actually 17px. Something seems out of whack here. Should they not all be the same? Or at the very least, the image caption size in the editor should reflect that which is on the page?

    #2071568
    David
    Staff
    Customer Support

    Hi there,

    Do you have a link where i can see the issue?
    Its probably a core block style that we haven’t treated in the theme.

    #2071761
    Dan

    Link in code area.

    The first image has a caption, you’ll see it as 13px.

    Second set of images is a 3-wide gallery with a caption. You’ll see that at 17px.

    In the editor, both single image and gallery captions display as 17px.

    #2071796
    Leo
    Staff
    Customer Support
    #2072575
    Dan

    Yes, after discovering there was an issue with this, I wrote a line of custom CSS to correct it.

    Before replying and sending you the link, I deleted that CSS so as not to confuse things but then forgot to clear the CSS cache on the site. I have done that now.

    Image caption text size surely should be 17px. As this is the gallery caption text size, and the image caption text size in the editor. The fact that I have custom CSS there to fix this just proves my point 🙂

    Here is a screenshot in the private box showing it is 13px when my custom CSS fix is disabled:

    #2072624
    David
    Staff
    Customer Support

    The Image Block caption font size of 13px is from GP’s legacy CSS, when Block editor was introduced to maintain those legacy front-end styles in existing sites we applied it to the .wp-block-image figcaption. We however didn’t apply it to the editor CSS – one reason was that 13px in the block editor interface didn’t make a good editing experience.

    If you’re using GP 3.1’s typography you can add a Customizer > Typography setting for it by setting the Target Element to Custom and in the Enter custom CSS selector field:

    .wp-block-image figcaption

    The style you set here will be visible in the editor and frontend.

    For the Galleries GP didn’t and still doesn’t add font sizes to there captions. To set a style or override the Core Block styles for the Gallery captions you can add additional custom typography settings and use these selectors:

    Main gallery caption: figcaption.blocks-gallery-caption

    Individual Galler item: .wp-block-gallery .blocks-gallery-item figcaption

    #2072693
    Dan

    Ok it sounds like I need to switch to this new dynamic typography system. I didn’t really understand it when it was launched so I just ignored it.

    I just tried turning it on, and immediately noticed it messing up some spacing in my articles.

    Example before turning on dynamic typography: https://www.dropbox.com/s/ps1tgn62elhxga4/Screen%20Shot%202022-01-07%20at%2011.16.56%20AM.png?dl=0

    After turning on dynamic typography: https://www.dropbox.com/s/0jfiktywqehuvdj/Screen%20Shot%202022-01-07%20at%2011.17.33%20AM.png?dl=0

    What is confusing is that this spacing that has been changed doesn’t seem to be part of the H2s original typography settings. There was no top margin or padding, so I’m not sure why it has been affected: https://www.dropbox.com/s/kud94jd4llfgwpx/Screen%20Shot%202022-01-07%20at%2011.22.23%20AM.png?dl=0

    It seems that turning on dynamic typography has an effect on the margin after a grouped set of elements. I tested this by duplicating the group – in this case the table of contents – and saw the margin change between them when turning this feature on.

    #2073229
    David
    Staff
    Customer Support

    Have you made any changes on the staging site ?
    If remove the additional Text block and the duplicate group block then i don’t see the issue you shared in the screenshot.

    Let me know.

    #2075925
    Dan

    I had not made any changes.

    To make sure we are not confusing things, I have deleted the duplicate Table of Contents group and deleted the additional text block.

    Here is a screen recording of what I’m seeing: https://www.dropbox.com/s/64pybpni47cnnjg/Screen%20Recording%202022-01-10%20at%202.18.04%20PM.mov?dl=0

    #2076396
    David
    Staff
    Customer Support

    I can’t see what would cause that. If you change to dynamic typography on your staging site and Publish that change. How does it look on the front end?

    #2076888
    Dan

    The error does get published. I just published it so you can take a look.

    #2076978
    David
    Staff
    Customer Support

    Ok we seen a couple of instances of this – for the time being can you add this CSS to fix that:

    .entry-content > [class*="wp-block-"]:not(:last-child) {
        margin-bottom: 1.6em;
    }
    #2077169
    Dan

    Got it. So you’ll patch this in a future release but for now, I will use CSS?

    #2077692
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.