WordPress 6.2 “Dolphy” è stato rilasciato ed è ora di esplorare le novità della prima release del 2023.
Con WordPress 6.2 entriamo nella parte finale della Phase 2 della roadmap di sviluppo a lungo termine di Gutenberg e l’editor a blocchi esce ufficialmente dalla fase beta.
Questa versione si concentra principalmente sul miglioramento dell’interfaccia e sulla semplificazione dell’esperienza di editing.
Sono stati introdotti un nuovo approccio alla navigazione tra i template e le parti di template, la possibilità di importare i widget nei temi a blocchi, una nuova modalità di scrittura senza distrazioni, un’esperienza di configuazione dei blocchi in scala e tanti piccoli e grandi miglioramenti ai blocchi esistenti, alle prestazioni e all’usabilità.
Ma se c’è qualcosa di davvero innovativo in termini di funzionalità e usabilità, questo riguarda il blocco Navigazione. Da quando è stato rilasciato per la prima volta, il menu di navigazione è stato modificato e migliorato più volte, e nel corso del tempo l’editing dei menu è stato migliorato in modo significativo. Con WordPress 6.2, lo sviluppo continua e in questo articolo vi mostreremo come gestire un menu di navigazione.
Guarda la nostra video-guida per scoprire tutte le novità di WordPress 6.2
Esperienza di Editing Migliorata
WordPress 6.2 offre un’esperienza di editing migliorata, con l’intera struttura del sito messa al centro. Ora è possibile gestire i menu di navigazione in modo più semplice, apportare modifiche di stile da un singolo blocco agli Stili Globali e navigare senza difficoltà tra i template e le parti di template, con parti di template colorate e blocchi riutilizzabili.
Ma c’è molto di più. Vediamo nel dettaglio le principali novità e le modifiche all’interfaccia dell’editor.
Interfaccia dell’Editor del Sito Rinnovata e Modalità di Navigazione
Con WordPress 6.2 sono stati apportati diversi miglioramenti all’interfaccia dell’editor. La prima e più interessante novità riguarda l’interfaccia dell’editor del sito. Grazie alla nuova Browse Mode, è più facile navigare tra i template e le parti di template.
La nuova interfaccia permette anche di aggiungere un nuovo template o una parte di template direttamente dalla barra laterale dell’editor, semplicemente cliccando sull’icona più (+) situata sulla destra del titolo del menu.
Secondo Ryan Welcher, Wp Core and Documentation contributor, “Il lavoro su questa funzione è in corso e continuerà a migliorare con il rilascio di nuove versioni di Gutenberg”.
Il flusso è ora più fluido e senza interruzioni. Per iniziare a modificare il template o la parte di template corrente, basta cliccare sul pulsante Modifica nel menu a sinistra o sull’anteprima del template al centro della pagina.
Modalità Senza Distrazioni
WordPress 6.2 introduce una nuova modalità di modifica senza distrazioni, che riduce il disordine nel canvas e permette di concentrarsi sul contenuto della pagina.
È possibile attivare questa funzione nel pannello delle opzioni che appare cliccando sull’icona dei tre punti nell’angolo in alto a destra.
Una volta attivata la Modalità senza distrazioni, le barre laterali e le barre degli strumenti estranee scompaiono, lasciando sullo schermo solo il contenuto su cui si sta lavorando.
Block Inspector a Schede
WordPress 6.2 introduce un nuovo Block Inspector che mira a mettere ordine nella barra laterale dividendo i controlli delle impostazioni in schede.
Le impostazioni dei blocchi sono ora suddivise in schede per separare le impostazioni di stile dalle altre impostazioni dei blocchi.
Se disponibili, le schede del Block Inspector saranno visualizzate nel seguente ordine:
- Vista elenco: contiene i controlli per la gestione dei blocchi contenuti, come i sottomenu e i link del blocco Navigazione
- Impostazioni: contiene le impostazioni di configurazione non legate all’aspetto del blocco
- Aspetto: contiene le impostazioni che riguardano specificamente lo stile del blocco corrente, come la tipografia e i colori
Si tratta di un notevole miglioramento dell’usabilità dell’interfaccia, soprattutto per i blocchi avanzati con molte opzioni di configurazione come il blocco Gruppo o il blocco Navigazione.
Si noti che:
- Il nuovo Inspector mostra una scheda solo se questa contiene elementi da visualizzare.
- Se la scheda Impostazioni contiene solo il pannello Avanzate, viene spostata nella scheda Aspetto.
- Se il Block Inspector ha solo una scheda, viene visualizzato come prima di WordPress 6.2.
Date un’occhiata alla nota di sviluppo per scoprire più da vicino il nuovo Block Inspector.
Parti di Template Colorate e Blocchi Riutilizzabili
Per distinguerli più facilmente dai gruppi e dai blocchi, le parti di template e i blocchi riutilizzabili sono ora evidenziati con un colore diverso nella List View, nel Block Inserter, nella Barra degli strumenti dei blocchi e nell’area di disegno dell’editor.
Questo avviene sia nell’editor del sito che nell’editor dei post, come mostrato nell’immagine sottostante.
Block Inserter Rinnovato
Il Block Inserter è interessato da diverse modifiche che migliorano notevolmente l’esperienza di editing complessiva.
Innanzitutto, il nuovo design dell’interfaccia migliora la navigazione tra le categorie dei template e dei media e fornisce anteprime più grandi per i template e gli elementi multimediali.
Quando sul sito sono presenti dei media, nel Block Inserter viene visualizzata una scheda Media per agevolare l’inserimento dei media all’interno dei contenuti. È possibile trascinare e rilasciare immagini/media o semplicemente fare clic sul proprio media per aggiungerlo al contenuto.
All’interno della scheda, un pulsante Apri libreria media porta alla libreria media di WordPress.
Integrazione di Openverse nel Block Inserter
Openverse è un progetto che ha il fine di condividere opere con licenza aperta o di pubblico dominio che possono essere utilizzate da chiunque. Ora, con WordPress 6.2, Openverse è integrato nel block inserter.
Per accedere a questa nuova funzione, basta cliccare sulla scheda Media del Block Inserter. Si aprirà un pannello con un campo di ricerca e le anteprime delle immagini prese direttamente dal repository di Openverse.
Per i dettagli tecnici, si legga la richiesta di integrazione di Openverse.
Migrazione dei Widget ai Temi a Blocchi
A partire da WordPress 6.2, gli utenti che gestiscono un sito con un tema classico e decidono di passare a un tema a blocchi possono migrare le aree widget esistenti nel nuovo tema, convertendole in parti di template.
Scopriamo come funziona.
Per prima cosa, create un’area widget in un tema classico. Ad esempio, attivate Twenty-Eleven e aggiungete un calendario all’area Footer One.
Ora cambiate il tema in Twenty Twenty-Three. Aprite l’Editor del sito, scegliete un template da modificare e aggiungete una parte di template.
Nella barra laterale dei blocchi, selezionate l’area widget da importare dal menu a discesa Importa area widget.
E questo è tutto. Ora potrete gestire l’area widget precedente come qualsiasi altra parte di template.
Dettagli del Documento e List View Combinati
Prima di WordPress 6.2, nella barra degli strumenti dell’editor c’erano due pulsanti separati per i Details e la List View. Nell’immagine seguente, è possibile vedere il popover dei dettagli del documento in WordPress 6.1, che include il numero di parole, il numero di caratteri, il tempo di lettura e il numero di intestazioni, paragrafi e blocchi, oltre all’Indice del documento.
A partire da WordPress 6.2, la List View e i Details sono stati spostati in un unico pannello Panoramica del documento suddiviso in due schede: List View e Outline.
Questa modifica dovrebbe facilitare la gestione del documento.
Funzionalità dei Blocchi Estese
Con WordPress 6.2, le funzionalità di diversi tipi di blocco sono state estese. Questo vale in particolare per il blocco Navigazione, che è interessato da diverse modifiche e miglioramenti all’esperienza di editing.
Vediamo nel dettaglio le principali novità.
Editing a Liste per il Blocco Navigazione
Con il rilascio di WordPress 6.2, è possibile modificare la disposizione degli elementi del blocco Navigazione da un elenco nelle impostazioni del blocco nella barra laterale.
Cliccando sulla voce di menu si accede alla barra laterale delle impostazioni del Page Link selezionato, dove è possibile modificare i dati del link, come l’etichetta, l’URL, la descrizione, il titolo del link e il link rel.
Questa modifica semplifica notevolmente l’esperienza di editing dei menu di navigazione, consentendo di aggiungere, disporre ed eliminare elementi nel menu o addirittura di creare nuovi menu di navigazione.
Blocco Navigazione
Un altro miglioramento del blocco di Navigazione è dato dalla possibilità di bloccare la modifica del menu in modo più granulare. Ora è possibile limitare le modifiche, disabilitare il movimento e impedire la rimozione, mentre con WordPress 6.1 erano disponibili solo le opzioni per limitare le modifiche e disabilitare il movimento.
Inoltre, le opzioni selezionate possono essere applicate anche ai blocchi interni (link e sottomenu).
Aggiungere/Rimuovere Didascalie dalla Barra degli Strumenti del Blocco
Un nuovo pulsante Aggiungi/Rimuovi didascalie permette agli utenti di controllare le didascalie dalla barra degli strumenti dei blocchi per diversi blocchi (Audio, Video, Immagine).
Se avete già impostato una didascalia, quando aggiungerete l’immagine al vostro contenuto, questa verrà inclusa automaticamente.
Miglioramenti al Blocco Elenco Pagine
Due miglioramenti riguardano il blocco Elenco Pagine.
Innanzitutto, il blocco Elenco Pagine può essere espanso in modo da mostrare l’elenco delle pagine nel pannello List View.
Inoltre, una nuova opzione nella barra laterale del blocco permette di impostare una pagina iniziale e di visualizzare nel blocco solo le pagine discendenti.
Nuovo Segnaposto del Blocco Gruppo
Ora il segnaposto del blocco Gruppo mostra un selettore di varianti.
Supporto del Posizionamento Fisso dei Blocchi
WordPress 6.2 introduce una nuova funzionalità di posizionamento dei blocchi, a partire dal posizionamento fisso.
Al momento, questa nuova funzionalità si applica solo ai blocchi Gruppo, per i quali l’opzione è predefinita.
Gli sviluppatori di temi possono abilitare il posizionamento fisso nei loro temi utilizzando appearanceTools nel file theme.json. Se desiderate un controllo più granulare, potere impostare settings.position.sticky su true.
Per attivare il posizionamento fisso, si va nel pannello Posizione della barra laterale di controllo dell’Inspector.
Se il posizionamento è attivo, il tag HTML riceve una classe is-position-sticky e vengono applicate alcune regole CSS all’elemento corrispondente:
.wp-container-6 {
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;
}
Il posizionamento fisso funziona solo per i blocchi Gruppo alla root del documento. Sebbene questo possa evitare confusione ed errori per gli utenti, al momento potreste trovare il posizionamento fisso integrato un po’ complicato (e magari preferite verificare diversi metodi per aggiungere un’intestazione fissa al vostro sito WordPress). Tuttavia, secondo la nota di sviluppo,
… durante i test manuali, il feedback ha indicato che, senza un ulteriore lavoro sull’interfaccia utente o sull’UX, gli utenti che cercavano di creare intestazioni fisse potevano confondersi se per sbaglio impostavano un blocco non root come fisso o, ad esempio, un blocco all’interno di una parte del template dell’intestazione come fisso. La decisione è stata quella di applicare questa funzionalità ai soli blocchi root per la versione 6.2, in modo da avere altro tempo per cercare una soluzione adeguata per i blocchi annidati.
Il posizionamento è disponibile solo per singoli blocchi, quindi non la troverete negli Stili globali.
Altri Miglioramenti all’Esperienza di Editing dei Blocchi
Tra gli altri miglioramenti di rilievo apportati alla modifica dei blocchi ci sono i seguenti:
- Ora è possibile trascinare e rilasciare le immagini su un paragrafo vuoto per sostituirlo con un blocco Immagine.
- I controlli di tipografia sono stati raggruppati in pannelli. Questo rende l’interfaccia degli Stili più coerente con l’interfaccia delle Impostazioni e ne migliora l’usabilità: ora è possibile mostrare e nascondere i controlli come nell’interfaccia delle impostazioni dei blocchi.
Controlli della tipografia in WordPress 6.1 vs WordPress 6.2 - È ora possibile modificare la spaziatura delle lettere dei blocchi Intestazione direttamente nell’interfaccia degli Stili Globali.
- Adesso si può impostare il colore dello sfondo, del link e del testo del blocco Calendario.
- Sono state introdotte due nuove categorie di blocchi Banner e Footer per riflettere meglio la struttura delle pagine web.
- Si possono inserire automaticamente i link in qualsiasi blocco utilizzando la scorciatoia
[[. Prima di questa modifica, i blocchi dovevano dichiarare esplicitamente il supporto del completamento automatico dei link utilizzando__experimentalSlashInserter. - Una nuova scorciatoia da tastiera
control+option+1–6permette di trasformare un paragrafo in un titolo. - Il blocco Elenco Pagine ora supporta tutte le opzioni di tipografia: famiglia di caratteri, dimensione dei caratteri, aspetto, altezza della linea, interlinea, decorazione e maiuscole.
Impostazioni tipografia del blocco Elenco Pagine in WordPress 6.2
Miglioramenti agli Strumenti di Design
Molte delle nuove funzionalità e dei miglioramenti introdotti con WordPress 6.2 rafforzano le capacità di styling e di design del CMS. Di seguito elenchiamo le funzioni più interessanti per il design in arrivo con la versione 6.2.
Style Book
WordPress 6.2 introduce uno Style Book che consente agli utenti di visualizzare un’anteprima dei blocchi che possono essere utilizzati nei loro siti web senza doverli aggiungere a un template o parte di template. Per lanciare lo Style Book basta cliccare sul pulsante Apri Style Book (l’icona dell’occhio) che ora compare nell’intestazione Stili all’interno degli Stili Globali.
Si apre un’interfaccia che mostra un’anteprima di tutti i blocchi core e di terze parti suddivisi per categoria.
La nuova interfaccia dello Style Book semplifica la progettazione grazie alle anteprime di ogni stile di blocco in un’unica posizione centralizzata.
Da un punto di vista tecnico, la nuova interfaccia è generata da un nuovo componente StyleBook aggiunto a @wordpress/edit-site per visualizzare l’anteprima di ogni blocco registrato in un iframe (si veda anche la PR #45960).
La stessa interfaccia fornisce anche le anteprime dei singoli blocchi. A titolo di esempio, la seguente immagine mostra l’anteprima di un widget calendario personalizzato.
Gli sviluppatori possono nascondere un blocco dall’inserimento e dall’anteprima in due modi. In primo luogo, è possibile impostare supports.inserter su false in block.json:
{
"supports": {
"inserter": false
}
}Un altro modo per nascondere l’anteprima del blocco è evitare la proprietà example, utilizzata per creare un’anteprima del blocco nel pannello di aiuto dell’Inspector (per saperne di più leggi qui).
Ombra negli Stili Globali
A partire da WordPress 6.2 è possibile aggiungere e personalizzare l’ombreggiatura di alcuni blocchi utilizzando gli Stili globali o il file theme.json (al momento in cui scriviamo, la funzione shadow è disponibile solo per il blocco Pulsante).
Innanzitutto, nei temi che supportano questa funzione, è possibile aggiungere le ombreggiature dall’interfaccia degli Stili globali.
Per vederla in azione, attivate il tema Twenty Twenty-Three, andate su Stili > Blocchi > Pulsante e cliccate sul pulsante Ombra.
Il pop-up Ombra permette di selezionare un’ombra dai preset del tema.
Gli sviluppatori di temi e gli utenti avanzati possono aggiungere un’ombra ai blocchi utilizzando il theme.json. La seguente definizione aggiunge un’ombra nera di 4px ai blocchi Pulsante:
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},È possibile definire dei preset per dare agli utenti del tema la possibilità di selezionarne uno dall’interfaccia degli stili:
"settings": {
"shadow": {
"presets": [
{
"shadow": "4px 4px #FF0000",
"name": "Red",
"slug": "red"
},
{
"shadow": "4px 4px #00FF00",
"name": "Green",
"slug": "green"
},
{
"shadow": "4px 4px #0000FF",
"name": "Blue",
"slug": "blue"
}
]
},
}Una volta definiti, i preset appaiono nel pannello Ombra nel blocco Stili.
Si può anche scegliere il valore di un preset e utilizzarlo come predefinito del blocco:
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}Nuovo Controllo dell’Altezza Minima
A partire da WordPress 6.2, il pannello Dimensioni della barra laterale delle impostazioni del blocco per i blocchi Gruppo e Contenuto del Post offre ora un nuovo controllo dell’Altezza Minima abilitato di default nei temi che utilizzano la funzione appearanceTools.
Questo nuovo controllo consente agli utenti di impostare un’altezza minima per i blocchi Gruppo e Contenuto del post e può essere utilizzato per il rendering del footer in fondo alla pagina, anche con poco contenuto.
In combinazione con i nuovi strumenti di allineamento verticale, permette anche di allineare verticalmente gli elementi interni nella parte superiore/centrale/inferiore della pagina.
Gli sviluppatori possono aggiungere ai temi il supporto per l’altezza minima con l’impostazione minHeight nel file theme.json:
{
"settings": {
dimensions: "minHeight": true
}
}È possibile anche utilizzare la proprietà appearanceTools:
{
"settings": {
"appearanceTools": true
}
}La nuova proprietà minHeight può essere utilizzata per impostare un valore specifico direttamente nel file theme.json:
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}Gli sviluppatori di blocchi possono aggiungere la proprietà supports.dimensions.minHeight al loro file block.json e impostare il suo valore su true. Per i blocchi statici, la regola CSS min-height sarà memorizzata come stile in linea, mentre per i blocchi dinamici sarà inclusa nell’attributo style restituito da get_block_wrapper_attributes.
CSS Personalizzati nel Pannello degli Stili
Una delle caratteristiche mancanti nell’Editor del sito rispetto al Theme Customizer era la possibilità di aggiungere stili CSS personalizzati. WordPress 6.2 colma questa lacuna e ora l’interfaccia Stili globali include un campo di testo per aggiungere regole CSS personalizzate che non saranno sovrascritte aggiornando il tema.
Potrete aggiungere stili personalizzati per ogni blocco, dal pannello degli stili di blocco, oppure cliccando sul pulsante Stili azioni nella barra degli strumenti degli stili. In questo modo viene visualizzato un menu a comparsa che mostra un elemento CSS aggiuntivo.
Per supportare i CSS personalizzati, è stata aggiunta una nuova proprietà styles.css al file theme.json.
Le regole CSS personalizzate possono sovrascrivere completamente qualsiasi stile personalizzato impostato nel theme.json. Se non volete che questo accada, potreste includere il foglio di stile utilizzando i metodi di accodamento esistenti.
Si possono anche aggiungere CSS personalizzati per blocco in theme.json utilizzando la proprietà styles.blocks.block.css:
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}È possibile utilizzare & per gli elementi annidati e gli pseudo-selettori.
Per una analisi più approfondita dei CSS personalizzati, si legga anche CSS personalizzati per stili globali e per blocco.
Copiare e Incollare gli Stili tra i Blocchi
Un nuovo gruppo nel menu Opzioni della barra degli strumenti del blocco mostra ora due pulsanti per copiare gli stili e incollare gli stili. Prima di questa aggiunta, era possibile solo copiare gli stili, ma non era chiaro come incollare gli stili.
Per provare questa nuova funzione, aggiungete un nuovo blocco, ad esempio un titolo. Cambiate lo stile e scegliete Copia stili dal menu Opzioni del blocco.
Poi selezionate un altro blocco e scegliete Incolla stile. Gli stili copiati verranno applicati automaticamente al secondo blocco.
Si noti che questa funzione è disponibile solo sui siti sicuri (https) nei browser che la supportano. Per maggiori informazioni, si legga la pull request.
Applicare le Modifiche ai Blocchi a Livello Globale
WordPress 6.2 introduce anche un pulsante Applica globalmente nel pannello Avanzate per i singoli blocchi che permette di inviare le modifiche allo stile del blocco agli Stili globali e di applicarle all’intero sito web.
Grazie a questa nuova funzione, per applicare lo stile della tipografia, della spaziatura, delle dimensioni e del colore dei blocchi a tutti i blocchi di quel tipo ora basta fare clic su un pulsante (fare riferimento anche a questa pull request).
Miglioramenti all’Esperienza di Design con i Visualizzatori di Spaziatura
I visualizzatori di spaziatura permettono di vedere in anteprima il margine e il padding che viene applicato a un blocco. Con WordPress 6.2, questa funzione è stata potenziata con un paio di aggiunte che migliorano l’esperienza di editing.
Innanzitutto, i visualizzatori di spaziatura ora vengono mostrati non appena si passa il mouse sul controllo del margine o del padding.
In secondo luogo, il visualizzatore di spaziatura ora nasconde automaticamente la barra degli strumenti del blocco non appena si passa il mouse sull’impostazione di spaziatura, in modo che si possa visualizzare l’anteprima delle nuove impostazioni di margine e padding senza l’ingombro della barra degli strumenti del blocco.
Si tratta di modifiche piccole ma significative che riguardano un buon numero di blocchi core.
Novità per Sviluppatori
WordPress 6.2 introduce anche molte novità per gli sviluppatori: nuove API, correzioni di bug, miglioramenti delle prestazioni e molto altro. Vediamo le novità più interessanti.
Una Nuova API HTML
WordPress 6.2 introduce l’HTML Tag Processor, un parser conforme alle specifiche HTML5 che permette di trovare tag HTML specifici in modo sicuro e aggiungere, rimuovere o aggiornare attributi tramite PHP. L’HTML Tag Processor è il primo componente di una nuova API per l’elaborazione dell’HTML.
La nuova API rende più semplice l’esecuzione di operazioni precedentemente complesse che spesso richiedevano l’uso di espressioni regolari.
Nell’esempio che segue, aggiungiamo l’attributo alt a un tag img:
$html = '<img src="/my-image.jpg" />';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
echo $p->get_updated_html();Questo codice produrrebbe il seguente tag img:
<img alt="Hello WordPress 6.2" src="/my-image.jpg">Il metodo $p->next_tag() passa al tag successivo disponibile nell’HTML. Accetta anche il nome di un tag, una classe CSS o entrambi per trovare tag specifici, come mostrato nell’esempio precedente.
Per modificare i tag HTML, prima è necessario selezionare il tag di destinazione:
$p->next_tag();Una volta selezionato il tag di destinazione, si possono utilizzare i metodi dell’API per eseguire diverse operazioni:
$p->get_tag()$p->set_attribute()$p->get_attribute()$p->remove_attribute()$p->add_class()$p->remove_class()
Potete impostare un attributo di stile:
$html = '<a href="https://example.com">example.com</a>';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag( 'a' ) ) {
$p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}
echo $p->get_updated_html();Potete anche aggiungere o rimuovere una classe o un attributo. Nel codice che segue, aggiungiamo una classe personalizzata a un tag h1:
$html = '<div><h1>Page Title</h1></div>';
$p = new WP_HTML_Tag_Processor( $html );
if( $p->next_tag( 'h1' ) ) {
$p->add_class( 'title' );
}
echo $p->get_updated_html();È anche possibile fare un’echo o restituire il tag aggiornato utilizzando il metodo $p->get_updated_html().
Per un’analisi più approfondita della nuova API HTML, si legga questo tutorial PHP interattivo di Adam Zieliński, committer del core di WordPress.
Patterns API e la Nuova Proprietà template_types
La Patterns API consente agli sviluppatori di WordPress di “creare blocchi di contenuti predefiniti che possono essere facilmente inseriti in post, pagine, tipi di post personalizzati e template”.
A partire da WordPress 6.2, la Patterns API dispone di una nuova proprietà template_types che consente di specificare i template in cui può essere utilizzato un determinato block pattern.
Jorge Costa sottolinea che si tratta di un aggiornamento riservato al backend e che al momento non esiste una corrispondente funzionalità della UX. Ma possiamo aspettarci di vedere delle implementazioni più avanzate dell’API con WordPress 6.3:
Il primo utilizzo, pensando a WordPress 6.3, è quello di mostrare all’utente alcuni pattern coerenti con un template quando l’utente inizia a crearne uno. Gli utenti possono iniziare da un pattern invece che da “vuoto” o dal template di fallback.
Dal punto di vista tecnico, la funzione register_block_pattern() è stata modificata per includere un nuovo parametro template_types, che è un array di stringhe contenenti i nomi dei template a cui è destinato il block pattern.
Anche la REST API è stata modificata e ora restituisce i tipi di template di un block pattern se ne è stato definito almeno uno.
React v18.0 e la Concurrency Mode
WordPress 6.2 offre anche una nuova versione della libreria React, ora aggiornata alla versione 18.0. La nuova versione include nuove API, nuove funzionalità, miglioramenti e correzioni di bug. Una delle principali caratteristiche di React v18.0 è l’introduzione della modalità Concurrency, “un nuovo meccanismo dietro le quinte che consente a React di preparare contemporaneamente più versioni dell’interfaccia utente”.
Una delle caratteristiche principali della modalità concurrency in React è che il rendering può essere interrotto:
React garantisce che l’interfaccia utente appaia coerente anche se un rendering viene interrotto. Per farlo, aspetta di eseguire le mutazioni del DOM fino alla fine, una volta che l’intero albero è stato valutato. Grazie a questa funzionalità, React può preparare nuove schermate in background senza bloccare il thread principale. Ciò significa che l’interfaccia utente può rispondere immediatamente agli input dell’utente anche se si trova nel bel mezzo di un’attività di rendering di grandi dimensioni, creando un’esperienza utente fluida.
Il vantaggio principale è che l’interfaccia utente risponde immediatamente agli input dell’utente, in concomitanza con il lavoro che sta ancora eseguendo in background.
Tuttavia, la concurrency introduce anche potenziali insidie di cui gli sviluppatori devono essere consapevoli. Per una panoramica più approfondita della modalità concurrency di React in WordPress 6.2, date un’occhiata agli esempi forniti nella nota di sviluppo.
Altre Novità per Sviluppatori
Altri novità degne di nota per gli sviluppatori sono le seguenti:
- WordPress 6.2 introduce un nuovo filtro JavaScript che può essere utilizzato per filtrare le impostazioni dei blocchi prima che l’editor venga visualizzato sullo schermo. Il nuovo filtro
blockEditor.useSetting.beforeconsente agli sviluppatori di modificare le impostazioni in base alla posizione del blocco, al ruolo dell’utente corrente, ai blocchi vicini e altro ancora. Per ulteriori informazioni ed esempi di utilizzo, si legga Personalizzare le impostazioni di qualsiasi blocco in WordPress 6.2. - È stata introdotta una nuova proprietà
skipBlockSupportAttributesnel componenteServerSideRenderper escludere gli attributi e gli stili relativi ai supporti dei blocchi. - Una nuova API consente di creare lo stile delle variazioni dei principali blocchi esistenti dal theme.json.
- I font di Google sono ora inclusi localmente e non prelevati dagli indirizzi di Google nei temi predefiniti da Twenty Twelve a Twenty Seventeen.
Ma non è tutto. WordPress 6.2 introduce molte funzioni, miglioramenti e correzioni di bug che per brevità non abbiamo citato in questo articolo. Per una panoramica più completa, consultate la Field Guide di WordPress 6.2.
Riepilogo
WordPress 6.2 ci avvicina alla fine della Fase 2 del progetto Gutenberg, denominata Customization. Ma, come sottolinea Matias Ventura, questo non significa che il lavoro sulla personalizzazione sia terminato e che non continuerà nelle prossime versioni. Possiamo aspettarci ancora molti miglioramenti all’editor che dipenderanno dal feedback della community.
In questo articolo, abbiamo presentato alcune delle principali funzionalità, miglioramenti e correzioni di bug in arrivo con WordPress 6.2. Ma c’è molto di più nella 6.2. Con dieci versioni del plugin Gutenberg incorporate nel core – dalla 14.2 alla 15.1 – vedremo una nuova modalità di navigazione, un Block Inspector a schede, la migrazione dei widget nei temi a blocchi, nuove API e una quantità di miglioramenti e correzioni di bug. Ci saranno anche miglioramenti nell’accessibilità e nell’internazionalizzazione.
Se vi piace WordPress e volete acquisire nuove competenze nello sviluppo del CMS o testare e contribuire alla sua crescita, provate DevKinsta, la suite di sviluppo WordPress locale completamente gratuita di Kinsta.
Ora tocca a voi: Avete già testato la nuova versione nel vostro ambiente di sviluppo? Quali sono le caratteristiche che vi piacciono di più di WordPress 6.2? Fatecelo sapere nella sezione dei commenti qui sotto.
Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.
Lascia un commento