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. Ma oltre a questo, è anche un ottimo strumento professionale per designer, marketer e sviluppatori, indipendentemente dal rispettivo background e dalle rispettive competenze.

In breve, WordPress può essere il più prezioso collega di lavoro e permettere di avere successo in diverse professioni.

Per questo motivo, su questo blog abbiamo pubblicato una serie di articoli per aiutare i nostri lettori ad acquisire le competenze necessarie per diventare uno sviluppatore 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 uno sviluppatore per creare layout avanzati sul un sito WordPress.

Gli utenti di WordPress possono usufruire di potenti funzioni che consentono di creare facilmente layout a blocchi avanzati. In questo post concentreremo la nostra attenzione sui block pattern.

Cosa sono i block pattern

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

I pattern sono stati introdotti per la prima volta con WordPress 5.5 per consentire agli utenti di WordPress di inserire nei contenuti strutture complesse e pronte all’uso di blocchi annidati con pochi clic.

WordPress offre alcuni block pattern integrati per la creazione dei contenuti. Inoltre, i temi a blocchi di solito forniscono altri block pattern che si possono aggiungere ai contenuti direttamente dal pannello di inserimento dei blocchi.

Ad esempio, l’attuale tema predefinito, Twenty Twenty-Three, offre i seguenti block pattern:

• Call to action
• Default Footer
• Hidden 404
• Hidden Comments
• Hidden No Results Content
• Post Meta

Inoltre, non si è limitati ai pattern forniti da WordPress o dal tema.

Innanzi tutto, la directory dei Pattern fornisce tantissimi block pattern pronti all’uso.

Inoltre, è possibile creare un numero illimitato di pattern personalizzati utilizzando la Patterns API o gli strumenti di design disponibili nell’editor di blocchi. È possibile utilizzare i pattern personalizzati all’interno del proprio sito web, esportarli su altri siti web o condividerli pubblicamente nella directory dei Pattern.

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

Vi state chiedendo come funziona questo sistema e come sfruttare le nuove funzionalità di editing introdotte con WordPress 6.3? Scopriamolo insieme.

Block pattern predefiniti

I pattern predefiniti sono block pattern “non sincronizzati”, il che significa che le modifiche apportate a un block pattern avranno effetto solo sull’istanza specifica 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.

I block pattern sono riutilizzabili: ciò significa che una volta creato un block pattern personalizzato, si potrà aggiungerlo 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, accedere all’area di amministrazione dei Pattern nel Site Editor, oppure sfogliare i pattern disponibili nella directory dei Pattern facendo clic sul pulsante Esplora tutti i pattern nel pannello di inserimento dei blocchi.

Nella scheda Pattern del pannello di inserimento dei blocchi si trovano tantissimi pattern, ma si può anche esplorare la libreria dei block pattern direttamente dall’interfaccia dell’editor.

È anche possibile visitare il sito dei Block Pattern, scegliere un modello e cliccare su Copia.

Una volta copiato un block pattern, basterà incollarlo nel contenuto e il gioco è fatto.

Ora si può personalizzare il gruppo di blocchi inclusi nel pattern senza influenzare il pattern registrato o qualsiasi altra istanza presente nel sito.

Block pattern personalizzati

Come abbiamo già detto, con 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 standard

La differenza tra i due tipi di pattern è 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 standard (non sincronizzato) avranno effetto solo su quella specifica istanza del pattern e non saranno applicate a qualsiasi altra istanza presente in altri post o pagine del sito.

Dal punto di vista dello sviluppatore, i block pattern personalizzati sono registrati nel database di WordPress come tipi di post wp_block, mentre un meta field wp_block_sync_status tiene memoria dello stato di sincronizzazione del pattern.

Grazie al nuovo sistema di gestione dei pattern, è ora possibile creare pattern di blocchi 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/blocco riutilizzabile dal menu a tendina.

Nell’esempio che segue, creiamo un pattern sincronizzato da un blocco Gruppo, un’intestazione, un paragrafo, un pulsante e un paio di spaziatori.

Facendo clic su Crea pattern/blocco riutilizzabile, viene richiesto di inserire un nome per il pattern 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 del Site editor nella sezione I miei pattern.

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

A questo punto è possibile avviare l’Editor dei pattern e personalizzare il proprio pattern.

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, creiamo un nuovo post e aggiungiamo due block pattern, uno sincronizzato e l’altro standard. Poi passiamo all’editor di codice.

Il pattern sincronizzato è generato dal seguente codice:

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

WordPress recupererà il post con ID 94 per generare l’HTML da rendere sullo schermo.

Il pattern standard (non sincronizzato) non è identificato da un ID. In questo caso, l’editor di codice contiene l’intero markup dei blocchi che compongono 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.

Nel pannello di inserimento dei blocchi, i custom block patterns sono elencati in due schede separate. I pattern standard si trovano nella scheda Pattern nella categorie I miei patterns.

I pattern sincronizzati sono riportati nella scheda Pattern sincronizzati (in precedenza Blocchi riutilizzabili).

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

Una volta creati i pattern, è possibile gestirli dalla schermata di amministrazione Block 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 Gestisci i miei pattern nel pannello di inserimento dei blocchi.
• Facendo clic sul pulsante Gestisci tutti i miei pattern nel Site editor.

Una volta qui, è possibile

• modificare, eliminare o esportare il pattern come JSON,
• importare pattern da JSON,
• creare nuovi pattern.

Tutte le modifiche apportate a un pattern sincronizzato saranno applicate a tutte le occorrenze di quel pattern sull’intero sito, indipendentemente dalla pagina di amministrazione in cui sono state apportate le modifiche.

Parti di Template

Prima dell’era Gutenberg, i temi e i template di WordPress erano basati principalmente su PHP. Una solida conoscenza dei child theme, della gerarchia dei template e dei principali linguaggi di sviluppo front-end erano requisiti fondamentali per creare o personalizzare i template. 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 uno sviluppatore di temi.

Un block pattern è un elenco di elementi di blocco. Esempi di elementi di blocco sono il titolo del sito, il logo e la navigazione.

Le parti del 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 del 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, le parti di template sono destinate ad aree del sito che non cambiano spesso.

Differenze tra pattern predefiniti 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 già 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 alla funzione dei block pattern, WordPress 5.5 ha introdotto una nuova API per gli 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 di 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.

Selezionare o Registrare una Categoria di Pattern

Per prima cosa, scegliamo una categoria per il pattern. Con WordPress 6.2 sono state aggiunte nuove categorie di pattern e alcune categorie esistenti sono state modificate. Al momento in cui scriviamo, si possono utilizzare le seguenti categorie integrate:

• In primo piano (featured)
• Messaggi (posts)
• Testo (text)
• Galleria (gallery)
• Call to action (call-to-action)
• Banner (banner)
• Headers (header)
• Footer (footer)
• Team (team)
• Testimonianze (testimonials)
• Servizi (services)
• Portfolio (portfolio)
• Media (media)

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' );
}

Registrare il Block Pattern

Una volta registrata la categoria di pattern, il passo successivo è quello di registrare il block pattern stesso. Per registrare il block pattern, si usa la funzione register_block_pattern come segue:

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à del pattern attualmente disponibili:

• title (obbligatorio): un titolo leggibile per il pattern.
• content (obbligatorio): il markup HTML del modello.
• 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 modello.
• postTypes: un array di tipi di post che potranno utilizzare il modello.
• templateTypes: un array di tipi di template in cui il pattern ha senso (disponibile da WordPress 6.2).
• inserter: un booleano per stabilire se il pattern deve essere visibile nel pannello di inserimento dei blocchi. Impostare il valore su false per nascondere il modello. Di default, tutti i pattern vengono visualizzati nel pannello di inserimento dei blocchi.

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' );
}

In questo codice, 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 renderlo disponibile per diversi tipi di post. Se si decide di rendere il pattern disponibile solo per un tipo di post product, si scriverà:

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

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

Ora facciamo un passo avanti e proviamo a creare un block pattern reale.

Un Esempio Reale 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, è possibile 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 gancioafter_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 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 da utilizzare per creare i propri block pattern.

È possibile utilizzare immagini gratuite ospitate dalla libreria Openverse.

Quando siamo soddisfatti delle nostre modifiche, salviamo la bozza o inviamo il pattern per la 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 modello per la 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 potrebbe essere un ottimo investimento per la 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.