WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 10 days ago

#48718 assigned defect (bug)

Twenty Twenty: Block Left/Right Align Display Issues

Reported by: JarretC Owned by: nielslange
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch has-screenshots
Focuses: Cc:
PR Number:

Description

When adding an Embed block into the editor, the default alignment is center which displays correctly on the front end of the site:

https://i.snipboard.io/dvqUFb.jpg

However, if you attempt to align the embed block either to the left or right, the page/post navigation no longer clears correctly

https://i.snipboard.io/L8ZHxt.jpg

Change History (10)

#1 follow-up: @nielslange
3 weeks ago

  • Keywords reporter-feedback added

@JarretC Isn't this a duplicate of #48688?

#2 in reply to: ↑ 1 ; follow-up: @JarretC
3 weeks ago

Replying to nielslange:

@JarretC Isn't this a duplicate of #48688?

No that is a separate issue as it applies to using the Classic Editor, this issue in particular happens when using the Embed block

#3 in reply to: ↑ 2 @nielslange
3 weeks ago

  • Keywords reporter-feedback removed
  • Owner set to nielslange
  • Status changed from new to assigned

Replying to JarretC:

No that is a separate issue as it applies to using the Classic Editor, this issue in particular happens when using the Embed block

I see. Thanks for clarifying this! Do you want to create a patch for this issue?

#4 @JarretC
3 weeks ago

  • Summary changed from Twenty Twenty: Embed Block Left/Right Align Display Issues to Twenty Twenty: Block Left/Right Align Display Issues

Hmm, looking further into this it appears it isn't specific to just the Embed block but any block. I reproduced it using a Cover block as well. I'll keep working on it for now to see if I can come up with a fix.

#5 follow-up: @poena
3 weeks ago

Aligning it left or right of something works, but it doesn't work when it is the only item.

#6 in reply to: ↑ 5 @JarretC
3 weeks ago

Replying to poena:

Aligning it left or right of something works, but it doesn't work when it is the only item.

What did you align it with to get it working? I tried left aligning an image block and then setting up a paragraph block

https://i.snipboard.io/bGiEM5.jpg

But the display is still off. This is what I have in the code editor

<!-- wp:image {"align":"left","id":1948,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignleft size-large"><img src="http://localhost:8888/wp-content/uploads/alot-of-bugs.gif" alt="" class="wp-image-1948"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Paragraph block</p>
<!-- /wp:paragraph -->

#7 @ianbelanger
2 weeks ago

  • Milestone changed from Awaiting Review to 5.3.1
  • Version set to 5.3

#8 follow-up: @nielslange
13 days ago

@JarretC I briefly looked into this issue and as left-aligned and right-aligned blocks are positioned absolute, I cannot see a way of making sure they do not overlap with other elements, as seen in your screenshot. Are you aware of any solution that might fix this issue?

#9 @ianbelanger
10 days ago

  • Milestone changed from 5.3.1 to Future Release

#10 in reply to: ↑ 8 @JarretC
10 days ago

Not as of yet, short of not absolutely positioning the images in the first place. I did play around with some of the CSS of it a bit but haven't come up with a good solution yet.

Replying to nielslange:

@JarretC I briefly looked into this issue and as left-aligned and right-aligned blocks are positioned absolute, I cannot see a way of making sure they do not overlap with other elements, as seen in your screenshot. Are you aware of any solution that might fix this issue?

Note: See TracTickets for help on using tickets.