Painikkeiden muotoilu WordPressin lohkoteemoissa

Vähän aikaa sitten, Ganesh Dahal kirjoitti postauksen tänne CSS-Tricksissä vastauksena twiittiin, jossa kysyttiin CSS-ruutuvarjojen lisäämisestä WordPress-lohkoihin ja -elementteihin. Siellä on paljon hienoa tavaraa, joka hyödyntää WordPress 6.1:ssä toimitettuja uusia ominaisuuksia, jotka mahdollistavat varjojen lisäämisen asioihin suoraan Block Editorin ja Site Editorin käyttöliittymässä.

Ganesh kosketti lyhyesti painikeelementtejä tuossa viestissä. Haluan ottaa sen esiin ja mennä syvemmälle WordPress-lohkoteemojen painikkeiden muotoiluun. Tarkemmin sanottuna aiomme avata uuden theme.json tiedostoa ja erittele erilaisia ​​lähestymistapoja kaavion painikkeiden muotoiluun.

Miksi painikkeet, kysyt? Se on hyvä kysymys, joten aloitetaan siitä.

Erityyppiset painikkeet

Kun puhumme painikkeista WordPress Block Editorin yhteydessä, meidän on erotettava kaksi eri tyyppiä:

1. Lapsilohkot Buttons-lohkon sisällä
2. Painikkeet, jotka on sijoitettu toisen lohkon sisään (esim. Post Comments Form -lohko)

Jos lisäämme nämä molemmat lohkot malliin, niillä on oletusarvoisesti sama ulkoasu.

Mutta merkintä on hyvin erilainen:

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

Kuten näemme, HTML-tunnisteiden nimet ovat erilaisia. Se on yleiset luokat - .wp-block-button ja .wp-element-button — jotka varmistavat yhdenmukaisen tyylin kahden painikkeen välillä.

Jos kirjoittaisimme CSS:ää, kohdistaisimme nämä kaksi luokkaa. Mutta kuten tiedämme, WordPress-lohkoteemoilla on erilainen tapa hallita tyylejä, ja se tapahtuu theme.json tiedosto. Ganesh käsitteli myös tätä erittäin yksityiskohtaisesti, ja sinun kannattaisi lukea hänen artikkelinsa.

Joten, kuinka määritämme painikkeiden tyylit theme.json kirjoittamatta oikeaa CSS:ää? Tehdään se yhdessä.

Perustyylien luominen

theme.json on strukturoitu skeemajoukko, joka on kirjoitettu ominaisuus:arvo-pareihin. Ylimmän tason ominaisuuksia kutsutaan "osioiksi", ja aiomme työskennellä styles osio. Tässä ovat kaikki muotoiluohjeet.

Keskitymme erityisesti elements vuonna styles. Tämä valitsin kohdistaa HTML-elementteihin, jotka jaetaan lohkojen välillä. Tämä on peruskuori, jonka kanssa työskentelemme:

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

Joten mitä meidän on tehtävä, on määritellä a button elementti.

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

Että button vastaa HTML-elementtejä, joita käytetään painikeelementtien merkitsemiseen käyttöliittymässä. Nämä painikkeet sisältävät HTML-tageja, jotka voivat olla jompikumpi kahdesta painiketyypistämme: erillinen komponentti (eli Button-lohko) tai komponentti, joka on sisäkkäinen toiseen lohkoon (esim. Post Comment -lohko).

Sen sijaan, että joutuisimme muotoilemaan jokaisen yksittäisen lohkon, luomme yhteisiä tyylejä. Siirrytään eteenpäin ja vaihdetaan teemamme molempien painikkeiden oletustaustan ja tekstin väri. Siellä color esine siellä, joka puolestaan ​​tukee background ja text ominaisuuksia, joissa asetamme haluamasi arvot:

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

Tämä muuttaa molempien painiketyyppien väriä:

Jos avaat DevToolsin ja katsomme CSS:ää, jonka WordPress luo painikkeille, huomaamme, että .wp-element-button luokka lisää määrittelemämme tyylit theme.json:

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

Nämä ovat oletusvärimme! Seuraavaksi haluamme antaa käyttäjille visuaalista palautetta, kun he käyttävät painiketta.

Interaktiivisten painiketyylien toteuttaminen

Koska tämä sivusto koskee kaikkea CSS:ää, useat teistä ovat jo tuttuja linkkien ja painikkeiden interaktiivisista tiloista. Me voimme :hover siirrä hiiren osoitin niiden päälle, napauta niitä :focus, tee ne napsauttamalla niitä :active. Hitto, siellä on jopa a :visited tila antaa käyttäjille visuaalisen osoituksen, että he ovat napsauttaneet tätä aiemmin.

Nuo ovat CSS pseudo-luokat ja käytämme niitä linkin tai painikkeen vuorovaikutukseen kohdistamiseen.

CSS:ssä saatamme tyyliin a :hover ilmaista näin:

a:hover { /* Styles */
}

In theme.json, aiomme laajentaa olemassa olevaa painikemääritystämme näillä pseudo-luokilla.

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

Huomaa tämän "strukturoitu" luonne. Noudatamme periaatteessa hahmotelmaa:

Meillä on nyt täydellinen määritelmä painikkeemme oletus- ja interaktiivisista tyyleistä. Mutta entä jos haluamme muotoilla tiettyjä painikkeita, jotka ovat sisäkkäisiä muihin lohkoihin?

Yksittäisiin lohkoihin sisäkkäiset tyylipainikkeet

Kuvitellaan, että haluamme kaikilla painikkeilla perustyylimme, yhtä poikkeusta lukuun ottamatta. Haluamme Post Comment Form -lohkon lähetyspainikkeen olevan sininen. Miten saavuttaisimme sen?

Tämä lohko on monimutkaisempi kuin painikelohko, koska siinä on enemmän liikkuvia osia: lomake, syötteet, opettava teksti ja painike. Jotta voimme kohdistaa tämän lohkon painikkeeseen, meidän on noudatettava samanlaista JSON-rakennetta, jota teimme button elementtiä, mutta sovelletaan Post Comment Form -lohkoon, joka on kartoitettu core/post-comments-form elementti:

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

Huomaa, että emme enää toimi elements enää. Sen sijaan työskentelemme sisällä blocks joka on varattu todellisten lohkojen määrittämiseen. Painikkeita sitä vastoin pidetään globaalina elementtinä, koska ne voidaan upottaa lohkoihin, vaikka ne ovat saatavilla myös erillisinä lohkoina.

JSON-rakenne tukee elementtejä elementtien sisällä. Joten, jos siellä on a button -elementti Post Comment Form -lohkossa, voimme kohdistaa sen kenttään core/post-comments-form lohko:

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

Tämä valitsin tarkoittaa, että kohdistamme paitsi tiettyyn lohkoon, myös tiettyyn elementtiin, joka sisältyy kyseiseen lohkoon. Nyt meillä on oletusarvoinen joukko painiketyylejä, joita sovelletaan kaikkiin teeman painikkeisiin, ja joukko tyylejä, jotka koskevat tiettyjä painikkeita, jotka sisältyvät Post Comment Form -lohkoon.

WordPressin luomalla CSS:llä on tarkempi valitsin tämän seurauksena:

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

Entä jos haluamme määrittää erilaisia ​​interaktiivisia tyylejä Lähetä kommenttilomake -painikkeelle? Se on sama asia kuin tapa, jolla teimme sen oletustyyleille, vain ne on määritelty sisällä core/post-comments-form lohko:

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

Entä painikkeet, jotka eivät ole lohkoissa?

WordPress luo automaattisesti ja käyttää oikeat luokat näiden painiketyylien tulostamiseen. Mutta entä jos käytät "hybridi" WordPress-teemaa, joka tukee lohkoja ja koko sivuston muokkausta, mutta sisältää myös "klassisia" PHP-malleja? Tai entä jos loisit mukautetun lohkon tai sinulla olisi jopa vanha lyhytkoodi, joka sisältää painikkeita? Mitään näistä ei käsittele WordPress-tyylimoottori!

Ei huolia. Kaikissa näissä tapauksissa sinun pitäisi lisätä .wp-element-button luokkaa mallissa, lohkossa tai lyhytkoodimerkinnässä. WordPressin luomia tyylejä käytetään sitten näissä tapauksissa.

Ja joissakin tilanteissa voi olla, että et voi hallita merkintöjä. Esimerkiksi jotkut lohkolaajennukset voivat olla hieman liian mielipiteitä ja soveltaa runsaasti omaa tyyliään. Siellä voit yleensä siirtyä "Lisäasetukset" -vaihtoehtoon lohkon asetuspaneelissa ja käyttää luokkaa siellä:

Käärimistä

Kun kirjoitat "CSS" sisään theme.json saattaa tuntua kiusalliselta aluksi, olen huomannut, että siitä tulee toinen luonto. Kuten CSS, on olemassa rajoitettu määrä ominaisuuksia, joita voit käyttää joko laajasti tai hyvin suppeasti käyttämällä oikeita valitsimia.

Ja älkäämme unohtako käytön kolmea tärkeintä etua theme.json:

1. Tyylit ovat käytössä painikkeissa sekä käyttöliittymänäkymässä että lohkoeditorissa.
2. CSS on yhteensopiva tulevien WordPress-päivitysten kanssa.
3. Luodut tyylit toimivat sekä lohkoteemojen että klassisten teemojen kanssa – mitään ei tarvitse kopioida erilliseen tyylitaulukkoon.

Jos olet käyttänyt theme.json tyylejä projekteissasi, jaa kokemuksiasi ja ajatuksiasi. Odotan innolla mahdollisia kommentteja ja palautetta!

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/