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

[pitamdey]

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

[pitamdey]

Twenty Seventeen

[pitamdey]

Twenty Nineteen

[pitamdey]

Twenty Twenty-Two

[pitamdey]

After applying this solution the issue is resolved

[himshekhar07]

Patch added

[sabernhardt]

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;
  }
  

[poena]

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.

[pitamdey]

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

• 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

[sabernhardt]

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

[karmatosed]

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

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

[karmatosed]

Thank you so much @sabernhardt.

[karmatosed]

Adding commit to see about doing that once tested.

[karmatosed]

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]

Twenty Nineteen issue with patch

[karmatosed]

Twenty Seventeen with patch

[karmatosed]

Twenty Seventeen Without patch

[karmatosed]

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.

Committed in r58732