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>