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

[pitamdey]

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

[elbsegler]

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

[poena]

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.

[poena]

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

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

Option 1: Adding a Spacer block to each Page template

[sabernhardt]

Adding Spacer block: footer appears below content

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

CSS clearing: footer appears below content, without extra space

[sabernhardt]

CSS clearing: comments appear below content, without extra space

[sabernhardt]

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.

[poena]

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.