Make WordPress Core

Opened 19 months ago

Last modified 12 days ago

#56626 new defect (bug)

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

Reported by: markhowellsmead's profile markhowellsmead Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: reporter-feedback dev-feedback
Focuses: css Cc:

Description

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;

Attachments (1)

Change History (17)

#1 @sabernhardt
19 months ago

  • Keywords reporter-feedback added
  • Summary changed from Twenty Twenty Two Theme: Elements with alignfull in the content provoke a horizontal scrollbar to Twenty Twenty-Two: Elements with alignfull in the content provoke a horizontal scrollbar

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?

#2 @audrasjb
19 months ago

  • Milestone changed from Awaiting Review to 6.1
  • Severity changed from major to normal
  • Version set to trunk

#3 @markhowellsmead
19 months ago

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

#4 @audrasjb
19 months ago

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!

#5 @markhowellsmead
19 months ago

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.

#6 @markhowellsmead
19 months ago

The issue is evident across all screen resolutions.

https://www.dropbox.com/s/lc8625rtbuwqgin/wordpress-trac-56626.jpeg

#7 @desrosj
19 months ago

@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?

#8 @markhowellsmead
19 months ago

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 -->

#9 @audrasjb
19 months ago

  • Milestone changed from 6.1 to 6.2

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.

#10 @desrosj
19 months ago

@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.

#11 @sabernhardt
19 months ago

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.

#12 @markhowellsmead
19 months ago

@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.

#13 @markhowellsmead
19 months ago

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

#14 @poena
15 months ago

  • Milestone changed from 6.2 to Future Release

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

#15 @karmatosed
12 days ago

I would like to see how we can move this forward so let me try and recap what I myself am finding:

  • Copying code shared there is a horizontal scroll.
  • Not copying code there isn't.

This is what I currently am experiencing.

#16 @karmatosed
12 days ago

  • Keywords dev-feedback added
Note: See TracTickets for help on using tickets.