Classic themes(Publication, Button 2, Cubic): Image Block displayed with no bottom margin

[liviopv]

Quick summary

It seems that a change in the markup of the Image Block has led to Image Blocks on the Publication theme to be displayed without any bottom margin, so any element without a top margin or padding (such as a Paragraph Block) is displayed directly below the image, with no gap.

Images that were inserted into the post before recent updates are displayed correctly while adding new Image Blocks lead to this issue.

Example of the old block markup:

Example of the new block markup:

Steps to reproduce

1. Activate the Publication theme
2. Create a new post or page
3. Add a regular Image Block
4. Add a regular Paragraph Block below the Image Block

What you expected to happen

There should be at least a small gap of white space between the image and the text.

What actually happened

The image and the text are displayed with no gap

Context

Customer report

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Publication https://wordpress.com/theme/publication

Browser, operating system and other notes

Tested on Chrome 102.0.5005.115, Mac OS 12.4

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, easy to implement

Workaround details

div.wp-block-image {
    margin-bottom: 24px;
}

This seems to fix the issue without creating a new one

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - Yes/No

📌 SCRUBBING

• Tested on P2 - no
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted - no

📌 FINDINGS/SCREENSHOTS/VIDEO

• I cannot replicate this and I noticed the markup follows the first structure mentioned above.

📌 ACTIONS

• Await author feedback

📌 Message to Author

• @liviopv is this present while using the Classic editor perhaps? Also, could you share the user report with us?

[liviopv]

Sorry, it's 5321946-zd-woothemes and 32693627-hc

This is the user post https://the-right-spirit.com/2019/09/13/nine-ryes-a-wheater-and-a-barely-legal-bourbon-walk-into-a-bar/ there's a good chance it was previously edited in the Classic Editor. If it's not due to a change in the markup, it's likely a bug that always existed in the theme and was never reported, as it was easily reproducible in my site: p6VVUQ-DC-p2
cc @arunsathiya in case you have more info

[Gustavo-Hilario]

I could also replicate this issue with the Button 2 theme. If we add several single image blocks on top of each other, the images will be glued with no space below each of them.

Customer report: 5348246-zen
Theme: Button 2

Screenshot:

Workaround: User the Gallery block instead

[MaxPhilip]

Theme Cubic also suddenly has missing bottom-margins for images but only on smaller screens. Margin gets added with screen size min-width: 768px

Customer report: 5347881-zen
Theme: Cubic

Screenshot:

[Robertght]

Based on the previous reports, it appears Classic themes and using the Classic editor could generate these margin issues.

[hngdny]

Also happening on Baskerville 2
User reported on 37369570-hc and created follow-up 5623884-zd-woothemes as requested.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5321946-zen
• 5348246-zen
• 5347881-zen
• 5623884-zen
• 5691088-zen
• 5723215-zen

[kavyagokul]

Additional ticket from a closed duplicate

• 5691088-zen

[kavyagokul]

Additional ticket from closed duplicate

• 5723215-zen