Make WordPress Core

Opened 10 months ago

Closed 7 days ago

Last modified 7 days ago

#59334 closed defect (bug) (fixed)

Twenty Seventeen and Twenty Nineteen: Comments Reply heading and Cancel reply link have no space between them

Reported by: pitamdey's profile pitamdey Owned by: karmatosed's profile karmatosed
Milestone: 6.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: ui, css Cc:

Description

In Theme Twenty Nineteen, Twenty seventeen & Twenty Twenty-Two, in the comment section on clicking reply the reply to user and cancel reply have no space between them
Reference Video : https://drive.google.com/file/d/1YBcQquFQdZz7CpUZs3gzYBfK869CTWDB/view

Attachments (9)

2017.png (122.5 KB) - added by pitamdey 10 months ago.
Twenty Seventeen
2019.png (144.2 KB) - added by pitamdey 10 months ago.
Twenty Nineteen
2022.png (159.4 KB) - added by pitamdey 10 months ago.
Twenty Twenty-Two
59334.patch (1.3 KB) - added by pitamdey 10 months ago.
After applying this solution the issue is resolved
59334.2.patch (2.9 KB) - added by himshekhar07 10 months ago.
Patch added
59334.3.patch (1.4 KB) - added by nidhidhandhukiya 10 months ago.
SCR-20240716-mrcn.png (117.6 KB) - added by karmatosed 7 days ago.
Twenty Nineteen issue with patch
SCR-20240716-mrgp.png (100.4 KB) - added by karmatosed 7 days ago.
Twenty Seventeen with patch
SCR-20240716-mrky.png (103.2 KB) - added by karmatosed 7 days ago.
Twenty Seventeen Without patch

Download all attachments as: .zip

Change History (27)

@pitamdey
10 months ago

Twenty Seventeen

@pitamdey
10 months ago

Twenty Nineteen

@pitamdey
10 months ago

Twenty Twenty-Two

@pitamdey
10 months ago

After applying this solution the issue is resolved

@himshekhar07
10 months ago

Patch added

#1 @sabernhardt
10 months ago

  • Component changed from Comments to Bundled Theme

This might be fixable by adding a space in the comment reply JS instead (#51589), but you proposed changing theme styles.

Notes:

  • Twenty Seventeen uses em measurements for most margins. Its margin for could go in the comment-reply area of the stylesheet.
  • Twenty Nineteen likewise could use 0.5em (or 0.5rem) as a margin. That theme's styles need to be edited in SCSS and then compiled.
  • Twenty Twenty-Two only needs a correction in the legacy version of the Comments block; the newer block adds a margin of 0.5em. To avoid RTL issues, we could try a pseudo-element before the small element.
    .wp-block-post-comments .comment-reply-title > small::before {
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 1em;
    }
    

#2 @poena
10 months ago

  • Keywords needs-testing-info added

Hi,
@pitamdey can you please clarify if you mean the comments block, or the theme's default comment area?

It would be helpful to add testing instructions, both for reproducing the problem and for testing the patch.

#3 @pitamdey
9 months ago

Hi, @poena... Its the theme's default comment area.

Last edited 9 months ago by pitamdey (previous) (diff)

#4 @karmatosed
4 months ago

  • Keywords needs-testing added; needs-testing-info removed

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


4 months ago
#5

  • Keywords has-patch added
  • Twenty Seventeen: add a 0.5em left margin in style.css and then override that with a 0.5em right margin in rtl.css
  • Twenty Nineteen: add a 0.5em left margin in sass/site/primary/_comments.scss and style.css, which becomes a right margin in style-rtl.css
  • Twenty Twenty-Two: add a ::before pseudo-element that is 0.5em wide

Trac 59334

#6 @sabernhardt
4 months ago

  • Summary changed from In Theme Twenty Nineteen, Twenty seventeen & Twenty Twenty-Two Comment section Reply and cancel reply has no space between them to Twenty Seventeen, Twenty Nineteen & Twenty Twenty-Two: Comments Reply heading and Cancel reply link have no space between them

#7 @karmatosed
8 days ago

  • Owner set to karmatosed
  • Status changed from new to assigned

#8 @sabernhardt
8 days ago

  • Milestone changed from Awaiting Review to 6.7

In ticket:56496#comment:18, I had suggested leaving Twenty Twenty-Two's CSS untouched for anything related to the legacy Comments block. I could remove that part of the pull request (if desired).

Last edited 8 days ago by sabernhardt (previous) (diff)

#9 @karmatosed
8 days ago

@sabernhardt that would be great if you could leave that untouched thank you.

#10 @karmatosed
8 days ago

  • Keywords changes-requested added

@sabernhardt commented on PR #6368:


8 days ago
#11

I removed the changes for Twenty Twenty-Two and synced the branch.

#12 @sabernhardt
8 days ago

  • Keywords changes-requested removed
  • Summary changed from Twenty Seventeen, Twenty Nineteen & Twenty Twenty-Two: Comments Reply heading and Cancel reply link have no space between them to Twenty Seventeen and Twenty Nineteen: Comments Reply heading and Cancel reply link have no space between them

#13 @karmatosed
8 days ago

Thank you so much @sabernhardt.

#14 @karmatosed
7 days ago

  • Keywords commit added

Adding commit to see about doing that once tested.

#15 @karmatosed
7 days ago

In the next few screenshots you can see both what the patch does and also what it looked like without in Twenty Seventeen. This means it is good to go to commit as the patch resolves the issue. Thank you everyone.

@karmatosed
7 days ago

Twenty Nineteen issue with patch

@karmatosed
7 days ago

Twenty Seventeen with patch

@karmatosed
7 days ago

Twenty Seventeen Without patch

#16 @karmatosed
7 days ago

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

In 58732:

Multiple themes: Comments Reply heading and Cancel reply link did not have spacing.

This brings spacing in that was missing for both Twenty Seventeen and also Twenty Nineteen. It was missing between the words.

Props pitamdey, sabernhardt, nidhidhandhukiya, poena.
Fixes #59334.

#17 @karmatosed
7 days ago

  • Keywords needs-testing removed

@sabernhardt commented on PR #6368:


7 days ago
#18

Committed in r58732

Note: See TracTickets for help on using tickets.