Disable interactivity for core navigation

After a lot of reading, debugging and testing I did not manage it to modify the default core/navigation block as I wanted. The interactivity API still keeps getting in the way. So my solution was to enable the classic menu and make it a custom dynamic block:

My theme’s functions.php:

function my_theme_register_menus()
{
    register_nav_menus(
        array(
            'primary' => __('Primary Menu', 'my-theme'),
        )
    );
}
add_action('after_setup_theme', 'my_theme_register_menus');

My theme navigation block render.php:

<?php

$walker = new Classic_Nav_Walker();

$menu_location = isset( $attributes['menuLocation'] ) ? $attributes['menuLocation'] : 'primary';

wp_nav_menu(
    array(
        'theme_location'  => $menu_location,
        'walker'          => $walker,
        'container'       => 'nav',
        'container_class' => 'my-theme-navigation',
        'echo'            => true,
    )
);

Edit.js:

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import ServerSideRender from "@wordpress/server-side-render";
import "./editor.scss";
export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <ServerSideRender block="my-theme/my-theme-navigation" />
        </div>
    );
}

And some custom behaviour inside the view.js. The downside is that you cannot modify the navigation inside the full site editor.

Hope it helps if anyone searches for a similar solution.

Related Posts: