Le novità di WordPress 6.4: block hook, workflow migliorato, nuovi strumenti di progettazione, un nuovo tema predefinito e molto altro

Il rilascio di WordPress 6.4 è previsto per il 7 novembre ed è il momento per noi di esplorare le caratteristiche e i miglioramenti più interessanti che verranno apportati con la nuova versione di WordPress.

Le novità più degne di nota riguardano i block hook, una migliore organizzazione dei pattern, una palette di comandi ridisegnata e migliorata, modifiche alle pagine degli allegati, un effetto lightbox sulle immagini e diversi miglioramenti al workflow di scrittura.

Il caricamento dei template è migliorato, le strategie di script loading sono state perfezionate e miglioramenti alle prestazioni renderanno i siti WordPress più veloci, mentre alcuni miglioramenti della Vista Elenco e diversi aggiornamenti dell’interfaccia del pannello di amministrazione lo renderanno più usabile e accessibile.

WordPress 6.4 porta con sé anche un nuovo tema predefinito con tantissimi pattern e template che semplificheranno il lavoro di editing.

È un sacco di roba, vero? Quindi non perdiamo altro tempo e scopriamo subito le novità di WordPress 6.4.

Block hook

I block hook (precedentemente chiamati blocchi ad inserimento automatico) consentono ai plugin di interagire automaticamente con l’editor di Gutenberg.

Più precisamente, grazie ai block hook, un blocco può essere collocato automaticamente in una posizione specifica quando un altro blocco viene aggiunto al contenuto.

Due principi guidano il funzionamento dei block hook:

• L’utente non deve essere invitato a inserire manualmente il blocco nell’editor e l’inserimento del blocco nel front-end deve avvenire immediatamente dopo l’attivazione del plugin che fornisce il blocco hook. La disattivazione del plugin dovrebbe rimuovere automaticamente il blocco.
• Il blocco deve essere visibile nell’editor e l’utente deve poter controllare l’inserimento automatico.

Per tenere conto di entrambi i principi e preservare le informazioni contenute nel codice, i block hook funzionano solo nei template e nelle parti di template non modificati e nei pattern forniti dai temi, copiati dalla Pattern Directory o registrati con la funzione register_block_pattern. Non funzionano nei contenuti dei post, nei template e nelle parti di template modificati e nei pattern generati dagli utenti.

Inoltre, la nota di sviluppo avverte che:

a partire da WordPress 6.4, non è possibile inserire automaticamente blocchi che hanno una funzione di salvataggio, altrimenti si verificheranno errori di convalida dei blocchi. Questo significa che i block hook funzionano con i blocchi dinamici e non con quelli statici.

Cliccate qui per saperne di più sui blocchi statici e dinamici.

È possibile implementare i block hook in due modi: utilizzando il file block.json o il nuovo filtro hooked_block_types.

Usare i block hook tramite block.json

Il file block.json offre un modo semplice e veloce per agganciare un blocco di terze parti, ma non offre una grande flessibilità: un blocco inserito automaticamente tramite block.json verrà agganciato a tutte le istanze della destinazione in modo incondizionato.

Si possono aggiungere block hook utilizzando la nuova proprietà blockHooks, che accetta un oggetto di coppie chiave/valore dove la chiave è il nome del blocco che si vuole agganciare e il valore specifica la sua posizione rispetto al blocco di destinazione.

È possibile impostare una delle seguenti posizioni:

• before, prima del blocco di destinazione
• after, dopo il blocco di destinazione
• firstChild del blocco contenitore di destinazione
• lastChild del blocco contenitore di destinazione

Ad esempio, si può agganciare un blocco a ogni blocco Spacer usando blockHooks in questo modo:

{
  blockHooks: {
    'core/spacer': 'after'
  }
}

Quando si utilizza firstChild o lastChild nel block.json, nel Block Inspector un nuovo pannello Plugins elenca i blocchi destinati all’inserimento automatico, con degli interruttori che consentono di attivare o disattivare l’inserimento del blocco automatico.

Usare i block hook utilizzando hooked_block_types

Un modo più flessibile per agganciare i blocchi a un target è quello di utilizzare il nuovo filtro hooked_block_types. Questo permette di agganciare i blocchi senza condizioni, proprio come il metodo block.json, oppure in base a una condizione, ad esempio agganciando un blocco a un target in base al template, alla parte del template o al pattern in cui si trova.

La funzione di callback di hooked_block_types accetta quattro parametri:

• $hooked_blocks – Un array di blocchi agganciati.
• $position – Può essere before, after, first_child, o last_child.
• $anchor_block – Il nome del blocco di ancoraggio.
• $context – Il template di blocco, la parte di template o il pattern a cui appartiene il blocco di ancoraggio.

Per ulteriori approfondimenti tecnici sui block hook, si legga la nota di sviluppo.

Miglioramenti al sistema dei pattern

I block pattern sono un efficace strumento di progettazione che può essere utilizzato nei contenuti o nei template per creare facilmente strutture complesse di blocchi. Potete utilizzare i pattern forniti dal blocco del tema o aggiungere altri pattern copiandoli dalla directory dei pattern.

È anche possibile creare i propri pattern da zero nell’interfaccia dell’editor di siti e post. E se siete pratici di programmazione, potete aggiungere i modelli al vostro tema attuale o al vostro child theme con un file .php. Al giorno d’oggi i pattern sono così importanti in WordPress che abbiamo pubblicato una guida approfondita su tutto ciò che riguarda i block pattern.

Detto questo, scopriamo quali sono le novità del sistema di pattern con WordPress 6.4.

Innanzitutto, le categorie di pattern. Nella versione precedente di WordPress, quando si creava un nuovo modello, si poteva impostare solo il nome e il tipo di pattern, sincronizzato o non sincronizzato.

A partire da WordPress 6.4, è anche possibile aggiungere una categoria per il proprio pattern in modo da identificarlo più facilmente nell’editor del sito e dei post.

È anche possibile cambiare le categorie quando si modifica il pattern.

Inoltre, la scheda Pattern sincronizzati del block inserter è stata rimossa e ora potete accedere a tutti i vostri pattern dalla stessa scheda Pattern.

È anche più facile importare o esportare i pattern come JSON dall’editor del sito.

Altre modifiche migliorano la compatibilità dei modelli con i temi Classic e aprono la strada a future implementazioni.

Twenty Twenty-Four

Twenty Twenty-Four è il nuovo tema predefinito di WordPress che arriva con WordPress 6.4. Si tratta di un tema WordPress multifunzionale ma minimal, pensato per tre casi d’uso principali: piccoli imprenditori, fotografi e artisti, scrittori e blogger.

Twenty Twenty-Four non aggiunge funzionalità al sito web. Si tratta piuttosto di una raccolta di template e pattern che, combinati insieme, permettono di creare un’ampia varietà di siti web.

Inoltre, fornisce un sacco di contenuti predefiniti con tonnellate di esempi reali di strutture di pagine che si possono modificare e personalizzare in base alle proprie esigenze.

Abbiamo un articolo completo sul nuovo tema Twenty Twenty-Four. Dategli un’occhiata per avere una visione più approfondita.

Nuovi strumenti e funzioni di design

Con WordPress 6.4 sono stati introdotti diversi strumenti e funzioni di design. Le più interessanti sono:

Controlli del colore per il blocco Contenuto

Il blocco Contenuto è figlio del blocco Loop di query ed è particolarmente utile quando si ha bisogno di personalizzare l’aspetto del contenuto in un loop di query.

È disponibile nell’editor dei post quando si modifica un loop di query e nell’editor del sito quando si sta creando o modificando un modello.

Con WordPress 6.4, il blocco Contenuto è stato migliorato e ora supporta i colori per il testo, lo sfondo e i link.

Supporto del blocco immagine di sfondo

Con WordPress 6.4 è stato aggiunto un nuovo supporto per il blocco immagine di sfondo, con il blocco Gruppo abilitato per impostazione predefinita.

Quando un tema utilizza la funzione appearanceTools nel file theme.json, il pannello Sfondo visualizza il controllo dell’immagine di sfondo corrispondente, che mostra anche un’anteprima dell’immagine di sfondo.

L’impostazione di un’immagine di sfondo aggiunge la proprietà background-image all’elemento div del blocco insieme a una dichiarazione background-size: cover che assicura che l’immagine copra il blocco del gruppo.

Ci sono due modi per aggiungere il supporto alle immagini di sfondo ai temi. Il primo modo, il più semplice, è quello di optare per la proprietà appearanceTools. Questo permette di utilizzare diversi strumenti di progettazione, tra cui le immagini di sfondo.

Se avete bisogno di un controllo più granulare sugli strumenti di progettazione, potete utilizzare la proprietà backgroundImage nel theme.json in questo modo:

{
  "settings": {
    "background": {
      "backgroundImage": true
    }
  }
}

Effetto Lightbox sulle immagini

Un nuovo toggle Espandi al clic nel pannello delle impostazioni delle immagini del blocco permette di attivare/disattivare l’effetto lightbox sulle immagini. Questa è la prima iterazione di questa funzionalità, che dovrebbe essere ulteriormente migliorata con le prossime versioni.

L’effetto lightbox funziona anche con i filtri duotone, ma è poco chiaro quando si tratta di gallerie di immagini. Al momento in cui scriviamo, non è possibile abilitare l’effetto lightbox a livello di galleria ed è necessario abilitare la funzione sulle singole immagini.

Per implementare questa funzione nelle versioni precedenti di WordPress, era necessario utilizzare un plugin. Ora fa parte del core e questo significa meno codice di terze parti per il vostro sito WordPress.

Orientamento verticale del testo

Una nuova opzione di orientamento del testo permette ai temi di supportare il testo verticale. Se il vostro tema supporta questa funzione, potete abilitare il testo verticale da destra a sinistra nelle impostazioni di Tipografia.

Questa funzione è disabilitata per impostazione predefinita. Gli sviluppatori di temi possono aggiungere il supporto per l’orientamento del testo aggiungendo una nuova impostazione writingMode al loro theme.json:

{
  settings: {
    "typography": {
      "writingMode": true
    }
  }
}

Potete anche impostare un comportamento predefinito diverso per blocchi specifici. L’esempio seguente mostra come impostare l’orientamento di vertical-rl per tutti i blocchi di paragrafi:

{
  "styles": {
    "blocks": {
      "core/paragraph": {
        "typography": {
          "writingMode": "vertical-rl"
        }
      },
    }
  }
}

Miglioramenti per il blocco Note a piè di pagina

WordPress 6.4 introduce anche alcuni miglioramenti per il blocco Note a piè di pagina. Ora supporta il colore dei link, dello sfondo e del testo. Inoltre fornisce controlli per la tipografia, le dimensioni e i bordi.

I controlli del colore del testo e dei link sono espansi per impostazione predefinita. Gli altri controlli vengono chiusi al caricamento della pagina.

Pulsanti consentiti nel blocco di navigazione

I pulsanti sono ora presenti nell’elenco degli elementi interni consentiti del blocco di navigazione.

Quando si crea una nuova voce di menu, si può facilmente trasformarla in un pulsante dalla barra degli strumenti del blocco.

Miglioramenti all’interfaccia utente e al workflow

WordPress 6.4 introduce anche diversi miglioramenti all’interfaccia dell’editor, migliorando l’esperienza di modifica e snellendo il workflow. Le nostre modifiche preferite sono:

Palette dei comandi migliorata

Introdotta per la prima volta con WordPress 6.3, la Palette dei comandi permette di eseguire le azioni più utilizzate nell’interfaccia dell’editor del sito. WordPress 6.4 segna un nuovo passo avanti con un aggiornamento del design e alcuni miglioramenti aggiuntivi.

Le immagini qui sotto mostrano un esempio del diverso comportamento della palette dei comandi in WordPress 6.3 e 6.4.

Questa versione aggiunge anche alcuni nuovi comandi e migliora la coerenza e la denominazione. I nuovi comandi includono le trasformazioni dei blocchi e le opzioni di duplicazione, copia, rimozione e inserimento prima/dopo.

Una leggera modifica elimina i verbi dall’inizio di molti comandi. Questo migliora la ricercabilità e la chiarezza di alcuni comandi.

La nuova versione aggiunge anche i comandi di selezione dei blocchi. Per vederlo in azione, selezionate alcuni blocchi nell’Editor del sito, premete cmd + k (MacOS) o ctrl + k (Windows) e inserite una chiave di ricerca come “trasforma”. Dovreste vedere i seguenti suggerimenti:

Si possono eseguire diversi comandi su una selezione di blocchi. Ad esempio, potete raggruppare alcuni blocchi:

E potete anche disaggregarli.

Al momento in cui scriviamo, i comandi di selezione dei blocchi includono Aggiungi prima, Aggiungi dopo, Elimina, Duplica, Sposta in, Raggruppa, Disaggrega e Trasforma in.

Vista elenco migliorata

La Vista Elenco permette di sfogliare il contenuto della pagina e di eseguire diverse azioni su blocchi, gruppi e pattern. Queste azioni includono Copia, Duplica, Raggruppa e molto altro. È particolarmente utile con strutture complesse di blocchi annidati perché permette di espandere e chiudere gruppi di elementi e di eseguire diverse azioni su singoli blocchi, gruppi e pattern.

A partire da WordPress 6.4, si può anche rinominare un gruppo di blocchi, visualizzare l’anteprima delle immagini per i blocchi Galleria e Immagine, duplicare i blocchi utilizzando la scorciatoia cmd + shift + d (ctrl + shift + d su Windows).

Barre degli strumenti fissate

Quando si modificano blocchi con più figli, lavorare con i blocchi interni può essere complicato. Questo è particolarmente vero quando si tratta del blocco Navigazione.

Prima di WordPress 6.4, quando si selezionavano i blocchi interni, la barra degli strumenti del blocco si spostava in una posizione diversa sullo schermo. Questo comportamento portava a una scarsa user experience per blocchi come Navigazione ed Elenco.

Da WordPress 6.4, la barra degli strumenti del blocco figlio è legata alla posizione del genitore. In questo modo, quando si passa da un blocco all’altro, la barra degli strumenti rimane fissa nella stessa posizione del genitore.

La barra degli strumenti fissata è attualmente implementata nei blocchi Navigazione, Elenco e Citazione.

Miglioramenti delle prestazioni e altre modifiche per gli sviluppatori

Più di 100 aggiornamenti sulle prestazioni sono stati inseriti nel core, oltre a diverse modifiche per gli sviluppatori di temi. Vediamo alcuni cambiamenti interessanti.

Strategie di script loading

Le strategie di script loading sono state introdotte con WordPress 6.3 e forniscono un modo per evitare che uno script venga caricato in un ordine inaspettato nell’albero delle dipendenze degli script utilizzando gli attributi async e defer.

Con WordPress 6.4, le strategie di script loading sono state implementate per gli script del frontend nel core e nei temi in bundle.

Inoltre, a partire da WordPress 6.4, gli script “che vengono caricati con l’attributo defer sono stati spostati dal footer a head in modo che vengano scoperti prima durante il caricamento del documento e possano essere eseguiti prima una volta che il documento è stato caricato”.

Altre modifiche migliorano la sicurezza del core e la manutenibilità. Per una panoramica più tecnica sul caricamento degli script, consultate la nota di WP 6.4.

Modifiche alle pagine degli allegati

A partire da WordPress 6.4, le pagine degli allegati per le nuove installazioni di WordPress sono completamente disabilitate.

Prima di WordPress 6.4, WordPress creava automaticamente una pagina di allegato per ogni file multimediale caricato. Ma questo non aveva senso per molti siti web. Queste pagine vengono indicizzate dai motori di ricerca e potrebbero causare un’esperienza negativa per gli utenti.

A partire da WordPress 6.4, un’opzione del database wp_attachment_pages_enabled controlla il comportamento delle pagine degli allegati.

Questa opzione è impostata su 1 per i siti web esistenti (pagine degli allegati abilitate) e su 0 per i nuovi siti web (pagine degli allegati disabilitate) a partire da WordPress 6.4.

Gli amministratori del sito possono modificare questo valore tramite WP CLI:

wp option set wp_attachment_pages_enabled 0|1

Oppure visitando wp-admin/options.php sul sito web e modificando il valore dell’opzione wp_attachment_pages_enabled.

Componente ProgressBar

È stato introdotto un componente ProgressBar orizzontale di base per sostituire il componente Spinner precedentemente utilizzato per il caricamento dei contenuti nell’editor del sito.

Pattern di caricamento in WordPress 6.4

Prima di WordPress 6.4, la funzione _register_theme_block_patterns() veniva utilizzata per registrare tutti i pattern che il tema attivo poteva fornire nella sua directory patterns. A causa delle numerose operazioni di file richieste da questa funzione, il suo utilizzo portava a un problema di sovraccarico delle risorse, particolarmente evidente con i temi che forniscono tonnellate di pattern, come Twenty Twenty-Four.

Per risolvere questo problema, WordPress 6.4 ha introdotto una nuova funzione _wp_get_block_patterns() che memorizza i temi in una cache transitoria. Grazie alla nuova funzione, le richieste successive non richiedono la ricerca di file, con un conseguente significativo miglioramento delle prestazioni.

Gli sviluppatori possono aggirare la cache dei modelli abilitando la modalità di sviluppo per un tema, aggiornando il numero di versione del tema, cambiando tema o chiamando il metodo WP_Theme::delete_caches().

Meno controlli sull’esistenza dei file

In precedenza, alcune funzioni dell’API Themes eseguivano diversi controlli sull’esistenza di file all’interno di un child theme prima di tornare al parent theme.

Questo non era ottimale perché queste funzioni non tenevano conto del fatto che il tema corrente fosse o meno un child theme.

Per evitare inutili controlli sull’esistenza dei file, diverse funzioni e metodi dell’API Themes sono stati aggiornati e ora controllano se la directory del foglio di stile del tema corrente corrisponde alla directory del template prima di procedere con i controlli sull’esistenza dei file.

Questo dovrebbe portare a significativi miglioramenti delle prestazioni, soprattutto con i temi non child.

Ulteriori miglioramenti delle prestazioni riguardano le funzioni get_block_theme_folders() e the_header_image_tag().

Nuova funzione Opzioni

Le opzioni vengono caricate automaticamente per impostazione predefinita. Quando un sito web ha un numero eccessivo di opzioni, questo potrebbe causare un rallentamento dei tempi di risposta del server e la comparsa di bug. Per evitare questo comportamento, gli sviluppatori di plugin possono ora sfruttare diverse nuove funzioni che permettono di gestire le opzioni, migliorare le prestazioni e impostare diversi comportamenti predefiniti.

Due funzioni permettono di recuperare più opzioni con un’unica interrogazione al database.

prime_options() permette di recuperare più opzioni con un’unica query al database. I valori delle opzioni vengono memorizzati nella cache in modo che le successive chiamate a get_option() non richiedano ulteriori interrogazioni al database.

prime_options() accetta un array di nomi di opzioni e non restituisce alcun valore di opzione, poiché la sua unica responsabilità è quella di aggiornare la relativa cache.

prime_options_by_group() funziona in modo simile a prime_options() ma per uno specifico gruppo di opzioni.

Altre due funzioni permettono di impostare i valori di autocaricamento delle opzioni.

wp_set_option_autoload_values() può essere utilizzata per impostare il valore di autocaricamento di una singola opzione.

wp_set_options_autoload_values() può essere utilizzata per impostare i valori di autocaricamento di più opzioni.

Ulteriori modifiche per gli sviluppatori

Le modifiche aggiuntive per gli sviluppatori includono:

• Sostituzione dei tag di stile hard-coded con wp_add_inline_style() (fare riferimento a nota di sviluppo)
• Valori di viewport minimi e massimi configurabili per la tipografia fluida in theme.json (fare riferimento a nota di sviluppo)
• Disabilitazione dei controlli di layout in theme.json (fare riferimento a nota di sviluppo)
• Impostare la modalità di modifica dei blocchi utilizzando il nuovo hook useBlockEditingMode (fare riferimento a nota di sviluppo)
• La funzione wp_get_loading_optimization_attributes() è stata migliorata e sono stati introdotti nuovi filtri per controllare gli attributi di ottimizzazione del caricamento (fare riferimento a nota di sviluppo)
• Una nuova API registerInserterMediaCategory permette agli sviluppatori di plugin di registrare categorie multimediali di inseritori personalizzati e di fornire agli utenti più opzioni. L’API consente solo di aggiungere categorie multimediali personalizzate ma non fornisce il controllo sulle categorie principali, ad eccezione della categoria Openverse (fare riferimento a nota di sviluppo)
• Due nuove funzioni wp_get_admin_notice() e wp_admin_notice() “riducono l’onere di manutenzione, incoraggiano la coerenza e consentono il filtraggio degli argomenti e dei messaggi per tutti gli avvisi degli amministratori” (fare riferimento a nota di sviluppo)
• WP_Query e il sistema di caching di WP_Term_Query è stato migliorato, riducendo le query al database e migliorando l’efficienza complessiva (fare riferimento a nota di sviluppo)
• Il markup delle pagine di login e di registrazione è stato migliorato per ottimizzarne la struttura e offrire agli sviluppatori una maggiore flessibilità nelle personalizzazioni (fare riferimento a nota di sviluppo)

Riepilogo

La terza versione di WordPress del 2023 porta con sé molte nuove funzionalità, nuovi strumenti di progettazione e una serie di miglioramenti all’interfaccia utente, correzioni di bug e altre piccole modifiche.

Inoltre, introduce un nuovo tema predefinito leggero e multifunzionale con tantissimi pattern e template da personalizzare per i casi d’uso più specifici.

Ora tocca a voi: avete già avuto modo di testare WordPress 6.4? Se volete testare e/o contribuire a WordPress, consigliamo la nostra suite di sviluppo WordPress locale gratuita, DevKinsta.

Quali sono le funzionalità della versione 6.4 che vi piacciono di più? Condividete le vostre considerazioni nei commenti qui sotto.