Anche se dopo tanti anni non capisco perché ci debba essere una release ad Agosto, vediamo cosa c’è di nuovo nella versione 7.1 di WordPress. L’articolo non è esaustivo di tutte le funzionalità, mi concentro su quelle modifiche che secondo me valgono davvero la pena di essere conosciute, specialmente dai web designer. Iniziamo.
Modifiche di stile per singolo device
Partiamo da quello che ritengo un grande aggiornamento per i web designer e gli utenti, che permette finalmente di impostare modifiche di stile ai blocchi in base al device.
Era una funzionalità che aspettavamo da anni e che finalmente rende Gutenberg un editor davvero adatto a tutti e limita l’installazione di blocchi aggiuntivi o soluzioni di CSS custom.
L’opzione si trova sotto l’icona del device (etichetta “Visualizza”) nella toolbar superiore dell’editor, alla voce Stili Responsive.
Una volta attivata, si seleziona il device — ad esempio Dispositivi mobili — e si personalizza il blocco con modifiche tipografiche, di colore, di rientri e di bordi. Diciamo addio all’intrinsic design.
Stili di stato sui pulsanti
Altra funzionalità che avrebbe dovuto essere presente da tempo: è possibile personalizzare gli stati dei pulsanti direttamente dall’editor. Il caso più comune è lo stato hover, ossia il comportamento del pulsante al passaggio del mouse. Finora queste modifiche si potevano fare solo intervenendo sul codice del tema o aggiungendo regole CSS personalizzate; adesso sono applidabili direttamente dall’editor di WordPress.
L’opzione si trova cliccando sui tre puntini verticali vicino alla scritta “Pulsante” (etichetta: Stato: [nome dello stato]).
Barra di amministrazione sempre visibile
Fino alla versione 7.0.4 la barra di amministrazione poteva essere attivata durante la modifica di post e pagine solo tramite l’opzione Modalità schermo intero, che andava a mostrare in toto l’interfaccia di amministrazione.
Adesso è sempre visibile durante l’editazione dei contenuti per poter accedere velocemente alle diverse funzionalità attive a seconda della vostra installazione di WordPress.
È stata rimossa, grazie al cielo, l’icona del sito che permetteva di tornare all’area amministrativa direttamente dall’editor: al suo posto trovate ora una freccia per tornare all’elenco delle pagine o degli articoli.
La barra di amministrazione è inoltre visibile nell’editor dei temi FSE (Full Site Editing), mentre rimane nascosta nella schermata Personalizza dei temi classici (meno male).
La schermata “Identità del sito” per i temi FSE
Per i temi FSE è stata aggiunta la schermata Identità del sito. In questa schermata è possibile gestire alcuni aspetti del sito. In pareticolare:
- Titolo del sito
- Motto del sito
- Logo del sito
- Icona del sito
Sono le stesse opzioni che trovate nei temi classici sotto Personalizza → Denominazione del sito e ad alcune voci che si trovavano sotto Impostazioni → Generali.
Nuovo blocco Schede
Il blocco Schede consente di organizzare i contenuti in tab (le schede, appunto). La navigazione a schede resta orizzontale anche su mobile, quindi consiglio di usare titoli brevi per evitare che vadano a capo, cosa che renderebbe la lettura più difficoltosa, sopratutto nella versione smartphone.
Al blocco è inoltre possibile aggiungere un attributo aria-label per descrivere la tab list, utile per l’accessibilità dei contenuti letti dagli screen reader. Trovate questa opzione nel sotto-blocco Elenco delle schede → Impostazioni
Blocco Immagine: piccoli, ma utili, miglioramenti
Ora è possibile contrassegnare un’immagine come puramente decorativa, quando non si vuole che il testo alternativo venga letto dalle tecnologie assistive, invece di lasciare vuoto il campo del testo alternativo.
È stato inoltre migliorato lo strumento di ritaglio, che adesso apre una modale dedicata per le modifiche all’immagine.
Il blocco HTML personalizzato si fa “ibrido”
Questo è il blocco che richiede qualche spiegazione in più per capire il miglioramento di questa versione.
Il blocco HTML Personalizzato nasce per permettere ai web designer di creare contenuti custom difficili da replicare con l’editor di Gutenberg, evitando l’installazione di componenti aggiuntivi. Questi si è già evoluto nella versione 7.0 permettendo di gestire in modo separato HTML, CSS e Javascript. I più arditi lo hanno usato per modifiche CSS custom sulle singole pagine.
Fino a WordPress 7.0, chi costruiva layout custom doveva gestire le modifiche via HTMl e quindi avere competenze in merito.
Ora dentro un blocco HTML personalizzato, si può inserire la struttura personalizzata (tag, classi, stili inline, layout) e allo stesso tempo inserire delle “isole” di codice dei blocchi nativi (un titolo, un paragrafo, un pulsante) che l’utente può modificare dall’editor visuale, senza toccare una riga di codice.
Quei blocchi possono essere editati nel contenuto, ma non spostati o rimossi e non se ne possono aggiungere altri dall’editor visuale. In pratica si ha la libertà di aggiornare i testi, ma non quella di smontare il design costruito.
Qual è vantaggio pratico: si può progettare una sezione, una hero, una card promo, un banner, con markup su misura, e consegnarla al cliente come un “modulo” semi-editabile: può aggiornare titolo, testo e call-to-action quando vuole, senza pericolo che “rompa” la struttura.
Un secondo caso d’uso (inutile ignorare l’elefante nella stanza) e che questa funzione si sposa bene con i flussi di lavoro basati sull’AI. Con un prompt mirato si genera rapidamente il layout semi-modificabile.
Secondo me questa nuova funzionalità resta uno strumento per chi costruisce template e layout riutilizzabili, ma poco fruibile dall’utente con competenze di base.
Stili globali (solo temi FSE)
Nuova funzionalità di cui non mi sembra ci sia stato un gran parlare è la possibilità di modificare lo stile di un blocco (pulsante, paragrafo, titolo, ecc…) e salvare le modifiche, o parti di esse, in modo globale. Poco chiaro? Facciamo un esempio.
Inserisco un blocco Pulsante e lo personalizzo nell’aspetto rispetto a quanto proposto di default dal tema. Ad esempio scelgo di modificare l’arrotondamento degli angoli e cambiare il colore di sfondo
Nelle impostazioni del blocco Pulsante sotto la voce Avanzate trovate una nuova opzione che è Stili → Applica a tutti
Facendo clic su questa opzione compare una modale che chiede quali delle modifiche vuoi apportare a tutti i blocchi di tipo Pulsante (il nostro esempio).
Una volta applicate le modifiche, all’inserimento di un nuovo blocco Pulsante gli stili modificati saranno già applicati.
Importante! Queste modifiche vengono applicate in modo globale a tutto il sito per cui se cambi l’aspetto di un pulsante e decidi di salvarlo come stile globale, TUTTI i pulsanti del tuo sito saranno modificati.
Come hai letto nel titolo al momento questa funzionalità è presente solo nei temi Full Site Editing (FSE).
Conclusioni
Anche questa volta l’elenco non è esaustivo: ci sono diverse funzionalità che ho scelto di non trattare perché di impatto limitato nel lavoro quotidiano (ad esempio il blocco Playlist). Nel complesso la 7.1 mi sembra una versione di consolidamento più che di rivoluzione: gli stili responsive per blocco sono probabilmente le novità che userò di più.
Continuo a pensare che alcune funzioni, come la gestione degli stati dei pulsanti, avrebbero potuto essere pensate meglio dal punto di vista dell’esperienza d’uso, ma va bene così: è comunque un passo avanti rispetto a prima.
