\u00c8 un sacco di roba, vero? Quindi non perdiamo altro tempo e scopriamo subito le novit\u00e0 di WordPress 6.4.<\/p>\n
Block hook<\/h2>\n
I block hook<\/a> (precedentemente chiamati blocchi ad inserimento automatico<\/a>) consentono ai plugin di interagire automaticamente con l’editor di Gutenberg<\/a>.<\/p>\n Pi\u00f9 precisamente, grazie ai block hook, un blocco pu\u00f2 essere collocato automaticamente in una posizione specifica quando un altro blocco viene aggiunto al contenuto.<\/p>\n Due principi guidano il funzionamento dei block hook:<\/p>\n 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 Inoltre, la nota di sviluppo<\/a> avverte che:<\/p>\n a partire da WordPress 6.4, non \u00e8 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.<\/p><\/blockquote>\n Cliccate qui per saperne di pi\u00f9 sui blocchi statici e dinamici<\/a>.<\/p>\n \u00c8 possibile implementare i block hook in due modi: utilizzando il file block.json<\/strong> o il nuovo filtro Il file block.json<\/strong> offre un modo semplice e veloce per agganciare un blocco di terze parti, ma non offre una grande flessibilit\u00e0: un blocco inserito automaticamente tramite block.json<\/strong> verr\u00e0 agganciato a tutte le istanze della destinazione in modo incondizionato.<\/p>\n Si possono aggiungere block hook utilizzando la nuova propriet\u00e0 \u00c8 possibile impostare una delle seguenti posizioni:<\/p>\n Ad esempio, si pu\u00f2 agganciare un blocco a ogni blocco Spacer usando Quando si utilizza Un modo pi\u00f9 flessibile per agganciare i blocchi a un target \u00e8 quello di utilizzare il nuovo filtro La funzione di callback di Per ulteriori approfondimenti tecnici sui block hook, si legga la nota di sviluppo<\/a>.<\/p>\n I block pattern sono un efficace strumento di progettazione che pu\u00f2 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<\/a>.<\/p>\n \u00c8 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<\/a> con un file .php. Al giorno d’oggi i pattern sono cos\u00ec importanti in WordPress che abbiamo pubblicato una guida approfondita su tutto ci\u00f2 che riguarda i block pattern<\/a>.<\/p>\n Detto questo, scopriamo quali sono le novit\u00e0 del sistema di pattern con WordPress 6.4.<\/p>\n 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.<\/p>\n A partire da WordPress 6.4, \u00e8 anche possibile aggiungere una categoria per il proprio pattern in modo da identificarlo pi\u00f9 facilmente<\/a> nell’editor del sito e dei post.<\/p>\n \u00c8 anche possibile cambiare le categorie quando si modifica il pattern.<\/p>\n Inoltre, la scheda Pattern sincronizzati<\/strong> del block inserter \u00e8 stata rimossa e ora potete accedere a tutti i vostri pattern dalla stessa scheda Pattern<\/strong>.<\/p>\n \u00c8 anche pi\u00f9 facile importare o esportare i pattern<\/a> come JSON dall’editor del sito.<\/p>\n Altre<\/a> modifiche<\/a> migliorano la compatibilit\u00e0 dei modelli con i temi Classic e aprono la strada a future implementazioni.<\/p>\n Twenty Twenty-Four \u00e8 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.<\/p>\n Twenty Twenty-Four non aggiunge funzionalit\u00e0 al sito web. Si tratta piuttosto di una raccolta di template e pattern che, combinati insieme, permettono di creare un’ampia variet\u00e0 di siti web.<\/p>\n 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.<\/p>\n Abbiamo un articolo completo sul nuovo tema Twenty Twenty-Four<\/a>. Dategli un’occhiata per avere una visione pi\u00f9 approfondita.<\/p>\n Con WordPress 6.4 sono stati introdotti diversi strumenti e funzioni di design. Le pi\u00f9 interessanti sono:<\/p>\n Il blocco Contenuto \u00e8 figlio del blocco Loop di query<\/a> ed \u00e8 particolarmente utile quando si ha bisogno di personalizzare l’aspetto del contenuto in un loop di query.<\/p>\n \u00c8 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.<\/p>\n Con WordPress 6.4, il blocco Contenuto \u00e8 stato migliorato e ora supporta i colori<\/a> per il testo, lo sfondo e i link.<\/p>\n Con WordPress 6.4 \u00e8 stato aggiunto un nuovo supporto per il blocco immagine di sfondo<\/a>, con il blocco Gruppo abilitato<\/a> per impostazione predefinita.<\/p>\n Quando un tema utilizza la funzione L’impostazione di un’immagine di sfondo aggiunge la propriet\u00e0 Ci sono due modi per aggiungere il supporto alle immagini di sfondo ai temi. Il primo modo, il pi\u00f9 semplice, \u00e8 quello di optare per la propriet\u00e0 Se avete bisogno di un controllo pi\u00f9 granulare sugli strumenti di progettazione, potete utilizzare la propriet\u00e0 Un nuovo toggle Espandi al clic<\/strong> nel pannello delle impostazioni delle immagini del blocco permette di attivare\/disattivare l’effetto lightbox<\/a> sulle immagini. Questa \u00e8 la prima iterazione di questa funzionalit\u00e0, che dovrebbe essere ulteriormente migliorata con le prossime versioni.<\/p>\n L’effetto lightbox funziona anche con i filtri duotone, ma \u00e8 poco chiaro quando si tratta di gallerie di immagini. Al momento in cui scriviamo, non \u00e8 possibile abilitare l’effetto lightbox a livello di galleria ed \u00e8 necessario abilitare la funzione sulle singole immagini.<\/p>\n 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.<\/p>\n Una nuova opzione di orientamento del testo<\/a> 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<\/strong>.<\/p>\n Questa funzione \u00e8 disabilitata per impostazione predefinita. Gli sviluppatori di temi possono aggiungere il supporto per l’orientamento del testo aggiungendo una nuova impostazione Potete anche impostare un comportamento predefinito diverso per blocchi specifici. L’esempio seguente mostra come impostare l’orientamento di WordPress 6.4 introduce anche alcuni miglioramenti per il blocco Note a pi\u00e8 di pagina<\/a>. Ora supporta il colore dei link, dello sfondo e del testo<\/a>. Inoltre fornisce controlli per la tipografia, le dimensioni e i bordi<\/a>.<\/p>\n I controlli del colore del testo e dei link sono espansi per impostazione predefinita. Gli altri controlli vengono chiusi al caricamento della pagina.<\/p>\n I pulsanti sono ora presenti nell’elenco degli elementi interni consentiti<\/a> del blocco di navigazione.<\/p>\n Quando si crea una nuova voce di menu, si pu\u00f2 facilmente trasformarla in un pulsante dalla barra degli strumenti del blocco.<\/p>\n 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:<\/p>\n Introdotta per la prima volta con WordPress 6.3<\/a>, la Palette dei comandi permette di eseguire le azioni pi\u00f9 utilizzate nell’interfaccia dell’editor del sito. WordPress 6.4 segna un nuovo passo avanti con un aggiornamento del design<\/a> e alcuni miglioramenti aggiuntivi.<\/p>\n Le immagini qui sotto mostrano un esempio del diverso comportamento della palette dei comandi in WordPress 6.3 e 6.4.<\/p>\n Questa versione aggiunge anche alcuni nuovi comandi<\/a> 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.<\/p>\n Una leggera modifica elimina i verbi<\/a> dall’inizio di molti comandi. Questo migliora la ricercabilit\u00e0 e la chiarezza di alcuni comandi.<\/p>\n La nuova versione aggiunge anche i comandi di selezione dei blocchi. Per vederlo in azione, selezionate alcuni blocchi nell’Editor del sito, premete Si possono eseguire diversi comandi su una selezione di blocchi<\/a>. Ad esempio, potete raggruppare alcuni blocchi:<\/p>\n E potete anche disaggregarli.<\/p>\n Al momento in cui scriviamo, i comandi di selezione dei blocchi includono Aggiungi prima<\/strong>, Aggiungi dopo<\/strong>, Elimina<\/strong>, Duplica<\/strong>, Sposta in<\/strong>, Raggruppa<\/strong>, Disaggrega<\/strong> e Trasforma in<\/strong>.<\/p>\n La Vista Elenco<\/strong> 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. \u00c8 particolarmente utile con strutture complesse di blocchi annidati perch\u00e9 permette di espandere e chiudere gruppi di elementi e di eseguire diverse azioni su singoli blocchi, gruppi e pattern.<\/p>\n A partire da WordPress 6.4, si pu\u00f2 anche rinominare un gruppo di blocchi<\/a>, visualizzare l’anteprima delle immagini<\/a> per i blocchi Galleria e Immagine, duplicare i blocchi<\/a> utilizzando la scorciatoia Quando si modificano blocchi con pi\u00f9 figli, lavorare con i blocchi interni pu\u00f2 essere complicato. Questo \u00e8 particolarmente vero quando si tratta del blocco Navigazione<\/a>.<\/p>\n 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.<\/p>\n Da WordPress 6.4, la barra degli strumenti del blocco figlio \u00e8 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<\/a> del genitore.<\/p>\n La barra degli strumenti fissata \u00e8 attualmente implementata<\/a> nei blocchi Navigazione<\/a>, Elenco<\/a> e Citazione<\/a>.<\/p>\n Pi\u00f9 di 100 aggiornamenti sulle prestazioni sono stati inseriti nel core, oltre a diverse modifiche per gli sviluppatori di temi. Vediamo alcuni cambiamenti interessanti.<\/p>\n Le strategie di script loading sono state introdotte con WordPress 6.3<\/a> e forniscono un modo per evitare che uno script venga caricato in un ordine inaspettato nell’albero delle dipendenze degli script utilizzando gli attributi Con WordPress 6.4, le strategie di script loading sono state implementate per gli script del frontend<\/a> nel core e nei temi in bundle.<\/p>\n Inoltre, a partire da WordPress 6.4, gli script “che vengono caricati con l’attributo Altre modifiche migliorano la sicurezza del core e la manutenibilit\u00e0. Per una panoramica pi\u00f9 tecnica sul caricamento degli script, consultate la nota di WP 6.4<\/a>.<\/p>\n A partire da WordPress 6.4, le pagine degli allegati per le nuove installazioni di WordPress sono completamente disabilitate<\/a>.<\/p>\n 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<\/a> e potrebbero causare un’esperienza negativa per gli utenti.<\/p>\n A partire da WordPress 6.4, un’opzione del database Questa opzione \u00e8 impostata su Gli amministratori del sito possono modificare questo valore tramite WP CLI:<\/p>\n Oppure visitando wp-admin\/options.php<\/strong> sul sito web e modificando il valore dell’opzione \n
register_block_pattern<\/code>. Non funzionano nei contenuti dei post, nei template e nelle parti di template modificati e nei pattern generati dagli utenti.<\/p>\nhooked_block_types<\/code>.<\/p>\nUsare i block hook tramite block.json<\/h3>\n
blockHooks<\/code>, che accetta un oggetto di coppie chiave\/valore dove la chiave \u00e8 il nome del blocco che si vuole agganciare e il valore specifica la sua posizione rispetto al blocco di destinazione.<\/p>\n\n
before<\/code>, prima del blocco di destinazione<\/li>\nafter<\/code>, dopo il blocco di destinazione<\/li>\nfirstChild<\/code> del blocco contenitore di destinazione<\/li>\nlastChild<\/code> del blocco contenitore di destinazione<\/li>\n<\/ul>\nblockHooks<\/code> in questo modo:<\/p>\n{\n blockHooks: {\n 'core\/spacer': 'after'\n }\n}<\/code><\/pre>\nfirstChild<\/code> o lastChild<\/code> nel block.json<\/strong>, nel Block Inspector un nuovo pannello Plugins<\/strong> elenca i blocchi destinati all’inserimento automatico, con degli interruttori<\/a> che consentono di attivare o disattivare l’inserimento<\/a> del blocco automatico.<\/p>\n![\"Inserimento](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/auto-inserting-blocks-enabled.jpg\")
Usare i block hook utilizzando
hooked_block_types<\/code><\/h3>\nhooked_block_types<\/code>. Questo permette di agganciare i blocchi senza condizioni, proprio come il metodo block.json<\/strong>, 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.<\/p>\nhooked_block_types<\/code> accetta quattro parametri:<\/p>\n\n
$hooked_blocks<\/code> – Un array di blocchi agganciati.<\/li>\n$position<\/code> – Pu\u00f2 essere before<\/code>, after<\/code>, first_child<\/code>, o last_child<\/code>.<\/li>\n$anchor_block<\/code> – Il nome del blocco di ancoraggio.<\/li>\n$context<\/code> – Il template di blocco, la parte di template o il pattern a cui appartiene il blocco di ancoraggio.<\/li>\n<\/ul>\nMiglioramenti al sistema dei pattern<\/h2>\n
![\"Creare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-create-pattern.jpg\")
![\"Crere](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-create-pattern-categories.jpg\")
![\"Modificare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-pattern-categories.jpg\")
![\"Schede](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-block-inserter-tabs-compared.jpg\")
![\"Esportazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-export-as-json.jpg\")
Twenty Twenty-Four<\/h2>\n
Nuovi strumenti e funzioni di design<\/h2>\n
Controlli del colore per il blocco Contenuto<\/h3>\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-content-block.jpg\")
![\"Impostazioni](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-content-block-color-settings.jpg\")
Supporto del blocco immagine di sfondo<\/h3>\n
![\"Controllo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-background-image.jpg\")
appearanceTools<\/code> nel file theme.json<\/strong>, il pannello Sfondo visualizza il controllo dell’immagine di sfondo corrispondente, che mostra anche un’anteprima dell’immagine di sfondo.<\/p>\nbackground-image<\/code> all’elemento div<\/code> del blocco insieme a una dichiarazione background-size: cover<\/code> che assicura che l’immagine copra il blocco del gruppo.<\/p>\nappearanceTools<\/code>. Questo permette di utilizzare diversi strumenti di progettazione, tra cui le immagini di sfondo.<\/p>\nbackgroundImage<\/code> nel theme.json<\/strong> in questo modo:<\/p>\n{\n \"settings\": {\n \"background\": {\n \"backgroundImage\": true\n }\n }\n}<\/code><\/pre>\nEffetto Lightbox sulle immagini<\/h3>\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-enable-lightbox.jpg\")
Orientamento verticale del testo<\/h3>\n
![\"Impostazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-text-orientation.jpg\")
writingMode<\/code> al loro theme.json<\/strong>:<\/p>\n{\n settings: {\n \"typography\": {\n \"writingMode\": true\n }\n }\n}<\/code><\/pre>\nvertical-rl<\/code> per tutti i blocchi di paragrafi:<\/p>\n{\n \"styles\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"writingMode\": \"vertical-rl\"\n }\n },\n }\n }\n}<\/code><\/pre>\nMiglioramenti per il blocco Note a pi\u00e8 di pagina<\/h3>\n
![\"Impostazioni](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-footnotes-settings.jpg\")
Pulsanti consentiti nel blocco di navigazione<\/h3>\n
![\"Trasformare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-button-menu-item.jpg\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-button-menu-item-2.jpg\")
Miglioramenti all’interfaccia utente e al workflow<\/h2>\n
Palette dei comandi migliorata<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-command-palette.jpg\")
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-command-palette.jpg\")
![\"Ricerca](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-patterns-in-command-palette.jpg\")
![\"Ricerca](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-patterns-in-command-palette.jpg\")
![\"Ricerca](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-open-in-command-palette.jpg\")
![\"Ricerca](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-open-in-command-palette.jpg\")
cmd + k<\/code> (MacOS) o ctrl + k<\/code> (Windows) e inserite una chiave di ricerca come “trasforma”. Dovreste vedere i seguenti suggerimenti:<\/p>\n![\"Comandi](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-transform-command.jpg\")
![\"Creare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-group-command.jpg\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-ungroup-command.jpg\")
Vista elenco migliorata<\/h3>\n
![\"Vista](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-list-view.jpg\")
![\"Vista](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-list-view.jpg\")
cmd + shift + d<\/code> (ctrl + shift + d<\/code> su Windows).<\/p>\n![\"Rinominare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-rename-group.jpg\")
Barre degli strumenti fissate<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-select-list.jpg\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-select-list-item.jpg\")
Miglioramenti delle prestazioni e altre modifiche per gli sviluppatori<\/h2>\n
Strategie di script loading<\/h3>\n
async<\/code> e defer<\/code>.<\/p>\ndefer<\/code> sono stati spostati dal footer a head<\/code> in modo che vengano scoperti prima durante il caricamento del documento e possano essere eseguiti prima una volta che il documento \u00e8 stato caricato”.<\/p>\nModifiche alle pagine degli allegati<\/h3>\n
wp_attachment_pages_enabled<\/code> controlla il comportamento delle pagine degli allegati.<\/p>\n1<\/code> per i siti web esistenti (pagine degli allegati abilitate) e su 0<\/code> per i nuovi siti web (pagine degli allegati disabilitate) a partire da WordPress 6.4.<\/p>\nwp option set wp_attachment_pages_enabled 0|1<\/code><\/pre>\nwp_attachment_pages_enabled<\/code>.<\/p>\n![\"Modifica](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-wp_attachment_pages_enabled.png\")
Componente ProgressBar<\/h3>\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-progress-bar-component-1.jpg\")