search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.42k stars 4.17k forks source link

Allow HTML in navigation block link labels #57788

Open carolinan opened 9 months ago

carolinan commented 9 months ago

Description

In the classic menu screen, users can add HTML in the link label field. In the label of the navigation block's inner blocks, HTML is stripped.

This is unexpected for users who expects feature parity between the two menu systems.

Step-by-step reproduction instructions

Add a navigation block. Add or select any link. In the settings panel of the link, try to add HTML inside the label field, for example: <b>Sample Page</b>

Confirm that the characters are deleted as you try to type in the tag.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/7422055/549e0a3c-9bd2-41e8-a3a7-c0b45ceb754e

Environment info

WP 6.4.2, with and without Gutenberg trunk

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

Andrew-Starr commented 9 months ago

What is weird is that pasting HTML into the Label field will be saved with the HTML encoded and will display with the HTML intact.

With the HTML not being visible in the Label field this adds more confusion if coming from classic. For example if adding HTML for an image, the image will display in the navigation block but the Label field will appear to be completely empty.

carolinan commented 9 months ago

The link items already support inline images, they don't need to be added in the label.

Andrew-Starr commented 9 months ago

The link items already support inline images, they don't need to be added in the label.

Oh yeah of course. Was just using that as an example to illustrate that HTML appears to be removed/deleted/missing from the label field when it is actually still present in the block markup.

carolinan commented 6 months ago

I assume that there also must be a limit on what type of tags that are allowed, even in the classic screen and when copy pasting. For example, a button would not be a suitable tag.

carolinan commented 6 months ago

In https://github.com/WordPress/gutenberg/pull/46171, HTML was stripped from the label input field of the navigation link. There is no issue linked to the PR, so it may not be 100% clear to me what this solved. @draganescu If you remember, can you share any more insights in why the HTML was stripped?

But I can try to describe better what happens today.

If I import a classic menu that has HTML, the block also applies the HTML to the link but the markup does not show in the label input field. This happens for example for users that has an existing site and wants to continue using their existing menu with a block theme.

If I type in HTML in the label input field, the tags are removed as I type and this is kind of a surreal and negative experience because I am not able to add my link text. If the tags need to be stripped, I would prefer if it happened when saving the changes, not as I am typing. And I would like to be informed that HTML is not allowed so that I can understand what is happening.

When I copy and paste text that has HTML into the label input field, the HTML is removed from the label input field, but not from the link in the menu itself.

If I copy <b>Sample Page</b> into the field, the link will appear bold in the editor and front, and the markup in the editor is:

<div tabindex="0" class="block-editor-block-list__block wp-block is-selected wp-block-navigation-item is-editing has-link wp-block-navigation-link" id="block-36cf1b11-82c2-4d59-a56c-4216327e6412" role="document" aria-label="Block: Page Link" data-block="36cf1b11-82c2-4d59-a56c-4216327e6412" data-type="core/navigation-link" data-title="Page Link">

<a class="wp-block-navigation-item__content">
<div role="textbox" aria-multiline="true" aria-label="Navigation link text" aria-readonly="false" class="block-editor-rich-text__editable wp-block-navigation-item__label rich-text" contenteditable="true" data-wp-block-attribute-key="label" style="white-space: pre-wrap; min-width: 1px;">
<b data-rich-text-format-boundary="true">Sample Page</b>
</div>
</a>
<div tabindex="0" class="remove-outline block-editor-block-list__layout" id="block-36cf1b11-82c2-4d59-a56c-4216327e6412" role="document" aria-label="Block: Page Link" data-block="36cf1b11-82c2-4d59-a56c-4216327e6412" data-type="core/navigation-link" data-title="Page Link" data-is-drop-zone="true">
</div>
</div>

When I select the block and click on the label input field, the markup is shown in the navigation block: https://github.com/WordPress/gutenberg/assets/7422055/9a0e83ba-8731-4133-9937-834ed3429b9f But because I can not see the markup in the label input field, I can only delete the markup by deleting the link text, and I can't edit the markup.

I think that either the label field should show in the markup, or the HTML should be completely stripped and not applied. Not applying the HTML would have a negative impact on existing sites and it would not match how the link labels in the classic menu screen worked, so it would be another unexpected change for users.

draganescu commented 6 months ago

That input is not ready for displaying HTML and it should only be about the text label. My PR removes the markup for formatting from being displayed in the navigation link inspector because links can contain it but that inspector input is not supposed to show markup.

We should come up with a better control in the inspector.