Pulsanti di stile nei temi a blocchi di WordPress

Un po 'di tempo fa, Ganesh Dahal ha scritto un post qui su CSS-Tricks rispondendo a un tweet che chiedeva informazioni sull'aggiunta di box shadow CSS su blocchi ed elementi di WordPress. Ci sono un sacco di cose fantastiche che sfruttano le nuove funzionalità fornite in WordPress 6.1 che forniscono controlli per l'applicazione di ombre alle cose direttamente nell'interfaccia utente di Block Editor e Site Editor.

Ganesh ha toccato brevemente gli elementi dei pulsanti in quel post. Voglio riprenderlo e approfondire gli approcci per lo styling dei pulsanti nei temi a blocchi di WordPress. Nello specifico, apriremo un nuovo theme.json file e abbattere vari approcci ai pulsanti di stile nello schema.

Perché bottoni, chiedi? Questa è una buona domanda, quindi iniziamo con quella.

I diversi tipi di pulsanti

Quando parliamo di pulsanti nel contesto del Block Editor di WordPress, dobbiamo distinguere tra due diversi tipi:

1. Blocchi figlio all'interno del blocco Pulsanti
2. Pulsanti nidificati all'interno di altri blocchi (ad es. il blocco Modulo commenti post)

Se aggiungiamo entrambi questi blocchi a un modello, hanno lo stesso aspetto per impostazione predefinita.

Ma il markup è molto diverso:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Come possiamo vedere, i nomi dei tag HTML sono diversi. Sono le classi comuni - .wp-block-button ed .wp-element-button - che garantiscono uno stile coerente tra i due pulsanti.

Se stessimo scrivendo CSS, ci rivolgeremmo a queste due classi. Ma come sappiamo, i temi a blocchi di WordPress hanno un modo diverso di gestire gli stili, e questo avviene attraverso il theme.json file. Ganesh ha anche trattato questo in modo molto dettagliato, e faresti bene a dare una lettura al suo articolo.

Quindi, come definiamo gli stili dei pulsanti in theme.json senza scrivere CSS vero e proprio? Facciamolo assieme.

Creazione degli stili di base

theme.json è un insieme strutturato di schemi scritti in coppie proprietà:valore. Le proprietà di primo livello sono chiamate "sezioni" e lavoreremo con le styles sezione. Qui è dove vanno tutte le istruzioni per lo styling.

Ci concentreremo in particolare sul elements nel styles. Questo selettore ha come target gli elementi HTML condivisi tra i blocchi. Questa è la shell di base con cui stiamo lavorando:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Quindi quello che dobbiamo fare è definire a button elemento.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Che button corrisponde agli elementi HTML utilizzati per contrassegnare gli elementi dei pulsanti sul front-end. Questi pulsanti contengono tag HTML che potrebbero essere uno dei nostri due tipi di pulsante: un componente autonomo (ad esempio il blocco Button) o un componente annidato all'interno di un altro blocco (ad esempio il blocco Post Comment).

Piuttosto che dover modellare ogni singolo blocco, creiamo stili condivisi. Andiamo avanti e cambiamo lo sfondo predefinito e il colore del testo per entrambi i tipi di pulsanti nel nostro tema. C'è un color oggetto lì dentro che, a sua volta, sostiene background ed text properties dove impostiamo i valori che vogliamo:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Questo cambia il colore di entrambi i tipi di pulsante:

Se apri DevTools e dai un'occhiata al CSS che WordPress genera per i pulsanti, vediamo che il file .wp-element-button class aggiunge gli stili che abbiamo definito in theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Questi sono i nostri colori predefiniti! Successivamente, vogliamo fornire agli utenti un feedback visivo quando interagiscono con il pulsante.

Implementazione di stili di pulsanti interattivi

Dato che questo è un sito interamente basato sui CSS, scommetto che molti di voi hanno già familiarità con gli stati interattivi di link e pulsanti. Noi possiamo :hover il cursore del mouse su di essi, inserirli in :focus, fai clic su di essi per crearli :active. Diamine, c'è anche un :visited state per dare agli utenti un'indicazione visiva che hanno fatto clic su questo in precedenza.

Questi sono Pseudo-classi CSS ed li usiamo per indirizzare le interazioni di un link o di un pulsante.

In CSS, potremmo dare uno stile a :hover dichiarare così:

a:hover { /* Styles */
}

In theme.json, estenderemo la nostra dichiarazione di pulsante esistente con queste pseudo-classi.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Notare la natura "strutturata" di questo. Fondamentalmente stiamo seguendo uno schema:

Ora abbiamo una definizione completa degli stili predefiniti e interattivi del nostro pulsante. Ma cosa succede se vogliamo modellare determinati pulsanti che sono annidati in altri blocchi?

Pulsanti di stile nidificati in singoli blocchi

Immaginiamo di volere che tutti i pulsanti abbiano i nostri stili di base, con un'eccezione. Vogliamo che il pulsante di invio del blocco Post Comment Form sia blu. Come potremmo raggiungere questo obiettivo?

Questo blocco è più complesso del blocco Button perché ha più parti mobili: il modulo, gli input, il testo informativo e il pulsante. Per indirizzare il pulsante in questo blocco, dobbiamo seguire lo stesso tipo di struttura JSON che abbiamo utilizzato per il button elemento, ma applicato al blocco Post Comment Form, che è mappato al core/post-comments-form elemento:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Si noti che non stiamo più lavorando elements più. Invece, stiamo lavorando all'interno blocks riservato alla configurazione dei blocchi effettivi. I pulsanti, al contrario, sono considerati un elemento globale poiché possono essere nidificati in blocchi, anche se sono disponibili anche come blocco autonomo.

La struttura JSON supporta elementi all'interno di elementi. Quindi, se c'è un button elemento nel blocco Post Comment Form, possiamo sceglierlo come target nel file core/post-comments-form bloccare:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Questo selettore significa che non solo stiamo prendendo di mira un blocco specifico, ma stiamo prendendo di mira un elemento specifico contenuto in quel blocco. Ora abbiamo un set predefinito di stili di pulsante che vengono applicati a tutti i pulsanti del tema e un set di stili che si applicano a pulsanti specifici contenuti nel blocco Post Comment Form.

Di conseguenza, il CSS generato da WordPress ha un selettore più preciso:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

E se volessimo definire diversi stili interattivi per il pulsante Post Comment Form? È lo stesso affare del modo in cui lo abbiamo fatto per gli stili predefiniti, solo quelli sono definiti all'interno del file core/post-comments-form bloccare:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

E i pulsanti che non sono in blocchi?

WordPress genera e applica automaticamente le classi giuste per produrre questi stili di pulsanti. Ma cosa succede se utilizzi un tema WordPress "ibrido" che supporta i blocchi e la modifica dell'intero sito, ma contiene anche modelli PHP "classici"? O se creassi un blocco personalizzato, o addirittura avessi uno shortcode legacy, che contiene pulsanti? Nessuno di questi è gestito dal Motore di stile WordPress!

Nessun problema. In tutti questi casi, aggiungeresti il ​​file .wp-element-button class nel modello, nel blocco o nel markup dello shortcode. Gli stili generati da WordPress verranno quindi applicati in tali istanze.

E potrebbero esserci alcune situazioni in cui non hai alcun controllo sul markup. Ad esempio, alcuni plug-in di blocco potrebbero essere un po' troppo supponenti e applicare liberamente il proprio stile. È qui che in genere puoi andare all'opzione "Avanzate" nel pannello delle impostazioni del blocco e applicare la classe lì:

Concludendo

Durante la scrittura di "CSS" in theme.json potrebbe sembrare imbarazzante all'inizio, ho scoperto che diventa una seconda natura. Come i CSS, esiste un numero limitato di proprietà che puoi applicare in modo ampio o molto ristretto utilizzando i selettori giusti.

E non dimentichiamo i tre principali vantaggi dell'utilizzo theme.json:

1. Gli stili vengono applicati ai pulsanti sia nella vista frontale che nell'editor di blocchi.
2. Il tuo CSS sarà compatibile con i futuri aggiornamenti di WordPress.
3. Gli stili generati funzionano allo stesso modo con temi a blocchi e temi classici: non è necessario duplicare nulla in un foglio di stile separato.

Se hai usato theme.json stili nei tuoi progetti, per favore condividi le tue esperienze e i tuoi pensieri. Non vedo l'ora di leggere eventuali commenti e feedback!

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/