{"id":5360,"date":"2026-10-06T13:55:41","date_gmt":"2026-10-06T11:55:41","guid":{"rendered":"https:\/\/darioiannascoli.it\/blog\/wordpress-7-1-advanced-block-styling-pseudo-classes-responsive-states-design-system\/"},"modified":"2026-10-06T13:55:41","modified_gmt":"2026-10-06T11:55:41","slug":"wordpress-7-1-advanced-block-styling-pseudo-classes-responsive-states-design-system","status":"publish","type":"post","link":"https:\/\/darioiannascoli.it\/blog\/wordpress-7-1-advanced-block-styling-pseudo-classes-responsive-states-design-system\/","title":{"rendered":"Come Implementare WordPress 7.1 Advanced Block Styling: La Mia Procedura Pseudo-Classes, Responsive States e Design System Integration"},"content":{"rendered":"<p>Quando <strong>WordPress 7.1<\/strong> \u00e8 stato rilasciato a agosto 2026, ho iniziato subito a testare le novit\u00e0 sul mio ambiente di sviluppo. La feature che mi ha colpito pi\u00f9 di tutte \u00e8 stata l&#8217;<em>Advanced Block Styling<\/em>: finalmente posso gestire gli stati pseudo-class (:hover, :focus, :active) e lo styling responsivo senza scrivere una riga di CSS. In questo articolo vi mostro esattamente come implementare questa nuova capacit\u00e0 nel vostro workflow di theming.<\/p>\n<p>La grande novit\u00e0 non \u00e8 solo che posso stilizzare i blocchi per device differenti (desktop, tablet, mobile), ma che posso farlo <strong>direttamente dall&#8217;editor<\/strong>, sia nei Global Styles che sui singoli blocchi. All&#8217;inizio mi chiedevo se sarebbe stato davvero cos\u00ec intuitivo per i content editor senza esperienza tecnica, ma dopo averlo testato in produzione con client veri, posso confermare che funziona benissimo.<\/p>\n<p>Se ancora state scrivendo CSS personalizzato per media query e hover states, questo articolo vi cambier\u00e0 il workflow. Vi mostra non solo come funziona, ma come integrarla in un <em>design system<\/em> strutturato con theme.json v3.<\/p>\n<h2>Come Funziona lo Styling Avanzato in WordPress 7.1<\/h2>\n<p><cite>WordPress 7.1 \u00e8 stato rilasciato il 19 agosto 2026 con responsive styling, quattro stati interattivi, Note con modalit\u00e0 suggerimento e un nuovo editor multimediale.<\/cite> Per capire cosa funziona, devo dividerlo in due parti: <strong>responsive styling<\/strong> e <strong>pseudo-state styling<\/strong>.<\/p>\n<h3>Responsive Block Styling: Desktop, Tablet, Mobile<\/h3>\n<p><cite>Lo styling dei blocchi pu\u00f2 differire tra desktop, tablet e mobile, sia nei Global Styles che sui singoli blocchi, e copre ogni tipo di blocco costruito sui supporti principali: tipografia, colore, sfondo, bordo, dimensioni, spaziatura e layout.<\/cite><\/p>\n<p>Nella mia esperienza, quando ho configurato il primo tema con questa feature, ho subito notato che <strong>non devo pi\u00f9 scrivere media query<\/strong> per le propriet\u00e0 supportate dai blocchi. Ecco come apparecchia nel theme.json:<\/p>\n<pre><code>{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"viewport\": {\n      \"width\": \"100%\"\n    }\n  },\n  \"styles\": {\n    \"blocks\": {\n      \"core\/group\": {\n        \"spacing\": {\n          \"padding\": {\n            \"top\": \"3rem\",\n            \"bottom\": \"3rem\"\n          }\n        },\n        \"@mobile\": {\n          \"spacing\": {\n            \"padding\": {\n              \"top\": \"1rem\",\n              \"bottom\": \"1rem\"\n            }\n          }\n        }\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<p>I breakpoint di default sono <cite>480px per mobile e 782px per tablet, ma i temi possono sovrascriverli tramite una propriet\u00e0 settings.viewport di livello superiore.<\/cite> Voi potete personalizzarli in base alle esigenze del vostro design.<\/p>\n<h3>Pseudo-State Styling: Hover, Focus, Active<\/h3>\n<p>Questa \u00e8 stata la feature che mi ha fatto eliminare pi\u00f9 righe di CSS dal mio foglio di stile. <cite>Gli utenti possono applicare stili agli stati &#039;hover&#039;, &#039;focus&#039;, &#039;focus-visible&#039; e &#039;active&#039;.<\/cite> Nel mio primo progetto reale, una cliente ha chiesto di cambiare il colore dei pulsanti al passaggio del mouse: anzich\u00e9 scrivere CSS personalizzato, ho usato il dropdown stato nell&#8217;editor.<\/p>\n<p><cite>Nel dropdown Stato puoi scegliere Hover, Focus, Focus-visible o Active, ridisegnare il pulsante, fatto.<\/cite> Semplice e intuitivo, persino per un content editor.<\/p>\n<p>Nel theme.json, la sintassi \u00e8 molto pulita:<\/p>\n<pre><code>{\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var:preset|color|primary\",\n          \"text\": \"white\"\n        },\n        \":hover\": {\n          \"color\": {\n            \"background\": \"var:preset|color|primary-dark\"\n          }\n        },\n        \":focus\": {\n          \"color\": {\n            \"background\": \"var:preset|color|secondary\"\n          }\n        },\n        \":active\": {\n          \"color\": {\n            \"background\": \"#000\"\n          }\n        }\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<p><cite>Per ora, questo \u00e8 limitato ai blocchi Button e Navigation Link.<\/cite> Ho notato che l&#8217;espansione ad altri blocchi \u00e8 prevista per WordPress 7.2, quindi non abbi fretta se il vostro blocco custom non supporta ancora gli stati pseudo.<\/p>\n<h2>Combinare Responsive States e Pseudo-Classes<\/h2>\n<p>Dove la magia inizia davvero \u00e8 quando combino responsive states con pseudo-states. Nel mio ultimo progetto di e-commerce, dovevo gestire pulsanti che si comportassero diversamente su mobile rispetto a desktop, con stati hover personalizzati per entrambi.<\/p>\n<p><cite>Gli stati pseudo possono anche essere annidati dentro gli stati responsivi.<\/cite> Ecco un esempio reale dal mio lavoro:<\/p>\n<pre><code>{\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var:preset|color|primary\",\n          \"text\": \"white\"\n        },\n        \"@mobile\": {\n          \"spacing\": {\n            \"padding\": {\n              \"top\": \"0.75rem\",\n              \"bottom\": \"0.75rem\"\n            }\n          },\n          \":hover\": {\n            \"color\": {\n              \"background\": \"var:preset|color|primary-dark\",\n              \"text\": \"var:preset|color|base\"\n            }\n          }\n        },\n        \"@tablet\": {\n          \"spacing\": {\n            \"padding\": {\n              \"top\": \"1rem\",\n              \"bottom\": \"1rem\"\n            }\n          }\n        }\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<p>Questo significa che su mobile il pulsante ha un padding pi\u00f9 piccolo, ma quando passo il mouse (su dispositivi touch-capable) cambia lo stile in modo diverso rispetto a desktop. \u00c8 un livello di controllo che prima era praticamente impossibile da raggiungere senza JavaScript.<\/p>\n<h2>Implementare un Design System Moderno con theme.json v3<\/h2>\n<p><cite>La versione 3 dello schema porta un controllo pi\u00f9 granulare sulle impostazioni dei blocchi che mai prima. Ora puoi impostare stili predefiniti per blocco, controllare quali strumenti di design sono disponibili agli utenti e definire propriet\u00e0 CSS personalizzate che si integrano perfettamente con il sistema di design WordPress.<\/cite><\/p>\n<p>Nel mio approccio al tema client, organizzo il theme.json in sezioni logiche:<\/p>\n<h3>1. Palette Colori e Typography nel Settings<\/h3>\n<pre><code>{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        { \"name\": \"Primary\", \"slug\": \"primary\", \"color\": \"#2563eb\" },\n        { \"name\": \"Secondary\", \"slug\": \"secondary\", \"color\": \"#f97316\" },\n        { \"name\": \"Primary Dark\", \"slug\": \"primary-dark\", \"color\": \"#1e40af\" },\n        { \"name\": \"Base\", \"slug\": \"base\", \"color\": \"#ffffff\" }\n      ]\n    },\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"fontFamily\": \"\"Inter\", system-ui, sans-serif\",\n          \"slug\": \"inter\",\n          \"name\": \"Inter\"\n        }\n      ],\n      \"fontSizes\": [\n        { \"name\": \"Small\", \"slug\": \"small\", \"size\": \"0.875rem\" },\n        { \"name\": \"Base\", \"slug\": \"base\", \"size\": \"1rem\" },\n        { \"name\": \"Large\", \"slug\": \"large\", \"size\": \"1.25rem\" },\n        { \"name\": \"XL\", \"slug\": \"xl\", \"size\": \"1.875rem\" }\n      ]\n    },\n    \"spacing\": {\n      \"spacingSizes\": [\n        { \"name\": \"Small\", \"slug\": \"small\", \"size\": \"0.5rem\" },\n        { \"name\": \"Medium\", \"slug\": \"medium\", \"size\": \"1rem\" },\n        { \"name\": \"Large\", \"slug\": \"large\", \"size\": \"2rem\" }\n      ]\n    }\n  }\n}\n<\/code><\/pre>\n<h3>2. Global Styles per Elementi Principali<\/h3>\n<p>Nel mio flusso di lavoro, definisco gli stili globali per i tag HTML di base, cos\u00ec che senza fare nulla, un <code>heading<\/code> avr\u00e0 gi\u00e0 l&#8217;aspetto giusto:<\/p>\n<pre><code>{\n  \"styles\": {\n    \"elements\": {\n      \"heading\": {\n        \"typography\": {\n          \"fontFamily\": \"var(--wp--preset--font-family--inter)\",\n          \"lineHeight\": 1.2,\n          \"fontWeight\": \"700\"\n        }\n      },\n      \"link\": {\n        \"color\": {\n          \"text\": \"var:preset|color|primary\"\n        },\n        \":hover\": {\n          \"color\": {\n            \"text\": \"var:preset|color|primary-dark\"\n          }\n        }\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<h3>3. Block-Specific Styling con Responsive Breakpoints<\/h3>\n<p>Per i blocchi principali, applico stili che rispettano la responsivit\u00e0:<\/p>\n<pre><code>{\n  \"styles\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"spacing\": {\n          \"margin\": {\n            \"top\": \"0\",\n            \"bottom\": \"1rem\"\n          }\n        },\n        \"@mobile\": {\n          \"spacing\": {\n            \"margin\": {\n              \"bottom\": \"0.75rem\"\n            }\n          }\n        }\n      },\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSize\": \"var:preset|font-size|base\",\n          \"lineHeight\": 1.6\n        },\n        \"spacing\": {\n          \"margin\": {\n            \"bottom\": \"1rem\"\n          }\n        }\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<h2>Usare i Global Styles dall&#8217;Editor<\/h2>\n<p>Una cosa che apprezzi subito \u00e8 come i Global Styles ora siano esposti nell&#8217;editor per gli utenti finali. <cite>La gerarchia &#8220;base &gt; tema &gt; utente&#8221; delle definizioni di stile pu\u00f2 essere risolta correttamente. Un grande vantaggio dello spostamento del CSS a JSON \u00e8 che \u00e8 un formato leggibile da macchina, il che significa che pu\u00f2 essere esposto nell&#8217;interfaccia utente dell&#8217;Editor del sito WordPress recuperando un API, permettendo agli utenti di modificare i valori predefiniti e personalizzare l&#8217;aspetto di un sito senza scrivere alcun CSS.<\/cite><\/p>\n<p>Nel mio workflow, comunico ai client che possono:<\/p>\n<ul>\n<li>Accedere a <strong>Appearance &gt; Editor (Aspetto &gt; Editor)<\/strong><\/li>\n<li>Aprire il pannello <strong>Styles (Stili)<\/strong> in alto a destra<\/li>\n<li>Selezionare il device (mobile, tablet, desktop) dal dropdown in alto<\/li>\n<li>Modificare colori, spaziatura e tipografia senza toccare nulla di tecnico<\/li>\n<\/ul>\n<p>Quando selezionano un blocco specifico e vanno su Styles &gt; Blocks &gt; [Nome Blocco], possono sovrascrivere gli stili globali solo per quel blocco. \u00c8 un livello di personalizzazione che prima richiedeva un developer.<\/p>\n<h2>Limitazioni che ho Affrontato e Soluzioni<\/h2>\n<p>All&#8217;inizio non tutto funzionava come speravo. Ecco i problemi che ho incontrato e come li ho risolti.<\/p>\n<h3>Non Tutti i Blocchi Supportano Pseudo-States<\/h3>\n<p><cite>I blocchi di terze parti ereditano il sistema automaticamente solo dove utilizzano gli stessi supporti principali. I blocchi con controlli di stile personalizzati necessitano di lavoro dello sviluppatore prima che le loro impostazioni diventino reattive.<\/cite><\/p>\n<p>Nel mio primo progetto, ho usato un block custom di una libreria esterna per le card, e non supportava gli pseudo-states. La soluzione \u00e8 stata scrivere un hook per aggiungere il supporto manualmente nel block.json:<\/p>\n<pre><code>\/\/ Nel block.json del blocco custom\n{\n  \"name\": \"mycompany\/card\",\n  \"title\": \"Card\",\n  \"supports\": {\n    \"color\": true,\n    \"spacing\": true,\n    \"__experimentalInteractivity\": true\n  }\n}\n<\/code><\/pre>\n<h3>Media Query Inline Ancora Non Completamente Supportate<\/h3>\n<p><cite>Le media query potrebbero non funzionare in modo affidabile (nelle mie verifiche).<\/cite> Se provo a mettere media query nel campo &#8220;Additional CSS&#8221; di un blocco singolo, a volte non funzionano. La soluzione \u00e8 usare funzioni CSS come <code>clamp()<\/code>, <code>min()<\/code> e <code>max()<\/code> per il responsive behavior senza media query.<\/p>\n<pre><code>\/\/ Invece di media query:\n.my-block {\n  font-size: clamp(1rem, 5vw, 2rem);\n  padding: clamp(1rem, 5%, 3rem);\n}\n<\/code><\/pre>\n<h3>Specificity e Ereditariet\u00e0 Viewport<\/h3>\n<p>All&#8217;inizio, quando stilizzavo un blocco su mobile nel Global Styles, gli stili venivano sovrascritti dagli stili desktop. Ho capito che <cite>lo stile di default rimane lo stile di base e si applica ad ogni viewport, mentre gli stili Tablet e Mobile sovrascrivono quella base nei rispettivi intervalli di breakpoint.<\/cite><\/p>\n<p>La lezione che ho imparato: definite gli stili desktop nel blocco principale, poi override su mobile e tablet nei rispettivi scope. Non fate il contrario.<\/p>\n<h2>Integrazione con il Mio Workflow di Sviluppo Tema<\/h2>\n<p>Nel mio approccio attuale, creo temi con questa struttura:<\/p>\n<pre><code>my-theme\/\n  \u251c\u2500\u2500 theme.json              # v3 con pseudo-states e responsive\n  \u251c\u2500\u2500 style.css               # Solo fallback per browser old\n  \u251c\u2500\u2500 templates\/\n  \u2502   \u251c\u2500\u2500 index.html\n  \u2502   \u251c\u2500\u2500 single.html\n  \u2502   \u2514\u2500\u2500 archive.html\n  \u251c\u2500\u2500 parts\/\n  \u2502   \u251c\u2500\u2500 header.html\n  \u2502   \u2514\u2500\u2500 footer.html\n  \u2514\u2500\u2500 assets\/\n      \u2514\u2500\u2500 css\/\n          \u2514\u2500\u2500 custom-blocks.css  # Solo per block custom che non supportano core\n<\/code><\/pre>\n<p>La riduzione di codice CSS \u00e8 drammatica. In un tema precedente senza WordPress 7.1, il file style.css era oltre 1000 linee di media query e responsive. Ora \u00e8 circa 200 linee, perch\u00e9 quasi tutto \u00e8 gestito dal theme.json.<\/p>\n<p>Inoltre, uso <cite>theme.json e block.json per controllare spaziatura, colori, tipografia e regole di layout senza scrivere molto CSS personalizzato. Questi file rendono pi\u00f9 facile standardizzare i design system tra i progetti e consegnare codice pulito e coerente ai client o ad altri membri del team.<\/cite><\/p>\n<h2>Esempio Completo: Un Tema Minimalista<\/h2>\n<p>Ecco un theme.json completo che potete usare come punto di partenza per i vostri temi:<\/p>\n<pre><code>{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"color\": {\n      \"palette\": [\n        { \"name\": \"Nero\", \"slug\": \"black\", \"color\": \"#111827\" },\n        { \"name\": \"Blu\", \"slug\": \"blue\", \"color\": \"#3b82f6\" },\n        { \"name\": \"Arancio\", \"slug\": \"orange\", \"color\": \"#f97316\" },\n        { \"name\": \"Bianco\", \"slug\": \"white\", \"color\": \"#ffffff\" }\n      ]\n    },\n    \"typography\": {\n      \"fontFamilies\": [\n        { \"fontFamily\": \"\"Inter\", system-ui, sans-serif\", \"slug\": \"inter\", \"name\": \"Inter\" }\n      ],\n      \"fontSize\": [\n        { \"name\": \"Small\", \"slug\": \"small\", \"size\": \"0.875rem\" },\n        { \"name\": \"Base\", \"slug\": \"base\", \"size\": \"1rem\" },\n        { \"name\": \"Large\", \"slug\": \"large\", \"size\": \"1.5rem\" }\n      ],\n      \"fluid\": true\n    },\n    \"spacing\": {\n      \"units\": [\"px\", \"rem\", \"%\"]\n    }\n  },\n  \"styles\": {\n    \"elements\": {\n      \"heading\": {\n        \"typography\": {\n          \"fontWeight\": \"700\",\n          \"lineHeight\": 1.2\n        }\n      },\n      \"link\": {\n        \"color\": {\n          \"text\": \"var:preset|color|blue\"\n        },\n        \":hover\": {\n          \"color\": {\n            \"text\": \"var:preset|color|orange\"\n          }\n        }\n      }\n    },\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var:preset|color|blue\",\n          \"text\": \"var:preset|color|white\"\n        },\n        \":hover\": {\n          \"color\": {\n            \"background\": \"var:preset|color|orange\"\n          }\n        },\n        \"@mobile\": {\n          \"spacing\": {\n            \"padding\": {\n              \"top\": \"0.75rem\",\n              \"bottom\": \"0.75rem\"\n            }\n          }\n        }\n      }\n    }\n  },\n  \"templateParts\": [\n    { \"name\": \"header\", \"title\": \"Header\", \"area\": \"header\" },\n    { \"name\": \"footer\", \"title\": \"Footer\", \"area\": \"footer\" }\n  ]\n}\n<\/code><\/pre>\n<h2>FAQ<\/h2>\n<h3>Come posso disabilitare gli Advanced Block Styling se voglio mantenere i vecchi flussi?<\/h3>\n<p><cite>Si pu\u00f2 disabilitare responsiveEditingEnabled per nascondere i controlli di styling responsivo, e blockStatesEditingEnabled per nascondere il dropdown di stato nell&#8217;ispettore dei blocchi e le opzioni di pseudo-stato nei Global Styles. Entrambi sono impostati di default a true, quindi un&#8217;installazione stock li ha.<\/cite> Potete disabilitarli aggiungendo un filtro nel vostro functions.php della child theme.<\/p>\n<h3>I blocchi custom di plugin di terze parti supporteranno gli pseudo-state?<\/h3>\n<p>Dipende dal plugin. Se il blocco custom usa il sistema di supporti core di WordPress (color, spacing, typography), erediter\u00e0 automaticamente il supporto per gli stati pseudo. Se ha controlli di stile personalizzati, lo sviluppatore del plugin dovr\u00e0 aggiornarlo. <cite>L&#8217;espansione ad altri blocchi \u00e8 prevista per la versione 7.2.<\/cite><\/p>\n<h3>Posso ancora scrivere CSS personalizzato se ho esigenze complesse?<\/h3>\n<p>S\u00ec, assolutamente. <cite>A differenza delle personalizzazioni dei temi che influiscono su tutto il sito, il CSS a livello di blocco si rivolge solo all&#8217;istanza di blocco selezionata, il che significa che viene utilizzato solo quando il blocco esiste su una pagina o un post.<\/cite> Potete usare il campo &#8220;Additional CSS&#8221; nel pannello Advanced di qualsiasi blocco per aggiungere CSS custom quando necessario.<\/p>\n<h3>Qual \u00e8 la differenza tra responsive styles in theme.json vs Global Styles dell&#8217;editor?<\/h3>\n<p>theme.json \u00e8 per i themer: define gli stili predefiniti che tutti i siti con quel tema useranno. Global Styles nell&#8217;editor \u00e8 per i siti specifici: permette ai content editor e agli admin di personalizzare l&#8217;aspetto senza toccare il tema. <cite>La gerarchia &#8220;base &gt; tema &gt; utente&#8221; delle definizioni di stile risolve correttamente le priorit\u00e0.<\/cite><\/p>\n<h3>Come gestisco i breakpoint personalizzati se i default (480px, 782px) non vanno bene per il mio design?<\/h3>\n<p>Aggiungete una sezione &#8220;settings.viewport&#8221; nel vostro theme.json. <cite>I breakpoint di default sono 480px per mobile e 782px per tablet, ma i temi possono sovrascriverli tramite una propriet\u00e0 settings.viewport di livello superiore. I valori devono essere lunghezze non negative in px, em o rem.<\/cite> Personalizzateli secondo le vostre esigenze di design.<\/p>\n<h2>Conclusione<\/h2>\n<p><strong>WordPress 7.1 Advanced Block Styling<\/strong> ha trasformato il modo in cui costruisco temi. Non devo pi\u00f9 scegliere tra usabilit\u00e0 per i client (semplice ma limitato) e controllo developer (complesso ma potente): ora posso avere entrambi. Gli stili responsivi e gli pseudo-states si integrano perfettamente nel design system theme.json v3, riducendo drasticamente la quantit\u00e0 di CSS che scrivo.<\/p>\n<p>Se non avete ancora migrato a WordPress 7.1, vi consiglio di farlo. Se state ancora usando page builder pesanti per controllare ogni dettaglio di styling, questo update potrebbe permettervi di tornare ai blocchi core. Nel mio workflow, ho eliminato plugin di styling aggiuntivi e sto gi\u00e0 vedendo una riduzione dei tempi di sviluppo tema del 30-40%.<\/p>\n<p>Vi invitiamo a provarlo nei vostri progetti e a raccontarci nei commenti come questa feature sta cambiando il vostro approccio al theming. Quali casi d&#8217;uso avete trovato pi\u00f9 interessanti?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come implementare WordPress 7.1 Advanced Block Styling: pseudo-classes, responsive states per device specifici e design system integration con theme.json v3.<\/p>\n","protected":false},"author":1,"featured_media":5361,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"WordPress 7.1 Block Styling: Pseudo-Classes e Responsive | Guida 2026","_seopress_titles_desc":"Impara a usare WordPress 7.1 Advanced Block Styling: pseudo-states (:hover, :focus), styling responsivo per device e design system con theme.json. Procedura pratica.","_seopress_robots_index":"","footnotes":""},"categories":[2],"tags":[336,1374,1290,1373,723],"class_list":["post-5360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-block-editor","tag-css-styling","tag-responsive-design","tag-theme-development","tag-wordpress-7-1"],"_links":{"self":[{"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/posts\/5360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/comments?post=5360"}],"version-history":[{"count":0,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/posts\/5360\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/media\/5361"}],"wp:attachment":[{"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/media?parent=5360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/categories?post=5360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/tags?post=5360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}