The enter_title_here and escaped HTML might display encoded characters

[afercia]

See #4059 / #4042

Several plugins (and themes...) use the enter_title_here filter to display their own title "placeholder" (note: in the classic editor it's actually a <label> element) for their custom post types. When the passed string contains a special character and the string gets escaped, The placeholder used in Gutenberg displays an encoded character.

For example, see in the screenshot below the "Add New Testimonial` screen from Jetpack:

Worth also noting that translations might add quotes or ampersands etc. to the original English strings.

Escaping is a good practice for HTML but an encoded character is just displayed "as is" in Gutenberg. Ideally, Gutenberg should handle these cases in some way.

[gziolo]

It should be also tested with the newly introduced filter write_your_story.

[aduth]

This can be resolved by using decodeEntities from utils:

import { decodeEntities } from '@wordpress/utils';

decodeEntities( 'Enter the customer's name' );
// "Enter the customer's name"

[aduth]

Alternatively, we could ensure that the strings are decoded server-side before reaching the client with a late filter to html_entity_decode:

add_filter( 'enter_title_here', 'html_entity_decode', 20 );

This is nice in that it's automatic, and doesn't require explicitly whitelisting strings to be decoded.

However, it only works because we trust in React's assignment of attributes to not allow for XSS. Naive usage via innerHTML could be dangerous with automatic decoding.

Also relevant for localization, since as discussed at #5557 (comment), this same issue applies if we start to decode entities in translation strings automatically (#3301 is a good problematic example). I don't think we'd want to explicitly call decodeEntities on every usage of a translated string. If we could be confident it's in a React context, we could automate it. Maybe even with a component like:

<__>Hello World</__>

cc @jahvi

[aduth]

Related: #5490