Как включить вариации стиля для блоков внутри HTML-кода, динамически отображаемого с помощью Interactivity API.

Я создаю блок, который показывает бесконечный список постов, используя 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();
            // Store posts offset in sessionStorage when changing pages.
            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) {
                // The X-WP-Total response header fields contains the total number of records in the collection.
                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 включает стили вариаций блока только в том случае, если соответствующий блок присутствует на отрисованной странице. Однако, так как мой блок бесконечных последних постов динамически загружает посты через API взаимодействия, WordPress не может обнаружить наличие блоков внутри постов во время рендеринга. Как я могу гарантировать, что необходимые стили вариаций блока всегда будут включены, даже если WordPress изначально не распознает блоки на странице?