Make WordPress Core

Opened 9 months ago

Closed 8 months ago

Last modified 8 months ago

#58396 closed defect (bug) (fixed)

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

Reported by: nkeller15's profile nkeller15 Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots
Focuses: css Cc:

Description

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

Attachments (9)

58396.patch (2.6 KB) - added by nadimcse 9 months ago.
I've fixed the CSS issue by replacing margin-left: 0 with margin-left: auto and margin-right: auto
58396.2.patch (2.6 KB) - added by nadimcse 9 months ago.
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.
screenshot1.png (319.6 KB) - added by nadimcse 9 months ago.
Frontend
screenshot2.png (352.1 KB) - added by nadimcse 9 months ago.
58396.3.patch (2.5 KB) - added by sabernhardt 9 months ago.
before-test.png (377.1 KB) - added by tb1909 9 months ago.
Reproduced issue
after-test.png (303.4 KB) - added by tb1909 9 months ago.
Tested with patch 58396.3
58396.styles-rtl.patch (436 bytes) - added by sabernhardt 8 months ago.
58396-editor-style-block.css.patch (529 bytes) - added by sabernhardt 8 months ago.
remove tab after semicolon

Download all attachments as: .zip

Change History (26)

@nadimcse
9 months ago

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

@nadimcse
9 months ago

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
9 months ago

Frontend

@nadimcse
9 months ago

#1 @krupalpanchal
9 months ago

  • Keywords has-patch has-screenshots added

#2 @Ankit K Gupta
9 months ago

  • Keywords needs-testing added

#3 @sabernhardt
9 months ago

  • Version 6.2 deleted

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.

#4 @sabernhardt
9 months ago

  • Milestone changed from Awaiting Review to 6.3

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


9 months ago

@tb1909
9 months ago

Reproduced issue

@tb1909
9 months ago

Tested with patch 58396.3

#6 @tb1909
9 months ago

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

https://core.trac.wordpress.org/attachment/ticket/58396/before-test.png
https://core.trac.wordpress.org/attachment/ticket/58396/after-test.png

#7 @poena
8 months ago

  • Keywords commit added; needs-testing removed

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.

#8 @audrasjb
8 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

#9 @audrasjb
8 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#10 @sabernhardt
8 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to address error messages on r56034

#11 @audrasjb
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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
8 months ago

remove tab after semicolon

#12 @audrasjb
8 months ago

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.

#13 @audrasjb
8 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This ticket was mentioned in PR #4709 on WordPress/wordpress-develop by @sabernhardt.


8 months ago
#14

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

@sabernhardt commented on PR #4709:


8 months ago
#15

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

#16 @audrasjb
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.