Description
The Gutenberg editor does not properly display HTML entities (e.g. ­) which are contained in a custom post_type's label.
In fact it escapes the HTML entities (properly), causing the title to actually contain the string "­" in some places.
This is actually the desired behavior. When rendering the label/title it should be treated as a string rather than HTML, to prevent XSS. Unfortunately this makes it also incompatible with HTML entities.
I'm not sure if it's a bad idea to include HTML entities in the post_type's label in the first place. Anyways, WordPress displays them properly.
I located the issue in the settings-header component of the sidebar to be the root cause here. I also found a possible workaround for React which would replace known HTML entities with Unicode characters like \u00AD (Soft hyphen).
Step-by-step reproduction instructions
- Create a new theme or plugin
- Add a custom post_type and assign it a label with manual hyphenation (see code example below)
- Navigate to the WordPress backend and verify that the label/title of your post type is properly displayed on the left side menu.

- Create or edit a post of that post_type with Gutenberg. If not already done, open the settings sidebar on the right and verify the post_type's label/title is not properly displayed in the tab.

Expected behaviour
Gutenberg displays the label properly, making the "­" invisible, because the whole label fits into the tab's title.
Actual behaviour
See screenshot above.
Code snippet
// function.php (if it's a theme)
add_action( 'init', function() {
register_post_type(
'free_representatives',
array(
'label' => 'free represen­tatives',
'public' => true,
'show_in_rest' => true,
)
);
});
WordPress information
- WordPress version: 5.6
- Gutenberg version: Default shipped with WordPress version 5.6
- Are all plugins except Gutenberg deactivated? No
- Are you using a default theme (e.g. Twenty Twenty-One)? No
Device information
- Device: Desktop
- Operating system: any
- Browser: Firefox
Description
The Gutenberg editor does not properly display HTML entities (e.g.
­) which are contained in a custom post_type's label.In fact it escapes the HTML entities (properly), causing the title to actually contain the string "
­" in some places.This is actually the desired behavior. When rendering the label/title it should be treated as a string rather than HTML, to prevent XSS. Unfortunately this makes it also incompatible with HTML entities.
I'm not sure if it's a bad idea to include HTML entities in the post_type's label in the first place. Anyways, WordPress displays them properly.
I located the issue in the
settings-headercomponent of the sidebar to be the root cause here. I also found a possible workaround for React which would replace known HTML entities with Unicode characters like\u00AD(Soft hyphen).Step-by-step reproduction instructions
Expected behaviour
Gutenberg displays the label properly, making the "
­" invisible, because the whole label fits into the tab's title.Actual behaviour
See screenshot above.
Code snippet
WordPress information
Device information