Quando si sviluppa un tema personalizzato o si lavora con un child theme, si potrebbe aver bisogno di rimuovere o nascondere alcune caratteristiche dello stile, sia che si tratti di un singolo blocco centrale o di una variazione di stile dell’intero tema.
Non è solo una questione di preferenze. Spesso comporta vantaggi pratici, come ad esempio migliori prestazioni, un design più coerente e un’interfaccia utente più semplice.
Gli approcci adottati per raggiungere questi obiettivi variano e dipendono dalle esigenze e dalle competenze dello sviluppatore. Per gli esempi riportati in questo articolo, lavoriamo con un child theme di Twenty Twenty-Five (TT5), un moderno tema a blocchi di WordPress.
La deregistrazione dipende dal modo in cui è stata effettuata la registrazione
Per i nostri scopi, quando ci riferiamo alla deregistrazione di una variazione di stile di un blocco o di un tema, distinguiamo tra rimozione completa e parziale e se la variazione è completamente rimossa o semplicemente nascosta dall’interfaccia. Le distinzioni sono importanti.
Per capire come deregistrare un blocco è necessario sapere come è stato registrato. Ad esempio, i blocchi core registrati in JavaScript è meglio deregistrarli nello stesso linguaggio. Al contrario, le variazioni di stile del tema sono registrate in PHP e quindi potrebbe essere necessario seguire un approccio diverso.
La deregistrazione dei blocchi personalizzati non rientra nell’ambito di questo articolo e l’approccio dipenderà dal modo in cui tali blocchi sono stati originariamente registrati.
Cos’è una variazione di stile?
WordPress distingue tra variazioni di stile dei blocchi e variazioni di stile dei temi. Gli stili dei blocchi sono alternative visive di un blocco specifico, come ad esempio gli stili “riempimento” o “contorno” di un blocco pulsante. Le variazioni di stile dei blocchi sono registrate nel core, nel theme.json, nel block.json o in un plugin.
Le variazioni di stile del tema, invece, sono intere alternative visive che comprendono colori, tipografia e layout definiti in un unico file theme.json. Queste permettono agli utenti di passare da un aspetto all’altro (skin) di un sito senza cambiare il tema. TT5 è dotato di otto variazioni di stile oltre allo stile predefinito.
Il primo passo: accodare gli script
Dato che stiamo lavorando con un child theme, dobbiamo fare attenzione a inserire correttamente gli script.
Questa configurazione permette accoda il nostro file personalizzato 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
);
});Abbiamo un file JavaScript all’indirizzo js/unregister-blocks.js che include tutti i nostri script.
Non utilizziamo get_template_directory_uri() per il file JavaScript, perché punta al tema principale.
Il tempismo è tutto
Sapere quando un hook si attiva è fondamentale quando si lavora con PHP in WordPress. Bisogna conoscere la sequenza di caricamento di base, che inizia in wp-settings.php:
- Costanti
- Globali
- Componenti principali
- Caricamento dei plugin
- Caricamento del tema
Trovare il punto giusto in cui una funzione personalizzata deve essere eseguita è una delle parti più difficili nello sviluppo di WordPress.
Deregistrazione dello stile di un blocco core
Consideriamo una situazione in cui desideriamo rimuovere lo stile di un blocco core. In questo caso, vogliamo rimuovere lo stile del contorno del blocco pulsante.
Dato che gli stili di riempimento e di contorno dei pulsanti sono registrati nel file theme.json di TT5, utilizziamo JavaScript per gestire il processo.
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});Il risultato è la rimozione dello stile del contorno nella barra degli strumenti e nella barra laterale.
Deregistrazione di un blocco core
Supponiamo di voler rimuovere tutti gli stili di un blocco. Un approccio più razionale è quello di deregistrare il blocco (o i blocchi). Questo snellisce il pannello di inserimento rimuovendo i blocchi che non vogliamo vengano utilizzati dagli utenti e migliora le prestazioni.
In questo caso, viene rimosso il blocco Quote.
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});Cosa succede se lo script viene eseguito dopo che il blocco Quote è già stato utilizzato? WordPress mostra un messaggio “Questo blocco non è più disponibile” nell’editor, ma il contenuto continua a essere visualizzato sul front-end. Gli utenti possono modificare o convertire manualmente la visualizzazione HTML grezza in cui viene riportato il blocco.
Possiamo lasciarlo così com’è oppure convertirlo in HTML per mantenere il contenuto e lo stile.
Cosa fare per rimuovere più di un blocco? In questo esempio, eliminiamo i blocchi Quote e Heading eseguendo un ciclo foreach:
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});Questo script permette di rimuovere facilmente altri blocchi, se necessario.
Deregistrare una variazione di stile del tema
Il bello delle variazioni di stile nei temi a blocchi è che non hanno bisogno di essere registrate, come invece è stato fatto in passato con altre estensioni di WordPress.
Vengono riconosciute automaticamente dal Core semplicemente inserendo un file theme.json correttamente formattato nella cartella principale del child theme o nella cartella /styles.
È facile pensare che sia necessaria una funzione per deregistrare le variazioni di stile, ma i temi a blocchi funzionano in modo diverso.
Come per gli stili a blocchi, non esiste un’interfaccia predefinita per rimuovere le variazioni di stile indesiderate.
Iniziamo con i metodi più semplici e proseguiamo. Ciò che rende le variazioni di stile così facili da “registrare” o aggiungere a un tema a blocchi è esattamente ciò che rende molto difficile “deregistrarle”. Ma abbiamo diverse possibilità.
Rimuovere una variazione di stile di un tema
Ci sono diversi modi per rimuovere la variazione di stile Evening in un tema a blocchi come TT5.
Se non si usa un child theme, l’opzione più diretta è quella di eliminare il file .json corrispondente dal tema genitore. Ad esempio, rimuovendo 01-evening.json dalla cartella /styles si rimuove completamente la variazione Evening.
Tuttavia, questa operazione non è consigliata perché il file tornerà probabilmente al prossimo aggiornamento del tema.
Un metodo migliore e più sicuro è quello di utilizzare un child theme e sovrascrivere la variazione di stile. Possiamo farlo creando un file vuoto nello stesso percorso con lo stesso nome. Per sovrascrivere 01-evening.json, aggiungiamo un file vuoto chiamato 01-evening.json all’interno della cartella /styles del child theme.
Questo approccio non “cancella” realmente la variazione, ma la neutralizza. WordPress riconosce ancora il file, ma poiché non contiene impostazioni, la variante diventa invisibile nell’interfaccia utente e non funziona. Questo override funziona solo perché i child theme vengono caricati dopo i temi genitore, quindi è bene verificare che il child theme sia configurato correttamente.
Nascondere una variazione con i CSS
Un’altra soluzione consiste nel nascondere la variazione di stile dall’interfaccia utente utilizzando i CSS. Questo non la rimuove dalla memoria o dall’API REST e non riduce l’ingombro del front-end, ma impedisce agli utenti di selezionarla nell’Editor del sito.
Ecco un esempio per nascondere la variante 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;
}Questo funziona nel pannello Editor > Stili > Sfoglia stili. Se un utente ha precedentemente attivato la variante Evening, questa sarà ancora applicata, ma non potrà riselezionarla.
Nascondere una variante con JavaScript
Possiamo anche utilizzare JavaScript per nascondere la variazione, iniettato tramite PHP utilizzando wp_add_inline_script. Questo è un po’ un hack, dato che le variazioni di stile sono registrate in PHP, ma a volte è l’unico modo pratico per manipolare l’interfaccia utente in modo affidabile.
Ecco un esempio funzionante:
// 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
);
});Questo script attende il caricamento del DOM, poi scansiona e nasconde ripetutamente la variazione per alcuni secondi. È fragile (perché dipende dalle tempistiche e dai nomi delle classi), ma funziona quando abbiamo bisogno di sopprimere variazioni specifiche senza toccare il filesystem.
Riepilogo
Mantenere il sito pulito e privo di elementi inutilizzati migliora l’esperienza dell’utente e, in molti casi, le prestazioni del sito.
I nostri esempi forniscono approcci collaudati alla deregistrazione delle variazioni di stile. Ci auguriamo che forniscano anche degli spunti per capire perché la deregistrazione può suscitare delle perplessità.
Cerchi un hosting WordPress veloce e affidabile per costruire e testare temi personalizzati? Kinsta offre funzionalità per sviluppatori, ambienti di staging e un’infrastruttura ottimizzata per supportare il tuo lavoro dalla fase di sviluppo locale alla produzione.
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.
