Как создать автоматический отзыв на блоке Gutenberg в WordPress

Современные сайты на WordPress все чаще используют редактор Gutenberg для создания более гибкого и удобного контента. Одной из популярных задач является отображение отзывов пользователей в удобном виде прямо на страницах и статьях. В этой статье мы подробно разберем, как создать собственный блок Gutenberg, который будет автоматически подгружать отзывы из базы данных и отображать их на сайте. Это позволит избежать ручного добавления отзывов и сделает процесс управления ими проще.

Почему стоит использовать собственный блок Gutenberg для отзывов

Использование собственного блока Gutenberg для отзывов имеет несколько преимуществ:

• Удобство для редакторов: отзывы добавляются и обновляются централизованно, а блок автоматически отображает актуальную информацию.
• Гибкость оформления: вы можете задать свой стиль отображения отзывов, сделать их интерактивными и адаптивными.
• Автоматизация: не нужно вручную вставлять каждый отзыв в контент — блок подтягивает данные из базы или внешнего источника.

Для реализации этого подойдут как собственные решения на PHP и JavaScript, так и готовые плагины, которые можно расширить под свои нужды.

Создание собственного блока Gutenberg с автоматическим выводом отзывов

Начнем с простого примера создания блока, который выводит последние 3 опубликованных пользовательских отзывов из кастомного типа записи review.

Регистрация кастомного типа записи Review

Для хранения отзывов создадим тип записи. Добавьте следующий код в файл functions.php вашей темы или в плагин:

function wpnote_register_review_post_type() {
    $labels = array(
        'name' => 'Отзывы',
        'singular_name' => 'Отзыв',
        'add_new' => 'Добавить отзыв',
        'add_new_item' => 'Добавить новый отзыв',
        'edit_item' => 'Редактировать отзыв',
        'new_item' => 'Новый отзыв',
        'view_item' => 'Просмотреть отзыв',
        'search_items' => 'Поиск отзывов',
        'not_found' => 'Отзывы не найдены',
        'not_found_in_trash' => 'В корзине отзывов не найдено',
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'author'),
        'show_in_rest' => true, // обязательно для Gutenberg
    );

    register_post_type('review', $args);
}
add_action('init', 'wpnote_register_review_post_type');

Теперь в админке появится раздел "Отзывы", где можно добавлять новые записи с отзывами.

Создание блока Gutenberg на React

Для создания блока используем JavaScript с React. Можно создать плагин, который зарегистрирует блок. В файле block.js напишем следующий код:

const { registerBlockType } = wp.blocks;
const { useSelect } = wp.data;
const { ServerSideRender } = wp.components;

registerBlockType('wpnote/reviews-block', {
    title: 'Автоматические отзывы',
    icon: 'format-quote',
    category: 'widgets',

    edit() {
        return (
            <ServerSideRender
                block="wpnote/reviews-block"
            />
        );
    },

    save() {
        // Блок рендерится на сервере
        return null;
    }
});

Используем компонент ServerSideRender, чтобы получать HTML с сервера и не дублировать логику рендеринга на клиенте.

Рендеринг блока на сервере (PHP)

В PHP-части нашего плагина добавим функцию, которая будет выводить последние отзывы:

function wpnote_render_reviews_block($attributes) {
    $args = array(
        'post_type' => 'review',
        'posts_per_page' => 3,
        'post_status' => 'publish',
        'orderby' => 'date',
        'order' => 'DESC',
    );

    $query = new WP_Query($args);

    if (!$query->have_posts()) {
        return '<p>Отзывы пока отсутствуют.</p>';
    }

    $output = '<div class="wpnote-reviews-block">';

    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<div class="review-item">';
        $output .= '<h4>' . get_the_title() . '</h4>';
        $output .= '<div class="review-content">' . get_the_content() . '</div>';
        $output .= '</div>';
    }

    wp_reset_postdata();

    $output .= '</div>';

    return $output;
}

register_block_type('wpnote/reviews-block', array(
    'render_callback' => 'wpnote_render_reviews_block',
));

Теперь при добавлении блока на страницу автоматически будут выводиться последние отзывы.

Расширение функционала: фильтрация и стилизация отзывов

Чтобы блок был более полезным, можно добавить в него параметры — например, выбор количества отзывов, фильтрацию по рейтингу или категории. Это делается через атрибуты блока и добавление форм в редактор.

Также важно стилизовать отзывы, чтобы они гармонично вписывались в дизайн сайта. Добавьте CSS для класса wpnote-reviews-block и вложенных элементов:

.wpnote-reviews-block {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 6px;
}

.review-item {
    margin-bottom: 15px;
}

.review-item h4 {
    margin-bottom: 5px;
    font-weight: 600;
}

.review-content {
    font-style: italic;
    color: #555;
}

Если нужно добавить рейтинг, можно использовать метаполя для отзывов и вывести звездочки с помощью иконок или Unicode.

Примеры плагинов для отзывов и интеграция с Gutenberg

Если хочется использовать готовые решения, рекомендуем обратить внимание на плагины:

• WPRemark — мощный плагин для управления отзывами с поддержкой шорткодов и Gutenberg-блоков.
• WP Customer Reviews — бесплатный плагин с базовым функционалом и возможностью интеграции через шорткоды в блоки.
• Strong Testimonials — удобный плагин с визуальным конструктором и поддержкой Gutenberg.

WPRemark, например, позволяет автоматически собирать отзывы и выводить их через собственный блок или шорткод. Это удобно для сайтов, которые хотят быстро запустить отзывы без глубоких технических настроек.

Выводы и рекомендации по автоматическому отображению отзывов в Gutenberg

Создание собственного блока Gutenberg для автоматического вывода отзывов — это отличный способ централизовать и упростить работу с отзывами на сайте. Начать можно с кастомного типа записи и базового блока с серверным рендерингом. По мере необходимости можно расширять функционал, добавлять фильтры и стили.

Если не хочется писать код, стоит рассмотреть плагины, например, WPRemark, который интегрируется с Gutenberg и позволяет гибко управлять отзывами.