Add automatic IDs for all headings on pages and posts

• Component: WebKit Website
• Status: NEW ---

[Jon Davis]

Automatically generate navigation ids for all headings in WordPress pages and posts.

[Jon Davis]

Created attachment 437173 [details]
Patch

[Radar WebKit Bug Importer]

<rdar://problem/82935497>

[Tim Nguyen (:ntim)]

Comment on attachment 437173 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=437173&action=review

> Websites/webkit.org/wp-content/themes/webkit/functions.php:140
> +add_filter('the_content', function($content) {
> +    return preg_replace_callback('/<h([1-6]{1})>([^<\/h]+)/', function ($matches) {
> +        return '<h'.$matches[1].' id="'.sanitize_title_with_dashes($matches[2]).'">'.$matches[2];
> +    }, $content);
> +});

Does this avoid conflicts with other IDs on the page? (and do we need to?)

[Jon Davis]

No it does not avoid conflicts with other IDs on the page. The likelihood is very low given the only sane IDs that could have a conflict are #logo, and #header. It would require a content author to specify a heading with those exact terms (e.g. <h2>Logo</h2> or <h2>Header</h2>). Other IDs are generated from WordPress machinery that has almost no chance of being used in content headings (e.g. #site-nav, #menu-main-menu-container, #menu-item-6091).

[Jon Davis]

We could more easily avoid conflicts with the use of a prefix (e.g. #toc-...) or a suffix (e.g. #...-section). It still isn't foolproof, but adds a measure of extra safety.