Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Fix image caption margins #9566
In #7721, we introduced a new wrapping div for the image block.
As part of that, the margin for the figure was also zeroed out. This is what caused the regression.
Most themes don't touch the figure, and it's born with 1em margin top and bottom. In testing, however, we noticed that some themes do provide figure styles, and they zero them out.
As such, this PR fixes the regression by:
This PR adds a 1em bottom margin to all captions. This margin collapses if the figcaption is inside a figure, but is still there in case it's inside a div.
To test, insert an image, a video, and an embed. Add captions. Try various alignments. Verify it looks good in all cases.
Actually, turns out https://github.com/WordPress/gutenberg/pull/7721/files#diff-d1d037caeeea85a91038b28fa70cd435R119 was what caused the regression. Let me try a quick alternate fix.
Okay, so my initial assessment was incorrect, with regards to the figures margin collapsing due to being inside a div. The problematic part was simply zeroing out the margin on the
However why did I zero out the margin on the figure in the first place? Well, because the figure also has left and right margins, and when the image is wide or fullwide, that margin should probably not be there to complexify things.
Tagging @kjellr also for a sanity check.
I gave this a spin, and it works as anticipated. Here are a few screenshots:
It's kind of unfortunate that so many of these themes show absolutely no vertical margins between image blocks w/no captions. But as noted above, I think we can explore a solution to that separately.
During testing, I noticed that video blocks don't seem to be inheriting captions styles, but I can reproduce that outside of this branch, so I'll file a separate bug.