Come creare un blocco Gutenberg personalizzato in WordPress (Step-by-Step Guida)

WordPress / # / Febbraio 7, 2026
Come creare un blocco Gutenberg personalizzato in WordPress passo-passo guida

L'editor di blocco Gutenberg (introdotto in WordPress 5.0) è diventato il modo predefinito per costruire contenuti in WordPress. Mentre ci sono migliaia di blocchi pre-made da plugin e temi, la creazione del proprio blocco Gutenberg personalizzato ti dà il controllo completo - perfetto per elementi di marca, componenti riutilizzabili, o funzionalità uniche che nessun blocco esistente offre. Nel 2026, con l'editing completo e temi di blocco ora standard, i blocchi personalizzati sono più importanti che mai per le agenzie, gli sviluppatori e le aziende che desiderano un design coerente tra le pagine.

A Cope Business, costruiamo blocchi Gutenberg personalizzati per i clienti durante il nostro servizi tecnici di audit SEO per migliorare la coerenza dei contenuti, la velocità della pagina e l'esperienza dell'utente senza contare su forti plugin di terze parti.
Questa guida principiante-intermedio vi mostra due modi pratici per creare un blocco Gutenberg personalizzato in WordPress — utilizzando un plugin (più semplice) e da zero con il codice (più flessibile).

Perché creare un blocco Gutenberg personalizzato?

  • Consistenza del marchio — Crea elementi riutilizzabili che corrispondono al tuo sistema di progettazione
  • Funzionalità unica — Aggiungi caratteristiche che nessun blocco esistente ha (ad esempio, tabelle di prezzi personalizzati, testimonianze con valutazioni)
  • Prestazioni — Evitare i plugin gonfiati; solo caricare ciò di cui hai bisogno
  • Affidabilità — Utilizzare lo stesso blocco tra post, pagine e modelli
  • Il futuro — I temi del blocco e l'editing del sito completo rendono i blocchi personalizzati più potenti

Metodo 1: Utilizzando un Plugin – modo più semplice (Nessun codice richiesto)

Se si desidera creare blocchi senza scrivere JavaScript/PHP, utilizzare un plugin di blocco costruttore.

Plugin consigliato: Block Lab o Kadence Blocks (Free/Pro)

Migliore opzione gratuita: Blocchi Kadence (free core + Pro)

Passi

  1. Installazione Blocchi Kadence da Spine > Aggiungi nuovo.
  2. Vai a Blocchi di frequenza > Libreria del blocco → Abilitare qualsiasi blocchi di avviamento ti piace.
  3. Per blocchi veramente personalizzati:
    • Uso Kadence Blocks Pro (~$79/anno) → Funzione di blocchi personalizzati avanzati
    • O uso Laboratorio di blocco (gratuito) + Campi personalizzati avanzati (ACF) (free/pro)
  4. In ACF → Crea un nuovo Field Group → Aggiungi campi (testo, immagine, ripetitore, ecc.)
  5. In Block Lab → Crea un nuovo blocco → Link ai campi ACF → Modello di design in PHP/HTML
  6. Salva → Nuovo blocco appare nell'inserto Gutenberg.

Alternativa: Generatore di blocco Gutenberg (attrezzo online) → Genera il codice → incolla in WPCode.

Punti positivi: No / codice basso, configurazione visiva, veloce.
Punti negativi: Meno flessibilità del codice puro; può aggiungere bloat.

Metodo 2: Creazione di un blocco personalizzato da Scratch (Metodo di codice – La maggior parte potente)

Questo metodo dà il pieno controllo ed è resistente al futuro per i temi del blocco.

Prerequisiti

  • Locale/staging (LocalWP o DevKinsta)
  • Node.js & npm installato
  • Conoscenze di base JavaScript & PHP
  • Editor di codici (Codice VS)

Step-by-Step: Crea un semplice blocco “Call to Action”

  • Crea cartella Plugin
    • /wp-content/plugins/cope-custom-blocks/Create: far fronte-custom-blocks.php
PHP<?php /** * Plugin Name: Cope Custom Gutenberg Blocks * Description: Custom blocks for Cope Business sites * Version: 1.0 * Author: Cope Business */ function cope_register_custom_blocks() { if ( ! function_exists( 'register_block_type' ) ) { return; } register_block_type( __DIR__ . '/blocks/call-to-action' ); } add_action( 'init', 'cope_register_custom_blocks' ); function cope_enqueue_block_assets() { wp_enqueue_script( 'cope-blocks-editor', plugins_url( '/blocks/call-to-action/index.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/index.js' ) ); wp_enqueue_style( 'cope-blocks-style', plugins_url( '/blocks/call-to-action/style.css', __FILE__ ), array(), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/style.css' ) ); } add_action( 'enqueue_block_editor_assets', 'cope_enqueue_block_assets' );
  • Crea cartella blocco & file
    • Crea cartella: /blocks/call-to-action/Aggiungi file:
      • block.jsonindex.jseditor.cssstyle.css
    block.json (defines block metadata)
JSON{ "apiVersion": 3, "name": "cope/call-to-action", "title": "Call to Action", "category": "text", "icon": "megaphone", "description": "A custom call to action block", "supports": { "html": false }, "textdomain": "cope-blocks", "editorScript": "file:./index.js", "style": "file:./style.css", "editorStyle": "file:./editor.css", "attributes": { "title": { "type": "string", "default": "Ready to Get Started?" }, "content": { "type": "string", "default": "Contact us today for a free consultation." }, "buttonText": { "type": "string", "default": "Get in Touch" }, "buttonUrl": { "type": "string", "default": "" } } }
  • indice (editor & save logic)
JavaScriptimport { registerBlockType } from '@wordpress/blocks'; import { TextControl, URLInputButton } from '@wordpress/components'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'cope/call-to-action', { edit: ( { attributes, setAttributes } ) => { const blockProps = useBlockProps(); return ( <div { ...blockProps }> <TextControl label="Title" value={ attributes.title } onChange={ ( val ) => setAttributes( { title: val } ) } /> <TextControl label="Content" value={ attributes.content } onChange={ ( val ) => setAttributes( { content: val } ) } /> <URLInputButton label="Button URL" url={ attributes.buttonUrl } onChange={ ( url ) => setAttributes( { buttonUrl: url } ) } /> <TextControl label="Button Text" value={ attributes.buttonText } onChange={ ( val ) => setAttributes( { buttonText: val } ) } /> </div> ); }, save: ( { attributes } ) => { const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <h3>{ attributes.title }</h3> <p>{ attributes.content }</p> { attributes.buttonUrl && ( <a href={ attributes.buttonUrl } className="button"> { attributes.buttonText } </a> ) } </div> ); }, } );
  • stile.css & editor.css — Aggiungere lo stile di base.
  • Attiva Plugin → Vai a Plugin → Attivare “Cope Custom Gutenberg Blocks”.
  • Test: Aggiungi blocco in editor → “Cope / Call to Action” appare → Personalizza e salva.

Punti positivi: Controllo completo, riutilizzabile, nessun plugin extra. Punti negativi: Richiede conoscenze JavaScript/PHP; testare accuratamente.

Migliori pratiche per blocchi Gutenberg personalizzati

  • Utilizzare sempre un plugin o tema bambino — mai modificare i file core.
  • Usa @wordpress/scripts per lo sviluppo di blocchi moderni (npm start/build).
  • Prova su dispositivi mobili, browser diversi e temi di blocco.
  • Tenere i blocchi leggeri — evitare pesanti dipendenze.
  • Aggiungere stili di blocco e variazioni per flessibilità.
  • Utilizzare @wordpress/block-editor hooks per la migliore compatibilità.

Blocchi personalizzati ti danno elementi marcati, riutilizzabili — grande per coerenza.

Pensieri finali

Creare un blocco Gutenberg personalizzato in WordPress consente di aggiungere esattamente la funzionalità e progettare le esigenze del tuo sito. Iniziare con un plugin come Kadence Blocks o Block Lab se si desidera codice basso, o costruire da zero per il massimo controllo.

Blocchi personalizzati a prova di futuro il tuo sito per temi di blocco e la modifica del sito intero.

Hai bisogno di aiuto per creare blocchi personalizzati, ottimizzare il tuo editor, o migliorare le prestazioni complessive del sito? Contatto Cope Business per una consulenza tecnica gratuita SEO — costruiremo blocchi e soluzioni su misura per elevare la vostra esperienza WordPress.

Questo articolo è stato utile?
SìNo

Articoli correlati