HTML 使用 WordPress REST API 古腾堡块时实体未被解码

Question

我正在构建一个自定义 Gutenberg 块，它向 WordPress REST API 发出请求以获取一些 Post。我正在使用 axios 向 REST 端点发出请求。

结果回来的时候，有一个Post object的数组，可以看到Post的标题，但是都包含在JSON object 作为 title.rendered 并包含 HTML 个实体，例如。

title: {
    rendered: "This has a hyphen &#8211; oh dear"
}`

我正在尝试用结果数据填充 <SelectControl>，因此无法使用 React dangerouslySetInnerHTML 方法来解决实体问题。那么如何在填充选项时去掉这些实体呢？

这是我用来填充 REST 响应选项的代码：

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

Answer 1

这不是很明显，但实际上在块中提供了一种方法 API 可以做到这一点。

在块代码的顶部，键入：

const { decodeEntities } = wp.htmlEntities;

然后你可以这样使用它：

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

火箭筒！ HTML 个实体消失了。

Answer 2

为什么不使用 rest_prepare_<post_type> 过滤器？

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

HTML 使用 WordPress REST API 古腾堡块时实体未被解码

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

rest

wordpress

block

html-entities

wordpress-gutenberg