WordPress 7.0 – le novità di Gutenberg

Ogni aggiornamento di WordPress porta con sé grandi aspettative, ma cosa cambia davvero per chi ci lavora ogni giorno? In questo post ho racchiuso le novità che considero più utili e tangibili da conoscere. Scopriamo insieme i nuovi strumenti della versione 7.0 aka Armstrong.

Tralascio volutamente l’integrazione con l’AI e la “modernizzazione” della dashboard (ne potete leggere in ogni dove) concentrandomi sulle novità di Gutenberg, che sono quelle che riguardano da vicino il nostro modo di lavorare.

Nota introduttiva: quando parlo di FSE in questo articolo mi riferisco all’aver testato le funzionalità con il tema Twenty-Twentyfive.


Blocco “Titolo”

Sono state apportate delle modifiche al blocco Titolo, quello che permette di aggiungere i tag H1, H2, H3, H4, H5, H6, conosciuti anche come heading.

Quando aggiungi un blocco Titolo, sia dalla libreria dei blocchi, che dall’inserimento veloce, appaiono come blocchi separati, permettendoti di scegliere più rapidamente quale utilizzare.

Nella realtà il blocco è sempre lo stesso. È solo una scorciatoia visiva.

È stata rimossa dalla Toolbar del blocco la possibilità di modificare il valore del titolo, ed è stata spostata tra le impostazioni laterali del blocco


Blocco “Immagine”

Sono state modificate le impostazioni laterali del blocco Immagine. Adesso è presente la scheda “Contenuto”, dalla quale è possibile sostituire l’immagine caricata e aggiungere il testo alternativo.

È stata aggiunta l’opzione “focus” all’immagine quando viene ridimensionata tramite i cursori.

Se non lo sai, quando ridimensioni l’immagine con i cursori si abilità la possibilità di usare l’opzione Scala per riempire lo spazio in modo uniforme secondo due parametri Copertina oppure Contieni (se hai conoscenze CSS: viene aggiunta la proprietà object-fit).

Adesso oltre a scegliere la modalità di visualizzazione puoi impostare il punto focale dell’immagine.


Blocco Galleria

È stata aggiunta la navigazione fra le immagini di una galleria quando si visualizzano nella Lightbox. Questo permette di evitare l’installazione di plugin aggiuntivi se le necessità sono minime. Approvato.

Per utilizzare la funzionalità è sufficiente attivare l’opzione Ingrandisci facendo clic dall’icona Link nella Toolbar del blocco Galleria. Questa impostazione verrà ereditata da tutte le immagini.

Nella pagina visibile al pubblico, facendo clic su una delle immagini, si attiverà l’effetto Lightbox (l’ingrandimento delle immagini) e la navigazione fra le immagini stesse.

Infine fra le Opzioni laterali del blocco puoi decidere come gestire la navigazione fra le immagini selezionando fra:

  • Icona
  • Testo
  • Entrambi

Blocco Icone

Qui secondo me è stata un’opportunità sprecata. La mancanza di inserire nativamente le icone nel layout l’abbiamo sempre sofferta. Abbiamo trovato escamotage o installato plugin di terze parti per averle. Finalmente le icone sono arrivate, ma… che delusione!

Mi aspettavo di trovare la libreria Dashicon completa, e invece poche icone e poco sfruttabili in un layout. Non è possibile al momento caricare icone personali o inserire codice SVG personalizzato.

In compenso puoi gestire il colore dell’icona, la dimensione, lo sfondo e l’arrotondamento degli angoli, quindi hai un buon controllo sul risultato finale.


Opzione Nascondi

Dalla versione 6.9 WordPress ha introdotto tra le opzioni della Toolbar del blocco > Opzioni (tre puntini verticali) la possibilità di nascondere il blocco stesso

Nella versione 7.0 ha migliorato questa opzione, permettendo di scegliere su quali device nascondere il blocco. Facendo clic sulla voce Nascondi, viene aperta una finestra modale con le opzioni di visualizzazione dedicata.

Questo permette un controllo più preciso della visibilità del blocco e per chi sceglie di creare contenuto solo con Gutenberg può utilizzarlo per gestire meglio il layout sui vari device.

Trovo l’opzione interessante. Quello che non mi piace è che non sia stata aggiunta nelle impostazioni laterali del blocco, dove sarebbe più visibile e facilmente utilizzabile.


Revisione degli articoli

Fino alla versione 6.9, quando dovevi confrontare due revisioni per scegliere quale utilizzare, vedevi il codice dei blocchi, evidenziato nelle sue modifiche, ma poco intuitivo da comprendere.

Nella versione 7.0 le revisioni diventano visuali, rendendo più semplice decidere quale versione usare. Puoi vedere il video della nuova funzionalità nell’articolo dedicato alle novità della versione per capire meglio di cosa parlo.

Nota: al momento l’ho visto funzionare solo con i temi FSE (Full Site Editing). Io che utilizzo un tema classico continuo ad avere la visualizzazione delle revisioni in modalità codice.


I Pattern

Ammetto che capire la nuova funzionalità dei pattern ha richiesto più di un tentativo e, nota doverosa, funziona al meglio con il FSE e con i pattern realizzati da WordPress, anche se spero che in futuro possa esprimere il suo pieno potenziale anche con i temi classici.

Partiamo da come dovrebbero funzionare i nuovi pattern.

Quando inserisci il pattern nel tuo contenuto, l’icona dell’insieme dei blocchi indica che le modifiche estetiche si propagano all’interno del pattern. Se hai competenze di CSS è come quando assegni le proprietà al div contenitore e si propagano agli item contenuti nel div.

Facendo clic sull’icona della goccia nella Toolbar del blocco (etichetta dell’icona: Genera stili casuali), passi velocemente da uno stile a un altro, se il pattern prevede una galleria di stili.

Se vuoi apportare le tue modifiche o se hai creato tu il pattern e non contiene variazioni di stile, evidenziando il pattern stesso si aprono le opzioni del blocco dal quale puoi gestire le modifiche di stile che vengono applicati a tutti gli elementi dello stesso tipo.

Se invece vuoi modificare un singolo elemento del pattern, fai click su Modifica pattern e potrai gestire in modo indipendente le impostazioni

Nel momento in cui attivo il tema classico, viene a mancare la tab Stili e posso gestire il pattern in modo classico, un elemento alla volta, senza la propagazione delle modifiche.

Nel complesso trovo questa funzionalità interessante. Se sfruttata bene permette di velocizzare il lavoro di creazione dei contenuti. Non è possibile usare questa funzionalità nei Pattern Sincronizzati e di conseguenza nei Pattern Sovrascrivibili.


Custom CSS

E infine la funzionalità che più apprezzo: CSS aggiuntivo nel singolo blocco.

Questo permette personalizzazioni CSS sul singolo blocco senza bisogno di creare una classe e poi valorizzare la classe nel CSS Aggiuntivo del Personalizza. Comodo per tutte quelle modifiche uniche e sporadiche, che vengono caricate nel codice della pagina solo dove serve.

Cosa succede nel codice del front-end quando usiamo il custom CSS? WordPress aggiunge una classe che viene richiamata nel tag <style> nell’ <head> della pagina.

Conclusioni

So che l’articolo non è esaustivo sulle novità, ma ad alcune cose come il menu overlay nei temi FSE preferisco dedicare degli articoli specifici.

Come sempre qualcosa mi piace, qualcosa potrebbe essere migliore e di qualcos’altro non ne sentivo il bisogno. Per chi è abituato a usare Gutenberg in un certo modo, troverà sicuramente delle difficoltà a cambiare modalità operativa, ma va bene, questo tiene la mente presente e vigile.

Questo articolo ti è stato utile? Condividilo!

Piaciuto questo articolo? Scrivo anche su Substack articoli meno tecnici riguardo il mio lavoro da web designer, tips su WordPress e plugin che (forse) non conosci.