Lorsque vous construisez un thème personnalisé ou que vous travaillez avec un thème enfant, vous pouvez avoir besoin de supprimer ou de masquer certaines caractéristiques de style, que ce soit pour un seul bloc de base ou pour une variation de style du thème complet.
Il ne s’agit pas seulement d’une question de préférence. Cela apporte souvent des avantages pratiques, tels que l’amélioration des performances, une conception plus cohérente et une interface utilisateur plus simple.
Les approches adoptées pour atteindre ces objectifs varient et sont susceptibles de dépendre de vos besoins et de vos compétences. Pour les exemples de cet article, nous travaillons avec un thème enfant de Twenty Twenty-Five (TT5), un thème de blocs WordPress moderne.
Le dés-enregistrement dépend de la façon dont elle a été enregistrée.
Pour ce qui nous concerne, lorsque nous parlons de dés-enregistrer une variation de style de bloc ou de thème, nous faisons la distinction entre une suppression complète et une suppression partielle, et nous indiquons si la variation est entièrement supprimée ou simplement cachée de l’interface. Ces distinctions sont importantes.
Pour comprendre comment annuler l’enregistrement d’un bloc, il faut d’abord savoir comment il a été enregistré. Par exemple, les blocs de base enregistrés avec JavaScript sont mieux dés-enregistrés dans ce langage. En revanche, les variations de style du thème sont enregistrées en PHP, et il convient donc d’adopter une approche différente.
L’annulation de l’enregistrement des blocs personnalisés n’entre pas dans le cadre de cet article, et votre approche dépend de la façon dont ces blocs ont été enregistrés à l’origine.
Qu’est-ce qu’une variation de style ?
WordPress fait la distinction entre les styles de blocs et les variations de style des thèmes. Les styles de bloc sont des alternatives visuelles pour un bloc spécifique, comme les styles « fill » ou « outline » d’un bloc bouton. Les variations de style de bloc sont enregistrées dans core, theme.json, block.json (ou dans une extension).
Les variations de style de thème, en revanche, sont des alternatives visuelles entières qui incluent les couleurs, la typographie et les dispositions définies dans un fichier theme.json unique. Elles permettent aux utilisateurs de passer d’une apparence à l’autre (skins) pour un site sans changer de thème. TT5 est livré avec huit variations de style en plus du style par défaut.
Première étape : mettre vos scripts en file d’attente
Comme nous travaillons avec un thème enfant, vous devez veiller à mettre vos scripts en file d’attente correctement.
Cette configuration vous permet de commencer, y compris la mise en file d’attente de notre fichier personnalisé unregister-blocks.js.
// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});Comme vous pouvez le voir, nous avons un fichier JavaScript à js/unregister-blocks.js, qui comprend tous nos scripts pour cet article.
N’utilisez pas get_template_directory_uri() pour le fichier JavaScript, car il pointe vers le thème parent.
Le timing, c’est tout
Il est essentiel de savoir quand un crochet se déclenche lorsque l’on travaille avec PHP dans WordPress. Vous devriez connaître la séquence de chargement de base, qui commence à wp-settings.php:
- Constantes
- Globales
- Composants de base
- Charger les extensions
- Charger le thème
Trouver le bon moment pour exécuter une fonction personnalisée est l’une des parties les plus délicates et les plus frustrantes du développement de WordPress.
Dés-enregistrer un style de bloc central
Considérons une situation dans laquelle vous souhaitez supprimer le style d’un bloc de base. Dans ce cas, nous voulons supprimer le style de contour du bloc bouton.
Comme les styles de remplissage et de contour du bouton sont enregistrés dans le fichier theme.json de TT5, nous utilisons JavaScript pour gérer le processus.
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});Le résultat est la suppression du style de contour dans la barre d’outils et la colonne latérale.
Dés-enregistrement d’un bloc de base
Supposons que vous souhaitez supprimer tous les styles de bloc pour un bloc. Une approche plus rationnelle consiste à dés-enregistrer le bloc (ou les blocs). Cela permet de rationaliser l’insertion en supprimant le ou les blocs que vous ne voulez pas que les utilisateurs utilisent et d’améliorer les performances.
Ici, le bloc Citation (quote) est supprimé.
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});Que se passe-t-il si le script s’exécute alors que le bloc Citation a déjà été utilisé ? WordPress affiche un message « Ce bloc n’est plus disponible » dans l’éditeur, mais le contenu est toujours affiché sur le site. Les utilisateurs peuvent modifier ou convertir manuellement la vue HTML brute vers laquelle le bloc retombe.
Vous pouvez soit le laisser tel quel, soit le convertir en HTML pour conserver le contenu et le style.
Qu’en est-il de la suppression de plusieurs blocs ? Dans cet exemple, nous supprimons les blocs Citation et Titre en exécutant une boucle foreach pour obtenir un moyen très efficace de le faire.
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});Ce script permet de supprimer facilement d’autres blocs si nécessaire.
Dés-enregistrement d’une variation de style d’un thème
La beauté des variations de style dans les thèmes de blocs est qu’elles n’ont pas besoin d’être enregistrées, comme vous avez pu le faire par le passé avec d’autres extensions WordPress.
Au lieu de cela, elles sont automatiquement reconnues par Core simplement en plaçant un fichier theme.json correctement formaté dans le répertoire racine ou /styles du thème enfant.
Il est facile de supposer que vous avez besoin d’une fonction pour annuler l’enregistrement des variations de style, mais les thèmes de blocs fonctionnent différemment.
Comme pour les styles de blocs, il n’y a pas d’interface utilisateur par défaut pour supprimer les variations de style indésirables.
Commençons par les méthodes les plus simples et progressons à partir de là. Ce qui rend les variations de style si faciles à « enregistrer » ou à ajouter à un thème de blocs est exactement ce qui rend très difficile leur « dés-enregistrement ». Par conséquent, nous disposons de quelques approches.
Supprimer une variation de style d’un thème
Il y a plusieurs façons de supprimer la variation de style Evening dans un thème en bloc comme TT5.
Si vous n’utilisez pas de thème enfant, l’option la plus directe consiste à supprimer le fichier .json correspondant du thème parent. Par exemple, en supprimant 01-evening.json du répertoire /styles, la variation Evening est entièrement supprimée.
Cependant, cela n’est pas recommandé car le fichier reviendra probablement après la prochaine mise à jour du thème.
Une meilleure méthode, plus sûre, consiste à utiliser un thème enfant et à remplacer la variation de style. Vous pouvez le faire en créant un fichier vierge dans le même chemin avec le même nom de fichier. Pour remplacer 01-evening.json, ajoute un fichier vide nommé 01-evening.json dans le répertoire /styles de votre thème enfant.
Cette approche ne permet pas vraiment de « dés-enregistrer » la variation ; elle la neutralise simplement. WordPress reconnaît toujours le fichier, mais comme il ne contient aucun réglage, la variation devient invisible dans l’interface utilisateur et non fonctionnelle. Cette neutralisation ne fonctionne que parce que les thèmes enfants se chargent après les thèmes parents, il vaut donc la peine de confirmer que votre thème enfant est correctement configuré.
Masquer une variation avec CSS
Une autre solution consiste à masquer la variation de style de l’interface utilisateur à l’aide d’une feuille de style CSS. Cela ne la supprime pas de la mémoire ou de l’API REST, et cela ne réduira pas l’encombrement de l’interface, mais cela empêchera les utilisateurs de la sélectionner dans l’Éditeur de site.
Voici un exemple de masquage de la variation Evening :
/* Hide specific global style variations in the Site Editor */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}Cela fonctionne dans le panneau Éditeur > Styles > Parcourir les styles. Si un utilisateur a précédemment activé la variation Soir, elle sera toujours appliquée, mais il ne pourra pas la re-sélectionner ou passer à nouveau à cette variation.
Masquer une variation avec JavaScript
Vous pouvez aussi utiliser JavaScript pour cacher la variation, injectée via PHP à l’aide de wp_add_inline_script. Il s’agit d’un peu de « hack », puisque les variations de style sont enregistrées en PHP, mais c’est parfois le seul moyen pratique de manipuler l’interface utilisateur de manière fiable.
Voici un exemple qui fonctionne :
// Inject JS to hide specific style variations in the Site Editor UI
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// Stop the interval after 5 seconds
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});Ce script attend que le DOM se charge, puis recherche et cache la variation de façon répétée pendant quelques secondes. Il est fragile (parce qu’il dépend de la synchronisation et des noms de classe), mais il fonctionne lorsque vous avez besoin de supprimer des variations spécifiques sans toucher au système de fichiers.
Résumé
Garder votre site propre et exempt d’éléments inutilisés améliore l’expérience de l’utilisateur et, dans de nombreux cas, les performances du site.
Les exemples que nous avons présentés ici fournissent des approches solides pour dés-enregistrer les variations de style. Nous espérons qu’ils vous aideront également à comprendre pourquoi le dés-enregistrement peut vous laisser perplexe.
Vous cherchez un hébergement WordPress rapide et fiable pour créer et tester des thèmes personnalisés ? Kinsta offre des fonctionnalités adaptées aux développeurs, des environnements de staging et une infrastructure aux performances optimisées pour prendre en charge votre flux de travail, du développement local à la production.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
