Opened 5 months ago
Last modified 4 months ago
#61438 new defect (bug)
Twenty Twenty-Two: page templates do not clear floats from content
Reported by: | pitamdey | Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | |
Focuses: | Cc: |
Description
In theme Twenty Twenty-Two, when we add the latest comments block and change its alignment to left the comment gets next to it in the same line.
I have attached the video for reference:
https://www.loom.com/share/71dd1a649d3948c1b7b59b8bd966a96a?sid=2ef8bcf6-c609-4ff9-8d12-3fcbea14cac1
Attachments (8)
Change History (15)
#2
@
4 months ago
Hi
The block alignment in this case is working as intended, the left and right alignments do not use clear (https://developer.mozilla.org/en-US/docs/Web/CSS/clear).
This problem is not limited to the latest posts blocks, it can also be reproduced for example with a right aligned image block.
The problem that is specific to this theme, is that the page template does not have a block between the post content and the comments area, so the post content is not cleared.
In comparison, the single post template has a spacer block, followed by a group block that contains the "post footer" with the post date etc.
https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentytwentytwo/templates/single.html#L18
@pitamdey Please remember to include detailed descriptions with step by step instructions for how to reproduce the issues.
Testing instructions
To reproduce the issue:
Activate Twenty Twenty-Two
Create a new page.
Enable comments on this page, and add a few comments.
Add a latest posts block to the page content. Align it to the left. Save.
(Notice that no overlap is seen in the editor, that is because the comments area is part of the template, so it is not visible in the block editor.)
View the page on the front.
Notice how the left aligned latest posts blocks is to the left of the comments area on the page.
The expected result would be for the latest posts block to be left aligned, but vertically positioned between the page title and the comments area.
#3
@
4 months ago
I am able to reproduce the same issue with the page template in Twenty Twenty-Three and Twenty Twenty-Four. The page template with the sidebar in TT4 works, but the page template with the wide image is even more broken because the left aligned image is to the right of the page title...
Possible duplicate: https://github.com/WordPress/gutenberg/issues/55090
This ticket was mentioned in Slack in #core-themes by poena. View the logs.
4 months ago
#5
@
4 months ago
- Summary changed from Twenty Twenty-Two : Latest comments block left alignment makes the comment next to it to Twenty Twenty-Two: page templates do not clear floats from content
@
4 months ago
Before patch: comments can appear beside a floated element (default Pages template and legacy Comments block are shown)
@
4 months ago
Before patch: a floated element can also affect the footer when comments are not enabled for the page
@
4 months ago
Adding Spacer block: comments appear below content (when they are enabled on the page)
@
4 months ago
Option 2: Add CSS to clear any element that follows .entry-content
, including the footer template part
#6
@
4 months ago
I uploaded patches for two options, and the CSS may be the better choice.
- Adding Spacer blocks to page templates would achieve the clearing, but the space could easily be too much. The patch uses 32px, which matches the Spacer block earlier in the default Page template (and in both single templates).
- The CSS option would apply to the entire site, and I used zero specificity in case there is a reason to override that for any element.
.entry-content + *
would clear the comments form and/or anything else that might follow.entry-content
within themain
element.- I chose to target only
footer.wp-block-template-part
, though the header template part (and/or another template part) probably should be fine with the clearing too.
Additional notes for reproduction/testing steps:
- When testing an Image block, a good image size would be 200 to 300 pixels wide and at least 300 pixels tall, though you could adjust the Aspect Ratio to Classic Portrait 2:3 and define a width to help with sizing.
- Do not add any blocks to the content area after the aligned block. Those can display below the floated item already.
#7
@
4 months ago
I have opened a discussion here: https://github.com/WordPress/gutenberg/issues/63336
But I am not against fixing it in the themes short term.
I was able to reproduce the situation as follows:
Everything is contained in a "normal" group block.
First a "latest posts" block, then a "headings" block. Then again "latest posts".
When the group block is converted into a stack, all blocks are arranged one below the other as expected.
Is the reported situation really an error? Otherwise, please provide more detailed screenshots of the document overview (Shift-Alt-O).