Вопрос или проблема
Когда я сохраняю содержимое <RichText /> в свои атрибуты и хочу использовать это с render_callback в PHP, получается немного запутанно. Как только текст содержит RichText (жирный, курсив, переносы строк и т. д.), $attributes хранит его довольно сложным образом
attributes: {
description: {
type: "text",
// нет источника, так что все идет непосредственно в HTML-комментарий, удобно для динамического рендеринга
}
}
...
"render_callback" => function( $attributes ) {
return "<p>" . $attributes["description"] . "</p>"
}
// var_dump($attributes["description"]
array(3) {
[0]=>
string(24) "Рендеринг RichText с "
[1]=>
array(5) {
["type"]=>
string(6) "strong"
["key"]=>
string(10) "_domReact4"
["ref"]=>
NULL
["props"]=>
array(1) {
["children"]=>
string(3) "php"
}
["_ower"]=>
NULL
}
[2]=>
string(22) "это боль в заднице..."
}
Наверное, есть причина, почему они сохраняют RichText таким образом.
Теперь вопрос:
Как я могу использовать это при динамическом рендеринге?
Есть ли какая-то функция, о которой я не знаю? Например: wp_decode_richtext()
Атрибут в вопросе должен иметь тип “строка”, чтобы он корректно отображался.
attributes: {
description: {
type: "string",
}
}
Ответ или решение
Гутенберг: Динамическое рендеринг RichText
Когда вы сохраняете содержимое компонента <RichText /> в атрибутах и хотите использовать его с использованием render_callback в PHP, ситуация может усложниться, особенно если текст содержит RichText, такой как жирный шрифт, курсив, переносы строк и т.д. Вам может казаться, что данные в $attributes сохраняются не очень удобно.
Проблема
В примере, который вы предоставили, $attributes["description"] хранит данные в следующем формате:
array(3) {
[0] => string(24) "Rendering RichText with "
[1] => array(5) {
["type"] => string(6) "strong"
["key"] => string(10) "_domReact4"
["ref"] => NULL
["props"] => array(1) {
["children"] => string(3) "php"
}
["_ower"] => NULL
}
[2] => string(22) " is a pain in the a..."
}Это представление затрудняет работу с данными, поскольку вы получаете массив, состоящий как из строк, так и из массивов, что не позволяет легко формировать HTML. Основная трудность заключается в том, что RichText сохраняется в виде структуры данных, а не в виде простой строки.
Решение
Чтобы упростить динамическое рендеринг RichText, важно правильно настроить тип атрибута и умело использовать функции WordPress. В первую очередь, атрибут description должен быть объявлен как строка:
attributes: {
description: {
type: "string",
}
}Использование render_callback
Для рендеринга содержимого RichText в PHP, необходимо использовать функцию, которая может обработать структуру данных, которая ваша переменная $attributes представляет. Одна из таких функций — это wp_kses_post(), которая может помочь удалить нежелательный HTML и обеспечить безопасность.
Вот как можно реализовать динамическое рендеринг RichText:
"render_callback" => function( $attributes ) {
if ( isset( $attributes['description'] ) ) {
return wp_kses_post( $attributes['description'] );
}
return '';
}Альтернативные подходы
Если вы хотите полностью вручную реализовать рендеринг RichText из массива, вы также можете использовать функционал JavaScript для преобразования данных в нужную HTML структуру перед передачей их в PHP. Это может быть реализовано с помощью такой функции, как wp_encode_json() для кодирования объектов и использования wp_json_decode() на стороне PHP.
Заключение
Работа с RichText в Gutenberg может показаться сложной из-за сложности структуры данных, в которую он сохраняется. Однако, если вы будете следовать правильным практикам, используя подходящий тип данных для атрибутов и учитывая применения функций безопасности, вы сможете эффективно управлять и рендерить RichText контент в вашем проекте.
Следуя этим рекомендациям, вы сможете избежать распространенных ошибок и упростить процесс рендеринга RichText, что, в свою очередь, повысит качество вашего продукта и удовлетворение пользователей.