Mi sono imbattuto in questo tweet di Ana Segota alla ricerca di un modo per aggiungere un CSS box-shadow allo stato al passaggio del mouse di un pulsante in WordPress nel file theme.json file.
Lei sta chiedendo perché theme.json è dove WordPress vuole che iniziamo a spostare gli stili di base per i temi a blocchi. Tradizionalmente, ci occupavamo di qualsiasi stile style.css quando si lavora su un tema “classico”. Ma con il tema predefinito Twenty Twenty-Three (TT3) recentemente distribuito con WordPress 6.1, spostando tutti i suoi stili in theme.json, ci stiamo avvicinando sempre di più alla possibilità di fare lo stesso con i nostri temi. Ne ho parlato in dettaglio in un recente articolo.
Dico "sempre più vicino" perché ci sono ancora molte proprietà e selettori CSS che non sono supportati theme.json. Ad esempio, se speri di modellare qualcosa con Mi piace perspective-origin in theme.json, semplicemente non accadrà, almeno mentre lo scrivo oggi.
Ana sta guardando box-shadow e, fortunatamente per lei, quella proprietà CSS è supportata da theme.json a partire da WordPress 6.1. Il suo tweet è datato 1 novembre, lo stesso giorno esatto in cui è stato rilasciato 6.1. Non è che il supporto per la proprietà fosse una caratteristica principale del rilascio. I titoli più grandi erano più legati alle tecniche di spaziatura e layout per blocchi e temi di blocco.
Ecco come possiamo applicare a box-shadow a un blocco specifico, ad esempio il blocco Immagine in primo piano, in theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Mi chiedo se il nuova sintassi dei colori lavori? Anche a me! Ma quando ho provato... rgb(0 0 0 / 0.66) - Non ho ottenuto nulla. Forse è già in lavorazione o potrebbe utilizzare una richiesta pull.
Facile, vero? Certo, è molto diverso dallo scrivere CSS vanigliato style.css e ci vuole un po' per abituarsi. Ma è davvero possibile a partire dalla versione più recente di WordPress.
E, ehi, possiamo fare la stessa cosa con singoli "elementi", come un pulsante. Un pulsante è un blocco in sé e per sé, ma può anche essere un blocco annidato all'interno di un altro blocco. Quindi, per applicare a box-shadow globalmente a tutti i pulsanti, faremmo qualcosa di simile in theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Ma Ana vuole aggiungere l'ombra a quella del bottone :hover stato. Per fortuna, supporto per lo stile degli stati interattivi per alcuni elementi, come pulsanti e collegamenti, utilizzando pseudo-classi, incluso :hover, :focus, :activee :visited - anche guadagnato theme.json supporto in WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Se stai usando un tema principale, puoi sicuramente sovrascrivere gli stili di un tema in un tema figlio. Qui, sto completamente sovrascrivendo gli stili dei pulsanti di TT3.
Visualizza il codice completo
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--tertiary)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
}Ecco come viene visualizzato:
Un altro modo per farlo: stili personalizzati
Il recentemente rilasciato Pixl Il tema a blocchi fornisce un altro esempio di utilizzo nel mondo reale del box-shadow proprietà in theme.json utilizzando un metodo alternativo che definisce i valori personalizzati. Nel tema, una consuetudine box-shadow proprietà è definita come .settings.custom.shadow:
{
"version": 2,
"settings": {
// etc.
"custom": {
// etc.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// etc.
}
}Quindi, più avanti nel file, il file custom shadow proprietà viene chiamata su un elemento pulsante:
{
"version": 2,
"settings": {
// etc.
},
"styles": {
"elements": {
"button": {
// etc.
"shadow": "var(--wp--custom--shadow) !important",
// etc.
":active": {
// etc.
"shadow": "2px 2px var(--wp--preset--color--primary) !important"
}
},
// etc.
}
}Non sono del tutto sicuro dell'uso di !important in tale contesto. La mia impressione è che sia un tentativo di impedire la sovrascrittura di quegli stili utilizzando l'interfaccia utente degli stili globali nell'editor del sito, che ha un'elevata specificità rispetto agli stili definiti in theme.json. Ecco un collegamento ancorato a ulteriori informazioni dal mio precedente articolo sulla gestione degli stili dei temi a blocchi.
Aggiornare: Si scopre che c'è stata un'intera discussione su questo in Pull richiesta #34689, che rileva che è stato risolto in WordPress 5.9.
E c'è di più ...
Oltre alle ombre, il CSS outline proprietà anche acquisita theme.json supporto in WordPress 6.1 e può essere applicato ai pulsanti e ai loro stati interattivi. Questo Pubbliche relazioni su GitHub mostra un buon esempio.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Puoi anche trovare i veri esempi di come il file outline proprietà funziona in altri temi, tra cui rumorosità, Blocca telae Base di blocco.
Concludendo
Chi sapeva che c'era così tanto di cui parlare con una singola proprietà CSS quando si tratta di bloccare i temi in WordPress 6.1? Abbiamo visto i metodi ufficialmente supportati per impostare a box-shadow su blocchi e singoli elementi, inclusi gli stati interattivi di un elemento pulsante. Abbiamo anche verificato come sovrascrivere le ombre in un tema figlio. E, infine, abbiamo aperto un esempio del mondo reale che definisce e imposta le ombre in una proprietà personalizzata.
Puoi trovare discussioni approfondite più dettagliate su WordPress ed è box-shadow implementazione in questo Pubbliche relazioni su GitHub. C'è anche una Proposta GitHub per aggiungere l'interfaccia utente direttamente in WordPress per impostare i valori delle ombre sui blocchi: puoi farlo passa direttamente a una GIF animata mostrando come funzionerebbe.
A proposito, Justin Tadlock recentemente sviluppato un blocco che visualizza una barra di avanzamento e controlli box shadow integrati al suo interno. Lo mostra in questo video:
Maggiori informazioni
Se desideri approfondire il box-shadow e altre proprietà CSS supportate da theme.json file in un tema a blocchi, ecco un paio di risorse che puoi utilizzare:
