Align Submenu block and Nav Link block by including description and wrapping span

[prajapatisagar]

Addresses part of #57099

What?

This PR fixes the missing <span class="wp-block-navigation-item__label"> element for navigation items with submenus.

Why?

The absence of the <span class="wp-block-navigation-item__label"> element in navigation items with submenus results in inconsistent markup, potentially impacting accessibility and styling.

How?

The PR adjusts the rendering logic for navigation items with submenus to include the <span class="wp-block-navigation-item__label">.

Testing Instructions

1. Add a navigation block
2. Add a navigation item to this block
3. Add a second navigation item to this block
4. Add a submenu item to the second navigation block
5. Check the source code

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: prajapatisagar <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[MaggieCabrera]

I understand the goal is to bring parity between the editor and the frontend but this is extra markup/classnames that we need to support in the future. Why do we need this span? Either in the frontend and the editor, or both.

[getdave]

We should bring both navigation-link and submenu blocks into line with each other. That means:

• remove span from both
• add span to submenu

[getdave]

@MaggieCabrera As I understand it, I think the span is added to the core/navigation-link block because there are also scenarios where a description also gets added within the anchor tag.

gutenberg/packages/block-library/src/navigation-link/index.php

Lines 255 to 259 in 7143076

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

We don't support this on the submenu, which is likely because submenu came after Navigation Link and the two blocks have fallen out of sync as they rely on a lot of duplication.

#52505 requests that description is added to the submenu block. Therefore I think we should consider pivotting this PR to add the description. At that point the span makes a lot more sense. Do you agree @MaggieCabrera?

@prajapatisagar Would you be interested in adjusting this PR accordingly?

[prajapatisagar]

Yes will update the PR accordingly.

[MaggieCabrera]

#52505 requests that description is added to the submenu block. Therefore I think we should consider pivotting this PR to add the description. At that point the span makes a lot more sense. Do you agree @MaggieCabrera?

Thank you for doing the work to uncover the reasons behind the current state of the block! That makes much easier to judge what the direction should be. And what you suggest sounds reasonable to me.

[prajapatisagar]

@getdave I have updated the feedback.

[carolinan]

Could the documentation about the class names be updated too as part of this PR?
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/README.md

[prajapatisagar]

@carolinan I have updated the documentation.

[getdave]

Thanks for your work here @prajapatisagar 👍

When it comes to WordPress 6.8 I suggest we include a note in the miscellaneous dev notes about these markup changes.