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

Stylizował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 problemu, 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;
}

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--20eeb1a390855174bbbf6d66f167213c">
        <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>
...

Z wyjątkiem sytuacji, gdy blok cytatu zostanie znaleziony w dynamicznie pobranym poście za pomocą skryptu front-end, który zamieściłem powyżej. Wygląda na to, że dynamicznie generowany kod za pomocą JS nie jest świadomy mojej niestandardowej wariacji stylu bloku (chociaż klasa CSS is-style-big-text-quote--#### jest obecny w bloku cytatu). Czy to jest poprawne? Jak mogę sprawić, aby dynamicznie generowany kod rozpoznawał odmianę stylu bloku?

Mam nadzieję, że dobrze się wytłumaczyłem.