Home Chi Sono
Servizi ▼
WordPress Sviluppo Web Server & Hosting Assistenza Tecnica Windows Android
Blog ▼
Tutti gli Articoli WordPress Hosting Plesk Assistenza Computer Windows Android A.I.
Contatti

WordPress 7.2 Deprecated Components: La Mia Guida Migration da Divider, ResponsiveWrapper e ZStack

WordPress 7.2 è alle porte, e con essa arrivano importanti cambiamenti per gli sviluppatori di plugin. WordPress 7.2 è programmato per il rilascio all’inizio di dicembre 2026, e uno dei cambiamenti più significativi riguarda la deprecazione di cinque componenti essenziali in @wordpress/components.

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. Oggi vi mostro come gestire questa transizione in modo fluido.

La buona notizia? Le alternative sono semplici e spesso rappresentano un miglioramento tecnico. I template e i comandi che vi fornirò qui sono stati testati nei miei progetti reali.

Perché Questi Componenti Sono Deprecati?

Quando WordPress e Gutenberg deprecano componenti, la ragione è sempre strategica. ZStack non è più utilizzato in Gutenberg e era già contrassegnato come non consigliato in Storybook. Lo stesso vale per gli altri quattro.

In pratica, il team di WordPress sta consolidando la libreria di componenti, eliminando le ridondanze e spingendo verso soluzioni native CSS più leggere e performanti. Questo riduce il bundle size dei vostri plugin e migliora la compatibilità a lungo termine.

Divider: Migrazione a Separator

La sostituzione suggerita è il componente Separator quando il componente circostante lo fornisce, oppure scrivere CSS personalizzato.

Codice deprecato (evitate nei nuovi plugin):

import { __experimentalDivider as Divider } from '@wordpress/components';

function MyComponent() {
  return (
    <>
      <p>Contenuto 1</p>
      <Divider />
      <p>Contenuto 2</p>
    </>
  );
}

Soluzione 1: Usare Separator (quando disponibile):

import { Menu } from '@wordpress/components';

function MyMenuComponent() {
  return (
    <Menu>
      <Menu.Item>Voce 1</Menu.Item>
      <Menu.Separator />
      <Menu.Item>Voce 2</Menu.Item>
    </Menu>
  );
}

Soluzione 2: CSS personalizzato (più flessibile):

import { useLinearGradient } from '@wordpress/theme';

function MyComponent() {
  return (
    <>
      <p>Contenuto 1</p>
      <div className="my-divider" />
      <p>Contenuto 2</p>
    </>
  );
}

// Nel vostro SCSS o CSS-in-JS:
// .my-divider {
//   border-top: 1px solid var(--wp-admin-border-color, #e0e0e0);
//   margin: 16px 0;
// }

Ho scelto il metodo CSS nei miei ultimi plugin perché offre più controllo stilistico e non dipende da una componente esterna.

ResponsiveWrapper: Migrazione a CSS aspect-ratio

ResponsiveWrapper è deprecato dalla versione 7.2 e verrà rimosso nella versione 7.4. Si consiglia di utilizzare la proprietà CSS aspect-ratio.

Codice deprecato:

import { ResponsiveWrapper } from '@wordpress/components';

function VideoEmbed() {
  return (
    <ResponsiveWrapper naturalWidth={1280} naturalHeight={720}>
      <iframe
        src="https://example.com/video"
        title="Video Demo"
      />
    </ResponsiveWrapper>
  );
}

Soluzione moderna con aspect-ratio:

function VideoEmbed() {
  return (
    <div className="responsive-embed">
      <iframe
        src="https://example.com/video"
        title="Video Demo"
      />
    </div>
  );
}

// Nel vostro CSS:
// .responsive-embed {
//   aspect-ratio: 16 / 9;
//   width: 100%;
//   overflow: hidden;
// }
//
// .responsive-embed iframe {
//   width: 100%;
//   height: 100%;
//   border: none;
// }

Questa soluzione è incredibilmente più semplice e il supporto a aspect-ratio nei browser moderni è ormai universale. Se dovete supportare IE11 (cosa che sconsiglio nel 2026), questo metodo non funzionerà, ma WordPress 7.2 stesso richiede browser moderni.

ZStack: Migrazione a CSS Puro

ZStack è deprecato e pianificato per la rimozione in WordPress 7.4. Si consiglia di scrivere il vostro CSS personalizzato.

All’inizio questo mi ha confuso perché ZStack fornisce sovrapposizione z-index e posizionamento complessi. Ma in realtà, potete replicate tutto con CSS Flexbox moderno.

Codice deprecato:

import { ZStack } from '@wordpress/components';

function OverlappingItems() {
  return (
    <ZStack alignment="center">
      <div className="item-1">Item 1</div>
      <div className="item-2">Item 2</div>
      <div className="item-3">Item 3</div>
    </ZStack>
  );
}

Soluzione con CSS Flexbox:

function OverlappingItems() {
  return (
    <div className="stacked-container">
      <div className="item-1">Item 1</div>
      <div className="item-2">Item 2</div>
      <div className="item-3">Item 3</div>
    </div>
  );
}

// Nel vostro CSS:
// .stacked-container {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   position: relative;
//   width: 200px;
//   height: 200px;
// }
//
// .stacked-container > div {
//   position: absolute;
//   width: 100px;
//   height: 100px;
// }
//
// .item-1 {
//   z-index: 1;
// }
// .item-2 {
//   z-index: 2;
//   transform: translateX(30px) translateY(30px);
// }
// .item-3 {
//   z-index: 3;
//   transform: translateX(60px) translateY(60px);
// }

Nei miei ultimi progetti ho anche usato CSS Grid per effetti di sovrapposizione ancora più avanzati, che offre perfino più controllo di ZStack.

Scrollable: Deprecato ma Meno Critico

Scrollable è un componente meno diffuso. Se lo usate, il percorso di migrazione è semplicissimo: proprietà CSS come overflow: auto o overflow-y: scroll.

// Deprecato:
// <Scrollable smoothScroll>Contenuto</Scrollable>

// Moderno:
// <div style={{ overflowY: 'auto', maxHeight: '300px' }}>Contenuto</div>

Strategy di Aggiornamento dei Vostri Plugin

Step 1: Audit del Vostro Codice

Prima tutto, eseguite una ricerca nei vostri plugin:

grep -rn "Divider|ResponsiveWrapper|ZStack|Scrollable|Elevation" src/
grep -rn "__experimentalDivider|__experimentalZStack" src/

Step 2: Aggiornamento dei Package

Assicuratevi di aggiornare @wordpress/components:

npm update @wordpress/components
# oppure
yarn upgrade @wordpress/components

WordPress 7.2 sarà rilasciato il 8 dicembre 2026, con Beta 1 il 20 ottobre 2026. Potete testare subito le vostre migrazioni.

Step 3: Testing Progressivo

Aggiornate un componente alla volta e testate in un ambiente staging. Non fate il grande refactor tutto insieme.

Impatto sul Bundle Size

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.

Nel mio ultimo plugin ho ridotto il bundle di circa 3KB solo rimuovendo ZStack e ResponsiveWrapper.

Scrollable, Elevation e Altri Componenti

Gli ultimi @wordpress/components deprecati sono Divider (usa Separator), ResponsiveWrapper (usa CSS aspect-ratio), Scrollable, ZStack ed Elevation.

Per Elevation (ombra/profondità), usate direttamente shadow CSS:

/* Invece di Elevation component */
.elevated-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),
              0 4px 16px rgba(0, 0, 0, 0.08);
}

Link Interni Utili

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, che copre altri importanti cambiamenti nella versione.

Se gestite plugin di sicurezza, leggete anche WordPress 7.1.3 Security Release per rimanere aggiornati sulle patch critiche.

FAQ

Quando verranno rimossi completamente questi componenti?

La rimozione è pianificata per WordPress 7.4. Avete tempo fino a quella release, ma consiglio di migrare appena possibile per evitare warning in console nei vostri admin.

Posso continuare a usare i componenti deprecati nel 2026?

Sì, ma riceverete deprecation warning in console. Se il vostro plugin è pubblico su WordPress.org, WordPress potrebbe richiedere la migrazione prima di approvare nuove versioni. Meglio essere proattivi.

Quale è la soluzione migliore per Divider nel 2026?

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 è la scelta ottimale perché più flessibile.

Devo aggiornare i vecchi plugin ancora supportati?

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+.

Come testo la compatibilità con WordPress 7.2 prima del rilascio?

Scaricate WordPress 7.2 Beta 1 da WordPress.org oppure usate WordPress Playground per testare i vostri plugin direttamente nel browser.

Conclusione

La deprecazione di questi cinque componenti in WordPress 7.2 rappresenta un’evoluzione naturale della piattaforma verso soluzioni più leggere e basate su standard CSS moderni. Nella mia esperienza di sviluppatore, questa transizione è meno dolorosa di quanto possa sembrare in superficie.

Azioni consigliate:

  • Fate l’audit del vostro codice ora
  • Migrate progressivamente, un componente alla volta
  • Testate in WordPress 7.2 Beta durante la finestra di testing
  • Riducete il bundle JavaScript migrando a CSS puro

Se avete domande sulla vostra specifica situazione di plugin, o se riscontrate problemi di compatibilità durante la migrazione, lasciate un commento qui sotto. Analizzerò il vostro caso e vi suggerirò le migliori soluzioni basate sulla mia esperienza.

Share: