7

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,
    };
});
codewithfeeling
  • 4,919
  • 5
  • 35
  • 46

2 Answers2

5

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.

codewithfeeling
  • 4,919
  • 5
  • 35
  • 46
  • in my case, I added this line: `import {decodeEntities} from "@wordpress/html-entities";` after run `npm install @wordpress/html-entities --save` – Dudo1985 Nov 03 '20 at 17:21
  • Yep - that works perfectly if you're using the @wordpress imports (I'm using that too) - I'll add that into the answer – codewithfeeling Nov 03 '20 at 21:03
2

And why not using rest_prepare_<post_type> filter ?

$post_type = "post"
add_filter( "rest_prepare_".$post_type, 'prefix_title_entity_decode'] , 10, 1 ); 
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;
}
ZecKa
  • 1,551
  • 11
  • 24