Illustratr, Toujours, other themes: No margins between Image blocks on live site

[thekingsprojects]

Quick summary

On Illustratr and several other themes, when a page or post has two or more Image blocks one above another, there is normally a space between those images in the block editor. On a live site (and assuming the Image blocks do not have captions), those margins disappear, and the images touch directly.

A short list of themes I found that are affected by this; I haven't checked all themes so there may be more. There doesn't seem to be a pattern other than that they're all Classic themes; no FSE themes that I tried were affected, and other Classic themes like Twenty Twelve and Stratford were also unaffected.

• Espied
• Illustratr
• Hemingway Rewritten
• Circa/Quadra
• Pictorico
• Isola
• Eighties
• Toujours
• Independent Publisher (added by @inaikem)

This issue was reported specifically for Toujours back in June: https://github.com/Automattic/wp-calypso/issues/64994

It was supposedly fixed by this Gutenberg merge: https://github.com/WordPress/gutenberg/pull/42005

But I also tried Toujours on my test site, and there are no margins between the images there, either.

This appears to be caused by a

figure {
  margin: 0;
}

coming from one of the inline stylesheets; deactivating the margin: 0 in the inspector, or overriding it with CSS, restores the margins.

On my Atomic test site, I notice the "figure margin: 0" is already being overridden by this (tested with both Illustratr and Toujours):

.wp-block-image {
  margin: 0 0 1em;
}

So on Atomic the margins seem to work, while on Simple the images run together. Maybe the Gutenberg fix above only applied to Atomic sites for some reason, or has somehow been reverted for Simple?

Steps to reproduce

1. On a Simple site, create and save a post that has two or more Image blocks directly above/below one another. Remove any captions from the images.
2. Switch the site's theme to Illustratr (or Toujours, or another theme listed above).
3. View the live post with the Image blocks.

What you expected to happen

The images should display with margins between them, as they do in the editor:

What actually happened

The images do not have any margins/space separating them.

Context

Customer report in 5573795-zen

Platform (Simple, Atomic, or both?)

Simple

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

It should be possible to use the same CSS that the Atomic sites are using to fix this on an individual site:

.wp-block-image {
  margin: 0 0 1em;
}

However, this will only work for Premium site plans (or Simple Business plans). The customer who reported this to us is on Personal.

[github-actions[bot]]

Support References

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

• [ ] 5573795-zen
• [ ] 5586567-zen
• [ ] 5584984-zen
• [ ] 5616066-zen

[macmanx2]

I can confirm that this issue affects the Editor theme too:

The recommended CSS workaround above does fix the issue, but similarly, the user does not have a paid plan to implement this.

Regarding https://wordpress.com/forums/topic/what-is-up-with-the-spacing/?view=all

[ariel-maidana]

Applied the workaround. We will want to remove that CSS code once the issue is fixed.

5586567-zd-woothemes

[inaikem]

User report (Illustratr). I shared the CSS workaround:

5584984-zd-woothemes

[ariel-maidana]

User report (Tonal). Applied CSS workaround. 5616066-zd-woothemes

[vinnykaur]

Another one at zd-5695869

Theme: Toujours

Cannot apply the CSS workaround as they have a Personal plan.