Come gestire la visibilità dei blocchi di WordPress

Vuoi poter controllare la visibilità dei blocchi di WordPress in modo che alcuni elementi (ad esempio un banner) appaiano solo in certe condizioni?

In questa guida ti mostreremo passo passo come fare a modificare la visibilità dei blocchi aggiunti nelle tue pagine o nei tuoi articoli.

Iniziamo!

Come gestire la visibilità dei blocchi su WordPress

Di default WordPress non offre funzioni che ci permettono di rendere alcuni blocchi nascosti o visibili solo in certe condizioni.

Pensiamo per esempio di voler inserire un form di iscrizione a un webinar sul nostro sito e mostrarlo solo in determinate condizioni, ad esempio in certe date. Per farlo bisognerà creare il form e poi renderlo “nascosto” finché non arriva il periodo da noi definito.

Visto che non c’è una funzione integrata, per riuscire ad aggiungere delle regole di visibilità ai nostri blocchi di WordPress, dobbiamo ricorrere quindi a soluzioni alternative.

Come vedremo in questa guida, uno dei metodi che possiamo usare è installare un plugin pensato proprio per questo scopo.

Come modificare le condizioni di visibilità dei blocchi con Block Visibility

Block Visibility di Nick Diego è un plugin che ci permette di applicare delle condizioni di visibilità ai singoli blocchi.

Il plugin funziona con tutti i tipi di blocchi e questo include, oltre ai blocchi già integrati su WordPress, anche quelli aggiunti da plugin o temi di terze parti o i blocchi custom che possiamo creare. Questo è un vantaggio perché se stiamo utilizzando un tema a blocchi come GeneratePress, possiamo anche sfruttare questo plugin per i blocchi specifici.

In questo esempio è mostrato come cambiare la visibilità di un blocco “Button” aggiunto dal plugin GenerateBlocks.

Installazione e configurazione del plugin Block Visibility

Come sempre per poter utilizzare un plugin su WordPress, bisogna installarlo e attivarlo. Dalla bacheca del tuo sito WordPress vai su Plugin > Aggiungi plugin e cerca “Block visibility“, poi clicca su “Installa ora” e successivamente su “Attiva“.

Dopo che il plugin è attivo, possiamo andare a modificare le impostazioni andando su Impostazioni > Block Visibility.

Nella scheda “General Settings” troviamo diverse opzioni che possono esserci utili.

User permissions: da questa opzione possiamo scegliere se rendere le opzioni del plugin (e quindi la possibilità di controllare la visibilità dei blocchi) accessibili solo ad alcuni tipi di utente. Possiamo spuntare i diversi ruoli dopo aver attivato l’opzione. Se hai dubbi su come funzionano, leggi la nostra guida ai ruoli utente su WordPress.

Ad esempio in questo caso, ho attivato i controlli di visibilità solo agli utenti con ruolo Editore.

Dalla scheda “Visibility Controls” possiamo scegliere quali opzioni del plugin utilizzare. Questa possibilità è molto utile perché, come vedremo tra poco, il plugin mette a disposizione tanti controlli sulla visibilità.

Infatti, quando andremo a modificare la visibilità dei blocchi vedremo una lunga serie di opzioni disponibili ed è più utile rimuovere le opzioni che effettivamente non ci servono in modo da avere una visione più snella poi nell’editor di WordPress.

In questa schermata ti mostro parte delle opzioni che puoi scegliere di disattivare. Tieni presente che se non cambi nessuna impostazione, vedrai tutte le opzioni disponibili.

Spostandoci sulla scheda “Block Manager” possiamo andare ad agire in maniera ancora più granulare e scegliere per quali blocchi rendere disponibili i controlli di visibilità.

In questo esempio puoi vedere che sono stati esclusi alcuni tipi di blocchi.

Controllare la visibilità dei blocchi

Ora che abbiamo visto le varie impostazioni di Block Visibility, vediamo come si usa nella pratica.

Dopo averlo attivato, il plugin sarà disponibile su tutto il sito: questo significa che andando a modificare pagine o articoli dall’editor di WordPress (Gutenberg), vedremo una nuova sezione di impostazioni nelle opzioni del blocco.

Ci basta:

• selezionare il blocco che vogliamo modificare;
• cliccare su “Visibility” dalle opzioni del blocco;
• dovremo quindi aggiungere il tipo di controllo che vogliamo attivare.

I tipi di controllo si possono anche combinare tra loro, adesso ti spiegherò brevemente come funzionano e poi vedremo un esempio in dettaglio.

Browser & Device: la visibilità del blocco può essere limitata a uno o più browser (es. Chrome), alla piattaforma (intesa come sistema operativo) o al tipo di dispositivo (mobile, desktop o robot). In questo esempio ho applicato la regola per mostrare il blocco solo da dispositivi mobili.

Cookie: possiamo indicare un cookie in base al quale mostrare o nascondere il blocco.

Date & Time: possiamo impostare una pianificazione in base a delle date specifiche in cui il blocco sarà reso visibile (o al contrario, sarà nascosto).

Hide block: è un’opzione rapida che permette di nascondere quel blocco specifico (senza andare a specificare nessuna condizione).

Location: impostiamo la visibilità in base alla posizione del blocco. Ad esempio possiamo scegliere mostrare il blocco solo nei post type “articolo” oppure nei custom post type.

Metadata: possiamo definire una regola in base ai metadati dell’articolo o dell’utente. Può essere utile da combinare con i campi custom.

Query string: qui possiamo aggiungere una regola in base ai parametri nell’URL.

Referral Source: possiamo indicare l’URL (o parte di esso) di provenienza del visitatore così da mostrare un blocco differente (o nasconderlo).

Screen size: da qui possiamo modificare la visibilità in base alla dimensione dello schermo e quindi scegliere se rendere un blocco nascosto da desktop, tablet o mobile.

URL path: indichiamo l’URL della pagina per definire in quali casi mostrare il blocco. Per esempio se volessi mostrare un blocco solo in articoli di una certa categoria, potrei inserire “/categoria/sport/” nel campo “URL Path (Contains)”.

User Role: usiamo questa opzione per rendere visibile il blocco in base al ruolo utente (da pubblico – per tutti; fino a utenti loggati oppure in base al ruolo di WordPress, ad esempio solo a editor e amministratori).

Visto che le diverse impostazioni si possono combinare, è utile sfruttare anche l’opzione “Visibility presets” che ci permette di salvare delle pre-impostazioni e applicarle poi a vari blocchi. Per farlo ci verrà chiesto di creare un preset.

Questa opzione può essere utile se vogliamo applicare le stesse condizioni di visibilità a diversi blocchi in maniera più rapida. Nell’esempio qui sotto ho creato un preset con due controlli:

• il primo con “Date & time” per rendere il blocco visibile solo di lunedì;
• il secondo con “Browser & device” per renderlo visibile solo per chi visita il sito da mobile.

Altri plugin per gestire la visibilità dei blocchi

Oltre a Block Visibility, ci sono anche altri plugin che ci permettono di controllare la visibilità dei blocchi sul nostro sito.

Ci sono due tipologie principali di plugin che ci permettono di gestire le condizioni in cui mostrare i blocchi:

• i plugin specifici che aggiungono solo questa funzione: in questa categoria rientra Block Visibility, che abbiamo già visto, e un altro esempio è dato da Conditional Blocks (che vedremo più avanti in questa guida);
• i plugin che estendono le funzionalità di Gutenberg: in questa categoria ci sono plugin che vanno ad aggiungere blocchi e impostazioni aggiuntivi tra cui Otter Blocks e Kadence Blocks.

Andiamo a vedere brevemente come usarli.

Gestire la visibilità dei blocchi con Conditional Blocks

Conditional Blocks è un plugin che è disponibile in una versione gratuita, leggermente limitata, e in versione Pro a partire da 49$ all’anno (per una licenza valida per singolo sito web).

La versione gratuita del plugin ha delle funzionalità limitate per quanto riguarda le condizioni di visibilità disponibili. Per sbloccare tutte e 36 le condizioni, bisogna passare alla versione a pagamento.

Nel nostro caso abbiamo testato solo la versione gratuita. Dopo aver installato e attivato il plugin, nella scheda Blocco vedremo una nuova voce “Conditional Blocks“, da qui potremo cliccare sul pulsante “Edit visibility” per andare a impostare le condizioni di visibilità di quel determinato blocco.

Si aprirà quindi una finestra da cui potremo creare un nuovo Set di condizioni. Le condizioni disponibili nella versione gratuita sono:

• lockdown: nasconde il blocco per tutti gli utenti;
• responsive: ci permette di gestire la visibilità in base alla dimensione dello schermo;
• user logged in: il blocco sarà visibile solo agli utenti che hanno effettuato l’accesso;
• user logged out: il blocco sarà visibile solo agli utenti che non hanno effettuato l’accesso.

Rispetto a Block Visibility, che abbiamo visto prima, Conditional Blocks ha meno funzioni nella versione gratuita. Tieni presente che anche la possibilità di salvare i preset per applicarli rapidamente a più blocchi è riservata solo alla versione Pro.

Cambiare la visibilità dei blocchi con Otter Blocks

Finora ci siamo concentrati su plugin creati appositamente per applicare condizioni ai blocchi di Gutenberg e renderli visibili in certe condizioni.

Adesso, invece, ti mostrerò un plugin che aggiunge delle funzionalità ai blocchi Gutenberg di base.

Si tratta di Otter Blocks creato da Themeisle. Il plugin aggiunge 20 nuovi blocchi oltre ad altre funzioni (come pattern e template aggiuntivi).

Se vogliamo applicare delle condizioni di visibilità ai blocchi e stiamo già usando Otter Blocks o vogliamo anche aggiungere blocchi extra, possiamo prendere due piccioni con una fava scegliendo di utilizzare questo plugin.

Otter Blocks è disponibile in versione gratuita, installabile direttamente dal backend di WordPress e in versione Premium. La versione premium, Otter Pro, è disponibile a partire da 69€ all’anno (per una licenza valida per singolo sito). In questo caso andremo a vedere le funzioni della versione gratuita del plugin.

Una volta installato e attivato, Otter Blocks va ad aggiungere in automatico sia i blocchi extra (che troveremo nel selettore dei blocchi di Gutenberg), sia le funzioni aggiuntive.

Tra queste, quella che ci interessa è “Visibility Conditions“, accessibile sempre dalle opzioni del blocco. Cliccando su “Add Rule Group” possiamo definire le regole di visibilità del blocco.

Anche in questo caso alcune condizioni sono disponibili solo con la versione Pro del plugin.

Con la versione gratuita possiamo usare queste condizioni:

• logged in users: visibile solo a chi ha eseguito il login;
• logged out users: visibile solo a chi non ha fatto accesso;
• user roles: selezioniamo i ruoli utente che vogliamo possano vedere il blocco;
• condizioni in base al tipo di post (post type, categoria, tag o autore)
• screen size: possiamo impostare delle regole in base alle dimensioni dello schermo, ad esempio per rendere il blocco visibile solo per chi visita il sito da mobile.

In questo esempio puoi vedere una regola che fa sì che il blocco sia visibile solo agli utenti con ruolo amministratore o editore.

Tieni presente che puoi impostare sia che il blocco sia visibile o nascosto, selezionando rispettivamente “visible” o “hidden” dalla sezione “If condition is true, the block should be“.

Puoi anche combinare più impostazioni seguendo la logica And e Or:

• aggiungendo una nuova condizione (Add a new condition) entrambe le condizioni dovranno verificarsi. Ad esempio potresti rendere visibile il blocco solo agli utenti loggati che visitano il sito da mobile.
• Aggiungendo un nuovo gruppo di regole (Add rule group), uno o l’altro gruppo deve verificarsi, affinché la regola sia applicata. In questo caso se una delle due regole si verifica, allora il blocco viene mostrato.

Controllare la visibilità dei blocchi con Kadence

Kadence Blocks è un plugin che ci permette di aggiungere nuovi tipi di blocchi, pattern e altre funzioni per estendere l’editor di WordPress.

Utilizzando questo plugin possiamo impostare per i blocchi solo le condizioni di visibilità in base al tipo di dispositivo.

Dopo aver selezionato il blocco, nella scheda “Blocco” scorriamo fino a “Impostazioni di visibilità” e possiamo scegliere una delle opzioni:

• nascondi nei desktop;
• nascondi nei tablet;
• nascondi nei dispositivi mobili.

Tieni presente che queste impostazioni sono disponibili solo per i blocchi Kadence e non per i blocchi di base di Gutenberg.

Conclusioni

Gestire la visibilità dei blocchi su WordPress è molto utile perché ci permette di mostrare elementi in certe condizioni, ad esempio un banner che viene mostrato solo agli utenti che visitano il sito da mobile o solo in certe date.

Per farlo puoi utilizzare delle funzioni custom, è il metodo che usiamo su SupportHost per mostrare i banner in determinate date usando gli hook di WordPress. Un sistema ancora più semplice, invece, è usare uno dei plugin che abbiamo visto in questa guida.

Hai mai pensato di usare questa funzionalità? E per fare cosa? Parlacene nei commenti.