Introduzione a WordPress 5.4 (Blocchi, Funzionalità, Nuove API)

WordPress 5.4 “Adderley” è stato rilasciato il 31 marzo 2020 ed è disponibile per il download.

È giunto, per noi, il momento di immergerci nelle novità e nei cambiamenti più interessanti in arrivo con WordPress 5.4.

In primo luogo, WordPress 5.4 aggiunge molte caratteristiche, miglioramenti e correzioni di bug all’editor di blocchi, con un numero considerevole di versioni del plugin Gutenberg fuse nel core. Queste modifiche riguardano sia le funzionalità che l’interfaccia utente, migliorando l’accessibilità/utilizzabilità dell’editor e l’esperienza di editing in generale.

Oltre all’editor, WordPress 5.4 introduce interessanti miglioramenti nel Site Health Tool e nella REST API, mentre un paio di funzionalità previste con WordPress 5.4 sono state ritardate e dovrebbero essere inserite nel Core con la prossima release di WordPress 5.5 (vedi Native Lazy Loading on images e Navigation block).

Potete segnarvi le date e i link seguenti dal post WordPress 5.4 Development Cycle:

• 11 febbraio 2020: Beta 1
• 18 febbraio 2020: Beta 2
• 25 febbraio 2020: Beta 3
• 3 marzo 2020: RC 1
• 10 marzo 2020: RC 2
• 17 marzo 2020: RC 3
• 24 marzo 2020: RC 4
• 24 marzo 2020: RC 5
• 30 marzo 2020: Prova generale per il rilascio di WordPress 5.4
• 31 marzo 2020: Rilascio di WordPress 5.4 “Adderley“

Allora, cosa verrà introdotto di nuovo in WordPress grazie alla 5.4?

Cosa C’È di Nuovo nel Block Editor

Un gran numero delle versioni del plugin Gutenberg, dalla 6.6 alla 7.5, sono state fuse nel core. Quindi, se non utilizzate il plugin Gutenberg, troverete tonnellate di nuove funzionalità, miglioramenti e correzioni di bug nell’editor a blocchi quando si esegue l’aggiornamento a WordPress 5.4.

Nell’editor non ci sono solo blocchi e funzioni, ma anche miglioramenti delle prestazioni complessive:

Rispetto a WordPress 5.3, team che ha sviluppato l’editor a blocchi ha ottenuto una riduzione del 14% nel tempo di caricamento e del 51% nel tempo di scrittura per un post molto consistente (~ 36.000 parole, ~1.000 blocchi).

Ci sono un sacco di novità fantastiche, per cui fiondiamoci a capofitto.

• Nuove Funzionalità e Miglioramenti dell’Editor a Blocchi
• Modifiche all’Editor a Blocchi per Chi Sviluppa Temi e Blocchi
• Caratteristiche Aggiuntive

Nuove Funzionalità e Miglioramenti dell’Editor a Blocchi

Possiamo essere d’accordo sul fatto che l’editor a blocchi è ancora in fase di sviluppo, ma WordPress 5.4 apporta tonnellate di modifiche che migliorano l’usabilità dell’editor sia da desktop che da mobile.

Alcune di queste modifiche riguardano strettamente l’interfaccia, la migliore selezione dei blocchi, il facile passaggio tra la modalità di modifica e la modalità di selezione, la barra degli strumenti mobile fissa e le briciole di pane per la navigazione a blocchi. Due nuovi blocchi e le impostazioni delle opzioni aggiuntive aggiungono ulteriori funzionalità all’editor.

Ecco un breve elenco delle caratteristiche e dei miglioramenti del nostro editor a blocchi preferito, in con WordPress 5.4:

• Nuovo Blocco per le Icone Social (Social Icons)
• Nuovo Blocco per Pulsanti (Buttons)
• Un Modal per la Guida di Benvenuto
• Modalità a Schermo Intero Abilitata di Default
• Supporto del Colore del Testo in Linea nei Blocchi RichText
• Opzioni di Colore Aggiuntive per Blocchi Multipli
• Immagini in Evidenza nel Blocco Articoli Recenti
• Una Nuova Barra Breadcrumb per la Navigazione tra i Blocchi

Nuovo Blocco per le Icone Social (Social Icons)

Inizialmente chiamato Social Links, il blocco Social Icons consente agli autori di aggiungere rapidamente icone con link ai profili social e fornisce un buon numero di blocchi child di icone tra cui scegliere. Questo blocco è stato testato per un po’ di tempo e ora è stabile dalla versione 7.5 di Gutenberg.

Il blocco Social Icons arriva in tre stili predefiniti per facilitare la personalizzazione: Default, Logos only e Pill shape.

Da quando è stato introdotto per la prima volta come funzionalità sperimentale in Gutenberg 6.5 (e fuse in WordPress 5.3), il blocco Social Icons è stato aggiunto a Gutenberg 7.5 e potrebbe non funzionare come previsto se usate una versione obsoleta del plugin Gutenberg.

Secondo Jorge Costa, ci sono due modi per prevenire i problemi con Social Icons:

• Migrare manualmente qualsiasi contenuto con Social Icons: aggiornate a WordPress 5.4, caricate il post nell’editor dei blocchi e salvatelo. Social Icons sarà automaticamente migrato alla nuova versione.
• Mantenete installato il plugin Gutenberg durante l’aggiornamento a WordPress 5.4: il plugin offre una compatibilità a ritroso e non dovreste avere alcun problema.

Nuovo Blocco per Pulsanti (Buttons)

Aggiunto all’editor di blocchi in Gutenberg 7.2, il blocco Buttons sostituisce il singolo blocco Button, e permette agli utenti di WordPress di aggiungere più pulsanti al loro contenuto nello stesso contenitore di blocchi.

I pulsanti singoli sono dotati di due stili preimpostati tra cui scegliere e di diverse opzioni aggiuntive per perfezionare l’aspetto dei vostri pulsanti.

Con WordPress 5.4, i proprietari del sito acquisiscono un controllo più profondo sull’aspetto delle loro call-to-action grazie all’aggiunta di sfondi a gradiente, dotati anche di una manciata di preset di gradiente che chi amministra il sito può utilizzare come punto di partenza per ulteriori personalizzazioni.

Un Modal per la Guida di Benvenuto

WordPress 5.4 aggiunge una nuovissima presentazione Welcome che fornisce informazioni di base sull’editor di blocchi e un link alla documentazione online (aggiunta con Gutenberg 7.1).

Il modal è visibile solo dopo l’aggiornamento a 5.4. Se desiderate attivarlo di nuovo, vi basterà aprire il menu More tools & Options dal pulsante in alto a destra e cercare il link Welcome Guide.

Modalità a Schermo Intero Abilitata di Default

A partire da WordPress 5.4, l’editor si apre di default in modalità a schermo intero nelle nuove installazioni e nei nuovi dispositivi. È possibile attivare/disattivare la modalità a schermo intero (Fullscreen mode) facendo clic sul menu More tools & options come mostrato nell’immagine sottostante.

Per ora, questa preferenza è memorizzata localmente, il che significa che verrà sovrascritta ogni volta che le preferenze cambiano, come accade quando accedete al vostro sito web in modalità incognito. In futuro, questa preferenza sarà memorizzata nel database, rendendo la scelta dell’utente persistente in qualsiasi contesto.

Si noti che la decisione di avere l’editor in modalità a schermo intero di default non è unanimemente apprezzata in quanto alcuni considerano che potrebbe confondere i principianti e gli utenti non avanzati. Se volete saperne di più sulle preoccupazioni che gravitano intorno alla modalità a schermo intero, date un’occhiata a questo post.

Gli sviluppatori di editor di blocchi possono gestire la modalità a schermo intero via codice con poche righe di JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {

	wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );

}

Supporto del Colore del Testo in Linea nei Blocchi RichText

Se di solito scrivete articoli in formato lungo, dovreste apprezzare il supporto del testo in linea a colori. Prima di questo aggiornamento, siamo stati costretti a codificare blocchi di testo RichText in modalità HTML per cambiare il colore delle singole parole e delle stringhe.

A partire da WordPress 5.4, possiamo selezionare parole e sotto-stringhe in blocchi RichText e cambiarne rapidamente i colori utilizzando il selezionatore di colori integrato.

Opzioni di Colore Aggiuntive per Blocchi Multipli

WordPress 5.4 aggiunge all’editor di blocchi una lunga lista di funzioni e miglioramenti relativi al colore. Come visto sopra, non ci limitiamo più ai colori a tinta unita. Diversi blocchi ora supportano sfondi a gradiente e set di gradienti predefiniti.

Ecco un breve elenco di alcuni dei miglioramenti legati al colore:

• Supporto per lo sfondo con gradiente per il blocco Buttons (Gutenberg 6.7).
• Supporto per lo sfondo con gradiente per il blocco Cover (Gutenberg 6.8).
• Supporto per il colore del testo per i blocchi Group (Gutenberg 7.4 e 7.5): i blocchi annidati possono ora ereditare il colore del testo dal blocco del gruppo di appartenenza.
• Supporto per il colore del testo e dello sfondo per il blocco Columns (Gutenberg 7.4 e 7.5).

Immagini in Evidenza nel Blocco Articoli Recenti (Latest Posts)

Un’altra aggiunta notevole all’editor di blocchi è il supporto per le immagini in evidenza nel blocco degli articoli recenti (Latest Posts) (Gutenberg 7.5).

Questo è solo l’ultimo dei numerosi miglioramenti aggiunti nel tempo al blocco Latest Posts e segna un altro passo verso “blocchi dinamici o globali più complessi”.

Con WordPress 5.4, il blocco Latest Posts consente di estrarre i messaggi da una specifica categoria, ma non consente di costruire query più avanzate per categoria/tag/tipo di articolo e/o includere/escludere singoli messaggi.

Speriamo di vedere ulteriori miglioramenti futuri per questo blocco.

Una Nuova Barra Breadcrumb per la Navigazione tra i Blocchi

Disponibile per gli utenti Gutenberg a partire dalla versione 6.7 e ora confluita nel Core, la nuova barra Breadcrumb mira a semplificare la navigazione a blocchi nidificati.

L’immagine sottostante mostra diversi blocchi annidati e il nuovo menu delle breadcrumb in basso.

Modifiche all’Editor a Blocchi per Chi Sviluppa Temi e Blocchi

Chi sviluppa temi e blocchi dovrebbe essere a conoscenza di molti dei cambiamenti apportati all’editor di blocchi con WordPress 5.4. Questi cambiamenti includono:

• Scorciatoie da Tastiera per il Block Editor
• API per Tema a Gradiente
• Markup e Modifiche di Stile nell’Editor a Blocchi
• Scaffolding dei Blocchi
• Collezioni di Blocchi
• Variazioni di Blocchi

Scorciatoie da Tastiera per il Block Editor

Gli sviluppatori di blocchi e gli utenti avanzati possono ora aggiungere scorciatoie personalizzate all’editor di blocchi.

Un nuovo pacchetto chiamato @wordpress/keyboard-shortcuts è stato introdotto per centralizzare la registrazione, la rimozione e la documentazione delle scorciatoie sull’editor.

Gli sviluppatori possono aggiungere le loro scorciatoie personalizzate chiamando l’azione registerShortcut in questo modo:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

     // Shortcut identifier
     name: 'plugin/shortcut-test',

     // Shortcut category (possible values global, block, selection)
     category: 'global',

     // Shortcut description
     description: 'My first shortcut',

     // The key combination that triggers the shortcut
     keyCombination: {

          // Available modifiers:
          // primary, primaryShift, primaryAlt,
          // secondary, access, ctrl, alt,
          // ctrlShift, shift, shiftAlt
          modifier: 'alt',
          character: 'w',
     },

     // An alias for the key combination
     aliases: [
          {
               modifier: 'primary',
               character: 'q',
          },
     ],
} );

Questo aggiungerà automaticamente la scorciatoia personalizzata a quelle modali disponibili sotto il pulsante More Tools & Options nell’angolo in alto a destra dell’editor.

Poi, possiamo collegare un gestore di scorciatoie da tastiera utilizzando la funzione useShortcut:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
     useShortcut(

          'plugin/shortcut-test',

          useCallback(
               ( event ) => {
                    // Do something
               },
               []
          )
     );
}

Potete saperne di più sulle scorciatoie da tastiera sul blog di Make WordPress Core.

API per Tema a Gradiente

WordPress 5.4 introduce sfondi a gradiente con una manciata di preset per i pulsanti e i blocchi di copertura. Ciò avviene grazie alle nuove API per i temi a gradiente.

Le nuove API forniscono l’opzione editor-gradient-presets per il supporto dei temi che permette agli sviluppatori di temi di sovrascrivere i preset predefiniti e definire i propri:

add_theme_support(
     'editor-gradient-presets',
     array(
          array(
               'name'         => __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
               'gradient'     => 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
               'slug'         => 'cedetblue-chartreuse'
          ),
          array(
               'name'         => __( 'Chocolate to Coral', 'themeLangDomain' ),
               'gradient'     => 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
               'slug'         =>  'chocolate-to-coral',
          ),
          array(
               'name'         => __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
               'gradient'     => 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
               'slug'         => 'darkmagenta-to-darkorchid',
          ),
          array(
               'name'         => __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
               'gradient'     => 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
               'slug'         => 'deepskyblue-to-dodgerblue',
          ),
     )
);

• name: un’etichetta significativa per il tooltip che fornisce informazioni sul gradiente. Questo è particolarmente utile per gli screen reader e per gli utenti che hanno difficoltà a distinguere determinati colori.
• gradient: valori CSS per il gradiente.
• slug: un identificatore per generare le classi CSS utilizzate nell’editor a blocchi.

È possibile disabilitare i gradienti personalizzati utilizzando l’opzione disable-custom-gradients del tema di supporto:

add_theme_support( 'disable-custom-gradients' );

La funzionalità del gradiente può essere completamente rimossa utilizzando sia disable-custom-gradients che editor-gradient-presets:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Markup e Modifiche di Stile nell’Editor a Blocchi

WordPress 5.4 introduce diversi cambiamenti di struttura del DOM di cui gli sviluppatori di temi dovrebbero essere a conoscenza.

• Il prefisso legacy di classe dell’editor- è stato rimosso dagli script di block-editor e ora gli sviluppatori dovrebbero usare solo il prefisso di block-editor-.
• La classe edit-post-layout__content è stata rimossa dal DOM dell’editor a blocchi.
• Diversi wrapper div sono stati rimossi dai blocchi e RichText perché ridondanti. Questo cambiamento migliora significativamente le prestazioni e semplifica l’albero del DOM, cosa che dovrebbe essere apprezzata dagli sviluppatori di blocchi e temi.
• I padding dei blocchi e i margini negativi sono scomparsi. Gli stili dei blocchi dovrebbero cambiare di conseguenza.

Per una visione dettagliata delle modifiche DOM e CSS, andate a leggere Markup and style-related changes in WordPress 5.4

Scaffolding dei Blocchi

Con il nuovo pacchetto @wordpress/create-block per lo scaffolding dei blocchi, gli sviluppatori hanno un nuovo modo per generare la struttura delle directory per un plugin da usare con l’editor a blocchi. Questa struttura include tipicamente index.php, index.js e style.css.

Gli sviluppatori di blocchi possono ora semplicemente eseguire il seguente comando:

$ npm init @wordpress/block block-name

Collezioni di Blocchi

Le collezioni di blocchi forniscono un modo per raggruppare visivamente le raccolte di blocchi nell’inseritore dell’editor a blocchi. Le collezioni sono diverse dalle categorie e forniscono un modo aggiuntivo per raggruppare i blocchi.

La nuova API offre una nuova funzione:

registerBlockCollection( namespace, { title, icon } );

• namespace: abbinato a un prefisso di blocco.
• title: è l’etichetta riportata nell’inseritore di blocchi.
• icon: è l’icona mostrata con il titolo nell’inseritore di blocchi.

Introdotta con Gutenberg 7.3 e ora fusa nel core, la nuova API permette agli sviluppatori di temi e blocchi di organizzare meglio i blocchi, rendendo più facile per gli utenti scoprirne di nuovi e aggiungerli ai contenuti.

Variazioni di Blocchi

L’API delle variazioni di blocchi fornisce un insieme di funzioni che permette agli sviluppatori di blocchi di aggiungere/gestire/rimuovere le variazioni dei blocchi che gli utenti possono scegliere quando aggiungono blocchi al contenuto. La registrazione di una nuova variazione è abbastanza semplice (codice JS):

wp.blocks.registerBlockVariation( 'core/heading', { 
     name: 'green-text', 
     title: 'Green Text', 
     description: 'This block has green text. It overrides the default description.',  
     attributes: { 
          content: 'Green Text', 
          textColor: 'vivid-green-cyan' 
     }, 
     icon: 'palmtree', 
     scope: [ 'inserter' ] 
} );

• blockName: il nome del blocco (cioè core/heading).
• variation: un oggetto che descrive una variazione per il tipo di blocco.
• name: (string) l’identificatore unico della variazione.
• title: (string) il titolo della variazione leggibile in chiaro.
• description: (string) una descrizione dettagliata.
• : (WPIcon) un’icona da visualizzare nell’inseritore di blocchi.
• [isDefault]: (boolean) se la variazione corrente è quella predefinita. Il valore predefinito è false.
• [attributes]: (Object) valori che sovrascrivono gli attributi del blocco.
• [innerBlocks]: (Array[]) configurazione iniziale del blocco annidato.
• [example]: (Object) dati strutturati per l’anteprima del blocco. Impostare su undefined per disattivare l’anteprima.
• [scope]: (WPBlockVariationScope[]) La lista degli scopi in cui la variazione è applicabile. Quando non è fornita, presuppone tutti gli ambiti disponibili. Opzioni disponibili: block, inserter.

Per una visione più ravvicinata alle API delle variazioni a blocchi, leggete qui: PR #20068.

Caratteristiche Aggiuntive dell’Editor a Blocchi in Arrivo con WordPress 5.4

Altre caratteristiche degne di nota che si trovano nel nucleo di WordPress 5.4 includono:

• Un menu per passare visivamente dalla modalità di revisione a quella di navigazione (7.1)

• Aggiunta della didascalia al blocco Table (7.1)

• Immagini drag-and-drop nel box delle immagini in evidenza (7.1)

• Barra degli strumenti a blocco fisso su dispositivi mobili (7.1)

• Aggiunta del selettore della dimensione dell’immagine al blocco Gallery (7.2)

• Aggiunta dei link alle immagini nel blocco Media & Text (7.2)

Funzionalità e Miglioramenti per gli Sviluppatori di WordPress

Gli sviluppatori dovrebbero trarre vantaggio da diverse nuove aggiunte in arrivo con WordPress 5.4.

I nostri cambiamenti preferiti sono i seguenti:

• Un Widget del Calendario Semanticamente Corretto e Nuove Classi CSS
• Shortcode negli Script PHP
• Miglioramenti alla Gestione di Favicon in WordPress 5.4
• Nuovi Hook per Aggiungere Campi Personalizzati alle Voci di Menu
• Ulteriori Modifiche per gli Sviluppatori

Un Widget del Calendario Semanticamente Corretto e Nuove Classi CSS

La specifica HTML 5.1 ha cambiato il modo in cui gli elementi tfoot devono essere utilizzati nelle tabelle. Prima, gli elementi tfoot dell’HTML 5.1 potevano precedere l’elemento tbody. La nuova spec cambia le cose e ora tfoot deve seguire tbody.

Il widget del calendario di WordPress cambia di conseguenza. A partire da WordPress 5.4, i link di navigazione passano a un elemento di nav fuori della tabella del calendario.

Si tratta di un cambiamento che era atteso da tempo, considerando che il nav è l’elemento HTML più appropriato per i link di navigazione in qualsiasi concorso, e può anche contribuire a migliorare l’accessibilità sugli screen reader. Secondo la documentazione di Mozilla:

Un documento può avere diversi elementi <nav>, ad esempio, uno per la navigazione del sito e uno per la navigazione intra-pagina. aria-labelledby può essere utilizzato in questo caso per promuovere l’accessibilità.

Gli user agent, come gli screen reader che si rivolgono agli utenti disabili, possono utilizzare questo elemento per determinare se omettere la resa iniziale dei contenuti di sola navigazione.

Inoltre, le seguenti classi CSS sono state introdotte in get_calendar() per facilitare il targeting:

• wp-calendar-table per l’elemento table.
• wp-calendar-nav per l’elemento di nav.
• wp-calendar-nav-prev per il link del mese precedente, in sostituzione di #prev ID.
• wp-calendar-nav-next per il link del mese successivo, che sostituisce #next ID.

Lo snippet sottostante mostra la struttura HTML del nuovo calendario:

<div class="widget widget_calendar">
     <div class="widget-content">
          <div id="calendar_wrap" class="calendar_wrap">
               <table id="wp-calendar" class="wp-calendar-table">
                    <caption>February 2020</caption>
                    <thead>
                         <tr><!-- Day names --></tr>
                    </thead>
                    <tbody>
                         <!-- Calendar cells -->
                    </tbody>
               </table>
               <nav aria-label="Previous and next months" class="wp-calendar-nav">
                    <span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
                    <span class="pad"> </span>
                    <span class="wp-calendar-nav-next"> </span>
               </nav>
          </div>
     </div>
</div>

Gli sviluppatori del tema potrebbero voler cambiare i loro fogli di stile di conseguenza.

Shortcode negli Script PHP

WordPress 5.4 introduce la funzione apply_shortcodes() come alias per do_shortcode(), che permette di utilizzare uno shortcode in un file PHP.

Dal punto di vista semantico, ci si può aspettare di vedere il risultato delle funzioni do_* semplicemente chiamando la funzione stessa. Ma questo non è il caso del do_shortcode. Per avere l’output dello shortcode specificato, do_shortcode deve essere supportato da un echo:

// Displays the result of the shortcode
echo do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 cambia un po’ le cose con l’introduzione di apply_shortcodes(), che funziona allo stesso modo di do_shortcode(), ma permette agli sviluppatori di costruire codice più leggibile e semanticamente corretto:

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

Al momento del rilascio di WordPress 5.4 RC 5, non è previsto che do_shortcode() venga deprecato perché è ampiamente utilizzato nei plugin di terze parti.

Miglioramenti alla Gestione di Favicon in WordPress 5.4

Con WordPress 5.4, gli sviluppatori di temi possono gestire le richieste di favicon con molta più flessibilità, mentre diverse nuove funzioni permettono di gestire le favicon allo stesso modo delle funzioni relative a robots.txt. Come spiega Sergey Biryukov:

Una richiesta verso favicon.ico dovrebbe essere gestita nello stesso modo in cui gestiamo robots.txt con do_robots():

• Se esiste un file fisico, non fate nulla e lasciate che sia il server a gestire la richiesta.
• In caso contrario, servite un’icona di ripiego (vedi sotto).

Quindi, se non viene fornito un file favicon.ico fisico, WordPress lo gestisce in questo modo:

• Se c’è un Icon Set impostato nel Customizer, essa reindirizza /favicon.ico a quella specifica icona.
• Se non c’è un Icon Set, allora utilizza il logo WordPress (wp-admin/images/w-logo-blue.png) come icona di ripiego.

Una manciata di nuove funzioni e hook completano le corrispondenti funzioni/hook di robots.txt:

• La nuova funzione is_favicon() completa la funzione is_robots().
• L’azione do_favicon è complementare a do_robots e si attiva quando il template loader determina una richiesta di favicon.
• La funzione do_favicon() è agganciata all’azione do_favicon e completa do_robots().
• L’azione do_faviconico completa do_robots.txt e permette agli sviluppatori di sovrascrivere il comportamento predefinito.

Per saperne di più sulla gestione delle favicon.

Nuovi Hook per Aggiungere Campi Personalizzati alle Voci di Menu

Con WordPress 5.4, gli sviluppatori possono utilizzare due nuovi action hook per aggiungere campi personalizzati alle voci di menu.

wp_nav_menu_item_custom_custom_fields viene attivato appena prima che una voce del menu di navigazione venga aggiunta all’editor del menu di amministrazione. Vedete l’esempio qui sotto:

function kinsta_add_menu_item_custom_field() {
     echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );

Il nuovo action hook supporta cinque parametri che si possono usare per mettere a punto il comportamento del campo personalizzato:

• $item_id: la voce di menu ID (intero).
• $item: la voce di menu data object (oggetto).
• $depth: la profondità della voce di menu (intero).
• $args: un oggetto degli argomenti delle voci di menu (oggetto).
• $id: l’ID del menu di navigazione (intero).

Il template di wp_nav_menu_item_custom_fields_customize_template funziona allo stesso modo di wp_nav_menu_item_custom_fields, ma viene attivato alla fine del template form-fields per le voci del menu di navigazione nel Customizer. L’immagine sottostante mostra la sezione Menu del Customizer in WordPress 5.4.

Ulteriori Modifiche per gli Sviluppatori

Ulteriori modifiche per gli sviluppatori e gli utenti avanzati che sono incluse in WordPress 5.4 includono:

• Maggiori informazioni sugli errori che causano il fallimento del login grazie ad un nuovo parametro $error ora supportato dall’azione wp_login_failed.
• Notifica amministrativa personalizzabile in WordPress Multisito a seconda dell’ID del sito.
• Il nuovo meta value per i post _source_url permette ora di memorizzare l’URL originale per i file multimediali.
• La Admin Bar è ora caricata su wp_body_open invece che su wp_footer.
• Diverse modifiche in REST API.

Come Installare una Versione di Sviluppo di WordPress

Se volete essere sicuri che i vostri temi e plugin siano pienamente compatibili con WordPress 5.4 o siete solo curiosi di sapere quali sono le nuove funzionalità in arrivo con l’ultima versione di WordPress, potete installare l’attuale versione di sviluppo con pochi clic.

Avete due modi per installare una versione Beta/RC di WordPress:

• Installate il plugin WordPress Beta Tester ed eseguite l’installazione nella dashboard di un ambiente WordPress esistente.
• Scaricate e installate manualmente la Beta/RC corrente. È possibile ottenere la versione “nightly build“, che viene creata dal repository Subversion. Se state cercando una versione specifica di WordPress, sia stabile che di sviluppo, potete controllare l’archivio delle categorie dei rilasci.

Se decidete di installare il plugin WordPress Beta Tester, è necessario impostare prima una regolare installazione di WordPress, sia sulla vostra macchina locale che nel vostro ambiente di staging.

Una volta che il vostro sito web WordPress è attivo e funzionante, navigate su Plugins → Add new e cercate il plugin per il Beta Tester WordPress.

Il plugin fornisce un modo semplice e veloce per testare la beta di WordPress, permettendo di installare e/o aggiornare l’attuale Beta o Release Candidate con un semplice clic.

Quindi, installate e attivate il plugin come al solito.

Scorrete su Tools → Beta Testing, selezionate l’opzione Bleeding edge nightlies e salvate le modifiche.

Dopo di che, passate alla schermata Dashboard → Updates e fate clic sul pulsante Update Now.

WordPress ora scaricherà e installerà il seguente pacchetto:

https://wordpress.org/nightly-builds/wordpress-latest.zip

Una volta completata l’installazione, verrete reindirizzati alla pagina temporanea About di WordPress.

E questo è tutto. Ora siete pronti per eseguire i vostri test sulle versioni Beta e RC di WordPress.

Consultate la documentazione ufficiale per ulteriori informazioni sui test Beta di WordPress.

Sommario

Con dieci versioni del plugin Gutenberg fuse nel core, WordPress 5.4 si concentra principalmente sul Block Editor. Abbiamo due nuovi blocchi, shortcode personalizzati, una migliore usabilità e accessibilità, e possiamo aspettarci ulteriori sviluppi nel prossimo futuro.

Ma c’è anche di più:

• Un widget Site Health è stato aggiunto alla dashboard, rendendo più facile per l’utente controllare lo stato di salute, la sicurezza e le prestazioni del proprio sito.
• Una migliore gestione della messa a fuoco, una più facile navigazione da tastiera e una guida alla politica sulla privacy di più facile lettura che migliora l’accessibilità su mobile e desktop.
• Diverse modifiche agli strumenti di privacy che semplificano l’UX durante l’esportazione dei dati personali.

Ora tocca a voi. Qual è la vostra opinione su WordPress 5.4? Quali sono le modifiche e le caratteristiche che vi piacciono di più? Fatecelo sapere nei commenti!

Carlo Daniele Kinsta

Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.

• Sito Web
• Twitter