Styling af knapper i WordPress bloktemaer

Lidt tilbage, Ganesh Dahal skrev et indlæg her på CSS-Tricks svarede på et tweet, der spurgte om tilføjelse af CSS-boksskygger på WordPress-blokke og -elementer. Der er mange gode ting derinde, der udnytter nye funktioner, der blev leveret i WordPress 6.1, der giver kontrol til at anvende skygger på ting direkte i Block Editor og Site Editor UI.

Ganesh rørte kort ved knapelementer i det indlæg. Jeg vil gerne tage det op og gå dybere ind i tilgange til stylingknapper i WordPress-bloktemaer. Specifikt vil vi åbne en frisk theme.json arkivere og nedbryde forskellige tilgange til stylingknapper i skemaet.

Hvorfor knapper, spørger du? Det er et godt spørgsmål, så lad os starte med det.

De forskellige typer knapper

Når vi taler om knapper i forbindelse med WordPress Block Editor, er vi nødt til at skelne mellem to forskellige typer:

1. Børneklodser inde i knappen med knapper
2. Knapper, der er indlejret i en anden blok (f.eks. post kommentarformularblokken)

Hvis vi tilføjer begge disse blokke til en skabelon, har de det samme udseende som standard.

Men opmærkningen er meget anderledes:

<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, er HTML-tagnavnene forskellige. Det er de almindelige klasser - .wp-block-button , .wp-element-button — der sikrer ensartet stil mellem de to knapper.

Hvis vi skrev CSS, ville vi målrette mod disse to klasser. Men som vi ved, har WordPress bloktemaer en anden måde at styre stilarter på, og det er gennem theme.json fil. Ganesh dækkede også dette meget detaljeret, og du ville gøre klogt i at læse hans artikel.

Så hvordan definerer vi knapstile i theme.json uden at skrive egentlig CSS? Lad os gøre det sammen.

Oprettelse af basisstilene

theme.json er et struktureret sæt skemaer skrevet i egenskab:værdi-par. Egenskaberne på øverste niveau kaldes "sektioner", og vi vil arbejde med styles afsnit. Det er her alle styling instruktionerne går.

Vi vil fokusere specifikt på elements i styles. Denne vælger målretter mod HTML-elementer, der deles mellem blokke. Dette er den grundlæggende skal, vi arbejder med:

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

Så hvad vi skal gøre er at definere en button element.

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

Det button svarer til HTML-elementer, der bruges til at markere knapelementer på frontenden. Disse knapper indeholder HTML-tags, der kan være en af ​​vores to knaptyper: en selvstændig komponent (dvs. knapblokken) eller en komponent indlejret i en anden blok (f.eks. postkommentarblokken).

I stedet for at skulle style hver enkelt blok, skaber vi delte styles. Lad os gå videre og ændre standardbaggrunden og tekstfarven for begge typer knapper i vores tema. Der er en color genstand derinde, som igen understøtter background , text egenskaber, hvor vi angiver de værdier, vi ønsker:

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

Dette ændrer farven på begge knaptyper:

Hvis du åbner DevTools og ser på den CSS, som WordPress genererer til knapperne, ser vi, at .wp-element-button klasse tilføjer de stilarter, vi definerede i theme.json:

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

Det er vores standardfarver! Dernæst vil vi give brugerne visuel feedback, når de interagerer med knappen.

Implementering af interaktive knapstile

Da dette er et websted, der handler om CSS, vil jeg vædde på, at mange af jer allerede er bekendt med de interaktive tilstande for links og knapper. Vi kan :hover musemarkøren over dem, tabuler dem ind :focus, klik på dem for at lave dem :active. For pokker, der er endda en :visited tilstand for at give brugerne en visuel indikation af, at de har klikket på dette før.

Det er CSS pseudo-klasser , vi bruger dem til at målrette mod et links eller knaps interaktioner.

I CSS kan vi style en :hover stat sådan:

a:hover { /* Styles */
}

In theme.json, vil vi udvide vores eksisterende knaperklæring med disse pseudoklasser.

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

Læg mærke til den "strukturerede" karakter af dette. Vi følger grundlæggende en oversigt:

Vi har nu en komplet definition af vores knaps standard og interaktive stilarter. Men hvad nu hvis vi vil style visse knapper, der er indlejret i andre blokke?

Stylingknapper indlejret i individuelle blokke

Lad os forestille os, at vi ønsker, at alle knapper skal have vores basisstile, med én undtagelse. Vi ønsker, at indsend-knappen i blokken Indsend kommentarformular skal være blå. Hvordan ville vi opnå det?

Denne blok er mere kompleks end knapblokken, fordi den har flere bevægelige dele: formularen, input, instruktiv tekst og knappen. For at målrette knappen i denne blok, skal vi følge den samme slags JSON-struktur, som vi gjorde for button element, men anvendt på Post Comment Form-blokken, som er knyttet til core/post-comments-form element:

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

Bemærk, at vi ikke længere arbejder i elements længere. I stedet arbejder vi inde blocks som er reserveret til at konfigurere faktiske blokke. Knapper betragtes derimod som et globalt element, da de kan indlejres i blokke, selvom de også er tilgængelige som en selvstændig blok.

JSON-strukturen understøtter elementer i elementer. Så hvis der er en button element i Post Comment Form-blokken, kan vi målrette det i core/post-comments-form blok:

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

Denne vælger betyder, at vi ikke kun målretter mod en bestemt blok – vi målretter mod et specifikt element, der er indeholdt i den pågældende blok. Nu har vi et standardsæt af knapstile, der anvendes på alle knapper i temaet, og et sæt stilarter, der gælder for specifikke knapper, der er indeholdt i postkommentarformularblokken.

CSS genereret af WordPress har en mere præcis vælger som et resultat:

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

Og hvad hvis vi vil definere forskellige interaktive stilarter for knappen Indsend kommentarformular? Det er den samme aftale som den måde, vi gjorde det for standardstilene, kun dem er defineret inde i core/post-comments-form blok:

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

Hvad med knapper, der ikke er i blokke?

WordPress genererer og anvender automatisk de rigtige klasser til at udskrive disse knapstile. Men hvad hvis du bruger et "hybrid" WordPress-tema, der understøtter blokke og redigering af hele webstedet, men også indeholder "klassiske" PHP-skabeloner? Eller hvad hvis du lavede en brugerdefineret blok, eller endda har en ældre kortkode, der indeholder knapper? Ingen af ​​disse håndteres af WordPress Style Engine!

Ingen problemer. I alle disse tilfælde ville du tilføje .wp-element-button klasse i skabelon-, blok- eller kortkodemarkeringen. De stilarter, der genereres af WordPress, vil derefter blive anvendt i disse tilfælde.

Og der kan være nogle situationer, hvor du ikke har kontrol over markeringen. For eksempel kan nogle blok-plugins være lidt for egenrådige og anvender liberalt sin egen stil. Det er her, du typisk kan gå til indstillingen "Avanceret" i blokkens indstillingspanel og anvende klassen der:

Indpakning op

Mens du skriver "CSS" i theme.json måske føles akavet i starten, jeg har fundet ud af, at det bliver en anden natur. Ligesom CSS er der et begrænset antal egenskaber, som du kan anvende enten bredt eller meget snævert ved hjælp af de rigtige vælgere.

Og lad os ikke glemme de tre vigtigste fordele ved at bruge theme.json:

1. Stilarterne anvendes på knapper i både frontend-visningen og blokeditoren.
2. Din CSS vil være kompatibel med fremtidige WordPress-opdateringer.
3. De genererede stilarter fungerer med både bloktemaer og klassiske temaer - der er ingen grund til at duplikere noget i et separat stilark.

Hvis du har brugt theme.json stile i dine projekter, så del gerne dine erfaringer og tanker. Jeg ser frem til at læse eventuelle kommentarer og feedback!

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/