Un catalogue de quarante leçons, chacune avec sa propre mise en page bricolée à la main dans l’ancien thème : c’était le point de départ de ce projet pour une petite structure de formation professionnelle continue. La refonte en thème bloc avait un objectif précis, reproduire un unique template capable d’afficher n’importe quelle leçon du type de contenu personnalisé lecon, avec un indicateur visuel de progression pour l’apprenant connecté.
Ce retour d’expérience décrit la construction de ce template et de l’indicateur de progression, assemblés à partir de patterns et d’un bloc dynamique enregistré côté serveur. Le moteur de quiz et la gestion des paiements ont été confiés à une extension existante sur le site et ne sont pas traités dans ce billet.
Un template unique pour tout le catalogue
Le type de contenu personnalisé lecon dispose d’un template dédié single-lecon.html, dans le dossier templates du thème bloc. Ce template combine un pattern d’en-tête affichant le titre de la leçon et son module d’appartenance, le contenu de la leçon via le bloc core/post-content, puis un pattern de navigation vers la leçon suivante du même module.
La difficulté n’était pas la mise en page elle-même, plutôt classique, mais la nécessité d’y insérer un élément dynamique et propre à chaque visiteur connecté : l’indicateur de progression. Un pattern, statique par nature, ne peut pas afficher une donnée qui dépend de l’utilisateur courant ; il fallait un bloc rendu côté serveur.
Construire le bloc de progression
Le bloc wpm/progression-lecon est un bloc dynamique enregistré avec register_block_type() et un render_callback PHP. Il calcule, à chaque affichage, le nombre de leçons du module marquées comme terminées pour l’utilisateur connecté, via une meta utilisateur mise à jour au fil de la navigation.
function wpm_render_progression_lecon( $attributes, $content, $block ) {
if ( ! is_user_logged_in() ) {
return '';
}
$post_id = get_the_ID();
$module = wp_get_post_terms( $post_id, 'module' );
$user_id = get_current_user_id();
if ( empty( $module ) ) {
return '';
}
$lecons_module = get_posts( array(
'post_type' => 'lecon',
'tax_query' => array( array(
'taxonomy' => 'module',
'terms' => $module[0]->term_id,
) ),
'fields' => 'ids',
'numberposts' => -1,
) );
$terminees = get_user_meta( $user_id, 'wpm_lecons_terminees', true );
$terminees = is_array( $terminees ) ? $terminees : array();
$count = count( array_intersect( $lecons_module, $terminees ) );
return sprintf(
'<p class="wpm-progression">%d / %d leçons terminées dans ce module</p>',
$count,
count( $lecons_module )
);
}
register_block_type( 'wpm/progression-lecon', array(
'render_callback' => 'wpm_render_progression_lecon',
) );
Marquer une leçon comme terminée
Le marquage se fait via un formulaire minimal inséré en pied de leçon par le même pattern, traité par une action admin-post.php classique qui met à jour la meta utilisateur wpm_lecons_terminees avant de rediriger vers la leçon suivante du module.
- Le pattern de navigation « leçon suivante » interroge la taxonomie
moduleet l’ordre de menu des articles pour déterminer la leçon à proposer ensuite. - Le bloc de progression est inséré une seule fois dans le pattern d’en-tête, partagé par toutes les leçons, ce qui évite toute duplication de logique entre les quarante contenus du catalogue.
- Un filtre
render_blocksupplémentaire masque l’indicateur pour les visiteurs non connectés, sans dupliquer la vérification dans le callback lui-même.
Pourquoi pas un plugin de LMS complet
Un plugin de gestion de formation en ligne aurait apporté quiz, certificats et suivi détaillé, mais aussi une complexité de configuration disproportionnée pour quarante leçons réparties en cinq modules. Le choix du bloc dynamique sur mesure a permis de garder un temps de développement contenu, au prix d’un suivi de progression volontairement simple : un compteur de leçons terminées par module, rien de plus.
Un indicateur de progression n’a pas besoin d’être sophistiqué pour être motivant ; un simple compteur suffit souvent à faire revenir l’apprenant.
En résumé
Ce projet illustre une approche pragmatique de l’éditeur de site pour des besoins qui dépassent le simple affichage de contenu : un template unique, quelques patterns et un bloc dynamique ciblé suffisent à couvrir un cas d’usage métier sans recourir à une extension généraliste. La limite de cet exercice est claire, dès que le catalogue grandirait significativement ou qu’un suivi pédagogique plus fin serait demandé, une solution dédiée deviendrait probablement plus pertinente.
