Un tuffo in profondità nei temi di Twenty Twenty-Two e WordPress Block
Pubblicato: 2021-12-20Anche se un po' più tardi del previsto, stiamo ottenendo un nuovo tema predefinito di WordPress. Il suo nome è Twenty Twenty-Two!
Il nuovo tema predefinito di WordPress viene fornito con la prossima versione di WordPress 5.9. Eravamo curiosi di saperne di più sul nuovo tema, quindi abbiamo installato e testato Twenty Twenty-Two su un ambiente di sviluppo locale che esegue WordPress 5.9.
Ti mostreremo i nostri risultati prima di concludere i nostri pensieri per offrirti una panoramica approfondita dei dettagli del nuovo tema WordPress.
Twenty Twenty-Two è stato progettato per essere il tema predefinito più flessibile, leggero e personalizzabile di sempre. Fornisce un ottimo terreno di gioco per testare blocchi, modelli e modelli.
Essendo un tema a blocchi, ti aiuterà a esplorare meglio la modifica completa del sito, gli stili globali, i blocchi di navigazione e le nuove gallerie di immagini, che sono le funzionalità più attese di WordPress 5.9.
Dobbiamo dire subito che Twenty Twenty-Two è il primo tema di blocco predefinito !
Uno degli obiettivi più ambiziosi del nuovo tema è potenziare gli utenti . Con così tanti modelli e modelli disponibili, gli utenti possono creare layout complessi con pochi clic. Il resto è solo personalizzazione dello stile.
Da un punto di vista tecnico, scrivere di Twenty Twenty-Two non è molto diverso dallo scrivere delle funzionalità più recenti e potenti di WordPress 5.9. Ma Twenty Twenty-Two ci fornisce una lente d'ingrandimento per apprezzare meglio le nuove funzionalità di modifica del sito e avere un'idea migliore del futuro della piattaforma.
Quindi eccoci qui per presentarvi il nuovo tema.
Innanzitutto, esploreremo il nuovo flusso di modifica del sito che gli utenti sperimenteranno con WordPress 5.9 e Twenty Twenty-Two.
Successivamente, ci addentreremo nelle principali funzionalità del tema del blocco implementate in Twenty Twenty-Two. Imparerai a conoscere gli stili globali , i modelli di blocco , i modelli e le parti del modello.
Ma c'è molto altro da dire sui temi dei blocchi Twenty Twenty-Two e WordPress. Quindi, come capitolo bonus, forniremo una rapida panoramica su come estendere le funzionalità di Twenty Twenty-Two sfruttando il file theme.json .
Ecco una prima occhiata al prossimo tema predefinito di WordPress! Sono entusiasta di guidarlo insieme a @jffng, e speriamo entrambi che contribuirai e/o ti divertirai a usarlo! https://t.co/covjrpgFIO
— kjellr (@kjellr) 6 ottobre 2021
Mettiamoci subito al lavoro e tuffiamoci nel nuovissimo tema predefinito di WordPress Twenty Twenty-Two.
Twenty Twenty-Two porta un nuovo flusso di modifica del sito
Diverse funzionalità di modifica completa del sito entrano nel cuore di WordPress 5.9. I proprietari di siti che utilizzano l'ultima versione di WordPress con un tema a blocchi come Twenty Twenty-Two installato saranno presto in grado di:
- Crea e modifica post e pagine utilizzando più blocchi e schemi
- Personalizza le impostazioni e gli stili definiti nel file theme.json tramite l'interfaccia Stili globali
- Crea e modifica modelli per pagine e post
- Crea e modifica parti del modello per intestazione, piè di pagina e altre aree del modello
Con tutte queste funzionalità unite al nucleo, i contributori principali di WordPress hanno discusso l'evoluzione dell'architettura delle informazioni e hanno riprogettato l'intero flusso di modifica del sito.
La prima cosa che potresti notare una volta attivato Twenty Twenty-Two è che il punto di accesso all'editor del sito non si trova più nel menu principale della dashboard di WordPress, ma è stato spostato nel menu Aspetto .
Portare le funzionalità di modifica del modello e dello stile nello stesso menu Aspetto dovrebbe semplificare l'esperienza di modifica. Dovrebbe rendere più facile capire che le funzionalità a cui stai accedendo si riferiscono alla presentazione delle tue pagine.
La voce di menu Editor apre il modello della home page del sito. A seconda delle tue impostazioni di lettura, questa può essere la pagina dei tuoi ultimi post o una pagina statica.
Ora, facendo clic sull'icona di WordPress nell'angolo in alto a sinistra viene visualizzato un nuovo menu di navigazione dell'editor del sito, che include tre voci di menu: Sito , Modelli e Parti di modelli .
Diamo un'occhiata più da vicino.
L'opzione Sito apre il modello della home page (gli ultimi articoli del blog o la home page statica).
Dalla voce di menu Modelli , otterrai un elenco dei modelli disponibili. Puoi fare clic su qualsiasi modello nell'elenco per avviarlo nell'editor.
Al momento della stesura di questo articolo, Twenty Twenty-Two fornisce 11 modelli.
Cliccando sull'icona con i puntini di sospensione ( ︙ ) a destra puoi cancellare le tue personalizzazioni.
A differenza dei modelli di temi, i modelli personalizzati possono solo essere rinominati o rimossi (ma puoi modificare i modelli personalizzati nell'editor dei post).
La voce di menu Parti modello elenca le parti modello disponibili che puoi aprire nell'editor per le tue personalizzazioni.
Troverai quattro parti del modello aggiunte a Twenty Twenty-Two per impostazione predefinita. Passando il cursore su un modello modificato, viene visualizzata una descrizione comando che ti informa che il modello è stato personalizzato.
Puoi cancellare queste personalizzazioni facendo clic sull'icona con i puntini di sospensione ( ︙ ) a destra.
Modifica di modelli e parti di modelli
L' editor fornisce l'interfaccia per personalizzare la struttura dei modelli e delle parti del modello.
Qui puoi facilmente aggiungere o modificare blocchi e schemi e le tue modifiche verranno automaticamente applicate a ogni pagina che utilizza quel modello.
L'immagine seguente mostra il modello di pagina 404 nell'editor. È un modello piuttosto semplice, che include solo un'intestazione, un paragrafo e una casella di ricerca. Tuttavia, ci dà una buona comprensione di come funziona l'interfaccia utente.
Qui puoi apportare modifiche e personalizzare i modelli in base alle tue esigenze. Ad esempio, potresti voler aggiungere un modello Griglia di post con immagini per aumentare il coinvolgimento dei tuoi visitatori e invitarli a sfogliare il contenuto del tuo sito web.
Il menu a discesa dell'intestazione nella parte superiore dell'editor dei modelli visualizza un elenco delle aree dei modelli disponibili. Lo stesso elenco viene visualizzato nella scheda Modello nella barra laterale Impostazioni .
Facendo clic su qualsiasi area del modello (ad es. Intestazione), verrai portato direttamente alla parte del modello che desideri modificare.
Se si fa clic sull'icona con i puntini di sospensione a destra, si accede all'editor di parti modello isolato .
L'editor delle parti del modello fornisce anche un paio di maniglie trascinabili, che consentono di controllare il comportamento del modello a diverse risoluzioni dello schermo.
Una volta che sei soddisfatto delle modifiche, salva le modifiche e torna all'editor di modelli principale per controllare il risultato finale.
Se vuoi approfondire la nuova architettura dell'informazione, ti consigliamo di consultare i seguenti articoli:
- Concetti di IA per la modifica del sito: come far emergere e accedere a nuove funzionalità
- Concetti di iA di modifica del sito – Parte 2
Twenty Twenty-Two al suo interno: una rapida panoramica di theme.json
Per comprendere appieno come funzionano Twenty Twenty-Two e i temi a blocchi (come Bricksy), diamo un'occhiata alla nuova configurazione del tema e al nuovo meccanismo di stile basato sul file theme.json .
Introdotto con WordPress 5.8, questo nuovo meccanismo consente agli sviluppatori di temi di configurare l'editor e aggiungere il supporto delle funzionalità da un punto di configurazione centrale.
In Twenty Twenty-Two, il file theme.json ha la struttura seguente:
{ "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }Diamo una rapida occhiata a ciascuna sezione.
Versione
Il campo version descrive la versione della specifica, che è attualmente 2 .
Impostazioni
La sezione delle settings definisce le impostazioni a livello globale o di blocco. Le impostazioni definite al livello superiore influiscono su tutti i blocchi, ma i blocchi possono sovrascrivere individualmente le impostazioni globali. In Twenty Twenty-Two troverai le seguenti impostazioni:
{ "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }Le impostazioni predefinite sono chiamate preimpostazioni e vengono utilizzate per generare proprietà personalizzate CSS e nomi di classi in base a una convenzione di denominazione specifica:
- Proprietà personalizzata CSS:
--wp--preset--{preset-category}--{preset-slug} - Nome classe CSS:
.has-{preset-slug}-{preset-category}
Una volta che un tema ha definito le sue preimpostazioni, le corrispondenti proprietà personalizzate CSS possono essere utilizzate per definire lo stile di blocchi ed elementi nella sezione degli styles .
Stili
La sezione styles è dove i temi definiscono gli stili predefiniti di blocchi ed elementi. Vedi, ad esempio, i seguenti stili Twenty Twenty-Two per il blocco Button principale:
{ "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }Noterai le proprietà personalizzate CSS utilizzate nelle dichiarazioni di proprietà.
Modelli personalizzati
La sezione customTemplates è dove un tema dichiara i suoi modelli personalizzati. I campi name e title sono obbligatori. I temi possono anche dichiarare quale tipo di post può utilizzare il modello impostando la proprietà postTypes .
Twenty Twenty-Two fornisce quattro modelli personalizzati:
{ "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }Troverai i file .html corrispondenti nella cartella dei modelli di blocco .
Parti del modello
La sezione templateParts include le definizioni delle parti del modello:
{ "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] } I campi name e title sono obbligatori. I temi possono anche dichiarare un termine di area , in cui la parte del modello verrà renderizzata nell'editor.
I file .html delle parti del modello si trovano nella cartella parti del modello .
Ora che sai di più su theme.json di Twenty Twenty-Two , possiamo esplorare le funzionalità del tema e la nuova interfaccia di modifica in modo più approfondito.
Immergiamoci negli stili globali di Twenty Twenty-Two .
Stili globali in Twenty Twenty-Two
Se guardi Twenty Twenty-Two' style.css, potresti essere sorpreso di notare che contiene un numero minimo di dichiarazioni CSS. Il motivo è che gli stili sono dichiarati nel file theme.json in temi basati su blocchi .
WordPress 5.9 farà un ulteriore passo avanti, introducendo una nuova funzionalità che consente agli utenti di temi a blocchi di personalizzare l'aspetto degli elementi del sito da un'interfaccia utente chiamata Stili globali.
È possibile accedere all'interfaccia Stili globali dalla nuova icona Stili posta nell'angolo in alto a destra dell'Editor (vedi anche L'interfaccia Stili globali).
Facendo clic su quell'icona viene visualizzata una nuova barra laterale Stili che include tre pannelli separati:
- Un pannello Anteprima , che mostra un'anteprima delle tue personalizzazioni
- Un pannello Stili globali che fornisce l'accesso a gruppi specifici di controlli per Tipografia , Colori e Layout
- Un elemento Blocchi che fornisce l'accesso alle impostazioni di stile a livello di blocco
Tavolozza dei colori di Twenty Twenty-Two
Il pannello Colori consente di modificare le tavolozze disponibili e di assegnare o modificare i colori per Sfondo , Testo o Collegamenti .
Nel pannello Tavolozza , puoi personalizzare le tavolozze Tema o Predefinito e persino creare la tua tavolozza personalizzata.
Hai già trovato il codice che genera i controlli colore?
In caso contrario, apri theme.json di Twenty Twenty-Two nel tuo editor di codice preferito. Troverai le seguenti dichiarazioni sulla tavolozza dei colori:
{ "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }L'immagine sotto mostra come il codice sopra corrisponda alla tavolozza dei colori di Twenty Twenty-Two.
Ora supponiamo che tu voglia cambiare il colore di sfondo predefinito per un particolare blocco. La scelta di un colore diverso per lo sfondo del blocco assegnerà semplicemente una variabile CSS diversa alla proprietà background-color dell'elemento. L'immagine qui sotto ne fornisce un esempio:
E questo è tutto! Non sarà necessario aggiungere una singola riga di codice CSS personalizzato al Customizer o creare un tema figlio per questo.
Ma continuiamo ad esplorare gli stili globali di Twenty Twenty-Two con alcuni esempi aggiuntivi.
Impostazioni tipografiche
Il pannello Tipografia è dove puoi personalizzare gli stili tipografici per gli elementi Testo e Collegamenti del tuo sito web a livello globale.
Ciascun elemento fornisce l'accesso a un gruppo di controlli per personalizzare la famiglia di caratteri, le dimensioni e l'altezza della riga.
Ti stai chiedendo quale codice genera questi controlli?
Apri il theme.json di Twenty Twenty-Two e trova la sezione typography . Vedrai le seguenti impostazioni:
{ "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }Potresti aspettarti di vedere due famiglie di caratteri e cinque dimensioni di carattere dal codice sopra. E avresti indovinato.
Ecco come il codice sopra si traduce nelle impostazioni di tipografia degli stili globali:
Puoi indovinare quale impostazione genera il controllo dell'altezza della linea . In Twenty Twenty-Two, non troverai un'impostazione specifica per questo perché è abilitata dalla proprietà appearanceTools , che è una scorciatoia per diverse dichiarazioni di impostazione (vedi sezione successiva).
Strumenti di layout e aspetto
L'ultimo elemento nella barra laterale Stili globali è il Layout . Al momento della stesura di questo articolo, include solo un controllo di padding .
In Twenty Twenty-Two, il pannello Layout è abilitato dalla proprietà di impostazione appearanceTools , un valore booleano che può essere utilizzato per abilitare più impostazioni contemporaneamente:
{ "settings": { "appearanceTools": true } } "appearanceTools": true sostituisce semplicemente il seguente blocco di dichiarazioni:
{ 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }OK: ora si spera che tu capisca in che modo le impostazioni dichiarate nel file theme.json corrispondono ai controlli degli stili globali corrispondenti.
Manca ancora un pezzo del nostro puzzle per ottenere il quadro completo del nuovo tema predefinito di WordPress: i modelli di blocco .
Ventidue modelli di blocchi
Si potrebbe dire che Twenty Twenty-Two è principalmente una raccolta di modelli, e praticamente lo è. In Twenty Twenty-Two troverai tonnellate di schemi di blocchi pronti per l'uso tra cui puoi scegliere per costruire strutture sorprendenti e imprevedibili di blocchi nidificati per le tue pagine web.
Il termine chiave qui è responsabilizzazione dell'utente . E questo si adatta perché, con i modelli a blocchi, puoi costruire ogni sorta di cose, da un portfolio accattivante a un sito web promozionale a pagina singola, anche se non hai alcuna conoscenza di HTML o CSS!
E WordPress 5.9 apporta miglioramenti significativi al sistema di pattern con il nuovo Pattern Explorer, uno strumento che ti consente di sfogliare i pattern in modalità a schermo intero.
Hai bisogno di un hosting velocissimo, sicuro e adatto agli sviluppatori per i siti dei tuoi clienti? Kinsta è stato creato pensando agli sviluppatori di WordPress e fornisce molti strumenti e una potente dashboard. Dai un'occhiata ai nostri piani
Il nuovo strumento consente inoltre di importare rapidamente e facilmente schemi di blocchi direttamente dalla directory dei modelli. Ciò apre nuove possibilità sia per gli utenti che per gli sviluppatori di WordPress, quindi è probabile che il suo utilizzo aumenterà considerevolmente in futuro.
Twenty Twenty-Two include molti modelli (oltre 65) in cinque categorie.
Questo solido set di modelli si abbina perfettamente ai modelli e alle parti del modello forniti con il nuovo tema predefinito, offrendo un'esperienza di editing davvero sorprendente.
Se non hai ancora avuto la possibilità di sperimentare con i modelli di blocco, ti mostreremo perché sono considerati strumenti così potenti con un semplice esempio.
Si supponga di voler rimuovere il piè di pagina predefinito dai modelli Indice e Post singolo e sostituirlo con un modello di blocco Twenty Twenty-Two diverso.
Avvia l'editor del sito dal menu Aspetto o dal pulsante della barra degli strumenti del frontend di WordPress per personalizzare il modello dell'indice.
Fare clic sul pulsante Indice per visualizzare il menu a discesa dell'intestazione che mostra l'elenco delle aree del modello disponibili nella pagina. Fare clic sul pulsante con i puntini di sospensione accanto a Piè di pagina e quindi su Modifica piè di pagina.
Come accennato in precedenza, questo avvierà l'editor di parti del modello isolato.
Ora apri l'inseritore di blocchi e fai clic su Patterns .
Avvia il nuovo strumento Pattern Explorer , seleziona la categoria Twenty Twenty-Two Footer e scegli il footer di tua scelta.
Ora aggiungi e modifica i blocchi in base alle tue esigenze.
Salva l'intestazione e ricontrolla il tuo sito quando sei soddisfatto delle modifiche.
L'immagine seguente mette a confronto tre modelli (Indice, Post singolo e Post singolo senza separatori) con diverse personalizzazioni di intestazione e piè di pagina:
Estensione di Twenty-Twenty-Two con un tema per bambini
La creazione di un tema figlio per un tema a blocchi è molto diversa dalla creazione di un tema figlio per un tema classico.
Ma una volta che hai una buona comprensione della struttura di un tema a blocchi, non sarà difficile creare un tema figlio per Twenty Twenty-Two o qualsiasi altro tema a blocchi.
Scopriamo quindi come personalizzare l'aspetto grafico del tuo sito web basato su Twenty Twenty-Two.
1. Impostazione di un tema figlio per ventiduedue
Nella tua directory /wp-content/themes , crea una nuova cartella e chiamala come preferisci (secondo gli standard di sviluppo dei temi). In questo esempio, abbiamo chiamato la cartella del tema child ventitwentytwo-child .
Ora hai bisogno di un file style.css . Apri il tuo editor di codice preferito e crea il seguente foglio di stile:
/* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */Come sempre, puoi modificare i campi in base alle tue esigenze.
Il tuo tema figlio è ora disponibile per l'anteprima. Puoi attivarlo nella schermata di amministrazione Aspetto > Temi .
2. Personalizzazione delle impostazioni globali
Da WordPress 5.9, i temi figlio con un file theme.json ereditano le impostazioni del tema principale. Se il file theme.json del figlio definisce un insieme di stili, questi stili si applicano sopra gli stili del genitore.
Quindi possiamo creare un file theme.json che includa solo un piccolo blocco personalizzato di impostazioni e definizioni di stile piuttosto che ridefinire tutte le nostre scelte originali.
Come dichiarare una tavolozza di colori personalizzata
Quando si crea un tema figlio per Twenty Twenty-Two, il compito più semplice è sostituire la tavolozza dei colori. Tutto quello che devi fare è definire una nuova tavolozza di colori nel theme.json di tuo figlio come mostrato di seguito:
{ "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }Salva il tuo file e torna all'editor del sito. La tavolozza dei colori definita sopra avrebbe dovuto sostituire la tavolozza dei colori predefinita di Twenty Twenty-Two.
I colori verranno mostrati in ordine sulla tavolozza stessa e i loro nomi dovrebbero seguire le migliori pratiche e le convenzioni di denominazione discusse su Github.
Puoi leggere molto di più sulle opzioni di colore di theme.json in questa panoramica approfondita di Carolina Nymark.
Come dichiarare i filtri per due tonalità personalizzati
Puoi anche sostituire i colori a due tonalità predefiniti con il tuo set di filtri personalizzato.
Per fare ciò, aggiungi semplicemente il seguente codice alle impostazioni theme.json di tuo figlio allo stesso livello della proprietà della palette :
{ "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }Salva il tuo file e controlla il risultato nell'editor dei blocchi. Dovresti vedere solo un singolo filtro a due tonalità.
3. Personalizzazione degli stili di blocco
Come accennato in precedenza, con WordPress 5.9, ora puoi personalizzare le impostazioni e gli stili di theme.json dall'interfaccia Stili globali.
Gli stili di blocco possono essere personalizzati dall'interfaccia Stili globali solo se il blocco dichiara il supporto per funzionalità specifiche nel file block.json corrispondente. Ma puoi sovrascrivere le impostazioni di blocco predefinite nel theme.json del tuo tema figlio.
Supponiamo ora di voler sovrascrivere gli stili di blocco del titolo e del gruppo del post. Tutto quello che devi fare è definire gli stili che desideri aggiungere o sostituire, come mostrato di seguito:
{ "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } } Nell'esempio sopra, abbiamo modificato la famiglia di caratteri, il colore di sfondo e i valori di riempimento per core/post-title , nonché i margini superiore e inferiore per core/group .
L'immagine qui sotto mostra il risultato come sembrerebbe sul sito pubblico:
E questo è tutto per la recensione!
Per ora non approfondiremo i temi dei bambini poiché andrebbe oltre lo scopo di questo post. Nel frattempo, troverai altri esempi di temi per bambini Twenty Twenty-Two su Github.
Sommario
Osservando più da vicino il nuovo tema predefinito di WordPress Twenty Twenty-Two e le sue caratteristiche (che lo rendono il tema predefinito più flessibile mai rilasciato), abbiamo svelato la nuova architettura delle informazioni introdotta con WordPress 5.9. Abbiamo anche avuto un'anteprima della nuova interfaccia Global Styles.
Ci sono molte nuove interessanti funzionalità in arrivo e sembra chiaro che il nuovo ambiente di editing sta diventando più robusto, affidabile e funzionale nel tempo.
Mentre molte nuove funzionalità di WordPress sono in arrivo, altre stanno scomparendo o stanno perdendo importanza. Molti utenti si chiedono cosa accadrà al Customizer e come mantenere al meglio la compatibilità con le versioni precedenti con i temi esistenti.
Tuttavia, non dovresti aspettarti di saltare improvvisamente dai temi tradizionali per bloccare i temi in un unico limite. Al momento abbiamo quattro diversi tipi di temi tra cui scegliere:
- Temi a blocchi : temi progettati per FSE
- Temi universali : temi che funzionano sia con la personalizzazione che con l'editor del sito
- Temi ibridi: temi classici che supportano le funzionalità di FSE come theme.json
- Temi classici : temi con template PHP, functions.php, ecc.
Quindi, non temere per ora: ci sono ancora molte soluzioni tra cui scegliere se non ti senti ancora pronto per passare ai temi a blocchi.
E ora tocca a te! Sei pronto per fare il grande salto e iniziare a utilizzare i temi a blocchi in questo momento? Condividi i tuoi pensieri con noi nei commenti qui sotto.