Figure elements (embeds, videos, and images) not 100% wide after Gutenberg 13.5 update

[eduardozulian]

Quick summary

Some reports show that elements under the figure HTML tab are smaller than they are in the editor. Examples include:

• Images within the columns block
• Video embeds
• Twitter embeds

The code responsible for it is coming from user agent stylesheet:

figure {
	margin-inline-start: 40px;
	margin-inline-end: 40px;
}

This happens when Gutenberg 13.5 is active. When disabled, the elements appear in the same size they are in the editor.

Important: This might be theme-dependant as some do force specific margins for figure.

Steps to reproduce

1. Activate a theme like Blockbase (where the issue can be reproduced)
2. Create a post/page and add a columns block
3. Add image blocks to each column
4. Save and check the page

What you expected to happen

See images as I see in the editor, taking 100% of its container

What actually happened

• Images are smaller. CSS shows the above CSS forcing a 40px margin on both sides
• Some reports mention this primarily affects when visiting the site from a mobile device

Context

User report.

Internal discussion p1656146114576809-slack-C03TY6J1A

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Yes, but some of them at least.

On Blockbase, the issue happens on images inside columns:

On Lovecraft, this also applies to YouTube embeds

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Two possible workarounds:

1. Disable the Gutenberg plugin temporarily
2. If the user has CSS support on their site/plan, it could be fixed with the following code:

figure {
  margin-left: 0;
  margin-right: 0;
}

[eduardozulian]

Reports:

• 5325557-zen (cc @vajrasar)
• 35904653-hc (cc @formosattic)
• cc @rakshitwesley as I couldn't find the IDs for your cases

[rakshitwesley]

5321864-zd-woothemes

35899784-hc

[aleone89]

Another report via hc-30341981
YouTube embed block
In this instance, padding between blocks was removed.

[Greatdane]

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅
• Replicable on Core - No

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can replicate only on Atomic.
• Self-hosted with Version 13.5.2 seems to show no changes.

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[Greatdane]

Bringing over from #64927

5321874-zd-woothemes

[cometgrrl]

@griffbrad is this something the Calypso team could look into?

[griffbrad]

We can at least try to better understand the source of the bug to get it sorted out. @chad1008, would you be willing to look and see what might have changed with these styles since Gutenberg 13.5?

[chad1008]

Sorry @griffbrad, I missed this ping until now somehow. Yes, I'm happy to take a look!

[chad1008]

It looks like this may already have been fixed in 13.6.0, which is currently live on Simple sites.

The lack of new reports since 13.6.0 hit Simple a week ago is also encouraging.

@Greatdane @aleone89 @rakshitwesley @eduardozulian can any of y'all confirm that affected users are no longer seeing this issue?

[eduardozulian]

@chad1008, sorry for the delay here. I haven't contacted any users, but this is still happening with at least two sites:

• 5321874-zen, simple site
• 5321864-zen , AT site

Both customers have some custom CSS. Once removed, the problem reappears.

Pinging @Greatdane @aleone89 @rakshitwesley again in case you all missed the initial ping as I did!

[github-actions]

Support References

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

• 5325557-zen
• 5321864-zen
• 5321874-zen
• 6408573-zen

[chad1008]

Thanks @eduardozulian. Odd that these sites are still having trouble.

Specifically on the site from 5321874-zen, I can see the issue on the site itself, but I cannot reproduce it on my own sites. I've even tried replicating the exact same content.

There are some subtle differences in the markup that I'm not sure of the source of. Specifically, the site in question isn't getting a style that my sites are generating:

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

That apparently should be in the <style id="wp-block-image-inline-css"> block in the header. The problematic site does have this block of styles, but it's missing at least one and that's what is causing the problem.

Because I can't replicate it outside of the customer's site, I don't have a good way to track down what caused it and when. We may need to keep relying on the custom CSS for this one until it becomes more traceable.

[filipanoscampos]

Another case of this issue here: 6408573-zd-woothemes