- This topic has 13 replies, 3 voices, and was last updated 5 days, 7 hours ago by David.
January 6, 2022 at 10:04 am #2071450Dan
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?January 6, 2022 at 12:22 pm #2071568DavidStaffCustomer SupportJanuary 6, 2022 at 4:10 pm #2071761Dan
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.January 6, 2022 at 4:43 pm #2071796LeoStaffCustomer SupportJanuary 7, 2022 at 9:05 am #2072575Dan
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:January 7, 2022 at 10:25 am #2072624DavidStaffCustomer 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
Customand in the Enter custom CSS selector field:
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:
Individual Galler item:
.wp-block-gallery .blocks-gallery-item figcaptionJanuary 7, 2022 at 11:39 am #2072693Dan
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.January 8, 2022 at 6:17 am #2073229DavidStaffCustomer SupportJanuary 10, 2022 at 2:19 pm #2075925Dan
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=0January 11, 2022 at 4:15 am #2076396DavidStaffCustomer SupportJanuary 11, 2022 at 9:18 am #2076888Dan
The error does get published. I just published it so you can take a look.January 11, 2022 at 10:50 am #2076978DavidStaffCustomer SupportJanuary 11, 2022 at 1:57 pm #2077169Dan
Got it. So you’ll patch this in a future release but for now, I will use CSS?January 12, 2022 at 3:59 am #2077692
- You must be logged in to reply to this topic.