Rendu Twig

Le fichier Twig généré va permettre d'expliquer à Wordpress quel structure HTML généré lorsqu'il rencontrera votre block dans le contenu de la publication.

Dans notre exemple voici le code que l'on va produire :

views/blocks/colorized_section.html.twig

<section class="elementum-block-colorized_section" style="background-color: {{ attributes.color }}">
    <h2>{{ attributes.title }}</h2>
    <div class="content">
        {{ attributes.innerBlocks }}
    </div>
</section>

Style

Afin de stylisé votre rendu, vous pouvez importé dans le fichier SCSS principal le fichier qui a été générer par la commande.

Dans notre exemple nous ajouterons :

assets/scss/main.scss

@import "blocks/colorized_section";

assets/scss/blocks/_colorized_section.scss

.elementum-block-colorized_section {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
}