WordPress Gutenberg Blocks, cosa sono? Rispetto al precedente editor, Gutenberg fornisce una libreria di elementi predefiniti detti “blocchi” che puoi utilizzare nelle tue pagine e nei tuoi post. Ma stiamo parlando di WordPress, quindi possiamo usare i blocchi per funzionalità personalizzate.
In altre parole, è possibile costruire i propri blocchi personalizzati. C’è bisogno di conoscere PHP e React, ma il processo in sé è relativamente semplice. Inoltre, la creazione di blocchi personalizzati per le funzionalità che desideri riutilizzare può essere molto utile.
Perché potresti aver bisogno di creare WordPress Gutenberg Blocks?
Ci sono già a disposizione un sacco di plugin che aggiungono nuovi blocchi al Block Editor di WordPress come ad esempio, Atomic Blocks oppure Stackable e tanti altri, ma se c’è un blocco particolare che vorresti utilizzare e non riesci a trovarlo, non ti rimane che creare un blocco personalizzato da usare con l’editor Gutenberg.
Come creare manualmente WordPress Gutenberg Blocks (in 2 passaggi)
L’ API Block di Gutenberg Editor è lo strumento di cui avrai bisogno. In questa sezione, ti aiuterò a configurare un nuovo plugin per aggiungere un blocco al tuo editor. Per fare ciò, tutto ciò di cui hai bisogno sono due file (e del codice).
Passaggio 1: crea un plug-in per richiamare i tuoi file di blocco
Il modo più pulito per creare un blocco Editor Gutenberg personalizzato è impostare un plug-in che “accoda” o richiama i tuoi script di blocco e li aggiunge all’editor.
Per iniziare, accedi al tuo sito Web tramite FTP. Una volta entrato, vai alla tua cartella root di WordPress e nella directory wp-content/plugins troverai le cartelle di tutti i plugin presenti sul tuo sito web.
Crea una nuova cartella. In questo tutorial la chiameremo test-block, ma ovviamente puoi dargli il nome che desideri
Apri la cartella, crea un nuovo file .php (dandogli lo stesso nome della cartella), quindi apri il file vuoto e aggiungi il seguente codice:
<?php
/**
* Plugin Name: Block Test Plugin
* Author: Marco Brughi
* Version: 1.0.0
*/
function load_Block() {
wp_enqueue_script(
'my-custom-block',
plugin_dir_url(__FILE__) . 'custom-block.js',
array('wp-blocks','wp-editor'),
true
);
}
add_action('enqueue_block_editor_assets', 'load_Block');Con questo codice abbiamo semplicemente creato una funzione per caricare in coda il nostro script di blocco che abbiamo chiamato custom-block.js , chiaramente il file ancora non esiste lo creeremo più avanti.
Inoltre, la funzione include anche due dipendenze di script: wp-blocks e wp-editor. La prima gestisce la registrazione dei blocchi tra le altre funzionalità, mentre wp-editor include diversi componenti di base di cui potresti aver bisogno, tipo Rich Text.
Passaggio 2: registra il tuo blocco e configura i suoi attributi
Il file PHP di base del plugin è pronto, quindi è venuto il momento di scrivere il file Javascript custom-block.js nella stessa directory principale del plugin.
/* Questa sezione del codice registra un nuovo blocco, imposta un'icona e una categoria e indica quale tipo di campi includerà. */
wp.blocks.registerBlockType('brad/border-box', {
title: 'Simple Box',
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'},
color: {type: 'string'}
},
/* Questo configura come funzioneranno i campi di contenuto e colore e imposta gli elementi necessari */
edit: function(props) {
function updateContent(event) {
props.setAttributes({content: event.target.value})
}
function updateColor(value) {
props.setAttributes({color: value.hex})
}
return React.createElement(
"div",
null,
React.createElement(
"h3",
null,
"Simple Box"
),
React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
);
},
save: function(props) {
return wp.element.createElement(
"h3",
{ style: { border: "3px solid " + props.attributes.color } },
props.attributes.content
);
}
})Utilizziamo JavaScript e React per impostare il tutto, cioè registra e configura gli attributi di base del blocco. Dopo la sezione iniziale, viene configurato il modo in cui i campi dovrebbero funzionare. Questo esempio include un campo di testo e un selettore di colori per il bordo.
A questo punto salviamo il file custom-block.js, e attiviamo il plugin da WordPress per vedere se è tutto a posto ed il risultato.
Questo è un blocco semplice, ma comprende i fondamenti più importanti che possono essere poi usati nei nostri progetti. Sia che i blocchi abbiano codice semplici o più complesso, questo è tutto quello che serve pubblicare un blocco.
E’ bene conoscere Javascript poiché l’Editor blocchi utilizza ampiamente questo linguaggio. È un po’ diverso dal lavorare principalmente con PHP, ma si possono fare ottimi lavori, anzi l’applicazione dei due linguaggi insieme porterà a risultati a volte insperati e sicuramente di ottimo livello.
