Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add UI for setting ID (anchors) on list items (<li>) #29838

Open
pbiron opened this issue Mar 12, 2021 · 5 comments · May be fixed by #48758
Open

Add UI for setting ID (anchors) on list items (<li>) #29838

pbiron opened this issue Mar 12, 2021 · 5 comments · May be fixed by #48758
Assignees
Labels
[Block] List Affects the List Block [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@pbiron
Copy link

pbiron commented Mar 12, 2021

What problem does this address?

I often find myself needing to specify anchors on individual list items (<li>) but the list block does not support this, although it does allow specifying anchors on the list itself (<ul> or <ol>). It would be very helpful if that were possible.

What is your proposed solution?

I'm not sure what the backend JS would be, but from a UI perspective, when the cursor is within the text of a <li>, then the HTML anchor field in the Advanced panel should apply to the list item (instead of the list as a whole).

Of course, that may introduce some ambiguity about how to specify an anchor for the list as a whole, so I'm open to almost any UI that would allow me to specify anchors on list items.

@paaljoachim paaljoachim added [Block] List Affects the List Block [Type] Enhancement A suggestion for improvement. labels Mar 13, 2021
@mtias
Copy link
Member

mtias commented Mar 16, 2021

The main change to unlock this would be to turn list items into child blocks.

@pbiron
Copy link
Author

pbiron commented Mar 16, 2021

@mtias how much work would that be, and what are the BC implications?

@mtias
Copy link
Member

mtias commented Mar 16, 2021

It's not trivial, but we are getting there tool-wise. See #6394.

@adamwoodnz
Copy link

adamwoodnz commented Jan 25, 2023

The http://w.org/about/security page has links in the content to footnotes which are in a list, using ids like #footnote1 on the list items. As part of the redesign we are building this content in blocks. This is what it looks like:

Screen Shot 2023-01-25 at 4 58 26 PM

Unfortunately the best I can do is link to the list element at present. For now I have changed to a non-list solution with paragraph tags.

@pbiron
Copy link
Author

pbiron commented Jan 25, 2023

The main change to unlock this would be to turn list items into child blocks.

List items are now child blocks (or at least, they appear to be in the editor, not sure whether they truly are under the hood). It's now possible to set a CSS class on list items.

@mtias are things now at the stage and anchors could be added to list items?

@tomdevisser tomdevisser self-assigned this Mar 5, 2023
tomdevisser added a commit to tomdevisser/gutenberg that referenced this issue Mar 5, 2023
@tomdevisser tomdevisser linked a pull request Mar 5, 2023 that will close this issue
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Mar 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants