Table of Contents: Add toggle

[alexstine]

Adds a toggle for the Table of Contents block.

See WordPress/wporg-documentation-2022#58 for additional context.

[alexstine]

@ryelle Here is the basic code but not sure how to inject JavaScript on the front-end for this. Is there a way with blocks or do I just need to call wp_register_script(), wp_enqueue_script()?

[ryelle]

There's already a front end script for this block, it's at table-of-contents/src/view.js, currently it just handles the positioning to make the sidebar stay stuck to the screen while scrolling the page. If we move away from that layout (of having a sidebar) we can probably remove most of that code… but it will depend on the design. If you implement the toggle here, I can work with @jasmussen on how it should look 👍🏻

[alexstine]

@ryelle Got it working.

[ryelle]

I've updated this PR with the styles suggested by @fcoveram. The table of contents is collapsed by default so that it's easy to skip. It's collapsed at all sizes, even when it's shifted to the sidebar, so that it is still skipped for screen reader users. This makes for kind of an awkward visual, with the only thing in the sidebar a toggle button. The alternative would be to have the table of contents expanded by default when the screen is wide enough (1200px). The list would still be collapsible, so a screen reader user can collapse it to get by. Would that be acceptable, @alexstine?

Screenshots for design review:

	Collapsed (default)	Expanded
Small screen (450)
Mid-sized screen (960)
Large screen (1400)

[jasmussen]

Looks good to me. My only question would be whether we can have the table of contents be expanded by default, if you're on a large (two columns) screen.

[fcoveram]

I notice an unbalance spacing in the sides. Sorry that I can't point out specific values and what might cause them, but here is a screenshot highlighting the areas.

[ryelle]

@fcoveram Is that what it currently is, and it should be different? Can you tell me the values each side should be?

[alexstine]

Collapsed or expanded by default is fine, whichever way works better visually.

Thanks.

[fcoveram]

@ryelle I designed it with 15px for top and bottom paddings and 20px for left and right. But I understand that the outcome doesn't necessarily match Figma design, so adding a mockup with the spacing guides for reference.

[ryelle]

@fcoveram I think you're looking at the production site, the branch here has cleaned up some of those spacing issues. I just fixed it up a bit more so it should match your design now.

(once this is merged, the templates in documentation & developers will need to updated to remove the attributes, since they're not necessary)

[ryelle]

Looks good to me. My only question would be whether we can have the table of contents be expanded by default, if you're on a large (two columns) screen.

Collapsed or expanded by default is fine, whichever way works better visually.

Okay, I've set it to be expanded by default when the screen is large enough for the table of contents to be visually in the sidebar, otherwise it's collapsed by default. The toggle is there for all sizes.

[fcoveram]

It looks great, thanks @ryelle. I was looking at the images you shared in this message 🤔 . Nonetheless, the last update works excellent.