Opened 5 years ago
Last modified 6 months ago
#48718 assigned defect (bug)
Twenty Twenty: Block Left/Right Align Display Issues
Reported by: | JarretC | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.3 |
Component: | Bundled Theme | Keywords: | needs-patch has-screenshots |
Focuses: | css | Cc: |
Change History (21)
#2
in reply to:
↑ 1
;
follow-up:
↓ 3
@
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
@
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
@
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:
↓ 6
@
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
@
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
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 -->
#8
follow-up:
↓ 10
@
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?
#10
in reply to:
↑ 8
@
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
andright-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
@
5 years ago
Has this issue been resolved yet, I'm having the same problem with images overlapping text.
#12
@
5 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; }
#15
@
11 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.
@JarretC Isn't this a duplicate of #48688?