Not scrolling to heading inside group block 6.6.1

  • Resolved Matt Schofield

    (@mattschofield)


    3 months, 4 weeks ago

    Hi

    The following issue has started with WP 6.6.1.

    When a Heading within the page is contained within a Group block, the heading is detected and output within the TOC block on the front end, but clicking on that item does not trigger the scroll to that particular heading. It actually appears to scroll back to the page title instead.

    An interesting observation is that when you mouse over the link, you can see the /#heading fragment is indeed added to the URL, but when clicked, the scroll doesn’t occur (it scrolls to the top of the page) and the /#heading fragment is not present in the browser address bar. Manually typing the /#heading fragment to the address bar does trigger the scroll to the heading to occur as required. All other headings that are not themselves within Group blocks continue to behave as normal in all regards.

    In the page link I’ve provided, the “Quality Assurance” heading is the one on this particular page that is within a Group block.

    Hoping this is something that won’t be too troubling to fix. Thanks for looking.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Matt Schofield

    (@mattschofield)

    As a follow up observation…

    If you select the Group block in the editor, and go to Style > Dimensions, and then add a custom “0” value to both the padding Top and Bottom and padding Left and Right properties, the scroll to the heading within that Group block from the SimpleTOC menu functions properly.

    Thread Starter Matt Schofield

    (@mattschofield)

    Another follow up observation.

    If you select the group block in the editor, and in the settings pane disable the Layout toggle “Inner blocks use content width”, and save the page, the SimpleToc menu functions properly on the frontend and the default (or edited if required) padding of the group block is respected. In short, the page content is stylistically as intended with padding, and the Simpletoc menu works properly by scrolling to the heading within said group block.

    Some hopefully useful documentation of the WP Core 6.6.x padding changes here and here.

    Thread Starter Matt Schofield

    (@mattschofield)

    I added the following code snippet to our site to patch the issue for now. Headings within group blocks are now reliably smooth-scrolled to when clicked from the Simpletoc table of contents.

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.simpletoc-list a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').split('#')[1];
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    const rect = targetElement.getBoundingClientRect();
                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                    const targetOffsetTop = rect.top + scrollTop;
                    window.scrollTo({
                        top: targetOffsetTop,
                        behavior: 'smooth'
                    });
                }
            });
        });
    });
    Thread Starter Matt Schofield

    (@mattschofield)

    Courtesy update.

    Our Astra Theme (and Astra Pro plugin) received the 4.8.0 update this morning (changelog). I tested disabling the smooth scroll code snippet provided above and found the SimpleToc smooth scroll is fully functional again without the snippet. Smooth scrolling to headings within group blocks is no longer a problem.

    Plugin Author Marc Toensing

    (@marcdk)

    thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.