TwentyTwenty: Paginated comments don't work

[andraganescu]

While investigating #41390 I tried testing as described using the new default theme TwentyTwenty:

The "Other comment settings" section can be found under Settings > Discussion.

Steps to reproduce:

Break comments into pages with 3 top level comments per page and the last page displayed by default. > Comments should be displayed with the newer comments at the top of each page
Go to a post which already has more than, say, 10 comments
Navigate to the previous comments using the comment pagination

... and found that when clicking "Previous comments" nothing happened.

Simply switching themes to Twenty Nineteen solved the issue.

[joyously]

It appears to be jumping to the in-page anchor instead of navigating to the other page of comments. (caught by JS?)

[acosmin]

It's a JS "issue" regarding smoothScroll. You can test by commenting out this line: ​https://github.com/WordPress/twentytwenty/blob/master/assets/js/index.js#L745

A solution would be to add a || -1 !== element.href.search( '#comments' ) on this line:
​https://github.com/WordPress/twentytwenty/blob/master/assets/js/index.js#L341

[SergeyBiryukov]

Related: #48763

[mukesh27]

If we remove comments id from the parent DIV then it will fix the issue.

[mukesh27]

Patch.

[acosmin]

@mukesh27 removing that makes for bad ux. When I click a post's comments link (eg: from the index page) I expect it to point me (scroll to) the post's comment section.

The solution is the JS I mentioned...

[Hareesh Pillai]

Updated patch

[Hareesh Pillai]

New patch as per the above comments. Tested in my environment and works fine.
It would be nice if we milestone this to 5.3.1.

[SergeyBiryukov]

In 46824:

Twenty Twenty: Replace Smooth Scroll JS implementation with scroll-behavior CSS property.

The JS implementation had multiple issues and did not work as expected.

This change includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that don't want motion effects. For further explanation on this media query, see MDN documentation: ​https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Accessibility_concerns

Props audrasjb, melchoyce, joostdevalk, Anlino, mauteri, sergiomdgomes, littlebigthing, williampatton, netweb, andraganescu, joyously, acosmin, mukesh27, hareesh-pillai.
Fixes #48763, #48551, #48866.

[SergeyBiryukov]

In 46825:

Twenty Twenty: Replace Smooth Scroll JS implementation with scroll-behavior CSS property.

The JS implementation had multiple issues and did not work as expected.

This change includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that don't want motion effects. For further explanation on this media query, see MDN documentation: ​https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Accessibility_concerns

Props audrasjb, melchoyce, joostdevalk, Anlino, mauteri, sergiomdgomes, littlebigthing, williampatton, netweb, andraganescu, joyously, acosmin, mukesh27, hareesh-pillai.
Merges [46824] to the 5.3 branch.
Fixes #48763, #48551, #48866.

[audrasjb]

Dev note published on Make/Core: ​https://make.wordpress.org/core/2019/12/08/twenty-twenty-animated-scroll-changes-in-wordpress-5-3-1/