Stylingknapper i WordPress-blokktemaer

En liten stund tilbake, Ganesh Dahal skrev et innlegg her på CSS-Tricks svarer på en tweet som spurte om å legge til CSS-boksskygger på WordPress-blokker og -elementer. Det er mange flotte ting der inne som utnytter nye funksjoner som ble levert i WordPress 6.1 som gir kontroller for å bruke skygger på ting direkte i Block Editor og Site Editor UI.

Ganesh berørte kort knappeelementer i det innlegget. Jeg vil ta det opp og gå dypere inn i tilnærminger for stylingknapper i WordPress-blokktemaer. Nærmere bestemt, vi skal åpne en fersk theme.json fil og bryte ned ulike tilnærminger til stylingknapper i skjemaet.

Hvorfor knapper, spør du? Det er et godt spørsmål, så la oss starte med det.

De forskjellige typene knapper

Når vi snakker om knapper i sammenheng med WordPress Block Editor, må vi skille mellom to forskjellige typer:

1. Barneblokker på innsiden av Buttons-blokken
2. Knapper som er nestet inne i en annen blokk (f.eks. blokken Post Comments Form)

Hvis vi legger til begge disse blokkene i en mal, har de samme utseende som standard.

Men markeringen er veldig annerledes:

<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 forskjellige. Det er de vanlige klassene - .wp-block-button og .wp-element-button — som sikrer konsistent stil mellom de to knappene.

Hvis vi skrev CSS, ville vi målrettet mot disse to klassene. Men som vi vet, har WordPress-blokktemaer en annen måte å administrere stiler på, og det er gjennom theme.json filen. Ganesh dekket også dette i stor detalj, og du vil gjøre det bra å lese artikkelen hans.

Så hvordan definerer vi knappestiler i theme.json uten å skrive faktisk CSS? La oss gjøre det sammen.

Opprette grunnstilene

theme.json er et strukturert sett med skjema skrevet i egenskap:verdi-par. Egenskapene på øverste nivå kalles "seksjoner", og vi skal jobbe med styles seksjon. Det er her alle stylinginstruksjonene går.

Vi vil fokusere spesielt på elements i styles. Denne velgeren retter seg mot HTML-elementer som deles mellom blokker. Dette er det grunnleggende skallet vi jobber med:

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

Så det vi trenger å gjøre er å definere en button element.

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

Det button tilsvarer HTML-elementer som brukes til å merke opp knappeelementer på grensesnittet. Disse knappene inneholder HTML-koder som kan være en av våre to knappetyper: en frittstående komponent (dvs. knappeblokken) eller en komponent som er nestet i en annen blokk (f.eks. Post kommentar-blokken).

I stedet for å måtte style hver enkelt blokk, lager vi delte stiler. La oss gå videre og endre standard bakgrunn og tekstfarge for begge typer knapper i temaet vårt. Det er en color objekt der inne som igjen støtter background og text egenskaper der vi setter verdiene vi ønsker:

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

Dette endrer fargen på begge knappetyper:

Hvis du åpner DevTools og ser på CSS-en som WordPress genererer for knappene, ser vi at .wp-element-button klasse legger til stilene vi definerte i theme.json:

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

Det er våre standardfarger! Deretter ønsker vi å gi brukerne visuell tilbakemelding når de samhandler med knappen.

Implementering av interaktive knappestiler

Siden dette er et nettsted som handler om CSS, vil jeg vedder på at mange av dere allerede er kjent med de interaktive tilstandene til lenker og knapper. Vi kan :hover musepekeren over dem, ta dem inn :focus, klikk på dem for å lage dem :active. Pokker, det er til og med en :visited tilstand for å gi brukerne en visuell indikasjon på at de har klikket på dette før.

De er CSS pseudo-klasser og vi bruker dem til å målrette en koblings eller knapps interaksjoner.

I CSS kan vi style en :hover stat slik:

a:hover { /* Styles */
}

In theme.json, skal vi utvide vår eksisterende knappeerklæring med disse pseudoklassene.

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

Legg merke til den "strukturerte" naturen til dette. Vi følger i utgangspunktet en disposisjon:

Vi har nå en fullstendig definisjon av knappens standard og interaktive stiler. Men hva om vi vil style visse knapper som er nestet i andre blokker?

Stylingknapper nestet i individuelle blokker

La oss forestille oss at vi vil at alle knapper skal ha våre basisstiler, med ett unntak. Vi vil at send-knappen i blokken Legg inn kommentarskjema skal være blå. Hvordan skulle vi oppnå det?

Denne blokken er mer kompleks enn Button-blokken fordi den har flere bevegelige deler: skjemaet, inndata, instruktiv tekst og knappen. For å målrette mot knappen i denne blokken, må vi følge samme type JSON-struktur som vi gjorde for button element, men brukt på Post Comment Form-blokken, som er tilordnet core/post-comments-form element:

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

Legg merke til at vi ikke lenger jobber i elements lenger. I stedet jobber vi inne blocks som er reservert for å konfigurere faktiske blokker. Knapper, derimot, betraktes som et globalt element siden de kan nestes i blokker, selv om de også er tilgjengelige som en frittstående blokk.

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

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

Denne velgeren betyr at vi ikke bare målretter mot en bestemt blokk – vi målretter mot et spesifikt element som er inneholdt i den blokken. Nå har vi et standardsett med knappestiler som brukes på alle knapper i temaet, og et sett med stiler som gjelder for spesifikke knapper som er inneholdt i Post Comment Form-blokken.

CSS generert av WordPress har en mer presis velger som et resultat:

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

Og hva om vi ønsker å definere forskjellige interaktive stiler for Post Comment Form-knappen? Det er den samme avtalen som måten vi gjorde det på for standardstilene, bare de er definert i core/post-comments-form blokkere:

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

Hva med knapper som ikke er i blokker?

WordPress genererer og bruker de riktige klassene automatisk for å sende ut disse knappestilene. Men hva om du bruker et "hybrid" WordPress-tema som støtter blokker og redigering på hele nettstedet, men som også inneholder "klassiske" PHP-maler? Eller hva om du laget en egendefinert blokk, eller til og med har en eldre kortkode, som inneholder knapper? Ingen av disse håndteres av WordPress-stilmotor!

Ingen bekymringer. I alle disse tilfellene vil du legge til .wp-element-button klasse i mal-, blokk- eller kortkodemarkeringen. Stilene generert av WordPress vil da bli brukt i disse tilfellene.

Og det kan være noen situasjoner der du ikke har kontroll over markeringen. For eksempel kan noen blokk-plugin-moduler være litt for selvstendige og bruke sin egen stil. Det er her du vanligvis kan gå til "Avansert"-alternativet i blokkens innstillingspanel og bruke klassen der:

Innpakning opp

Mens du skriver "CSS" i theme.json kan føles vanskelig i begynnelsen, jeg har funnet ut at det blir en annen natur. I likhet med CSS er det et begrenset antall egenskaper som du kan bruke enten bredt eller veldig snevert ved å bruke de riktige velgerne.

Og la oss ikke glemme de tre viktigste fordelene ved å bruke theme.json:

1. Stilene brukes på knapper både i front-end-visningen og blokkredigeringsprogrammet.
2. CSS-en din vil være kompatibel med fremtidige WordPress-oppdateringer.
3. De genererte stilene fungerer både med blokktemaer og klassiske temaer - det er ikke nødvendig å duplisere noe i et eget stilark.

Hvis du har brukt theme.json stiler i prosjektene dine, del dine erfaringer og tanker. Jeg ser frem til å lese eventuelle kommentarer og tilbakemeldinger!

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/