Multiple themes: Align image & paragraph blocks for wrapping - no margin between image & text

[sophiegyo]

Quick summary

When left- or right- aligning an image to have a paragraph block wrap around it, the text sits flush against the image. There is no padding or margin around the image.

Found so far in:

• Masu
• Rainfall
• Stewart

Steps to reproduce

1. Start at any Simple site
2. Ensure theme is active: Masu, Rainfall, or Stewart
3. Create post/page with an image aligned to the left or right, and with a paragraph block directly beneath

Screenshot shows editor on wpcom Simple site with Masu active; image block left aligned & paragraph block. This one looks different to the one below because I tested a whole bunch of themes only to encounter the other image block image alignment bug and cycling through the themes seems to have affected that:

Alternative from user's site:

What you expected to happen

There should be at least a little space between the image block and the paragraph block, as it shows on my selfhosted site (using newly downloaded/installed Masu 1.0.0 on WP 6.1.1, tested both with and without Gutenber 14.5.4):

What actually happened

Published post shows no space. Screenshot from user's site:

Screenshot from my test site:

Context

User report in the forums:
https://wordpress.com/forums/topic/bug-in-the-interaction-between-the-paragraph-block-and-the-image-block/

I tested on Simple, Atomic, and self-hosted - this particular issue seems isolated to Simple for now.

Platform (Simple, Atomic, or both?)

Simple

Theme-specific issue?

• Masu
• Rainfall
• Stewart

(So far - most of the FSE themes I tested had the other image block image alignment bug.

Browser, operating system and other notes

My own computer:
MacOS 12.6
Firefox 106.05

The user who reported this appears to be using Chrome on Windows - I'm pretty sure it's theme-specific, not browser/OS-specific.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

For free/Personal Simple sites the best workaround is to actually go into the Site Editor and add a tiny bit of left/right padding or margin to the Paragraph blocks in Styles. There's no option to add padding/margin to the Image blocks unfortunately, so it's better to catch all Paragraph blocks instead.

For a Premium site we could use some CSS like this:

.wp-block-image.alignleft { margin-right: 10px; } .wp-block-image.alignright { margin-left: 10px; }

[jamiepalatnik]

📌 SCRUBBING : RESULT

• Tested on Simple - Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• I was able to replicate the issue on all the themes mentioned in the report: Masu, Rainfall, Stewart
• I tested on a simple site, Chrome browser.
• Screenshot:

📌 ACTIONS

• Marked as Triaged for Quality Squad review
• Transferred to themes repo