Deregistrazione delle variazioni di stile in un tema a blocchi di WordPress

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.