Вопрос или проблема
Я тестирую новый API интерактивности и хочу создать блок, который отображает заголовок и содержимое случайного поста.
Вот содержимое файла render.php:
<?php
$block_attributes = get_block_wrapper_attributes()
?>
<div
<?php echo $block_attributes; ?>
data-wp-interactive="mystore"
<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
>
<button data-wp-on--click="actions.getRandomPost">Покажи мне случайный пост</button>
<p data-wp-bind--hidden="!context.isOpen">
<span data-wp-text="context.randomPost.title.rendered"></span>
<div data-wp-text="context.randomPost.content.rendered"></div>
</p>
</div>
Вот содержимое файла view.js:
import { store, getContext } from '@wordpress/interactivity'
store( 'mystore', {
actions: {
*getRandomPost() { // генераторная функция
const context = getContext()
context.isOpen = ! context.isOpen
if ( context.isOpen ) {
const posts = yield fetch(
'http://' + window.location.hostname + '/wp-json/wp/v2/posts'
).then( function( response ){
return response.json()
} )
context.randomPost = posts[ ( Math.floor( Math.random() * posts.length ) ) ]
}
},
}
} )
Проблема в том, что содержимое поста (context.randomPost.content.rendered) отображается как сырой HTML, без правильной интерпретации как форматированный HTML.
Пример:
<p>Привет, мир! Добро пожаловать в <strong>WordPress</strong>. Это ваш первый пост. Отредактируйте или удалите его, а затем начинайте писать!</p>
Существует ли способ отобразить HTML-содержимое с помощью директивы wp-text? Есть ли специальная директива для рендеринга HTML-содержимого?
Ответ или решение
Чтобы отобразить HTML-контент с использованием API интерактивности в вашем проекте на WordPress, необходимо учесть, что директива data-wp-text отображает только текст и интерпретирует его как таковой. Таким образом, HTML-контент будет отображаться как «сырое» HTML, что приводит к проблеме, с которой вы столкнулись.
Для правильного рендеринга HTML-содержимого, вам потребуется использовать директиву data-wp-html, которая позволяет интерпретировать и выводить HTML-код. Это поможет корректно отображать форматированный HTML, получаемый из поля context.randomPost.content.rendered.
Вот как можно изменить ваш исходный код для решения проблемы:
Изменения в render.php
Замените следующую часть кода:
<div data-wp-text="context.randomPost.content.rendered"></div>На:
<div data-wp-html="context.randomPost.content.rendered"></div>В итоге ваш файл render.php будет выглядеть следующим образом:
<?php
$block_attributes = get_block_wrapper_attributes();
?>
<div
<?php echo $block_attributes; ?>
data-wp-interactive="mystore"
<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
>
<button data-wp-on--click="actions.getRandomPost">Show me a random post</button>
<p data-wp-bind--hidden="!context.isOpen">
<span data-wp-text="context.randomPost.title.rendered"></span>
<div data-wp-html="context.randomPost.content.rendered"></div>
</p>
</div>Пояснение к изменениям
- Использование
data-wp-html: Эта директива позволит корректно вывести HTML-контент, извлекаемый из API, что решит вашу проблему с отображением «сырых» HTML-тегов.
Дополнительные рекомендации
-
Убедитесь, что данные, возвращаемые вашим API, безопасны для отображения, особенно если они поступают от пользователей. Использование
wp_kses_post()или аналогичных функций для фильтрации данных перед выводом может помочь предотвратить XSS-уязвимости. -
Если вы используете кэширование в вашем приложении, имейте в виду, что изменения могут не отображаться сразу, поэтому обязательно очищайте кэш после внесения изменений.
С этими изменениями ваш блок теперь будет корректно отображать как заголовки, так и содержимое постов в нужном формате.