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,
    };
});

Handcuff

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.

Handcuff

in my case, I added this line: import {decodeEntities} from "@wordpress/html-entities"; after run npm install @wordpress/html-entities --save – Thearchy

Yep - that works perfectly if you're using the @wordpress imports (I'm using that too) - I'll add that into the answer – Handcuff

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;
}

Must

You should also pass new title value through wp_kses_post(), because it may contain unescaped tags that might lead to XSS vulnerabilities: $data['title']['rendered'] = wp_kses_post( html_entity_decode( $data['title']['rendered'] ) ); – Step