Gutenberg 8.3 aggiorna le categorie di blocchi, include il selettore dei blocchi principali e aggiunge nuovi controlli di progettazione

Ieri, il team di Gutenberg ha rilasciato la versione 8.3 del plugin in corso dietro l'editor di blocchi. Sebbene gran parte dell'attenzione del team sia sull'imminente modifica dell'intero sito, questo aggiornamento include diverse funzionalità rivolte all'utente, come un insieme riorganizzato di categorie di blocchi, un selettore di blocchi principali, un controllo di spaziatura e opzioni di colore dei collegamenti.

Un miglioramento minore include la possibilità di filtrare il blocco dei post più recenti per autore. Anche il controllo del livello per il blocco Intestazione è cambiato. Invece di selezionare il livello nella barra laterale delle opzioni di blocco, il selettore del livello si trova ora nella barra degli strumenti dell'editor.

In Gutenberg 8.2, premendo il tasto Enter all'interno del campo della didascalia per un blocco immagine si creava un nuovo paragrafo. In 8.3, quella funzionalità è stata estesa a tutti i blocchi con didascalie.

Il team ha corretto oltre 20 correzioni di bug nell'ultima versione. Nel complesso, il nuovo aggiornamento del plugin sembra essere solido dopo una giornata di utilizzo. Tuttavia, alcune delle aggiunte sperimentali, come il nuovo controllo del riempimento, potrebbero meritare qualche preoccupazione. Gli autori del tema devono iniziare a testarlo, fornire feedback e assicurarsi che lo sviluppo stia andando nella giusta direzione.

Nuove categorie di blocchi

Il team di Gutenberg ha rinominato e riorganizzato le categorie dei blocchi. Il nuovo elenco sembra avere più senso ed è meglio consolidato in gruppi propri:

• Testo
• Media
• Design
• Widget
• Incorpora

Sebbene io sia un fan dei nuovi nomi di categoria, trovo che le categorie siano inutili per qualsiasi scopo pratico a questo punto. Da quando Gutenberg ha rilasciato l'interfaccia a schede nell'inseritore di blocchi, è sembrato un grande muro di blocchi. I miei occhi saltano naturalmente in base ai nomi delle categorie mentre scorro e scorro e scorro l'elenco dei blocchi disponibili per trovare quel particolare blocco di cui ho bisogno. Uso quasi sempre i comandi della barra della tastiera per inserire i blocchi. Nei casi in cui non lo faccio, non è un'esperienza utente ideale e le nuove categorie non aiutano molto.

Seleziona Blocco genitore

Una delle esperienze più frustranti in Gutenberg è il tentativo di selezionare un blocco padre in uno scenario di blocco nidificato. Troppo spesso, gli utenti si sentono come se stessero facendo clic in giro a caso nella speranza di raggiungere quel punto debole in cui possono effettivamente navigare verso il blocco che devono modificare. È un esercizio di frustrazione nei momenti migliori.

Il team di Gutenberg ha fatto un passo, un piccolo passo , per alleviare questo dolore. Quando si passa il mouse sopra il pulsante "cambia tipo o stile di blocco" nella barra degli strumenti dell'editor, viene visualizzato un nuovo pulsante per selezionare il blocco padre.

Non sono sicuro che questo sia il modo giusto di gestire il problema. Mi piacerebbe vedere alcuni esperimenti con una sorta di pulsante freccia che appare senza passare il mouse. Per ora, sono soddisfatto che il team stia tentando di risolvere il problema e spero che le future iterazioni migliorino la navigazione all'interno dei blocchi nidificati.

Questa funzione non sembra funzionare quando è abilitata la modalità barra degli strumenti in alto. Per coloro che utilizzano questa modalità, il modo migliore per selezionare un blocco padre è tramite la navigazione breadcrumb nella parte inferiore dell'editor.

Controllo sperimentale di spaziatura/imbottitura

Gli autori del tema ora possono aggiungere il supporto per un controllo di riempimento sperimentale tramite add_theme_support( 'experimental-custom-spacing' ) . Quando è supportato, l'utente finale vedrà una nuova scheda Spaziatura sotto la barra laterale delle opzioni di blocco per il blocco Copertura, che dovrebbe essere disponibile per altri blocchi in futuro. Per impostazione predefinita, gli utenti possono controllare il riempimento per tutti e quattro i lati di un blocco con un unico valore. Possono anche "scollegare" il padding e controllare individualmente i valori superiore, inferiore, sinistro e destro.

Presumibilmente, il team di Gutenberg estenderà questa funzione di spaziatura per includere anche un controllo del margine. Sarebbe la mossa naturale e quella in cui spero che porti alla morte del blocco Spacer con cui gli utenti hanno dovuto convivere negli ultimi due anni.

Tuttavia, non sono convinto di consentire agli utenti finali di controllare il riempimento con valori espliciti. La modifica casuale dei valori di riempimento interromperà il ritmo verticale che molti autori di temi si prendono il tempo per calcolare meticolosamente. Quando si utilizzano i valori dei pixel (l'impostazione predefinita), gli utenti incontreranno sicuramente problemi con le dimensioni dello schermo di tablet e dispositivi mobili. In sostanza, creerà un completo pasticcio di spaziatura.

Non sono contrario all'idea. Voglio che sia fatto subito prima che arrivi su WordPress. Gli autori dei temi dovrebbero essere in grado di registrare classi con nome gestite tramite il foglio di stile. Questo risale all'idea di WordPress con un framework di progettazione. Crea un insieme di classi di utilità per la spaziatura (oh, ciao, Tailwind). Lascia che gli autori del tema definiscano la spaziatura in base al loro design. Consenti agli utenti di scegliere tra quelli. Quindi, fornisci un'opzione personalizzata per quei momenti in cui gli utenti vogliono prendere in mano la situazione. A quel punto, hanno preso la decisione esplicita di rompere con il flusso di progettazione scelto dall'autore del tema.

Colori di collegamento

Uno degli ostacoli più difficili che gli autori di temi hanno dovuto affrontare durante lo styling per l'editor di blocchi è capire cosa fare con i colori dei collegamenti quando l'utente cambia il colore di sfondo di un blocco. Gli utenti hanno da tempo il controllo del colore del testo in quello scenario. Tuttavia, i colori dei link potrebbero diventare rapidamente inaccessibili o semplicemente brutti. Gli autori di temi lungimiranti modellerebbero quei colori di collegamento in modo da ereditare il colore del testo, ma questa non è sempre la soluzione ideale.

È qui che entrano in gioco i colori dei collegamenti controllati dall'utente. Per aggiungere il supporto per i colori dei collegamenti personalizzati, gli autori del tema devono attivare la funzione tramite add_theme_support( 'experimental-link-color' ) . Questo aggiungerà un nuovo selettore di colore per i blocchi Paragrafo, Intestazione, Gruppo, Colonne e Media e testo.

Impossibile far funzionare questa funzione con la chiamata alla funzione di supporto del tema, ho dovuto scavare un po' nel codice per trovare il problema. Affinché gli autori del tema aggiungano il supporto per i colori dei collegamenti, devono anche definire i loro collegamenti predefiniti come mostrato nel seguente snippet di codice CSS:

 a { color: var( --wp--style--color--link, #000 ); }

WordPress imposterà automaticamente la --wp--style--color--link . Per ulteriore specificità, gli autori del tema possono anche scegliere come target .has-link-color a .