{"id":68363,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=68363"},"modified":"2025-06-11T13:20:50","modified_gmt":"2025-06-11T20:20:50","slug":"come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/","title":{"rendered":"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!)"},"content":{"rendered":"\n<p>Sarebbe strano se menzionassi come mia moglie stia tenendo un kit Lego Star Wars BB-8 in edizione limitata, intatto e mai aperto?<\/p>\n\n\n<p>Quelle cose si vendono per circa $500!<\/p>\n\n\n<p>Okay. Sarebbe strano. Capito, forte e chiaro&#8230; Ma tutto questo avr\u00e0 pi\u00f9 senso tra un attimo.<\/p>\n\n\n<p>In questo post, copriremo tutto ci\u00f2 che devi sapere sui blocchi di WordPress. Se sei un utente WP della vecchia scuola come me, probabilmente pensi ancora ai blocchi come una novit\u00e0 di <a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> perch\u00e9 hai iniziato utilizzando l&#8217;editor classico.<\/p>\n\n\n<p>Sono passati pi\u00f9 di cinque anni da quando WordPress ha introdotto i blocchi, ma sono ancora una delle funzionalit\u00e0 del CMS pi\u00f9 fraintese e sottovalutate.<\/p>\n\n\n<p>I blocchi WordPress sono un po&#8217; come i Lego \u2014vedi, <i>te l&#8217;avevo detto<\/i> che avrebbe avuto senso \u2014 ti permettono di costruire e personalizzare il tuo sito web in un modo che avrebbe richiesto l&#8217;assunzione di un designer e sviluppatore web professionista solo pochi anni fa.<\/p>\n\n\n<p>Ed \u00e8 proprio uno dei motivi per cui le persone li amano cos\u00ec tanto. Una volta che li capiscono, ovviamente.<\/p>\n\n\n<p>Dopo che ti avr\u00f2 spiegato come funzionano, non c&#8217;\u00e8 dubbio che anche tu li adorerai.<\/p>\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Cosa Sono i Blocchi WordPress?<\/h2>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Blocchi WordPress\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n<p>I blocchi WordPress sono, come suggerisce il nome, come dei <i>blocchi da costruzione<\/i> impilabili che puoi aggiungere alle pagine e ai post sul tuo sito WordPress.<\/p>\n\n\n<p>Sono stati aggiunti a WordPress 5.0 insieme all&#8217;inclusione dell&#8217;editor Gutenberg con cui molti di noi sono ormai familiari. I blocchi sono ora il modo standard per personalizzare il tuo sito WordPress \u2014 e puoi utilizzare i blocchi in tutto il sito, non solo nei post.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg \u00e8 il nome del progetto dell&#8217;Editor a Blocchi in WordPress. Molti sviluppatori e appassionati di WordPress usano i termini Editor Gutenberg e Editor a Blocchi in modo interscambiabile.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Pensalo un po&#8217; come un costruttore di siti o pagine. Puoi cliccare sul pulsante &#8220;+&#8221; per aggiungere un blocco a una pagina o un post e poi scegliere tra varie opzioni di blocco. La versione attuale di WordPress include pi\u00f9 di 90 opzioni disponibili immediatamente.<\/p>\n\n\n<p>Ogni blocco \u00e8 essenzialmente un widget. Possono fare varie cose, come incorporare contenuti da un altro sito o servizio, aggiungere nuove funzionalit\u00e0 come calendari o moduli di contatto alla pagina, o anche aggiungere contenuti specifici con formattazione predefinita.<\/p>\n\n\n<p>Inoltre, la maggior parte dei blocchi ha opzioni di personalizzazione che ti permettono di regolare il modo in cui vengono visualizzati o funzionano sul tuo sito.<\/p>\n\n\n<p>L&#8217;editor di blocchi di WordPress rappresenta un notevole miglioramento rispetto all&#8217;editor classico. Nei giorni precedenti a Gutenberg, gli utenti di WordPress potevano solo aggiungere testo e immagini a un post prima di dover ricorrere a codice personalizzato.<\/p>\n\n\n<p><b>Nota per i Nerd:<\/b> Se per qualche motivo, non hai accesso ai blocchi dall&#8217;editor di WordPress, potrebbe essere per una di due ragioni: Una \u00e8 che la tua <a href=\"https:\/\/www.dreamhost.com\/wordpress\/\" target=\"_blank\" rel=\"noopener\">installazione di WordPress<\/a> potrebbe essere terribilmente obsoleta (di anni e anni fa). In secondo luogo, \u00e8 possibile che l&#8217;editor a blocchi sia stato disabilitato dal plugin Classic Editor. Quando attivo su un sito WordPress, questo plugin ti riporta all&#8217;esperienza dell&#8217;editor classico. Controlla la tua pagina dei plugin da wp-admin per capire se questo \u00e8 il caso per te.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">Quali Blocchi Sono Gi\u00e0 Presenti in WordPress?<\/h2>\n\n\n<p>Di default, l&#8217;editor di blocchi offre un <i>enorme <\/i>numero di <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">blocchi disponibili<\/a>. Puoi utilizzare questi blocchi per personalizzare il tuo tema WordPress, permettere a scrittori e blogger di aggiungere contenuti ricchi ai loro post, integrare contenuti dai social media e molto altro ancora.<\/p>\n\n\n<p>Diamo un&#8217;occhiata ad alcuni dei blocchi Gutenberg predefiniti pi\u00f9 popolari e utili.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Blocchi Pi\u00f9 Comuni<\/h3>\n\n\n<p>Aggiungere qualsiasi tipo di testo o immagine viene eseguito utilizzando un blocco. Questo significa che i blocchi pi\u00f9 comuni sono generalmente i diversi stili e tipi di elementi di testo o immagine che potresti aggiungere a una pagina.<\/p>\n\n\n<p>Cose come:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Blocco di Testo \u2014 Ogni paragrafo che scrivi nell&#8217;editor di blocchi risiede nel proprio blocco di testo, ma i blocchi di testo non sono limitati ai paragrafi. Scrivi poco o scrivi molto.<\/li>\n\n\n\n<li>Blocco Immagine \u2014 Per quando vuoi mostrare oltre che raccontare, aggiungi un&#8217;immagine per un tocco di stile in pi\u00f9.<\/li>\n\n\n\n<li>Blocco Lista \u2014 Hai bisogno di scrivere un sommario? Cosa ne dici di una lista ordinata? Puoi fare tutto con il blocco lista!<\/li>\n\n\n\n<li>Blocco Galleria Immagini \u2014 Condividere foto di vacanze o scatti di prodotti non \u00e8 mai stato cos\u00ec bello.<\/li>\n\n\n\n<li>Blocco Tabella \u2014 Crea una tabella dei prezzi o condividi alcuni dati di un foglio di calcolo con facilit\u00e0.<\/li>\n\n\n\n<li>Blocco Citazione \u2014 Vuoi attirare l&#8217;attenzione su una particolare osservazione? Ispirato da una citazione che \u00e8 rilevante per il post che stai scrivendo? Evidenzialo con il blocco citazione!<\/li>\n\n\n<\/ul>\n\n\n<p>Ognuno di questi \u00e8 un elemento che puoi aggiungere al tuo sito web con l&#8217;editor di blocchi. Quindi, puoi posizionarli e stilizzarli nella sezione contenuti della pagina.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Blocchi di Contenuto Incorporati<\/h3>\n\n\n<p>I blocchi rendono estremamente facile incorporare contenuti esterni e widget nel tuo sito web WordPress senza la necessit\u00e0 di aggiungere un nuovo plugin o componente aggiuntivo di terze parti.<\/p>\n\n\n<p>Alcuni dei tipi di blocchi di incorporamento pi\u00f9 popolari per importare contenuti esterni:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Blocco Calendly<\/li>\n\n\n\n<li>Blocco HTML Personalizzato<\/li>\n\n\n\n<li>Blocco Twitter<\/li>\n\n\n\n<li>Blocco YouTube<\/li>\n\n\n\n<li>Testimonianze<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Moduli di Contatto<\/li>\n\n\n\n<li>Domande frequenti<\/li>\n\n\n<\/ul>\n\n\n<p>Utilizzando questi tipi di blocchi, puoi andare oltre l&#8217;editor di testo di base e creare contenuti interattivi che includono ogni tipo di funzionalit\u00e0 e caratteristiche.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Blocchi Specializzati<\/h3>\n\n\n<p>Ecco dove le cose diventano davvero piccanti.<\/p>\n\n\n<p>Oltre le basi e i contenuti incorporati, ci sono anche un enorme numero di blocchi avanzati che puoi utilizzare per casi speciali. Come quando vuoi migliorare la navigazione e l&#8217;UX del tuo sito, o usare WordPress come un vero e proprio costruttore di siti.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navigazione<\/h3>\n    <p>Sul web, il termine &#8216;navigazione&#8217; rappresenta il passaggio da un sito web o una pagina all&#8217;altra. La navigazione \u00e8 anche un termine comune nello sviluppo e nel design web. C&#8217;\u00e8 un&#8217;enfasi sul rendere facile per gli utenti trovare le pagine di cui hanno bisogno.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi Di Pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Ecco alcuni da controllare:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Blocco di Pulsanti<\/li>\n\n\n\n<li>Blocco di Colonne<\/li>\n\n\n\n<li>Blocco di Gruppo<\/li>\n\n\n\n<li>Blocco Carosello di Articoli<\/li>\n\n\n\n<li>Blocco Contenuto di Articoli<\/li>\n\n\n\n<li>Blocco Loop di Query<\/li>\n\n\n\n<li>Blocco Riutilizzabile<\/li>\n\n\n\n<li>Blocco Shortcode<\/li>\n\n\n\n<li>Blocco Indice dei Contenuti<\/li>\n\n\n<\/ul>\n\n\n<p>Con questi blocchi, puoi importare contenuti personalizzati direttamente dal database di WordPress o personalizzare completamente il layout, lo spazio e il flusso di ogni pagina o post sul tuo sito web.<\/p>\n\n\n<p>\u00c8 tutto fantastico e d&#8217;effetto.<\/p>\n\n\n<p><i>Ma cosa succede se hai bisogno di un blocco che non \u00e8 incluso in WordPress di default?&nbsp;<\/i><\/p>\n\n\n<p>Fortunatamente, i blocchi sono anche personalizzabili. Proprio come i widget, puoi aggiungere nuovi blocchi e persino crearne di propri per adattarsi alle esigenze del design del tuo sito web e del template.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>I widget di WordPress possono aggiungere funzionalit\u00e0 alle barre laterali, ai pi\u00e8 di pagina o ad altre aree del tuo sito web. Alcuni widget di WordPress predefiniti sono Categorie, Nuvola di Tag, Ricerca, Menu di Navigazione, Calendario e Post Recenti.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Come Creare Blocchi Personalizzati Con Un Plugin WordPress<\/h2>\n\n\n<p>Di gran lunga, il modo pi\u00f9 semplice per creare un blocco personalizzato \u00e8 utilizzare un plugin.<\/p>\n\n\n<p>Il <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Plugin Genesis Custom Blocks<\/a> rende la creazione e il lancio dei tuoi blocchi personalizzati abbastanza semplice. Avrai bisogno di una conoscenza di base di <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> e <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> per creare e stilizzare il blocco secondo le tue necessit\u00e0.<\/p>\n\n\n<p>Con queste competenze di base, il plugin si occupa di tutta la configurazione e l&#8217;installazione difficili per implementare un nuovo blocco.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo 1: Installa il Plugin Genesis Block<\/h3>\n\n\n<p>Prima di tutto: vai alla directory dei plugin di WordPress e installa il <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Plugin Genesis Custom Block<\/a>.<\/p>\n\n\n<p>(Non dimenticare di andare nella scheda Plugins e attivarlo.)<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo 2: Aggiungi Un Nuovo Blocco<\/h3>\n\n\n<p>Una volta installato e attivato, dovresti vedere una nuova opzione nel pannello di amministrazione WP nella navigazione a sinistra.<\/p>\n\n\n<p>Clic su Blocchi Personalizzati &gt; Aggiungi Nuovo.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo 3: Personalizza I Campi Dell&#8217;Editor<\/h3>\n\n\n<p>Ora, siamo pronti per iniziare a costruire il blocco personalizzato.<\/p>\n\n\n<p>Il primo passo sar\u00e0 impostare i campi e le opzioni di personalizzazione che appariranno quando utilizzi il blocco sul tuo sito web.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Screenshot della schermata di configurazione del Plugin Genesis Custom Blocks\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n<p>Puoi pensare a questo un po&#8217; come a una versione ridotta dell&#8217;editor di blocchi stesso. Aggiungerai campi personalizzati e dati che saranno o precompilati dal blocco stesso o raccolti dall&#8217;editor o dall&#8217;utente che sta aggiungendo il blocco a una pagina o a un post.<\/p>\n\n\n<p>Ad esempio, se stai costruendo un blocco personalizzato per l&#8217;invito all&#8217;azione (CTA), potresti aggiungere campi come:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Testo del titolo<\/li>\n\n\n\n<li>Testo del sottotitolo<\/li>\n\n\n\n<li>Testo del pulsante<\/li>\n\n\n\n<li>URL del pulsante CTA<\/li>\n\n\n<\/ul>\n\n\n<p>Ogni campo avr\u00e0 un&#8217;etichetta, un nome e un tipo. Puoi anche personalizzare la larghezza o aggiungere testo di aiuto per rendere pi\u00f9 semplice l&#8217;utilizzo da parte di altri redattori o scrittori.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo 4: Personalizza Il Markup E Il CSS<\/h3>\n\n\n<p>Ora che abbiamo configurato il backend del blocco, dobbiamo dire a WordPress come visualizzare effettivamente il contenuto che viene aggiunto.<\/p>\n\n\n<p>Qui \u00e8 dove qualsiasi conoscenza precedente di HTML o CSS che potresti avere ti sar\u00e0 utile.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Personalizza il Markup e il CSS\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n<p>In questo prossimo passo, scriverai essenzialmente il blocco di codice che sar\u00e0 generato dinamicamente dagli input configurati per l&#8217;editor di blocchi.<\/p>\n\n\n<p>Puoi scrivere questo in HTML e CSS puro.<\/p>\n\n\n<p>Puoi anche importare le variabili dall&#8217;editor di blocchi usando le doppie parentesi e il nome del campo (slug) dall&#8217;editor. (Ad esempio, &#8220;{{button-text}}&#8221;)<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo 5: Aggiungi Il Blocco<\/h3>\n\n\n<p>Una volta che hai configurato il blocco utilizzando il plugin Genesis, dovrebbe apparire nell&#8217;elenco dei blocchi disponibili nel editor Gutenberg di WordPress.<\/p>\n\n\n<p>Semplicemente clicca il \u201c+\u201d e poi trova il nuovo blocco per il suo nome.<\/p>\n\n\n<p>Una volta aggiunto, dovresti vedere la schermata dell&#8217;editor di blocchi Gutenberg con i campi e le opzioni che hai configurato.<\/p>\n\n\n<p>Ecco fatto!<\/p>\n\n\n<p>Ora puoi usare il tuo blocco personalizzato, aggiungendolo a pagine, post, barre laterali o dove ne hai bisogno.<\/p>\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">Come Creare Blocchi WordPress Personalizzati Senza Un Plugin<\/h2>\n\n\n<p>Se vuoi approfondire e imparare davvero come creare nuovi blocchi da zero, avrai bisogno di conoscenze un po&#8217; pi\u00f9 avanzate.<\/p>\n\n\n<p>In questa guida, ti spiegheremo i passaggi fondamentali per utilizzare lo strumento <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">create-block<\/a> che ti permetter\u00e0 di creare blocchi completamente personalizzati senza dover utilizzare un plugin.<\/p>\n\n\n<p>Avviso importante: Questo \u00e8 un flusso di lavoro avanzato. Sar\u00e0 necessario immergersi nella linea di comando.<\/p>\n\n\n<p>Dovrai conoscere PHP, JavaScript, HTML e CSS.<\/p>\n\n\n<p>Non dire che non ti abbiamo avvisato!<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo #1: Configura Node.js, NPM e l&#8217;installazione locale di WordPress<\/h3>\n\n\n<p>Prima di poter usare create-block, dobbiamo avere la configurazione e l&#8217;accesso corretti.<\/p>\n\n\n<p>Ecco i prerequisiti:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">Una installazione locale di WordPress<\/a><\/li>\n\n\n\n<li>Configurazione del terminale o della riga di comando<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js e npm<\/a><\/li>\n\n\n<\/ul>\n\n\n<p>Potresti anche voler utilizzare <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (gestore delle versioni di Node) per installare o aggiornare una versione compatibile di Node.js<\/p>\n\n\n<p>Con questa configurazione, utilizzeremo il comando di NPM \u201cnpx\u201d per eseguire il pacchetto create-block direttamente dalla sua directory ospitata nel cloud.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo #2: Esegui Il Pacchetto create-block<\/h3>\n\n\n<p>Ora, il passo facile.<\/p>\n\n\n<p>Dal terminale, naviga alla directory \/wp-content\/plugins del tuo sito web sulla tua macchina locale.<\/p>\n\n\n<p>Poi esegui il pacchetto create-block usando NPX:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Esegui il Pacchetto create-block\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n<p>Questo pacchetto eseguir\u00e0 il processo di configurazione di ci\u00f2 che \u00e8 noto come &#8220;impalcatura del blocco&#8221;. Registrer\u00e0 tutti gli elementi rilevanti, avvier\u00e0 la corretta struttura di file e directory e generer\u00e0 il codice predefinito per l&#8217;intero blocco affinch\u00e9 sia modificabile e utilizzabile.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passo #3: Attiva Il Plugin<\/h3>\n\n\n<p>Il nuovo blocco avr\u00e0 la forma di un plugin.<\/p>\n\n\n<p>Una volta completato il pacchetto create-block, dovrai passare all&#8217;amministrazione WP.<\/p>\n\n\n<p>Vai alla pagina dei Plugin e attiva il nuovo plugin che \u00e8 stato creato, che dovrebbe avere il nome del blocco che hai usato nel tuo comando npx.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passaggio #4: Personalizza Il Codice del Blocco<\/h3>\n\n\n<p>Personalizzerai il contenuto e le funzionalit\u00e0 del blocco all&#8217;interno della cartella <b>\/src\/<\/b> nella directory del plugin.<\/p>\n\n\n<p><b>Index.js<\/b> \u00e8 dove registrerai il blocco e programmerai l&#8217;output principale:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Personalizza il Codice del Blocco\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n<p>Nota che la funzione registerBlockType \u00e8 impostata per gestire sia gli input dell&#8217;editor di blocchi (\u201cedit\u201d) che la visualizzazione nel frontend (\u201csave\u201d).<\/p>\n\n\n<p>Questo \u00e8 solo l&#8217;inizio della costruzione di un blocco funzionale.<\/p>\n\n\n<p>Probabilmente vorrai approfondire la documentazione completa per scrivere blocchi funzionali utilizzando il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">WordPress Block API<\/a>.<\/p>\n\n\n<p>Una volta che hai imparato le basi, puoi aggiungere altre dipendenze, accedere a fonti di dati esterne e praticamente tutto ci\u00f2 che desideri.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Passaggio #5: Aggiungi Il Blocco Dall&#8217;Editor Gutenberg<\/h3>\n\n\n<p>Con il plugin attivato, puoi aggiungere il tuo blocco a qualsiasi pagina o post dall&#8217;editor Gutenberg.<\/p>\n\n\n<p>Accedici utilizzando il pulsante &#8220;+&#8221; o il comando &#8220;\/&#8221;, proprio come qualsiasi altro blocco.<\/p>\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Il Cielo \u00c8 Il Limite<\/h2>\n\n\n<p>Bene, siamo passati dalle nozioni di base a quelle avanzate, ma la buona notizia \u00e8 che ora sei inarrestabile.<\/p>\n\n\n<p>Tra le opzioni di blocco predefinite, il plugin Genesis e la possibilit\u00e0 di creare i tuoi blocchi da zero \u2014 non c&#8217;\u00e8 nulla che non puoi fare!<\/p>\n\n\n<p>E poich\u00e9 i blocchi sono cos\u00ec incredibilmente potenti e flessibili, non c&#8217;\u00e8 praticamente nulla che tu non possa costruire. Il tuo sito WordPress ora ha una funzionalit\u00e0 praticamente infinita, e puoi realizzare il sito, l&#8217;app o il progetto dei tuoi sogni.<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      I nostri aggiornamenti automatici e solide difese di sicurezza tolgono la gestione del server dalle tue mani cos\u00ec puoi concentrarti sulla creazione di un sito web fantastico.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Scopri i Piani                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Sarebbe strano se menzionassi come mia moglie stia tenendo un kit Lego Star Wars BB-8 in edizione limitata, intatto e mai aperto? Quelle cose valgono tipo 500 dollari! Ok. Sarebbe strano. Capito, forte e chiaro&#8230; Ma tutto questo avr\u00e0 pi\u00f9 senso tra un secondo. In questo post, [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"I blocchi di WordPress sono uno dei cambiamenti pi\u00f9 significativi al CMS di sempre. Scopri come funzionano e come puoi personalizzarli per le tue esigenze specifiche.","toc_headlines":"[[\"definition\",\"Cosa Sono i Blocchi WordPress?\"],[\"blocks\",\"Quali Blocchi Sono Gi\u00e0 Presenti in WordPress?\"],[\"create\",\"Come Creare Blocchi Personalizzati Con Un Plugin WordPress\"],[\"custom\",\"Come Creare Blocchi WordPress Personalizzati Senza Un Plugin\"],[\"summary\",\"Il Cielo \u00c8 Il Limite\"]]","hide_toc":false,"footnotes":""},"categories":[15068,15080,15072],"tags":[],"class_list":["post-68363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-it","category-getting-started-it","category-wordpress-it"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!) - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"I blocchi di WordPress sono uno dei cambiamenti pi\u00f9 significativi al CMS di sempre. Scopri come funzionano e come puoi personalizzarli per le tue esigenze specifiche.\" \/>\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-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!)\" \/>\n<meta property=\"og:description\" content=\"I blocchi di WordPress sono uno dei cambiamenti pi\u00f9 significativi al CMS di sempre. Scopri come funzionano e come puoi personalizzarli per le tue esigenze specifiche.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T20:20:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!) - DreamHost Blog","description":"I blocchi di WordPress sono uno dei cambiamenti pi\u00f9 significativi al CMS di sempre. Scopri come funzionano e come puoi personalizzarli per le tue esigenze specifiche.","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-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/","og_locale":"en_US","og_type":"article","og_title":"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!)","og_description":"I blocchi di WordPress sono uno dei cambiamenti pi\u00f9 significativi al CMS di sempre. Scopri come funzionano e come puoi personalizzarli per le tue esigenze specifiche.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-06-11T20:20:50+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-06-11T20:20:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/"},"wordCount":2030,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Design del Sito Web","Per iniziare","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/","name":"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-06-11T20:20:50+00:00","description":"I blocchi di WordPress sono uno dei cambiamenti pi\u00f9 significativi al CMS di sempre. Scopri come funzionano e come puoi personalizzarli per le tue esigenze specifiche.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-usare-i-blocchi-di-wordpress-come-creare-i-tuoi-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"it","translations":{"it":68363,"es":41465,"en":41438,"de":52846,"pt":54873,"pl":54880,"ru":54916,"uk":54919,"fr":70312,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=68363"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68363\/revisions"}],"predecessor-version":[{"id":68365,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68363\/revisions\/68365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=68363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=68363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=68363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}