ToC block: ID conflicts with auto-generated anchors

Problem Description The Table of Contents (ToC) block automatically injects anchor elements like: <span id="dbeaver" class="eb-toc__heading-anchor" data-clipboard-text="http://localhost/license-types-2-0/#dbeaver"> </span> The id values are generated from heading text. The issue is that these generated IDs often collide with already existing IDs on the page — including elements outside the main content area (e.g., mega menu items in the header, navigation elements, etc.). When such a collision happens: Anchor scrolling becomes unreliable or broken The browser scrolls to the wrong element (e.g., header menu instead of content heading) In some cases, scrolling does not work at all This creates functional issues on pages where headings share slugs with navigation elements. Root Cause The ToC block: Generates anchor IDs from heading text. Injects <span> elements with those IDs. Does not check for global uniqueness across the entire DOM. Does not namespace or prefix generated IDs. As a result, ID conflicts occur. Proposed Improvements 1️⃣ Add configurable prefix to auto-generated anchor IDs (Conflict Prevention) Proposal Automatically prepend a prefix to all IDs generated by the ToC block. Example: Instead of: id="dbeaver" Generate: id="eb-toc-dbeaver" Or allow configurable prefix: eb_toc_anchor_prefix = 'eb-toc-' Benefits Eliminates collisions with theme, menu, or plugin IDs Backward compatible Minimal implementation complexity Does not affect visual rendering This alone would solve the majority of anchor scrolling conflicts. 2️⃣ Extended Mode: Support Custom Elements via data-attributes Problem Currently, the ToC scans only h1–h6 headings. Modern Gutenberg layouts often use: Custom blocks Div-based headings Structured content blocks Reusable components Developers need more flexibility. Proposed Feature: Custom Anchor Detection Mode Add optional support for scanning elements with specific data attributes. Example Allow developers to mark any element like this: <div data-eb-toc__heading-anchor="Custom anchor label" data-eb-toc__heading-level="2"> </div> Behavior The ToC block should: Detect elements containing data-eb-toc__heading-anchor Use its value as the ToC entry label Use data-eb-toc__heading-level to determine nesting level Automatically inject an anchor ID (with prefix) Add the element to the ToC Benefits Enables ToC generation for arbitrary elements Works with custom Gutenberg blocks Works with dynamic content Makes ToC much more flexible Keeps backward compatibility 3️⃣ Add “Root Selector” Option to Scope Scanning Area Problem ToC currently scans the entire document for headings. This may unintentionally include: Header titles Mega menu items Sidebar widgets Footer headings This contributes to ID conflicts and incorrect ToC structure. Proposed Feature: Root Container Selector Add a setting like: Scan within CSS selector: .main-content Then: document.querySelector('.main-content').querySelectorAll(...) Instead of: document.querySelectorAll(...) Benefits Prevents scanning navigation and header areas Improves performance Reduces accidental anchor collisions Provides developer-level control Combined Impact If implemented, these three features would: Eliminate ID collision bugs Prevent broken scrolling behavior Greatly increase ToC flexibility Make the block usable in complex layouts Improve compatibility with custom themes Suggested Priority At minimum, the ID prefix feature should be implemented to fix functional conflicts. The other two features would significantly enhance the ToC block’s power and make it suitable for advanced WordPress builds. Hi there, @morgunovvit Thank you very much for bringing this to our attention and for the detailed explanation. Yes, we fully understand the concern regarding the anchor ID conflicts generated by the ToC block and how this can affect the scrolling behavior and overall functionality. Please be assured that we have shared your report and suggestions with our development team for further review and evaluation . They will carefully assess the feasibility of the proposed improvements and the best way to address this matter. We truly appreciate your valuable feedback, as it helps us enhance the product experience. We will keep you informed and provide an update as soon as we receive further information from our development team. Thank you for your patience and understanding. Best regards, Hello there I am writing to update you regarding the Bug Fix | EB TOC | ToC block: ID conflicts with auto-generated anchors. Our development team has been working on fixing the issue, and I am pleased to inform you that the problem has been resolved in the dev version of the plugin. Here is the dev version: https://d.pr/f/i7WxaI You can check out this reference video on how to upload the dev version and replace it with the previous one: https://d.pr/XpCgsS Once you’ve tested, please let us know if you encounter any issues, we’ll be glad to assist. Thank You Hello again @morgunovvit Sorry for the inconvenience. We have not heard from you since our last conversation. Could you please let us know if you are still having this issue? So that we could try to solve your issue. We are waiting for your response. Thank you Hi @morgunovvit , We haven’t received a response since our last reply, so we’re assuming the issue has been resolved. We’ll proceed to close this topic for now. You’re always welcome to reopen it or start a new one if you have any further questions or concerns. Best regards, Hi @morgunovvit I wanted to follow up regarding the Bug Fix | EB TOC | ToC block: ID conflicts with auto-generated anchors. The fix has been released on the latest version of the plugins Essential Blocks 6.0.4 Please update your plugin to the latest version and let me know if you face any issues. To keep improving our service, would you be willing to spare 30 seconds to leave a review? Your feedback is invaluable to us. Thanks in advance! Link to review: https://wordpress.org/support/plugin/essential-blocks/reviews/#new-post