- This topic has 5 replies, 2 voices, and was last updated 7 years, 8 months ago by
.
-
Posts
-
I have successfully moved over to Gutenberg on 2 sites so far (yay! Bliss). Rather than reworking the website’s aesthetics, I’m currently writing a blog post and I’ve come across a wee problem with spacing after the image block. As in, there’s 0 spacing between the image block and the block that follows regardless of whether the next block is a title block or a paragraph block.
This problem occurs when I add a caption or leave the caption blank. I can use the caption area to add a blank line to make some space but that’s not best practice.
Could this be a minor theme issue relating to the bottom margin for wp-block-margin or figure? While I can probably add some custom CSS to fix it, I can’t imagine anyone not wanting any space between an image and the next block as the page becomes too cluttered and less enjoyable to read.
Another thought is that I may have missed a customization area for the image block?
Cheers
-TinaPS. I haven’t posted the blog article yet, so if I’m not making sense and you can’t see the preview, I’m happy to take a screen capture.
Customer Support
Hi there,
Is there a specific page and image I should be looking at?
The page you linked take me to an error404.
Let me know 🙂
I can show you this now 🙂
https://tinadubinsky.com/4-article-templates/
On this page, go to the second image and you’ll notice that there’s limited space or padding between the image and the next block.
I know I can just enter a paragraph mark/return where the caption should go. OR add a spacer block but I think both of these are messy solutions.
If there is text in the caption, the padding after it is fine. It’s only where there’s no text.
Sure, I can add my own CSS to fix it but I think it might be a theme issue where insufficient padding is applied after particular blocks?
I also noticed the same thing happens after some other blocks that aren’t paragraphs or images with captions too. Check how close the heading is after the Google map (Custom HTML block) on this page. https://tinadubinsky.com/sent-to-coventry/
The cover image block seems to add sufficient space after the image.
The image is inserted using WP Media library so WordPress it’s actually deciding on the style.
You can add some padding to all WordPress images like this:
.wp-block-image { margin-bottom: 1em; }Let me know if this helps 🙂
Thanks, Leo. This helped. 🙂
No problem 🙂
- You must be logged in to reply to this topic.
