Question

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

结果返回时，有一个Post对象数组，我可以看到Posts的标题，但它们都以title.rendered的形式包含在JSON对象中，并包含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

这不是立即显而易见的，但实际上，Blocks API中提供了一种方法来执行此操作。

在阻止代码的顶部，键入：

const { decodeEntities } = wp.htmlEntities;

然后您可以像这样使用它：

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

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

将WordPress REST API用于Gutenberg块时，HTML实体未解码

2 个答案: