Conventions de nommages des blocs

Les blocs de thème WordPress doivent suivre les conventions de nommage suivantes pour les classes CSS et les identifiants HTML :

Classes

Un bloc doit être identifiable via ces deux classes CS :

.srn_{nom_du_bloc}, classe propre au bloc, utilisé pour mettre en place le style unique du bloc.
.srn_block, classe commune à tous les blocs.

Balises sémantiques

Les blocs doivent respecter les règles de structuration HTML sémantique. Voici les balises recommandées pour les blocs WordPress :

<section> pour les blocs qui regroupent des contenus thématiquement liés.
<article> pour les blocs qui définissent un contenu autonome.
<blockquote> pour les blocs de citations.
<form> pour les blocs de formulaires.
<nav> pour les blocs de navigation.
<table> pour les blocs de tableaux de données.
<aside> pour les blocs de contenu secondaire ou complémentaire.
<address> pour les blocs d’informations de contact.
<figure> et <figcaption> pour les blocs d’images avec légendes.
<div> si le bloc ne correspond à aucune des balises sémantiques ci-dessus.

Exemples

Voici quelques exemples de structures HTML pour différents types de blocs WordPress en suivant les conventions de nommage et les balises sémantiques recommandées :

Bloc text-image

Un bloc combinant du texte et une image devrait être structuré comme suit :

<section class="srn_text-image srn_block">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <h2>Titre du bloc</h2>
                <p>Contenu textuel du bloc.</p>
            </div>
            <div class="col-6">
                <figure>
                    <img src="image.webp" alt="Description de l'image">
                    <figcaption>Légende de l'image</figcaption>
                </figure>
            </div>
        </div>
    </div>
</section>

Bloc formulaire-contact

Un bloc de formulaire de contact pourrait ressembler à ceci :

<form class="srn_formulaire-contact srn_block" action="/contact" method="post">
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message :</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Envoyer</button>
</form>

Bloc contact

Et exemple de bloc d’informations de contact :

<address class="srn_contact srn_block">
    <ul>
        <li>Adresse : 123 Rue Exemple, Ville, Pays</li>
        <li>Téléphone : <a href="tel:+33123456789">01 23 45 67 89</a></li>
        <li>Email : <a href="mailto:mail@to.dev">mail@to.dev</a></li>
    </ul>
</address>