HTML entities are not being decoded when using WordPress REST API for Gutenberg blocks

Question

I am building a custom Gutenberg block that makes a request to the WordPress REST API to get some Posts. I'm using axios to make the request to the REST endpoint.

When the result comes back, there is an array of Post objects, and I can see the titles of the Posts, but they are all contained in the JSON object as title.rendered and contain HTML entities eg.

title: {
    rendered: "This has a hyphen – oh dear"
}`

I'm trying to populate a <SelectControl> with the resulting data, so there's no way to use the React dangerouslySetInnerHTML method which would solve the entities problem. So how can I get rid of these entities when populating the options?

Here is the code I'm using to populate the options from the REST response:

const options = response.data.map((post) => {
    return {
        label: post.title.rendered,
        value: post.id,
    };
});

Answer 1

It's not immediately obvious, but there is in fact a method made available in the Blocks API to do this.

At the top of your block code, type:

const { decodeEntities } = wp.htmlEntities;

Then you can use it like this:

const options = response.data.map((post) => {
    return {
        label: decodeEntities(post.title.rendered),
        value: post.id,
    };
});

Bazoozaa! HTML entities are gone.

Answer 2

And why not using rest_prepare_<post_type> filter ?

$post_type = "post";
add_filter( "rest_prepare_{$post_type}", 'prefix_title_entity_decode' );
function prefix_title_entity_decode( $response ) {
    $data = $response->get_data();
    $data['title']['rendered'] = html_entity_decode( $data['title']['rendered'] );
    $response->set_data( $data );
    return $response;
}