{"id":197375,"date":"2023-09-01T10:40:00","date_gmt":"2023-09-01T10:40:00","guid":{"rendered":"https:\/\/www.bluehost.com\/blog\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/"},"modified":"2025-05-15T17:57:33","modified_gmt":"2025-05-15T17:57:33","slug":"utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/","title":{"rendered":"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare"},"content":{"rendered":"\n<p>L&#8217;<a href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">editor di blocchi<\/a> <a href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg <\/a>, l&#8217;editor di contenuti di WordPress, conta oltre <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">81 milioni di installazioni attive<\/a>. Data la natura dominante del mercato di WordPress e la natura intuitiva del design di questo editor, non sorprende che questo sistema sia cos\u00ec popolare. <\/p>\n\n<p>Gutenberg \u00e8 un page builder e un editor di contenuti drag-and-drop accessibile. Offre molte funzionalit\u00e0 e vari approcci che potete utilizzare per creare il sito web curato dei vostri sogni. <\/p>\n\n<p>Questo editor \u00e8 costruito su <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Blocchi Gutenberg<\/strong><\/a>, diverse unit\u00e0 di contenuto che compongono le pagine e il layout di un sito web.<\/p>\n\n<p>\u00c8 possibile ottenere questi blocchi dalla <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">libreria dei blocchi di WordPress<\/a>. Questa libreria \u00e8 ampia, ma non <em>sempre<\/em> contiene il blocco esatto di cui avete bisogno per il vostro sito web. <\/p>\n\n<p>Quindi, se siete un imprenditore che desidera funzionalit\u00e0 avanzate del sito web o elementi specializzati non ancora offerti da Gutenberg, potreste essere interessati a utilizzare i blocchi personalizzati di Gutenberg sul vostro sito web WordPress.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-gutenberg-wordpress-core-content-editor\">Gutenberg: L&#8217;editor di contenuti principale di WordPress<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1094\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png\" alt=\"Editor di contenuti WordPress Gutenberg.\" class=\"wp-image-46218\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-300x164.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1024x560.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-768x420.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1536x841.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-24x13.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-48x26.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>L&#8217;editor Gutenberg \u00e8 il cuore del framework di modifica dei contenuti di WordPress. La sua struttura a blocchi rende facile la <a href=\"https:\/\/www.bluehost.com\/it-it\/blog\/come-creare-un-sito-web-su-wordpress-una-guida-pratica\/\">costruzione di un <\/a><a href=\"https:\/\/www.bluehost.com\/it-it\/blog\/come-creare-un-sito-web-su-wordpress-una-guida-pratica\/\"> sito web<\/a><a href=\"https:\/\/www.bluehost.com\/it-it\/blog\/come-creare-un-sito-web-su-wordpress-una-guida-pratica\/\">WordPress<\/a> e di tutte le sue pagine, anche per i principianti. <\/p>\n\n<p>Con questo editor, \u00e8 possibile creare contenuti ricchi di contenuti multimediali in WordPress scegliendo i nuovi blocchi necessari. Poi, potete dimensionarli come desiderate e aggiungere gli elementi specifici che volete appaiano su ogni pagina. <\/p>\n\n<h3 class=\"wp-block-heading\">Cosa sono i blocchi di Gutenberg?<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"689\" height=\"575\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png\" alt=\"I blocchi di Gutenberg sono gli elementi che compongono una pagina o un post.\" class=\"wp-image-46219\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png 689w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-300x250.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-24x20.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-36x30.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-48x40.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>In Gutenberg, ogni pagina o post \u00e8 costituito da un insieme di elementi autonomi.<\/p><\/blockquote><\/figure>\n\n<p>Questi elementi &#8211; o blocchi &#8211; vengono utilizzati per costruire pagine, post e quant&#8217;altro sul vostro sito web WordPress.<\/p>\n\n<p>Il <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">blocco pi\u00f9 diffuso<\/a> \u00e8 il blocco paragrafo, seguito dai blocchi immagine e intestazione. Altri esempi di blocchi sono i titoli, il testo, i divisori, i widget e i video. <\/p>\n\n<p>Come abbiamo detto in precedenza, \u00e8 possibile accedere ai blocchi WP attraverso la Libreria dei blocchi. Potete trovarla facendo clic sul simbolo <strong>+ in <\/strong>alto a sinistra nella barra degli strumenti di WordPress mentre modificate una pagina o un post. <\/p>\n\n<p>Ma cosa succede se la libreria di WordPress non offre il tipo di blocco che state cercando? O un segnaposto che potreste aggiornare per soddisfare le vostre esigenze? <\/p>\n\n<p>\u00c8 qui che entrano in gioco i blocchi personalizzati.<\/p>\n\n<h3 class=\"wp-block-heading\"><a><\/a>Cosa sono i blocchi personalizzati di Gutenberg?<\/h3>\n\n<p>Gutenberg consente a chiunque di creare risorse gratuite. Quindi, se avete esperienza di codifica e di sviluppo web, potete creare blocchi <em>personalizzati<\/em> durante la creazione del vostro sito web. <\/p>\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>I blocchi personalizzati offrono una flessibilit\u00e0 ancora maggiore e funzionalit\u00e0 specifiche di nicchia rispetto ai blocchi predefiniti.<\/p><\/blockquote><\/figure>\n\n<p>Gli utenti costruiscono blocchi personalizzati per creare elementi di pagina unici.<\/p>\n\n<p>I blocchi personalizzati di Gutenberg offrono molti vantaggi, tra cui:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>\u00c8 possibile progettare elementi di WordPress visivamente accattivanti e ricchi di contenuti multimediali, adattati alle esigenze <em>della vostra<\/em> azienda.<\/li>\n\n\n\n<li>Aggiungono funzionalit\u00e0 uniche e avanzate al vostro sito web.<\/li>\n\n\n\n<li>Migliorano l&#8217;aspetto estetico delle pagine e aiutano la vostra azienda a distinguersi dalla massa.<\/li>\n\n\n\n<li>\u00c8 sufficiente codificare i blocchi una sola volta. Dopodich\u00e9, \u00e8 possibile utilizzarli in tutti i siti e le pagine. <\/li>\n<\/ul>\n\n<p>Tuttavia, i blocchi personalizzati presentano alcune sfide. Innanzitutto, la loro realizzazione richiede conoscenze tecniche approfondite. Inoltre, sono necessarie alcune competenze specifiche di codifica e strumenti di sviluppo.  <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Come ottenere blocchi Gutenberg personalizzati per WordPress<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png\" alt=\"Come ottenere blocchi Gutenberg personalizzati per WordPress.\" class=\"wp-image-46220\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png 1920w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1536x864.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n<p>Per ottenere i blocchi personalizzati di Gutenberg, \u00e8 necessario costruirli da soli o acquistarli.<\/p>\n\n<p>La creazione di blocchi personalizzati non \u00e8 alla portata di tutti, ma questo non \u00e8 un problema. \u00c8 possibile acquistare blocchi Gutenberg personalizzati invece di costruirli da soli. Per farlo, \u00e8 sufficiente trovare uno <a href=\"https:\/\/www.bluehost.com\/about\">sviluppatore di alto livello<\/a> di cui ci si fida e collaborare con lui per creare i blocchi ideali.  <\/p>\n\n<p>Se avete intenzione di creare questi blocchi da soli, ci sono alcuni aspetti da considerare prima di iniziare.<\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Cosa considerare prima di creare blocchi personalizzati<\/h2>\n\n<p>La creazione di un blocco personalizzato Gutenberg richiede tempo ed energia. Prima di iniziare il processo, dovreste assicurarvi di aver esaurito tutte le altre opzioni. <\/p>\n\n<p>\u00c8 possibile verificare che non ci siano altri approcci adatti esaminando attentamente la libreria dei blocchi predefiniti di Gutenberg. Assicuratevi che non ci siano blocchi esistenti che forniscano le funzioni di base o le specifiche di stile di cui avete bisogno. <\/p>\n\n<p>Se avete stabilito che <em>avete<\/em> bisogno di un blocco personalizzato,<em> prima di <\/em>iniziare la costruzione del vostro blocco, delineatene le specifiche vitali. Pensate agli elementi estetici, alle impostazioni predefinite e alle caratteristiche principali. Considerate anche le specifiche della barra degli strumenti e altre caratteristiche stilistiche e funzionali fondamentali.  <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Cosa serve per costruire i blocchi personalizzati di Gutenberg<\/h2>\n\n<p>Una volta determinati gli aspetti pi\u00f9 essenziali del vostro blocco, ci sono altri requisiti fondamentali che dovrete soddisfare prima di iniziare il processo.<\/p>\n\n<p>Un sito web WordPress attivo \u00e8 essenziale. Inoltre, \u00e8 necessario avere almeno un po&#8217; di esperienza con JavaScript e con gli strumenti di costruzione JavaScript, come <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a>. <\/p>\n\n<p>\u00c8 inoltre necessaria una conoscenza intermedia di HTML, CSS e PHP per creare i propri blocchi personalizzati.<\/p>\n\n<p>Se non siete molto esperti in questo campo, non preoccupatevi. Potete risparmiare tempo e stress assumendo <a href=\"https:\/\/www.bluehost.com\/solutions\/full-service\">esperti di web design<\/a> che vi aiutino a costruire i blocchi. <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Come creare blocchi Gutenberg personalizzati in WordPress<\/h2>\n\n<p>Esistono due approcci accessibili alla costruzione dei blocchi personalizzati di Gutenberg. Si pu\u00f2 installare un plugin facile da usare che semplifica il processo o costruirli da zero usando codice HTML\/CSS o PHP. <\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png\" alt=\"Come creare blocchi Gutenberg personalizzati in WordPress\" class=\"wp-image-46221\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">Creare blocchi personalizzati con un plugin<\/h3>\n\n<p>Esistono diversi <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugin WordPress<\/a> per la creazione di blocchi che semplificano il processo di creazione di blocchi personalizzati Gutenberg per il vostro sito WordPress. Noi consigliamo di utilizzare <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Genesis Custom Blocks<\/a>. <\/p>\n\n<p>Per creare il primo blocco con questo plugin:<\/p>\n\n<p><strong>1. Installare i blocchi personalizzati Genesis<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"988\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png\" alt=\"Installare il plugin Genesis Custom Blocks WordPress.\" class=\"wp-image-46222\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-300x148.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1024x506.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-768x380.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1536x759.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-36x18.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-48x24.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Per prima cosa, andate su <strong>Plugin &gt; Aggiungi nuovo <\/strong>nella barra laterale sinistra della vostra dashboard di amministrazione e cercate Genesis nella <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">directory dei plugin di WordPress<\/a>. Installatelo e fate clic sul pulsante <strong>Attiva <\/strong>. <\/p>\n\n<p><strong>2. Creare un nuovo blocco<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"646\" height=\"312\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png\" alt=\"Andate su Blocchi personalizzati &amp;gt; Aggiungi nuovo nella vostra dashboard di WordPress.\" class=\"wp-image-46223\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png 646w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-300x145.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-36x17.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-48x23.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Quindi, spostarsi su <strong>Blocchi personalizzati &gt; Aggiungi nuovo <\/strong>per creare un blocco.<\/p>\n\n<p><strong>3. Configurare le specifiche del blocco<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"995\" height=\"467\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg\" alt=\"Configurazione del blocco.\" class=\"wp-image-46224\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg 995w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-300x141.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-768x360.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-24x11.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-36x17.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-48x23.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Ora \u00e8 possibile selezionare il nome di un blocco, quindi configurare e personalizzare le sue propriet\u00e0. <a href=\"https:\/\/www.bluehost.com\/it-it\/blog\/come-ottimizzare-i-contenuti-per-la-seo-su-wordpress\/\">Per favorire l&#8217;ottimizzazione dei motori di ricerca<\/a> (SEO), aggiungere <a href=\"https:\/\/www.bluehost.com\/blog\/find-best-keywords-get-found\/\">parole chiave pertinenti<\/a>.<\/p>\n\n<p>Quindi, aggiungere campi, come numeri, immagini e caselle di controllo, premendo il <strong> pulsante + <\/strong>. \u00c8 necessario inserire altre specifiche, come l&#8217;<strong>etichetta del campo<\/strong>, la <strong>posizione del campo<\/strong> e il <strong>testo di aiuto<\/strong>. \u00c8 inoltre possibile riordinare, modificare ed eliminare i campi.  <\/p>\n\n<p><strong>4. Costruite il vostro modello.<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1076\" height=\"470\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg\" alt=\"Costruire un modello.\" class=\"wp-image-46225\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg 1076w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-300x131.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-1024x447.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-768x335.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-36x16.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-48x21.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Successivamente, \u00e8 possibile costruire il modello con HTML e CSS o PHP, a seconda dell&#8217;output del blocco.<\/p>\n\n<p>Se il blocco \u00e8 configurato per HTML e CSS, \u00e8 possibile utilizzare l&#8217;<strong>Editor di modelli<\/strong> del plugin, che si trova nella barra superiore. Qui \u00e8 possibile personalizzare il blocco tramite le schede <strong>Markup (<\/strong>HTML) e <strong>CSS <\/strong>. <\/p>\n\n<p>Se si desidera aggiungere PHP, \u00e8 necessario utilizzare un editor di testo semplice per creare manualmente i file <strong>block<\/strong><strong>.php<\/strong> e <strong>block.css<\/strong>.<\/p>\n\n<p><strong>5. Salvare e confermare il blocco<\/strong><\/p>\n\n<p>Assicurarsi di salvare il blocco facendo clic su <strong>Pubblica<\/strong> in alto a destra.<\/p>\n\n<p><strong>6. Aggiungete il blocco al vostro sito web<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1404\" height=\"592\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg\" alt=\"Aggiunta del blocco a una pagina.\" class=\"wp-image-46226\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg 1404w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-300x126.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-1024x432.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-768x324.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-36x15.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-48x20.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Infine, \u00e8 possibile aggiungere il blocco al proprio sito web. Aprite o create un post o una pagina, quindi premete il <strong>+ nella <\/strong>barra laterale sinistra della vostra dashboard per trovare e incorporare il blocco. <\/p>\n\n<p>Poi, personalizzate il contenuto della pagina a vostro piacimento con altri blocchi, utili<a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">shortcode<\/a> <a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">di WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\"> <\/a> e altri approcci accessibili che <a href=\"https:\/\/www.bluehost.com\/blog\/ux-matters-how-to-create-a-dynamic-user-experience-faqs\/\">ottimizzano l&#8217;esperienza utente<\/a> (UX) e le <a href=\"https:\/\/www.bluehost.com\/blog\/10-wordpress-setting-changes-to-optimize-your-sites-performance\/\">prestazioni del sito web<\/a>.<\/p>\n\n<h3 class=\"wp-block-heading\"><a><\/a>Creazione manuale di blocchi personalizzati<\/h3>\n\n<p>In alternativa, \u00e8 possibile codificare i blocchi personalizzati di Gutenberg da zero, seguendo questa procedura passo dopo passo:<\/p>\n\n<p><strong>1. Configurare l&#8217;ambiente di sviluppo di WordPress<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1030\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png\" alt=\"&#xC8; necessario includere Node.js nell'ambiente di sviluppo di WordPress.\" class=\"wp-image-46227\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-300x155.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1024x528.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-768x396.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1536x791.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-36x19.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-48x25.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Prima di tutto, installare <a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Node.js<\/strong><\/a> e il <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">gestore di pacchetti Node<\/a> (npm). Si tratta di strumenti di costruzione di JavaScript che consentono di definire le funzioni di base dei blocchi. \u00c8 possibile scaricare <strong>Node.js<\/strong> tramite il programma di installazione online e assicurarsi che <strong>npm<\/strong> sia attivato inserendo il comando <strong>npm-v <\/strong>nell&#8217;editor di codice.  <\/p>\n\n<p>Successivamente, \u00e8 necessario installare <a href=\"https:\/\/www.docker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Docker<\/a>, un requisito per utilizzare lo strumento per sviluppatori di WordPress. Il sito web di Docker offre una semplice installazione con un solo clic. <\/p>\n\n<p>Dopodich\u00e9, dovrete <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/setting-up-a-development-environment\/\" target=\"_blank\" rel=\"noreferrer noopener\">impostare l &#8216;ambiente di sviluppo<\/a> e <a href=\"https:\/\/www.bluehost.com\/help\/article\/wordpress-how-to-create-a-staging-site\">attivare il sito di staging<\/a>. Potete configurare l&#8217;ambiente di sviluppo attraverso lo strumento predefinito di WordPress. Installatelo globalmente inserendo il comando <strong>npm -g install @wordpress\/env<\/strong>.  <\/p>\n\n<p><strong>2. Impostare il file del plugin di base (starter)<\/strong><\/p>\n\n<p>Prima di poter effettivamente creare il blocco personalizzato di Gutenberg, \u00e8 necessario creare un plugin di blocco di base come riferimento. Fortunatamente, esistono alcuni approcci che consentono di evitare di completare manualmente questo passaggio. <\/p>\n\n<p>Eseguire il comando <strong>\/wp-content\/plugins\/ <\/strong>per navigare nella cartella dei plugin.<\/p>\n\n<p>In questo caso, \u00e8 possibile eseguire il comando <strong>npx @wordpress\/create-block<\/strong>, che consente di accedere facilmente ai file PHP e JS e di modificarli.<\/p>\n\n<p>Assicuratevi di aggiungere al comando il nome che volete usare per il vostro blocco iniziale. Si pu\u00f2 usare qualcosa di semplice, come <strong>my-new-block<\/strong>, oppure essere creativi. <\/p>\n\n<p>L&#8217;altra opzione \u00e8 installare lo strumento <a href=\"https:\/\/www.npmjs.com\/package\/create-guten-block\" target=\"_blank\" rel=\"noreferrer noopener\">create-guten-block<\/a> ed eseguire il comando <strong>npx create-guten-block<\/strong> con il nome del blocco iniziale.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"888\" height=\"818\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg\" alt=\"&#xC8; possibile utilizzare lo strumento create-guten-block per impostare il file del plugin iniziale.\" class=\"wp-image-46228\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg 888w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-300x276.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-768x707.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-24x22.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-36x33.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-48x44.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Questi processi creeranno un punto di partenza.<\/p>\n\n<p><strong>3. Configurare block.json<\/strong><\/p>\n\n<p>\u00c8 necessario aggiungere un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\" target=\"_blank\" rel=\"noreferrer noopener\">file block.json<\/a> alla nuova cartella, quindi configurarlo inserendo metadati e selezioni per varie impostazioni. Esempi di impostazioni sono gli attributi del blocco e altre specifiche regolabili, come la<strong>versione<\/strong> dell&#8217;interfaccia di pianificazione dell&#8217;applicazione<strong>(API)<\/strong>, il <strong>titolo<\/strong> e la <strong>categoria<\/strong>. <\/p>\n\n<p>Ecco un esempio di come potrebbe apparire una parte del codice block.json:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"583\" height=\"655\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg\" alt=\"&#xC8; necessario configurare le impostazioni del file block.json, compresa la versione dell'API.\" class=\"wp-image-46229\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg 583w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-267x300.jpg 267w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-21x24.jpg 21w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-32x36.jpg 32w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-43x48.jpg 43w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p>Il file <strong>block.json<\/strong> consente al plugin di base del blocco di apparire nella directory dei plugin, facilita la registrazione del blocco in seguito e contribuisce alle prestazioni del sito web.<\/p>\n\n<p><strong>4. Configurare altre specifiche<\/strong><\/p>\n\n<p>Successivamente, si determineranno e si inseriranno le specifiche riguardanti:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Stili.<\/li>\n\n\n\n<li>Dipendenze e file delle risorse.<\/li>\n\n\n\n<li>Attributi.<\/li>\n\n\n\n<li>Sceneggiature.<\/li>\n\n\n\n<li>Etichette e parole chiave.<\/li>\n<\/ul>\n\n<p>\u00c8 possibile navigare nel <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noreferrer noopener\">file<strong>package.json<\/strong><\/a> per configurare le propriet\u00e0, gli stili e gli script JavaScript. Attraverso il <strong>file block.json<\/strong>, si possono definire gli attributi con la funzione <strong>setAttributes <\/strong>. Si possono anche modificare le impostazioni dei blocchi con etichette e parole chiave.  <\/p>\n\n<p>\u00c8 possibile aggiungere altre specifiche di frontend e backend e modificare varie funzioni. Per esempio, si dovrebbe creare un file di risorse per aggiungere le <a href=\"https:\/\/www.sonatype.com\/launchpad\/what-are-software-dependencies\" target=\"_blank\" rel=\"noreferrer noopener\">dipendenze<\/a>. \u00c8 possibile farlo inserendo il comando <strong>npm run build <\/strong>per il file JavaScript XML (JSX) o il seguente codice PHP:  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"266\" height=\"229\" src=\"https:\/\/www.bluehost.com\/it-it\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg\" alt=\"Codice PHP per creare un file di risorse per le dipendenze.\" class=\"wp-image-46230\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg 266w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-24x21.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-36x31.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-48x41.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermata<\/em><\/figcaption><\/figure>\n\n<p><strong>5. Registrazione del blocco<\/strong><\/p>\n\n<p>Una volta creato il plugin del blocco, utilizzare la funzione <strong>register_block_type<\/strong>. Questa tecnica di registrazione dei blocchi estrae automaticamente i metadati determinati in precedenza dal file <strong>block.json<\/strong>. <\/p>\n\n<p><strong>6. Salvare e confermare il blocco<\/strong><\/p>\n\n<p>Il passo finale consiste nel salvare tutti i file e testare il nuovo blocco.<\/p>\n\n<p>\u00c8 possibile confermarne la funzionalit\u00e0 aggiungendo il nuovo blocco personalizzato Gutenberg al proprio sito web. Se lo si inserisce e viene visualizzato il messaggio &#8220;Hello World&#8221;, \u00e8 segno che il processo \u00e8 stato completato correttamente. <\/p>\n\n<p>Se in futuro volete usare lo stesso blocco in pi\u00f9 layout o siti web, provate a usarlo in un <a href=\"https:\/\/www.bluehost.com\/blog\/what-are-gutenberg-block-patterns-in-wordpress-and-how-to-use-them\/\">modello di blocco Gutenberg<\/a>.<\/p>\n\n<p>Consultate la <a href=\"https:\/\/learn.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">pagina &#8220;Impara&#8221; di WordPress<\/a> per ulteriori informazioni e <a href=\"https:\/\/learn.wordpress.org\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">tutorial<\/a> su come configurare il vostro sito web.<\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Riflessioni finali: Come creare blocchi personalizzati Gutenberg &#8211; una guida Bluehost<\/h2>\n\n<p>La creazione di blocchi personalizzati di Gutenberg per WordPress \u00e8 una soluzione utile se avete bisogno di elementi del sito web non offerti dai blocchi predefiniti.<\/p>\n\n<p>\u00c8 possibile creare i propri blocchi Gutenberg con un plugin o attraverso la codifica manuale. Tuttavia, entrambi i processi richiedono una certa competenza tecnica. <\/p>\n\n<p>Se non volete creare da soli dei blocchi personalizzati, provate i <a href=\"https:\/\/www.bluehost.com\/solutions\/website-design\">servizi di progettazione di siti web di Bluehost<\/a>. Il nostro team di esperti impegnati \u00e8 qui per aiutarvi a personalizzare e coltivare il sito web perfetto. <\/p>\n\n<p>Se desiderate progettare il vostro sito web da soli, ma volete una guida esperta per la modifica del sito durante il percorso, offriamo anche il <a href=\"https:\/\/www.bluehost.com\/pro-design-live\">Pro Design con assistenza dal vivo<\/a>. I nostri esperti possono aiutarvi a scegliere e personalizzare i temi e i plugin perfetti e a ottimizzare il vostro sito web. <\/p>\n\n<p>Poi, una volta che il vostro sito web \u00e8 pronto per essere operativo, <a href=\"https:\/\/www.bluehost.com\/contact\">contattate noi di Bluehost<\/a> per ottenere<a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\"> servizi di hosting<\/a> <a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\">WordPress<\/a> ad alta velocit\u00e0, di alta qualit\u00e0 e ad alte prestazioni.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;editor di blocchi Gutenberg , l&#8217;editor di contenuti di WordPress, conta oltre 81 milioni di installazioni attive. Data la natura dominante del mercato di WordPress e la natura intuitiva del design di questo editor, non sorprende che questo sistema sia cos\u00ec popolare. Gutenberg \u00e8 un page builder e un editor di contenuti drag-and-drop accessibile. Offre [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":197377,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"Come creare blocchi personalizzati Gutenberg - Guida Bluehost","_yoast_wpseo_metadesc":"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.","inline_featured_image":false,"footnotes":""},"categories":[3099,1774],"tags":[3596],"ppma_author":[599],"class_list":["post-197375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo","category-valentina","tag-guide-pratiche"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Come creare blocchi personalizzati Gutenberg - Guida Bluehost<\/title>\n<meta name=\"description\" content=\"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/posts\/197375\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare\" \/>\n<meta property=\"og:description\" content=\"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/\" \/>\n<meta property=\"og:site_name\" content=\"Bluehost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bluehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T10:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-15T17:57:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Minal Agarwal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/minalagarwal\" \/>\n<meta name=\"twitter:site\" content=\"@bluehost\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Minal Agarwal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/\"},\"author\":{\"name\":\"Minal Agarwal\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\"},\"headline\":\"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"dateModified\":\"2025-05-15T17:57:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/\"},\"wordCount\":2028,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"keywords\":[\"Guide pratiche\"],\"articleSection\":[\"Sviluppo\",\"Valentina\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/\",\"name\":\"Come creare blocchi personalizzati Gutenberg - Guida Bluehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"dateModified\":\"2025-05-15T17:57:33+00:00\",\"description\":\"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.bluehost.com\/it-it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Siti web\",\"item\":\"https:\/\/www.bluehost.com\/blog\/it\/category\/siti-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#website\",\"url\":\"https:\/\/www.bluehost.com\/blog\/it\/\",\"name\":\"Bluehost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bluehost.com\/blog\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#organization\",\"name\":\"Bluehost\",\"url\":\"https:\/\/www.bluehost.com\/blog\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"width\":136,\"height\":24,\"caption\":\"Bluehost\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bluehost\/\",\"https:\/\/x.com\/bluehost\",\"https:\/\/www.linkedin.com\/company\/bluehost-com\/\",\"https:\/\/www.youtube.com\/user\/bluehost\",\"https:\/\/en.wikipedia.org\/wiki\/Bluehost\"],\"description\":\"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \\u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.\",\"telephone\":\"+1-888-401-4678\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\",\"name\":\"Minal Agarwal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"caption\":\"Minal Agarwal\"},\"description\":\"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal\"],\"knowsAbout\":[\"WordPress\"],\"url\":\"https:\/\/www.bluehost.com\/blog\/it\/author\/minal-agarwal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come creare blocchi personalizzati Gutenberg - Guida Bluehost","description":"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/posts\/197375\/","og_locale":"it_IT","og_type":"article","og_title":"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare","og_description":"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.","og_url":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/","og_site_name":"Bluehost Blog","article_publisher":"https:\/\/www.facebook.com\/bluehost\/","article_published_time":"2023-09-01T10:40:00+00:00","article_modified_time":"2025-05-15T17:57:33+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","type":"image\/png"}],"author":"Minal Agarwal","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/minalagarwal","twitter_site":"@bluehost","twitter_misc":{"Scritto da":"Minal Agarwal","Tempo di lettura stimato":"10 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#article","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/"},"author":{"name":"Minal Agarwal","@id":"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3"},"headline":"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare","datePublished":"2023-09-01T10:40:00+00:00","dateModified":"2025-05-15T17:57:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/"},"wordCount":2028,"commentCount":0,"publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/#organization"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","keywords":["Guide pratiche"],"articleSection":["Sviluppo","Valentina"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/","url":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/","name":"Come creare blocchi personalizzati Gutenberg - Guida Bluehost","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","datePublished":"2023-09-01T10:40:00+00:00","dateModified":"2025-05-15T17:57:33+00:00","description":"Siete interessati a creare blocchi personalizzati Gutenberg per il vostro sito WordPress? Scoprite in questa guida i vari approcci per costruire e ottenere blocchi personalizzati.","breadcrumb":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#primaryimage","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.bluehost.com\/blog\/it\/utilizzare-i-blocchi-personalizzati-di-gutenberg-per-la-creazione-di-contenuti-wordpress-una-guida-facile-da-usare\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.bluehost.com\/it-it\/blog\/"},{"@type":"ListItem","position":2,"name":"Siti web","item":"https:\/\/www.bluehost.com\/blog\/it\/category\/siti-web\/"},{"@type":"ListItem","position":3,"name":"Utilizzare i blocchi personalizzati di Gutenberg per la creazione di contenuti WordPress: Una guida facile da usare"}]},{"@type":"WebSite","@id":"https:\/\/www.bluehost.com\/blog\/it\/#website","url":"https:\/\/www.bluehost.com\/blog\/it\/","name":"Bluehost","description":"","publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bluehost.com\/blog\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.bluehost.com\/blog\/it\/#organization","name":"Bluehost","url":"https:\/\/www.bluehost.com\/blog\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","width":136,"height":24,"caption":"Bluehost"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bluehost\/","https:\/\/x.com\/bluehost","https:\/\/www.linkedin.com\/company\/bluehost-com\/","https:\/\/www.youtube.com\/user\/bluehost","https:\/\/en.wikipedia.org\/wiki\/Bluehost"],"description":"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.","telephone":"+1-888-401-4678"},{"@type":"Person","@id":"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3","name":"Minal Agarwal","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.bluehost.com\/blog\/it\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478","url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","caption":"Minal Agarwal"},"description":"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal"],"knowsAbout":["WordPress"],"url":"https:\/\/www.bluehost.com\/blog\/it\/author\/minal-agarwal\/"}]}},"authors":[{"term_id":599,"user_id":74,"is_guest":0,"slug":"minal-agarwal","display_name":"Minal Agarwal","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":""}],"_links":{"self":[{"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/posts\/197375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=197375"}],"version-history":[{"count":0,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/posts\/197375\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/media\/197377"}],"wp:attachment":[{"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=197375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=197375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=197375"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/it\/wp-json\/wp\/v2\/ppma_author?post=197375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}