Avoid using inline RichText element for navigation link

[talldan]

Description

This switches the Navigation Link block's label to the default div instead of a span in the editor.

This change is to avoid a console warning triggered by RichText when an inline element is used:

RichText cannot be used with an inline container. Please use a different tagName.

This label element is a flex item, so the layout shouldn't be affected. This may also improve some elements of editing the labels that are the reason that warning exists, but it's hard to say what.

How has this been tested?

1. Add a navigation block with several navigation links
2. Observe the layout is still the same

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: -7 B (0%)

Total Size: 845 kB

Filename	Size	Change
build/block-library/index.js	112 kB	-7 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.02 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	4.08 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.24 kB	0 B
build/block-directory/style-rtl.css	760 B	0 B
build/block-directory/style.css	761 B	0 B
build/block-editor/index.js	105 kB	0 B
build/block-editor/style-rtl.css	10.1 kB	0 B
build/block-editor/style.css	10.1 kB	0 B
build/block-library/editor-rtl.css	7.13 kB	0 B
build/block-library/editor.css	7.13 kB	0 B
build/block-library/style-rtl.css	7.19 kB	0 B
build/block-library/style.css	7.19 kB	0 B
build/block-library/theme-rtl.css	683 B	0 B
build/block-library/theme.css	685 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	57.7 kB	0 B
build/components/index.js	198 kB	0 B
build/components/style-rtl.css	16.9 kB	0 B
build/components/style.css	16.9 kB	0 B
build/compose/index.js	6.66 kB	0 B
build/core-data/index.js	11.4 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	5.47 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	3.1 kB	0 B
build/edit-navigation/index.js	3.54 kB	0 B
build/edit-navigation/style-rtl.css	485 B	0 B
build/edit-navigation/style.css	485 B	0 B
build/edit-post/index.js	28.2 kB	0 B
build/edit-post/style-rtl.css	12.5 kB	0 B
build/edit-post/style.css	12.5 kB	0 B
build/edit-site/index.js	10.8 kB	0 B
build/edit-site/style-rtl.css	5.25 kB	0 B
build/edit-site/style.css	5.24 kB	0 B
build/edit-widgets/index.js	8.33 kB	0 B
build/edit-widgets/style-rtl.css	5 kB	0 B
build/edit-widgets/style.css	5 kB	0 B
build/editor/editor-styles-rtl.css	428 B	0 B
build/editor/editor-styles.css	431 B	0 B
build/editor/index.js	43.4 kB	0 B
build/editor/style-rtl.css	3.27 kB	0 B
build/editor/style.css	3.27 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.32 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/media-utils/index.js	5.29 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.67 kB	0 B
build/primitives/index.js	1.49 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/rich-text/index.js	14.8 kB	0 B
build/server-side-render/index.js	2.67 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.02 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[tellthemachines]

Works well, warnings are gone!

[ellatrix]

What is it on the front end?

[ellatrix]

Also, if it's displayed as a flex item, why does RichText warn? RichText will only warn if it's displayed as an inline element. Tag name does not matter.

[talldan]

@ellatrix I'm guessing because there's no explicit display for a flex-item, perhaps that's something that the logic for the warning can't pick up on. That logic could check that the parent element is display: flex;, but then there's also no issue making this a <div> if it's a flex item.

It's an <a> in the post, but that can't be matched in the editor as the element isn't a link there.

A <div> seems fine to me given these constraints.

[simison]

dangerouslySuppressWarning: true might come handy some day. 😀