Расширение блока Query Loop в WordPress: Создание вариаций для кастомных запросов

Блок Query Loop в WordPress представляет собой мощный инструмент, позволяющий создавать и отображать списки публикаций на основе заданных параметров. Например, он может циклически отображать записи определённой категории и для каждой из них выводить картинку-заглавие. В данной статье мы рассмотри: Расширение блока Query Loop в WordPress.

Благодаря гибкости и возможностям кастомизации, этот блок также может быть немного сложен для пользователей, не знакомых с понятием «запроса». Чтобы упростить работу с Query Loop, мы можем создать собственные вариации блока с предустановленными настройками и ограничениями, адаптированными под конкретные нужды, такие как кастомные типы записей.

Основные этапы расширения блока Query Loop

Для создания уникальной вариации блока Query Loop и настройки его для специфических нужд, мы пройдем через несколько ключевых этапов:

1. Создание вариации блока — настройка начальных значений и параметров, чтобы блок работал с нужным набором данных, например, с кастомным типом записей.
2. Настройка интерфейса — отключение ненужных элементов управления, добавление новых кастомных настроек и изменение внешнего вида, чтобы пользователям было проще использовать блок.
3. Обработка запроса — адаптация запроса для корректного отображения результатов на стороне фронтенда, а также создание предзагрузки данных для отображения в редакторе WordPress.

Создание кастомной вариации блока Query Loop

Одним из эффективных способов улучшения пользовательского опыта при работе с блоком Query Loop является создание кастомных вариаций. Такие вариации позволяют автоматически задавать начальные настройки блока, избавляя пользователя от необходимости вручную выбирать нужные параметры. К примеру, можно создать вариацию для отображения только записей конкретной категории, постов определённого типа (custom post type) или сортировки по заданным правилам.

Создание новой вариации блока

Для создания кастомной вариации блока мы воспользуемся функцией wp.blocks.registerBlockVariation. Эта функция позволяет зарегистрировать новую вариацию с необходимыми параметрами. Ниже приведён пример создания вариации блока Query Loop, которая будет отображать только записи из категории «Новости».

wp.blocks.registerBlockVariation(
    'core/query', // Блок, для которого создаётся вариация
    {
        name: 'news-query-loop', // Уникальное имя вариации
        title: 'Новости', // Заголовок вариации
        description: 'Отображение последних новостей.',
        isDefault: false, // Не делаем вариацию основной
        attributes: {
            query: {
                // Настройка запроса для отображения записей категории "Новости"
                postType: 'post',
                categories: [12], // ID категории "Новости"
                order: 'desc',
                orderBy: 'date',
                perPage: 5, // Количество записей на странице
                newsAuthor: 'Genius' // Наш персональный параметр
            },
        },
        icon: 'megaphone', // Иконка для отображения в редакторе
        scope: ['inserter'], // Доступность вариации в библиотеке блоков
    }
);

Разбор кода:

• name — уникальное имя вариации. Оно необходимо для идентификации данной вариации среди прочих.
• title — заголовок, который будет отображаться в редакторе для выбора вариации. Это помогает пользователям быстро понять, для чего создана вариация.
• description — краткое описание, показывающее, что конкретно отображает вариация.
• attributes — ключевые настройки, определяющие, какие данные будут отображаться при вставке блока. В данном примере указано, что будут показаны записи типа post, относящиеся к категории с ID 12, отсортированные по дате в порядке убывания.
• icon — иконка для наглядного отображения вариации в библиотеке блоков.
• scope — область видимости вариации. Параметр inserter позволяет отображать вариацию в блоке поиска и выбора.

Подбор нужных значений для кастомного запроса

Вы можете менять значения в attributes.query, чтобы достичь нужного вам результата:

• postType — указывает тип записей, которые должны отображаться. Например, если вы хотите отобразить кастомные записи типа portfolio, замените post на portfolio.
• categories — массив с ID категорий, которые следует показывать. Чтобы узнать ID нужной категории, можно посмотреть её в панели администратора WordPress.
• order и orderBy — параметры сортировки записей. order может принимать значения asc (по возрастанию) или desc (по убыванию), а orderBy позволяет сортировать записи по date (дате), title (названию) или другим параметрам.
• perPage — определяет количество записей, выводимых на одной странице.
• newsAuthor — наш кастомный параметр.

Результат в редакторе

После регистрации вариации блок Query Loop с настройками для категории «Новости» будет отображаться в библиотеке блоков с заданным заголовком и описанием. Пользователь сможет просто выбрать данную вариацию и вставить блок с уже настроенными параметрами, что упрощает процесс создания и не требует ручной настройки.

Добавление пользовательских атрибутов для гибкой настройки

Теперь, когда у нас есть базовая кастомная вариация блока Query Loop, мы можем расширить её, добавив поддержку дополнительных атрибутов. Это позволит пользователям изменять параметры запроса, такие как количество записей на странице, категорию и порядок сортировки, не изменяя код.

Добавление кастомных атрибутов

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

1. Откроем файл JavaScript, где мы регистрировали вариацию блока Query Loop.
2. Определим дополнительные атрибуты для настройки блока через панель управления в редакторе.

Пример кода ниже демонстрирует добавление атрибутов для изменения количества записей, сортировки и категории.

wp.blocks.registerBlockVariation(
    'core/query', 
    {
        name: 'news-query-loop-flexible',
        title: 'Новости (гибкая настройка)',
        description: 'Отображение новостей с гибкой настройкой параметров.',
        attributes: {
            query: {
                postType: 'post',
                categories: [], // Оставляем пустым для выбора пользователем
                order: 'desc',
                orderBy: 'date',
                perPage: 5,
            },
            customSettings: {
                enableCategorySelect: true, // Включить выбор категории
                enableSortOrder: true, // Включить выбор порядка сортировки
                enablePostLimit: true, // Включить выбор количества записей
            },
        },
        icon: 'settings',
        scope: ['inserter'],
    }
);

Настройка отображения атрибутов в панели управления

Теперь добавим интерфейсные элементы в редакторе, чтобы пользователь мог изменить значения этих параметров. Для этого воспользуемся JavaScript API WordPress для настройки панелей блоков.

const { InspectorControls } = wp.blockEditor;
const { PanelBody, ToggleControl, RangeControl, SelectControl } = wp.components;
const { Fragment } = wp.element;

wp.hooks.addFilter(
    'editor.BlockEdit',
    'my-plugin/news-query-loop-flexible',
    (BlockEdit) => (props) => {
        if (props.name !== 'core/query') {
            return <BlockEdit {...props} />;
        }

        const { attributes, setAttributes } = props;

        return (
            <Fragment>
                <BlockEdit {...props} />
                {attributes.customSettings && (
                    <InspectorControls>
                        <PanelBody title="Настройки отображения">
                            {attributes.customSettings.enableCategorySelect && (
                                <SelectControl
                                    label="Категория"
                                    value={attributes.query.categories[0] || ''}
                                    options={[
                                        { label: 'Все', value: '' },
                                        { label: 'Новости', value: '12' },
                                        { label: 'События', value: '15' },
                                    ]}
                                    onChange={(newCategory) => setAttributes({
                                        query: { ...attributes.query, categories: [parseInt(newCategory)] },
                                    })}
                                />
                            )}
                            {attributes.customSettings.enableSortOrder && (
                                <SelectControl
                                    label="Порядок сортировки"
                                    value={attributes.query.order}
                                    options={[
                                        { label: 'По убыванию', value: 'desc' },
                                        { label: 'По возрастанию', value: 'asc' },
                                    ]}
                                    onChange={(newOrder) => setAttributes({
                                        query: { ...attributes.query, order: newOrder },
                                    })}
                                />
                            )}
                            {attributes.customSettings.enablePostLimit && (
                                <RangeControl
                                    label="Количество записей на странице"
                                    value={attributes.query.perPage}
                                    onChange={(newPerPage) => setAttributes({
                                        query: { ...attributes.query, perPage: newPerPage },
                                    })}
                                    min={1}
                                    max={20}
                                />
                            )}
                        </PanelBody>
                    </InspectorControls>
                )}
            </Fragment>
        );
    }
);

Объяснение кода:

• InspectorControls — панель управления, добавляемая в интерфейс редактора блока, которая позволяет настраивать параметры блока.
• PanelBody — обёртка для элементов управления, сгруппированных под одной темой.
• ToggleControl, RangeControl, SelectControl — различные элементы управления, позволяющие выбрать категорию, задать порядок сортировки и ограничить количество записей.
• enableCategorySelect, enableSortOrder, enablePostLimit — пользовательские атрибуты, которые позволяют включить или отключить элементы управления в панели редактора.

Результат: настраиваемый блок Query Loop

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

Создание пользовательских стилей для кастомной вариации блока Query Loop

Добавление уникальных стилей для кастомной вариации блока Query Loop позволит визуально выделить блок и улучшить его восприятие на сайте. В этой части статьи мы рассмотрим, как добавить пользовательские CSS-стили для новой вариации и подключить их в редакторе, чтобы пользователь мог увидеть изменения прямо при редактировании блока.

1. Добавление CSS-стилей для кастомной вариации

Для начала создадим отдельный CSS-файл, в котором пропишем стили для нашей вариации блока. Например, мы можем создать файл query-loop-custom-style.css в папке вашего плагина или темы.

Вот пример CSS-стилей для блока:

/* query-loop-custom-style.css */
.wp-block-query-loop.news-query-loop-flexible {
    background-color: #f4f4f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.wp-block-query-loop.news-query-loop-flexible h2 {
    color: #333;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.wp-block-query-loop.news-query-loop-flexible .wp-block-post {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
}

.wp-block-query-loop.news-query-loop-flexible .wp-block-post:last-child {
    border-bottom: none;
}

.wp-block-query-loop.news-query-loop-flexible .wp-block-post img {
    max-width: 120px;
    border-radius: 4px;
    margin-right: 20px;
}

.wp-block-query-loop.news-query-loop-flexible .wp-block-post-title {
    font-weight: bold;
    color: #1a73e8;
}

.wp-block-query-loop.news-query-loop-flexible .wp-block-post-date {
    color: #999;
    font-size: 0.9em;
    margin-top: 5px;
}

Описание стилей:

• Фон и отступы: Для всей обёртки блока установлен светло-серый фон, отступы и рамка для создания визуального блока.
• Заголовок постов: Размер и цвет заголовков увеличены для улучшенной читаемости.
• Стилизация изображений: Картинки постов ограничены в размере и расположены с отступом справа для удобного представления.
• Дата публикации: Добавлен менее яркий цвет и уменьшен шрифт, чтобы не отвлекать внимание от основного контента.

2. Подключение CSS-стилей к редактору и фронтенду

Чтобы применить стили в редакторе и на фронтенде, подключим файл стилей в плагине или теме.

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

function enqueue_custom_query_loop_styles() {
    // Подключение стилей для фронтенда
    wp_enqueue_style(
        'query-loop-custom-style',
        plugin_dir_url(__FILE__) . 'query-loop-custom-style.css',
        array(),
        '1.0'
    );

    // Подключение стилей для редактора
    wp_enqueue_style(
        'query-loop-custom-style-editor',
        plugin_dir_url(__FILE__) . 'query-loop-custom-style.css',
        array(),
        '1.0'
    );
}
add_action('enqueue_block_assets', 'enqueue_custom_query_loop_styles');

Примечание: Путь к файлу query-loop-custom-style.css должен быть корректным в зависимости от структуры вашей темы или плагина.

3. Применение стиля к кастомной вариации блока

Теперь мы добавим класс к кастомной вариации блока Query Loop, чтобы применить стили только к ней. Обновим регистрацию вариации, добавив className:

wp.blocks.registerBlockVariation(
    'core/query', 
    {
        name: 'news-query-loop-flexible',
        title: 'Новости (гибкая настройка)',
        description: 'Отображение новостей с гибкой настройкой параметров.',
        attributes: {
            query: {
                postType: 'post',
                categories: [],
                order: 'desc',
                orderBy: 'date',
                perPage: 5,
            },
            className: 'news-query-loop-flexible', // Добавленный класс
        },
        icon: 'settings',
        scope: ['inserter'],
    }
);

Этот код добавляет класс news-query-loop-flexible к блоку, когда он создается. Это позволит CSS-стилям применяться только к кастомной вариации, не затрагивая другие блоки Query Loop на сайте.

Результат: уникальное отображение и стилизация кастомной вариации Query Loop

Теперь кастомная вариация Query Loop будет отображаться с уникальными стилями как в редакторе, так и на сайте. Благодаря добавлению стилей, блок выглядит более профессионально и подходит для использования в различных разделах сайта, таких как новостные ленты или блоги.

Расширенная настройка кастомной вариации Query Loop с помощью JavaScript

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

В данной части мы рассмотрим, как добавить кастомные настройки, такие как выбор количества отображаемых записей и фильтрация по категориям, прямо в боковой панели редактора блоков.

1. Создание пользовательских настроек для блока Query Loop

Чтобы добавить параметры для настройки блока, используем JavaScript-функции WordPress, такие как InspectorControls и PanelBody. Эти элементы позволяют отображать дополнительные панели настроек в редакторе.

Добавьте следующий код в JavaScript-файл плагина или темы:

const { registerPlugin } = wp.plugins;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, RangeControl, SelectControl } = wp.components;
const { withSelect } = wp.data;

const CustomQueryLoopControls = (props) => {
    const { attributes, setAttributes } = props;

    return (
        <InspectorControls>
            <PanelBody title="Настройки кастомной вариации">
                <RangeControl
                    label="Количество записей"
                    value={attributes.query.perPage}
                    onChange={(value) => setAttributes({ query: { ...attributes.query, perPage: value } })}
                    min={1}
                    max={20}
                />
                <SelectControl
                    label="Категория"
                    value={attributes.query.categories[0] || ''}
                    options={props.categories.map((category) => ({
                        label: category.name,
                        value: category.id,
                    }))}
                    onChange={(value) => setAttributes({ query: { ...attributes.query, categories: [parseInt(value)] } })}
                />
            </PanelBody>
        </InspectorControls>
    );
};

registerPlugin('custom-query-loop-controls', {
    icon: 'admin-settings',
    render: withSelect((select) => ({
        categories: select('core').getEntityRecords('taxonomy', 'category', { per_page: -1 }) || [],
    }))(CustomQueryLoopControls),
});

Описание кода:

• Количество записей: Компонент RangeControl позволяет пользователю выбрать количество отображаемых записей в диапазоне от 1 до 20.
• Категория: Компонент SelectControl загружает доступные категории и отображает их в выпадающем списке. Пользователь может выбрать категорию, и блок автоматически обновит результаты в соответствии с выбранной категорией.

2. Подключение пользовательских настроек к кастомной вариации блока

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

Добавьте в компонент CustomQueryLoopControls проверку:

if (props.name !== 'core/query' || attributes.className !== 'news-query-loop-flexible') {
    return null;
}

Этот фрагмент гарантирует, что пользовательские настройки будут добавлены только к блокам Query Loop с классом news-query-loop-flexible.

Итог: мощный и настраиваемый Query Loop для динамического контента

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

Добавление Кастомного Шаблона Отображения Контента

Чтобы кастомная вариация блока Query Loop полностью соответствовала требованиям, можно создать уникальный шаблон для отображения контента. Это поможет показать записи именно так, как вам нужно, применяя специфичные HTML-структуры и CSS-оформление. В WordPress блок Query Loop поддерживает шаблоны, которые позволяют задавать пользовательские элементы для каждой записи.

1. Определение Кастомного Шаблона

В WordPress можно добавить шаблон для блока Query Loop, который будет включать уникальные HTML-элементы, такие как изображения, заголовки и мета-информацию. Этот шаблон можно задать с помощью атрибута template в блоке query.

Пример шаблона в PHP:

add_action('init', function() {
    register_block_pattern('mytheme/query-loop-template', [
        'title'       => 'Кастомный шаблон Query Loop',
        'content'     => '<!-- wp:query {"queryId":1,"query":{"perPage":5,"postType":"post","order":"desc","orderBy":"date"},"displayLayout":{"type":"flex","columns":2}} -->
                            <div class="wp-block-query">
                                <!-- wp:post-template -->
                                    <div class="query-item">
                                        <!-- wp:post-featured-image {"sizeSlug":"large"} /-->
                                        <!-- wp:post-title {"isLink":true} /-->
                                        <!-- wp:post-excerpt {"moreText":"Читать далее"} /-->
                                        <!-- wp:post-date /-->
                                    </div>
                                <!-- /wp:post-template -->
                            </div>
                        <!-- /wp:query -->',
    ]);
});

Описание шаблона:

• Изображение записи: Используем блок post-featured-image, чтобы отобразить изображение записи.
• Заголовок записи: Блок post-title отображает заголовок каждой записи, делая его кликабельным.
• Отрывок записи: Блок post-excerpt выводит короткое описание записи с кнопкой «Читать далее».
• Дата публикации: Блок post-date выводит дату публикации записи.

Этот шаблон будет использоваться для блоков Query Loop, имеющих название или ID mytheme/query-loop-template, и может быть применен в нашем кастомном блоке.

2. Применение кастомного шаблона в редакторе блока

После создания шаблона его можно назначить конкретному блоку или вариации Query Loop. Это позволяет пользователям выбирать между стандартным и кастомным вариантом отображения записей в редакторе.

В JavaScript можно назначить шаблон для вариации:

wp.blocks.registerBlockVariation('core/query', {
    name: 'news-query-loop-template',
    title: 'Шаблон Новостной Ленты',
    description: 'Отображает записи в стиле новостной ленты с уникальным оформлением.',
    icon: 'media-document',
    attributes: {
        className: 'news-query-loop-template',
        query: { perPage: 5, orderBy: 'date', order: 'desc' },
        displayLayout: { type: 'flex', columns: 2 },
    },
    innerBlocks: [
        ['core/post-featured-image', { sizeSlug: 'large' }],
        ['core/post-title', { isLink: true }],
        ['core/post-excerpt', { moreText: 'Читать далее' }],
        ['core/post-date']
    ]
});

Описание:

• innerBlocks: Включает вложенные блоки, которые будут применяться внутри post-template, определяя, как будет выглядеть каждая отдельная запись.
• displayLayout: Используем атрибут flex с двумя колонками, чтобы отобразить записи в формате сетки.

3. Дополнительная Стилизация Шаблона через CSS

Чтобы улучшить внешний вид кастомного шаблона, можно добавить CSS-стили, которые определят оформление шаблона. Добавьте стили в ваш CSS-файл для темы или плагина:

.news-query-loop-template .query-item {
    border: 1px solid #ddd;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.news-query-loop-template .query-item .wp-block-post-title {
    font-size: 1.5em;
    margin: 10px 0;
    color: #333;
}

.news-query-loop-template .query-item .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.news-query-loop-template .query-item .wp-block-post-excerpt {
    color: #555;
}

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

Настройка пользовательского запроса на стороне фронтенда

После создания кастомной вариации блока Query Loop и настройки её параметров, необходимо обеспечить корректную работу пользовательского запроса как на фронтенде сайта, так и в редакторе. В этой части мы рассмотрим, как настроить запросы на стороне фронтенда, чтобы блок отображал нужный контент согласно заданным параметрам.

1. Понимание механизма работы Query Loop на фронтенде

Блок Query Loop использует внутренние компоненты WordPress для формирования и выполнения запросов к базе данных. На фронтенде блок взаимодействует с REST API WordPress для получения и отображения нужных записей. Поэтому для корректной работы кастомных параметров запроса необходимо убедиться, что они поддерживаются REST API или обработаны специальными фильтрами.

2. Использование фильтра query_loop_block_query_vars

WordPress предоставляет фильтр query_loop_block_query_vars, который позволяет изменять параметры запроса перед его выполнением. Это особенно полезно, когда требуется добавить или изменить параметры запроса для конкретной вариации блока.

Пример использования фильтра:

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

function my_plugin_modify_query_vars( $query_vars, $block ) {
    // Проверяем, что это наша кастомная вариация блока Query Loop
    if ( isset( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'news-query-loop-flexible' ) !== false ) {
        // Добавляем или изменяем параметры запроса
        if ( isset( $block['attrs']['query']['newsAuthor'] ) ) {
            $query_vars['meta_query'] = array(
                array(
                    'key'     => 'newsAuthor',
                    'value'   => sanitize_text_field( $block['attrs']['query']['newsAuthor'] ),
                    'compare' => 'LIKE',
                ),
            );
        }
    }
    return $query_vars;
}
add_filter( 'query_loop_block_query_vars', 'my_plugin_modify_query_vars', 10, 2 );

Объяснение кода:

• Проверка вариации блока: Убедитесь, что фильтр применяется только к вашей кастомной вариации блока Query Loop, проверяя наличие определённого класса в атрибутах блока.
• Добавление meta_query: Если задано кастомное поле newsAuthor, добавляем соответствующий meta_query для фильтрации записей по этому полю.
• Санитизация данных: Используем функцию sanitize_text_field для очистки пользовательских данных перед использованием в запросе, что повышает безопасность.

3. Обработка пользовательских параметров в REST API

Если ваши кастомные параметры запроса не поддерживаются по умолчанию REST API WordPress, необходимо добавить их обработку с помощью специальных фильтров. Например, если вы используете кастомное поле newsAuthor, добавьте следующий код:

function my_plugin_rest_news_query( $args, $request ) {
    if ( isset( $request['newsAuthor'] ) ) {
        $args['meta_query'] = array(
            array(
                'key'     => 'newsAuthor',
                'value'   => sanitize_text_field( $request['newsAuthor'] ),
                'compare' => 'LIKE',
            ),
        );
    }
    return $args;
}
add_filter( 'rest_news_query', 'my_plugin_rest_news_query', 10, 2 );

Объяснение кода:

• Проверка параметра: Проверяем, установлен ли параметр newsAuthor в запросе.
• Добавление meta_query: Добавляем meta_query для фильтрации записей по значению поля newsAuthor.
• Санитизация данных: Очищаем пользовательский ввод для предотвращения возможных уязвимостей.

Настройка пользовательского запроса в редакторе

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

1. Подключение пользовательских параметров к редактору

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

Пример кода для обновления параметров в редакторе:

const { registerPlugin } = wp.plugins;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, RangeControl, SelectControl } = wp.components;
const { withSelect, withDispatch } = wp.data;
const { compose } = wp.compose;
const { Fragment } = wp.element;

const CustomQueryLoopEditor = (props) => {
    const { attributes, setAttributes, categories } = props;

    if ( ! attributes.className.includes('news-query-loop-flexible') ) {
        return <BlockEdit {...props} />;
    }

    return (
        <Fragment>
            <BlockEdit {...props} />
            <InspectorControls>
                <PanelBody title="Дополнительные настройки">
                    <RangeControl
                        label="Количество записей"
                        value={ attributes.query.perPage }
                        onChange={(value) => setAttributes({ 
                            query: { ...attributes.query, perPage: value } 
                        })}
                        min={1}
                        max={20}
                    />
                    <SelectControl
                        label="Категория"
                        value={ attributes.query.categories[0] || '' }
                        options={ [
                            { label: 'Все', value: '' },
                            ...categories.map( (category) => ({
                                label: category.name,
                                value: category.id,
                            })),
                        ] }
                        onChange={(value) => setAttributes({ 
                            query: { ...attributes.query, categories: [ parseInt(value) ] } 
                        })}
                    />
                </PanelBody>
            </InspectorControls>
        </Fragment>
    );
};

const EnhancedCustomQueryLoopEditor = compose(
    withSelect( ( select ) => {
        return {
            categories: select('core').getEntityRecords('taxonomy', 'category', { per_page: -1 }) || [],
        };
    }),
    withDispatch( ( dispatch ) => {
        return {};
    })
)( CustomQueryLoopEditor );

registerPlugin('custom-query-loop-editor', {
    render: EnhancedCustomQueryLoopEditor,
});

Объяснение кода:

• Проверка класса блока: Убедитесь, что дополнительные настройки применяются только к вашей кастомной вариации блока.
• InspectorControls: Добавляет дополнительные панели настроек в боковую панель редактора.
• RangeControl и SelectControl: Позволяют пользователю изменять количество отображаемых записей и выбирать категории непосредственно в редакторе.
• withSelect: Используется для получения списка категорий из REST API WordPress и передачи их в компонент для отображения в выпадающем списке.

2. Обеспечение предварительного просмотра записей в редакторе

Для того чтобы изменения параметров блока отображались в редакторе без необходимости обновлять страницу, необходимо обеспечить динамическое обновление содержимого блока при изменении настроек.

Пример реализации:

import { useSelect } from '@wordpress/data';
import { QueryLoop, PostTemplate, PostTitle, PostExcerpt, PostDate, QueryPagination, QueryNoResults } from '@wordpress/block-library';

const CustomQueryLoopPreview = (props) => {
    const { attributes } = props;
    const posts = useSelect( ( select ) => {
        return select('core').getEntityRecords('postType', 'post', {
            per_page: attributes.query.perPage,
            order: attributes.query.order,
            orderby: attributes.query.orderBy,
            categories: attributes.query.categories[0] || undefined,
        });
    }, [ attributes.query ]);

    if ( ! posts ) {
        return <p>Загрузка...</p>;
    }

    if ( posts.length === 0 ) {
        return <QueryNoResults />;
    }

    return (
        <QueryLoop { ...props }>
            <PostTemplate>
                <PostFeaturedImage sizeSlug="large" />
                <PostTitle isLink={ true } />
                <PostExcerpt moreText="Читать далее" />
                <PostDate />
            </PostTemplate>
            <QueryPagination />
        </QueryLoop>
    );
};

// Зарегистрировать предварительный просмотр блока
wp.blocks.registerBlockType('core/query', {
    // Остальные параметры блока
    edit: (props) => <CustomQueryLoopPreview { ...props } />,
});

Объяснение кода:

• useSelect: Хук для получения данных из REST API WordPress в режиме реального времени.
• QueryLoop и вложенные блоки: Используются для отображения записей в соответствии с заданными параметрами.
• Предварительный просмотр: Обеспечивает отображение реальных записей в редакторе, что позволяет пользователю видеть результат своих настроек немедленно.

3. Обработка пользовательских параметров в редакторе

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

Пример кода:

function my_plugin_register_rest_fields() {
    register_rest_field( 'post', 'newsAuthor', array(
        'get_callback'    => 'my_plugin_get_news_author',
        'update_callback' => 'my_plugin_update_news_author',
        'schema'          => array(
            'type'        => 'string',
            'description' => 'Author of the news',
            'context'     => array( 'view', 'edit' ),
        ),
    ) );
}
add_action( 'rest_api_init', 'my_plugin_register_rest_fields' );

function my_plugin_get_news_author( $object, $field_name, $request ) {
    return get_post_meta( $object['id'], 'newsAuthor', true );
}

function my_plugin_update_news_author( $value, $object, $field_name ) {
    if ( ! $value || ! is_string( $value ) ) {
        return;
    }
    return update_post_meta( $object->ID, 'newsAuthor', sanitize_text_field( $value ) );
}

Объяснение кода:

• register_rest_field: Регистрирует дополнительное поле newsAuthor для записей типа post в REST API.
• get_callback и update_callback: Определяют функции для получения и обновления значения поля.
• Схема: Описывает тип и контекст поля, что позволяет правильно обрабатывать его в редакторе.

Сравнение методов расширения блока Query Loop

При расширении блока Query Loop в WordPress разработчики могут использовать различные методы и подходы. В этой части мы сравним основные методы расширения блока и рассмотрим их преимущества и недостатки.

1. Использование вариаций блока (registerBlockVariation)

Преимущества:

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

Недостатки:

• Ограниченная гибкость: Вариации подходят для определённых сценариев и могут не покрывать все возможные потребности.
• Трудности с масштабированием: При большом количестве вариаций может возникнуть путаница и сложность в управлении ими.

2. Создание кастомных блоков

Преимущества:

• Максимальная гибкость: Возможность создавать полностью кастомные блоки с уникальным функционалом и дизайном.
• Интеграция с другими плагинами: Лёгкая интеграция с дополнительными плагинами и расширениями.
• Контроль над процессом: Полный контроль над структурой, стилями и поведением блока.

Недостатки:

• Сложность реализации: Требует глубоких знаний WordPress и JavaScript, что может затруднить процесс разработки.
• Повышенные требования к поддержке: Необходимо самостоятельно поддерживать и обновлять кастомные блоки.
• Риск конфликтов: Возможны конфликты с другими блоками или плагинами, особенно при использовании общих ресурсов.

3. Использование паттернов блоков (registerBlockPattern)

Преимущества:

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

Недостатки:

• Ограниченная динамичность: Паттерны статичны и не всегда подходят для динамического контента.
• Необходимость поддержки: Требуется обновлять паттерны при изменении структуры или функционала блоков.

4. Комбинирование методов

На практике часто используется комбинация различных методов для достижения наилучших результатов. Например, можно создать вариации блока Query Loop для часто используемых сценариев и дополнительно разработать кастомные блоки для более специфичных задач.

Преимущества:

• Оптимальное использование ресурсов: Позволяет использовать сильные стороны каждого метода.
• Универсальность: Возможность охватить широкий спектр потребностей пользователей.
• Повышенная производительность: Позволяет быстро реализовать стандартные функции и гибко настраивать уникальные требования.

Недостатки:

• Необходимость знаний: Требует опыта работы с различными методами разработки блоков в WordPress.
• Сложность управления: Требует внимательного планирования и организации кода.

Оптимизация кода и производительности

При создании кастомных вариаций блока Query Loop важно учитывать производительность и оптимизацию кода, чтобы обеспечить быструю загрузку страниц и минимизировать нагрузку на сервер. В этой части мы рассмотрим несколько методов оптимизации.

1. Минимизация количества запросов к базе данных

• Используйте кэширование: Включите кэширование запросов с помощью плагинов, таких как WP Super Cache или W3 Total Cache. Это позволит хранить результаты запросов и уменьшить количество обращений к базе данных.
• Оптимизируйте запросы: Избегайте избыточных параметров в запросах и используйте только необходимые мета-поля и таксономии. Это снизит нагрузку на сервер и ускорит выполнение запросов.

2. Оптимизация работы с REST API

• Уменьшите объем данных: Ограничьте количество возвращаемых полей через REST API, чтобы передавать только необходимую информацию.
• Используйте транзиентные API: Сохраняйте результаты сложных запросов в транзиентах для быстрого доступа без повторного выполнения запросов.

Пример использования транзиентного API:

function my_plugin_modify_query_vars( $query_vars, $block ) {
    if ( isset( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'news-query-loop-flexible' ) !== false ) {
        $transient_key = 'custom_query_' . md5( serialize( $query_vars ) );
        $cached_query = get_transient( $transient_key );

        if ( false === $cached_query ) {
            // Выполняем запрос и сохраняем результат в транзиент
            $cached_query = new WP_Query( $query_vars );
            set_transient( $transient_key, $cached_query, HOUR_IN_SECONDS );
        }

        return $cached_query->query_vars;
    }
    return $query_vars;
}
add_filter( 'query_loop_block_query_vars', 'my_plugin_modify_query_vars', 10, 2 );

Объяснение кода:

• Создание уникального ключа транзиента: Используем md5 для генерации уникального ключа на основе параметров запроса.
• Проверка наличия транзиента: Если результат запроса уже сохранён в транзиенте, используем его вместо выполнения нового запроса.
• Сохранение результата запроса: Если транзиент не найден, выполняем запрос и сохраняем его результат в транзиент на один час.

3. Минификация и объединение CSS и JavaScript файлов

• Минифицируйте CSS и JS: Используйте инструменты для минификации файлов, такие как uglify-js для JavaScript и cssnano для CSS, чтобы уменьшить размер файлов и ускорить загрузку.
• Объединяйте файлы: Сократите количество HTTP-запросов, объединив несколько CSS или JS файлов в один. Это может существенно улучшить производительность сайта.

4. Lazy Loading изображений

• Используйте ленивую загрузку: Включите ленивую загрузку изображений, чтобы загружать их только при необходимости, когда они становятся видимыми на экране пользователя. Это уменьшит время загрузки страницы и снизит нагрузку на сервер.

Пример использования атрибута loading:

<img src="path/to/image.jpg" alt="Описание изображения" loading="lazy">

5. Использование CDN для статики

• Подключите CDN: Используйте Content Delivery Network (CDN) для хранения и доставки статических ресурсов, таких как изображения, CSS и JavaScript файлы. Это ускорит загрузку страниц для пользователей по всему миру.

6. Оптимизация изображений

• Сжимаем изображения: Используйте инструменты для сжатия изображений без потери качества, такие как TinyPNG или ImageOptim, чтобы уменьшить размер файлов.
• Используйте современные форматы: Применяйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с традиционными форматами.

Заключение

В данной статье мы подробно рассмотрели процесс расширения блока Query Loop в WordPress, начиная с создания кастомных вариаций и заканчивая их оптимизацией и практическим применением. Вот ключевые моменты, которые следует помнить при работе с блоком Query Loop:

1. Используйте вариации для упрощения пользовательского опыта: Создавайте предустановленные вариации блока Query Loop с необходимыми параметрами, чтобы пользователи могли быстро вставлять нужные блоки без глубоких технических знаний.
2. Добавляйте кастомные атрибуты и контролы: Позволяйте пользователям гибко настраивать параметры блока через панель управления в редакторе, добавляя новые контролы и атрибуты.
3. Обеспечивайте корректную работу на фронтенде и в редакторе: Настройте обработку пользовательских запросов как на стороне фронтенда, так и в редакторе, используя соответствующие фильтры и REST API.
4. Стилизуйте блоки для улучшения визуального восприятия: Добавляйте уникальные CSS-стили, чтобы кастомные вариации блоков Query Loop гармонично вписывались в дизайн вашего сайта и привлекали внимание пользователей.
5. Оптимизируйте производительность: Применяйте методы оптимизации кода и запросов, такие как кэширование, минимизация файлов и использование CDN, чтобы обеспечить быструю загрузку страниц и снизить нагрузку на сервер.
6. Тестируйте и отлаживайте: Всегда проводите тщательное тестирование блоков после внесения изменений, чтобы убедиться в их корректной работе и отсутствии конфликтов с другими элементами сайта.

Рекомендации по лучшим практикам:

• Документируйте ваш код: Пишите понятные комментарии и документацию для ваших кастомных блоков и вариаций, чтобы облегчить их поддержку и дальнейшее развитие.
• Следите за обновлениями WordPress: WordPress постоянно развивается, поэтому следите за новыми версиями и обновлениями API, чтобы ваши кастомные блоки оставались совместимыми и использовали последние возможности платформы.
• Используйте современные инструменты разработки: Применяйте современные инструменты и фреймворки, такие как React и Webpack, для разработки блоков, чтобы повысить качество и эффективность вашего кода.
• Обратная связь от пользователей: Слушайте отзывы пользователей и адаптируйте ваши блоки под их потребности, добавляя новые функции и улучшая существующие.

Заключительные мысли

Расширение блока Query Loop в WordPress открывает широкие возможности для создания динамичных и настраиваемых лент контента. Используя кастомные вариации, добавляя пользовательские атрибуты и контролы, а также оптимизируя производительность, вы можете значительно улучшить функциональность вашего сайта и предоставить пользователям удобные инструменты для создания привлекательного и информативного контента.

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