Twenty Twenty-Two: Elements with alignfull in the content provoke a horizontal scrollbar

[markhowellsmead]

Add a cover block with full alignment to the content and you'll see a horizontal scrollbar.

Current CSS:

margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;

Fix:

margin-left: calc(-0.5 * var(--wp--custom--spacing--outer)) !important;
margin-right: calc(-0.5 * var(--wp--custom--spacing--outer)) !important;

[sabernhardt]

I did not experience a horizontal scrollbar in Chrome or Firefox, either adding a full-width Cover block in a post or in the template (footer). Could you share more details of how you added the block?

[markhowellsmead]

I've re-tested: the problem occurs when nesting a cover block with alignfull inside a group with alignfull.

[audrasjb]

I also tested the issue and I can't reproduce it either on Chrome using WP 6.1 beta 1.

Would you mind trying to reproduce with 6.1 beta 1 @markhowellsmead?
What browser do you use to produce the issue? Does it occurs on specific viewports?

Thanks!

[markhowellsmead]

The problem is evident in the latest versions of Firefox, Chrome, Brave and Safari when using WordPress 6.1-beta2-54341 without the Gutenberg plugin active.

[markhowellsmead]

The issue is evident across all screen resolutions.

[desrosj]

@markhowellsmead could you attach the relevant raw block code? Have you made any adjustments using the Site Editor?

I've tried to reproduce on a fresh install, and I'm unable to reproduce in Firefox and Safari.

However, I was able to see an issue in the editor when nesting a cover block sent to full alignment within a group also set to full alignment. Are you seeing this as well?

[markhowellsmead]

No site editor amendments. Here's the code.

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"primary","layout":{"inherit":false}} -->
<div class="wp-block-group alignfull has-primary-background-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"http://wcch.local/wp-content/uploads/2022/09/bls-regio-nach-kerzers-1224406.jpg","id":13,"dimRatio":80,"overlayColor":"primary","focalPoint":{"x":"0.52","y":"0.53"},"contentPosition":"bottom center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"40px","bottom":"40px"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-center" style="padding-top:40px;padding-bottom:40px"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wcch.local/wp-content/uploads/2022/09/bls-regio-nach-kerzers-1224406.jpg" style="object-position:52% 53%" data-object-fit="cover" data-object-position="52% 53%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:post-title {"level":1,"align":"wide","textColor":"background"} /--></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

[audrasjb]

With WP 6.1 RC 1 scheduled tomorrow (Oct 10, 2022), there is not much time left to address this ticket. Let's move it to the next milestone.

Ps: if you were about to send a patch and if you feel it is realistic to commit it in the next few hours, please feel free to move this ticket back to milestone 6.1.

[desrosj]

@markhowellsmead When I paste that markup a fresh post, I get the invalid block markup warning. When I attempt recovery, I see the notice again for the cover block, and then I'm finally able to use the block. But I'm still not seeing the issue you've described.

[sabernhardt]

I pasted the code into a post using Code view, and that produced the horizontal scroll on the front end.

Try going to the padding for the Group block, unlinking the sides, and then deleting the zeros for the left and right sides. That removed the scrollbar for me.

Simply nesting a full-width Cover block inside a full-width Group block did not cause the overflow.

[markhowellsmead]

@sabernhardt Removing the padding stops the content overflow. But then the block has padding and the cover block doesn't stretch to the full width and height of the containing group.

[markhowellsmead]

@desrosj That's because you need to swap out the image for one which is available in your installation.

[poena]

I am moving this from the 6.2 milestone since there is no patch.