Как отобразить начальные записи при загрузке страницы в блоке Gutenberg, используя API Интерктивности?

Вопрос или проблема

import { store, getContext, getElement } from '@wordpress/interactivity';

store('my-store', {
    callbacks: {
        renderContent() {
            const context = getContext();
            const element = getElement();
            if (context.posts !== null) {
                var html="";
                for (var i = 0; i < context.posts.length; i++) {
                    var post = context.posts[i];
                    html += '<article id="post-' + post.id + '" class="wp-block-infinite-latest-posts__post">';
                    html += '<h2 class="wp-block-infinite-latest-posts__post-title">' + post.title.rendered + '</h2>';
                    html += '<div class="wp-block-infinite-latest-posts__post-content">' + post.content.rendered + '</div>';
                    html += '</article>';
                }
                context.offset = context.offset + context.number;
                element.ref.innerHTML += html;
            }
        },
    },
    actions: {
        *getPosts() {
            const context = getContext()
            const posts = yield fetch(
                'https://' + window.location.hostname + '/wp-json/wp/v2/posts?per_page=" + encodeURIComponent(context.number) + "&offset=" + encodeURIComponent(context.offset) + "&categories=" + encodeURIComponent(context.category)
            ).then(function (response) {
                return response.json()
            })
            context.posts = posts;
        },
    }
});

<?php
    $block_attributes = get_block_wrapper_attributes()
?>
<div
    <?php echo $block_attributes; ?>
    data-wp-interactive="my-store"
    <?php
    echo wp_interactivity_data_wp_context(
        array(
            "posts"    => null,
            'number'   => $attributes['number'],
            'offset'   => 0,
            'category' => $attributes['category'],
        )
    );
    ?>
>
    <div data-wp-watch="callbacks.renderContent"></div>
    <button data-wp-on--click="actions.getPosts">Загрузить больше</button>
</div>

Ответ или решение

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

Шаг 1: Вызов метода получения постов при загрузке страницы

Первое, что нам нужно сделать, это инициировать вызов метода getPosts при загрузке страницы. Это можно сделать с помощью директивы data-wp-on--mount, которая сработает, когда элемент будет смонтирован. Нужно добавить этот атрибут к корневому элементу блока.

Шаг 2: Модификация PHP-кода блока

Ниже приведен обновленный PHP-код блока, который включает директиву data-wp-on--mount:

<?php
    $block_attributes = get_block_wrapper_attributes();
?>
<div
    <?php echo $block_attributes; ?>
    data-wp-interactive="my-store"
    <?php
    echo wp_interactivity_data_wp_context(
        array(
            'posts'    => null,
            'number'   => $attributes['number'],
            'offset'   => 0,
            'category' => $attributes['category'],
        )
    );
    ?>
>
    <div data-wp-watch="callbacks.renderContent"></div>
    <button data-wp-on--click="actions.getPosts">Загрузить ещё</button>
    <div data-wp-on--mount="actions.getPosts"></div>
</div>

Шаг 3: Обновление JavaScript-кода

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

import { store, getContext, getElement } from '@wordpress/interactivity';

store('my-store', {
    callbacks: {
        renderContent() {
            const context = getContext();
            const element = getElement();
            if (context.posts !== null) {
                let html = "";
                for (let i = 0; i < context.posts.length; i++) {
                    const post = context.posts[i];
                    html += `<article id="post-${post.id}" class="wp-block-infinite-latest-posts__post">`;
                    html += `<h2 class="wp-block-infinite-latest-posts__post-title">${post.title.rendered}</h2>`;
                    html += `<div class="wp-block-infinite-latest-posts__post-content">${post.content.rendered}</div>`;
                    html += `</article>`;
                }
                context.offset += context.number; // Обновляем offset для следующих запросов
                element.ref.innerHTML += html; // Добавление новых постов в DOM
            }
        },
    },
    actions: {
        *getPosts() {
            const context = getContext();
            const response = yield fetch(
                `https://${window.location.hostname}/wp-json/wp/v2/posts?per_page=${encodeURIComponent(context.number)}&offset=${encodeURIComponent(context.offset)}&categories=${encodeURIComponent(context.category)}`
            );
            const posts = yield response.json();
            context.posts = posts; // Сохраняем полученные посты в контексте
        },
    }
});

Резюме

Теперь, когда пользователь загружает страницу, будет автоматически выполнен вызов функции getPosts, что позволит отобразить первые n постов без необходимости в нажатии кнопки. Директива data-wp-on--mount позволяет нам привязать вызов к событию монтирования блока, что делает функционал более интуитивно понятным для конечного пользователя.

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