Twenty Twenty: Block Left/Right Align Display Issues

[JarretC]

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

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

[nielslange]

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

[JarretC]

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

[nielslange]

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?

[JarretC]

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.

[poena]

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

[JarretC]

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

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

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

[JarretC]

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?

[john_unlimited]

Has this issue been resolved yet? I'm having the same problem with images overlapping text.

[samful]

I've just been trying to get this to work too and you are right, in short of not absolutely positioning, it seems that the only way to fix this issue is the give a parent div a relative position and a height. Setting a height for this div seems quite challenging though as we don't know how high the page needs to be...

for example putting this in the Custom CSS/ Additional CSS in the customizer corrects to issue, however if the page ever needs to be less that 500px high (or whatever's set in this css) it will cause issues.

I believe there is no way to fix this issue aside from setting a fixed min-height or using javascript.

Custom CSS/ Additional CSS :

.entry-content{
	position: relative;
	min-height: 500px;
}

[sabernhardt]

#55925 was marked as a duplicate.

[poena]

This is still an issue on WordPress 6.4.2. I did not test any other blocks than the image, quote, and pull quote.

It is also a problem with images aligned left or right using the classic editor plugin.

[poena]

#48958 was marked as a duplicate.

[karmatosed]

This doesn't have a patch so for now I would recommend this goes back to future release, we can always move it back once it gets one but let's focus on those that have patches to get them in or revisions to those patches need it.