css - Block style variations not enqueued for blocks inside HTML code dynamically rendered via JS

admin管理员组

文章数量:1122832

The new WP 6.6 will let anyone style any registered block style variations in theme.json via the styles.blocks.blockName.variations property. Check the following post for more info:

/

I'm testing this new feature with WP 6.6 RC1 and I have an issue with a custom block I developed some time ago.

My custom block loads a frontend script that retrieves posts via a XMLHttpRequest call (some code omitted for brevity):

var req = new XMLHttpRequest();
req.addEventListener('load', function () {
    var html = '';
    var result = JSON.parse(this.response);
    var posts = result.posts;
    var numposts = result.numposts;
    for (var i = 0; i < posts.length; i++) {
        var post = posts[i];
        html += '<article id="post-' + post.ID + '" class="wp-block-infinite-posts__post">';
        html += '<h2 class="wp-block-infinite-posts__post-title">' + post.post_title + '</h2>';
        html += '<div class="wp-block-infinite-posts__post-content">' + post.post_content + '</div>';
        html += '</article>';
    }
    document.querySelector('.wp-block-infinite-posts .infinite-posts').insertAdjacentHTML('beforeend', html);
            
});
req.open('GET', rsilp_params_rest.rest_url + 'rsilp/v1/posts/');
req.setRequestHeader('X-WP-Nonce', rsilp_params_rest.rest_nonce)
req.send();

I've registered a quote block style variation named big-text-quote in PHP:

function register_block_style_variations() {
    register_block_style(
        'core/quote',
        array(
            'name'  => 'big-text-quote',
            'label' => __( 'Big Text Quote', 'textdomain' ),
        )
    );
}
add_action( 'init', 'register_block_style_variations' );

I've styled this new variation via the styles.blocks.blockName.variations in my theme.json:

"styles": {
    "blocks": {
        "core/quote": {
            "variations": {
                "big-text-quote": {
                    "typography": {
                        "fontFamily": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
                        "fontSize": "45px",
                        "fontWeight": "700",
                        "fontStyle": "normal",
                        "lineHeight": "1",
                        "textAlign": "initial",
                        "letterSpacing": "-1px"
                    },
                    "border": {
                        "width": "0",
                        "style": "none"
                    },
                    "color": {
                        "background": "transparent",
                        "text": "#000000"
                    },
                    "spacing": {
                        "margin": {
                            "top": "0",
                            "right": "auto",
                            "bottom": "0.5em",
                            "left": "auto"
                        },
                        "padding": {
                            "top": "0",
                            "right": "0",
                            "bottom": "0",
                            "left": "0"
                        }
                    }
                }
            }
        }
    }
}

This custom style variation is added to the style selector in the quote block correctly. I can select it with no problems, and the CSS class is-style-big-text-quote--#### is applied to the block and is styled accordingly:

:root :where(.wp-block-quote.is-style-big-text-quote--cb76747d26b42f72e44a0e8d5cc52573) {
    background-color: transparent;
    border-width: 0;
    border-style: none;
    color: #000000;
    text-align: initial;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0.5em;
    margin-left: auto;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

Except when a quote block is found in a dynamically retrieved post via the frontend script I posted above.

Part of the generated HTML code by the frontend script:

...
<div class="wp-block-infinite-posts__post-content">
    <blockquote class="wp-block-quote is-style-big-text-quote has-white-color has-black-background-color has-text-color has-background is-layout-flow wp-block-quote-is-layout-flow is-style-big-text-quote--cb76747d26b42f72e44a0e8d5cc52573">
        <p>When I am attacked by gloomy thoughts, nothing helps me so much as running to my books. They quickly absorb me and banish the clouds from my mind.</p>
        <cite>Montaigne</cite>
    </blockquote>
</div>
...

Apparently, WordPress only outputs block variation styles when the corresponding block is actually present on the rendered page. Since the posts in my custom block are fetched dynamically via JavaScript, WordPress cannot determine if the block is present on the page. How can I ensure that the necessary block variation styles for my custom block are always included, regardless of whether the block is detected by WordPress?

本文标签： cssBlock style variations not enqueued for blocks inside HTML code dynamically rendered via JS