Uno degli obiettivi principali del WordPress Site Editor (e, sì, questo è ora il "nome ufficiale) serve a spostare lo stile di blocco di base da Da CSS a JSON strutturato. I file JSON sono leggibili dalla macchina, il che li rende utilizzabili dal Site Editor basato su JavaScript per la configurazione degli stili globali di un tema direttamente in WordPress.
Non è ancora tutto lì! Se guardiamo al tema predefinito Twenty Twenty-Two (TT2), c'erano due principali problemi irrisolti: interazioni stilistiche (piace :hover, :active, :focus), E i margini ed riempimento dei contenitori di layout. Puoi vedere come sono stati temporaneamente corretti nel TT2 style.css file piuttosto che trasformarlo nel file theme.json file.
WordPress 6.1 risolto questi problemi e quello che voglio fare è esaminare specificamente quest'ultimo. Ora che disponiamo di stili JSON per i margini e il riempimento dei contenitori di layout, questo ci apre a modi più flessibili e robusti per definire la spaziatura nei nostri layout tematici.
Di che tipo di spaziatura stiamo parlando?
Prima di tutto, l'abbiamo già fatto riempimento a livello di radice che è un modo elegante per descrivere l'imbottitura sul <body> elemento. È bello perché garantisce una spaziatura coerente su un elemento condiviso su tutte le pagine e i post.
Ma c'è dell'altro perché ora abbiamo un modo per i blocchi di bypassare il riempimento e allinearsi a tutta larghezza. Questo grazie a allineamenti che riconoscono il riempimento che è una nuova funzionalità opt-in in theme.json. Quindi, anche se hai un riempimento a livello di root, puoi comunque consentire, ad esempio, a un'immagine (o qualche altro blocco) di uscire e diventare a larghezza intera.
Questo ci porta ad un'altra cosa che otteniamo: schemi vincolati. L'idea qui è che tutti i blocchi nidificati nel layout rispettino la larghezza del contenuto del layout, che è un'impostazione globale, e non scorrano al di fuori di esso. Possiamo sovrascrivere quel comportamento blocco per blocco con gli allineamenti, ma ci arriveremo.
Iniziamo con…
Imbottitura a livello di radice
Ancora una volta, questo non è nuovo. Abbiamo avuto la possibilità di impostare il padding sul <body> elemento in theme.json dall'esperimento Plugin Gutenberg lo ha introdotto nella versione 11.7. Lo impostiamo sul styles.spacing oggetto, dove abbiamo margin ed padding oggetti per definire la spaziatura superiore, destra, inferiore e sinistra sul corpo:
{ "version": 2, "styles": { "spacing": { "margin": { "top": "60px", "right": "30px", "bottom": "60px", "left": "30px" }, "padding": { "top": "30px", "right": "30px", "bottom": "30px", "left": "30px" } } }
}Questa è un'impostazione globale. Quindi, se dovessimo aprire DevTools e ispezionare il file <body> elemento, vedremmo questi stili CSS:
body { margin-top: 60px; margin-right: 30px; margin-bottom: 60px; margin-left: 30px; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
}Freddo. Ma qui sta il problema di come nel mondo possiamo permettere ad alcuni blocchi di uscire da quella spaziatura per riempire lo schermo intero, da bordo a bordo. Ecco perché c'è la spaziatura, giusto? Aiuta a evitare che ciò accada!
Ma ci sono davvero molti casi in cui potresti voler uscire da quella spaziatura in un'istanza una tantum quando lavori nell'Editor blocchi. Diciamo che inseriamo un blocco Immagine su una pagina e vogliamo che diventi a larghezza intera mentre il resto del contenuto rispetta il riempimento a livello di root?
Accedere…
Allineamenti sensibili al riempimento
Durante il tentativo di creare il primo tema WordPress predefinito che definisce tutti gli stili nel file theme.json file, il lead designer Kjell Reigstad illustra gli aspetti impegnativi dell'eliminazione del padding a livello di root in questo Problema di GitHub.
Sono state create nuove funzionalità in WordPress 6.1 per risolvere questo problema. Analizziamo quelli successivi.
useRootPaddingAwareAlignments
Una nuova useRootPaddingAwareAlignments proprietà è stata creata per risolvere il problema. In realtà è stato introdotto per la prima volta nel plugin Gutenberg v13.8. Il richiesta pull originale è un bel primer su come funziona.
{ "version": 2, "settings": { "appearanceTools": true, "useRootPaddingAwareAlignments": true, // etc. },Fin dall'inizio, nota che questa è una funzionalità che dobbiamo attivare. La proprietà è impostata su false per impostazione predefinita e dobbiamo impostarlo esplicitamente su true per abilitarlo. Si noti inoltre che abbiamo appearanceTools impostato true come pure. Questo ci fa optare per i controlli dell'interfaccia utente nel Site Editor per definire i bordi, i colori dei collegamenti, la tipografia e, sì, la spaziatura che include margine e spaziatura interna.
Configurazione appearanceTools impostato true sceglie automaticamente i blocchi in margin e padding senza dover impostare nessuno dei due settings.spacing.padding or setting.spacing.margin a true.
Quando abilitiamo useRootPaddingAwareAlignments, vengono fornite proprietà personalizzate con valori di riempimento radice impostati su <body> elemento sulla parte anteriore. È interessante notare che applica anche l'imbottitura al file .editor-styles-wrapper class in modo che la spaziatura venga visualizzata quando si lavora nell'editor blocchi di back-end. Abbastanza bello!
Sono stato in grado di confermare quelle proprietà personalizzate CSS in DevTools mentre scavavo.
Abilitare useRootPaddingAwareAlignments applica anche il riempimento sinistro e destro a qualsiasi blocco che supporti i valori di larghezza "contenuto" e larghezza "larga" nell'immagine Stili globali sopra. Possiamo anche definire quei valori in theme.json:
{ "version": 2, "settings": { "layout": { "contentSize": "640px", "wideSize": "1000px" } }
}Se le impostazioni di Stili globali sono diverse da quelle definite in theme.json, gli stili globali hanno la precedenza. Puoi imparare tutto sulla gestione degli stili dei temi a blocchi nel mio ultimo articolo.
contentSizeè la larghezza predefinita per i blocchi.wideSizefornisce un'opzione di layout "ampio" e stabilisce una colonna più ampia per l'allungamento dei blocchi.
Quindi, l'ultimo esempio di codice ci darà il seguente CSS:
/* The default content container */
.wp-container-[id] > * { max-width: 640px; margin-left: auto !important; margin-right: auto !important;
} /* The wider content container */
.wp-container-[id] > .alignwide { max-width: 1000px;
}[id] indica un numero univoco generato automaticamente da WordPress.
Ma indovina cos'altro otteniamo? Anche l'allineamento completo!
.wp-container-[id] .alignfull { max-width: none;
}Guarda quello? Abilitando useRootPaddingAwareAlignments e definire contentSize ed wideSize, otteniamo anche una classe CSS di allineamento completo per un totale di tre configurazioni di contenitori per il controllo della larghezza dei blocchi che vengono aggiunti a pagine e post.
Questo si applica ai seguenti blocchi specifici del layout: Colonne, Gruppo, Contenuto del post e Ciclo di query.
Controlli di layout del blocco
Supponiamo di aggiungere a una pagina uno qualsiasi dei suddetti blocchi specifici del layout. Quando selezioniamo il blocco, l'interfaccia utente delle impostazioni del blocco ci offre nuove impostazioni di layout basate su settings.layout valori che abbiamo definito in theme.json (o l'interfaccia utente degli stili globali).
Abbiamo a che fare con blocchi molto specifici qui, quelli che possono avere altri blocchi nidificati all'interno. Quindi, queste impostazioni di layout riguardano davvero il controllo della larghezza e dell'allineamento di quei blocchi nidificati. L'impostazione "I blocchi interni utilizzano la larghezza del contenuto" è abilitata per impostazione predefinita. Se lo disattiviamo, allora non abbiamo max-width sul contenitore e i blocchi al suo interno vanno da bordo a bordo.
Se lasciamo l'interruttore attivo, i blocchi nidificati aderiranno al file contentWidth or wideWidth valori (ne parleremo tra poco). Oppure possiamo usare gli input numerici per definire custom contentWidth ed wideWidth valori in questa istanza una tantum. Questa è una grande flessibilità!
Blocchi larghi
Le impostazioni che abbiamo appena visto sono impostate sul blocco genitore. Dopo aver nidificato un blocco all'interno e averlo selezionato, abbiamo opzioni aggiuntive in quel blocco per utilizzare il contentWidth, wideWidth, o vai a tutta larghezza.
contentWidth impostazione, denominata "Nessuno" nel menu contestuale, ma può anche essere impostata su wideWidth (etichettato "Larghezza larga") o "Larghezza intera".Nota come WordPress moltiplica le proprietà personalizzate CSS di riempimento a livello di root per -1 per creare margini negativi quando si seleziona l'opzione "Larghezza intera".
.alignfull class imposta margini negativi su un blocco nidificato per garantire che occupi l'intera larghezza del viewport senza entrare in conflitto con le impostazioni di riempimento a livello di root.Utilizzo di un layout vincolato
Abbiamo appena coperto la nuova spaziatura e gli allineamenti che otteniamo con WordPress 6.1. Quelli sono specifici per i blocchi e tutti i blocchi nidificati all'interno dei blocchi. Ma WordPress 6.1 introduce anche nuove funzionalità di layout per una maggiore flessibilità e coerenza nei modelli di un tema.
Caso in questione: WordPress ha completamente ristrutturato i suoi tipi di layout Flex e Flow e ci ha dato un costretto disposizione type che semplifica l'allineamento dei layout dei blocchi nei temi utilizzando le impostazioni di larghezza del contenuto nell'interfaccia utente degli stili globali di Site Editor.
Layout flessibili, di flusso e vincolati
La differenza tra questi tre tipi di layout è negli stili che generano. Isabel Brison ha un eccellente resoconto che delinea bene le differenze, ma parafrasiamole qui come riferimento:
- Disposizione del flusso: Aggiunge la spaziatura verticale tra i blocchi nidificati nel file
margin-blockdirezione. Questi blocchi nidificati possono anche essere allineati a sinistra, a destra o al centro. - Layout vincolato: Stesso identico affare di un layout Flow, ma con vincoli di larghezza sui blocchi nidificati basati su
contentWidthedwideWidthimpostazioni (sia intheme.jsono stili globali). - Disposizione flessibile: Questo è rimasto invariato in WordPress 6.1. Utilizza Flexbox CSS per creare un layout che scorre orizzontalmente (in fila) per impostazione predefinita, ma può scorrere anche verticalmente in modo che i blocchi si sovrappongano uno sopra l'altro. La spaziatura viene applicata utilizzando il CSS
gapproprietà.
Questa nuova lista di tipi di layout crea nomi di classi semantiche per ogni layout:
| Classe di layout semantico | Tipo di layout | Blocchi supportati |
|---|---|---|
.is-layout-flow |
Disposizione del flusso | Colonne, Gruppo, Contenuto del post e Ciclo di query. |
.is-layout-constrained |
Disposizione vincolata | Colonne, Gruppo, Contenuto del post e Ciclo di query. |
.is-layout-flex |
Layout flessibile | Colonne, pulsanti, icone social |
Justin Tadlock ha un ampio articolo su i diversi tipi di layout e classi semantiche, inclusi casi d'uso ed esempi.
Aggiornamento del tema per supportare layout vincolati
Se stai già utilizzando un tema a blocchi di tua creazione, vorrai farlo aggiornalo per supportare i layout vincolati. Tutto ciò che serve è scambiare un paio di cose theme.json:
{ "version": 2, "settings": { "layout": { "type": "constrained", // replaces `"inherit": true` "type": "default", // replaces `"inherit": false` } }
}Questi sono temi a blocchi rilasciati di recente che hanno abilitato le impostazioni di spaziatura con useRootPaddingAwareAlignments e avere un aggiornamento theme.json file che definisce un layout vincolato:
Disabilitare gli stili di layout
Gli stili di layout di base sono funzionalità predefinite fornite in WordPress 6.1 Core. In altre parole, sono abilitati immediatamente. Ma possiamo disabilitarli se necessario con questo piccolo frammento functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Grande avvertimento qui: disabilitazione del supporto anche per i tipi di layout predefiniti rimuove tutto lo stile di base per quei layout. Ciò significa che dovrai creare i tuoi stili personalizzati per la spaziatura, gli allineamenti e qualsiasi altra cosa necessaria per visualizzare il contenuto in diversi modelli e contesti di blocco.
Concludendo
Essendo un grande fan delle immagini a larghezza intera, il nuovo layout contenuto di WordPress 6.1 e le funzionalità di allineamento con riconoscimento del riempimento sono due dei miei preferiti. Presi insieme ad altri strumenti tra cui, un migliore margine e controllo del padding, tipografia fluidae i blocchi List e Quote aggiornati, tra gli altri, sono una prova concreta che WordPress si sta muovendo verso una migliore esperienza di creazione di contenuti.
Ora, dobbiamo aspettare e guardare come l'immaginazione e la creatività dei normali designer e creatori di contenuti utilizzano questi incredibili strumenti e li portano a un nuovo livello.
A causa delle iterazioni di sviluppo dell'editor del sito in corso, dovremmo sempre anticipare un percorso difficile. Tuttavia, da ottimista, non vedo l'ora di vedere cosa accadrà nella prossima versione di WordPress 6.2. Alcune delle cose che sto tenendo d'occhio sono cose come caratteristiche prese in considerazione per l'inclusione, il supporto per posizionamento appiccicoso, nuovi nomi delle classi di layout per avvolgitori di blocchi interni, opzioni di allineamento del piè di pagina aggiornatee aggiunta di opzioni di layout vincolato e di flusso ai blocchi Cover.
La sezione Problemi di GitHub n. 44720 elenca le discussioni relative al layout previsto per WordPress 6.2.
Risorse addizionali
Ho consultato e fatto riferimento a molte fonti mentre scavavo in tutto questo. Ecco un lungo elenco di cose che ho trovato utili e penso che potrebbero piacerti anche tu.
Tutorial
Post di WordPress
Richieste pull e problemi di GitHub
- Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.Clicca qui
- Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
- Fonte: https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/
