WordPress.org

Make WordPress Core

Opened 13 months ago

Last modified 7 months 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: css Cc:

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 (13)

#1 follow-up: @nielslange
13 months ago

  • Keywords reporter-feedback added

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

#2 in reply to: ↑ 1 ; follow-up: @JarretC
13 months 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
13 months 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
13 months 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
13 months 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
13 months 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
13 months ago

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

#8 follow-up: @nielslange
13 months 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
12 months ago

  • Milestone changed from 5.3.1 to Future Release

#10 in reply to: ↑ 8 @JarretC
12 months 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?

#11 @john_unlimited
10 months ago

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

Last edited 10 months ago by john_unlimited (previous) (diff)

#12 @samful
7 months ago

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

#13 @ianbelanger
7 months ago

  • Focuses css added
Note: See TracTickets for help on using tickets.