Confused about Gutenberg image captions

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.

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.

The 17px is actually set by your custom CSS:
https://www.screencast.com/t/jrNrWXrh5OAO

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:

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

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.

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.

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

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?

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

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;
}

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

Thats correct.

I went ahead with this, but now the body text in the editor is not the same as on published pages.

Before turning on this font feature, the text in the editor matched the text on the live site.

After turning on this feature, the line-height and margin-bottom of the editor text are now different to those on the published pages.

Is this deliberate for some reason? A bug? I'm not sure why this would change.