Make WordPress Core

Opened 5 years ago

Last modified 8 weeks ago

#48718 assigned defect (bug)

Twenty Twenty: Block Left/Right Align Display Issues

Reported by: jarretc's profile JarretC Owned by:
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 (21)

#1 follow-up: @nielslange
5 years ago

  • Keywords reporter-feedback added

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

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

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

#8 follow-up: @nielslange
5 years 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
5 years ago

  • Milestone changed from 5.3.1 to Future Release

#10 in reply to: ↑ 8 @JarretC
5 years 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
4 years ago

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

Version 0, edited 4 years ago by john_unlimited (next)

#12 @samful
4 years 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
4 years ago

  • Focuses css added

#14 @sabernhardt
2 years ago

#55925 was marked as a duplicate.

#15 @poena
6 months ago

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.

#16 @poena
6 months ago

#48958 was marked as a duplicate.

This ticket was mentioned in Slack in #core-themes by poena. View the logs.


5 months ago

#18 @poena
3 months ago

  • Milestone changed from Future Release to 6.6

#19 @poena
3 months ago

  • Owner nielslange deleted

#20 @karmatosed
8 weeks ago

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.

#21 @karmatosed
8 weeks ago

  • Milestone changed from 6.6 to Future Release
Note: See TracTickets for help on using tickets.