Stylingknappar i WordPress-blockteman

En liten stund tillbaka, Ganesh Dahal skrev ett inlägg här på CSS-Tricks svarade på en tweet som frågade om att lägga till CSS-boxskuggor på WordPress-block och element. Det finns många bra grejer där som utnyttjar nya funktioner som levereras i WordPress 6.1 som ger kontroller för att applicera skuggor på saker direkt i Block Editor och Site Editor UI.

Ganesh berörde kort knappelement i det inlägget. Jag vill ta upp det och gå djupare in på metoder för stylingknappar i WordPress-blockteman. Närmare bestämt kommer vi att öppna en ny theme.json fil och bryt ner olika metoder för att utforma knappar i schemat.

Varför knappar, frågar du? Det är en bra fråga, så låt oss börja med det.

De olika typerna av knappar

När vi pratar om knappar i sammanhanget med WordPress Block Editor, måste vi skilja mellan två olika typer:

1. Barnblock inuti knappblocket
2. Knappar som är kapslade i ett annat block (t.ex. blocket Post Comments Form)

Om vi ​​lägger till båda dessa block i en mall har de samma utseende som standard.

Men uppmärkningen är väldigt annorlunda:

<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>

Som vi kan se är HTML-taggnamnen olika. Det är de vanliga klasserna - .wp-block-button och .wp-element-button — som säkerställer konsekvent stil mellan de två knapparna.

Om vi ​​skulle skriva CSS skulle vi rikta in oss på dessa två klasser. Men som vi vet har WordPress-blockteman ett annat sätt att hantera stilar, och det är genom theme.json fil. Ganesh täckte också detta i detalj, och du skulle göra bra att läsa hans artikel.

Så, hur definierar vi knappstilar i theme.json utan att skriva riktig CSS? Låt oss göra det tillsammans.

Skapa basstilarna

theme.json är en strukturerad uppsättning scheman skrivna i egenskap:värdepar. Toppnivåegenskaperna kallas "sektioner", och vi kommer att arbeta med styles sektion. Det är här alla stylinginstruktioner går.

Vi kommer att fokusera specifikt på elements i styles. Denna väljare är inriktad på HTML-element som delas mellan block. Det här är det grundläggande skalet vi arbetar med:

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

Så vad vi behöver göra är att definiera en button elementet.

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

Att button motsvarar HTML-element som används för att markera knappelement på gränssnittet. Dessa knappar innehåller HTML-taggar som kan vara någon av våra två knapptyper: en fristående komponent (dvs. knappblocket) eller en komponent som är kapslad i ett annat block (t.ex. Post Comment-blocket).

Istället för att behöva styla varje enskilt block skapar vi delade stilar. Låt oss gå vidare och ändra standardbakgrunden och textfärgen för båda typerna av knappar i vårt tema. Det finns en color föremål där inne som i sin tur stödjer background och text egenskaper där vi anger de värden vi vill ha:

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

Detta ändrar färgen på båda knapptyperna:

Om du öppnar DevTools och tittar på CSS som WordPress genererar för knapparna ser vi att .wp-element-button class lägger till stilarna vi definierade i theme.json:

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

Det är våra standardfärger! Därefter vill vi ge användarna visuell feedback när de interagerar med knappen.

Implementera interaktiva knappstilar

Eftersom det här är en sida som handlar om CSS, skulle jag slå vad om att många av er redan är bekanta med de interaktiva tillstånden för länkar och knappar. Vi kan :hover muspekaren över dem, flikar du in dem :focus, klicka på dem för att göra dem :active. Heck, det finns till och med en :visited tillstånd för att ge användarna en visuell indikation på att de har klickat på detta tidigare.

De är CSS-pseudoklasser och vi använder dem för att rikta in en länks eller knapps interaktioner.

I CSS kan vi utforma en :hover ange så här:

a:hover { /* Styles */
}

In theme.json, kommer vi att utöka vår befintliga knappdeklaration med dessa pseudoklasser.

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

Lägg märke till den "strukturerade" karaktären av detta. Vi följer i princip en disposition:

Vi har nu en fullständig definition av vår knapps standard och interaktiva stilar. Men vad händer om vi vill utforma vissa knappar som är kapslade i andra block?

Stylingknappar kapslade i enskilda block

Låt oss föreställa oss att vi vill att alla knappar ska ha våra basstilar, med ett undantag. Vi vill att knappen Skicka i formulärblocket Posta kommentar ska vara blå. Hur skulle vi uppnå det?

Detta block är mer komplext än knappblocket eftersom det har fler rörliga delar: formuläret, inmatningar, instruktiv text och knappen. För att rikta in knappen i det här blocket måste vi följa samma typ av JSON-struktur som vi gjorde för button element, men tillämpas på formulärblocket Post Comment Form, som är mappat till core/post-comments-form element:

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

Observera att vi inte längre arbetar i elements längre. Istället jobbar vi inne blocks som är reserverad för att konfigurera faktiska block. Knappar, däremot, anses vara ett globalt element eftersom de kan kapslas i block, även om de också är tillgängliga som ett fristående block.

JSON-strukturen stöder element inom element. Så om det finns en button element i Post Comment Form-blocket, kan vi rikta in det i core/post-comments-form blockera:

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

Den här väljaren betyder att vi inte bara riktar in oss på ett specifikt block – vi riktar oss mot ett specifikt element som finns i det blocket. Nu har vi en standarduppsättning knappstilar som tillämpas på alla knappar i temat, och en uppsättning stilar som gäller för specifika knappar som finns i blocket Post Comment Form.

CSS som genereras av WordPress har en mer exakt väljare som ett resultat:

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

Och vad händer om vi vill definiera olika interaktiva stilar för knappen Post Comment Form? Det är samma affär som vi gjorde det för standardstilarna, bara de är definierade i core/post-comments-form blockera:

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

Hur är det med knappar som inte är i block?

WordPress genererar automatiskt och tillämpar rätt klasser för att mata ut dessa knappstilar. Men vad händer om du använder ett "hybrid" WordPress-tema som stöder block och redigering på hela webbplatsen, men som också innehåller "klassiska" PHP-mallar? Eller vad händer om du gjorde ett anpassat block, eller till och med har en äldre kortkod, som innehåller knappar? Ingen av dessa hanteras av WordPress stilmotor!

Inga problem. I alla dessa fall skulle du lägga till .wp-element-button klass i mallen, blocket eller kortkodsuppmärkningen. Stilarna som genereras av WordPress kommer sedan att tillämpas i dessa fall.

Och det kan finnas vissa situationer där du inte har kontroll över uppmärkningen. Till exempel kan en del blockplugin vara lite för egensinniga och frikostigt tillämpa sin egen stil. Det är där du vanligtvis kan gå till alternativet "Avancerat" i blockets inställningspanel och tillämpa klassen där:

Inslagning upp

När du skriver "CSS" i theme.json kan kännas besvärligt i början, jag har upptäckt att det blir en andra natur. Precis som CSS finns det ett begränsat antal egenskaper som du kan använda antingen brett eller mycket snävt med hjälp av rätt väljare.

Och låt oss inte glömma de tre huvudsakliga fördelarna med att använda theme.json:

1. Stilarna tillämpas på knappar i både front-end-vyn och blockredigeraren.
2. Din CSS kommer att vara kompatibel med framtida WordPress-uppdateringar.
3. De genererade stilarna fungerar med både blockteman och klassiska teman - det finns ingen anledning att duplicera något i en separat stilmall.

Om du har använt theme.json stilar i dina projekt, dela gärna med dig av dina erfarenheter och tankar. Jag ser fram emot att läsa alla kommentarer och feedback!

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/