Nowy WP 6.6 pozwoli każdemu na stylizowanie dowolnych zarejestrowanych odmian stylów blokowych theme.json za pośrednictwem styles.blocks.blockName.variations nieruchomość. Sprawdź poniższy post, aby uzyskać więcej informacji:

Testuję tę nową funkcję w WP 6.6 RC1 i mam problem z niestandardowym blokiem, który opracowałem jakiś czas temu.

Mój niestandardowy blok ładuje skrypt front-endu, który pobiera posty za pośrednictwem XMLHttpRequest wywołanie (część kodu pominięta dla zwięzłości):

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();

Zarejestrowałem odmianę stylu bloku cytatów o nazwie big-text-quote w 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' );

Stworzyłem tę nową odmianę za pomocą styles.blocks.blockName.variations w moim 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"
                        }
                    }
                }
            }
        }
    }
}

Ta niestandardowa odmiana stylu jest poprawnie dodawana do selektora stylu w bloku cytatu. Mogę ją wybrać bez problemów, a klasa CSS is-style-big-text-quote--#### jest stosowany do bloku i odpowiednio stylizowany:

: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;
}

Wyjątkiem jest sytuacja, gdy blok cytatu zostanie znaleziony w dynamicznie pobranym poście za pomocą skryptu front-end, który zamieściłem powyżej.

Część kodu HTML wygenerowanego przez skrypt front-end:

...
<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>
...

Wygląda na to, że WordPress wyprowadza style wariacji bloków tylko wtedy, gdy odpowiadający im blok jest faktycznie obecny na renderowanej stronie. Ponieważ posty w moim niestandardowym bloku są pobierane dynamicznie za pomocą JavaScript, WordPress nie może ustalić, czy blok jest obecny na stronie. Jak mogę się upewnić, że niezbędne style wariacji bloków dla mojego niestandardowego bloku są zawsze uwzględniane, niezależnie od tego, czy blok jest wykrywany przez WordPress?