Stiilinupud WordPressi plokkiteemade puhul

Veidi aega tagasi, Ganesh Dahal kirjutas siia CSS-Tricksi postituse vastates säutsule, mis küsis WordPressi plokkidele ja elementidele CSS-i kastivarjude lisamise kohta. Seal on palju häid asju, mis kasutavad uusi WordPressi 6.1 funktsioone, mis pakuvad juhtelemente varjude rakendamiseks asjadele otse plokiredaktori ja saidiredaktori kasutajaliideses.

Ganesh puudutas lühidalt selle postituse nuppude elemente. Soovin sellest aru saada ja minna sügavamale WordPressi plokiteemade nuppude kujundamise lähenemisviisidesse. Täpsemalt avame uue theme.json faili ja jagage erinevad lähenemisviisid skeemi nuppude kujundamisele.

Miks nupud, küsite? See on hea küsimus, nii et alustame sellest.

Erinevat tüüpi nupud

Kui me räägime nuppudest WordPressi plokiredaktori kontekstis, peame eristama kahte erinevat tüüpi:

1. Lapsplokid nuppude ploki sees
2. Nupud, mis on pesastatud teise ploki sisse (nt kommentaaride postitamise vormi plokk)

Kui lisame need mõlemad plokid mallile, on neil vaikimisi sama välimus.

Kuid märgistus on väga erinev:

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

Nagu näeme, on HTML-siltide nimed erinevad. Need on tavalised klassid - .wp-block-button ja .wp-element-button — mis tagavad kahe nupu ühtse stiili.

Kui kirjutaksime CSS-i, sihiksime neid kahte klassi. Kuid nagu me teame, on WordPressi plokiteemadel stiilide haldamiseks erinev viis ja see on läbi theme.json faili. Ganesh käsitles seda ka väga üksikasjalikult, ja sa võiksid tema artiklit lugeda.

Niisiis, kuidas me määratleme nuppude stiile theme.json ilma tegelikku CSS-i kirjutamata? Teeme seda koos.

Põhistiilide loomine

theme.json on struktureeritud skeemide kogum, mis on kirjutatud atribuut:väärtus paaridesse. Tipptaseme atribuute nimetatakse sektsioonideks ja me töötame koos styles osa. Siia lähevad kõik stiilijuhised.

Keskendume konkreetselt sellele elements aasta styles. See valija sihib HTML-i elemente, mida jagatakse plokkide vahel. See on põhikest, millega me töötame:

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

Niisiis, mida me peame tegema, on määratleda a button element.

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

Et button vastab HTML-i elementidele, mida kasutatakse esiotsa nupuelementide märgistamiseks. Need nupud sisaldavad HTML-i silte, mis võivad olla kas meie kahest nuputüübist: eraldiseisev komponent (st nupuplokk) või mõne teise ploki sees pesastatud komponent (nt kommentaaride postitamise plokk).

Selle asemel, et iga plokki stiilida, loome ühiseid stiile. Lähme edasi ja muudame oma teema mõlemat tüüpi nuppude vaiketausta ja tekstivärvi. Seal on color objekt seal sees, mis omakorda toetab background ja text omadused, kus me määrame soovitud väärtused:

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

See muudab mõlema nuputüübi värvi:

Kui avada DevTools ja vaadata CSS-i, mille WordPress nuppude jaoks loob, näeme, et .wp-element-button klass lisab stiilid, milles me määratlesime theme.json:

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

Need on meie vaikevärvid! Järgmiseks tahame anda kasutajatele visuaalset tagasisidet, kui nad nupuga suhtlevad.

Interaktiivsete nuppude stiilide rakendamine

Kuna see sait on kõikehõlmav CSS-i kohta, võin kihla vedada, et paljud teist on linkide ja nuppude interaktiivsete olekutega juba tuttavad. Me saame :hover viige hiirekursor nende kohale, puudutage neid :focus, klõpsake nende loomiseks :active. Pagan, seal on isegi a :visited olek, et anda kasutajatele visuaalne märge, et nad on sellel varem klõpsanud.

Need on CSS-i pseudoklassid ja kasutame neid lingi või nupu interaktsioonide sihtimiseks.

CSS-is võime stiilida a :hover avaldus nii:

a:hover { /* Styles */
}

In theme.json, laiendame oma olemasolevat nuppude deklaratsiooni nende pseudoklassidega.

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

Pange tähele selle "struktureeritud" olemust. Põhimõtteliselt järgime üldjoont:

Meil on nüüd täielik definitsioon meie nuppude vaike- ja interaktiivsete stiilide kohta. Aga mis siis, kui tahame kujundada teatud nuppe, mis on pesastatud teistesse plokkidesse?

Stiilinupud on paigutatud üksikutesse plokkidesse

Kujutagem ette, et tahame, et kõigil nuppudel oleks oma põhistiilid, välja arvatud üks erand. Soovime, et kommentaari vormi ploki saatmisnupp oleks sinine. Kuidas me selle saavutaksime?

See plokk on keerulisem kui nupuplokk, kuna sellel on rohkem liikuvaid osi: vorm, sisendid, õpetlik tekst ja nupp. Selles plokis oleva nupu sihtimiseks peame järgima sama tüüpi JSON-i struktuuri, mida kasutasime button element, kuid rakendatakse kommentaari vormi plokile, mis on vastendatud core/post-comments-form Element:

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

Pange tähele, et me ei tööta enam elements enam. Selle asemel töötame sees blocks mis on reserveeritud tegelike plokkide seadistamiseks. Nuppe seevastu peetakse globaalseks elemendiks, kuna neid saab plokkidesse pesastada, kuigi need on saadaval ka eraldiseisva plokina.

JSON-struktuur toetab elemente elementide sees. Seega, kui on olemas a button elementi Kommentaari postituse vormi plokis, saame selle sihtida core/post-comments-form plokk:

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

See valija tähendab, et me mitte ainult ei sihi konkreetset plokki – me sihime konkreetset elementi, mis selles plokis sisaldub. Nüüd on meil vaikimisi nupustiilide komplekt, mida rakendatakse teema kõikidele nuppudele, ja stiilide komplekt, mis kehtivad konkreetsetele nuppudele, mis sisalduvad kommentaarivormiplokis.

WordPressi loodud CSS-il on selle tulemusel täpsem valija:

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

Ja mis siis, kui tahame defineerida erinevaid interaktiivseid stiile nupu Postita kommentaari vorm jaoks? See on sama tehing nagu vaikestiilide puhul, ainult need on määratletud stiilis core/post-comments-form plokk:

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

Kuidas on lood nuppudega, mis pole plokkides?

WordPress genereerib ja rakendab nende nupustiilide väljastamiseks automaatselt õiged klassid. Aga mis siis, kui kasutate "hübriidset" WordPressi teemat, mis toetab plokke ja kogu saidi redigeerimist, kuid sisaldab ka "klassikalisi" PHP-malle? Või mis siis, kui teeksite kohandatud ploki või teil oleks isegi pärand lühikood, mis sisaldab nuppe? Ühtegi neist ei käsitle WordPressi stiilimootor!

Ära muretse. Kõigil neil juhtudel lisate .wp-element-button klassi, malli, ploki või lühikoodi märgistuses. Seejärel rakendatakse nendel juhtudel WordPressi loodud stiile.

Ja võib esineda olukordi, kus teil pole märgistuse üle kontrolli. Näiteks võib mõni plokkplugin olla liiga arvamuslik ja rakendada vabalt oma stiili. Seal saate tavaliselt minna ploki seadete paneelil valikule „Täpsem” ja rakendada seal klassi:

Pakke kuni

"CSS" kirjutamise ajal theme.json võib tunduda alguses kohmetu, olen avastanud, et see muutub teiseks olemuseks. Sarnaselt CSS-iga on piiratud arv atribuute, mida saate õigete valijate abil laiemalt või väga kitsalt rakendada.

Ja ärgem unustagem kasutamise kolme peamist eelist theme.json:

1. Stiile rakendatakse nuppudele nii esiotsa vaates kui ka plokiredaktoris.
2. Teie CSS ühildub tulevaste WordPressi värskendustega.
3. Loodud stiilid töötavad nii plokkide kui ka klassikaliste teemadega – pole vaja midagi eraldi stiililehel dubleerida.

Kui olete seda kasutanud theme.json stiilid oma projektides, palun jagage oma kogemusi ja mõtteid. Ootan huviga kõiki kommentaare ja tagasisidet!

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/