Novità di WordPress 5.9: modifica completa del sito, stili globali, blocchi, modelli, API, miglioramenti dell'interfaccia utente e molto altro

WordPress 5.9 Josephine è qui! La prima versione dell'anno di WordPress era inizialmente prevista per il rilascio il 14 dicembre 2021. A causa di numerosi problemi aperti e bug irrisolti, la versione finale è stata ritardata ed è stata finalmente rilasciata il 25 gennaio 2022.

Se ti stai chiedendo cosa c'è di nuovo in WordPress 5.9, la risposta breve è Full Site Editing (FSE).

E in effetti, molte funzionalità 5.9 sono disponibili solo se stai utilizzando un tema che supporta la modifica completa del sito, come il nuovissimo tema predefinito, Twenty Twenty-Two.

Con WordPress 5.9, entriamo nel vivo della seconda fase della roadmap di Gutenberg: la fase di personalizzazione , che si concentra principalmente sulla modifica del sito completo, modelli di blocco, directory di blocco e temi basati su blocchi.

Con 5.9, che uscirà il mese prossimo, siamo – direi – all'MVP, il Minimum Viable Product di questa fase di personalizzazione di Gutenberg.

Queste parole di Matt Mullenweg al 2021 State of the Word riassumono al meglio le caratteristiche chiave della nuova versione di WordPress.

Detto questo, cosa c'è di nuovo con la prima versione di WordPress del 2022?

Scopriamolo!

Stili globali: un'interfaccia grafica per theme.json

Con il rilascio di WordPress 5.8 nel 2021, la manipolazione del file theme.json è diventata il modo standard per gli sviluppatori di temi di personalizzare le impostazioni e gli stili dell'editor.

WordPress 5.9 porta le cose al livello successivo introducendo un'interfaccia grafica che consente agli utenti di personalizzare i preset di stile per i propri siti Web, a livello globale oa livello di blocco, senza scrivere una singola riga di codice.

Il meccanismo degli stili globali dovrebbe alterare in modo significativo il modo in cui sei abituato a personalizzare l'aspetto dei tuoi siti Web, poiché gli stili globali influiscono su diversi aspetti del design del sito WordPress.

Prima di tutto, l'interfaccia Stili globali sostituisce il Customizer ed è ora l'unico modo per personalizzare impostazioni e stili con temi a blocchi. Allo stesso modo, le pagine di amministrazione delle opzioni dei temi complessi non saranno più necessarie. Ciò fornisce un nuovo modo standard per configurare le impostazioni e gli stili del tema e, allo stesso tempo, dovrebbe semplificare il flusso di lavoro di sviluppo del tema.

Con Global Styles, gli utenti di WordPress ottengono un maggiore controllo sulla presentazione dei loro siti Web, sia a livello globale che per tipo di blocco, al di là del contesto di singole pagine o post.

Una nuova barra laterale è ora disponibile nell'editor del sito, nella parte superiore del quale troverai un piccolo pannello di anteprima e quattro componenti nel seguente ordine:

• Tipografia
• Colori
• Disposizione
• Blocchi

Possiamo aspettarci che nuovi componenti vengano aggiunti nel tempo.

Diamo un'occhiata più da vicino alla nuova interfaccia.

È qui! Tutto quello che devi sapere su WordPress 5.9, tutto in un mega post Clicca per twittare
[CTA]

Anteprima di stile

Il primo elemento nella barra laterale Stili globali è un pannello di anteprima. Questo pannello ti permette di controllare il risultato delle tue personalizzazioni ed è particolarmente utile quando le tue modifiche si applicano ad elementi non visibili nel canvas dell'editor del sito.

L'immagine seguente mostra tre diverse combinazioni di stili a confronto:

Tipografia

Il pannello Tipografia è dove controlli la tipografia del tuo sito web. Naturalmente, i controlli disponibili in questo pannello dipendono dalle impostazioni di theme.json .

Ad esempio, il tema Twenty Twenty-One Blocks (TT1 Blocks) dichiara le seguenti proprietà tipografiche:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

L'immagine successiva mostra le impostazioni di Tipografia risultanti nella barra laterale Stili globali:

Immergiamoci un po' più a fondo e vediamo come il tema TT1 Blocks dichiara fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Puoi controllare queste famiglie di caratteri nel pannello di anteprima Stili globali:

Colori

Nella sezione Colori, puoi visualizzare e modificare le tavolozze dei colori e personalizzare il colore di diversi elementi del sito.

Facendo clic su questi elementi, si accede a un nuovo pannello in cui è possibile scegliere i colori da tre tavolozze di colori: Core, Theme e Custom palette (leggi di più in Colori predefiniti, Colori del tema e Colori personalizzati).

In questo pannello potrai impostare e modificare il colore dell'elemento corrente.

Disposizione

L'ultimo gruppo di strumenti è pensato per le personalizzazioni del layout. Nel contesto globale, questo è limitato al contenitore del sito.

Blocchi

Con l'implementazione del meccanismo Global Styles, ora è anche possibile modificare l'aspetto di blocchi specifici, come Paragraph (tipografia e colori), Buttons (layout) e Column (colori e layout).

Si noti che gli stili di blocco possono essere personalizzati dall'interfaccia Stili globali solo se il blocco dichiara il supporto per funzionalità specifiche nel file block.json corrispondente. Ad esempio, il blocco core/post-title attualmente supporta i seguenti stili:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Poiché il blocco core/post-title supporta colori, spaziatura e tipografia, troverai le voci corrispondenti nelle impostazioni Stili globali del blocco Titolo post.

L'immagine seguente mostra le impostazioni tipografiche, che puoi facilmente confrontare con il codice sopra:

Vale la pena notare che WordPress 5.9 fornisce solo la prima implementazione dell'interfaccia Global Styles. Come sottolinea Matias Ventura, possiamo ragionevolmente aspettarci un ulteriore sviluppo della nuova funzione di controllo dello stile:

In futuro, ci saranno flussi integrati nel sistema che ti consentiranno di passare dagli stili locali a quelli globali, come apportare personalizzazioni a un blocco di pulsanti e scegliere di applicarle modifiche globali a tutti i pulsanti di quel tipo.

Quindi potremmo vedere presto importanti miglioramenti. L'immagine qui sotto è solo un esempio di ciò che potremmo aspettarci:

Ulteriori miglioramenti potrebbero includere la possibilità per i temi di fornire tavolozze di colori alternative e più variazioni di stile globali.

La scorsa settimana ho creato una manciata di variazioni di colore + carattere di Twenty Twenty-Two in temi per bambini semplicissimi. Sono davvero leggeri e adoro l'idea di offrire alla gente un sito drasticamente diverso con un clic.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) 15 novembre 2021

Gli sviluppatori possono approfondire il meccanismo di stile globale nell'articolo di supporto Impostazioni e stili globali (theme.json). Troverai ulteriori esempi nella nostra introduzione al tema predefinito Twenty Twenty-Two.

Il blocco di navigazione

Il blocco Navigazione è stato soprannominato "uno dei blocchi tematici di maggior impatto" e non abbiamo paura di dire che siamo d'accordo.

Il blocco è nella fase embrionale da un po' di tempo (vedi anche Navigation Block Tracking Issue e Tracking Issue i2). Tuttavia, ora che tutti i problemi in sospeso e i blocchi elencati come must-have di WordPress 5.9 sono stati risolti, possiamo finalmente iniziare a utilizzare una delle funzionalità più potenti unite al core con WordPress 5.9.
[CTA]

Una rapida panoramica dell'interfaccia del blocco di navigazione

L'uso del nuovo blocco potrebbe creare un po' di confusione all'inizio, ma una volta che avrai preso la mano, ne apprezzerai tutto il potenziale.

Quando aggiungi per la prima volta un blocco di navigazione, il segnaposto del blocco fornisce tre opzioni per selezionare un menu esistente basato su blocchi, creare un menu con tutte le pagine o ricominciare da capo con un menu vuoto.

Il nuovo menu di navigazione consente inoltre di importare menu creati tramite la schermata dei menu di aspetto, disponibile con i temi classici.

Ciò significa che se stai passando da un tema classico a un tema a blocchi, non dovrai ricostruire i menu esistenti. Devi solo scegliere uno dei "Menu classici" attualmente disponibili e verrà automaticamente convertito in un menu di navigazione basato su blocchi.

Puoi aggiungere il blocco di navigazione in qualsiasi punto delle tue pagine. Ad esempio, negli articoli di lunga durata potrebbe essere utile creare un sommario, consentendo agli utenti di passare a sezioni di contenuto specifiche.

I nuovi collegamenti di navigazione vengono aggiunti istantaneamente al blocco di navigazione facendo clic sull'icona più ( + ) sul lato destro (vedere anche le note di rilascio di Gutenberg 11.7), a meno che non siano già stati aggiunti altri tipi di blocchi al menu.

Facendo clic sul pulsante Modifica nella barra degli strumenti del blocco Collegamento di navigazione si converte una voce di menu in un collegamento personalizzato. Ciò ti consente di aggiungere, modificare, riordinare e rimuovere elementi individualmente.

Puoi anche trasformare i collegamenti in blocchi facendo clic sul pulsante Trasforma nella barra degli strumenti del blocco. Ciò consente di aggiungere blocchi specifici direttamente al menu di navigazione.

I blocchi personalizzati di link, spaziatori, logo del sito, home link, icone social e di ricerca sono ora visibili agli utenti quando si aggiungono blocchi ai menu di navigazione.

Nella barra laterale Impostazioni troverai un set completo di opzioni per controllare diversi aspetti dei menu di navigazione.

Il pannello Layout include i controlli per la giustificazione, l'orientamento e il wrapping.

Il blocco Navigazione presenta anche un pannello delle impostazioni del display migliorato con un'opzione per un menu hamburger sempre attivo.

Puoi anche personalizzare i colori del testo e dello sfondo per i tuoi menu e sottomenu.

Un'altra utile aggiunta recentemente aggiunta al blocco Navigazione è il supporto Block Gap, che aggiunge la possibilità per gli utenti di controllare la distanza tra le voci di menu.

Il pannello Tipografia fornisce una serie di controlli per la famiglia di caratteri, l'aspetto, l'altezza della linea, la decorazione e la lettera maiuscola. Tutti questi controlli possono essere attivati/disattivati ​​da un menu a discesa che appare quando si fa clic sull'icona con i puntini di sospensione a destra.

Il blocco di navigazione: sotto il cofano

I dati del blocco di navigazione vengono archiviati nel database utilizzando un tipo di post dedicato wp_navigation .

Perché è interessante per gli utenti di WordPress e come funziona?

Supponi di aver creato un menu di navigazione composto da due collegamenti personalizzati e una casella di ricerca. Con il tema Twenty Twenty-Two installato, il menu potrebbe apparire come mostrato nell'immagine seguente:

Il blocco di navigazione sopra è archiviato nel database come tipo di post wp_navigation come segue:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

La memorizzazione del contenuto del blocco di navigazione nel database consente agli utenti di utilizzare gli stessi menu di navigazione su diversi temi di blocco. Se il menu non è immediatamente visibile, è sufficiente selezionare il menu di navigazione desiderato nel selettore di menu (vedere anche l'edizione n. 36087 e la PR n. 36178).

L'immagine seguente mostra il menu sopra con il tema Twenty Twenty-One Blocks:

Il blocco di navigazione ha subito diverse iterazioni. Puoi approfondire ogni implementazione nelle note di rilascio di Gutenberg 11.7, 11.8 e 11.9.

Puoi anche leggere ulteriori informazioni sul blocco di navigazione nella nuova nota di sviluppo del blocco di navigazione e nell'articolo di supporto del blocco di navigazione.
[CTA]

Gallerie di immagini, immagini in evidenza e icone del sito

Con l'obiettivo di far sì che le immagini si comportino in modo più coerente in contesti diversi, WordPress 5.9 offre nuove funzionalità e miglioramenti a diversi blocchi. Il Blocco Galleria è stato completamente rivisto, mentre varie modifiche ai blocchi Immagine in evidenza e Icona del sito offrono agli utenti un controllo più granulare sulle rispettive immagini.

Un blocco galleria rifattorizzato

In WordPress 5.8, la possibilità di personalizzare l'aspetto delle immagini nelle gallerie era alquanto limitata. Non era possibile modificare lo stile dell'immagine o applicare un filtro a due tonalità.

Inoltre, nelle immagini della galleria mancavano funzionalità importanti, come l'aggiunta di collegamenti personalizzati a singole immagini in una galleria.

Per capire meglio il motivo di questa asimmetria tra le immagini nei due diversi contesti di una singola immagine e di un'immagine in una galleria, diamo un'occhiata al blocco Galleria nella vista Codice in WordPress 5.8:

Tieni presente che i dettagli dell'immagine vengono memorizzati solo nel delimitatore di blocco Galleria (vedi anche Che cos'è un blocco Gutenberg?).

Ciò ha fatto sì che le singole immagini si comportassero in modo diverso dalle immagini nelle gallerie.

Per fare in modo che le immagini si comportino in modo coerente nei due diversi contesti, WordPress 5.9 introduce un blocco Galleria completamente rifattorizzato, che ora si comporta come un contenitore per una raccolta di elementi di figura invece di un elenco di immagini non ordinato.

In WordPress 5.9, le immagini della galleria vengono nidificate utilizzando le API innerBlocks di base e ogni immagine memorizza il proprio insieme di dettagli, esattamente come le singole immagini.

Questo è un grande miglioramento, dal momento che le immagini a blocchi della Galleria ora supportano le stesse funzionalità disponibili nei blocchi immagine principali , come le dimensioni dell'immagine e i filtri a due tonalità, nonché le funzionalità di blocco standard, come funzionalità di trascinamento, copia, duplicazione e rimozione .

Con il nuovo blocco Galleria, sarai in grado di modellare le immagini individualmente. Ciò garantisce un'ampia gamma di opportunità di personalizzazione.

L'immagine seguente mostra più immagini in una galleria, ognuna con angoli arrotondati in modo diverso:

Puoi anche utilizzare diversi filtri a due tonalità su immagini diverse nella stessa galleria.

E, naturalmente, puoi assegnare una classe CSS specifica a ciascuna immagine, che ti dà ulteriori superpoteri per aggiungere qualsiasi personalizzazione di cui hai bisogno alle immagini della tua galleria.

Per una visione più ravvicinata del nuovo blocco Galleria, vedere anche Note di sviluppo Refactor del blocco galleria, Prossimi miglioramenti al Blocco galleria e Note sulla versione di Gutenberg 11.4.

Miglioramenti alle immagini in primo piano

Diversi miglioramenti sono stati apportati anche al blocco Immagine in evidenza.

Controlli delle dimensioni di base

Il blocco Immagine in evidenza ora presenta un nuovo pannello delle impostazioni Dimensioni che fornisce i controlli di altezza, larghezza e scala.

Il controllo delle dimensioni si applica anche alle immagini in primo piano nei blocchi del ciclo di query, come mostrato nell'immagine seguente:

Filtri a due tonalità sulle immagini in primo piano

Abbiamo accennato in precedenza che ora possiamo applicare il filtro bicromia alle immagini avvolte nel nuovo blocco Galleria rifattorizzato.

Ora, a partire da WordPress 5.9, i filtri a due tonalità sono disponibili anche nei blocchi Immagine in evidenza in qualsiasi contesto, dai modelli di post e pagine ai blocchi di Query Loop.

Questa funzione apre le porte a combinazioni di colori creative e coerenti in tutto il sito.

Ritaglio dell'immagine nel logo del sito

Prima di WordPress 5.9 (e Gutenberg 11.6), le immagini del logo potevano essere modificate solo prima di essere caricate. Con WordPress 5.9, puoi ritagliare, ingrandire e ruotare le immagini utilizzate nel blocco Logo del sito direttamente dalla barra degli strumenti del blocco.

Nuovi strumenti di progettazione, blocchi e miglioramenti dell'interfaccia utente

Undici versioni di Gutenberg vengono unite nel core con WordPress 5.9, offrendo così tante funzionalità, miglioramenti e correzioni di bug che non sarebbe possibile trattarle tutte in un unico articolo.

Quindi abbiamo scelto alcuni di quelli che abbiamo ritenuto più degni di attenzione. Per una panoramica più approfondita di tali funzionalità e miglioramenti, potresti anche voler controllare i post di rilascio per Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 e 11.9.

Detto questo, questa sezione tratterà le seguenti modifiche:

Border supporta l'interfaccia utente

A partire da WordPress 5.9, quando theme.json dichiara le impostazioni del border e un blocco dichiara il supporto del bordo tramite l'API Block Supports, un nuovo pannello delle impostazioni fornirà i controlli per il raggio del bordo, la larghezza, lo stile, il colore e le unità (vedi anche Gutenberg 11.1) .

Il blocco di gruppo principale è un buon esempio di questo utile miglioramento dell'interfaccia utente. Il file block.json del blocco Group ora include le seguenti dichiarazioni di supports :

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Questa funzione consente agli utenti di creare fantastici effetti grafici sui propri siti Web con il minimo sforzo. Puoi vederlo in azione con il nuovo tema Twenty Twenty-Two.

In un nuovo post o pagina, crea un nuovo blocco Gruppo e selezionalo. Vedrai un pannello Bordo nella barra laterale delle impostazioni del blocco. Modifica la larghezza e lo stile del bordo secondo necessità e goditi il ​​risultato.

Se sei uno sviluppatore di temi e desideri aggiungere questa funzionalità ai tuoi temi, apri il file theme.json e dichiara il supporto per i bordi come mostrato nel codice seguente:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Salva il file e torna alla dashboard di WordPress. In un nuovo post o pagina, crea un nuovo blocco Gruppo e selezionalo. Ora dovresti vedere un pannello Bordo nella barra laterale delle impostazioni del blocco (vedi anche questo tema sperimentale.json).

Miglioramenti alla visualizzazione elenco

Con WordPress 5.9, la Visualizzazione elenco è stata migliorata e ora include il trascinamento della selezione, sezioni comprimibili e ancoraggi HTML.

Trascina e rilascia nella visualizzazione elenco

Come menzionato nella richiesta pull n. 33320, il trascinamento della selezione è stato implementato nella visualizzazione elenco ma è stato disabilitato a causa di problemi di prestazioni.

A partire da WordPress 5.9, il trascinamento nella visualizzazione elenco è stato re-implementato. Puoi nuovamente trascinare e rilasciare blocchi e gruppi di blocchi in qualsiasi punto della Visualizzazione elenco. Questo è un grande miglioramento nell'usabilità dell'editor, in quanto ti consente di spostare rapidamente e facilmente blocchi e gruppi di blocchi intorno alle tue pagine. È fondamentale per articoli e pagine di lunga durata e per gestire strutture complesse di blocchi nidificati.

Visualizzazione elenco sezioni comprimibili

Un altro miglioramento significativo della visualizzazione elenco è la possibilità di espandere/comprimere sezioni di blocchi nidificati. Ciò ti consente di navigare facilmente in strutture di blocchi complesse, espandendo singoli gruppi di blocchi lasciando tutto il resto compresso.

Puoi anche espandere e comprimere le sezioni della Visualizzazione elenco utilizzando le frecce sinistra e destra.

Ancoraggi HTML sugli elementi della visualizzazione elenco

Un altro utile miglioramento è la possibilità di aggiungere ancoraggi HTML ai tuoi blocchi in Visualizzazione elenco e vederli a colpo d'occhio.

Controllo della spaziatura dei blocchi

Introdotto per la prima volta in Gutenberg 11.4 e ora unito al core con WordPress 5.9, il nuovo controllo Block Spacing consente di impostare una distanza personalizzata tra gli elementi all'interno di un blocco. Di seguito, puoi vedere un'anteprima con diversi valori di spaziatura dei blocchi in un blocco Colonne con il tema predefinito Twenty Twenty-Two:

La spaziatura gap è inizialmente disponibile per blocchi specifici, inclusi pulsanti, immagini, colonne, titoli e navigazione, ma in futuro il supporto dovrebbe essere esteso a più blocchi.

I temi dovrebbero abilitare Gap Spacing in theme.json usando la nuova proprietà aspettoTools . Puoi leggere di più sugli strumenti per l'aspetto nel nostro approfondimento su Twenty Twenty-Two. Vedere anche le richieste pull n. 33991 e n. 34630.

Anteprima URL avanzata per il controllo dei collegamenti

Sfruttando il nuovo endpoint REST url-details, il controllo Link fornisce ora un'anteprima URL completa che mostra i dettagli per una risorsa di destinazione del collegamento.

Nella sua prima implementazione, questa funzionalità era disponibile solo nel componente RTF di Post Editor. Al momento della stesura di questo articolo, è disponibile anche nell'editor del sito, ma non negli editor di navigazione e widget.

Crea pagine dal popup di collegamento

WordPress 5.9 presenta anche un'interfaccia utente del collegamento in linea migliorata, che mostra un pulsante nuovo di zecca per creare nuove pagine direttamente dal popup del collegamento in linea. Questa funzione è disponibile solo all'interno dell'editor dei post.

Miglioramenti al blocco di ricerca

Il Blocco di ricerca ora mostra le impostazioni del colore del pulsante e del bordo.

Ora puoi anche personalizzare il colore dello sfondo e del testo, il colore del bordo e il raggio.

Nuovi controlli per le dimensioni dei blocchi

È ora disponibile un nuovo pannello delle impostazioni delle Dimensioni per consentire agli utenti di controllare lo spazio occupato da un blocco nella pagina. Il pannello dovrebbe includere altezza, larghezza, riempimento, margine e possibilmente controlli di allineamento, ma non tutti gli attributi saranno disponibili per ogni blocco.

Gli sviluppatori di blocchi troveranno il componente <DimensionControl /> documentato su GitHub, ma nota che è ancora contrassegnato come una funzionalità sperimentale e potrebbe essere soggetto a modifiche sostanziali al momento della stesura di questo articolo.

Un nuovo blocco del gruppo di widget aggiunto alla schermata dei widget

Un nuovo blocco del gruppo di widget è ora disponibile nell'editor dei widget basati sui blocchi. L'ultimo blocco consente di aggiungere un gruppo di blocchi in un widget con un titolo nell'editor dei widget dei temi classici e nel Customizer.

Puoi leggere ulteriori informazioni sull'editor dei widget nell'Editor dei widget basati sui blocchi e sui widget dei blocchi nel Personalizzatore.

Layout flessibile e New Row Block

Introdotto originariamente come funzionalità sperimentale con Gutenberg 11.2, il layout flessibile è stato esteso a diversi blocchi, inclusi collegamenti sociali e blocchi di gruppo.

Alcuni blocchi, come il blocco Collegamenti social, ora forniscono una serie di controlli della barra degli strumenti e impostazioni della barra laterale che consentono di personalizzare il layout flessibile.

Questa stessa funzionalità è disponibile nel blocco Navigazione e nel blocco Riga, una nuova variazione del blocco Gruppo introdotta con Gutenberg 11.5.

L'immagine seguente mostra il blocco Riga con i controlli del layout nella barra laterale delle impostazioni:

Di seguito, puoi vedere lo stesso blocco Riga sul frontend e nello strumento di ispezione di Chrome.

Miglioramenti del modello di blocco

Introdotti per la prima volta con WordPress 5.5, i modelli di blocco consentono agli utenti di WordPress di includere complesse strutture pronte per l'uso di blocchi nidificati nei loro contenuti con pochi clic.

Ora, WordPress 5.9 fa un passo avanti verso la democratizzazione del design e l'empowerment degli utenti introducendo un paio di miglioramenti al sistema di pattern a blocchi.

Quindi, cosa c'è di nuovo con i modelli di blocco in WordPress 5.9?

Modelli in primo piano dalla directory dei modelli

L'Inseritore blocchi ora mostra i modelli di blocchi in primo piano recuperati dinamicamente dalla directory dei modelli, fornendo agli utenti un modo semplice e veloce per trovare modelli popolari da utilizzare nei loro contenuti.

Allo stesso modo, poiché i modelli entrano direttamente nella dashboard di WordPress, gli sviluppatori di WordPress dovrebbero essere incoraggiati a creare e pubblicare sempre più modelli nel tempo, con conseguenti capacità di progettazione sempre più avanzate per gli utenti.

Un nuovo esploratore di pattern a schermo intero

Poiché il numero di pattern di blocchi disponibili nella Pattern Directory continua a crescere e più temi li utilizzano, WordPress 5.9 introduce una nuova interfaccia di navigazione di pattern di blocchi: il Pattern Explorer.

Un nuovo pulsante Esplora ora apre una modalità a schermo intero che consente agli utenti di sfogliare, cercare e inserire schemi di blocco con pochi clic. Il risultato è un'esperienza utente migliorata.

Troverai anche note aggiuntive e diversi esempi di schemi a blocchi nel nostro approfondimento sul tema WordPress Twenty Twenty-Two.

Se sei interessato e vuoi saperne di più, ascolta il podcast di Josepha Haden Chomphosy Episodio 16 e 21 e guarda il video YouTube Exploring WordPress 5.9 di Anne McCarthy.

The Twenty Twenty-Two Theme e WordPress Block Themes

Con WordPress 5.9, non è più necessario installare il plug-in Gutenberg per abilitare la modifica completa del sito sul tuo sito Web WordPress. Devi solo consentire a un tema a blocchi di sfruttare tutte le funzionalità di FSE.

Inoltre, WordPress 5.9 è stato fornito in bundle con un nuovissimo tema predefinito, Twenty Twenty-Two, ed è un punto di svolta poiché Twenty Twenty-Two è il primo tema di blocco predefinito in assoluto.

Twenty Twenty-Two è un tema altamente flessibile e personalizzabile. Fornisce una sandbox perfetta per provare il nuovo flusso di modifica dei modelli, nuovi blocchi, miglioramenti dell'interfaccia e tutte le funzionalità di modifica del sito aggiunte al core, a partire da WordPress 5.9.

Come accennato in precedenza, tutto ciò che devi fare è installare e attivare un tema a blocchi, come Twenty Twenty-Two. Una volta che il tema è attivo, una nuova voce di menu Editor (beta) apparirà nel menu di amministrazione della dashboard di WordPress.

L'interfaccia dell'editor del sito ora presenta un flusso di modifica del sito rinnovato. Dall'interfaccia di modifica, sarai in grado di modificare visivamente la home page del sito, i modelli e le parti del modello, nonché accedere all'interfaccia Stili globali.

Quando attivi un tema a blocchi, non troverai il Customizer. Questo perché il Customizer non supporta i temi a blocchi, che utilizzano solo l'editor del sito. Questo è anche il motivo per cui non puoi visualizzare in anteprima i temi dei blocchi inattivi .

Quindi, a partire da WordPress 5.9, il punto di accesso al Customizer non è più disponibile nel menu di amministrazione quando è attivo un tema di blocco (a meno che tu non stia utilizzando un plug-in che lo utilizzi).

Se sei ancora legato ai temi tradizionali e sei preoccupato per la compatibilità con le versioni precedenti, stai tranquillo: puoi continuare a utilizzare il tuo tema.

Al momento hai quattro diverse categorie di temi tra cui scegliere:

• Temi a blocchi : temi progettati per FSE
• Temi universali : temi che funzionano sia con la personalizzazione che con l'editor del sito
• Temi ibridi: temi classici che supportano le funzionalità di FSE come theme.json
• Temi classici : temi con template PHP, functions.php, ecc.

A causa dell'impatto che i temi dei blocchi avranno probabilmente sull'ecosistema di WordPress, abbiamo un intero articolo che copre Twenty Twenty-Two e i temi dei blocchi di WordPress. Assicurati di controllarlo per una panoramica più approfondita.

Miglioramenti delle prestazioni

Qui a Kinsta, siamo ossessionati dalla velocità del sito web. Ecco perché siamo entusiasti dei miglioramenti delle prestazioni in arrivo con WordPress 5.9.

Questi miglioramenti influiranno su diverse aree del CMS, dall'editor dei blocchi ai temi dei blocchi, al caricamento lento e altro ancora. Immergiamoci.

Miglioramenti dell'inseritore di blocchi

Da WordPress 5.9, i tipi di blocchi, i modelli e le categorie vengono renderizzati pigramente nel Block Inserter. Il browser carica prima il contenuto con priorità più alta, offrendo all'utente un'esperienza di modifica più fluida e prestazioni migliorate.

Ulteriori notevoli miglioramenti delle prestazioni nel contesto dell'editor di blocchi riguardano i blocchi riutilizzabili e la visualizzazione elenco.

Meno CSS caricato

Per quanto riguarda il frontend, WordPress 5.9 ha ridotto drasticamente la quantità di CSS caricata dai temi a blocchi, portando a un caricamento delle pagine notevolmente più veloce.

Il principale miglioramento da notare in questo contesto è l'introduzione del meccanismo delle impostazioni e degli stili theme.json , che impedisce ai temi di utilizzare enormi fogli di stile, incluse centinaia di dichiarazioni CSS. La quantità di codice CSS utilizzata da un tema è stata ora ridotta a poche proprietà personalizzate CSS che qualsiasi tipo di blocco può riutilizzare.

Miglioramenti delle prestazioni di caricamento lento

Il caricamento lento delle immagini è stato introdotto per la prima volta in WordPress 5.5. A partire da WordPress 5.7, la funzionalità di caricamento lento è stata estesa agli iframe, consentendo ai proprietari di siti di creare siti Web più veloci e migliorare la propria SEO.

Ad ogni modo, a seguito di un'analisi del Largest Contentful Paint (LCP), è emerso che l'assegnazione dell'attributo loading="lazy" a tutte le immagini e gli iframe sulla pagina provoca un leggero degrado delle prestazioni.

Il semplice salto dell'attributo loading="lazy" non era una soluzione perché così facendo si perderebbero i chiari vantaggi del caricamento lento.

La soluzione ottimale sarebbe omettere solo l'attributo loading="lazy" sulle immagini che appaiono above the fold. Tuttavia, poiché l'attributo loading="lazy" è assegnato sul lato server, WordPress non può determinare quali immagini vengono visualizzate esattamente above the fold. È qualcosa che dipende principalmente dal tema attivo.

Ora, come soluzione di compromesso, a partire da WordPress 5.9, l'attributo loading="lazy" non viene applicato alla prima immagine di contenuto o iframe. Un'analisi condotta su 50 temi WordPress popolari ha rilevato che questa soluzione porta a notevoli miglioramenti delle prestazioni e a un caricamento delle pagine fino al 30% più veloce.

Felix Arntz spiega come funziona:

... per migliorare le prestazioni immediatamente senza richiedere a uno sviluppatore di personalizzare il comportamento, WordPress ora salterà la prima "immagine di contenuto o iframe" sulla pagina dal caricamento lento. Il termine "immagine del contenuto o iframe" qui indica qualsiasi immagine o iframe che si trova all'interno del contenuto di qualsiasi post nel ciclo di query principale corrente, nonché qualsiasi immagine in primo piano di tale post. Questo vale sia per il contenuto “singolare” che per quello “archivio”: in un contesto “singolare” la prima immagine o iframe del (unico) post non è lazy-loaded, mentre in un contesto “archivio” la prima immagine o iframe del il primo post nella query non è a caricamento lento.

Gli sviluppatori di temi possono ora utilizzare il nuovo filtro wp_omit_loading_attr_threshold per modificare il numero di immagini/iframe da ignorare dal caricamento lento.

Più fogli di stile per blocco

Gli sviluppatori di blocchi e temi possono registrare più fogli di stile su ciascun blocco e caricare stili da altri blocchi quando necessario. Ciò consente di caricare fogli di stile in base al contenuto della pagina, impedendo ai temi di caricare enormi fogli di stile su ogni pagina.

Secondo Ari Stathopoulos:

I blocchi ora potranno registrare più fogli di stile e caricare stili da altri blocchi quando necessario. I temi potranno aggiungere stili in base al blocco invece di caricare fogli di stile monolitici che vengono caricati forzatamente ovunque. Ciò ha un impatto maggiore sui temi a blocchi in cui il caricamento dei fogli di stile è ottimizzato in base al contenuto della pagina e del layout, ma può essere utilizzato anche dai temi classici.

Funzionalità aggiuntive per gli sviluppatori

Oltre alle numerose funzionalità e miglioramenti dell'interfaccia utente discussi finora, WordPress 5.9 introduce anche diverse funzionalità per gli sviluppatori.

Un nuovo attributo per bloccare i blocchi

Gli sviluppatori di blocchi ora possono impedire agli utenti di spostare o eliminare singoli blocchi aggiungendo un attributo di lock nelle impostazioni del blocco:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Con questa funzione abilitata, gli utenti possono modificare il contenuto del blocco, ma non possono spostare il blocco sulla pagina o rimuoverlo dall'area dell'editor. L'immagine seguente mostra un blocco personalizzato con un set standard di controlli della barra degli strumenti:

La definizione dell'attributo di lock , come mostrato nel codice sopra, nasconde gli spostamenti dei blocchi e i controlli Sposta in e Rimuovi dalla barra degli strumenti del blocco. L'immagine seguente mostra il risultato finale sullo schermo:

Puoi anche bloccare un blocco specifico in uno schema di blocco. Per un esempio, vedere anche Blocco dei blocchi in WordPress 5.9.

Nuova API per accedere a impostazioni e stili globali

WordPress 5.9 introduce una nuova API pubblica PHP per leggere i dati da theme.json .

Lettura di impostazioni e stili da theme.json

Ci sono due nuove funzioni per leggere i dati dalle sezioni delle settings e styles dichiarate in theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path è un array che elenca il percorso dell'impostazione specificata
• $context è un array che imposta il contesto per quei dati. Gli sviluppatori possono leggere da una specifica sezione delle impostazioni del blocco, ad esempio array( 'block_name' => 'core/paragraph' ) . La chiave orygin impostata su base consente di ignorare i dati personalizzati salvati dall'utente.

Il codice di esempio seguente restituirà il valore dell'impostazione contentSize . In Twenty Twenty-Two, sarebbe 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Impostando un contesto, puoi recuperare stili per blocchi specifici. Il codice seguente mostra come recuperare il valore del raggio del bordo per il blocco core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

La funzione precedente restituisce il valore della proprietà richiesto tenendo conto delle impostazioni predefinite, delle impostazioni del tema e dei dati dell'utente. Il valore personalizzato verrà fornito se l'utente configura il raggio del bordo del pulsante nell'interfaccia Stili globali.

Per ignorare i dati utente, dovresti utilizzare il seguente codice:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Ottenere il foglio di stile generato

WordPress 5.9 introduce anche una nuova funzione per ottenere il foglio di stile risultante da stili predefiniti, temi e personalizzati:

 wp_get_global_stylesheet( $types = array() );

$types è un elenco degli stili da generare.

Puoi leggere di più sulla nuova API in Nuova API per accedere a impostazioni e stili globali.

Più funzionalità per gli sviluppatori

Ulteriori modifiche a WordPress 5.9 per gli sviluppatori che potresti voler conoscere includono:

• Blocca temi, un nuovo modo per creare temi in WordPress 5.9
• Aggiornamenti per Impostazioni, Stili e theme.json
• Modifiche e filtri incentrati sul tema in WordPress 5.9
• Nuove query sulle capacità in WordPress 5.9
• Varie modifiche principali in WordPress 5.9
• Varie modifiche all'editor di blocchi in WordPress 5.9
• Assumi più controllo sulle aree di blocco interne (come sviluppatore di blocchi)

La tua guida definitiva a WordPress 5.9: dai miglioramenti dell'interfaccia utente agli stili globali (e altro ancora!) Fai clic per twittare

Sommario

Concluderemo questo articolo con una breve nota sulla quota di mercato di WordPress. WordPress attualmente alimenta oltre il 65% di tutti i siti Web il cui sistema di gestione dei contenuti è noto e si trova a nord del 43% di tutti i siti Web .

Questi numeri sono impressionanti, soprattutto se confrontati con i concorrenti più vicini con una quota di mercato inferiore al 5%, come Shopify.

E questo significa anche che non puoi trascurare l'evoluzione del WP CMS. Ogni nuova versione di WordPress porta nuove funzionalità, miglioramenti dell'interfaccia, miglioramenti delle prestazioni e WordPress 5.9 non fa eccezione. Tutto ciò di cui hai bisogno per testare le nuove funzionalità è un tema a blocchi, come il nuovo tema predefinito Twenty Twenty-Two, e sarai pronto per partire.

Passa a te, ora! Sei pronto per passare a temi a blocchi e FSE? E quali sono le tue modifiche preferite in arrivo con WordPress 5.9?