Gutenberg 12.1 corregge lo spostamento del layout dell'appender di blocchi, aggiunge visualizzazioni elenco modelli e migliora gli stili globali

Oggi Gutenberg 12.1 è arrivato nella directory dei plugin di WordPress. L'ultima versione è stata ricca di miglioramenti all'esperienza utente, inclusa una correzione per lo spostamento del layout dell'apper di blocchi, nuove funzionalità degli stili globali e una visualizzazione dell'elenco dei modelli migliorata. Gli autori dei temi hanno anche un nuovo flag per abilitare tutti gli strumenti relativi all'aspetto.

WordPress 5.9 doveva essere lanciato oggi, ma è stato spostato al 25 gennaio 2022. I contributori avevano bisogno di più tempo per perfezionare l'editor del sito e gli strumenti correlati in bundle insieme alla versione. Finora, stanno usando il tempo extra correggendo i bug e creando un'esperienza utente complessivamente migliore.

Niente più spostamento del layout

Se questo fosse stato l'unico cambiamento in Gutenberg 12.1, sarei stato l'utente più felice del mondo. Fortunatamente, ci sono altri oggetti utili, ma il mio più grande fastidio in tre anni di utilizzo dell'editor di blocchi è stato risolto.

L'appendice dei blocchi (quei piccoli pulsanti + ) nell'area del contenuto viene ora mostrato utilizzando il posizionamento fisso. Ciò significa che quando selezioni i blocchi, in particolare quelli annidati all'interno di altri, lo schermo non rimbalza più, sposta il layout o lascia spazi vuoti in una sezione altrimenti perfetta.

So parlando con altri che questo è stato un punto dolente quando si costruivano layout complessi in passato. Per alcuni, non avrebbero usato affatto l'editor di blocchi perché era così irritante. Se cadi in questo campo, vale la pena riprovare. Si tratta di un netto miglioramento nell'esperienza dell'utente.

Miglioramenti agli stili globali

Gli utenti possono ora definire sfumature personalizzate tramite la sezione della tavolozza dei colori nella barra laterale degli stili globali. Questi saranno disponibili in tutto il sito e non sono legati al tema.

La tavolozza mostra anche i colori a due tonalità nella stessa sezione del gradiente. Tuttavia, non è ancora disponibile un'opzione per la creazione di filtri per due tonalità personalizzati. È una sezione di sola lettura.

Il pannello degli stili globali divide anche le opzioni tipografiche tra testo ed elementi di collegamento, aprendo la porta ad altri elementi HTML in futuro.

Gli utenti probabilmente non dovrebbero cambiarlo per i collegamenti. Invece, dovrebbero generalmente corrispondere al testo circostante. Se in futuro avremo la decorazione del testo o opzioni simili, la separazione potrebbe avere più senso. Tuttavia, la modifica di impostazioni come la dimensione del carattere o l'altezza della linea sarebbe probabilmente dannosa per il design.

Modelli e viste delle parti del modello

Gutenberg 12.1 introduce una nuova visualizzazione dei modelli e dell'elenco delle parti del modello dall'editor del sito. L'interfaccia utente per questa funzione è saltata in giro nelle ultime versioni del plug-in. L'elenco è stato disponibile per mesi tramite il pannello scorrevole di sinistra nell'editor. Quindi, è stato rimosso del tutto in 11.9. È riapparso tra quella versione e la 12.0.

Il pannello è stato ora ridimensionato per includere tre collegamenti per Sito, Modelli e Parti modello. Il primo collegamento fa apparire l'editor del sito. Gli altri visualizzano tabelle di modelli esistenti.

Il passaggio da uno schermo all'altro sembra lento al momento. Tuttavia, questa è la versione 1.0 dell'editor del sito che vedranno gli utenti di WordPress di tutto il mondo. Probabilmente cambierà nel tempo. "L'attuale iterazione del design favorisce la semplicità e l'usabilità", ha scritto Riad Benguella nel post dell'annuncio. "In futuro potrebbero essere aggiunte iterazioni che implementano la navigazione lato client e la visualizzazione a mosaico."

Non sembra esserci un modo per aggiungere modelli personalizzati, come una categoria o un archivio dell'autore. Facendo clic sul pulsante "Aggiungi nuovo" vengono visualizzate le opzioni per una prima pagina e un modello di ricerca quando si utilizza il tema Twenty Twenty-Two.

Tuttavia, l'aggiunta di una nuova parte del modello è un processo molto più raffinato. Dopo aver fatto clic sul pulsante per crearne uno, agli utenti viene presentata una sovrapposizione e un modulo come mostrato nella schermata seguente:

Gli utenti possono assegnargli un nome personalizzato e scegliere tra tre aree consentite: generale, intestazione e piè di pagina. Dopo aver creato una nuova parte, gli utenti vengono indirizzati all'editor.

Quando si visualizza nuovamente l'elenco delle parti del modello, viene visualizzato l'utente che lo ha creato e dispone di un menu a discesa delle opzioni (pulsante con i puntini di sospensione). Attualmente, l'unica azione è eliminare la parte.

Mi piacerebbe vedere i modelli di primo livello ricevere lo stesso trattamento delle parti del modello durante la creazione di uno nuovo. Sebbene ci siano alcune lievi differenze tra loro, entrambi sono modelli alla fine della giornata. L'esperienza dell'utente trarrebbe vantaggio se i processi di creazione corrispondessero.

La creazione di modelli personalizzati al di fuori dell'elenco predefinito da questa schermata aiuterebbe anche i designer a creare temi visivamente dall'editor del sito.

Navigazione vuota di riserva

L'ultima versione ha introdotto un fallback per il blocco del menu di navigazione vuoto. Infine, se non viene trovato alcun menu, verrà visualizzato il blocco Elenco pagine. A seconda di quante pagine ha il sito di un utente, questo può sfuggire di mano rapidamente, come mostrato nella seguente schermata di Twenty Twenty-Two:

Gli sviluppatori di temi possono sovrascrivere questo fallback tramite l'hook del filtro block_core_navigation_render_fallback restituendo un valore false o un insieme di blocchi figlio validi per il genitore Navigation. Autori di temi, li invito a fare un uso generoso di questo filtro hook.

Elementi a tema blocco degni di nota

Per gli sviluppatori di temi a blocchi, le cartelle relative ai modelli standard sono state rinominate. I vecchi nomi continueranno a funzionare, ma gli autori dovrebbero aggiornare quanto segue nei loro temi:

• /block-templates rinominato in /templates
• /block-template-parts rinominato in /parts

Questa modifica ripulisce la directory dei temi di primo livello, ma crea anche un percorso verso una maggiore standardizzazione in futuro. C'è già un ticket aperto per /patterns ed è possibile una cartella /styles .

Gutenberg 12.1 introduce anche un flag di appearanceTools per theme.json , consentendo agli autori del tema di abilitare il supporto per tutte le opzioni di bordo, colore, spaziatura e tipografia attuali e future. L'ho trattato in modo più dettagliato nel post di Gutenberg 12.0, che aveva erroneamente contrassegnato la funzione come in bundle con l'ultima versione.