Twenty Twenty-Two theme: margin and padding issue in comments section

[patelhitesh]

In the Twenty Twenty-Two theme, when we write a comment on any post then there is no margin or padding between two comments and it looks not good and we can not separate two comments. For more details, please check the attached screenshot.

[patelhitesh]

margin and padding issue in comments section

[patelhitesh]

Solution for margin and padding issue in comments section

This PR intends to add margins to comment responses to improve UI.

Trac ticket: https://core.trac.wordpress.org/ticket/57560

[miguelaxcar]

Nice catch @patelhitesh !

I found that the patch you attached also impacts on Twenty Twenty One theme (file wp-content/themes/twentytwentyone/style.css) and looks like it's addressing a different issue, as the change is targeting .pagination .page-numbers, .comments-pagination .page-numbers

For the comment marging, I checked and the issue is only happening at Twenty Twenty Two theme.

Please allow me adding a PR link addressing the issue you reported:
​https://github.com/WordPress/wordpress-develop/pull/3917

Thank you!

Miguel

This PR intends to add margins to comment responses to improve UI.

Trac ticket: https://core.trac.wordpress.org/ticket/57560

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

Hello Miguel,

Hello Miguel,
Thank you for your reply!
You can add PR link to address the issue here.

[poena]

The post comments block is deprecated and making this small adjustment to the theme makes sense to me since the block is less likely to be updated.

This bug only affects users who have not updated to the new comments block. Ideally the CSS fix should be loaded conditionally, only if the old comments block is present on the page, but I think we can make an exception since it is such a small amount of CSS.

I would recommend changing the 20px to 1rem, to match the spacing that is already applied around the comment content. Other than that the PR works well for me and solves the problem.

[miguelaxcar]

Great @patelhitesh. Thank you for the clarification @poena! I made the change you requested, from 20px to 1rem. The PR with updated code is here: ​https://github.com/WordPress/wordpress-develop/pull/3917

[poena]

Testing Instructions

These steps define how to test the feature or enhancement, and indicates the expected behavior or results.

Steps to Test

1. Apply the PR.
2. Make sure that your WordPress install has a few nested comments, and activate the theme Twenty Twenty-Two.
3. Open the Site Editor (Appearance > Editor)
4. Toggle the navigation sidebar and open the list of Templates.
5. Open the Single template.
6. In the template, confirm that the legacy comments block is placed.

The legacy comments block has a notice at the top, and is not editable.
This is only to double check that you are testing the correct comments block since there are two versions.

7. Go to the front of the website and view a post with comments.

Expected Results

Lists each expected result or behavior, i.e. what should happen when running the test(s):

• ✅ There should be a space between the reply link and the comment below it.

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/3917

Environment

• OS: macOS 13.1
• Web Server: Nginx
• PHP: 8.1.9
• WordPress: 6.2-alpha-55163 via the beta tester plugin
• Browser: Chrome version 109.0.5414.119
• Theme: Twenty Twenty-Two version 1.3.
• Active Plugins:
  • WordPress Beta Tester 3.2.6

Actual Results

• ✅ Issue resolved with patch.

[audrasjb]

Hey there, I edited the PR to improve its inline comment.

@poena does it looks good to you?

[poena]

Yes, looks good, thank you.

[audrasjb]

In 55189:

Twenty Twenty-Two: Improve spacing for the legacy Post Comments block.

This changeset adds margins to improve spacing in the legacy Post Comments block. This change only affects users who have not updated to the new Comments block.

Props patelhitesh, audrasjb, poena, miguelaxcar.
Fixes #57560.

Committed in https://core.trac.wordpress.org/changeset/55189

[sabernhardt]

Follow-up to add margin to top-level comments: #58653