HTML-Entitäten werden nicht dekodiert, wenn die WordPress-REST-API für Gutenberg-Blöcke verwendet wird

Ich baue einen benutzerdefinierten Gutenberg-Block, der eine Anfrage an die WordPress-REST-API stellt, um einige Beiträge zu erhalten. Ich benutze axios um die Anfrage an den REST-Endpunkt zu stellen.

Wenn das Ergebnis zurückkommt, gibt es ein Array von Post-Objekten, und ich kann die Titel der Posts sehen, aber sie sind alle im JSON-Objekt als enthalten title.rendered und enthalten HTML-Entitäten, z.

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

Ich versuche, a zu füllen <SelectControl> mit den resultierenden Daten, so dass es keine Möglichkeit gibt, React zu verwenden dangerouslySetInnerHTML Methode, die das Problem der Entitäten lösen würde. Wie kann ich also diese Entitäten loswerden, wenn ich die Optionen ausfülle?

Hier ist der Code, den ich verwende, um die Optionen aus der REST-Antwort auszufüllen:

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

Es ist nicht sofort offensichtlich, aber es gibt tatsächlich eine Methode, die in der Blocks-API zur Verfügung gestellt wird, um dies zu tun.

Geben Sie oben in Ihrem Blockcode Folgendes ein:

const { decodeEntities } = wp.htmlEntities;

Dann kannst du es so verwenden:

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

Panzerfaust! HTML-Entitäten sind weg.

Und warum nicht verwenden rest_prepare_<post_type> filtern?

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