Make WordPress Core

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'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 4 months 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 4 months 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 4 months ago.
Option 1: Adding a Spacer block to each Page template
2022-page-footer-Spacer-clear.png (187.3 KB) - added by sabernhardt 4 months ago.
Adding Spacer block: footer appears below content
2022-page-comments-Spacer-clear.png (220.5 KB) - added by sabernhardt 4 months ago.
Adding Spacer block: comments appear below content (when they are enabled on the page)
61438.CSS.diff (579 bytes) - added by sabernhardt 4 months 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 4 months ago.
CSS clearing: footer appears below content, without extra space
2022-page-comments-CSS-clear.png (218.4 KB) - added by sabernhardt 4 months ago.
CSS clearing: comments appear below content, without extra space

Download all attachments as: .zip

Change History (15)

#1 @elbsegler
5 months 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
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.

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

Version 0, edited 4 months ago by poena (next)

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


4 months ago

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

@sabernhardt
4 months ago

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

@sabernhardt
4 months ago

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

@sabernhardt
4 months ago

Option 1: Adding a Spacer block to each Page template

@sabernhardt
4 months ago

Adding Spacer block: footer appears below content

@sabernhardt
4 months ago

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

@sabernhardt
4 months ago

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

@sabernhardt
4 months ago

CSS clearing: footer appears below content, without extra space

@sabernhardt
4 months ago

CSS clearing: comments appear below content, without extra space

#6 @sabernhardt
4 months 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
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.

Note: See TracTickets for help on using tickets.