...
✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuinka lisätä väriasetuksia mukautettuun Gutenberg-lohkoon

6

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:

Kuinka lisätä väriasetuksia mukautettuun Gutenberg-lohkoon

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 PanelColorSettingspaketista. 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 withColorspalautamme oman komponenttimme mukautetulle lohkollemme. Lohkokomponenttimme saa tarvittavat rekvisiitta värien kanssa työskentelyyn osoitteesta withColors.

Komponentti withColorskä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). withColorsyksinkertaistaa 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 withColorsnoudattaminen 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, textColorse on automaattisesti undefinedja 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 withColorssisältävät toiminnon, joka päivittää attribuutit automaattisesti puolestasi. Sinun tarvitsee vain välittää tämä toiminto onChangetapahtumalle PanelColorSettingskomponentille, 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ä editfunktio viittaa yksinkertaisesti erilliseen komponenttiin, BlockWithColorSettingssen sijaan että kirjoittaisit sen tekstin sisään. Tämä helpottaa sen toteuttamista withColorsmyö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 withColorsja PanelColorSettings.

ToteutuswithColors

Kuten aiemmin mainittiin withColors, se on korkeamman asteen komponentti, jonka palauttaminen vaatii komponentin. Haluamme luonnollisesti sen palauttavan muokkauskomponenttimme, BlockWithColorSettings. Mutta parametrina withColorstarjoamme objektin.

Kohteessa, joka välitetään, withColorson kerrottava, withColorsmitä 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ä. withColorsasuu wp.blockEditorpaketissa.

const { withColors } = wp.blockEditor;

Muutamme edittoiminnon muotoon:

Tällä koodilla komponenttimme BlockWithColorSettingssaa 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 ominaisuuteen class.
  • props.setTextColor: Toiminto, joka päivittää attribuuttimme puolestamme. Tarjoamme tämän väriasetusten onChangetapahtumaa varten, kuten näemme myöhemmin. Funktio päivittää sekä textColorattribuutit että customTextColor. Koska noudatimme nimeämissääntöjä, se päivittyy automaattisesti customTextColor, 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 awesomeColorja antaisimme tämän withColorsobjektiin, set-funktion nimeksi tulee setAwesomeColor().

ToteutusPanelColorSettings

Seuraava vaihe on varsinaisen Tarkastaja-osion käyttöönotto. Tätä varten lisäämme komponentin PanelColorSettingssisään. InspectorControlsKoska 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 BlockWithColorSettingskomponenttimme tällaiseksi:

Kuten rivistä näkyy, tuhoamme osoitteesta ja: ltä #2saadut 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 PanelColorSettingsvoimme antaa osion otsikon (otsikko Inspectorin kokoontaitettavassa laatikossa). Tärkeä asia tässä on rekvisiitta, colorSettingsjossa meidän on tarjottava joukko värinasetusobjekteja. Jokaiselle väriasetukselle (meillä on tällä hetkellä vain yksi) meidän on annettava joitain ominaisuuksia. Kiinteistö valueodottaa tällä hetkellä valitun heksadesimaalikoodin (vaikka paletin väri valittiin). Tämä tarjotaan meille textColorpotkussa, kiinteistön sisällä color. onChangeKiinteistölle tarjoamme yksinkertaisesti "set"-toiminnon, jonka tarjoaa withColors, setTextColor. Ja lopuksi meidän pitäisi antaa, labeljotta 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:

Kuinka lisätä väriasetuksia mukautettuun Gutenberg-lohkoon

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ä editfunktiolle (joka on editorille) että savefunktiolle (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 withColorssaamme tähän jonkin verran automaatiota. Muista, että props.textColorse on objekti, joka sisältää kaikki tarvitsemamme tiedot, mukaan lukien luokan nimen.

Voisimme tehdä jotain näin:

Rivillä #20käytämme kriittistä luokkaa ja sisäistä tyyliä lohkomme juurisolmuun. Sitä ennen rakennetaan luokka- ja inline style -attribuutti tarkistamalla props.textColorobjekti.

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 savefunktiolle, 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 savekuin kohteessa edit. Mutta siinä on ratkaiseva ero. saveMeillä ei ole tarjoamia withColorsrekvisiitta. Emme myöskään voi lisätä funktioon korkeamman asteen komponentteja save. Joten savefunktiossa 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.blockEditorpaketissa.

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 savefunktion 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 editfunktiossa tarjotun objektin withColorssellaiseksi:

withColors({textColor: 'color', backgroundColor: 'background-color'})

Tämä kertoo withColors, että textColormääritteeni on CSS-säännölle " color" (tekstin värille) ja attribuutti backgroundColoron CSS-säännölle " background-color". withColorstunnistaa ja päivittää automaattisesti myös attribuutit ja customTextColor.customBackgroundColor

PanelColorSettingsKomponentissa 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ä editja 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ä classnamespaketin 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:

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja