{"id":72838,"date":"2023-09-04T15:16:03","date_gmt":"2023-09-04T14:16:03","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=72838&preview=true&preview_id=72838"},"modified":"2023-09-05T14:41:21","modified_gmt":"2023-09-05T13:41:21","slug":"block-template-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/block-template-wordpress\/","title":{"rendered":"Come creare i block template di WordPress"},"content":{"rendered":"

Nell’era di Gutenberg<\/a>, il lavoro di progettazione non \u00e8 strettamente legato ai temi di WordPress<\/a>. Il CMS fornisce agli utenti tutti gli strumenti di design necessari per creare un ottimo sito web e il tema vuole essere pi\u00f9 un elemento che aggiunge ulteriori strumenti di design.<\/p>\n

I block template offrono ancora maggiori possibilit\u00e0 nella creazione di un sito. Secondo il Block Editor Handbook<\/a>:<\/p>\n

Un block template \u00e8 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.<\/em><\/p><\/blockquote>\n

In altre parole, i block template sono collezioni pre-costruite di blocchi utilizzati per impostare uno stato predefinito in modo dinamico sul client.<\/p>\n

\ud83d\udc49 I block template sono diversi dai template file.<\/strong><\/p>\n

I template file sono file PHP come index.php<\/strong>, page.php<\/strong> e single.php<\/strong> e funzionano allo stesso modo sia con i temi classici che con quelli a blocchi, secondo la gerarchia dei template di WordPress<\/a>. Nei temi classici, questi file sono scritti in PHP e HTML. Nei temi a blocchi, invece, sono interamente composti da blocchi.<\/p>\n

\ud83d\udc49 I block template sono diversi dai block pattern.<\/strong><\/p>\n

I block pattern<\/a> 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.<\/p>\n

\u00c8 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.<\/p>\n

Ci sono due modi per creare un block template. \u00c8 possibile utilizzare la block API<\/a> per dichiarare un array di tipi di blocco tramite PHP, oppure creare un tipo di blocco personalizzato utilizzando il componente InnerBlocks<\/code>.<\/p>\n

Cominciamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Come creare un block template con PHP<\/h2>\n

Uno sviluppatore della vecchia scuola pu\u00f2 definire un block template personalizzato utilizzando un plugin o il file functions.php<\/a> del tema. Se si decide di utilizzare un plugin, si comincia avviando il proprio editor di codice<\/a> preferito, si crea un nuovo file PHP e si aggiunge il seguente codice:<\/p>\n

<?php\n\/*\n * Plugin Name:       My Block Templates\n * Plugin URI:        https:\/\/example.com\/\n * Description:       An example plugin\n * Version:           1.0\n * Requires at least: 5.5\n * Requires PHP:      8.0\n * Author:            Your name\n * Author URI:        https:\/\/author.example.com\/\n * License:           GPL v2 or later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Update URI:        https:\/\/example.com\/my-plugin\/\n *\/\n\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Nel codice qui sopra, get_post_type_object<\/code><\/a> recupera un tipo di post in base al nome.<\/p>\n
Salviamo il file nella cartella wp-content\/plugins<\/strong>, passiamo alla schermata dei plugin nella bacheca di WordPress<\/a> e attiviamo il plugin My Block Templates<\/strong>.<\/p>\n
Ora, quando creiamo un nuovo post, l’editor lancia automaticamente il block template con un blocco immagine, un titolo e un paragrafo.<\/p>\n
\"Un
Un block template caricato automaticamente nell’editor dei post<\/figcaption><\/figure>\n
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\u00f9 avanzato con blocchi interni e impostazioni:<\/p>\n
function myplugin_register_my_block_template() {\n\n\t$block_template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading', array(\n\t\t\t'placeholder'\t=> 'Add H2...',\n\t\t\t'level'\t\t\t=> 2\n\t\t) ),\n\t\tarray( 'core\/paragraph', array(\n\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\n\t\t) ),\n\t\tarray( 'core\/columns', \n\t\t\tarray(), \n\t\t\tarray( \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t)\n\t\t\t\t), \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t) ),\n\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t) )\n\t\t\t\t\t) \n\t\t\t\t)\n\t\t\t) \n\t\t)\n\t);\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = $block_template;\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Nell’immagine che segue, vediamo l’output del codice qui sopra:<\/p>\n
\"Un
Un block template pi\u00f9 avanzato<\/figcaption><\/figure>\n
Finora abbiamo utilizzato solo i blocchi del core. Ma possiamo anche includere blocchi personalizzati<\/a> o block pattern<\/a> all’interno dei nostri block template, come mostrato nell’esempio che segue:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'page' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/pattern', array(\n\t\t\t'slug' => 'my-plugin\/my-block-pattern'\n\t\t) ) \n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Se decidiamo di creare un block template predefinito per un tipo di post personalizzato gi\u00e0 registrato, non c’\u00e8 molta differenza. Basta cambiare il tipo di post di get_post_type_object<\/code> con il nome del nostro tipo di post personalizzato, come mostrato in questo esempio:<\/p>\n
<?php\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'book' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Ora che sappiamo come creare un block template, possiamo fare un passo avanti e scoprire altri casi d’uso. Approfondiamo un po’ il discorso.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Block template con tipi di post personalizzati<\/h3>\n
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 \u00e8 gi\u00e0 stato registrato, ma potremmo preferire definire un block template al momento della registrazione del custom post type<\/a>.<\/p>\n
In questo caso, possiamo utilizzare gli argomenti template<\/code> e template_lock<\/code> della funzione register_post_type<\/code><\/a>:<\/p>\n
function myplugin_register_book_post_type() {\n\t$args = array(\n\t\t'label' => esc_html__( 'Books' ),\n\t\t'labels' => array(\n\t\t\t'name' => esc_html__( 'Books' ),\n\t\t\t'singular_name' => esc_html__( 'Book' ),\n\t\t),\n\t\t'public' => true,\n\t\t'publicly_queryable' => true,\n\t\t'show_ui' => true,\n\t\t'show_in_rest' => true,\n\t\t'rest_namespace' => 'wp\/v2',\n\t\t'has_archive' => true,\n\t\t'show_in_menu' => true,\n\t\t'show_in_nav_menus' => true,\n\t\t'supports' => array( 'title', 'editor', 'thumbnail' ),\n\t\t'template' => array(\n\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t) ),\n\t\t\tarray( 'core\/columns', \n\t\t\t\tarray(), \n\t\t\t\tarray( \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t\t)\n\t\t\t\t\t), \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t\t) ),\n\t\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n\tregister_post_type( 'book', $args );\n}\nadd_action( 'init', 'myplugin_register_book_post_type' );<\/code><\/pre>\n
E questo \u00e8 tutto. L’immagine che segue mostra il block template nell’interfaccia dell’editor per il custom post type Book<\/em>.<\/p>\n
\"Un
Un block template per un tipo di post personalizzato<\/figcaption><\/figure>\n
Una volta terminato il layout, possiamo divertirci con le impostazioni dei blocchi per perfezionare il comportamento e l’aspetto del block template.<\/p>\n
Perfezionare il block template con gli attributi dei blocchi<\/h3>\n
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.<\/p>\n
Un template con un blocco Columns pu\u00f2 essere rappresentato come segue:<\/p>\n
$template = array( 'core\/columns', \n\t\/\/ attributes\n\tarray(), \n\t\/\/ nested blocks\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Come gi\u00e0 detto, il secondo array dell’elenco \u00e8 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.<\/p>\n
Per iniziare, possiamo utilizzare l’editor die blocchi per creare una struttura di blocchi che possa servire come riferimento per il template.<\/p>\n
\"Un
Un layout di blocchi nell’editor di blocchi<\/figcaption><\/figure>\n
Aggiungiamo i nostri blocchi, personalizziamo il layout e gli stili, poi passiamo all’editor di codice e cerchiamo i delimitatori di blocco.<\/p>\n
\"Il
Il delimitatore di blocco di un blocco Colonne<\/figcaption><\/figure>\n
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:<\/p>\n
$template = array( 'core\/columns', \n\tarray(\n\t\t'verticalAlignment'\t=> 'center',\n\t\t'align'\t\t\t\t=> 'wide',\n\t\t'style'\t\t\t\t=> array( \n\t\t\t'border'\t=> array(\n\t\t\t\t'width'\t=> '2px',\n\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t\t'backgroundColor' => 'tertiary'\n\t),\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Ripetiamo il processo per ogni blocco del template e il gioco \u00e8 fatto.<\/p>\n
$template = array(\n\tarray( 'core\/paragraph', array(\n\t\t'placeholder'\t=> 'Add paragraph...'\n\t) ),\n\tarray( 'core\/columns', \n\t\tarray(\n\t\t\t'verticalAlignment'\t=> 'center',\n\t\t\t'align'\t\t\t\t=> 'wide',\n\t\t\t'style'\t\t\t\t=> array( \n\t\t\t\t'border'\t=> array(\n\t\t\t\t\t'width'\t\t=> '2px',\n\t\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\t'backgroundColor' => 'tertiary',\n\t\t\t'lock' => array(\n\t\t\t\t'remove'\t=> true,\n\t\t\t\t'move'\t\t=> true\n\t\t\t)\n\t\t), \n\t\tarray( \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/image', \n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t'style'\t=> array( 'border' => array( 'radius' => '8px' ) ) \n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t), \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t) ),\n\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t) )\n\t\t\t\t) \n\t\t\t)\n\t\t)\n\t)\n);<\/code><\/pre>\n
Bloccare i blocchi<\/h3>\n
Possiamo bloccare blocchi specifici o tutti i blocchi compresi nel nostro template utilizzando la propriet\u00e0 template_lock<\/code> dell’oggetto $post_type_object<\/code>.<\/p>\n
Bloccare i template pu\u00f2 essere molto utile quando si ha un blog con pi\u00f9 autori e si vuole impedire a tutti o a determinati utenti di modificare il layout del block template.<\/p>\n
Nell’esempio che segue, blocchiamo tutti i blocchi del block template:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n\t$post_type_object->template_lock = 'all';\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
I blocchi bloccati mostrano un’icona a forma di lucchetto nella barra degli strumenti e nell’elenco dei blocchi:<\/p>\n
\"Un
Un blocco intestazione bloccato<\/figcaption><\/figure>\n
Gli utenti possono sbloccare i blocchi dal menu Opzioni disponibile nella barra degli strumenti dei blocchi.<\/p>\n
\"Sbloccare
Sbloccare un blocco<\/figcaption><\/figure>\n
Cliccando su Sblocca<\/strong>, un popup modale permette di abilitare\/disabilitare il movimento, impedire la rimozione o entrambe le cose:<\/p>\n
\"Opzioni
Opzioni di blocco<\/figcaption><\/figure>\n
template_lock<\/code> pu\u00f2 assumere uno dei seguenti valori<\/a>:<\/p>\n