Novità di WordPress 6.2: modalità di navigazione, libro di stile, menu di navigazione migliorati, nuove API e molto altro

Il rilascio di WordPress 6.2 è stato programmato per il 28 marzo 2023 ed è tempo per noi di esplorare cosa accadrà con la prima versione del 2023.

Con WordPress 6.2, entriamo nella fase finale della Fase 2 della roadmap di sviluppo Gutenberg a lungo termine e l'editor di blocchi lascia ufficialmente la fase beta.

Questa versione si concentra principalmente sul miglioramento dell'interfaccia e sull'ottimizzazione dell'esperienza di modifica.

È stato introdotto un nuovo approccio alla navigazione tra modelli e parti di modelli, nonché la possibilità di importare widget in temi di blocco, una nuova modalità di scrittura senza distrazioni, un'esperienza di impostazione dei blocchi ridimensionata e tonnellate di grandi e piccoli miglioramenti ai blocchi esistenti , prestazioni e usabilità.

Ma se c'è qualcosa che fa un salto in avanti in termini di funzionalità e usabilità, è il blocco di navigazione. Da quando è stato rilasciato per la prima volta, il menu di navigazione ha subito diverse iterazioni che hanno notevolmente semplificato il processo di modifica nel tempo. Con WordPress 6.2, lo sviluppo continua e in questo articolo ti mostreremo con quanta facilità ora puoi gestire un menu di navigazione.

Esperienza di modifica migliorata

WordPress 6.2 offre un'esperienza di modifica migliorata, con l'intera struttura del sito posizionata al centro. Ora puoi gestire i menu di navigazione più facilmente, trasferire le modifiche di stile da un singolo blocco a Stili globali e navigare senza problemi tra modelli e parti di modelli con parti di modelli colorate e blocchi riutilizzabili.

Ma c'è molto di più. Esploriamo in dettaglio le principali aggiunte e modifiche all'interfaccia dell'editor.

Un'interfaccia dell'editor del sito rinnovata e una modalità di navigazione

Con WordPress 6.2, diversi miglioramenti all'interfaccia dell'editor arrivano al centro. Il primo e più interessante aggiornamento riguarda l'interfaccia di Site Editor. Grazie a una nuova modalità di navigazione, ora è più facile navigare tra i modelli e le parti del modello.

La nuova interfaccia consente inoltre di aggiungere un nuovo modello o una parte del modello direttamente dalla barra laterale dell'editor semplicemente facendo clic sull'icona più (+) situata a destra del titolo del menu.

Secondo Ryan Welcher, collaboratore di Wp Core e Documentation, "[L] lavoro su questa funzionalità è in corso e continuerà a migliorare con il rilascio di nuove versioni di Gutenberg".

Il flusso di lavoro ora è più fluido e fluido. Per iniziare a modificare il modello/parte del modello corrente, fai clic sul pulsante Modifica nel menu a sinistra o sull'anteprima del modello al centro della pagina.

Modalità senza distrazioni

WordPress 6.2 introduce una nuova modalità di editing Distraction Free, che elimina il disordine dalla tela e ti consente di concentrarti sul contenuto della pagina.

Puoi attivare questa funzione nel pannello delle opzioni che viene visualizzato facendo clic sull'icona con i puntini di sospensione (tre puntini) nell'angolo in alto a destra.

Una volta attivata la modalità Distraction Free, le barre laterali e le barre degli strumenti estranee scompaiono, lasciando sullo schermo solo il contenuto su cui stai lavorando.

Ispettore blocchi a schede

WordPress 6.2 introduce un nuovo Block Inspector volto a portare ordine nella barra laterale dividendo i controlli delle impostazioni in pannelli separati.

Le impostazioni del blocco sono ora divise in schede per separare le impostazioni di stile dalle altre impostazioni del blocco.

Se disponibili, le schede di Block Inspector verranno visualizzate nel seguente ordine:

• Visualizzazione elenco: include i controlli per la gestione dei figli di un blocco, come sottomenu e collegamenti nel blocco di navigazione
• Impostazioni: include impostazioni di configurazione non correlate all'aspetto del blocco
• Aspetto: include impostazioni specificamente correlate allo stile del blocco corrente, come tipografia e colori

Questo è un notevole miglioramento dell'usabilità dell'interfaccia, specialmente per i blocchi avanzati con molte opzioni di configurazione come il blocco di gruppo o il blocco di navigazione.

Notare che:

• Il nuovo Inspector mostra una scheda solo quando contiene elementi da visualizzare.
• Se la scheda Impostazioni contiene solo il pannello Avanzate, viene spostata nella scheda Aspetto.
• Se Block Inspector ha solo una scheda, viene visualizzato com'era prima di WordPress 6.2.

Dai un'occhiata alla nota dello sviluppatore per una visione più ravvicinata del nuovo Block Inspector.

Parti modello colorate e blocchi riutilizzabili

Per distinguerli più facilmente da gruppi e blocchi, le parti modello e i blocchi riutilizzabili sono ora evidenziati con un colore diverso in Visualizzazione elenco, Inseritore blocco, Barra degli strumenti blocco e nell'area di disegno dell'editor.

Ciò accade sia nell'editor del sito che nell'editor dei post, come mostrato nell'immagine qui sotto.

Un inseritore di blocchi rinnovato

L'Inseritore blocchi è interessato da diverse modifiche che migliorano notevolmente l'esperienza di modifica complessiva.

Innanzitutto, un nuovo design dell'interfaccia migliora la navigazione tra le categorie di pattern e media e fornisce anteprime più grandi per pattern ed elementi multimediali.

Quando i media sono presenti sul sito, una scheda Media viene visualizzata nel Block Inserter per semplificare l'inserimento dei media all'interno del contenuto. Puoi trascinare e rilasciare immagini/media o semplicemente fare clic sul tuo media per aggiungerlo al contenuto.

Scheda Media in Block Inserter” width=”1296″ height=”1420″ class=”size-full wp-image-148375″> La nuova scheda Media in Block Inserter

All'interno della scheda, un pulsante Apri libreria multimediale ti porta alla libreria multimediale di WordPress.

Integrazione Openverse nel Block Inserter

Openverse è uno strumento che mira a condividere opere con licenza aperta o di dominio pubblico per l'utilizzo da parte di chiunque. Ora, con WordPress 6.2, Openverse è integrato nel Block Inserter.

Per accedere a questa nuova funzionalità, fare clic sulla scheda Media dell'Inseritore blocchi. Questo mostra un pannello con un campo di ricerca e anteprime di immagini prese direttamente dal repository Openverse.

Per i dettagli tecnici, vedere la richiesta pull di integrazione Openverse.

Migra i widget per bloccare i temi

A partire da WordPress 6.2, gli utenti che gestiscono un sito utilizzando un tema classico e che decidono di passare a un tema a blocchi possono migrare le loro aree widget esistenti al nuovo tema, convertendole in parti del modello.

Scopriamo come funziona.

Innanzitutto, crea un'area widget in un tema classico. Ad esempio, puoi attivare Twenty-Eleven e aggiungere un calendario all'area piè di pagina uno.

Ora cambia il tema in Twenty Twenty-Three. Apri l'editor del sito, scegli un modello da modificare e aggiungi una parte del modello.

Nella barra laterale del blocco, seleziona l'area del widget da importare dal menu a discesa Importa area widget .

E questo è tutto. Ora puoi gestire la tua area widget precedente come qualsiasi altra parte del modello.

Dettagli documento e visualizzazione elenco combinati

Prima di WordPress 6.2, c'erano due pulsanti separati nella barra degli strumenti dell'Editor per Dettagli e Visualizzazione elenco . Nell'immagine seguente, puoi vedere il popover dei dettagli del documento in WordPress 6.1, incluso il numero di parole, il numero di caratteri, il tempo di lettura e il numero di intestazioni, paragrafi e blocchi, nonché la struttura del documento.

A partire da WordPress 6.2, Visualizzazione elenco e Dettagli sono stati spostati in un unico pannello Panoramica documento diviso in due schede: Visualizzazione elenco e Struttura .

Questa modifica dovrebbe fornire un modo più semplice per gestire il documento.

Funzionalità di blocco estese

Con WordPress 6.2, le capacità di diversi tipi di blocchi principali sono state estese. Ciò è particolarmente vero per il blocco Navigazione, che è interessato da numerose modifiche e miglioramenti all'esperienza di modifica.

Vediamo nel dettaglio le principali novità.

Modifica basata su elenchi per il blocco di navigazione

Con il rilascio di WordPress 6.2, è possibile modificare la disposizione degli elementi del blocco di navigazione da una visualizzazione elenco nella barra laterale delle impostazioni del blocco.

Facendo clic sulla voce di menu si accederà alla barra laterale delle impostazioni del collegamento alla pagina selezionato, dove sarà possibile modificare i dettagli del collegamento, inclusi etichetta, URL, descrizione, titolo del collegamento e rel.

Questa modifica semplifica notevolmente l'esperienza di modifica dei menu di navigazione, consentendo di aggiungere, organizzare ed eliminare elementi nel menu o persino creare nuovi menu di navigazione.

Blocca la navigazione

Un altro miglioramento del blocco di navigazione è la possibilità di bloccare la modifica del menu in modo più granulare. Ora puoi limitare la modifica , disabilitare il movimento e impedire la rimozione , mentre con WordPress 6.1 erano disponibili solo le opzioni di limitazione della modifica e disabilitazione del movimento .

Inoltre, le opzioni selezionate possono essere applicate anche ai blocchi interni (collegamenti e sottomenu).

Aggiungi/rimuovi didascalie dalla barra degli strumenti del blocco

Un nuovo pulsante Aggiungi/Rimuovi didascalia consente agli utenti di controllare le didascalie dalla barra degli strumenti del blocco per diversi blocchi (audio, video, immagine).

Se hai già impostato una didascalia, questa verrà inclusa automaticamente quando aggiungi l'immagine al tuo contenuto.

Miglioramenti al Blocco elenco pagine

Due miglioramenti riguardano il blocco Page List.

Innanzitutto, il blocco Elenco pagine ora può essere espanso per mostrare l'elenco delle pagine nel pannello Visualizzazione elenco.

Inoltre, una nuova opzione nella barra laterale del blocco consente ora di impostare una pagina iniziale e visualizzare nel blocco solo le pagine discendenti da essa.

Nuovo segnaposto blocco gruppo

Ora il segnaposto del blocco di gruppo visualizza un selettore di variazione quando il blocco viene aggiunto al contenuto della pagina.

Supporto per blocco di posizionamento adesivo

WordPress 6.2 introduce una nuova funzione di supporto del blocco di posizione, a partire dal posizionamento appiccicoso.

Questa nuova funzionalità attualmente si applica solo ai blocchi di gruppo, per i quali è abilitata per impostazione predefinita.

Gli sviluppatori di temi possono abilitare il posizionamento permanente sui propri temi utilizzando la funzionalità appearanceTools in theme.json . Se vuoi un controllo più granulare sugli strumenti di aspetto, puoi anche impostare settings.position.sticky prop su true .

Puoi abilitare il posizionamento permanente nel pannello Posizione della barra laterale del controllo Ispettore.

Con il posizionamento appiccicoso attivato, il tag HTML riceve una classe is-position-sticky e alcune regole CSS si applicano all'elemento corrispondente:

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }

Il posizionamento permanente funziona solo per i blocchi Raggruppa alla radice del documento . Sebbene ciò possa evitare confusione ed errori per gli utenti, al momento potresti trovare un po' complicato il posizionamento appiccicoso integrato (e potresti voler controllare diversi metodi per aggiungere un'intestazione adesiva al tuo sito Web WordPress). Tuttavia, secondo la nota di sviluppo,

... nei test manuali, il feedback ha indicato che senza ulteriore lavoro sull'interfaccia utente o sull'esperienza utente, potrebbe creare confusione per gli utenti che tentano di creare intestazioni adesive se impostano accidentalmente un blocco non root su appiccicoso o, ad esempio, un blocco all'interno di una parte del modello di intestazione su appiccicoso. La decisione è stata quella di ridimensionare la funzionalità solo per i blocchi radice per 6.2 per concedere più tempo per esplorare una soluzione adatta per i blocchi nidificati.

La funzione di posizionamento è disponibile solo per singoli blocchi, quindi non la troverai in Global Styles.

Ulteriori miglioramenti all'esperienza di modifica dei blocchi

Alcuni altri aggiornamenti degni di nota per bloccare la modifica includono quanto segue:

• Ora puoi trascinare e rilasciare le immagini su un paragrafo vuoto per sostituirlo con un blocco Immagine.
• I controlli tipografici sono stati raggruppati in pannelli. Ciò rende l'interfaccia Stili più coerente con l'interfaccia Impostazioni e ne migliora l'usabilità, poiché ora puoi mostrare e nascondere i controlli come nell'interfaccia delle impostazioni del blocco.

  

• Ora è possibile modificare la spaziatura delle lettere dei blocchi di intestazione direttamente nell'interfaccia Stili globali.
• Ora puoi impostare lo sfondo, il collegamento e il colore del testo del blocco Calendario.
• Sono state introdotte due nuove categorie di pattern di blocchi di banner e piè di pagina per riflettere meglio la struttura delle pagine web.
• Ora è possibile completare automaticamente i collegamenti in qualsiasi blocco utilizzando il collegamento [[ . Prima di questa modifica, i blocchi dovevano dichiarare esplicitamente il supporto per il completamento automatico dei collegamenti utilizzando __experimentalSlashInserter .
• Un nuovo control + option + scorciatoia da tastiera 1 – 6 ti consente di trasformare un paragrafo in un'intestazione.
• Il blocco Elenco pagine ora supporta tutte le opzioni tipografiche, tra cui la famiglia di caratteri, la dimensione del carattere, l'aspetto, l'altezza della riga, la spaziatura delle lettere, la decorazione e il maiuscolo.

  

  

Strumenti di progettazione migliorati

Molte delle nuove funzionalità e dei miglioramenti introdotti con WordPress 6.2 migliorano le capacità di stile e design del CMS. Di seguito è riportato un elenco delle funzionalità più interessanti relative al design in arrivo con 6.2; dettagliamo ciascuno più in basso.

Libro di stile

WordPress 6.2 introduce una nuova funzione Style Book che consente agli utenti di visualizzare in anteprima qualsiasi blocco che può essere utilizzato sui loro siti Web senza dover aggiungere quei blocchi a una parte di modello/modello. È possibile avviare il libro di stile facendo clic sul pulsante Apri libro di stile (l'icona a forma di occhio) che ora viene visualizzato nell'intestazione Stili all'interno degli stili globali.

Questo apre un'interfaccia che mostra un'anteprima di ogni blocco principale e di terze parti per categoria.

La nuova interfaccia Style Book semplifica il processo di progettazione rendendo disponibili le 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 un'anteprima di ogni blocco registrato in un iframe (vedi anche PR #45960).

La stessa interfaccia fornisce anche anteprime dei singoli blocchi. Ad esempio, l'immagine seguente mostra l'anteprima di un widget calendario personalizzato.

Gli sviluppatori possono nascondere un blocco dall'inserimento e dall'anteprima in due modi. Innanzitutto, puoi impostare supports.inserter su false in block.json :

 { "supports": { "inserter": false } }

Un altro modo per nascondere l'anteprima del blocco consiste nell'evitare la proprietà example , che viene utilizzata per creare un'anteprima del blocco nell'Help Panel di Inspector (maggiori informazioni qui).

Ombre negli stili globali

Con WordPress 6.2, è ora possibile aggiungere e personalizzare le ombre ad alcuni blocchi utilizzando Global Styles o theme.json (al momento della stesura di questo documento, la funzione ombra è disponibile solo per il blocco Button).

Innanzitutto, nei temi che supportano questa funzione, puoi aggiungere ombre dall'interfaccia Stili globali.

Per vederlo in azione, attiva il tema Twenty Twenty-Three, vai su Stili > Blocchi > Pulsante e fai clic sul pulsante Ombra .

Un pop-up Ombra consente di selezionare un'ombra dalle preimpostazioni del tema.

Gli sviluppatori di temi e gli utenti esperti possono anche aggiungere un'ombra ai blocchi utilizzando theme.json . La seguente definizione aggiunge un'ombra nera di 4px ai blocchi Button:

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

Puoi anche definire i preset per dare agli utenti del tema la possibilità di selezionarne uno dall'interfaccia 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 tuoi preset appaiono nel pannello Ombra nel blocco Stili.

Puoi anche scegliere il valore di un preset e usarlo come default del blocco:

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

Nuovo controllo della dimensione dell'altezza minima

A partire da WordPress 6.2, il pannello Dimensioni della barra laterale delle impostazioni del blocco per i blocchi Raggruppa e Pubblica contenuto ora fornisce un nuovo controllo Altezza minima abilitato per impostazione predefinita nei temi che utilizzano la funzionalità appearanceTools .

Questo nuovo controllo consente agli utenti di impostare un'altezza minima per i blocchi di contenuti di gruppo e post e può essere utilizzato per visualizzare il piè di pagina nella parte inferiore della pagina, anche con poco contenuto.

In combinazione con i nuovi strumenti di allineamento verticale, consente anche di allineare verticalmente gli elementi interni nella parte superiore/centrale/inferiore della pagina.

Gli sviluppatori possono aggiungere il supporto per l'altezza minima ai temi aggiungendo l'impostazione minHeight a theme.json :

 { "settings": { dimensions: "minHeight": true } }

Puoi anche usare la proprietà appearanceTools :

 { "settings": { "appearanceTools": true } }

La nuova proprietà minHeight può essere utilizzata anche per impostare un valore specifico direttamente in theme.json :

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

Gli sviluppatori di blocchi possono aggiungere la proprietà supports.dimensions.minHeight al proprio file block.json e impostarne il valore su true . Per i blocchi statici, la regola CSS min-height verrà archiviata come stile inline, mentre per i blocchi dinamici verrà inclusa nell'attributo style restituito da get_block_wrapper_attributes .

CSS personalizzato nel pannello Stili

Una delle funzionalità mancanti nel Site Editor rispetto al Theme Customizer era la possibilità di aggiungere stili CSS personalizzati. WordPress 6.2 colma il vuoto e ora l'interfaccia Global Styles include un campo di testo per aggiungere regole CSS personalizzate che non verranno sovrascritte quando aggiorni il tuo tema.

Puoi aggiungere stili personalizzati in base al blocco, dal pannello Stile blocco o facendo clic sul pulsante Azioni più stili nella barra degli strumenti Stili. Viene visualizzato un menu a comparsa che mostra un elemento CSS aggiuntivo .

Per supportare CSS personalizzati, è stata aggiunta una nuova proprietà styles.css a theme.json .

Le regole CSS personalizzate possono sovrascrivere completamente qualsiasi stile personalizzato impostato in theme.json . Se non vuoi che ciò accada, potresti prendere in considerazione l'inclusione del foglio di stile utilizzando i metodi di accodamento esistenti.

Puoi anche aggiungere CSS personalizzati per blocco in theme.json utilizzando la proprietà styles.blocks.block.css :

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

Puoi anche usare & per elementi nidificati e pseudo-selettori.

Per una visione più ravvicinata della nuova funzione CSS personalizzata, vedere anche CSS personalizzato per stili globali e per blocco.

Copiare e incollare stili tra blocchi

Un nuovo gruppo nel menu Opzioni della barra degli strumenti del blocco ora mostra due pulsanti per Copia stili e Incolla stili . Prima di questa aggiunta, era possibile solo copiare gli stili, ma non era chiaro come incollare gli stili.

Per provare questa nuova funzionalità, aggiungi un nuovo blocco, ad esempio un'intestazione. Cambia lo stile e scegli Copia stili dal menu Opzioni del blocco.

Quindi seleziona un altro blocco e scegli Incolla stile . Gli stili copiati verranno applicati automaticamente al secondo blocco.

Tieni presente che questa funzione è disponibile solo su siti protetti (https) nei browser che supportano. Per ulteriori dettagli, vedere la richiesta pull.

Applica le modifiche al blocco a livello globale

WordPress 6.2 introduce anche un pulsante Applica globalmente sotto il pannello Avanzate per i singoli blocchi che ti consente di inviare le modifiche allo stile del blocco a Stili globali e applicare tali modifiche all'intero sito web.

Grazie a questa nuova funzionalità, applicare la tipografia, la spaziatura, le dimensioni e lo stile del colore del blocco a tutti i blocchi di quel tipo ora è facile come premere un pulsante (vedi anche questa richiesta pull).

Esperienza di progettazione migliorata con i visualizzatori di spaziatura

I visualizzatori di spaziatura consentono di visualizzare in anteprima la quantità di margine o spaziatura applicata a un blocco. Con WordPress 6.2, questa funzionalità è migliorata con un paio di aggiunte che migliorano l'esperienza di editing.

Innanzitutto, i visualizzatori di spaziatura ora vengono visualizzati non appena passi il mouse sopra il controllo del margine o del riempimento.

In secondo luogo, il visualizzatore di spaziatura ora nasconde automaticamente la barra degli strumenti del blocco non appena si passa con il mouse sopra l'impostazione della spaziatura, in modo da poter visualizzare in anteprima le nuove impostazioni di margine e spaziatura senza il disordine della barra degli strumenti del blocco.

Si tratta di piccoli ma significativi cambiamenti che interessano un buon numero di blocchi core.

Modifiche per gli sviluppatori

WordPress 6.2 offre anche molte nuove funzionalità per gli sviluppatori: nuove API, correzioni di bug, miglioramenti delle prestazioni e molto altro. Immergiamoci nelle aggiunte più interessanti.

Una nuova API HTML

WordPress 6.2 introduce HTML Tag Processor, un parser conforme alle specifiche HTML5 che fornisce un modo sicuro per trovare tag HTML specifici e aggiungere, rimuovere o aggiornare attributi tramite PHP. L' HTML Tag Processor è il primo componente di una nuova API di elaborazione HTML.

La nuova API semplifica l'esecuzione di attività precedentemente complesse che spesso richiedevano l'uso di espressioni regolari.

Nell'esempio seguente, aggiungiamo semplicemente 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 successivo tag disponibile nell'HTML. Accetta anche un nome di tag, una classe CSS o entrambi per trovare tag specifici, come mostrato nell'esempio precedente.

Per modificare i tag HTML, devi prima selezionare il tag di destinazione:

 $p->next_tag();

Una volta selezionato il tag di destinazione, puoi utilizzare i metodi API per eseguire diverse operazioni:

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Puoi 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();

Puoi anche aggiungere o rimuovere una classe o un attributo. Nel codice seguente, 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();

È quindi possibile echo o restituire il tag aggiornato utilizzando il metodo $p->get_updated_html() .

Per una visione più ravvicinata della nuova API HTML, dai un'occhiata a questo tutorial PHP interattivo di Adam Zielinski, committente di WordPress Core.

API Patterns e una nuova proprietà template_types

L'API Patterns consente agli sviluppatori di WordPress di "creare blocchi di contenuti predefiniti che possono essere facilmente inseriti in post, pagine, tipi di post personalizzati e modelli".

Con WordPress 6.2, l'API Patterns ora include una nuova proprietà template_types per consentire di specificare in quali modelli può essere utilizzato un determinato pattern di blocco.

Jorge Costa sottolinea che si tratta di un aggiornamento solo back-end e che attualmente non esiste alcuna funzionalità UX corrispondente. Tuttavia, possiamo aspettarci di vedere implementazioni evolute di questa funzionalità con WordPress 6.3:

Il primo utilizzo, pensando a WordPress 6.3, è mostrare all'utente alcuni pattern che hanno senso su un template quando l'utente inizia a creare un template. Gli utenti possono iniziare da un modello anziché da "vuoto" o dal modello 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 contenente i nomi dei modelli a cui è destinato il modello di blocco.

Anche l'API REST è stata modificata per restituire i tipi di modello di un modello di blocco se ne è stato definito almeno uno.

React v18.0 e modalità di concorrenza

WordPress 6.2 fornisce anche una nuova versione della libreria React, ora aggiornata alla versione 18.0. La nuova versione include nuove API, funzionalità, miglioramenti e correzioni di bug. Una delle caratteristiche principali di React v18.0 è l'introduzione della modalità di concorrenza, "un nuovo meccanismo dietro le quinte che consente a React di preparare più versioni della tua interfaccia utente contemporaneamente".

Una delle caratteristiche principali della modalità simultanea in React è che è interrompibile:

React garantisce che l'interfaccia utente appaia coerente anche se un rendering viene interrotto. Per fare ciò, attende di eseguire le mutazioni DOM fino alla fine, una volta che l'intero albero è stato valutato. Con questa capacità, React può preparare nuove schermate in background senza bloccare il thread principale. Ciò significa che l'interfaccia utente può rispondere immediatamente all'input dell'utente anche se si trova nel mezzo di un'attività di rendering di grandi dimensioni, creando un'esperienza utente fluida.

Il vantaggio principale è che l'interfaccia utente risponde immediatamente all'input dell'utente, in concomitanza con il processo che è ancora in esecuzione in background.

Tuttavia, la concorrenza introduce anche potenziali insidie ​​di cui gli sviluppatori dovrebbero essere consapevoli. Per una panoramica più approfondita della modalità simultanea in React in WordPress 6.2, dai un'occhiata agli esempi forniti nella nota dello sviluppatore.

Ulteriori modifiche per gli sviluppatori

Altre modifiche degne di nota che gli sviluppatori dovrebbero prendere in considerazione includono quanto segue:

• WordPress 6.2 introduce un nuovo filtro JavaScript che può essere utilizzato per filtrare le impostazioni del blocco prima che l'editor venga visualizzato sullo schermo. Il nuovo filtro blockEditor.useSetting.before consente inoltre agli sviluppatori di modificare le impostazioni in base alla posizione del blocco, al ruolo dell'utente corrente, ai blocchi adiacenti e altro ancora. Per ulteriori informazioni ed esempi di utilizzo, consulta Personalizzare le impostazioni per qualsiasi blocco in WordPress 6.2.
• È stata introdotta una nuova prop skipBlockSupportAttributes per escludere gli attributi e gli stili relativi ai supporti dei blocchi nel componente ServerSideRender .
• Una nuova API theme.json ora consente di modellare le variazioni di blocco core esistenti da theme.json .
• I Google Fonts sono ora inclusi localmente e non recuperati dagli indirizzi Google nei temi raggruppati da Twenty Twelve a Twenty Seventeen.

Ma non è tutto. WordPress 6.2 introduce molte funzionalità, miglioramenti e correzioni di bug che non abbiamo menzionato qui per brevità. Per una panoramica più completa, consulta la Field Guide di WordPress 6.2.

Riepilogo

WordPress 6.2 ci avvicina alla fine della Fase 2 del progetto Gutenberg denominato Personalizzazione. Ma, come sottolinea Matias Ventura, questo non significa che il lavoro sulla personalizzazione sia completo e nelle versioni future. Come sempre, possiamo aspettarci ulteriori miglioramenti all'editor in base al feedback della community.

In questo post, abbiamo esplorato alcune delle principali funzionalità, miglioramenti e correzioni di bug in arrivo con WordPress 6.2. Ma c'è molto di più in 6.2. Con dieci versioni del plug-in Gutenberg nel core, dalla 14.2 alla 15.1, vedremo una nuova modalità di navigazione, un ispettore dei blocchi a schede, migrazione da widget a temi bloccati, nuove API e tonnellate di miglioramenti e correzioni di bug. E ci saranno anche miglioramenti per l'accessibilità e l'internazionalizzazione.

E se amate WordPress e volete acquisire nuove competenze di sviluppo di WordPress o testare e dare contributi al CMS, assicuratevi di prendere DevKinsta, la suite di sviluppo WordPress locale completamente gratuita di Kinsta, per un test drive.

Ora tocca a te: hai già testato la nuova versione nel tuo ambiente di sviluppo? Quali funzionalità ti piacciono di più in WordPress 6.2? Condividi i tuoi pensieri nella sezione commenti qui sotto.