current-menu-item does not get applied to custom links in navigation block

[ethanclevenger91]

Description

I expect custom links within the navigation block to get the current-menu-item class when on that link on the site, as was the case for classic nav menus. Currently, they do not receive this class.

Step-by-step reproduction instructions

1. New WP site (at, say, example.test)
2. Install TT4
3. Create new navigation menu via Editor
4. Add "Custom Link" to navigation using the WordPress install's URL and some slug, such as "http://example.test/link"
5. Create a new page titled "Link" (or otherwise) so that its permalink matches the menu item you created, such as "http://example.test/link"
6. Inspect nav menu on website front end
7. See no current-menu-item class

For quick reproduction, these steps are a bit absurd. The issue is more reasonably encountered when, for instance, you have a custom taxonomy. The prepared nav blocks (like Category Link or Tag Link or Page Link) do not include custom taxonomy term archive links, so you must use a Custom Link item, and the correct classes are not applied in that scenario, either.

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.5.2, Gutenberg 18.2.0. Also present w/o Gutenberg

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

[jhimross]

I replicated the issue and can reproduce it by following the instructions above. I tested this using a fresh WP installation with WP version 6.5.2 and using Twenty Twenty Four theme. Watch this when adding menu using "custom link":- https://share.zight.com/E0ueEXKD

And this what will happen, when I added a menu item not using the "custom link" feature, it shows this aria-current="page". See this: https://share.zight.com/JruE7pEn

[chuckpearson]

I can replicate this issue and have the same problem. When I add a menu item to the navigation in Site Editor, if the item is a custom post type, the menu item does not get the current-menu-item class applied and does not get the aria-current either.

[jeroensmeets]

For anyone facing this issue, I have added this filter to functions.php as a fix. Replace str_ends_with if you're on PHP < 8.

// add current-menu-item class to custom links in navigation block
function filter_custom_link_block( $html ) {
    // this works for page links
    if ( false !== strpos( $html, 'current-menu-item' ) ) {
        return $html;
    }

    preg_match_all( '/href=["\']?([^"\'>]+)["\']?/', $html, $matches );

    if ( count( $matches ) > 1 ) {
        global $wp;
        $current_url = trailingslashit( home_url( $wp->request ) );
        $menuitem_url = trailingslashit( $matches[1][0] );

        if ( str_ends_with( $current_url, $menuitem_url ) ) {
            return str_replace( 'wp-block-navigation-link', 'wp-block-navigation-link current-menu-item', $html );
        }
    }

    return $html;
}
add_filter( 'render_block_core/navigation-link', 'filter_custom_link_block', 10 );

[github-actions[bot]]

Hi, This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps. Thanks for helping out.