Synchronisation du CSS dans les Thèmes Full Site Editing (FSE) pour WordPress

L’adoption des thèmes Full Site Editing (FSE) dans WordPress a introduit un changement significatif dans la gestion du CSS. Contrairement aux thèmes classiques où le CSS est appliqué de manière automatique, dans les thèmes FSE, cette intégration nécessite une approche plus manuelle et détaillée.

Transparence CSS entre le Back et le Front en FSE

L’une des avancées majeures des thèmes FSE est la synchronisation transparente du CSS entre le back-end et le front-end. Cette fonctionnalité assure que les modifications apportées dans l’éditeur de site se reflètent fidèlement sur le site public, offrant une expérience utilisateur et de développement cohérente et prévisible.

Intégration des Fonctions dans le Thème via functions.php

Le cœur de cette synchronisation se trouve dans l’utilisation stratégique du fichier functions.php. L’ajout de deux hooks spécifiques dans ce fichier permet d’établir un lien dynamique entre le CSS du back-end et celui du front-end, facilitant ainsi une synchronisation efficace et uniforme.

Mettre ce code dans le fichier functions.php de votre thème.

// Réglage pour le back-office
function gn_css_and_pattern_setup() {

    // Le fichier style.css est utilisé dans l'éditeur
    add_editor_style(
        array(
            './style.css',
        )
    );

    // Suppression des compositions par défaut
    remove_theme_support( 'core-block-patterns' );

}
add_action( 'after_setup_theme', 'gn_css_and_pattern_setup' );

// Ajout du CSS pour le front-office
add_action( 'wp_enqueue_scripts', 'gn_enqueue_style_sheet' );
function gn_enqueue_style_sheet() {

	wp_enqueue_style( 'theme-name', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

}

Application Pratique et Démonstration en vidéo

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

FSE et l’Impact sur le Développement Web

Les thèmes FSE représentent une étape importante dans l’évolution de WordPress, en particulier dans la manière dont les développeurs interagissent avec le CSS. Cette nouvelle méthode offre une flexibilité accrue et une précision dans la conception web, soulignant l’importance d’une bonne compréhension des thèmes basés sur des blocs et de l’éditeur de site FSE pour les professionnels du web.

Quelques liens

• Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
• La première formation intégrale sur le FSE (Editeur de site).
• Nos meetups mensuel WP Paris.
• Notre association parisienne WP Paris (la refonte du site en FSE est en cours) qui représente WordPress à Paris.