Gumbi za oblikovanje v temah blokov WordPress

Malo časa nazaj, Ganesh Dahal je napisal objavo tukaj na CSS-Tricks odgovor na tvit, ki je spraševal o dodajanju senc polja CSS na bloke in elemente WordPress. Tam je veliko odličnih stvari, ki izkoriščajo nove funkcije, dobavljene v WordPressu 6.1, ki zagotavljajo nadzor za nanašanje senc na stvari neposredno v uporabniškem vmesniku urejevalnika blokov in urejevalnika spletnih mest.

Ganesh se je v tej objavi na kratko dotaknil elementov gumbov. To želim poudariti in se poglobiti v pristope k oblikovanju gumbov v temah blokov WordPress. Natančneje, odprli bomo novo theme.json datoteko in razčlenite različne pristope k oblikovanju gumbov v shemi.

Zakaj gumbi, se sprašujete? To je dobro vprašanje, zato začnimo s tem.

Različne vrste gumbov

Ko govorimo o gumbih v kontekstu urejevalnika blokov WordPress, moramo razlikovati med dvema različnima vrstama:

1. Podrejeni bloki znotraj bloka gumbov
2. Gumbi, ki so ugnezdeni znotraj drugega bloka (npr. blok obrazca za objavo komentarjev)

Če oba bloka dodamo v predlogo, imata privzeto enak videz.

Vendar je oznaka zelo drugačna:

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

Kot lahko vidimo, so imena oznak HTML različna. To so običajni razredi - .wp-block-button in .wp-element-button — ki zagotavljajo dosleden stil med obema gumboma.

Če bi pisali CSS, bi ciljali na ta dva razreda. A kot vemo, imajo blokovne teme WordPress drugačen način upravljanja slogov, in to prek theme.json Datoteka. Ganesh je tudi to zelo podrobno obravnaval, in dobro bi bilo, če bi prebrali njegov članek.

Torej, kako definiramo sloge gumbov v theme.json brez pisanja dejanskega CSS? Naredimo to skupaj.

Ustvarjanje osnovnih slogov

theme.json je strukturiran nabor shem, zapisanih v parih lastnost:vrednost. Lastnosti najvišje ravni se imenujejo »odseki« in delali bomo z styles razdelek. Tukaj so vsa navodila za oblikovanje.

Osredotočili se bomo posebej na elements v styles. Ta izbirnik cilja na elemente HTML, ki so v skupni rabi med bloki. To je osnovna lupina, s katero delamo:

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

Kar moramo narediti, je torej definirati a button element.

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

To button ustreza elementom HTML, ki se uporabljajo za označevanje elementov gumbov na sprednji strani. Ti gumbi vsebujejo oznake HTML, ki so lahko ena od naših dveh vrst gumbov: samostojna komponenta (tj. blok gumbov) ali komponenta, ugnezdena znotraj drugega bloka (npr. blok za objavo komentarja).

Namesto oblikovanja vsakega posameznega bloka ustvarjamo skupne sloge. Pojdimo naprej in spremenimo privzeto barvo ozadja in besedila za obe vrsti gumbov v naši temi. Tam je color predmet tam, ki pa podpira background in text lastnosti, kjer nastavimo želene vrednosti:

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

To spremeni barvo obeh vrst gumbov:

Če odpremo DevTools in si ogledamo CSS, ki ga WordPress ustvari za gumbe, vidimo, da .wp-element-button razred dodaja sloge, v katerih smo definirali theme.json:

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

To so naše privzete barve! Nato želimo uporabnikom dati vizualne povratne informacije, ko uporabljajo gumb.

Implementacija interaktivnih slogov gumbov

Ker je to spletno mesto o CSS, stavim, da mnogi od vas že poznate interaktivna stanja povezav in gumbov. Mi lahko :hover kazalec miške nad njimi, jih tabulatorsko v :focus, kliknite nanje, da jih naredite :active. Hudiča, obstaja celo :visited stanje, ki uporabnikom vizualno pokaže, da so to že kliknili.

Tisto so Psevdo-razredi CSS in uporabljamo jih za ciljanje na interakcije povezave ali gumba.

V CSS lahko stiliziramo a :hover navedite takole:

a:hover { /* Styles */
}

In theme.json, bomo našo obstoječo deklaracijo gumbov razširili s temi psevdo-razredi.

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

Upoštevajte "strukturirano" naravo tega. V bistvu sledimo shemi:

Zdaj imamo popolno definicijo privzetih in interaktivnih slogov našega gumba. Kaj pa, če želimo oblikovati določene gumbe, ki so ugnezdeni v drugih blokih?

Gumbi za oblikovanje, ugnezdeni v posamezne bloke

Predstavljajmo si, da želimo, da imajo vsi gumbi naše osnovne sloge, z eno izjemo. Želimo, da je gumb za oddajo v bloku Obrazec za objavo komentarja moder. Kako bi to dosegli?

Ta blok je bolj zapleten kot blok gumbov, ker ima več gibljivih delov: obrazec, vnose, poučno besedilo in gumb. Če želimo ciljati na gumb v tem bloku, moramo slediti isti vrsti strukture JSON, kot smo jo uporabili za button element, vendar uporabljen za blok Obrazec za objavo komentarja, ki je preslikan v core/post-comments-form Element:

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

Upoštevajte, da ne delamo več v elements več. Namesto tega delamo znotraj blocks ki je rezerviran za konfiguracijo dejanskih blokov. Nasprotno pa gumbi veljajo za globalni element, saj jih je mogoče ugnezditi v bloke, čeprav so na voljo tudi kot samostojni blok.

Struktura JSON podpira elemente znotraj elementov. Torej, če obstaja button v bloku Obrazec za objavo komentarja, ga lahko ciljamo v core/post-comments-form blok:

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

Ta izbirnik pomeni, da ne samo ciljamo na določen blok – ciljamo na določen element, ki je v tem bloku. Zdaj imamo privzeti nabor slogov gumbov, ki se uporabljajo za vse gumbe v temi, in nabor slogov, ki veljajo za določene gumbe, ki so v bloku Obrazec za objavo komentarja.

CSS, ki ga ustvari WordPress, ima zaradi tega natančnejši izbirnik:

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

In kaj, če želimo definirati različne interaktivne sloge za gumb Obrazec za objavo komentarja? To je enako, kot smo to storili za privzete sloge, le da so ti definirani znotraj 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. } } } } }
}

Kaj pa gumbi, ki niso v blokih?

WordPress samodejno ustvari in uporabi prave razrede za izpis teh slogov gumbov. Kaj pa, če uporabljate »hibridno« WordPress temo, ki podpira bloke in urejanje celotnega mesta, vsebuje pa tudi »klasične« PHP predloge? Kaj pa, če bi naredili blok po meri ali celo imeli podedovano kratko kodo, ki vsebuje gumbe? Nobenega od teh ne obravnava Mehanizem sloga WordPress!

Brez skrbi. V vseh teh primerih bi dodali .wp-element-button razreda v oznaki predloge, bloka ali kratke kode. Slogi, ki jih ustvari WordPress, bodo nato uporabljeni v teh primerih.

In lahko pride do nekaterih situacij, ko nimate nadzora nad oznako. Na primer, neki blokovni vtičnik je lahko nekoliko preveč samozavesten in izdatno uporablja svoj slog. Tam lahko običajno odprete možnost »Napredno« na plošči z nastavitvami bloka in tam uporabite razred:

Zavijanje

Med pisanjem »CSS« v theme.json morda sprva počutim nerodno, ugotovil sem, da je to druga narava. Tako kot CSS obstaja omejeno število lastnosti, ki jih lahko uporabite na splošno ali zelo ozko z uporabo pravih izbirnikov.

In ne pozabimo na tri glavne prednosti uporabe theme.json:

1. Slogi se uporabijo za gumbe tako v sprednjem pogledu kot v urejevalniku blokov.
2. Vaš CSS bo združljiv s prihodnjimi posodobitvami WordPressa.
3. Ustvarjeni slogi delujejo tako s temami blokov kot s klasičnimi temami — ničesar ni treba podvajati v ločeni tabeli slogov.

Če ste uporabili theme.json sloge v svojih projektih, prosimo, delite svoje izkušnje in misli. Veselim se branja komentarjev in povratnih informacij!

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/