Nel corso degli anni abbiamo esplorato Gutenberg da molti punti di vista. Abbiamo analizzato le funzionalità dell’editor, le abbiamo confrontate con quelle di altri page builder, abbiamo costruito blocchi personalizzati statici e dinamici e molto altro.
Con le ultime versioni di WordPress, nuove funzionalità e strumenti permettono di creare layout complessi in modo più semplice, arricchendo e migliorando le funzionalità dell’editor di blocchi senza dover costruire blocchi personalizzati.
Grazie all’introduzione dei block pattern e di strumenti per sviluppatori come l’API Block Bindings, i casi di utilizzo dei blocchi personalizzati sono diminuiti. Ora è possibile creare strutture di blocchi complesse, iniettare valori di metadati nei propri contenuti e automatizzare buona parte del flusso di lavoro senza lasciare l’interfaccia dell’editor. In breve, oggi WordPress permette di creare siti complessi con pochi clic come mai prima d’ora.
L’aggiunta di controlli e strumenti personalizzati all’editor può contribuire a rendere più fluido il processo di creazione dei contenuti. Ad esempio, potreste aver bisogno di aggiungere un pannello alla barra laterale dei post per aggiungere funzionalità o creare una barra laterale personalizzata per gestire più campi meta.
Iniziamo!
Come creare un plugin per l’editor a blocchi senza creare un blocco personalizzato
WordPress mette a disposizione un comodo strumento a riga di comando che permette di installare un ambiente di sviluppo Node.js locale con tutti i file e le dipendenze necessarie per creare un blocco personalizzato. Basta digitare npx @wordpress/create-block nello strumento a riga di comando, attendere qualche secondo e il gioco è fatto.
Tuttavia, l’impalcatura di un blocco personalizzato non è necessaria quando si deve aggiungere solo una barra laterale o un semplice pannello di impostazioni. In questo caso, è necessario creare un plugin Gutenberg.
WordPress non fornisce un’utility per automatizzare il processo di creazione di un plugin per Gutenberg, quindi dovrete farlo manualmente. Ma non preoccupatevi: il processo è relativamente semplice e ci saremo noi a guidarvi. Ecco i passi da seguire:
1. Scaricare e installare un ambiente di sviluppo locale
Prima di tutto: anche se è possibile sviluppare un plugin Gutenberg in un ambiente remoto, potrebbe essere più conveniente installare un sito WordPress di sviluppo in locale. Potete utilizzare qualsiasi ambiente basato su PHP e MySQL. Tra le tante alternative disponibili, vi consigliamo DevKinsta. È gratuito, completo, facile da usare e compatibile al 100% con l’hosting Kinsta.
Una volta configurato il sito di sviluppo, sarete pronti a creare un plugin per l’editor di blocchi Gutenberg.
2. Scaricare e installare Node.js e npm
Scaricate Node.js da nodejs.org e installatelo sul vostro computer. In questo modo installerete anche npm, il gestore di pacchetti Node.
Una volta fatto questo, lanciate lo strumento a riga di comando ed eseguite node -v e npm -v. Dovreste vedere le versioni installate di Node.js e npm.
3. Creare la cartella del plugin
Create una nuova cartella sotto wp-content/plugins e rinominatela my-sidebar-plugin o qualcosa di simile. Ricordate che questo nome deve riflettere il nome del plugin.
Aprite il terminale, navigate nella cartella del plugin e inizializzate un progetto npm con il seguente comando:
npm init -yIn questo modo verrà creato un file di base package.json.
4. Installare le dipendenze
Nel vostro strumento a riga di comando, digitate il seguente comando:
npm install @wordpress/plugins @wordpress/scripts --save-dev@wordpress/pluginsinstalla il modulo per WordPressplugins.@wordpress/scriptsinstalla una raccolta di script riutilizzabili per lo sviluppo di WordPress.
Una nuova cartella node_modules dovrebbe essere stata aggiunta al vostro progetto.
Ora, aprite il vostro package.json e aggiornate scripts come segue:
{
"name": "my-sidebar-plugin",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@wordpress/plugins": "^7.14.0",
"@wordpress/scripts": "^30.7.0"
}
}Ora date un’occhiata alla cartella del plugin:
5. Creare i file del plugin
Nella cartella del plugin, create un nuovo file .php e dategli lo stesso nome della cartella. Nel nostro esempio, è my-sidebar-plugin.php.
Aprite il file e incollate il seguente codice per registrare il plugin sul server:
<?php
/**
* Plugin Name: My Sidebar Plugin
*/
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );Successivamente, create una cartella src nella directory del plugin. Al suo interno, create un nuovo file index.js con il seguente codice:
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
const MyPluginSidebar = () => (
<PluginSidebar
name="my-sidebar-plugin"
title="My Sidebar Plugin"
>
<div>
Hello my friends!
</div>
</PluginSidebar>
);
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );6. Compilare il codice
Manca solo la compilazione. Tornate alla riga di comando ed eseguite:
npm run buildQuesto crea una cartella build con i file compressi del progetto.
Una volta terminato, accedete alla schermata dei plugin nella bacheca di WordPress e attivate il plugin. Create un nuovo post o una nuova pagina e cliccate sull’icona del plugin nell’angolo in alto a destra per visualizzare la barra laterale personalizzata.
7. Sviluppare e compilare
Abbiamo inserito il file index.js nella cartella src. L’uso di una cartella src è una convenzione comune nello sviluppo di plugin e temi di WordPress, che rende il vostro codice più facile da capire per gli altri sviluppatori.
Inserendo il codice JS nella cartella src, potete utilizzare il comando npm start o npm run start per avviare un ambiente di sviluppo che monitora gli script e ricompila automaticamente il codice quando necessario. Una volta terminato lo sviluppo, il comando npm build o npm run build compilerà il codice JavaScript nella cartella build, che conterrà il codice ottimizzato per la produzione.
Ora mettiamo in pratica ciò che abbiamo imparato e modifichiamo il plugin che abbiamo creato nella sezione precedente per aggiungere un nuovo pannello alla barra laterale dell’editor dei post per gestire i campi personalizzati.
Come creare una barra laterale aggiuntiva per gestire i meta-campi dei post
Il nostro obiettivo è quello di creare una barra laterale personalizzata che contenga un pannello con un singolo campo di testo per aggiungere e modificare un meta-campo personalizzato.
Prima di procedere, è bene ricordare che potremmo utilizzare un meta box personalizzato per ottenere lo stesso risultato. Con WordPress 6.7, i meta box hanno ricevuto un aggiornamento e sono ora pienamente compatibili con l’editor a blocchi, quindi potreste chiedervi perché gestire i meta field da una sidebar personalizzata invece che da un meta box. Il motivo è che una sidebar permette di sfruttare i componenti integrati. Ciò aiuta a costruire interfacce più user friendly con controlli interessanti che dovrebbero essere familiari agli utenti.
Detto questo, ecco la procedura per creare una barra laterale personalizzata che permette di gestire i campi personalizzati dall’editor.
my-sidebar-plugin.php
Passo 1: Registrare i meta dei post
Per prima cosa, dobbiamo registrare il campo meta. Aggiungiamo il seguente codice al file principale del plugin:
function my_sidebar_plugin_register_meta() {
register_post_meta(
'post',
'meta_fields_book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Book title', 'my-sidebar-plugin' ),
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
)
);
}
add_action( 'init', 'my_sidebar_plugin_register_meta' );La funzione register_post_meta accetta tre argomenti:
- Il tipo di post per cui registrare una meta-chiave. Impostando una stringa vuota, la meta-chiave verrà registrata in tutti i tipi di post esistenti.
- La meta-chiave da registrare. Non stiamo usando un trattino basso all’inizio della meta-chiave, poiché il prefisso della meta-chiave con un trattino basso nasconderebbe il campo personalizzato, per cui potreste volerlo utilizzare in una meta-box. Tuttavia, nascondere il campo personalizzato impedirebbe l’utilizzo del campo meta tramite l’API Block Bindings nel contenuto del post.
- Un array di argomenti. È necessario impostare
show_in_restsutrue. Questo espone il meta-campo all’API Rest e ci permette di legare il meta-campo agli attributi del blocco. Per gli altri attributi, consultate il riferimento alla funzione.
Passo 2: Registrare il meta-campo
Per garantire la retrocompatibilità del plugin, è necessario registrare un meta box personalizzato per consentire agli utenti di gestire i campi personalizzati, anche se si utilizza l’editor classico. Aggiungiamo il seguente codice al file PHP del plugin:
/**
* Register meta box
*
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*
*/
function my_sidebar_plugin_register_meta_box(){
add_meta_box(
'book_meta_box', // Unique ID
__( 'Book details' ), // Box title
'my_sidebar_plugin_meta_box_callback', // Content callback
array( 'post' ), // Post types
'advanced', // context
'default', // priority
array('__back_compat_meta_box' => true) // hide the meta box in Gutenberg
);
}
add_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );Ora dichiariamo il callback che costruisce il modulo:
/**
* Build meta box form
*
* @link https://developer.wordpress.org/reference/functions/wp_nonce_field/
* @link https://developer.wordpress.org/reference/functions/get_post_meta/
*
*/
function my_sidebar_plugin_meta_box_callback( $post ){
wp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );
$title = get_post_meta( $post->ID, 'meta_fields_book_title', true );
?>
<div class="inside">
<p><strong><?php echo __( 'Book title', 'my-sidebar-plugin' ); ?></strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
</div>
<?php
}Successivamente, scriviamo la funzione per salvare i meta-campi nel database:
/**
* Save metadata
*
* @link https://developer.wordpress.org/reference/functions/wp_verify_nonce/
* @link https://developer.wordpress.org/reference/functions/current_user_can/
* @link https://developer.wordpress.org/reference/functions/sanitize_text_field/
* @link https://developer.wordpress.org/reference/functions/update_post_meta/
*
*/
function my_sidebar_plugin_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )
return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
if ( ! isset( $_POST['meta_fields_book_title'] ) )
return;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
update_post_meta( $post_id, 'meta_fields_book_title', $title );
}
add_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );Non approfondiremo questo codice perché esula dagli scopi di questo articolo, ma potete trovare tutte le informazioni di cui avete bisogno seguendo i link nelle intestazioni delle funzioni.
Per ultimo, dobbiamo inserire il file index.js del nostro plugin:
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );Questo è tutto per quanto riguarda il file PHP. Successivamente, dobbiamo scrivere il codice JS.
index.js
L’index.js si trova nella cartella src, che è il luogo in cui vengono memorizzati i file JS durante la fase di sviluppo.
Apriamo index.js e aggiungiamo le seguenti dichiarazioniimport:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';Abbiamo bisogno di queste risorse per costruire la barra laterale con i controlli necessari.
Successivamente, dobbiamo costruire il componente della barra laterale:
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginSidebar
name="my-sidebar-plugin"
icon="book"
title="My plugin sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );La funzione registerPlugin registra il plugin e crea il componente chiamato MyPluginSidebar.
La funzione MyPluginSidebar dichiara alcune costanti e restituisce il codice JSX del componente.
useSelectè un hook personalizzato per recuperare i prop dai selettori registrati. Lo abbiamo utilizzato per ottenere il tipo di post corrente. Date un’occhiata anche a questo post del blog degli sviluppatori di WordPress.useEntityProprestituisce un array di campi meta e una funzione setter per impostare nuovi valori meta. Consultate anche il riferimento online.updateBookTitleMetaValueè un gestore di eventi che salva il valore del campo metabookTitle.
Abbiamo utilizzato alcuni componenti integrati per costruire la nostra barra laterale:
PluginSidebarpermette di aggiungere elementi alla barra degli strumenti delle schermate dell’editor del Post o del Sito. (Ecco il riferimento del componente).PanelBodycrea un contenitore pieghevole che può essere aperto o chiuso. (Ecco il riferimento del componente).PanelRowè un contenitore generico per le righe di un sitoPanelBody. (Ecco il riferimento del componente).TextControlè un campo a riga singola che può essere utilizzato per l’inserimento di testo libero. (Ecco il riferimento del componente).
Ora eseguiamo il comando npm run build, attiviamo il plugin e creiamo un nuovo post. Nella barra laterale superiore dovrebbe apparire l’icona di un nuovo libro. Cliccando su questa icona, il plugin mostrerà la sua barra laterale.
E se non avete bisogno di una nuova barra laterale ma volete visualizzare il vostro campo personalizzato nella barra laterale integrata del post? Basta sostituire PluginSidebar con PluginDocumentSettingPanel. Questo sarà il vostro nuovo file index.js:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginDocumentSettingPanel
name="my-sidebar-plugin"
title="Book details"
className="my-sidebar-plugin"
>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );L’immagine seguente mostra il risultato.
Un caso d’uso: la sovrascrittura di un block pattern per automatizzare il flusso di lavoro
Ora potete aggiungere un valore per il campo personalizzato, che sarà disponibile attraverso l’API Block Bindings per essere utilizzato con gli attributi del blocco. Ad esempio, potete aggiungere un blocco Paragrafo al vostro contenuto e associare il campo personalizzato all’attributo content del paragrafo.
Modificando il valore del vostro campo personalizzato, le modifiche verranno applicate automaticamente al contenuto del paragrafo.
Se vi state chiedendo se c’è altro che potete fare con i campi personalizzati e Block Bindings, la risposta è sì! I block pattern e l’API Block Bindings permettono di automatizzare l’intero processo di creazione dei contenuti.
Per averne un’idea, create un pattern con almeno un titolo o un paragrafo. In questo esempio, creiamo un block pattern con un blocco Colonne, un’immagine, un titolo e un paio di blocchi Riga, ciascuno con due paragrafi.
Una volta soddisfatti del vostro layout, selezionate gli elementi che lo compongono e create un pattern sincronizzato.
Aggiungete un nome e una categoria per il block pattern e assicuratevi di sincronizzarlo.
Successivamente, se avete creato il pattern nell’editor del Post, selezionatelo e cliccate su Modifica originale nella barra degli strumenti del blocco. Potete anche andare nella sezione Pattern dell’editor del sito e individuare il pattern nella sezione I miei pattern o nella categoria di pattern che avete impostato in precedenza.
Aprite l’Editor del Codice e individuate il blocco che volete associare al campo personalizzato. Nel delimitatore del blocco, aggiungete il seguente codice:
<!-- wp:heading {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"meta_fields_book_title"
}
}
}
}
} -->
Salvate il pattern e create un nuovo post. Aggiungete il pattern al contenuto e impostate un valore per il campo personalizzato. Dovreste vedere il valore applicato automaticamente al vostro pattern.
A questo punto, divertitevi pure a fare qualche esperimento con questo plugin. Grazie ai campi personalizzati e all’API Block Bindings, potrete aggiungere altri campi e controlli per popolare automaticamente i layout.
Riepilogo
Sviluppare un blocco personalizzato può essere impegnativo. Ma è davvero necessario costruire un blocco quando potreste fare molto di più con un pattern di blocco?
Con i progressi dei block patterns e l’introduzione di potenti funzioni per gli sviluppatori, come l’API Block Bindings, non è più necessario creare blocchi personalizzati per creare siti web sofisticati e funzionali. Un semplice plugin e un pattern di blocco possono automatizzare efficacemente una parte significativa del vostro flusso di lavoro.
Questo tutorial ha dimostrato come aggiungere funzionalità all’editor dei post di WordPress attraverso un plugin. Tuttavia, ciò che abbiamo trattato in questo post scalfisce solo la superficie di ciò che è possibile realizzare con le solide funzionalità che offre WordPress.
Avete già esplorato queste caratteristiche e aggiunto funzionalità all’editor di WordPress? Se sì, non esitate a condividere le vostre esperienze e le vostre intuizioni nella sezione 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