Mettre en place la validation de données avec Gutenberg du côté éditeur

La validation de données avec Gutenberg permet une meilleure gestion des contenus sur un site WordPress, et permet d'éviter que sa gestion deviennent chaotique, surtout lorsque le volume d'articles dépasse les centaines. Combien de fois avez-vous trouvé des articles classés sous "Non classé" par défaut, rendant la navigation et la gestion plus complexes ?

Dans cet article, découvrez comment ajouter une validation de données dans l'éditeur de blocs Gutenberg pour forcer la sélection d'une catégorie avant la publication d'un article. Cette solution améliore la structure de vos contenus, leur classement et la facilité de gestion de votre site.

Suivez le guide pour implémenter ce système de validation et garantir que chaque post soit publié avec la bonne catégorie dès le départ.

Pourquoi mettre en place la validation de données avec Gutenberg ?

Par défaut, WordPress permet de publier des articles même s'ils ne sont pas assignés à une catégorie, ce qui peut entraîner une mauvaise organisation des contenus (par exemple, tous les articles catégorisés en "Non classé").

Pour palier à ce problème, on peut nativement assigner automatiquement une catégorie par défaut. Cependant, sur un projet avec beaucoup d'articles, j'ai jugé plus pertinent de forcer le choix d'une catégorie avant la publication d'un article afin qu'il soit rangé au bon endroit dès le départ. Cette méthode offre plusieurs avantages :

• Assure que chaque article est correctement classé ;
• Améliore la navigation et la gestion des contenus ;
• Peut être adapté pour d'autres attributs, comme les images à la une.

Mise en œuvre de la validation de données dans Gutenberg

La mise en place de cette validation se déroule en plusieurs étapes clés :

• Ciblage spécifique : Cette validation est appliquée uniquement au type de contenu "post".
• Feedback utilisateur : Une notice informative est affichée pour prévenir l'utilisateur de l'obligation de sélectionner une catégorie avant de sauvegarder ou de publier l'article.
• Validation en temps réel : Grâce à l'utilisation des hooks de l'éditeur, la vérification de la catégorie est faite dynamiquement. La notice disparaît dès qu'une catégorie est choisie.

Code de la validation de données

Voici le code JavaScript à intégrer dans le fichier functions.php de votre thème ou via un plugin spécifique en utilisant le hook enqueue_block_editor_assets :

let isNoticeDisplayed = false;

wp.data.subscribe(() => {
	const hasCategory = wp.data.select('core/editor').getEditedPostAttribute('categories');
	const postType = wp.data.select('core/editor').getCurrentPostType();

	// == Vérifie si aucune catégorie n'est sélectionnée
	if (postType === 'post' && (!hasCategory || hasCategory.length === 0)) {
		if (!isNoticeDisplayed) {
			// Bloque la sauvegarde et affiche une notice si elle n'est pas déjà visible
			isNoticeDisplayed = true;
			wp.data.dispatch('core/editor').lockPostSaving('require-category');
			wp.data.dispatch('core/notices').createNotice('warning', 'Vous devez sélectionner une catégorie pour sauvegarder votre article.', {
				id: 'require-category',
				isDismissible: false,
			});
		}
	} else if (isNoticeDisplayed) {
		// == Si une catégorie est sélectionnée mais que la notice est toujours affichée
		isNoticeDisplayed = false;
		wp.data.dispatch('core/editor').unlockPostSaving('require-category');
		wp.data.dispatch('core/notices').removeNotice('require-category');
	}
});

Explication du code

wp.data.subscribe() : Cette méthode permet de surveiller les changements dans l'état global de l'éditeur de blocs. Elle est utilisée ici pour suivre en temps réel les modifications de l'attribut de catégorie des posts.

lockPostSaving() et unlockPostSaving() : Ces fonctions verrouillent et déverrouillent la possibilité de sauvegarder le post, selon la condition de validation.

createNotice() et removeNotice() : Elles gèrent l'affichage et la suppression de la notice utilisateur.

Intégration et personnalisation

Pour inclure ce script dans votre projet WordPress, il suffit de l'intégrer en utilisant le hook enqueue_block_editor_assets :

function project_enqueue_custom_editor_script() {
	wp_enqueue_script(
		'custom-editor-validation',
		get_template_directory_uri() . '/assets/js/block-editor-validations.js',
		array('wp-data', 'wp-edit-post', 'wp-notices'),
		false,
		true
	);
}
add_action('enqueue_block_editor_assets', 'project_enqueue_custom_editor_script');

Validez les données de vos posts dans Gutenberg

Cette approche est efficace pour s'assurer que chaque post est bien catégorisé avant d'être publié. Elle peut aussi être étendue à d'autres vérifications, comme la présence d'une image à la une, pour améliorer la qualité des contenus publiés sur un site WordPress. N'hésitez pas à tester et à personnaliser le code selon vos besoins spécifiques.

Besoin de mettre en place la validation de données avec Gutenberg sur votre site WordPress ? N'hésitez pas à me contacter 😉