Display issue with HTML Block inside of a Row Block in the Editor

[ndiego]

Description

I was testing the new Row Block and discovered a small issue in the editor when using an HTML block. The HTML content is contained in an iframe and also seems to be wrapping in a div. This iframe and div obviously do not appear on the frontend. In the editor however, they both have a width of 100%. Under normal circumstances, this seems like a logical default. However, when placed in a Row block, things do not align properly.

Step-by-step reproduction instructions

1. Create a Row block.
2. Add a HTML block and add some content, I added an SVG icon.
3. Make sure the HTML block is in "Preview mode".
4. Add another block to the Row block, I chose a simple Heading block.
5. Notice the ample space between the content in the HTML block and the Heading.
6. Switch to the frontend, and notice this spacing is not there.

Editor (Actual)

Editor (Expected)

Frontend

Some of the offending CSS

Perhaps there is a need for some conditional iframe styling if placed in a Row block? Perhaps max-width:100% instead of width:100%?

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.8.1
• Gutenberg 11.5
• Chrome/Safari

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[alaczek]

I'm experiencing a similar issue with Social Icons and Paragraph block nested inside the Row block.

Editor view:

Front end:

In my case, the offending piece of CSS seems to be related to the fact that the Row block is inside a Cover block, if I place the Row block on it's own, the issue goes away. As far as I can tell, this is the piece of CSS that's causing it:

Code snippet:

<!-- wp:cover {"customOverlayColor":"#7749f9","minHeight":100,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"8vh","right":"5vh","bottom":"8vh","left":"5vh"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:8vh;padding-right:5vh;padding-bottom:8vh;padding-left:5vh;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#7749f9"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"64px"},"border":{"radius":"100px"}},"backgroundColor":"secondary","layout":{"inherit":true}} -->
<div class="wp-block-group has-secondary-background-color has-background" style="border-radius:100px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:social-links {"className":"is-style-default"} -->
<ul class="wp-block-social-links is-style-default"><!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p><a href="#">Instagram</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Environment info

• WordPress 6.0.1
• Gutenberg 13.9
• Chrome 104.0

[jasmussen]

@alaczek I tried your fix in #43413. I'd appreciate a ton of testing of various cover patterns.