Chapters and ToC: Internal scroll

[adamwoodnz]

Closes #453

Depends on WordPress/wporg-mu-plugins#554, which makes the sidebar container scroll internally once it becomes fixed.

Wraps the Chapters List in a sidebar container so that it behaves the same as the ToC, but without the 'Back to top' link.

On the Code Reference the comment form rules have been moved under the form so that they no longer clash with the ToC. It now only has to reduce in height when the footer becomes visible, see discussion.

The scrolling areas have custom scrollbars so that they appear on hover. This has been inspired by the React docs (example), and should help users discover that these are scrollable more easily. With the typical Mac OS setting of hidden scrollbars, it is not immediately obvious. Note that this does not work in Firefox.

Screenshots

Code reference

Code.ref.new.toc.mp4

Block Editor

Block.editor.new.toc.and.chapters.mp4

Testing

1. Ensure your mu-plugins is on Make sidebar container scroll internally wporg-mu-plugins#554
2. Test pages with short ToC and/or Chapter List
3. Test pages with long ToC and/or Chapter List
4. Test for regressions on small screens, there should be no change
5. Test in different browsers (check scrollbars)

[fcoveram]

It works great. Excellent improvement 👏

[ryelle]

My Chapters sidebar looks like this, it looks like there's still a position:absolute coming from somewhere. Once scrolling, the sidebars both look correct.

In the two-column layout, the chapter sidebar doesn't scroll (screenshot just to explain what layout I mean). I would expect it to continue to scroll even though the other sidebar is collapsed.

[renintw]

In the two-column layout, the chapter sidebar doesn't scroll (screenshot just to explain what layout I mean). I would expect it to continue to scroll even though the other sidebar is collapsed.

I saw this as well.

My Chapters sidebar looks like this, it looks like there's still a position:absolute coming from somewhere. Once scrolling, the sidebars both look correct.

But I was unable to reproduce this one, though.

[renintw]

👍👍👍

[adamwoodnz]

My Chapters sidebar looks like this, it looks like there's still a position:absolute coming from somewhere. Once scrolling, the sidebars both look correct.

Fixed the postcss nesting issues you detailed in WordPress/wporg-mu-plugins#554 so should be fixed now if you update mu-plugins

[adamwoodnz]

In the two-column layout, the chapter sidebar doesn't scroll (screenshot just to explain what layout I mean). I would expect it to continue to scroll even though the other sidebar is collapsed.

Nice catch, I'll make this behaviour independent

[adamwoodnz]

In the two-column layout, the chapter sidebar doesn't scroll (screenshot just to explain what layout I mean). I would expect it to continue to scroll even though the other sidebar is collapsed.

I have now fixed this in WordPress/wporg-mu-plugins#554 and you should be able to retest. More details >

ipad.scrolling.sidebars.mp4

[fcoveram]

The above looks great to me ⭐

[ryelle]

Like the other PR, this is working well 👍🏻

I did notice that on pages with short-content, there's no space under the chapter list. This screenshot is from the Common APIs page. Maybe sidebar-container could get some bottom margin/padding?

[adamwoodnz]

I did notice that on pages with short-content, there's no space under the chapter list. This screenshot is from the Common APIs page. Maybe sidebar-container could get some bottom margin/padding?

Another great find, fixed in 40f8977

Thanks for the solid review!