Come controllare i blocchi di Gutenberg per i post in WordPress: disabilita i blocchi e i modelli di blocco

Il nuovo editor di WordPress, Gutenberg, offre all’autore una grande flessibilità per creare contenuti ricchi. Ma in alcuni casi potrebbe essere necessario limitarlo un po’, sia come webmaster del sito che come sviluppatore di temi. In questo post vedremo come possiamo fornire limitazioni di blocco in Gutenberg usando PHP.

Ci sono funzionalità integrate per impostare alcune limitazioni nei blocchi con cui molti non hanno ancora familiarità. Questo può essere utile quando hai bisogno che alcuni post seguano lo stesso design o contenuto, o se vuoi aiutare gli autori non tecnici a non essere sopraffatti dal numero di blocchi in Gutenberg. Un altro esempio include l’aggiunta automatica dei blocchi di annunci necessari (se si dispone di un plug-in di annunci) tra i testi nei post. Puoi forzarlo o usare queste tecniche per aiutare gli autori a ricordarsi di aggiungerle.

In questo post esamineremo due modi in cui puoi controllare i blocchi in WordPress Gutenberg. Un modo è limitare il tipo di blocchi che possono essere aggiunti. In altre parole, rimuovi alcuni tipi di blocchi che non desideri siano disponibili. Possiamo farlo in modo specifico per tipo di post o globalmente. L’altro modo è usare i modelli di blocco. WordPress ti offre di decidere una serie di blocchi predefiniti quando crei un nuovo post. Questo viene fatto per tipo di post. Con i modelli di blocco puoi offrire all’autore i blocchi iniziali per aiutarlo a scrivere il post, oppure puoi bloccare i blocchi in posizione in modo che l’autore non possa cambiare la sua posizione o aggiungerne di nuovi.

Puoi fare entrambe le cose con PHP o Javascript. Questa guida tratterà il modo PHP.

Rimuovi i tipi di blocco

Lista nera

C’è un filtro PHP in WordPress chiamato allowed_block_types. Questo filtro fornisce due parametri; un array di tutti i blocchi e l’oggetto post. Tutto quello che dobbiamo fare è gestire l’array prima di restituirlo. E poiché otteniamo anche l’oggetto post nel filtro, possiamo anche aggiungere regole per tipo di post o altre meta informazioni del post.

L’array di blocchi è costituito da stringhe di nomi di spazi dei nomi del blocco. Tutti i blocchi in WordPress richiedono uno spazio dei nomi prefissato prima del nome del blocco. Per i blocchi core di WordPress lo spazio dei nomi è " core/" e per i blocchi incorporati di WordPress lo spazio dei nomi è " core-embed/". Ad esempio il blocco di intestazione ha il nome " core/heading" in questo array. Ho creato una panoramica completa di tutti i nomi dei tipi di blocchi nel mio post su Come per accedere e analizzare i blocchi di un post.

Ecco un rapido esempio di utilizzo del filtro per rimuovere tutti i blocchi tranne il paragrafo. Ciò si applicherà a tutti i tipi di post.

add_filter('allowed_block_types', function($block_types, $post) {
    return ['core/paragraph'];
}, 10, 2);

Se aggiungi questo codice nel functions.phpfile del tuo tema o del plug-in, il risultato è che Gutenberg disabilita completamente qualsiasi blocco diverso dal paragrafo. Non sarai nemmeno in grado di vedere nessun altro blocco, né puoi tentare di attirarli digitando " /" nel post (scorciatoia del blocco) o cercandoli.

Possiamo definire i blocchi che vogliamo mantenere o rimuovere per tipo di post. Verifichiamo semplicemente la proprietà post_typesull’oggetto post. Nell’esempio di codice seguente definiamo un nuovo array di blocchi che vogliamo consentire e aggiungiamo questa regola solo per il tipo di post personalizzato ‘ book‘.

Con il codice sopra ottieni tutti i blocchi quando modifichi post e pagine, ma quando modifichi il tipo di post personalizzato ‘ book‘, puoi solo aggiungere paragrafi, intestazioni e singole immagini.

Usa la tua immaginazione per aggiungere le tue regole. Poiché abbiamo l’oggetto post, possiamo accedere alla maggior parte delle informazioni di cui avremmo bisogno. Forse hai bisogno di limitare le scelte di blocco di un valore meta post? Ad esempio per modello di pagina scelto, categoria di post scelta o qualcos’altro.

Lista bianca

Per quanto posso vedere, puoi solo inserire nella whitelist (decidere quali rimuovere, invece di decidere quale mantenere) i blocchi annullando la registrazione dei blocchi a un certo punto. E devi farlo con Javascript e non PHP.

Non entrerò nei dettagli su questo, ma dovrai accodare un file Javascript caricato inito enqueue_block_editor_assetsagganciato, con wp-dom-readye wp-blockscome dipendenza. All’interno dello script puoi impostare una variabile di quelle che vuoi rimuovere, seguendo le stesse regole per gli spazi dei nomi e i nomi dei blocchi sopra. E per ogni nome di blocco si chiama la funzione unregisterBlockType()dal wp.blockspacchetto. Di solito dovresti farlo all’interno di una funzione su wp.domReady()per assicurarti che l’ordine di caricamento dello script sia corretto.

Qualcosa come questo:

var removeBlocks = [
    'core/paragraph',
    'core/heading',
    'core/image'
];
 
wp.domReady(function() {
    removeBlocks.forEach(function(blockName) {
        wp.blocks.unregisterBlockType(blockName);
    });
});

Rimuovere i tipi di blocco è un modo per controllare i blocchi in Gutenberg. Diamo un’occhiata all’altro modo, forse più divertente, di controllare i blocchi: i modelli di blocco.

Blocca modelli

Un altro modo per controllare i blocchi di Gutenberg in WordPress è utilizzare i modelli di blocco. WordPress ha funzionalità che ti consentono di popolare nuovi post con una serie di blocchi predefiniti. Questo può essere utile per aiutare gli autori mostrando loro un suggerimento sulla struttura a blocchi. Puoi anche scegliere di bloccare questi blocchi precompilati, impedendo così agli autori di riordinare o aggiungere altri blocchi. Questo è utile quando vuoi che i post abbiano una struttura e un design specifici, ad esempio assicurandoti che tutti i post di quel tipo di post abbiano le loro informazioni strutturate esattamente nello stesso modo.

Possiamo aggiungere modelli di blocco con un nuovo parametro alla [register_post_type](https://developer.wordpress.org/reference/functions/register_post_type/)()funzione utilizzata per la registrazione di tipi di post personalizzati (nota: il nuovo parametro non è stato ancora aggiunto alla documentazione). Puoi anche aggiungere o regolare i parametri sui tipi di post esistenti come post e pagine – vedi sotto su come.

Il nuovo parametro per register_post_type()è ‘ template‘. Come valore per ‘ template‘ devi fornire un array di blocchi. Ogni blocco deve essere anche un array. Come minimo è necessario fornire il primo elemento dell’array; il nome del blocco (es core/paragraph. ). È possibile aggiungere facoltativamente un secondo elemento dell’array per gli attributi e un terzo elemento dell’array per i blocchi nidificati (ad es. Blocchi Cover, Columns). Diventerà più chiaro quando vedrai il codice.

Iniziamo in modo semplice. Supponiamo di avere una register_post_type()chiamata di funzione per registrare un tipo di post personalizzato ‘ book‘. Vogliamo precompilare tutti i nuovi post di questo tipo di post con un blocco di paragrafo con un segnaposto che dice all’autore cosa dovrebbe scrivere.

Si noti che l’array di attributi (con ‘segnaposto’ al suo interno) è facoltativo. Ora, con questo parametro ‘modello’ ogni volta che creiamo nuovi post, verrà creato con un blocco di paragrafo che ha il segnaposto "Scrivi qui la tua introduzione…".

Diamo un’occhiata a un esempio più complicato: i blocchi nidificati. Supponiamo di voler aggiungere un blocco di copertina che abbia un blocco di intestazione, un paragrafo e un pulsante al suo interno, allineato al centro. Il titolo e il paragrafo avranno un segnaposto:

L’immagine qui sotto mostra cosa otterremo quando creeremo nuovi post di libri. Sembra meno intimidatorio di una tela bianca, giusto?

Tieni presente che gli attributi sono diversi in ogni tipo di blocco e possono differire anche nella tua configurazione. Nell’esempio di codice sopra aggiungo due attributi al blocco Cover; blocca l’allineamento a "Larghezza intera" e sovrapponi il colore a un colore predefinito da una tavolozza di colori personalizzata.

Gli allineamenti dei blocchi "Wide Width" e "Full Width" devono essere supportati in modo specifico nel tuo tema. Ho un post che spiega come aggiungere supporto nel tuo tema per ulteriori allineamenti di blocchi se non hai familiarità con questo. In secondo luogo, il mio tema fornisce una tavolozza di colori Gutenberg personalizzata in cui uno dei colori della tavolozza è denominato "profilo blu". Questo probabilmente non esisterà nel tuo codice. Il collegamento sopra lo spiega anche se non hai familiarità con la tavolozza Gutenberg personalizzata.

Il motivo per cui scelgo di fornire un colore di sovrapposizione come attributo è dovuto al modo in cui si comporta il blocco Cover. Quando crei un blocco Cover, inizia chiedendoti di scegliere tra impostare un’immagine di sfondo o scegliere un colore di sfondo. Fino a quando l’autore non sceglie attivamente uno di questi, il blocco Cover nasconde tutti i contenuti che ha (l’intestazione, il paragrafo e il pulsante che abbiamo aggiunto)! Appariranno all’improvviso dopo aver scelto un’immagine o un colore. Pertanto, per evitare confusione, ho preselezionato un colore di sfondo in modo che l’autore veda subito tutti i blocchi all’interno. Il colore può sempre essere comunque modificato nell’Inspector (barra laterale).

Blocco del modello di blocco

Con il modello di blocco fornito, l’autore può riorganizzare e rimuovere qualsiasi blocco precompilato, nonché aggiungere nuovi blocchi ovunque lo desideri. Se vuoi evitarlo c’è un altro parametro per register_post_type(): ‘ template_lock‘.

Il template_lockparametro ‘ ‘ accetta due valori; ‘ all‘ o ‘ insert‘.

L’impostazione di ‘ template_lock‘ su ‘ allimpedisce completamente agli autori di riorganizzare, rimuovere o aggiungere nuovi blocchi al modello di blocco. Possono solo modificare il contenuto e le impostazioni dei blocchi definiti come modello di blocco. Ciò è utile nei casi in cui desideri che tutti i tipi di post siano costituiti dagli stessi blocchi nello stesso ordine, né più né meno.

L’uso di ‘ insert‘ per ‘ template_lock‘ consente agli autori di riorganizzare i blocchi nel modello di blocco. Ma gli autori non possono ancora aggiungere nuovi blocchi o eliminare nessuno dei blocchi.

Ecco come bloccare completamente il modello di blocco per il tipo di post personalizzato ‘ book‘:

L’utilizzo di un modello di blocco bloccato in Gutenberg apparirà come di seguito. Si noti che mancano le icone di azione per la riorganizzazione dei blocchi e per la rimozione dei collegamenti di blocco nel menu. Non ci sono nemmeno icone di azione per aggiungere nuovi blocchi (il piccolo "+") ovunque.

Modifica dei modelli di blocco per i tipi di post esistenti

Se desideri utilizzare i modelli di blocco su post o pagine, puoi farlo anche tu. Aggancia una funzione inite usa [get_post_type_object](https://developer.wordpress.org/reference/functions/get_post_type_object/)(). Fornisci il tipo di post che desideri come parametro (o ‘ post‘ o ‘ page‘). Questo restituisce un oggetto a cui puoi assegnare le proprietà ‘ template‘ e ‘ template_lock‘.

Questo è un esempio dell’aggiunta dello stesso modello di blocco e della stessa proprietà di blocco di cui sopra alle pagine:

Conclusione

In questo post abbiamo imparato come ottenere un maggiore controllo dei blocchi nell’editor Gutenberg di WordPress. Ci sono molti vantaggi nel farlo, specialmente in combinazione con tipi di post personalizzati che devono seguire una struttura specifica. L’uso delle tecniche di cui sopra ti aiuterà a semplificare maggiormente il tuo processo, sia come webmaster (aiutando le persone a scrivere post migliori), sia come sviluppatore di temi (garantindo un design comune). I modelli di blocco bloccati potrebbero essere una soluzione diversa rispetto ai modelli di post personalizzati e ai meta meta.

La personalizzazione dei modelli di blocco è ancora una caratteristica piuttosto nascosta di Gutenberg al momento. Ma mi aspetto che cambi man mano che Gutenberg si sviluppa e ottiene un posto più familiare all’interno di WordPress.