Make WordPress Core

Opened 16 months ago

Closed 16 months ago

Last modified 11 months ago

#57560 closed defect (bug) (fixed)

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

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

Description

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.

Attachments (2)

CleanShot 2023-01-26 at 15.28.31@2x.png (179.0 KB) - added by patelhitesh 16 months ago.
margin and padding issue in comments section
57560.patch (914 bytes) - added by patelhitesh 16 months ago.
Solution for margin and padding issue in comments section

Download all attachments as: .zip

Change History (15)

@patelhitesh
16 months ago

margin and padding issue in comments section

@patelhitesh
16 months ago

Solution for margin and padding issue in comments section

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


16 months ago
#1

  • Keywords has-patch added; needs-patch removed

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

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

#2 @miguelaxcar
16 months ago

  • Keywords needs-patch added; has-patch removed

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

ihiteshpatel commented on PR #3917:


16 months ago
#3

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,

ihiteshpatel commented on PR #3917:


16 months ago
#4

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

#5 @poena
16 months ago

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.

Last edited 16 months ago by poena (previous) (diff)

#6 @poena
16 months ago

  • Keywords needs-patch removed

#7 @miguelaxcar
16 months ago

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

#8 @poena
16 months ago

  • Keywords has-patch has-testing-info commit added; needs-design-feedback removed
  • Milestone changed from Awaiting Review to 6.2

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.

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

#9 @audrasjb
16 months ago

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

@poena does it look good to you?

Last edited 16 months ago by audrasjb (previous) (diff)

#10 @poena
16 months ago

Yes, looks good, thank you.

#11 @audrasjb
16 months ago

  • Owner set to audrasjb
  • Resolution set to fixed
  • Status changed from new to closed

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.

#13 @sabernhardt
11 months ago

  • Keywords commit removed

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

Note: See TracTickets for help on using tickets.