Nell’era di Gutenberg, il lavoro di progettazione non è strettamente legato ai temi di WordPress. Il CMS fornisce agli utenti tutti gli strumenti di design necessari per creare un ottimo sito web e il tema vuole essere più un elemento che aggiunge ulteriori strumenti di design.
I block template offrono ancora maggiori possibilità nella creazione di un sito. Secondo il Block Editor Handbook:
Un block template è definito come un elenco di blocchi. Tali blocchi possono avere attributi predefiniti, contenuti segnaposto ed essere statici o dinamici. I block template consentono di specificare uno stato iniziale predefinito per una sessione dell’editor.
In altre parole, i block template sono collezioni pre-costruite di blocchi utilizzati per impostare uno stato predefinito in modo dinamico sul client.
👉 I block template sono diversi dai template file.
I template file sono file PHP come index.php, page.php e single.php e funzionano allo stesso modo sia con i temi classici che con quelli a blocchi, secondo la gerarchia dei template di WordPress. Nei temi classici, questi file sono scritti in PHP e HTML. Nei temi a blocchi, invece, sono interamente composti da blocchi.
👉 I block template sono diversi dai block pattern.
I block pattern devono essere aggiunti manualmente alle pagine, mentre i block template forniscono automaticamente il layout iniziale e le impostazioni predefinite quando l’amministratote o i membri del team creano un nuovo post.
È anche possibile legare block template specifici ai tipi di post personalizzati e bloccare alcuni blocchi o funzioni per costringere gli utenti a utilizzare i layout predefiniti o per evitare errori.
Ci sono due modi per creare un block template. È possibile utilizzare la block API per dichiarare un array di tipi di blocco tramite PHP, oppure creare un tipo di blocco personalizzato utilizzando il componente InnerBlocks.
Cominciamo!
Come creare un block template con PHP
Uno sviluppatore della vecchia scuola può definire un block template personalizzato utilizzando un plugin o il file functions.php del tema. Se si decide di utilizzare un plugin, si comincia avviando il proprio editor di codice preferito, si crea un nuovo file PHP e si aggiunge il seguente codice:
<?php
/*
* Plugin Name: My Block Templates
* Plugin URI: https://example.com/
* Description: An example plugin
* Version: 1.0
* Requires at least: 5.5
* Requires PHP: 8.0
* Author: Your name
* Author URI: https://author.example.com/
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Update URI: https://example.com/my-plugin/
*/
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Nel codice qui sopra, get_post_type_object recupera un tipo di post in base al nome.
Salviamo il file nella cartella wp-content/plugins, passiamo alla schermata dei plugin nella bacheca di WordPress e attiviamo il plugin My Block Templates.
Ora, quando creiamo un nuovo post, l’editor lancia automaticamente il block template con un blocco immagine, un titolo e un paragrafo.
Possiamo anche aggiungere un array di impostazioni per ogni blocco e creare strutture annidate di blocchi. La funzione che segue crea un block template più avanzato con blocchi interni e impostazioni:
function myplugin_register_my_block_template() {
$block_template = array(
array( 'core/image' ),
array( 'core/heading', array(
'placeholder' => 'Add H2...',
'level' => 2
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );Nell’immagine che segue, vediamo l’output del codice qui sopra:
Finora abbiamo utilizzato solo i blocchi del core. Ma possiamo anche includere blocchi personalizzati o block pattern all’interno dei nostri block template, come mostrato nell’esempio che segue:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'page' );
$post_type_object->template = array(
array( 'core/pattern', array(
'slug' => 'my-plugin/my-block-pattern'
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Se decidiamo di creare un block template predefinito per un tipo di post personalizzato già registrato, non c’è molta differenza. Basta cambiare il tipo di post di get_post_type_object con il nome del nostro tipo di post personalizzato, come mostrato in questo esempio:
<?php
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'book' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Ora che sappiamo come creare un block template, possiamo fare un passo avanti e scoprire altri casi d’uso. Approfondiamo un po’ il discorso.
Block template con tipi di post personalizzati
Come abbiamo detto in precedenza, possiamo assegnare un block template a un tipo di post personalizzato. Possiamo farlo dopo che il tipo di post personalizzato è già stato registrato, ma potremmo preferire definire un block template al momento della registrazione del custom post type.
In questo caso, possiamo utilizzare gli argomenti template e template_lock della funzione register_post_type:
function myplugin_register_book_post_type() {
$args = array(
'label' => esc_html__( 'Books' ),
'labels' => array(
'name' => esc_html__( 'Books' ),
'singular_name' => esc_html__( 'Book' ),
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_rest' => true,
'rest_namespace' => 'wp/v2',
'has_archive' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
'template' => array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
)
);
register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );E questo è tutto. L’immagine che segue mostra il block template nell’interfaccia dell’editor per il custom post type Book.
Una volta terminato il layout, possiamo divertirci con le impostazioni dei blocchi per perfezionare il comportamento e l’aspetto del block template.
Perfezionare il block template con gli attributi dei blocchi
Abbiamo definito un block template come un elenco di blocchi. Ogni elemento dell’elenco deve essere un array contenente il nome del blocco e un array di attributi opzionali. Con gli array annidati, potremmo aggiungere un terzo array per i blocchi contenuti.
Un template con un blocco Columns può essere rappresentato come segue:
$template = array( 'core/columns',
// attributes
array(),
// nested blocks
array(
array( 'core/column' ),
array( 'core/column' )
)
);Come già detto, il secondo array dell’elenco è un array opzionale di attributi del blocco. Questi attributi permettono di personalizzare l’aspetto del template in modo che gli utenti possano concentrarsi sul contenuto del post senza preoccuparsi del layout e del design della pagina.
Per iniziare, possiamo utilizzare l’editor die blocchi per creare una struttura di blocchi che possa servire come riferimento per il template.
Aggiungiamo i nostri blocchi, personalizziamo il layout e gli stili, poi passiamo all’editor di codice e cerchiamo i delimitatori di blocco.
I delimitatori di blocco memorizzano le impostazioni e gli stili del blocco in coppie chiave/valore. Basta semplicemente copiare e incollare le chiavi e i valori dal markup del blocco per popolare il nostro array di attributi:
$template = array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary'
),
array(
array( 'core/column' ),
array( 'core/column' )
)
);Ripetiamo il processo per ogni blocco del template e il gioco è fatto.
$template = array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary',
'lock' => array(
'remove' => true,
'move' => true
)
),
array(
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/image',
array(
'style' => array( 'border' => array( 'radius' => '8px' ) )
)
)
)
),
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);Bloccare i blocchi
Possiamo bloccare blocchi specifici o tutti i blocchi compresi nel nostro template utilizzando la proprietà template_lock dell’oggetto $post_type_object.
Bloccare i template può essere molto utile quando si ha un blog con più autori e si vuole impedire a tutti o a determinati utenti di modificare il layout del block template.
Nell’esempio che segue, blocchiamo tutti i blocchi del block template:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );I blocchi bloccati mostrano un’icona a forma di lucchetto nella barra degli strumenti e nell’elenco dei blocchi:
Gli utenti possono sbloccare i blocchi dal menu Opzioni disponibile nella barra degli strumenti dei blocchi.
Cliccando su Sblocca, un popup modale permette di abilitare/disabilitare il movimento, impedire la rimozione o entrambe le cose:
template_lock può assumere uno dei seguenti valori:
all: impedisce agli utenti di aggiungere nuovi blocchi, spostare e rimuovere blocchi esistentiinsert: impedisce agli utenti di aggiungere nuovi blocchi e di rimuovere quelli esistenti.contentOnly: gli utenti possono modificare solo il contenuto dei blocchi inclusi nel modello. Si noti checontentOnlypuò essere utilizzato solo a livello di pattern o di template e deve essere gestito con il codice (si veda anche Locking APIs).
Se desideriamo bloccare dei blocchi specifici, possiamo utilizzare l’attributo lock per ogni blocco:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph', array(
'lock' => array(
'remove' => true,
'move' => true
)
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );L’attributo lock può assumere uno dei seguenti valori:
remove: impedisce agli utenti di rimuovere un blocco.move: impedisce agli utenti di spostare un blocco.
Possiamo anche utilizzare lock insieme a template_lock per regolare il comportamento dei blocchi inclusi nel block template. Nell’esempio che segue, blocchiamo tutti i blocchi tranne l’intestazione:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading', array(
'lock' => array(
'remove' => false,
'move' => false
)
) ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );L’immagine qui sotto mostra il block template con i blocchi bloccati e sbloccati:
Gli sviluppatori di blocchi possono anche utilizzare l’attributo lock nella definizione del blocco al livello attributes (si veda anche Individual block locking).
Impedire agli utenti di sbloccare i blocchi
Se avete testato il codice descritto finora nell’articolo, vi sarete reso conto che potete sbloccare i blocchi inclusi nel template (o qualsiasi altro blocco) dall’interfaccia dell’editor. Di default, tutti gli utenti con accesso all’editing possono bloccare o sbloccare i blocchi e, in questo modo, bypassare le impostazioni del template.
È possibile controllare se i blocchi possono essere bloccati o sbloccati utilizzando il filtro block_editor_settings_all.
Il filtro invierà qualsiasi impostazione all’editor inizializzato, il che significa che qualsiasi impostazione utilizzata per configurare l’editor all’inizializzazione può essere filtrata da un plugin PHP di WordPress prima di essere inviata.
La funzione di callback che utilizziamo con questo filtro prende due parametri:
$settings: un array di impostazioni dell’editor.$context: un’istanza della classeWP_Block_Editor_Context, un oggetto che contiene informazioni sull’editor di blocchi in fase di rendering.
Quello che bisogna fare è filtrare $settings['canLockBlocks'] impostandolo su true o false come mostrato nel seguente esempio:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Possiamo escludere determinati ruoli utente dal blocco/sblocco dei blocchi eseguendo un controllo condizionale sulle capacità dell’utente corrente.
Nel prossimo esempio, verifichiamo se l’utente corrente può modificare i post degli altri (in altre parole, se il ruolo dell’utente corrente è Editor o superiore):
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Le immagini che seguono mettono a confronto lo stato iniziale dell’editor per un amministratore e un autore. In primo luogo, Admin:
Ora, Autore:
E possiamo verificare qualsiasi condizione sull’utente corrente. In questo altro esempio, stiamo impedendo a un utente specifico di bloccare/sbloccare i blocchi:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
$user = wp_get_current_user();
if ( in_array( $user->user_email, [ '[email protected]' ], true ) ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Possiamo combinare più condizioni per avere un controllo granulare su chi può bloccare/sbloccare i blocchi nel template e chi no. Questo è un aspetto della cosiddetta esperienza curata.
Un attimo… Avete provato a modificare il contenuto del post utilizzando l’editor di codice? Potreste rimanere sorpresi nel vedere che gli utenti non autorizzati a sbloccare i blocchi dall’interfaccia utente possono comunque modificare il contenuto dall’editor di codice.
Disabilitare l’editor di codice per specifici ruoli utente
Di defailt, tutti gli utenti che possono modificare i contenuti possono accedere all’editor del codice. Questo potrebbe annullare le impostazioni del blocco e alcuni utenti potrebbero rovinare o cancellare il layout del template.
Ma abbiamo a disposizione un altro strumento. block_editor_settings_all permette di filtrare l’impostazione codeEditingEnabled per impedire a ruoli specifici di accedere all’editor di codice:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
$settings['codeEditingEnabled'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Con questo codice, gli utenti che non possono edit_others_posts (modificare i post di altri utenti) non potranno accedere all’editor di codice. L’immagine che segue mostra la barra delle opzioni di un autore.
Questo è tutto ciò che c’è da sapere per creare un block template tramite PHP. Ora, uno sviluppatore di blocchi Gutenberg che ami lavorare con JavaScript, potrebbe optare per un approccio diverso.
Come costruire un template utilizzando JavaScript
Aggiungere un block template a un post è diverso se decidiamo di utilizzare JavaScript. Possiamo comunque creare un template, ma per farlo bisogna creare un blocco personalizzato e utilizzare il componente InnerBlocks come descritto nella nostra guida allo sviluppo dei blocchi di Gutenberg.
InnerBlocks esporta una coppia di componenti che possono essere utilizzati nelle implementazioni dei blocchi per abilitare i contenuti dei blocchi annidati. – Fonte: InnerBlocks
Come funziona?
Possiamo utilizzare InnerBlocks nei blocchi personalizzati come qualsiasi altro componente di Gutenberg.
Per prima cosa, bisogna importarlo da un pacchetto insieme ad altre dipendenze:
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';Poi bisogna definire le proprietà di InnerBlocks. Nell’esempio che segue, dichiariamo una costante TEMPLATE che utilizziamo per impostare il valore della proprietà template dell’elemento InnerBlocks:
const TEMPLATE = [
[ 'core/paragraph', { 'placeholder': 'Add paragraph...' } ],
[ 'core/columns', { verticalAlignment: 'center' },
[
[
'core/column',
{ templateLock: 'all' },
[
[ 'core/image' ]
]
],
[
'core/column',
{ templateLock: 'all' },
[
[
'core/heading',
{'placeholder': 'Add H3...', 'level': 3}
],
[
'core/paragraph',
{'placeholder': 'Add paragraph...'}
]
],
]
]
]
];
registerBlockType( metadata.name, {
title: 'My Template',
category: 'widgets',
edit: ( props ) => {
return(
<div>
<InnerBlocks
template={ TEMPLATE }
templateLock="insert"
/>
</div>
)
},
save() {
const blockProps = useBlockProps.save();
return(
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
)
}
} );Il codice è piuttosto semplice. Si dovrebbe notare che abbiamo utilizzato l’attributo templateLock due volte, prima a livello di blocco e poi all’interno dell’elemento InnerBlocks. Per l’elenco completo delle proprietà disponibili, si legga la guida a InnerBlocks e il Manuale dell’editor di blocchi.
Ora provate voi.
Per prima cosa, create un’installazione locale di WordPress utilizzando DevKinsta o qualsiasi altro ambiente di sviluppo locale.
Quindi, lanciate il vostro strumento a riga di comando preferito, navigate nella cartella plugins ed eseguite il seguente comando:
npx @wordpress/create-block template-blockPotete cambiare il nome del blocco come desiderate. Se preferite controllare ogni aspetto del blocco iniziale, seguite le istruzioni della nostra guida definitiva allo sviluppo dei blocchi.
Una volta completata l’installazione, esegui questi comandi:
cd template-block
npm startAprite la bacheca di WordPress e andate alla schermata dei plugin. Trovate e attiva il plugin Template Block.
Nel vostro editor di codice preferito, aprite il file index.js che trovate nella cartella src. Copiate e incollate il codice qui sopra, salvate il file index.js e, nella bacheca di WordPress, create un nuovo post o una nuova pagina.
Aprite il pannello di inserimento dei blocchi e scorrete fino alla sezione Widget. Lì dovreste trovare il vostro blocco personalizzato.
Aggiungetelo al post, personalizzate il contenuto e salvate il post.
Se passate all’editor di codice, vedrete il seguente markup:
<!-- wp:create-block/template-block -->
<div class="wp-block-create-block-template-block"><!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"placeholder":"Add H3..."} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:create-block/template-block -->Ora visualizzate l’anteprima del risultato nel vostro browser preferito. Se l’aspetto del blocco deve essere migliorato, basta modificare gli stili nel file style.scss.
Quando sarete soddisfatti delle vostre personalizzazioni, interrompete il processo ed eseguite npm run build. Tutti i file del progetto saranno compressi e disponibili per la produzione nella nuova cartella build.
Facile e potente!
Ora potete creare template avanzati di blocchi da inserire nei contenuti con pochi clic.
Riepilogo
Aggiungendo un block template ai post o ai custom post type di WordPress può accelerare e migliorare notevolmente l’esperienza di creazione e di editing del sito. I block template sono utili soprattutto nei siti multiutente, dove più utenti sono abilitati a creare contenuti ed è necessario che rispettino lo stesso formato.
Questo permette anche di creare layout uniformi senza dover aggiungere manualmente un block pattern ogni volta che si crea un nuovo post. Si pensi a un sito di recensioni o di ricette, dove ogni pagina deve rispettare la stessa struttura.
Combinando le conoscenze acquisite nella creazione di blocchi personalizzati statici o dinamici, block pattern e block template, ora siete in grado di individuare sempre la soluzione più efficiente ed efficace per realizzare qualsiasi tipo di sito WordPress.
Ora a voi. Avete già esplorato i block template? In quale caso li trovate più adatti? Condividete le vostre esperienze nei commenti qui sotto.
Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.
Lascia un commento