Twenty Twenty: Inconsistent left margin in Latest Posts & Latest Comments blocks.

[nkeller15]

Hi all,

In the Twenty Twenty theme Latest Posts & Latest Comments blocks, it seems the margin-left: auto property is being overwritten to margin-left: 0 causing an inconsistency in the alignment of core blocks. Additionally, Latest Posts has this issue in the editor only and is aligned properly on the front-end.

Video Demonstration: ​https://www.loom.com/share/049e6cbe6f714c31b8f49795304d245c

Steps to reproduce:

1. Install and activate the Twenty Twenty theme
2. Ensure posts/comments exist in your site
3. Add the Latest Posts and Latest Comments blocks to a page
4. Add any other core block(s) to compare alignment
5. Inspect parent div of aforementioned blocks and see margin-left property being set
6. Save the page and view the front-end, notice how Latest Posts is aligned properly here, and Comments still are not

[nadimcse]

I've fixed the CSS issue by replacing margin-left: 0 with margin-left: auto and margin-right: auto

[nadimcse]

I've fixed the CSS issue by replacing margin-left: 0 with margin-left: auto and margin-right: auto for both admin dashboard and frontend.

[nadimcse]

Frontend

[sabernhardt]

The margins for both of these blocks broke between WordPress 5.3 and 6.0, and not at the same time.

Patch updates:

• Setting the left margin (to zero) was necessary in the ​original theme styles, though not anymore. I used auto instead of removing it in an attempt to support more versions of the theme.
• The spacing matches for both the LTR and RTL versions.
• The Latest Posts block uses .editor-styles-wrapper ul.wp-block-latest-posts, instead of adding the .wp-block-latest-posts__list class, for lower specificity in the editor.

[tb1909]

Reproduced issue

[tb1909]

Tested with patch 58396.3

[tb1909]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: REPLACE_WITH_PATCH_URL

Environment

• OS: macOS 13.4
• Web Server: Nginx
• PHP: 8.1.9
• WordPress: 6.2.2
• Browser: Google Chrome 114.0.5735.106
• Theme: Twenty Twenty
• Active Plugins:
  • Gutenberg 15.9.1
  • WordPress Beta Tester 3.4.1

Actual Results

• ✅ Issue resolved with patch.

Additional Notes

• Working on mobile
• Working when responding to another specific comment

Supplemental Artifacts

[poena]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: 58396.3.patch

Environment

• OS: macOS 13.4.1
• Web Server: Nginx
• PHP: 8.0.22
• WordPress: 6.3 alpha
• Browser: Chrome version 114.0.5735.133

Actual Results

Both blocks align correctly, in wide/full, none, left/right/center alignments.
RTL tested to the best of my ability using Arabic.
I did not test on older versions of WordPress.

[audrasjb]

In 56034:

Twenty Twenty: Fix left margin in Latest Posts & Latest Comments blocks.

This fixes a bug where the margin-left: auto property was being overwritten to margin-left: 0 causing an inconsistency in the alignment of these blocks.

Props nkeller15, nadimcse, sabernhardt, tb1909, poena.
Fixes #58396.

[sabernhardt]

Reopening to address error messages on r56034

[audrasjb]

In 56039:

Twenty Twenty: Fix an RTL style issue leading to failed Test Default Themes & Create ZIPs workflow.

Follow-up to [56034].

Props sabernhardt, davidbaumwald.
Fixes #58396.

[sabernhardt]

remove tab after semicolon

[audrasjb]

In 56040:

Twenty Twenty: Revert [56034] pending further investigation.

This changeset reverts [56034] as the Test Default Themes & Create ZIPs workflow is failing.

Follow-up to [56034], [56039].

See #58396.

Test in my fork first
Or creating a PR on the main repo could work, too :)

This still gets timeout errors in End-to-end and Performance tests, but the Test Default Themes & Create ZIPs actions pass.

[audrasjb]

In 56155:

Twenty Twenty: Fix left margin in Latest Posts & Latest Comments blocks.

This fixes a bug where the margin-left: auto property was being overwritten to margin-left: 0 causing an inconsistency in the alignment of these blocks.

Follow-up to [56034], [56039], [56040].

Props sabernhardt.
Fixes #58396.

committed in https://core.trac.wordpress.org/changeset/56155