admin管理员组

文章数量:1135190

I use Navigation block (Navigation menu) for my header menu.

The problem I faced is that I can't render on front link description for the menu items that has children.

I tried walker_nav_menu_start_el filter to customize this somehow, using this code and it didn't help.

function prefix_nav_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
        $item_output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
    }
 
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

So my question is: what should be done to render link description for items with children in navigation block.

Thank you in advance!

Added 2023-10-28

As I understand this is because there are different files for rendering menu and submenu items:

link .php

submenu

.php

And for navigation-submenu there is no logic for rendering link description.

But question is the same: how to enabling link description for submenu

I use Navigation block (Navigation menu) for my header menu.

The problem I faced is that I can't render on front link description for the menu items that has children.

I tried walker_nav_menu_start_el filter to customize this somehow, using this code and it didn't help.

function prefix_nav_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
        $item_output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
    }
 
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

So my question is: what should be done to render link description for items with children in navigation block.

Thank you in advance!

Added 2023-10-28

As I understand this is because there are different files for rendering menu and submenu items:

link https://github.com/WordPress/WordPress/blob/master/wp-includes/blocks/navigation-link.php

submenu

https://github.com/WordPress/WordPress/blob/master/wp-includes/blocks/navigation-submenu.php

And for navigation-submenu there is no logic for rendering link description.

But question is the same: how to enabling link description for submenu

Share Improve this question edited Oct 18, 2023 at 8:30 oshka asked Oct 17, 2023 at 16:01 oshkaoshka 114 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

I solve this problem by using WordPress Filter hooks

I use the filter render_block, to hook in altering the existing HTML

So I created custom_render_block_core_navigation_submenu hook function.

Inside my hook I am using conditions to avoid storing my modified code in the database.

  • Target the type of block (core/navigation-submenu)

  • Only render in the front-end

  • Don’t alter the HTML in wp-json

In the function I check is title or description is avaliable, if yes, I create new list item element with title and/or description and insert this list item inside child list right after the opening

function custom_render_block_core_navigation_submenu(string $block_content, array $block): string
{
    if (
        isset($block['blockName']) &&
        'core/navigation-submenu' === $block['blockName'] &&
        !is_admin() &&
        !wp_is_json_request()
    ) {
        $additional_html = '';

        // Add description if available.
        if (!empty($block['attrs']['title']) || !empty($block['attrs']['description'])) {
            $additional_html .= '<li class="wp-block-navigation-item">';

            // Add title if available.
            if (!empty($block['attrs']['title'])) {
                $additional_html .= '<span class="wp-block-navigation-item__label">';
                $additional_html .= wp_kses_post($block['attrs']['title']);
                $additional_html .= '</span>';
            }

            // Add description if available.
            if (!empty($block['attrs']['description'])) {
                $additional_html .= '<span class="wp-block-navigation-item__description">';
                $additional_html .= wp_kses_post($block['attrs']['description']);
                $additional_html .= '</span>';
            }

            $additional_html .= '</li>';
        }

        // Find the position to insert $additional_html
        $position = strpos($block_content, '<ul class="wp-block-navigation__submenu-container wp-block-navigation-submenu">');
        if ($position !== false) {
            // Insert $additional_html right after the opening <ul> tag
            $position += strlen('<ul class="wp-block-navigation__submenu-container wp-block-navigation-submenu">');
            $block_content = substr_replace($block_content, $additional_html, $position, 0);
        }
    }

    return $block_content;
}

add_filter('render_block', 'custom_render_block_core_navigation_submenu', null, 2);

本文标签: menusRender link description in navigation block