ID attributes on list items are stripped when any list item is edited

[pbiron]

Description

When a list block that has had ID attributes manually added to list items is edited (visually), the ID attributes on the list items are stripped out.

Step-by-step reproduction instructions

1. insert a list block (order or unordered, doesn't seem to matter)
2. add a few list items
3. edit the block "as HTML"
4. add ID attributes to each list item (e.g., id="item-1")
5. edit the block "visually"
6. edit the block "as HTML"
7. see that the ID attributes are still there
8. edit the block "visually"
9. edit the text of any of the list items
10. edit the block "as HTML"
11. see that the ID attributes have been stripped out

Expected behaviour

I expect the ID attributes to still be present

Actual behaviour

The ID attributes have been stripped out

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.8-RC4
• Gutenberg version: core
• Are all plugins except Gutenberg deactivated? Yes (no GB plugin, using core)
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: desktop
• Operating system: Windows 10 Pro for Workstations, 21H1
• Browser: Chrome 91.0.4472.164

[pbiron]

FYI: this happens in both the post editor and the widget editor.

[pbiron]

See #29838 where I asked for a UI for setting ID's on list items...

[pbiron]

Just discovered that whatever the problem is it is NOT related to a change in 5.8, because it also seems to happen in 5.7.2 (I guess it's been a while since I edited any of the lists in production sites where I've added ID attributes :-)

[optimizewp]

Just my 2 cents.

1. Can replicate. Same WP setup, also with different standard themes. Also activating Gutenberg 11.0.0.

2. Custom IDs, classes or style (I just wanted to expand my tests adding more HTML there) added Edit as HTML or via Code Editor get stripped also when you convert the list from unordered to ordered and viceversa.

3. After point 5 of the "Step-by-step reproduction instructions" if you Update the Post/Page where List block is inserted and inspect front-end, you'll see the custom IDs, classes or style. 3.1 At the same time, inspecting the Post/Page while editing, you'll never see the custom IDs, classes or style.

4. After Updating, you can reload while editing, custom IDs, classes or style persist, you can see them only with the Code Editor, not inspecting the page.

5. Following Slack related discussion I checked some other blocks. The Custom IDs can be added via Code Editor where the block in its Advanced settings has the HTML anchor field available. Tested with Paragraph, Heading, Cover, Buttons, Media & Text, Quote blocks. HTML anchor field gets populated. 5.1 If you try to add some not allowed HTML, like a simple style="color: red;" or the equivalent style="color:#ff0000", all these blocks crash, and immediately offer to do an Attempt Block Recovery action, which succefully removes the offending code. This is the way the blocks have been developed, it's not a bug, simply adding custom style in this way does not follow the block coding standards, and make the block crash. So it's an user error.

6. Coming back to the List Block, it's clear it has no granular control over the single <li> items, you cannot assign different colors, or classes and IDs, therefore if added directly editing the HTML they get stripped out after a second edit. Of course it's not correct that you can add them, and after a unique editing and update of the List Block, you can see them fornt-end

   

   If you'll never edit this block again, you can have this live forever.

7. List Blocks with not allowed HTML code added on them, should crash like the other blocks. 7.1 This could be integrated while working at #29838.

[pendantry]

This looks the same as the bug report I submitted back in February. I guess nobody's bothered about fixing this.

[vijayhardaha]

Is anyone working on this issue?

[pendantry]

Is anyone working on this issue?

Assignees No one assigned

Doesn't look like it :(

[byalexandrepedrosa]

I got this issue working on foot notes. For me, since on the end of every li theres a link to foot notes, worked with the id inside the link, example:

<li>List Item Text<a href="#footnotes1" id="textnote1">1</a></li>