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

Я создаю блок, который показывает бесконечный список постов, используя Интерфейс Интерктивности:

render.php

<?php
    $block_attributes = get_block_wrapper_attributes()
?>
<div
    <?php echo $block_attributes; ?>
    <?php
    echo wp_interactivity_data_wp_context(
        array(
            'posts'    => null,
            'number'   => $attributes['number'],
            'offset'   => 0,
            'category' => $attributes['category'],
        )
    );
    ?>
    data-wp-interactive="milp-store"
    data-wp-init="actions.getFirstPosts"
    data-wp-on-window--beforeunload="callbacks.saveState"
>
    <div data-wp-watch="callbacks.renderPosts"></div>
    <button data-wp-style--display="context.display" data-wp-on--click="actions.getPosts"><?php _e( 'Load More', 'my-infinite-latest-posts' ); ?></button>
</div>

view.js

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

store('milp-store', {
    callbacks: {
        renderPosts() {
            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-my-infinite-latest-posts__post">';
                    html += '<h2 class="wp-block-my-infinite-latest-posts__post-title">' + post.title.rendered + '</h2>';
                    html += '<div class="wp-block-my-infinite-latest-posts__post-content">' + post.content.rendered + '</div>';
                    html += '</article>';
                }
                element.ref.innerHTML += html;
            }
        },
        saveState() {
            const context = getContext();
            // Хранение смещения постов в sessionStorage при смене страниц.
            sessionStorage.setItem('posts-offset', context.offset);
        }
    },
    actions: {
        *getFirstPosts() {
            const context = getContext()
            const number = sessionStorage.getItem('posts-offset') || context.number;
            const posts = yield fetch(
                'https://' + window.location.hostname + '/wp-json/wp/v2/posts?per_page=" + encodeURIComponent(number) + "&offset=0&categories=" + encodeURIComponent(context.category) + "&_fields=id,title,content',
                {
                    method: 'GET',
                    headers: {
                        'Cache-Control': 'max-age=60, must-revalidate',
                    },
                }
            ).then(function (response) {
                // Заголовок ответа X-WP-Total содержит общее количество записей в коллекции.
                context.total = response.headers.get('X-WP-Total');
                return response.json();
            }).catch(function (error) {
                console.error(error);
            });
            context.posts = posts;
            context.offset = parseInt(number);
            context.display = (context.offset < context.total) ? 'block' : 'none';
        },
        *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) + "&_fields=id,title,content',
                {
                    method: 'GET',
                    headers: {
                        'Cache-Control': 'max-age=60, must-revalidate',
                    },
                }
            ).then(function (response) {
                return response.json();
            }).catch(function (error) {
                console.error(error);
            });
            context.posts = posts;
            context.offset = parseInt(context.offset) + parseInt(context.number);
            context.display = (context.offset < context.total) ? 'block' : 'none';
        },
    }
});

block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "my/infinite-latest-posts",
    "title": "My Infinite Latest Posts",
    "description": "Display latest posts.",
    "textdomain": "my-infinite-latest-posts",
    "category": "widgets",
    "attributes": {
        "category": {
            "type": "integer",
            "default": 0
        },
        "number": {
            "type": "integer",
            "default": 5
        }
    },
    "supports": {
        "spacing": {
            "margin": true,
            "padding": true
        },
        "interactivity": true
    },
    "editorScript": "file:./index.js",
    "viewScriptModule": "file:./view.js",
    "style": "file:./style-index.css",
    "render": "file:./render.php"
}

WordPress включает стили вариации блока только в том случае, если соответствующий блок присутствует на отображаемой странице. Однако, поскольку мой блок последних постов с бесконечным просмотром динамически загружает посты через Интерфейс Интерктивности, WordPress не может обнаружить присутствие блоков внутри постов во время рендеринга. Как я могу обеспечить включение необходимых стилей вариации блоков, даже если WordPress изначально не распознает блоки на странице?

Стили вариации блоков анализируются и обрабатываются через wp_render_block_style_variation_support_styles(). Эта функция помечена как приватная и не должна вызываться сторонним кодом вне ядра WordPress. Эта функция вызывается благодаря подключению к render_block_data хук.

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

Вы можете создать разметку блока в виде строки и затем использовать do_blocks() чтобы отрендерить их:

do_blocks(
  <<<HTML
  <!-- wp:paragraph {"className":"is-style-foo"} -->
  <p class="is-style-foo">Render this style for its side effects.</p>
  <!-- /wp:paragraph -->
  HTML
);