Come creare i block pattern di WordPress

WordPress è un potente strumento di pubblicazione online che permette a chiunque di creare e condividere facilmente contenuti testuali e/o multimediali anche a chi non ha competenze di sviluppo web. Oltre a questo, WordPress è anche un ottimo strumento professionale per designer, marketer e sviluppatori, indipendentemente dal rispettivo background.

In breve, WordPress può essere il più prezioso collega di lavoro e può essere un valido aiuto per il successo in diversi tipi di professione.

Per questo motivo, su questo blog abbiamo pubblicato una serie di articoli per aiutare i nostri lettori ad acquisire le competenze necessarie per diventare sviluppatori WordPress:

• Come creare blocchi Gutenberg personalizzati
• Come creare blocchi dinamici per Gutenberg
• Come aggiungere meta box e custom field ai post in Gutenberg

E per chi preferisce i contenuti video, abbiamo anche un videocorso gratuito: Sviluppare blocchi personalizzati per Gutenberg.

E sì, si possono accrescere le aspettative di carriera acquisendo competenze nello sviluppo di Gutenberg, ma non è necessario essere web developer per creare layout avanzati su un sito WordPress.

Gli utenti di WordPress possono usufruire di diverse funzioni che consentono di creare facilmente layout a blocchi. In questo articolo ci concentreremo sui block pattern.

Cosa sono i block pattern

I block pattern sono insiemi di blocchi precostituiti che si possono aggiungere ai contenuti di un sito WordPress e personalizzare utilizzando gli stessi strumenti di progettazione disponibili per i blocchi Gutenberg.

Sono stati introdotti con WordPress 5.5 per permettere di inserire nei contenuti strutture complesse e pronte all’uso di blocchi annidati con pochi clic.

I temi a blocchi di solito forniscono alcuni block pattern che si possono aggiungere ai contenuti direttamente dal pannello di inserimento dei blocchi. Il nuovo tema predefinito incluso in WordPress 6.7, Twenty Twenty-Five, dispone di oltre 70 block patterns.

Ma non ci sono solo i pattern forniti dal tema.

Innanzitutto, abbiamo tantissimi block pattern pronti all’uso nella galleria dei Pattern di WordPress.

Inoltre, è possibile creare un numero illimitato di pattern utilizzando la Pattern API o gli strumenti di editing disponibili nell’editor dei blocchi. In più, è possibile utilizzare i pattern personalizzati internamente al proprio sito web, esportarli su altri siti o condividerli pubblicamente nella galleria dei Patterns.

A partire da WordPress 6.3, un nuovissimo sistema di pattern rende il processo di creazione dei pattern più flessibile. Ora è più chiaro il tipo di layout che si sta creando e l’effetto che le personalizzazioni hanno sul sito.

Ci sono due tipi principali di block pattern:

• Block pattern sincronizzati
• Block pattern standard (non sincronizzati)

La differenza principale tra i due tipi di pattern è che tutte le modifiche apportate a un pattern sincronizzato si applicano a tutte le occorrenze del pattern sull’intero sito web. Al contrario, le modifiche apportate a un block pattern standard hanno effetto solo su una specifica istanza del pattern.

Ma c’è molto altro da dire sui block pattern. Come funziona questo sistema e come sfruttare le nuove funzioni di editing aggiunte con le versioni più recenti di WordPress? Scopriamolo.

Block pattern predefiniti

I pattern predefiniti sono “non sincronizzati”, il che significa che le modifiche apportate a un block pattern avranno effetto solo sulla specifica istanza che si sta modificando e non saranno applicate ad altre istanze che potrebbero essere state aggiunte ad altri post o pagine del sito.

È possibile utilizzare i block pattern predefiniti per inserire layout precostituiti da personalizzare sul posto, modificando immagini, testo, stili o aggiungendo e rimuovendo elementi.

Una volta creato un block pattern personalizzato, lo si potrà aggiungere in qualsiasi punto del sito e personalizzarlo con pochi clic utilizzando i controlli integrati nell’editor.

È possibile sfogliare e inserire i block pattern predefiniti dalla scheda Pattern presente nel pannello di inserimento dei blocchi dell’editor oppure accedere all’area di amministrazione dei Pattern nell’editor del sito. È anche possibile sfogliare i pattern disponibili nella directory dei Pattern.

Nella galleria, basta scegliere un pattern, fare clic sul pulsante Copia pattern e incollarlo direttamente nel contenuto.

Siete liberi di personalizzare il gruppo di blocchi inclusi nel pattern senza influenzare il pattern registrato o qualsiasi istanza presente sul sito.

Block pattern sincronizzati e non sincronizzati

Come anticipato, a partire da WordPress 6.3, il sistema dei pattern è stato semplificato e reso più coerente.

Ora è più facile per l’utente creare pattern personalizzati direttamente dall’editor dei blocchi e gestirli dalla bacheca di WordPress, senza dover mettere mano al codice.

Ora è possibile creare:

• Block pattern sincronizzati
• Block pattern non sincronizzati

La differenza tra i due tipi è che tutte le modifiche apportate a un pattern sincronizzato saranno applicate a tutte le occorrenze di quel pattern sull’intero sito web.

Al contrario, le modifiche apportate a un block pattern non sincronizzato avranno effetto solo su quella specifica istanza del pattern e non saranno applicate ad eventuali altre istanze presenti in altri post o pagine del sito.

Dal punto di vista di uno sviluppatore, i block pattern personalizzati sono registrati nel database di WordPress come tipi di post wp_block, mentre un meta field wp_pattern_sync_status registra lo stato di sincronizzazione del pattern.

Grazie al nuovo sistema di gestione dei pattern, è possibile creare pattern sincronizzati e non sincronizzati direttamente dall’editor del sito o dei post. È sufficiente progettare il layout, selezionare i blocchi e fare clic sull’icona dei tre puntini nella barra degli strumenti dei blocchi. Quindi scegliere Crea pattern dal menu a tendina.

Nell’esempio che segue, creeremo un pattern sincronizzato a partire da un blocco Gruppo, un’intestazione, un paragrafo e un pulsante.

Facendo clic su Crea pattern, viene richiesto di inserire un nome e stabilire se si tratta di un pattern sincronizzato o non sincronizzato.

E questo è tutto. Ora il pattern sincronizzato apparirà nell’elenco dell’area di amministrazione dei Pattern dell’editor del sito nella sezione I miei pattern.

Qui è possibile visualizzare l’anteprima dei pattern e verificare lo stato di sincronizzazione.

Ora è possibile personalizzare il proprio pattern dall’editor del sito.

Di nuovo, le modifiche apportate ai pattern sincronizzati hanno effetto su tutte le occorrenze di quel pattern nel sito web. Le modifiche apportate ai pattern standard influiscono solo sulle istanze future del pattern.

Questo è possibile perché WordPress gestisce i due tipi di pattern in modo diverso. Per capire la differenza, si crei una copia non sincronizzata di pattern, quindi in un nuovo post o una nuova pagina si aggiungano i due pattern. Una volta fatto, andiamo nell’editor di codice e controlliamo il codice.

Il pattern sincronizzato è generato dal seguente codice:

<!-- wp:block {"ref":512} /-->

Ciò significa che WordPress recupererà il post con ID 512 per generare il codice HTML da rendere sullo schermo.

Il secondo blocco non è identificato da un ID. L’editor di codice contiene l’intero markup che compone il pattern.

I pattern sincronizzati sono utili soprattutto per creare elementi da inserire in più pagine del sito e/o in siti diversi. Si pensi alle call to action, ai banner promozionali, alle tabelle dei prezzi e così via.

Come anticipato, WordPress considera i custom pattern come tipi di post wp_block e, in quanto tali, li memorizza nella tabella wp_posts.

Una volta creati, è possibile gestirli dalla schermata di amministrazione Pattern. Si può accedere a questa pagina in diversi modi:

• Aggiungendo /wp-admin/edit.php?post_type=wp_block all’URL di WordPress del sito.
• Facendo clic sul pulsante Scopri tutti i pattern nel pannello di inserimento dei blocchi.
• Facendo clic sul pulsante I miei pattern nell’editor del sito.

Nella schermata dei pattern, è possibile

• Modificare, eliminare o esportare il pattern come JSON,
• Importare pattern da JSON,
• Creare nuovi pattern.

Nell’editor del sito è possibile anche duplicare e rinominare i pattern.

Override dei pattern sincronizzati

Introdotta con WordPress 6.6, i block pattern override sono un terzo tipo di pattern che si basano sulla Block Bindings API per offrire le caratteristiche di entrambi i tipi di pattern.
I block pattern override consentono di creare block pattern che mantengono la stessa struttura in ogni punto del sito e cambiano in sincro con le personalizzazioni apportate alla struttura e allo stile del pattern nell’editor del sito. In questo senso, i pattern override sono simili ai pattern sincronizzati.
Tuttavia, la sovrascrittura dei pattern è simile anche ai pattern non sincronizzati, perché è possibile modificare il contenuto di blocchi specifici inclusi nel pattern senza influire su altre istanze dello stesso pattern presenti nel sito.
Quindi, i block pattern override sono pattern sincronizzati con elementi specifici non sincronizzati.

Vediamo come creare un pattern override.

Fase 1. Andiamo alla sezione Pattern e duplichiamo uno dei pattern esistenti, ad esempio il pattern Pricing, 2 columns del tema predefinito Twenty Twenty-Five. Aggiungiamo un nome e impostiamo la copia su Pattern sincronizzato.

Fase 2. Apriamo I miei pattern e cerchiamo il nuovo pattern sincronizzato. Apriamolo e selezioniamo uno dei blocchi da sovrascrivere, ad esempio il blocco Heading.

Andiamo nella barra laterale delle impostazioni del blocco e scorriamo fino alla sezione Avanzate. Qui troveremo l’opzione Abilita sovrascrittura.

Cliccando sul pulsante, ci viene chiesto di inserire un nome per la sovrascrittura.

Fase 3. Ripetiamo la stessa procedura per ogni blocco che si desidera sovrascrivere. Al termine, creiamo un nuovo post o pagina e insertiamo il pattern personalizzato.

Fase 4. Nell’editor dei post, modifichiamo il contenuto dei blocchi da sovrascrivere, salviamo il post e verifichiamo il risultato sul front-end.

Quando si modifica un’istanza di sovrascrittura di un pattern nell’editor del post, la barra laterale delle impostazioni del blocco mostra i campi che possono essere modificati. Nell’esempio precedente, abbiamo reso sovrascrivibili l’intestazione e alcuni paragrafi.

È possibile aggiungere un numero qualsiasi di pattern override in qualsiasi punto del sito e ogni istanza mostrerà la stessa struttura originale, ma sarà pronta per la personalizzazione.

Ora, apriamo il pattern nell’editor del sito e passiamo all’editor del codice. Il codice dovrebbe essere simili a questo:

<!-- wp:heading 
{
	"textAlign":"center",
	"metadata":{
		"name":"Heading",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	},
	"align":"wide"
} 
-->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph 
{
	"align":"center",
	"metadata":{
		"name":"Subtitle",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	}
} 
-->
<p class="has-text-align-center">Cancel or pause anytime.</p>
<!-- /wp:paragraph -->

Nel delimitatore del blocco, si noterà la proprietà metadata.bindings. Questa rende i blocchi Heading e Paragraph modificabili. La proprietà __default indica a WordPress di connettere tutti gli attributi supportati a una fonte specifica, che è "core/pattern-overrides".

Adesso, nell’editor del post, passiamo all’Editor del codice. Il codice dovrebbe essere simile a questo:

<!-- wp:block 
{
	"ref":518,
	"content":{
		"Heading":{
			"content":"Choose your plan"
		},
		"Subtitle":{
			"content":"Try our services with no risk thanks to our 30-day guarantee"
		},
		"Plan 1 title":{
			"content":"Starter"
		},
		"Plan 2 title":{
			"content":"Business"
		}
	}
} 
/-->

Qui vedremo un riferimento al block pattern e un insieme di proprietà per ogni blocco impostato come modificabile.

Si noti che, poiché la sovrascrittura dei pattern è un’implementazione della Block Bindings API, è possibile sovrascrivere solo i blocchi supportati. Al momento in cui si scrive, la sovrascrittura è supportata dai blocchi Intestazione, Paragrafo, Immagine, e Pulsante.

Parti di template

Prima dell’era Gutenberg, i temi e i template di WordPress erano basati principalmente su PHP. Erano requisiti fondamentali per creare o personalizzare i template una solida conoscenza dei child theme, della gerarchia dei template e dei principali linguaggi di sviluppo front-end. Ma le cose sono cambiate con l’introduzione dei temi a blocchi.

Nei temi a blocchi e nei temi classici che hanno optato per questa funzione, è possibile creare o personalizzare facilmente un template o una parte di template nell’interfaccia dell’Editor del sito. Non sono richieste competenze di sviluppo, a meno che non si decida di diventare sviluppatori di temi.

Un tema a blocchi è un elenco di blocchi. Esempi ne sono il titolo del sito, il logo e la navigazione.

Le parti di template sono sezioni specifiche di una pagina che possono essere visualizzate in diverse posizioni, come l’intestazione e il footer, e possono essere visualizzate in ogni pagina di un sito WordPress.

È possibile creare e modificare i template dall’interfaccia dell’editor del sito, dove si possono utilizzare tutti gli strumenti di editing disponibili per i blocchi.

A differenza dei block pattern, però, le parti di template sono destinate ad aree del sito che non cambiano spesso.

Differenze tra pattern e parti di template

Per riassumere, ecco le principali differenze:

Block pattern predefiniti

• I block pattern predefiniti sono layout di blocchi predefiniti che si possono aggiungere ai contenuti e personalizzare utilizzando gli stessi strumenti dei blocchi in essi contenuti. Le modifiche apportate a un block pattern avranno effetto solo su quella singola istanza di block pattern.
• È possibile copiare e incollare i pattern predefiniti dalla directory dei Pattern.
• È possibile creare nuovi pattern e pubblicarli nella directory dei Pattern.

Block pattern personalizzati

• I block pattern personalizzati sono gruppi di blocchi sincronizzati o non sincronizzati che possono essere utilizzati in qualsiasi post o pagina del sito.
• I block pattern personalizzati sono memorizzati nella tabella wp_posts come tipo di post wp_block.
• È possibile importare ed esportare block pattern personalizzati da e verso altri siti web.

Parti di template

• Le parti di Template sono aree specifiche di una pagina che possono essere visualizzate in diverse posizioni, tra cui intestazione, footer e barra laterale, ricorrenti in diverse pagine del sito WordPress.
• È possibile creare e modificare i template attraverso l’interfaccia dell’editor del sito.
• I template sono destinati ad aree del sito che non cambiano spesso.

Come creare block pattern per temi e plugin

Come abbiamo detto, WordPress 6.3 ha introdotto un nuovo sistema di gestione dei block pattern. Ora è più facile creare pattern sincronizzati o non sincronizzati senza lasciare l’interfaccia dell’editor. Inoltre, è possibile importare ed esportare pattern personalizzati con pochi clic dalla bacheca di WordPress.

Ma gli sviluppatori di temi e plugin hanno la possibilità di creare block pattern anche in altri modi.

Insieme ai block pattern, WordPress 5.5 ha introdotto una nuova API per sviluppatori che consente di “creare blocchi di contenuto predefiniti che possono essere facilmente inseriti in post, pagine, tipi di post personalizzati e template”. La nuova API fornisce le funzioni register_block_pattern e register_block_pattern_category per registrare i block pattern e le rispettive categorie.

A partire da WordPress 6.0, è possibile registrare i block pattern anche con un file PHP.

Quindi, al momento in cui scriviamo, ci sono due modi per creare un block pattern.

• Utilizzando la funzione register_block_pattern,
• Aggiungendo un file PHP al tema all’interno della cartella patterns.

Creare un block pattern con un plugin

Il primo metodo è destinato principalmente agli sviluppatori WordPress, ma è abbastanza semplice da poter essere utilizzato anche da sviluppatori non esperti.

Se si decide di seguire il primo metodo, è possibile creare un block pattern utilizzando le due nuove funzioni register_block_pattern e register_block_pattern_category nel file PHP di un plugin o nel file functions.php del tema.

Selezione o registrazione della categoria del pattern

Innanzitutto, è necessario scegliere una categoria per il pattern. Con le ultime versioni di WordPress, sono state aggiunte nuove categorie di pattern, e alcune categorie esistenti sono state modificate.

Per ottenere l’elenco di tutte le categorie registrate, basta aprire l’editor di Post e incollare il seguente codice nella console del browser:

wp.data.select('core').getBlockPatternCategories()

In WordPress 6.7 con il tema Twenty Twenty-Five, si ottiene il seguente elenco di categorie di pattern:

Se il nostro block pattern non rientra in nessuna delle categorie predefinite, possiamo anche registrare una nuova categoria utilizzando la funzione register_block_pattern_category.

Questa funzione accetta due argomenti:

• $category_name: nome della categoria del pattern, compreso il namespace.
• $category_properties: un array di proprietà della categoria.

Un esempio ci aiuterà a capire meglio come registrare una nuova categoria di pattern:

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

La registrazione del Block Pattern

Una volta registrata la categoria del pattern, il passo successivo è quello di registrare il block pattern stesso. A questo scopo, l’API fornisce la funzione register_block_pattern:

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

Questa funzione accetta due argomenti:

• $pattern_name: un nome leggibile dalla macchina nella forma di namespace/pattern-name.
• $pattern_properties: un array di proprietà per il pattern.

Ecco un elenco delle proprietà dei pattern attualmente disponibili:

• title (obbligatorio): un titolo leggibile per il pattern.
• content (obbligatorio): il markup del pattern.
• description: un testo che descrive il pattern nel block inserter. La descrizione è facoltativa ma è consigliata in quanto aiuta gli utenti a trovare il pattern.
• categories: un array di una o più categorie di pattern registrate. È necessario registrare una categoria prima di poterla utilizzare (vedi la sezione precedente).
• keywords: un array di parole chiave che aiutano gli utenti a trovare il pattern.
• viewportWidth: un numero intero che specifica la larghezza del pattern nell’anteprima.
• blockTypes: un array opzionale di tipi di blocco che verranno utilizzati con il pattern.
• postTypes: un array di tipi di post che potranno utilizzare il pattern.
• templateTypes: un array di tipi di template in cui utilizzare pattern (disponibile da WordPress 6.2).
• inserter: un valore booleano che stabilisce se il pattern deve essere visibile nel pannello di inserimento dei blocchi. Il valore false nasconde il pattern. Di default, tutti i pattern vengono visualizzati nel pannello di inserimento dei blocchi.
• source (facoltativo): una stringa che identifica la fonte del pattern. La stringa plugin registra il pattern da un plugin; la stringa theme va utilizzata per registrare il pattern tramite un tema.

Ecco un esempio di utilizzo di register_block_pattern:

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

Nel codice qui sopra, abbiamo utilizzato la proprietà postTypes per rendere il pattern disponibile solo per i normali articoli del blog. È anche possibile impostare un valore diverso per postTypes per rendere il pattern disponibile per diversi tipi di post. Se si decide di rendere il pattern disponibile per un solo tipo di post product, si scriverà:

'postTypes' => array( 'product' ),

Ora creiamo un nuovo post (o tipo di post personalizzato), apriamo pannello di inserimento dei blocchi e facciamo clic sull’etichetta Pattern. Dovrebbe esserci una nuova categoria di pattern (My Pattern Category) con il block pattern personalizzato. Ora potete fare le vostre prove con le proprietà per personalizzare i vostri block pattern.

Facciamo un passo avanti e proviamo a creare un block pattern completo.

Un esempio di block pattern

Supponiamo di voler creare un block pattern che includa un titolo, un’immagine, un paragrafo e un pulsante.

Nell’editor, creiamo il layout del block pattern, poi passiamo all’editor di codice e copiamo il markup.

Nel nostro esempio, abbiamo il seguente codice:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Ora possiamo ottimizzare questo codice. Se stiamo registrando il block pattern con un plugin, dobbiamo modificare l’URL dell’immagine come segue:

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

In questo modo, WordPress non cercherà l’immagine negli upload, ma nella cartella images del plugin.

Possiamo quindi utilizzare la proprietà viewportWidth per fornire un’anteprima migliore del pattern nel pannello di inserimento dei blocchi:

'viewportWidth' => 800,

Possiamo anche includere una serie di parole chiave per aiutare gli utenti a trovare il block pattern:

'keywords' => array( 'cta', 'demo', 'kinsta' ),

Un’altra opzione per aiutare gli utenti a trovare il blocco nelle ricerche è quella di aggiungere un array di tipi di blocco:

'blockTypes' => array( 'core/button' ),

In questo modo, il block pattern apparirà nei suggerimenti ogni volta che un utente cercherà uno dei blocchi specificati.

La proprietà postTypes permette di rendere il block pattern disponibile solo per determinati tipi di post. Ad esempio, è possibile rendere il pattern visibile solo per il tipo di post product:

'postTypes' => array( 'product' ),

Infine, possiamo aggiungere una classe CSS all’elemento che contiene il block pattern.

Per farlo, bisogna creare un nuovo gruppo con l’attributo className:

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
	<!-- Your blocks -->
</div>
<!-- /wp:group -->

Nota è necessario aggiungere lo stesso nome di classe al successivo elemento div.

Per un’analisi più approfondita dei block pattern e per altri esempi di codice, si veda anche Block patterns nel Manuale dei temi di WordPress.org.

Creare un block pattern con un file

Come già accennato, WordPress 6.0 ha introdotto un nuovo e più semplice modo per aggiungere block pattern ai temi di WordPress. Ora è possibile registrare implicitamente i block pattern dichiarandoli come file PHP in una cartella /patterns nella root del tema.

Supponiamo di voler registrare implicitamente lo stesso block pattern costruito nella sezione precedente in un tema a blocchi. In questo esempio, utilizzeremo il tema Twenty Twenty-Three.

Possiamo impostare gli stessi parametri utilizzati in precedenza, ma includendoli in un commento nell’intestazione del file. Inoltre, invece di usare i nomi dei parametri in camel case, separeremo le parole con uno spazio e, invece di usare gli array, useremo elenchi separati da virgole.

Per prima cosa, disattiviamo il plugin che abbiamo utilizzato per registrare il pattern nell’esempio precedente. Quindi creiamo un nuovo file my-block-pattern.php e inseriamo la seguente intestazione:

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, kinsta
 * Block Types: core/buttons
 */
?>

Fatto questo, aggiungiamo il contenuto al block pattern. Possiamo utilizzare lo stesso markup dell’esempio precedente, ma prima dovremo modificarlo in alcuni punti:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Il markup è sostanzialmente invariato rispetto all’esempio precedente. Abbiamo apportato solo due modifiche.

L’URL dell’immagine segnaposto è ora generato dalla funzione get_theme_file_uri:

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

Naturalmente, bisogna prima inserire l’immagine placeholder.jpg nella cartella /assets/images del tema.

La seguente istruzione genera il testo che si desidera tradurre.

<?php echo __( 'View plans', 'text-domain' ); ?>

Ora salviamo il file e creiamo un nuovo post. Il block pattern dovrebbe apparire nelle categorie Featured e Banners.

Rimmuovere il supporto, deregistrare e nascondere i block pattern

In alcune situazioni, potremmo voler eseguire delle azioni particolari sui block pattern. Ad esempio, potremmo sostituire un block pattern del core con un block pattern di nostra creazione o deregistrare una categoria in determinate condizioni. Ecco le operazioni possibili.

1. Rimuovere il supporto di tutti i block pattern del core

Per prima cosa, gli sviluppatori di temi possono rimuovere il supporto dei block pattern del core e fornire un proprio set di pattern. Per rimuovere il supporto dei pattern del core, si può utilizzare la funzione remove_theme_support in questo modo:

remove_theme_support( 'core-block-patterns' );

Consigliamo di agganciare la funzione remove_theme_support all’hook after_setup_theme.

2. Deregistrare un singolo block pattern

È possibile deregistrare uno specifico block pattern nel caso in cui si voglia fornire un’alternativa personalizzata oppure si preferisca che non venga utilizzato con un tema.

La Patterns API mette a disposizione la funzione unregister_block_pattern:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Per deregistrare un block pattern del core, bisogna utilizzare la seguente funzione:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

unregister_block_pattern va utilizzata con l’hook init.

3. Deregistrare una categoria di block pattern

Possiamo deregistrare una categoria di pattern agganciando la funzione unregister_block_pattern_category all’hook init:

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

Creare e condividere block pattern con il Pattern Creator

Possiamo anche creare block pattern e condividerli con la comunità grazie a uno strumento online gratuito: Il Pattern Creator.

Se si dispone di un account su WordPress.org, è possibile accedere al Pattern Creator dalla directory dei Pattern.

Una volta lì, si farà clic su Create new pattern. Si aprirà una versione dell’editor di blocchi specifica per i pattern.

È possibile utilizzare immagini gratuite ospitate dalla libreria Openverse.

Quando siete soddisfatti delle vostre modifiche, salvate la bozza o inviate il pattern in revisione.

A questo punto, torniamo alla directory dei Pattern e selezioniamo My Patterns. Qui troveremo tutti i nostri pattern suddivisi in tre schede: Tutti, Bozze e In attesa di revisione.

Terminate le modifiche, potremo condividere il pattern con la community. Basta cliccare sul pulsante Invia nell’angolo in alto a destra dell’editor per inviare il pattern in revisione (bisognerà ricordarsi di seguire le linee guida dei pattern prima di inviarlo).

Riepilogo

WordPress ha compiuto 20 anni e le statistiche ci dicono che è ancora il CMS più utilizzato al mondo, con una quota di mercato del 63,3% a maggio 2023.

Questi numeri dimostrano che WordPress è un eccellente strumento di pubblicazione utilizzato in tutto il mondo da migliaia di professionisti, sviluppatori e semplici blogger.

Dedicare tempo e risorse all’acquisizione di nuove competenze nello sviluppo di WordPress e all’apprendimento di funzionalità avanzate come i blocchi personalizzati e i block pattern può rivelarsi un ottimo investimento per una carriera di marketer, web designer o editore.

Ora tocca a voi. Avete già creato dei block pattern? Ne avete condiviso qualcuno con la community? Ci piacerebbe vedere le vostre creazioni. Lasciate un commento con un link o con le vostre idee sui block pattern.