Kuidas lisada kohandatud Gutenbergi plokki värvisätteid

Selles postituses käsitletakse üksikasjalikult, kuidas lisada kohandatud WordPressi Gutenbergi plokki värvisätteid. Õpime, kuidas lisada sama värviseadete komponenti, mis võimaldab valida paletivärvide ja kohandatud värvide hulgast, nagu paljud WordPressi vaikeplokid kasutavad.

Selle lisame oma kohandatud plokki:

Gutenbergi komponente kasutades saame selle paleti/värviosa väga lihtsalt oma kohandatud plokki rakendada. Saate määrata värvisätted, mis mõjutavad mis tahes soovitud värvi; tausta, teksti värvi, äärise värvi või mis iganes muu. Samuti saate sellele paneelile lisada nii palju värvisätteid, kui soovite.

Enne koodiga tutvumist peate teadma mõningaid asju. Ärge jätke koodi juurde, sest järgmine jaotis selgitab palju, miks kood peab seda nii tegema.

Mida peate kõigepealt teadma

Komponendid paleti/värviseadete rakendamiseks on ja PanelColorSettingspakendist. Komponent on nn kõrgema järgu komponent ja seda tuleb realiseerida natuke teistmoodi kui lihtsalt tavalise komponendi väljastamist. Ma räägin hiljem veidi üksikasjalikumalt. Kuid kõigepealt peame olema teadlikud põhitõdedest, kuidas Gutenberg ploki värviseadeid käsitleb.withColors``wp.blockEditor``withColors

Kuidas Gutenbergi plokid värviseadeid käsitlevad

Gutenbergi värviseadete käsitlemisel plokkides kehtivad teatud reeglid. Kui olete kunagi varem Gutenbergi toetatud teema stiili kujundanud, olete tõenäoliselt nende reeglitega juba tuttav. Sellegipoolest vaatame need kiiresti läbi, sest peame seda oma plokkkoodis käsitlema.

• Kui paleti värv on valitud, saab sõlmeploki element kindla mustri klassi. Tund algab tähega " has-" ja seejärel järgneb paleti nälkjas. Lõpp sõltub sellest, millist elementi värv peaks mõjutama. Teksti värvi puhul lõpeb see tähega " -color". Taustavärvi puhul lõpeb see tähega " -background-color". Näiteks plokk, mille taustavärviks on valitud paletivärv "punane", saab klassi " has-red-background-color".
• Kui valitakse kohandatud värv (värvivalijast), saab sõlme ploki element inline stiili koos kuueteistkümnendkoodiga. Näiteks taustavärvi jaoks valitud kohandatud värv #DD0000 saab atribuudi " style="background-color: #DD0000;".

Kui rakendame oma ploki värvisätteid, peame rakendama õige klassi ja tekstisisese stiili. Teeme seda selle õpetuse lõpus.

Kuidas töötadawithColors

Nagu varem mainitud, withColorson see kõrgema järgu komponent. Põhimõtteliselt tähendab see, et see on komponent, mis võtab komponendi ja tagastab uue komponendi. Tagastatud komponendis saame kasulikud rekvisiidid kõrgemat järku komponendist. Lihtsamalt öeldes kasutame withColorskohandatud ploki jaoks oma komponendi tagastamiseks. Meie plokikomponent saab värvidega töötamiseks vajalikud rekvisiidid aadressilt withColors.

Komponent withColorskäsitleb olekut ja palju funktsioone värvidega töötamiseks. Ja me saame selles protsessis palju automatiseerimist. See on väga mugav, et välja selgitada, kas valitud värv on paletivärv (peame lisama klassi) või kohandatud värv (peame lisama tekstisisese stiili). withColorslihtsustada palju valitud värvi salvestamise protsessi, mis iganes see ka poleks, meie ploki atribuutidesse. Atribuutidest rääkides..

Atribuudid jawithColors

Ilmselt vajab teie plokk valitud värvi salvestamiseks atribuute. Et saada kasu withColori automatiseerimisest õigete värvide salvestamisel, peate tegelikult määrama iga värvisätte jaoks kaks atribuuti. Üks paletivärvi näpunäidete ja teine ​​kuueteistkümnendkoodi salvestamiseks. Siiski on mõned reeglid.

Oletagem, et soovite lisada ploki tekstivärvi jaoks värvisätte – nii otsustate määratleda atribuudi, mille nimi on tabav textColor. Seejärel peate mustris " customYourOriginalAttribute" määrama teise atribuudi. Selles näites peab teise atribuudi nimi olema " customTextColor". Pidage meeles kaamelCase (suurtähe) siin. Selle mustri järgimine withColorstoimub automaatselt:

• Kui paleti värv on valitud, sisaldab atribuut ” textColor" paleti näppu.
• Kui valitud on kohandatud värv, customTextColortäidetakse kuueteistkümnendkoodiga " ".

Need kaks töötavad koos. Kui valitakse kohandatud värv, on textColorsee automaatselt undefinedja vastupidi.

Ja lõpuks, viimane asi, mida meeles pidada: te ei pea seda kasutama setAttributes()oma värviatribuutide värskendamiseks! Pakutavad rekvisiidid withColorssisaldavad funktsiooni, mis värskendab teie atribuute teie eest automaatselt. Kõik, mida pead tegema, on edastada see funktsioon onChangesündmusele PanelColorSettingskomponendile ja teie atribuute värskendatakse automaatselt.

Ok, on aeg seda kõike praktikas näha!

Värvisätete rakendamine kohandatud plokis

Asjade alustamiseks on mul üsna kasutu kohandatud plokk, mis ei tee muud, kui kuvab kõvakoodiga teksti. See muudab lihtsalt värviseadete lisamiseks kodeerimiseks vajaliku eraldamise lihtsaks. Mul on õpetusesari, kuidas luua oma kohandatud plokke, kui soovite rohkem teada saada.

Märkus: kirjutan kogu koodi ES6/ESNexti. See hõlmab noolefunktsioone, mis nõuavad Babeli/veebipaketi seadistamisel erilist hoolt. Kui saate mõne alloleva koodi puhul vigu, järgige minu juhendit Webpacki ja Babeli seadistamiseks ES6/ESNexti jaoks või kohandage koodi nii, et see ei kasutaks "eksperimentaalseid süntakse".

See on minu põhiline kohandatud plokk enne värviseadetega midagi tegemist:

See on üsna elementaarne. Pange tähele, et editfunktsioon viitab lihtsalt eraldi komponendile, BlockWithColorSettingsselle asemel, et seda tekstisiseselt kirjutada. withColorsSee muudab selle hilisema rakendamise lihtsamaks .

Olgu, aeg rakendada värviseadeid meie plokis! Näiteks soovin seadistada teksti värvi.

Atribuutide lisamine

Nagu varem mainitud, peame iga värviseade jaoks määratlema kaks atribuuti. Ja me peame olema nende nimede määramisel eriti ettevaatlikud. Soovin lisada tekstivärvi atribuudi, seega panen atribuudile nimeks textColor. Mis tähendab, et lisan ka atribuudi customTextColor. Mõlemad peaksid olema tüüpi stringid.

Meie atribuudid on valmis ploki teksti värviseadete salvestamiseks. Nüüd on aeg juurutada withColorsja PanelColorSettings.

RakendaminewithColors

Nagu varem mainitud withColors, on see kõrgema järgu komponent, mille tagastamiseks peaks olema komponent. Ilmselt tahame, et see tagastaks meie redigeerimiskomponendi BlockWithColorSettings. Kuid parameetrina withColorspakume objekti.

Talle edastatavas objektis withColorspeame ütlema, withColorsmillist atribuuti soovime värvi salvestamiseks kasutada ja millist elementi see värvib (meie puhul tekstivärv, mis tähendab CSS-i reeglit “värv”). CSS-i reeglist teavitamine tagab, et tagastatud klassinimed on õiged. Kuna see on tekstivärv, tahame klassinimesid nagu "has-color".

Esmalt ülaosas mõni destruktureerimine. withColorsasub wp.blockEditorpakendis.

const { withColors } = wp.blockEditor;

Muudame editfunktsiooni järgmiseks:

Selle koodiga BlockWithColorSettingssaab meie komponent täiendavaid rekvisiite:

• props.textColor: on objekt, mis koosneb kogu teabest valitud värvi kohta. Kui valiti paleti värv, salvestab see atribuudid kuueteistkümnendkoodi, paleti nälkja, klassi nime ja muu jaoks. Kui valiti kohandatud värv, sisaldab objekt kuueteistkümnendkoodi. Kuueteistkümnendkoodi leiate alati kinnisvarast color. Ja klassi nimi (ainult siis, kui valiti paleti värv) määratakse atribuudis class.
• props.setTextColor: funktsioon, mis värskendab meie atribuute. Pakume seda värviseadete onChangesündmuse jaoks, nagu näeme hiljem. Funktsioon värskendab nii textColorja customTextColoratribuute. Kuna järgisime nimetamisreegleid, värskendatakse seda automaatselt customTextColor, kuigi me pole seda atribuudi nime kunagi esitanud.

Pange tähele, et rekvisiidina pakutav funktsioon "set" järgib reeglit: " setYourAttributeName". Kuna me andsime textColor, on funktsiooni nimi setTextColor. Kui me selle asemel nimetaksime oma atribuudile nime awesomeColorja esitaksime selle withColorsobjektis, oleks set-funktsiooni nimi setAwesomeColor().

RakendaminePanelColorSettings

Järgmine samm on tegeliku inspektori jaotise rakendamine. Selleks lisame komponendi PanelColorSettingssisse InspectorControls. Kuna React nõuab, et kõik oleks ühe juursõlme sees, kasutame ka Fragment(alates wp.elements) kõige selle sees oleva mähkimiseks.

Kõigepealt faili ülaosas mõni struktureerimine:

const { Fragment } = wp.element;
const { InspectorControls, PanelColorSettings, withColors } = wp.blockEditor;

Ja värskendame oma BlockWithColorSettingskomponenti millekski selliseks:

Nagu näete real #2, hävitame withColors, textColorja setTextColor. Pidage meeles, et props.textColorsee on objektilt saadud objekt withColorsja props.attributes.textColoratribuut. Meil pole aga vaja atribuudile viidata.

Komponendi rekvisiidina PanelColorSettingssaame anda jaotisele pealkirja (pealkiri Inspectori kokkupandavas kastis). Siin on oluline rekvisiit, colorSettingskus peame pakkuma hulga värviseadeid. Iga värviseade jaoks (meil on praegu ainult üks) peame esitama mõned omadused. Vara valueeeldab praegu valitud kuueteistkümnendkoodi (kuigi valiti paleti värv). See on meile ette nähtud textColorkinnisvara sees olevas rekvisiidis color. Kinnisvara jaoks onChangepakume lihtsalt komplekti funktsiooni, mille pakub withColors, setTextColor. Ja lõpuks peaksime andma a label, et kasutaja teaks, millist elementi see värv mõjutab. See kuvatakse otse värvi valimise ala kohal.

Nii kuvatakse meie komponent Gutenbergi redaktoris praegu:

Nüüd värskendab see edukalt meie atribuute värvide valimisel. Näete, et see jätab postituse salvestamisel teie värvivaliku meelde.

Värvide vahetamisel ei juhtu aga visuaalselt midagi. Värvivalik salvestatakse atribuutidesse, kuid värvimuutust ei toimu redaktoris ega ka postituse eelvaate kuvamisel. Seda seetõttu, et peame lisama koodi ploki klasside ja stiilide jaoks. Peame seda tegema nii editfunktsiooni (mis on redaktori jaoks) kui ka savefunktsiooni jaoks (liides). See on järgmine samm.

Klassi ja tekstisiseste stiilide käsitlemineedit

Peame ehitama ploki sõlme klassi ja stiili atribuudid vastavalt valitud värviseadele. Õnneks withColorssaame selles osas automatiseerida. Pidage meeles, et props.textColorsee on objekt, mis sisaldab kogu vajalikku teavet, sealhulgas klassi nime.

Võiksime teha midagi sellist:

Real #20rakendame oma ploki juursõlmele kriitilist klassi ja tekstisisest stiili. Enne seda koostame klassi ja tekstisisese stiili atribuudi, kontrollides props.textColorobjekti.

Pärast seda muudatust peaks teie kohandatud plokk nüüd redaktoris täielikult toimima. Värvi vahetamisel muudab plokk teksti värvi. Vinge! Viimane samm on seda teha ka savefunktsiooni jaoks, et saaksime need klassid ja stiilid ka kasutajaliidesesse.

Klassi ja tekstisiseste stiilide käsitleminesave

Klassi ja siseste stiilide loomise ja juursõlmele rakendamise kontseptsioon on sama, savemis rakenduses edit. Kuid on oluline erinevus. Meil saveei ole pakutud rekvisiite withColors. Ja me ei saa funktsioonile lisada kõrgema järgu komponente save. Seega on savefunktsioonis kogu teave, mis meil on, atribuudid.

See on hea rusikareegel, et vältida "has-" klassinimede kõvakodeerimist. Mis siis, kui WordPress otsustab seda reeglit tulevikus muuta? Õnneks on meil funktsioon, mis aitab meil luua meie jaoks õiged klassinimed: getColorClassName().

Enne kui unustame, hävitame selle. See on ka wp.blockEditorpakendis.

const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;

Funktsiooni kasutamine getColorClassName()nõuab kahte parameetrit. Esiteks string CSS-i reegli jaoks. Kuna meie värviseade on teksti värvi jaoks, pakume " color". See ütleb funktsioonile, et see peaks tagastama klassinime "has-something-color" ja mitte näiteks "on-something-background-color". Teise parameetrina peame esitama atribuudi väärtuse.

Stiili atribuut luuakse lihtsalt, määrates atribuudi väärtuseks "värv" customTextColor, kui see on määratletud.

Ja muidugi ärge unustage klassi ja stiili oma ploki juursõlmele rakendada; nagu rivis #12.

PS: Kui testite selle koodi kirjutamise ajal oma plokki redaktoris, kuvatakse nüüd blokeeringu viga. See juhtub seetõttu, et oleme nüüd funktsiooni väljundit muutnud saveja kõik, mida olete varem salvestanud, on vastuolus. Peate ploki eemaldama ja uuesti lisama.

Pärast seda muudatust peaks teie plokk nüüd õigesti rakendama valitud tekstivärvi ka esiprogrammis.

Ja see ongi kõik! Olete nüüd oma ploki värvisätted edukalt rakendanud. Kui olete huvitatud mitme värviseadete (mitte ainult teksti värvi) lisamisest, lugege edasi.

Märkus mitme värviseadete kohta

Nüüdseks peaksite saama rakendada mitut värviseadet. Võimalik, et soovite oma ploki jaoks lisada sätteid taustavärvi, teksti värvi, äärise värvi või muu jaoks. Selles jaotises annan kiire ülevaate sellest, mida peame tegema mitme värvisätte rakendamiseks.

Oletame, et tahan oma plokile lisada ka taustavärvi.

Kõigepealt pean määratlema uue atribuudi loovalt nimega backgroundColor. Ma määratlen ka teise atribuudi customBackgroundColor.

Funktsioonis editmuudan pakutava objekti withColorsselliseks:

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

See ütleb withColors, et minu textColoratribuut on CSS-reegli jaoks " color" (teksti värvi jaoks) ja atribuut backgroundColorCSS-reegli jaoks " background-color". withColorstuvastab ja värskendab automaatselt ka customTextColoratribuute customBackgroundColorja.

PanelColorSettingsKomponentis pakun massiivile propile veel ühe objekti colorSettings. Nagu nii:

Sellega peaksite saama kaks eraldi värviseadet värviseadete kasti Inspektor.

Viimane samm on sobivate klassinimede ja stiilide loomine nii editja save. See on üsna lihtne samm, kuna see lihtsalt ehitab stringi või stiiliobjekti õigesti. Pidage meeles, et teie klassi nimi peab toetama mitut värviklassi (nt kui valitud on nii teksti- kui ka taustavärv). Lihtsalt lisage iga klassi nime vahele tühik.

PS: Kui teil on vaja oma ploki jaoks kasutada palju klassinimesid, võib classnamespaketi installimine teile kasuks tulla. Peaaegu kõik Gutenbergi komponendid kasutavad seda teeki klassinimede hõlpsamaks kombineerimiseks.

Järeldus ja täielik kood

Nüüd peaksite olema õppinud, kuidas kohandatud plokis värvisätteid rakendada. Loodan, et sellest oli teile mingit kasu! Pidin selle funktsiooni oma projektile lisama ja ma tõesti ei leidnud mingit teavet ega head dokumentatsiooni. Nii et see on selle teema kohta õpitu konsolideerimise tulemus.

Siin on teksti värvi seadistusega kohandatud ploki näide kokku lõplik kood: