Bugs with autogenerated heading anchors

[paulwilde]

Description

I wrote a comment on the feature pull request about a week ago but given it's already a closed pull request it likely got lost.

There's currently some issues with the autogenerated heading anchors that are increasingly frustrating as someone who has been building a website with the latest version of Gutenberg with this feature in place.

1. There is a bug where if you write a heading and then duplicate that block the old id is retained even if you change the text for the duplicated heading.
2. It doesn't take into consideration ids from different editor settings (such as widgets) so you can end up with duplicate ids on the page from the main editor and widgets. If you were also to use a block template theme that would increase to 3 different areas that can produce duplicate ids.
3. There is currently no flag to disable the functionality. Not speaking as someone who does this, but I can see this having negative consequences on websites where people have used ids for JavaScript hooks or styling the template, and the generated ids have the potential to completely break the website.

Step-by-step reproduction instructions

See above.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[skorasaurus]

1. There is a bug where if you write a heading and then duplicate that block the old id is retained even if you change the text for the duplicated heading.

I can reproduce this on gutenberg 11.8.3

[Level3Manatee]

[...] I can see this having negative consequences on websites where people have used ids for JavaScript hooks or styling the template, and the generated ids have the potential to completely break the website.

I ran into exactly this. Emptying the anchor field results in a forced auto-fill with the default anchor name, so I had to insert a random string instead to un-break my site. Thankfully I don't have a lot of headlines in this specific project, because this has the potential to turn into a nightmare fast.

[metropoliscreative]

There is currently no flag to disable the functionality. Not speaking as someone who does this, but I can see this having negative consequences on websites where people have used ids for JavaScript hooks or styling the template, and the generated ids have the potential to completely break the website.

This functionality should be optional. I don't see any real benefit to forcing anchors on all headings automatically - it's very easy for conflicts to occur on short headings and very messy on long headings.

[mansi-shah-2248]

Anchors should not be forced on headings, it should be optional.

[ddryo]

I agree that there needs to be a way to turn off the automatic generation of anchors.

[jeffpaul]

Here's a related Support Forum post on the Heading ID duplication issue as well, confirmed still happening on WP 5.9 RC4 and Gutenberg 12.4.1: https://wordpress.org/support/topic/automated-ids-on-headings-causes-duplicate-id-breaks-validation/#post-15288905

[Zodiac1978]

Additionally it does not correctly transliterate in all languages. In German for example there are rules for it, like "ü"->"ue", "ä"->"ae", "ö"-> "oe", "ß"->"ss".

Found in remove_accents:
https://github.com/WordPress/WordPress/blob/2eaeae58ff0f4e7a5e31220830d6de060359322a/wp-includes/formatting.php#L1203-L1975

This seems to be not used for generating the anchor links as my umlauts are lost and I get just "ü"->"u" (and so on)

[luminuu]

Can confirm this bug exists still in WP 5.9, without the Gutenberg plugin active.

[Zodiac1978]

Pasting headings with the same name are not postfixed with a number -x, but stay with the same anchor name and therefore create duplicate IDs.

[cbirdsong]

I've encountered an issue where these anchors include any  s present in the title text.

Heading element content: Promoting Public Engagement and Equity in Recovery 
ID added once rendered on the page: promoting-public-engagement-and-equity-in-recoverynbsp

The same text run through the sanitize_title() comes out like you'd expect: promoting-public-engagement-and-equity-in-recovery

Where is the code that actually adds these? If the text could be run through sanitize_title and added to the tag using the new WP_HTML_Tag_Processor (#44410) it would probably solve some of these issues. (though duplicate IDs would still be a problem 😒)