Bug 229819 - Add automatic IDs for all headings on pages and posts
Summary: Add automatic IDs for all headings on pages and posts
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Website (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Jon Davis
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-02 11:23 PDT by Jon Davis
Modified: 2022-03-10 16:47 PST (History)
3 users (show)

See Also:


Attachments
Patch (1.48 KB, patch)
2021-09-02 11:27 PDT, Jon Davis
jond: review?
jond: commit-queue?
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Jon Davis 2021-09-02 11:23:49 PDT
Automatically generate navigation ids for all headings in WordPress pages and posts.
Comment 1 Jon Davis 2021-09-02 11:27:20 PDT
Created attachment 437173 [details]
Patch
Comment 2 Radar WebKit Bug Importer 2021-09-09 11:24:18 PDT
<rdar://problem/82935497>
Comment 3 Tim Nguyen (:ntim) 2022-02-03 13:41:06 PST
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?)
Comment 4 Jon Davis 2022-03-10 16:43:38 PST
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).
Comment 5 Jon Davis 2022-03-10 16:47:44 PST
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.