Oltre all’editor, WordPress 5.4 introduce interessanti miglioramenti nel Site Health Tool<\/a> e nella REST API<\/a>, mentre un paio di funzionalit\u00e0 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<\/a> e Navigation block<\/a>).<\/p>\n Potete segnarvi le date e i link seguenti dal post WordPress 5.4 Development Cycle<\/a>:<\/p>\n Allora, cosa verr\u00e0 introdotto di nuovo in WordPress grazie alla 5.4?<\/p>\n Un gran numero delle versioni del plugin Gutenberg<\/a>, dalla 6.6 alla 7.5, sono state fuse nel core. Quindi, se non utilizzate il plugin Gutenberg, troverete tonnellate di nuove funzionalit\u00e0, miglioramenti e correzioni di bug nell’editor a blocchi quando si esegue l’aggiornamento a WordPress 5.4.<\/p>\n Nell’editor non ci sono solo blocchi e funzioni, ma anche miglioramenti delle prestazioni complessive:<\/p>\n Rispetto a WordPress 5.3, team che ha sviluppato l\u2019editor 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).<\/p><\/blockquote>\n Ci sono un sacco di novit\u00e0 fantastiche, per cui fiondiamoci a capofitto.<\/p>\n Possiamo essere d’accordo sul fatto che l’editor a blocchi \u00e8 ancora in fase di sviluppo, ma WordPress 5.4 apporta tonnellate di modifiche che migliorano l’usabilit\u00e0 dell’editor sia da desktop che da mobile.<\/p>\n Alcune di queste modifiche riguardano strettamente l’interfaccia, la migliore selezione dei blocchi, il facile passaggio tra la modalit\u00e0 di modifica e la modalit\u00e0 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\u00e0 all’editor.<\/p>\n Ecco un breve elenco delle caratteristiche e dei miglioramenti del nostro editor a blocchi preferito, in con WordPress 5.4:<\/p>\n Inizialmente chiamato Social Links, il blocco Social Icons<\/strong> consente agli autori di aggiungere rapidamente icone con link ai profili social<\/a> e fornisce un buon numero di blocchi child di icone tra cui scegliere. Questo blocco \u00e8 stato testato per un po’ di tempo e ora \u00e8 stabile dalla versione 7.5 di Gutenberg<\/a>.<\/p>\n Il blocco Social Icons arriva in tre stili predefiniti per facilitare la personalizzazione: Default<\/strong>, Logos only<\/strong> e Pill shape<\/strong>.<\/p>\n Da quando \u00e8 stato introdotto per la prima volta come funzionalit\u00e0 sperimentale in Gutenberg 6.5 (e fuse in WordPress 5.3<\/a>), il blocco Social Icons \u00e8 stato aggiunto a Gutenberg 7.5 e potrebbe non funzionare come previsto se usate una versione obsoleta del plugin Gutenberg.<\/p>\n Secondo Jorge Costa<\/a>, ci sono due modi per prevenire i problemi con Social Icons:<\/p>\n Aggiunto all’editor di blocchi in Gutenberg 7.2<\/a>, il blocco Buttons<\/strong> sostituisce il singolo blocco Button<\/a>, e permette agli utenti di WordPress di aggiungere pi\u00f9 pulsanti al loro contenuto nello stesso contenitore di blocchi.<\/p>\n I pulsanti singoli sono dotati di due stili preimpostati tra cui scegliere e di diverse opzioni aggiuntive per perfezionare l’aspetto dei vostri pulsanti.<\/p>\n Con WordPress 5.4, i proprietari del sito acquisiscono un controllo pi\u00f9 profondo sull’aspetto delle loro call-to-action grazie all’aggiunta di sfondi a gradiente<\/a>, dotati anche di una manciata di preset di gradiente che chi amministra il sito pu\u00f2 utilizzare come punto di partenza per ulteriori personalizzazioni.<\/p>\n WordPress 5.4 aggiunge una nuovissima presentazione Welcome che fornisce informazioni di base sull’editor di blocchi e un link alla documentazione online<\/a> (aggiunta con Gutenberg 7.1<\/a>).<\/p>\n Il modal \u00e8 visibile solo dopo l’aggiornamento a 5.4. Se desiderate attivarlo di nuovo, vi baster\u00e0 aprire il menu More tools & Options<\/strong> dal pulsante in alto a destra e cercare il link Welcome Guide<\/strong>.<\/p>\n A partire da WordPress 5.4, l’editor si apre di default in modalit\u00e0 a schermo intero<\/a> nelle nuove installazioni e nei nuovi dispositivi. \u00c8 possibile attivare\/disattivare la modalit\u00e0 a schermo intero (Fullscreen mode)<\/strong> facendo clic sul menu More tools & options<\/strong> come mostrato nell’immagine sottostante.<\/p>\n Per ora, questa preferenza \u00e8 memorizzata localmente, il che significa che verr\u00e0 sovrascritta ogni volta che le preferenze cambiano, come accade quando accedete al vostro sito web in modalit\u00e0 incognito. In futuro, questa preferenza sar\u00e0 memorizzata nel database, rendendo la scelta dell’utente persistente in qualsiasi contesto.<\/p>\n Si noti che la decisione<\/a> di avere l’editor in modalit\u00e0 a schermo intero di default non \u00e8 unanimemente apprezzata in quanto alcuni considerano che potrebbe confondere i principianti e gli utenti non avanzati. Se volete saperne di pi\u00f9 sulle preoccupazioni che gravitano intorno alla modalit\u00e0 a schermo intero, date un’occhiata a questo post<\/a>.<\/p>\n Gli sviluppatori di editor di blocchi possono gestire la modalit\u00e0 a schermo intero via codice con poche righe di JavaScript:<\/p>\n Se di solito scrivete articoli in formato lungo<\/a>, 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\u00e0 HTML per cambiare il colore delle singole parole e delle stringhe.<\/p>\n 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.<\/p>\n 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\u00f9 ai colori a tinta unita. Diversi blocchi ora supportano sfondi a gradiente e set di gradienti predefiniti.<\/p>\n Ecco un breve elenco di alcuni dei miglioramenti legati al colore:<\/p>\n Un’altra aggiunta notevole all’editor di blocchi \u00e8 il supporto per le immagini in evidenza nel blocco degli articoli recenti (Latest Posts) (Gutenberg 7.5<\/a>).<\/p>\n Questo \u00e8 solo l’ultimo dei numerosi miglioramenti aggiunti nel tempo al blocco Latest Posts e segna un altro passo<\/a> verso “blocchi dinamici o globali pi\u00f9 complessi”.<\/p>\n Con WordPress 5.4, il blocco Latest Posts consente di estrarre i messaggi da una specifica categoria, ma non consente di costruire query pi\u00f9 avanzate per categoria\/tag\/tipo di articolo e\/o includere\/escludere singoli messaggi.<\/p>\n Speriamo di vedere ulteriori miglioramenti futuri per questo blocco.<\/p>\n Disponibile per gli utenti Gutenberg a partire dalla versione 6.7<\/a> e ora confluita nel Core, la nuova barra Breadcrumb mira a semplificare la navigazione a blocchi nidificati.<\/p>\n L’immagine sottostante mostra diversi blocchi annidati e il nuovo menu delle breadcrumb<\/a> in basso.<\/p>\n 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:<\/p>\n Gli sviluppatori di blocchi e gli utenti avanzati possono ora aggiungere scorciatoie personalizzate all’editor di blocchi.<\/p>\n Un nuovo pacchetto chiamato Gli sviluppatori<\/a> possono aggiungere le loro scorciatoie personalizzate chiamando l’azione Questo aggiunger\u00e0 automaticamente la scorciatoia personalizzata a quelle modali disponibili sotto il pulsante More Tools & Options<\/strong> nell’angolo in alto a destra dell’editor.<\/p>\n Poi, possiamo collegare un gestore di scorciatoie da tastiera<\/a> utilizzando la funzione Potete saperne di pi\u00f9 sulle scorciatoie da tastiera sul blog di Make WordPress Core<\/a>.<\/p>\n WordPress 5.4 introduce sfondi a gradiente con una manciata di preset per i pulsanti e i blocchi di copertura. Ci\u00f2 avviene grazie alle nuove API per i temi a gradiente<\/a>.<\/p>\n Le nuove API forniscono l’opzione \u00c8 possibile disabilitare i gradienti personalizzati utilizzando l’opzione La funzionalit\u00e0 del gradiente pu\u00f2 essere completamente rimossa utilizzando sia WordPress 5.4 introduce diversi cambiamenti di struttura del DOM di cui gli sviluppatori di temi dovrebbero essere a conoscenza.<\/p>\n Per una visione dettagliata delle modifiche DOM e CSS, andate a leggere Markup and style-related changes<\/a> in WordPress 5.4<\/p>\n 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.<\/p>\n Gli sviluppatori di blocchi possono ora semplicemente eseguire il seguente comando:<\/p>\n Le collezioni di blocchi<\/a> 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.<\/p>\n La nuova API offre una nuova funzione:<\/p>\n Introdotta con Gutenberg 7.3<\/a> e ora fusa nel core<\/a>, la nuova API permette agli sviluppatori di temi e blocchi di organizzare meglio i blocchi, rendendo pi\u00f9 facile per gli utenti scoprirne di nuovi e aggiungerli ai contenuti.<\/p>\n\n
Cosa C’\u00c8 di Nuovo nel Block Editor<\/h2>\n
\n
Nuove Funzionalit\u00e0 e Miglioramenti dell\u2019Editor a Blocchi<\/h3>\n
\n
Nuovo Blocco per le Icone Social (Social Icons)<\/h4>\n
![\"Il](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/icone-sociali-1-1.jpg\")
![\"Stili](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/sociali-icone-2.jpg\")
\n
Nuovo Blocco per Pulsanti (Buttons)<\/h4>\n
![\"Il](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/pulsanti-blocco.png\")
![\"Impostazioni](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/impostazioni-pulsanti.jpg\")
![\"Opzioni](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/rinnovate-pulsanti.jpg\")
Un Modal per la Guida di Benvenuto<\/h4>\n
![\"Il](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/guida-benvenuto-1-1.jpg\")
![\"Guida](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/guida-di-benvenuto.jpg\")
Modalit\u00e0 a Schermo Intero Abilitata di Default<\/h4>\n
![\"La](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/schermo-modalita.png\")
const isFullscreenMode = wp.data.select( 'core\/edit-post' ).isFeatureActive( 'fullscreenMode' );\n\nif ( isFullscreenMode ) {\n\n\twp.data.dispatch( 'core\/edit-post' ).toggleFeature( 'fullscreenMode' );\n\n}<\/code><\/pre>\nSupporto del Colore del Testo in Linea nei Blocchi RichText<\/h4>\n
![\"Opzione](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/richtext-opzione-colore.jpg\")
![\"Selezione](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/richtext-colori-1-1.jpg\")
Opzioni di Colore Aggiuntive per Blocchi Multipli<\/h4>\n
\n
Immagini in Evidenza nel Blocco Articoli Recenti (Latest Posts)<\/h4>\n
![\"Blocco](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/ultimo-messaggi.jpg\")
Una Nuova Barra Breadcrumb per la Navigazione tra i Blocchi<\/h4>\n
![\"Il](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/briciole-1.jpg\")
Modifiche all’Editor a Blocchi per Chi Sviluppa Temi e Blocchi<\/h3>\n
\n
Scorciatoie da Tastiera per il Block Editor<\/h4>\n
@wordpress\/keyboard-shortcuts<\/code> \u00e8 stato introdotto<\/a> per centralizzare la registrazione, la rimozione e la documentazione delle scorciatoie sull’editor.<\/p>\nregisterShortcut<\/code> in questo modo:<\/p>\nwp.data.dispatch( 'core\/keyboard-shortcuts' ).registerShortcut( {\n\n \/\/ Shortcut identifier\n name: 'plugin\/shortcut-test',\n\n \/\/ Shortcut category (possible values global, block, selection)\n category: 'global',\n\n \/\/ Shortcut description\n description: 'My first shortcut',\n\n \/\/ The key combination that triggers the shortcut\n keyCombination: {\n\n \/\/ Available modifiers:\n \/\/ primary, primaryShift, primaryAlt,\n \/\/ secondary, access, ctrl, alt,\n \/\/ ctrlShift, shift, shiftAlt\n modifier: 'alt',\n character: 'w',\n },\n\n \/\/ An alias for the key combination\n aliases: [\n {\n modifier: 'primary',\n character: 'q',\n },\n ],\n} );<\/code><\/pre>\n![\"\u00c8](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/aggiunta-personalizzata.jpg\")
useShortcut<\/code>:<\/p>\nimport { useShortcut } from '@wordpress\/keyboard-shortcuts';\nimport { useCallback } from '@wordpress\/element';\n\nconst MyComponent = () => {\n useShortcut(\n\n 'plugin\/shortcut-test',\n\n useCallback(\n ( event ) => {\n \/\/ Do something\n },\n []\n )\n );\n}<\/code><\/pre>\nAPI per Tema a Gradiente<\/h4>\n
editor-gradient-presets<\/code> per il supporto dei temi che permette agli sviluppatori di temi di sovrascrivere i preset predefiniti e definire i propri<\/a>:<\/p>\nadd_theme_support(\n 'editor-gradient-presets',\n array(\n array(\n 'name' => __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),\n 'gradient' => 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',\n 'slug' => 'cedetblue-chartreuse'\n ),\n array(\n 'name' => __( 'Chocolate to Coral', 'themeLangDomain' ),\n 'gradient' => 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',\n 'slug' => 'chocolate-to-coral',\n ),\n array(\n 'name' => __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),\n 'gradient' => 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',\n 'slug' => 'darkmagenta-to-darkorchid',\n ),\n array(\n 'name' => __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),\n 'gradient' => 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',\n 'slug' => 'deepskyblue-to-dodgerblue',\n ),\n )\n);<\/code><\/pre>\n![\"Preset](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/personalizzate-gradiente-preselezioni.jpg\")
\n
name<\/code>: un’etichetta significativa per il tooltip che fornisce informazioni sul gradiente. Questo \u00e8 particolarmente utile per gli screen reader e per gli utenti che hanno difficolt\u00e0 a distinguere determinati colori.<\/li>\ngradient<\/code>: valori CSS per il gradiente.<\/li>\nslug<\/code>: un identificatore per generare le classi CSS utilizzate nell’editor a blocchi.<\/li>\n<\/ul>\n![\"Preset](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/03\/gradiente-preimpostazioni.jpg\")
disable-custom-gradients<\/code> del tema di supporto:<\/p>\nadd_theme_support( 'disable-custom-gradients' );<\/code><\/pre>\ndisable-custom-gradients<\/code> che editor-gradient-presets<\/code>:<\/p>\nadd_theme_support( 'disable-custom-gradients' );\nadd_theme_support( 'editor-gradient-presets', array() );<\/code><\/pre>\nMarkup e Modifiche di Stile nell’Editor a Blocchi<\/h4>\n
\n
editor-<\/code> \u00e8 stato rimosso dagli script di block-editor e ora gli sviluppatori dovrebbero usare solo il prefisso di block-editor-<\/code>.<\/li>\nedit-post-layout__content<\/code> \u00e8 stata rimossa dal DOM dell’editor a blocchi.<\/li>\ndiv<\/code> sono stati rimossi dai blocchi e RichText perch\u00e9 ridondanti. Questo cambiamento migliora significativamente le prestazioni e semplifica l’albero del DOM, cosa che dovrebbe essere apprezzata dagli sviluppatori di blocchi e temi<\/a>.<\/li>\nScaffolding dei Blocchi<\/h4>\n
$ npm init @wordpress\/block block-name<\/code><\/pre>\nCollezioni di Blocchi<\/h4>\n
registerBlockCollection( namespace, { title, icon } );<\/code><\/pre>\n\n
namespace<\/code>: abbinato a un prefisso di blocco.<\/li>\ntitle<\/code>: \u00e8 l’etichetta riportata nell’inseritore di blocchi.<\/li>\nicon<\/code>: \u00e8 l’icona mostrata con il titolo nell’inseritore di blocchi.<\/li>\n<\/ul>\nVariazioni di Blocchi<\/h4>\n