Creare blocchi Gutenberg in WordPress

Dalla versione 5, WordPress ha introdotto un nuovo editor per gestire i contenuti del sito completamente diverso da come eravamo stati abituati.

Infatti questo nuovo editor permette la gestione dei contenuti con un sistema molto simile ad un page builder come Elementor

L’utente può infatti vedere in anteprima, in fase di creazione di un articolo oppure di una pagina, come questo verrà poi visualizzato lato front-end, utilizzando gli stessi stili, modificando la larghezza delle colonne interne, oppure modificando i colori.

Gutenberg gestisce tutto tramite dei moduli chiamati blocchi.

Come registrare un blocco per Gutenberg

Rispetto a quanto avviene con gli shortcode, il linguaggio principale utilizzato per le funzionalità di un blocco Gutenberg è React, questo potrebbe essere uno svantaggio se sei abituato a sviluppare in PHP oppure un’altra libreria JavaScript come jQuery

Per questo motivo è presente, al momento, un accenno allo sviluppo di blocchi per Gutenberg, ma questo capitolo verrà aggiornato successivamente con esempi di blocchi sempre più avanzati.

Un blocco Gutenberg generalmente è composto da un codice PHP, un file javascript per gestire le funzionalità del blocco ed, eventualmente, i fogli di stile che verranno utilizzati all’interno dell’editor e lato front-end.

Il file PHP utilizza la funzione wp_register_script() per registrare il file javascript appena descritto e la funzione wp_register_style() per i file css.

Successivamente dovrà essere utilizzata la funzione register_block_type() per registrare il blocco Gutenberg

• $name (stringa|WP_Block_Type)(obbligatorio), il nome del blocco usando la seguente sintassi nomeapplicativo/nomeblocco
• $args (array), un array di argomenti per la registrazione del blocco
  1. style (stringa), nome dello stile da applicare nel front-end precedentemente registrato con la funzione wp_register_style()
  2. editor_style (stringa), nome dello stile da utilizzare nell’editor, precedentemente registrato con la funzione wp_register_style()
  3. editor_script (stringa), nome del file javascript che gestisce le funzionalità del blocco da utilizzare nell’editor, precedentemente registrato con la funzione wp_register_script()

Le funzioni wp_register_script(), wp_register_style() e register_block_type() dovranno essere utilizzate all’interno dell’hook WordPress init

Inizia creando una nuova cartella in wp-content/plugins e rinominala come il-mio-blocco-gutenberg, al suo interno crea due file block.js e init.php

Apri il file init.php ed aggiungi

<?php

/*
Plugin Name: Il mio blocco Gutenberg
Version: 1.0
Plugin URI: https://www.wpinprogress.com
Description: Il mio blocco Gutenberg.
Author: WPinProgress
Text Domain: il-mio-blocco-gutenberg
Domain Path: /translation
*/

defined( 'ABSPATH' ) || exit;

function il_mio_blocco_gutenberg_init() {

  if ( ! function_exists( 'register_block_type' ) ) {
    return;
  }

  wp_register_script(
    'il_mio_blocco_gutenberg_script',
    plugins_url( 'block.js', __FILE__ ),
    array(
      'wp-blocks',
      'wp-element'
    ),
    '1.0'
  );

  register_block_type(
    'il-mio-blocco-gutenberg/nome-blocco', 
    array(
      'editor_script' => 'il_mio_blocco_gutenberg_script',
    )
  );

}
add_action( 'init', 'il_mio_blocco_gutenberg_init' );

Se dai un’occhiata al codice vedrai che il file javascript block.js viene incluso utilizzando la funzione WordPress wp_register_script() che già conosci, dove è stata indicata la dipendenza agli script wp-blocks e wp-element

Successivamente la funzione register_block_type() va ad aggiungere il blocco il-mio-blocco-gutenberg/nome-blocco (questo nome dovrà essere anche indicato nel file javascript), utilizzando lo script il_mio_blocco_gutenberg_script, registrato in precedenza.

Ora apri il file block.js ed aggiungi

(function( blocks, element ) {
	
  var el = element.createElement;

  blocks.registerBlockType(
  	'il-mio-blocco-gutenberg/nome-blocco',
	{
		
	  title: 'Nome blocco Gutenberg',
	  icon: 'admin-site',
	  category: 'text',
		
	  edit: function() {
        return element.createElement(
          'div',
          null,
          'Contenuto blocco lato editor'
	    );
	  },		
		
	  save: function() {
        return element.createElement(
          'div',
          null,
          'Contenuto blocco lato front-end'
        );
	  }		

	}
  
  );
  
})( window.wp.blocks, window.wp.element );

Nella funzione registerBlockType() viene indicato, nel primo parametro, il nome del blocco il-mio-blocco-gutenberg/nome-blocco e dovrà corrispondere al nome utilizzato nella funzione WordPress register_block_type()

Il secondo parametro invece, viene utilizzato per definire le proprietà del blocco.

Se ora apri l’editor di WordPress, vedrai un nuovo blocco nella categoria Testo

Se provi ad aggiungerlo nell’editor, verrà inserito un testo statico Contenuto blocco lato editor, questo testo non è ancora editabile.

Conclusione

Questi è un semplice esempio che andrà ad inserire il testo statico Contenuto blocco lato editor.

Se desideri approfondire questo argomento, puoi trovare un esempio più approfondito all’interno del corso Sviluppare con WordPress, disponibile su WPinProgress.

Nel corso del 2021 inoltre, provvederò ad aggiornare il corso con nuovi esempi di blocchi per Gutenberg.

Registrandoti alla newsletter, potrai scaricare un estratto e troverai un coupon per ottenere uno sconto del 10%.