Make WordPress Core

Opened 7 months ago

Last modified 8 days ago

#59334 new defect (bug)

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

Reported by: pitamdey's profile pitamdey Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots needs-testing has-patch
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 (6)

2017.png (122.5 KB) - added by pitamdey 7 months ago.
Twenty Seventeen
2019.png (144.2 KB) - added by pitamdey 7 months ago.
Twenty Nineteen
2022.png (159.4 KB) - added by pitamdey 7 months ago.
Twenty Twenty-Two
59334.patch (1.3 KB) - added by pitamdey 7 months ago.
After applying this solution the issue is resolved
59334.2.patch (2.9 KB) - added by himshekhar07 7 months ago.
Patch added
59334.3.patch (1.4 KB) - added by nidhidhandhukiya 7 months ago.

Download all attachments as: .zip

Change History (12)

@pitamdey
7 months ago

Twenty Seventeen

@pitamdey
7 months ago

Twenty Nineteen

@pitamdey
7 months ago

Twenty Twenty-Two

@pitamdey
7 months ago

After applying this solution the issue is resolved

@himshekhar07
7 months ago

Patch added

#1 @sabernhardt
7 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
6 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
6 months ago

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

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

#4 @karmatosed
10 days ago

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

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


8 days 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
8 days 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
Note: See TracTickets for help on using tickets.