Kuinka lisätä väriasetuksia mukautettuun Gutenberg-lohkoon
Tämä viesti käsittelee syvällisemmin väriasetusten lisäämistä mukautettuun WordPress Gutenberg -lohkoon. Opimme lisäämään saman väriasetuskomponentin, jossa valitaan paletin väreistä ja mukautetuista väreistä, kuten monet WordPressin oletuslohkot käyttävät.
Tämän lisäämme mukautettuun lohkoomme:
Gutenbergin komponentteja käyttämällä voimme helposti toteuttaa tämän paletti-/väri-osion omaan mukautettuun lohkoomme. Voit määrittää väriasetukset vaikuttamaan mihin tahansa haluamaasi väriin. tausta, tekstin väri, reunuksen väri tai mikä tahansa muu. Voit myös lisätä tähän paneeliin niin monta väriasetusta kuin haluat.
Ennen kuin sukeltaamme koodiin, sinun on oltava tietoinen joistakin asioista. Älä hyppää eteenpäin koodiin, sillä seuraava osa selittää paljon, miksi koodin on tehtävä se kuten sen tekee.
Mitä sinun tulee tietää ensin
Komponentit paletti/väriasetusten toteuttamiseen ovat ja PanelColorSettings
paketista. Komponentti on ns. korkeamman asteen komponentti ja se pitää toteuttaa hieman eri tavalla kuin pelkkä normaalin komponentin tulostaminen. Palaan myöhemmin hieman tarkemmin. Mutta ensin meidän on oltava tietoisia siitä, miten Gutenberg käsittelee lohkon väriasetuksia.withColors``wp.blockEditor``withColors
Miten Gutenberg-lohkot käsittelevät väriasetuksia
On olemassa tiettyjä sääntöjä sille, kuinka Gutenberg käsittelee väriasetuksia lohkoissa. Jos olet koskaan muotoillut Gutenbergin tukemaa teemaa ennen kuin olet luultavasti jo perehtynyt näihin sääntöihin. Käymme ne kuitenkin nopeasti läpi, koska meidän on käsiteltävä tämä estokoodissamme.
- Kun paletin väri valitaan, solmulohkoelementti saa tietyn kuvion luokan. Tunti alkaa kirjaimella "
has-
", jonka jälkeen tulee paletin etana. Loppu riippuu siitä, mihin elementtiin värin tulee vaikuttaa. Tekstin värin kohdalla se päättyy "-color
". Taustavärille se päättyy "-background-color
". Esimerkiksi lohko, jonka paletin väri on "punainen", on valittu taustaväriksi, saa luokan "has-red-background-color
". - Kun mukautettu väri valitaan (värivalitsimesta), solmulohkoelementti saa sisäänrakennetun tyylin heksadesimaalikoodin kanssa. Esimerkiksi taustaväriksi valittu mukautettu väri #DD0000 saa attribuutin "
style="background-color: #DD0000;
".
Kun otamme käyttöön väriasetukset lohkollemme, meidän on otettava käyttöön oikea luokka ja sisäinen tyyli. Teemme sen tämän opetusohjelman lopussa.
Kuinka työskennelläwithColors
Kuten aiemmin mainittiin withColors
, se on korkeamman asteen komponentti. Tämä tarkoittaa periaatteessa sitä, että se on komponentti, joka ottaa komponentin ja palauttaa uuden komponentin. Palautetussa komponentissa saamme hyödyllisiä rekvisiitta ylemmän asteen komponentista. Yksinkertaisesti sanottuna withColors
palautamme oman komponenttimme mukautetulle lohkollemme. Lohkokomponenttimme saa tarvittavat rekvisiitta värien kanssa työskentelyyn osoitteesta withColors
.
Komponentti withColors
käsittelee tilaa ja paljon toimintoja värien kanssa työskentelemiseen. Ja saamme paljon automaatiota tässä prosessissa. Tämä on erittäin kätevää selvittääksesi, onko valittu väri paletin väri (meidän on lisättävä luokka) vai mukautettu väri (meidän on lisättävä sisäinen tyyli). withColors
yksinkertaistaa paljon valitun värin tallentamista lohkomme attribuutteihin, oli se mikä tahansa. Ominaisuuksista puheen ollen..
Ominaisuudet jawithColors
Ilmeisesti lohkosi tarvitsee määritteitä valitun värin tallentamiseksi. Hyötyäksesi withColorin automaatiosta oikean värin tallentamiseen, sinun on itse asiassa määritettävä kaksi attribuuttia kullekin väriasetukselle. Toinen paletin värin slug ja toinen heksadesimaalikoodin tallentamiseen. On kuitenkin joitain sääntöjä.
Oletetaan, että haluat lisätä väriasetuksen lohkon tekstin värille – joten päätät määrittää attribuutin, jonka nimi on osuvasti " textColor
". Sinun on sitten määritettävä toinen attribuutti mallissa " customYourOriginalAttribute
". Tässä esimerkissä toisen attribuutin nimi on oltava " customTextColor
". Ota huomioon camelCase (isot kirjaimet) tässä. Tämän mallin withColors
noudattaminen automaattisesti:
- Jos paletin väri on valittu, attribuutti "
textColor
" sisältää paletin värin. - Jos mukautettu väri on valittu, "
customTextColor
" täytetään heksadesimaalikoodilla.
Nämä kaksi toimivat rinnakkain. Jos valitset mukautetun värin, textColor
se on automaattisesti undefined
ja päinvastoin.
Ja lopuksi vielä yksi asia, joka tulee muistaa: sinun ei tarvitse käyttää setAttributes()
värimääritteiden päivittämiseen! Mukana toimitetut rekvisiittat withColors
sisältävät toiminnon, joka päivittää attribuutit automaattisesti puolestasi. Sinun tarvitsee vain välittää tämä toiminto onChange
tapahtumalle PanelColorSettings
komponentille, jolloin määritteet päivitetään automaattisesti.
Ok, on aika nähdä tämä kaikki käytännössä!
Väriasetusten käyttöönotto mukautetussa lohkossa
Aloittaakseni minulla on melko hyödytön mukautettu lohko, joka ei tee muuta kuin näyttää kovakoodattua tekstiä. Tämän ansiosta on helppo erottaa, mitä tarvitsemme koodaamaan väriasetusten lisäämiseksi. Minulla on opetusohjelmasarja omien mukautettujen lohkojen luomisesta, jos olet kiinnostunut oppimaan lisää.
Huomautus: Kirjoitan kaiken koodin ES6/ESNext-tiedostoon. Tämä sisältää nuolitoiminnot, jotka vaativat erityistä huolellisuutta Babel/webpack-asetuksissa. Jos saat virheitä johonkin alla olevasta koodista, noudata opastani Webpackin ja Babelin määrittämisestä ES6/ESNextille tai säädä koodia niin, ettei "kokeellisia syntakseja" käytetä.
Tämä on mukautettu peruslohkoni ennen kuin teen mitään väriasetuksien kanssa:
Se on melko perus. Huomaa, että edit
funktio viittaa yksinkertaisesti erilliseen komponenttiin, BlockWithColorSettings
sen sijaan että kirjoittaisit sen tekstin sisään. Tämä helpottaa sen toteuttamista withColors
myöhemmin.
Okei, on aika ottaa väriasetukset käyttöön lohkossamme! Esimerkkinä haluan määrittää tekstin värin.
Attribuuttien lisääminen
Kuten aiemmin mainittiin, kullekin väriasetukselle on määritettävä kaksi attribuuttia. Ja meidän on oltava erityisen varovaisia heidän nimeämisessä. Haluan lisätä tekstin värimääritteen, joten nimeän attribuutin textColor
. Tämä tarkoittaa, että lisään myös attribuutin customTextColor
. Molempien tulee olla merkkijonoa.
Attribuuttimme ovat valmiita lohkon tekstin väriasetuksen tallentamista varten. Nyt on aika toteuttaa withColors
ja PanelColorSettings
.
ToteutuswithColors
Kuten aiemmin mainittiin withColors
, se on korkeamman asteen komponentti, jonka palauttaminen vaatii komponentin. Haluamme luonnollisesti sen palauttavan muokkauskomponenttimme, BlockWithColorSettings
. Mutta parametrina withColors
tarjoamme objektin.
Kohteessa, joka välitetään, withColors
on kerrottava, withColors
mitä attribuuttia haluamme käyttää värin tallentamiseen ja minkälaista elementtiä se värittää (tapauksessamme tekstin väri eli CSS-sääntö "väri"). CSS-säännöstä ilmoittaminen varmistaa, että palautetut luokkanimet ovat oikein. Koska tämä on tekstin väri, haluamme luokkien nimet, kuten "has-color".
Ensin hieman tuhoa ylhäällä. withColors
asuu wp.blockEditor
paketissa.
const { withColors } = wp.blockEditor;
Muutamme edit
toiminnon muotoon:
Tällä koodilla komponenttimme BlockWithColorSettings
saa lisätarvikkeita:
props.textColor
: on objekti, joka sisältää kaikki tiedot valitusta väristä. Jos paletin väri valittiin, se tallentaa ominaisuuksia heksadesimaalikoodille, paletin etanalle, luokan nimelle ja muille. Jos valittiin mukautettu väri, objekti sisältää heksadesimaalikoodin. Hex – koodi löytyy aina kiinteistöstäcolor
. Ja luokan nimi (vain jos paletin väri on valittu) asetetaan ominaisuuteenclass
.props.setTextColor
: Toiminto, joka päivittää attribuuttimme puolestamme. Tarjoamme tämän väriasetustenonChange
tapahtumaa varten, kuten näemme myöhemmin. Funktio päivittää sekätextColor
attribuutit ettäcustomTextColor
. Koska noudatimme nimeämissääntöjä, se päivittyy automaattisesticustomTextColor
, vaikka emme koskaan antaneet tätä määritteen nimeä.
Huomaa, että "set"-funktio, joka tarjotaan propaan, noudattaa sääntöä: " setYourAttributeName
". Koska toimitimme textColor
, funktio on nimetty setTextColor
. Jos sen sijaan nimeämme attribuuttimme awesomeColor
ja antaisimme tämän withColors
objektiin, set-funktion nimeksi tulee setAwesomeColor()
.
ToteutusPanelColorSettings
Seuraava vaihe on varsinaisen Tarkastaja-osion käyttöönotto. Tätä varten lisäämme komponentin PanelColorSettings
sisään. InspectorControls
Koska React vaatii kaiken olevan yhden juurisolmun sisällä, käytämme myös Fragment
(from wp.elements
) käärimään kaiken sisällä.
Ensin tiedoston yläreunaan rakennemuutoksia:
const { Fragment } = wp.element;
const { InspectorControls, PanelColorSettings, withColors } = wp.blockEditor;
Ja päivitämme BlockWithColorSettings
komponenttimme tällaiseksi:
Kuten rivistä näkyy, tuhoamme osoitteesta ja: ltä #2
saadut rekvisiitta. Muista, että se on osoitteesta saatu objekti ja attribuutti. Meidän ei kuitenkaan tarvitse viitata määritteeseen.withColors``textColor``setTextColor``props.textColor``withColors``props.attributes.textColor
Komponentin rekvisiittaksi PanelColorSettings
voimme antaa osion otsikon (otsikko Inspectorin kokoontaitettavassa laatikossa). Tärkeä asia tässä on rekvisiitta, colorSettings
jossa meidän on tarjottava joukko värinasetusobjekteja. Jokaiselle väriasetukselle (meillä on tällä hetkellä vain yksi) meidän on annettava joitain ominaisuuksia. Kiinteistö value
odottaa tällä hetkellä valitun heksadesimaalikoodin (vaikka paletin väri valittiin). Tämä tarjotaan meille textColor
potkussa, kiinteistön sisällä color
. onChange
Kiinteistölle tarjoamme yksinkertaisesti "set"-toiminnon, jonka tarjoaa withColors
, setTextColor
. Ja lopuksi meidän pitäisi antaa, label
jotta käyttäjä tietää, mihin elementtiin tämä väri vaikuttaa. Se näkyy värin valintaalueen yläpuolella.
Näin komponenttimme näkyy Gutenberg-editorissa juuri nyt:
Se päivittää nyt onnistuneesti ominaisuuksiamme värejä valittaessa. Voit nähdä, että se muistaa värivalintasi tallentaessasi julkaisua.
Mitään visuaalisesti ei kuitenkaan tapahdu, kun vaihdat värejä. Värivalinta tallennetaan attribuutteihin, mutta editorissa ei tapahdu värin muutosta eikä julkaisua esikatseltaessa. Tämä johtuu siitä, että meidän on lisättävä koodi lohkon luokille ja tyyleille. Meidän on tehtävä tämä sekä edit
funktiolle (joka on editorille) että save
funktiolle (käyttöliittymä). Se on seuraava askel.
Luokka- ja sisäisten tyylien käsittelyedit
Meidän on rakennettava lohkon solmuluokka- ja tyyliattribuutit valitun väriasetuksen mukaan. Onneksi withColors
saamme tähän jonkin verran automaatiota. Muista, että props.textColor
se on objekti, joka sisältää kaikki tarvitsemamme tiedot, mukaan lukien luokan nimen.
Voisimme tehdä jotain näin:
Rivillä #20
käytämme kriittistä luokkaa ja sisäistä tyyliä lohkomme juurisolmuun. Sitä ennen rakennetaan luokka- ja inline style -attribuutti tarkistamalla props.textColor
objekti.
Tämän muutoksen jälkeen mukautetun lohkon pitäisi nyt olla täysin toimiva editorissa. Aina kun vaihdat väriä, lohko muuttaa tekstin väriä. Mahtava! Viimeinen vaihe on tehdä tämä myös save
funktiolle, jotta saamme nämä luokat ja tyylit myös käyttöliittymään.
Luokka- ja sisäisten tyylien käsittelysave
Luokka- ja rivityylien rakentamisen ja niiden käyttämisen juurisolmussa ajatus on sama save
kuin kohteessa edit
. Mutta siinä on ratkaiseva ero. save
Meillä ei ole tarjoamia withColors
rekvisiitta. Emme myöskään voi lisätä funktioon korkeamman asteen komponentteja save
. Joten save
funktiossa kaikki tieto, joka meillä on, ovat attribuutteja.
On hyvä peukalosääntö välttää "has-"-luokkanimien kovakoodausta. Entä jos WordPress päättää muuttaa tätä sääntöä tulevaisuudessa? Onneksi meillä on funktio, joka voi auttaa meitä luomaan meille oikeat luokkanimet: getColorClassName()
.
Ennen kuin unohdamme, tuhotaan se. Se on myös wp.blockEditor
paketissa.
const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;
getColorClassName()
Toiminnon käyttäminen vaatii kaksi parametria. Ensin merkkijono CSS-säännölle. Koska väriasetus on tekstin värejä varten, tarjoamme ‘ color
‘. Tämä kertoo funktiolle, että sen pitäisi palauttaa luokkanimi "on-jotain-väri" eikä esimerkiksi "on-something-background-color". Toisena parametrina meidän on annettava attribuutin arvo.
Tyyli-attribuutti luodaan yksinkertaisesti asettamalla attribuutin arvoksi "väri" customTextColor
, jos se on määritetty.
Ja tietysti, älä unohda soveltaa luokkaa ja tyyliä lohkosi juurisolmuun; kuten rivissä #12
.
PS: Jos testaat lohkoasi editorissa tätä koodia kirjoittaessasi, saat nyt lohkovirheen. Tämä johtuu siitä, että olemme nyt muuttaneet save
funktion lähtöä ja kaikki aiemmin tallentamasi tiedot ovat ristiriidassa. Sinun on poistettava esto ja lisättävä se uudelleen.
Tämän muutoksen jälkeen lohkosi pitäisi nyt käyttää valittua tekstin väriä oikein myös käyttöliittymässä.
Ja siinä se! Olet nyt onnistuneesti ottanut väriasetukset käyttöön lohkossasi. Jos olet kiinnostunut lisäämään useita väriasetuksia (ei vain tekstin väriä), lue eteenpäin.
Huomautus useista väriasetuksista
Tähän mennessä sinun pitäisi pystyä toteuttamaan useita väriasetuksia. Haluat ehkä lisätä lohkoasi taustavärin, tekstin värin, reunuksen värin tai minkä tahansa muun asetukset. Tässä osiossa teen nopean yleiskatsauksen siitä, mitä meidän on tehtävä useiden väriasetusten toteuttamiseksi.
Oletetaan, että haluan lisätä taustavärin myös lohkooni.
Ensin minun on määritettävä uusi attribuutti luovasti nimeltä backgroundColor
. Määrittelen myös toisen attribuutin customBackgroundColor
.
Muutan edit
funktiossa tarjotun objektin withColors
sellaiseksi:
withColors({textColor: 'color', backgroundColor: 'background-color'})
Tämä kertoo withColors
, että textColor
määritteeni on CSS-säännölle " color
" (tekstin värille) ja attribuutti backgroundColor
on CSS-säännölle " background-color
". withColors
tunnistaa ja päivittää automaattisesti myös attribuutit ja customTextColor
.customBackgroundColor
PanelColorSettings
Komponentissa annan toisen objektin taulukkoon prop colorSettings
. Niin kuin:
Tämän avulla sinun pitäisi saada kaksi erillistä väriasetusta Inspector-ruutuun väriasetuksia varten.
Viimeinen vaihe on sopivien luokkanimien ja tyylien rakentaminen sekä edit
ja save
. Tämä on melko yksinkertainen vaihe, koska se vain rakentaa merkkijono- tai tyyliobjektin oikein. Muista, että luokkasi nimen on tuettava useita väriluokkia (esim. jos valittiin sekä tekstin väri että taustaväri). Lisää vain välilyönti jokaisen luokan nimen väliin.
PS: Jos joudut käsittelemään monia luokkanimiä lohkollesi, saatat hyötyä classnames
paketin asentamisesta. Melkein kaikki Gutenbergin komponentit käyttävät tätä kirjastoa luokkanimien yhdistämiseen helpommin.
Päätelmä ja täydellinen koodi
Sinun olisi nyt pitänyt oppia käyttämään väriasetuksia mukautetussa lohkossasi. Toivottavasti tästä oli sinulle jotain hyötyä! Minun piti lisätä tämä ominaisuus projektiini, enkä todellakaan löytänyt mitään tietoa tai hyvää dokumentaatiota. Joten tämä on tulos siitä, että olen yhdistänyt kaiken, mitä olen oppinut tästä aiheesta monien yritysten ja erehdyksen jälkeen.
Tässä on lopullinen koodi kokonaisuudessaan mukautetulle lohkolle, jossa on tekstin väriasetus: