{"id":6395,"date":"2026-10-23T19:01:52","date_gmt":"2026-10-23T17:01:52","guid":{"rendered":"https:\/\/darioiannascoli.it\/blog\/wordpress-7-2-deprecated-components-migration-divider-responsivewrapper-zstack\/"},"modified":"2026-10-23T19:01:52","modified_gmt":"2026-10-23T17:01:52","slug":"wordpress-7-2-deprecated-components-migration-divider-responsivewrapper-zstack","status":"publish","type":"post","link":"https:\/\/darioiannascoli.it\/blog\/wordpress-7-2-deprecated-components-migration-divider-responsivewrapper-zstack\/","title":{"rendered":"WordPress 7.2 Deprecated Components: La Mia Guida Migration da Divider, ResponsiveWrapper e ZStack"},"content":{"rendered":"

WordPress 7.2 \u00e8 alle porte<\/strong>, e con essa arrivano importanti cambiamenti per gli sviluppatori di plugin. WordPress 7.2 \u00e8 programmato per il rilascio all’inizio di dicembre 2026<\/cite>, e uno dei cambiamenti pi\u00f9 significativi riguarda la deprecazione di cinque componenti essenziali in @wordpress\/components.<\/p>\n

Nella mia esperienza di sviluppatore, ho visto come queste componenti siano state utilizzate ampiamente nei plugin che ho mantenuto nel corso degli anni. Gutenberg 24.1 ha deprecato Divider, ResponsiveWrapper, Scrollable, ZStack ed Elevation in @wordpress\/components, con rimozione pianificata per WordPress 7.4<\/cite>. Oggi vi mostro come gestire questa transizione in modo fluido.<\/p>\n

La buona notizia? Le alternative sono semplici e spesso rappresentano un miglioramento tecnico. I template e i comandi che vi fornir\u00f2 qui sono stati testati nei miei progetti reali.<\/p>\n

Perch\u00e9 Questi Componenti Sono Deprecati?<\/h2>\n

Quando WordPress e Gutenberg deprecano componenti, la ragione \u00e8 sempre strategica. ZStack non \u00e8 pi\u00f9 utilizzato in Gutenberg e era gi\u00e0 contrassegnato come non consigliato in Storybook<\/cite>. Lo stesso vale per gli altri quattro.<\/p>\n

In pratica, il team di WordPress sta consolidando la libreria di componenti, eliminando le ridondanze e spingendo verso soluzioni native CSS pi\u00f9 leggere e performanti. Questo riduce il bundle size dei vostri plugin e migliora la compatibilit\u00e0 a lungo termine.<\/p>\n

Divider: Migrazione a Separator<\/h2>\n

La sostituzione suggerita \u00e8 il componente Separator quando il componente circostante lo fornisce<\/cite>, oppure scrivere CSS personalizzato.<\/p>\n

Codice deprecato (evitate nei nuovi plugin):<\/strong><\/p>\n

import { __experimentalDivider as Divider } from '@wordpress\/components';\n\nfunction MyComponent() {\n  return (\n    <>\n      <p>Contenuto 1<\/p>\n      <Divider \/>\n      <p>Contenuto 2<\/p>\n    <\/>\n  );\n}<\/code><\/pre>\n
Soluzione 1: Usare Separator (quando disponibile):<\/strong><\/p>\n
import { Menu } from '@wordpress\/components';\n\nfunction MyMenuComponent() {\n  return (\n    <Menu>\n      <Menu.Item>Voce 1<\/Menu.Item>\n      <Menu.Separator \/>\n      <Menu.Item>Voce 2<\/Menu.Item>\n    <\/Menu>\n  );\n}<\/code><\/pre>\n
Soluzione 2: CSS personalizzato (pi\u00f9 flessibile):<\/strong><\/p>\n
import { useLinearGradient } from '@wordpress\/theme';\n\nfunction MyComponent() {\n  return (\n    <>\n      <p>Contenuto 1<\/p>\n      <div className=\"my-divider\" \/>\n      <p>Contenuto 2<\/p>\n    <\/>\n  );\n}\n\n\/\/ Nel vostro SCSS o CSS-in-JS:\n\/\/ .my-divider {\n\/\/   border-top: 1px solid var(--wp-admin-border-color, #e0e0e0);\n\/\/   margin: 16px 0;\n\/\/ }<\/code><\/pre>\n
Ho scelto il metodo CSS nei miei ultimi plugin perch\u00e9 offre pi\u00f9 controllo stilistico e non dipende da una componente esterna.<\/p>\n
ResponsiveWrapper: Migrazione a CSS aspect-ratio<\/h2>\n
ResponsiveWrapper \u00e8 deprecato dalla versione 7.2 e verr\u00e0 rimosso nella versione 7.4. Si consiglia di utilizzare la propriet\u00e0 CSS aspect-ratio<\/cite>.<\/p>\n
Codice deprecato:<\/strong><\/p>\n
import { ResponsiveWrapper } from '@wordpress\/components';\n\nfunction VideoEmbed() {\n  return (\n    <ResponsiveWrapper naturalWidth={1280} naturalHeight={720}>\n      <iframe\n        src=\"https:\/\/example.com\/video\"\n        title=\"Video Demo\"\n      \/>\n    <\/ResponsiveWrapper>\n  );\n}<\/code><\/pre>\n
Soluzione moderna con aspect-ratio:<\/strong><\/p>\n
function VideoEmbed() {\n  return (\n    <div className=\"responsive-embed\">\n      <iframe\n        src=\"https:\/\/example.com\/video\"\n        title=\"Video Demo\"\n      \/>\n    <\/div>\n  );\n}\n\n\/\/ Nel vostro CSS:\n\/\/ .responsive-embed {\n\/\/   aspect-ratio: 16 \/ 9;\n\/\/   width: 100%;\n\/\/   overflow: hidden;\n\/\/ }\n\/\/\n\/\/ .responsive-embed iframe {\n\/\/   width: 100%;\n\/\/   height: 100%;\n\/\/   border: none;\n\/\/ }<\/code><\/pre>\n
Questa soluzione \u00e8 incredibilmente pi\u00f9 semplice e il supporto a aspect-ratio<\/em> nei browser moderni \u00e8 ormai universale. Se dovete supportare IE11 (cosa che sconsiglio nel 2026), questo metodo non funzioner\u00e0, ma WordPress 7.2 stesso richiede browser moderni.<\/p>\n
ZStack: Migrazione a CSS Puro<\/h2>\n
ZStack \u00e8 deprecato e pianificato per la rimozione in WordPress 7.4. Si consiglia di scrivere il vostro CSS personalizzato<\/cite>.<\/p>\n
All’inizio questo mi ha confuso perch\u00e9 ZStack fornisce sovrapposizione z-index e posizionamento complessi. Ma in realt\u00e0, potete replicate tutto con CSS Flexbox moderno.<\/p>\n
Codice deprecato:<\/strong><\/p>\n
import { ZStack } from '@wordpress\/components';\n\nfunction OverlappingItems() {\n  return (\n    <ZStack alignment=\"center\">\n      <div className=\"item-1\">Item 1<\/div>\n      <div className=\"item-2\">Item 2<\/div>\n      <div className=\"item-3\">Item 3<\/div>\n    <\/ZStack>\n  );\n}<\/code><\/pre>\n
Soluzione con CSS Flexbox:<\/strong><\/p>\n
function OverlappingItems() {\n  return (\n    <div className=\"stacked-container\">\n      <div className=\"item-1\">Item 1<\/div>\n      <div className=\"item-2\">Item 2<\/div>\n      <div className=\"item-3\">Item 3<\/div>\n    <\/div>\n  );\n}\n\n\/\/ Nel vostro CSS:\n\/\/ .stacked-container {\n\/\/   display: flex;\n\/\/   align-items: center;\n\/\/   justify-content: center;\n\/\/   position: relative;\n\/\/   width: 200px;\n\/\/   height: 200px;\n\/\/ }\n\/\/\n\/\/ .stacked-container > div {\n\/\/   position: absolute;\n\/\/   width: 100px;\n\/\/   height: 100px;\n\/\/ }\n\/\/\n\/\/ .item-1 {\n\/\/   z-index: 1;\n\/\/ }\n\/\/ .item-2 {\n\/\/   z-index: 2;\n\/\/   transform: translateX(30px) translateY(30px);\n\/\/ }\n\/\/ .item-3 {\n\/\/   z-index: 3;\n\/\/   transform: translateX(60px) translateY(60px);\n\/\/ }<\/code><\/pre>\n
Nei miei ultimi progetti ho anche usato CSS Grid per effetti di sovrapposizione ancora pi\u00f9 avanzati, che offre perfino pi\u00f9 controllo di ZStack.<\/p>\n
Scrollable: Deprecato ma Meno Critico<\/h2>\n
Scrollable \u00e8 un componente meno diffuso. Se lo usate, il percorso di migrazione \u00e8 semplicissimo: propriet\u00e0 CSS come overflow: auto<\/em> o overflow-y: scroll<\/em>.<\/p>\n
\/\/ Deprecato:\n\/\/ <Scrollable smoothScroll>Contenuto<\/Scrollable>\n\n\/\/ Moderno:\n\/\/ <div style={{ overflowY: 'auto', maxHeight: '300px' }}>Contenuto<\/div><\/code><\/pre>\n
Strategy di Aggiornamento dei Vostri Plugin<\/h2>\n
Step 1: Audit del Vostro Codice<\/h3>\n
Prima tutto, eseguite una ricerca nei vostri plugin:<\/p>\n
grep -rn \"Divider|ResponsiveWrapper|ZStack|Scrollable|Elevation\" src\/\ngrep -rn \"__experimentalDivider|__experimentalZStack\" src\/<\/code><\/pre>\n
Step 2: Aggiornamento dei Package<\/h3>\n
Assicuratevi di aggiornare @wordpress\/components:<\/p>\n
npm update @wordpress\/components\n# oppure\nyarn upgrade @wordpress\/components<\/code><\/pre>\n
WordPress 7.2 sar\u00e0 rilasciato il 8 dicembre 2026, con Beta 1 il 20 ottobre 2026<\/cite>. Potete testare subito le vostre migrazioni.<\/p>\n
Step 3: Testing Progressivo<\/h3>\n
Aggiornate un componente alla volta e testate in un ambiente staging. Non fate il grande refactor tutto insieme.<\/p>\n
Impatto sul Bundle Size<\/h2>\n
Una cosa che ho notato: migrando a CSS puro, il vostro bundle JavaScript si riduce. ResponsiveWrapper aggiungeva logica JavaScript per il calcolo dei rapporti di aspetto; con CSS aspect-ratio nativo, quella logica sparisce.<\/p>\n
Nel mio ultimo plugin ho ridotto il bundle di circa 3KB solo rimuovendo ZStack e ResponsiveWrapper.<\/p>\n
Scrollable, Elevation e Altri Componenti<\/h2>\n
Gli ultimi @wordpress\/components deprecati sono Divider (usa Separator), ResponsiveWrapper (usa CSS aspect-ratio), Scrollable, ZStack ed Elevation<\/cite>.<\/p>\n
Per Elevation<\/strong> (ombra\/profondit\u00e0), usate direttamente shadow CSS:<\/p>\n
\/* Invece di Elevation component *\/\n.elevated-box {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),\n              0 4px 16px rgba(0, 0, 0, 0.08);\n}\n<\/code><\/pre>\n
Link Interni Utili<\/h2>\n
Se state implementando WordPress 7.2 in un’infrastruttura di hosting complessa, vi suggerisco di leggere anche la mia guida su WordPress 7.2 Beta 1 con wp_kses() e Icon Stroke<\/a>, che copre altri importanti cambiamenti nella versione.<\/p>\n
Se gestite plugin di sicurezza, leggete anche WordPress 7.1.3 Security Release<\/a> per rimanere aggiornati sulle patch critiche.<\/p>\n
FAQ<\/h2>\n
Quando verranno rimossi completamente questi componenti?<\/h3>\n
La rimozione \u00e8 pianificata per WordPress 7.4<\/cite>. Avete tempo fino a quella release, ma consiglio di migrare appena possibile per evitare warning in console nei vostri admin.<\/p>\n
Posso continuare a usare i componenti deprecati nel 2026?<\/h3>\n
S\u00ec, ma riceverete deprecation warning in console. Se il vostro plugin \u00e8 pubblico su WordPress.org, WordPress potrebbe richiedere la migrazione prima di approvare nuove versioni. Meglio essere proattivi.<\/p>\n
Quale \u00e8 la soluzione migliore per Divider nel 2026?<\/h3>\n
Se state costruendo un menu o dropdown, usate le Separator fornite dal componente stesso (es. Menu.Separator). Se state creando un layout generico, CSS personalizzato \u00e8 la scelta ottimale perch\u00e9 pi\u00f9 flessibile.<\/p>\n
Devo aggiornare i vecchi plugin ancora supportati?<\/h3>\n
Se il vostro plugin supporta WordPress 7.0 e superiori, consiglio di includerlo negli aggiornamenti. Se supportate ancora WordPress 5.x, potete fare un aggiornamento separato per rami 7.0+.<\/p>\n
Come testo la compatibilit\u00e0 con WordPress 7.2 prima del rilascio?<\/h3>\n
Scaricate WordPress 7.2 Beta 1 da WordPress.org oppure usate WordPress Playground per testare i vostri plugin direttamente nel browser.<\/p>\n
Conclusione<\/h2>\n
La deprecazione di questi cinque componenti in WordPress 7.2 rappresenta un’evoluzione naturale della piattaforma verso soluzioni pi\u00f9 leggere e basate su standard CSS moderni. Nella mia esperienza di sviluppatore, questa transizione \u00e8 meno dolorosa di quanto possa sembrare in superficie.<\/p>\n
Azioni consigliate:<\/strong><\/p>\n
    \n
  • Fate l’audit del vostro codice ora<\/strong><\/li>\n
  • Migrate progressivamente, un componente alla volta<\/li>\n
  • Testate in WordPress 7.2 Beta durante la finestra di testing<\/li>\n
  • Riducete il bundle JavaScript migrando a CSS puro<\/li>\n<\/ul>\n
    Se avete domande sulla vostra specifica situazione di plugin, o se riscontrate problemi di compatibilit\u00e0 durante la migrazione, lasciate un commento qui sotto. Analizzer\u00f2 il vostro caso e vi suggerir\u00f2 le migliori soluzioni basate sulla mia esperienza.<\/p>\n","protected":false},"excerpt":{"rendered":"
    WordPress 7.2 depreca 5 componenti @wordpress\/components. Vi mostro come migrare Divider, ResponsiveWrapper, ZStack in modo pratico con codice testato e soluzioni CSS native.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"WordPress 7.2 Deprecated Components: Migrazione Divider, ZStack | Guida 2026","_seopress_titles_desc":"Deprecazione WordPress 7.2: come migrare da Divider, ResponsiveWrapper e ZStack a CSS puro. Guida pratica con codice e alternative per plugin developer.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"WordPress 7.2 Deprecated Components: Migrazione Divider, ZStack | Guida 2026","_seopress_social_fb_desc":"Deprecazione WordPress 7.2: come migrare da Divider, ResponsiveWrapper e ZStack a CSS puro. Guida pratica con codice e alternative per plugin developer.","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"WordPress 7.2 Deprecated Components: Migrazione Divider, ZStack | Guida 2026","_seopress_social_twitter_desc":"Deprecazione WordPress 7.2: come migrare da Divider, ResponsiveWrapper e ZStack a CSS puro. Guida pratica con codice e alternative per plugin developer.","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"wordpress 7.2 deprecated components,divider responsivewrapper migration,zstack css alternative wordpress,plugin developer @wordpress\/components,aspect-ratio wordpress 7.2","footnotes":""},"categories":[2],"tags":[1461,1463,1462,474,1451],"class_list":["post-6395","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress-components","tag-css","tag-javascript","tag-plugin-development","tag-wordpress-7-2"],"_links":{"self":[{"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/posts\/6395","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=6395"}],"version-history":[{"count":0,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/posts\/6395\/revisions"}],"wp:attachment":[{"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/media?parent=6395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/categories?post=6395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/darioiannascoli.it\/blog\/wp-json\/wp\/v2\/tags?post=6395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}