Make WordPress Core

Opened 2 years ago

Last modified 6 months 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: 2nd-opinion
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 (19)

#1 @sabernhardt
2 years 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
2 years ago

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

#3 @markhowellsmead
2 years ago

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

#4 @audrasjb
2 years 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
2 years 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
2 years ago

The issue is evident across all screen resolutions.

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

#7 @desrosj
2 years 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
2 years 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
2 years 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
2 years 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
2 years 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
2 years 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
2 years ago

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

#14 @poena
2 years 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
10 months 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
10 months ago

  • Keywords dev-feedback added

#17 @karmatosed
7 months ago

  • Keywords dev-feedback removed

#18 @karmatosed
6 months ago

  • Keywords 2nd-opinion added; reporter-feedback removed
Note: See TracTickets for help on using tickets.