Make WordPress Core

Opened 5 weeks ago

Last modified 6 days ago

#61438 new defect (bug)

Twenty Twenty-Two: page templates do not clear floats from content

Reported by: pitamdey's profile 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)

2022-page-comments-floating-before.png (212.4 KB) - added by sabernhardt 8 days ago.
Before patch: comments can appear beside a floated element (default Pages template and legacy Comments block are shown)
2022-page-footer-floating-before.png (181.2 KB) - added by sabernhardt 8 days ago.
Before patch: a floated element can also affect the footer when comments are not enabled for the page
61438.page-templates.diff (2.0 KB) - added by sabernhardt 8 days ago.
Option 1: Adding a Spacer block to each Page template
2022-page-footer-Spacer-clear.png (187.3 KB) - added by sabernhardt 8 days ago.
Adding Spacer block: footer appears below content
2022-page-comments-Spacer-clear.png (220.5 KB) - added by sabernhardt 8 days ago.
Adding Spacer block: comments appear below content (when they are enabled on the page)
61438.CSS.diff (579 bytes) - added by sabernhardt 8 days ago.
Option 2: Add CSS to clear any element that follows .entry-content, including the footer template part
2022-page-footer-CSS-clear.png (186.5 KB) - added by sabernhardt 8 days ago.
CSS clearing: footer appears below content, without extra space
2022-page-comments-CSS-clear.png (218.4 KB) - added by sabernhardt 8 days ago.
CSS clearing: comments appear below content, without extra space

Download all attachments as: .zip

Change History (15)

#1 @elbsegler
4 weeks ago

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

#2 @poena
2 weeks 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.

https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentytwentytwo/templates/page.html#L18

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 @poena
8 days 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 not the others.

Possible duplicate: https://github.com/WordPress/gutenberg/issues/55090

Last edited 8 days ago by poena (previous) (diff)

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


8 days ago

#5 @sabernhardt
8 days 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

@sabernhardt
8 days ago

Before patch: comments can appear beside a floated element (default Pages template and legacy Comments block are shown)

@sabernhardt
8 days ago

Before patch: a floated element can also affect the footer when comments are not enabled for the page

@sabernhardt
8 days ago

Option 1: Adding a Spacer block to each Page template

@sabernhardt
8 days ago

Adding Spacer block: footer appears below content

@sabernhardt
8 days ago

Adding Spacer block: comments appear below content (when they are enabled on the page)

@sabernhardt
8 days ago

Option 2: Add CSS to clear any element that follows .entry-content, including the footer template part

@sabernhardt
8 days ago

CSS clearing: footer appears below content, without extra space

@sabernhardt
8 days ago

CSS clearing: comments appear below content, without extra space

#6 @sabernhardt
8 days ago

I uploaded patches for two options, and the CSS may be the better choice.

  1. 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).
  2. 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 the main 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 @poena
6 days 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.

Note: See TracTickets for help on using tickets.