WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.4k stars 4.16k forks source link

Table of Contents - Allow Users to Select Which Heading Levels Will Be Included #51605

Open jodamo5 opened 1 year ago

jodamo5 commented 1 year ago

What problem does this address?

Currently, the Table of Contents block inserts a link for all headings it finds in the post. However, if there are a lot of headings in the post, and if the author has used a combination of H1, H2, H3, H4, H5, H6 headings, etc, then the Table of Contents can be undesirably long.

What is your proposed solution?

The settings of the block should allow editors to select which heading levels will be included in the Table of Contents block.

I think the simplest option would be that users can choose the lowest level of heading that should be included in the TOC. It would be a single drop-down of the 6 heading levels. If a user chooses H3, then only H1, H2 and H3 headings will be included in the TOC. If they chose H6 then all heading levels will be included in the TOC.

JosVelasco commented 1 year ago

I like your proposed solution, @jodamo5.

An alternative I'd like to see is having the list collapse by default as Wikipedia does.

Mamaduka commented 1 year ago

@richtabor, @jasmussen, I would appreciate any recommendation here from a design perspective.

jasmussen commented 1 year ago

This seems like a valid option to build into the inspector, where there's plenty of room.

I would also tend to agree that the dropdown proposed, defaulting to showing all heading levels, would likely be the best simplest interface; this is presuming we will always want to show H1s if available. We definitely want to avoid a checkbox system where you can show only H2s and H4s, for example.

One question would be whether it's a toggle, on by default, with the label "Show all heading levels", and when untoggled it surfaces the dropdown below. Or whether the dropdown can stand on its own.

The other is what labels to show, "Lowest level" isn't that clear to me. To get the conversation started, perhaps:

Heading levels
[Show all heading levels ▾]
Select which heading levels to show.

— with dropdown options:

Show all heading levels *
Headings 1 and 2
Headings 1 to 3
Headings 1 to 4
Headings 1 to 5
Headings 1 to 6 

Mainly it would be good to avoid the HTML markup "H1", "H2" terminology, as that likely won't resonate with a majority of people.

Mamaduka commented 1 year ago

Thank you, Joen!