Gutenberg 12.9 aggiunge l'interfaccia utente di blocco dei blocchi, la registrazione automatica del modello e le esportazioni di temi completi

Gutenberg 12.9 è arrivato oggi nella directory dei plugin di WordPress.org ed è una versione robusta, piena di qualcosa per tutti. Anche dopo aver armeggiato con le nuove funzionalità negli ultimi giorni, devo ancora esplorare tutto quanto vorrei. Data la pratica limitazione di tempo, non potrò approfondire tutto in questo post, ma cercherò di farvi conoscere alcuni dei punti salienti.

Di seguito sono riportati alcuni elementi selezionati in cui non sono stato in grado di approfondire, ma incoraggio comunque i lettori a dare un'occhiata:

• Il nome del colore selezionato ora appare nel selettore colore.
• Gli utenti possono ora scegliere da un elenco suggerito di formati di data o aggiungerne uno personalizzato per il blocco Data di pubblicazione. Questi sono internazionalizzati, quindi i suggerimenti saranno specifici della locale.
• I temi possono aggiungere blocchi a un blocco contenitore Nessun risultato quando una query non restituisce alcun post.
• Il blocco Tag Cloud ora ha controlli di dimensione minima e massima.
• Il blocco Separatore supporta il controllo del colore più recente, consentendo agli utenti di selezionare i colori trasparenti.

Blocca blocco dell'interfaccia utente

Gutenberg 12.9 introduce una nuova interfaccia utente per il blocco dei blocchi. Sotto il menu a discesa "altre opzioni" nella barra degli strumenti, gli utenti possono selezionare l'opzione di blocco, che farà apparire una schermata con due opzioni:

• Disabilita movimento: disabilita lo spostamento del blocco stesso. Tuttavia, i blocchi fratelli possono essere spostati attorno ad esso.
• Impedisci rimozione: impedisce l'eliminazione del blocco.

Andrei Draganescu ha notato quanto segue nel post dell'annuncio 12.9:

Quando un blocco è bloccato, gli utenti non sono in grado di spostarlo, rimuoverlo o entrambi. Ciò è particolarmente utile con blocchi a livello di sito come Post Content che molti temi vorranno bloccare.

Tuttavia, tale definizione non spiega interamente il blocco a livello di blocco. C'è un avvertimento: questa nuova interfaccia utente consegna agli utenti finali la chiave della serratura. Tecnicamente, avevano già questa capacità tramite l'editor di codice, ma ora è disponibile tramite l'interfaccia.

Dal punto di vista dello sviluppatore del tema, il blocco a livello di blocco richiede semplicemente passaggi aggiuntivi dell'utente per spostare e/o rimuovere i blocchi. Non è una serratura “forzata” o “permanente”. È una funzionalità gradita, ma i temi dovrebbero comprendere i suoi limiti e che questa nuova interfaccia utente offre più potenza agli utenti, non meno.

Aggiornamento: c'è un hook per i costruttori di siti per sovrascriverlo. Vedi di più nei commenti.

Block Gap Supporto per le gallerie... una specie di

Una delle funzionalità di cui ero più entusiasta di questa versione è stata l'aggiunta del supporto per la spaziatura tra le immagini della Galleria. Gli autori di temi si sono affidati a stili di blocco specializzati per offrire agli utenti delle scelte, generalmente limitate alle opzioni predefinite e "nessuna lacuna". Quest'ultimo eliminerebbe qualsiasi spazio tra le immagini.

Sfortunatamente, la funzione è interrotta in 12.9 quando gli utenti impostano manualmente un divario. Controllando il codice sorgente, emette un Array invece di un CSS valido. Sul front-end viene visualizzato il seguente avviso:

 Warning: preg_match() expects parameter 2 to be string, array given in ...wp-content/plugins/gutenberg/build/block-library/blocks/gallery.php on line 51

Sono sicuro che questo verrà corretto in 12.9.1. Fino ad allora, suggerisco di non utilizzare il controllo "Spaziatura blocchi".

Avviso dell'autore del tema: questa è una modifica importante per i temi che hanno come target --gallery-block--gutter-size per controllare il divario predefinito per le gallerie. Questa proprietà personalizzata CSS precedentemente affidabile non esiste più nel codice. Non è chiaro il motivo per cui questa variabile è stata rimossa del tutto e non è stata menzionata nel ticket.

Una nuova --wp--style--unstable-gallery-gap sembra fare un lavoro simile. Tuttavia, come suggerisce la parte unstable del suo nome, potrebbe non essere sempre presente. È anche definito nella classe .wp-container-* invece che nella raccolta stessa. Devo ancora fare abbastanza test CSS per capire come sovrascriverlo per il divario predefinito. Se qualcuno ha una soluzione, si prega di postarla nei commenti per gli altri.

Figli compressi per impostazione predefinita nella visualizzazione elenco

Ho spesso evitato la visualizzazione elenco nell'editor per la maggior parte degli scenari del mondo reale, almeno per le pagine con molti blocchi nidificati. Con ogni livello aperto per impostazione predefinita, era un po' un incubo navigare e individuare un blocco specifico. È stato più facile correre il rischio facendo clic nella tela dei contenuti.

Tuttavia, l'ultima versione di Gutenberg potrebbe semplicemente cambiare il mio utilizzo. La versione 12.9 comprime tutti i blocchi figlio per impostazione predefinita.

Registrazione automatica del modello per i temi

Gli autori del tema possono ora lasciare che Gutenberg gestisca la registrazione del modello per loro. Devono solo seguire alcune regole:

• Aggiungi schemi di blocco all'interno di file PHP in una cartella /patterns .
• Aggiungi i dati del modello all'intestazione del file.
• Aggiungi contenuto del modello, ovviamente.

I singoli file di pattern dovrebbero avere il seguente aspetto:

 <?php /** * Title: A Pattern Title * Slug: namespace/slug * Description: A human-friendly description. * Viewport Width: 1024 * Categories: comma, separated, values * Keywords: comma, separated, values * Block Types: comma, separated, values * Inserter: yes|no */ ?> <!-- some-block-content /-->

Sono obbligatori solo i campi di intestazione Title e Slug . Ciascuna opzione corrisponde a un argomento della funzione register_block_pattern() .

Gli autori di temi che desiderano utilizzare questa funzionalità ora ma forniscono la compatibilità con le versioni precedenti di WordPress 5.9 possono verificare l'esistenza della funzione gutenberg_register_theme_block_patterns() . Questo è il nome della funzione per il momento, almeno.

Questa modifica si basa ulteriormente sugli standard esistenti per i temi a blocchi. Gli autori ora hanno linee guida chiare sulla registrazione della maggior parte delle funzionalità tramite file e cartelle standard:

• /parts – Blocca le parti del modello
• /patterns – Blocca i modelli
• /styles – Variazioni di stile globali
• /templates – Modelli di blocco
• theme.json – Impostazioni e stili globali

A parte gli stili e le variazioni dei blocchi personalizzati (da non confondere con le variazioni di stile globali), quasi tutto è coperto. Questo set a tutto tondo abbassa la barriera all'ingresso per i futuri autori di temi. Anche gli sviluppatori esperti dovrebbero apprezzare la semplicità di come nominare le cose e dove metterle. È una cosa in meno di cui preoccuparsi. Continuerà inoltre a semplificare il sistema di revisione dei temi di WordPress.org.

Esportazione di temi e creazione di modelli

Parlando di riduzione delle barriere, i creatori ora possono creare un intero tema dall'editor del sito. Bene, supponendo che inizino da un tema di blocco esistente.

Gutenberg 12.9 introduce due caratteristiche vitali nel processo di costruzione del sito. Il primo consente agli utenti di esportare una copia del proprio tema attivo direttamente dall'editor:

Il file ZIP scaricato da questa esportazione è un tema perfettamente funzionante. Include tutte le personalizzazioni dell'utente insieme a ogni file già esistente nell'originale.

Ci sono ancora alcune cose che non sono ancora possibili dall'editor e queste dovranno essere regolate manualmente prima del rilascio pubblico. Il nome del tema e altri dati in style.css rimarranno gli stessi del tema originale. Inoltre, non esiste un metodo per acquisire uno screenshot della versione personalizzata e raggrupparlo nello ZIP.

Questo è un balzo in avanti per la democratizzazione del design, ma dovranno essere presi in considerazione altri flussi. Gli utenti dovrebbero essere in grado di esportare come tema figlio con solo le loro personalizzazioni o anche come file *.json (variazione di stile globale).

Ma c'è un caso d'uso più immediato e pratico. Gli utenti possono scaricare i loro temi personalizzati e caricarli su un altro sito.

Il secondo aggiornamento cruciale per lo sviluppo all'interno dell'editor del sito è il supporto per più modelli. Gli utenti possono ora creare quanto segue dal pannello di gestione dei modelli in aggiunta a quelli esistenti;

• Autore
• Categoria
• Data
• Etichetta
• Tassonomia

I nuovi modelli sono aggiunte gradite, ma la funzione di creazione del modello ha ancora dei limiti. Non c'è modo di creare variazioni su quei modelli tramite l'interfaccia utente, come category-wordpress , taxonomy-genre o le dozzine di altre possibilità. Tuttavia, accadrà un giorno.