Kohandatud Gutenbergi ploki loomine – 5. osa: inspektori sätted

Eelmistes sammudes õppisime komponentide ja atribuutide plokis renderdamise põhitõdesid. Selles etapis keskendume sellele, mida WordPress (vähemalt koodis) Inspectoriks nimetab: redaktori paremas servas olev külgriba. Käsitleme mõnda uut komponenti, mida on mõttekas külgribale paigutada, ja kuidas neid käsitleda.

Inspektor/külgriba komponent

Kohandatud sätete ja HTML-i sisestamiseks inspektori külgribale mähite kõik komponendi nimega InspectorControls. Mida iganes sellesse komponenti paned, väljastatakse külgribal, mitte ploki/redaktorisse endasse. Põhimõtteliselt saab funktsiooni tagastusse panna komponendi ja selle sisu igale poole edit.

Peale selle saate sätteid hallata külgribal nii, nagu need olid ploki sees. Iga seade nõuab atribuuti ning atribuute laadite ja värskendate samal viisil.

Vaatame kõigepealt, kuidas meie ploki külgriba näeb välja (kui meie plokk on redaktoris aktiivne), lähtudes eelmises etapis saadud koodist.

Kõik plokid näitavad vaikimisi ploki ikooni, nime ja kirjeldust ning jaotist Täpsem – ahendatud. Täpsemalt leiate tekstisisestuse ploki CSS-klassi pakkumiseks.

Külgriba jaotise ja mõnede sätete lisamine

Külgriba on jagatud osadeks (koodis nimetatakse neid paneelideks) ning optimaalse disaini ja funktsionaalsuse jaoks (sh avatud ahendamise funktsioon) peaksime paneelide õigeks väljastamiseks kasutama WordPressi komponente.

Kasutage PanelBodyjaotise lisamiseks komponenti (need, mida saate avada või ahendada), mis on wp.componentspakendis. Komponent aktsepteerib mõningaid rekvisiite, näiteks pealkirja ja selle kohta, kas paneel peaks vaikimisi olema avatud või suletud. Samuti saate avamise-sulgemise päästikule pakkuda kohandatud klassi, ikooni ja lisada sündmuse funktsiooni.

PanelBodySeejärel soovitab WordPress kujunduse sujuvamaks muutmiseks kasutada komponenti, PanelRowmis toimib paneelis üldiste konteineritena. See komponent rakendab teie sisule automaatselt teatud veerise ja painduva rea ​​stiili. Stiili " flex-direction: row" tõttu peaksite mähkima iga seadistuse ühe sisse PanelRow. Või võite selle üldse vahele jätta ja võtta vastutuse selle kujundamise eest ise, kasutades dive ja muud sellist.

Paneeli ja sätete lisamine

Lisame oma ploki jaoks külgriba paneeli, mille sees on mõned sätted, et seda praktikas näha. Lisame lülitusnupu, sisendi valimise, värvivalija ja märkeruudu – lihtsalt selleks, et saada kogemusi erinevat tüüpi sisendkomponentidega. Jätsin ploki sisu (kahe RichTexts-ga) ja savefunktsiooni nagu varemgi.

Nagu alati, alustame komponentide ja funktsioonide struktureerimisest, mida soovime kasutada. Sees määratleme ühe atribuudi sisendi kohta attributesja registerBlockType()sobitame tüübi – näiteks lülitusnupp eeldab tõeväärtust ja kuna rippmenüü väärtused on stringid, peaks atribuut olema ka tüübistring.

Real #41käivitame InspectorControlskomponendi ja kõik sellest punktist kuni jooneni #80ilmub külgribale. Ülejäänud kuvatakse redaktoris ja ma pole seal muudatusi teinud.

Sees loome esmalt paneeli, PanelBodymille rekvisiit initialOpenon seatud tõeseks, ütleme Gutenbergile, et see paneel tuleks vaikimisi avada. Ja siis on meie otsustada, mida igaühele lisada PanelRow.

Komponendi jaoks ToggleControlkasutame samu rekvisiite, mida oleme varem tekstisisendite puhul teinud, välja arvatud see, et propi asemel valueesitame atribuudi väärtuse prop sees checked. See kehtib kõigi sisendite kohta, mis eeldavad märgistatud atribuuti tavalises HTML-is, näiteks märkeruudud. Raadionuppude jaoks kasutaksite rekvisiite selected, kuna seda kasutaksite ka tavalises HTML-is. Pidage meeles, et selle sisendi atribuut peab olema tüüpi boolean.

Ainsuse CheckboxControlmärkeruudu käsitsemisel toimib täpselt samamoodi nagu ToggleControl– see tagastab tõeväärtuse, olenemata sellest, kas see on märgitud või mitte.

Loob valiku rippmenüü ja ootab SelectControlvõimalikke valikuid rekvisiidis massiivina. optionsIga element peab olema objekt, millel on omadused labelja value. Sama kehtib ka märkeruutude ja raadionuppude (RadioControl) kohta. Tavaolukorras genereeriksite valikud tõenäoliselt muutujana väljaspool HTML-väljundit.

Võite märgata, et see ColorPickertöötab teistest veidi erinevalt, kuna see on keerulisem komponent, mitte standardne HTML-sisend. Esitage colorsalvestatud värvi jaoks tugi ja selle asemel onChange(käivitub üks kord klõpsamisel, aga ka iga kord, kui väärtust lohistamise ajal muudetakse – see võib põhjustada palju tulekahjusid) onChangeComplete. Sellel sündmusel tagastatud rekvisiit on samuti objekt, kus peame otsustama, millise osa tahame oma atribuudis salvestada. Selles näites tahame salvestada kuueteistkümnendväärtuse (ilma alfa/läbipaistmatuseta), nii et sees setAttributes()eraldame tagastatud objekti hexatribuudi. colorSee on ka põhjus, miks lisame kinnisvaradisableAlphaalfakanali kasutajaliidese eemaldamiseks (läbipaistmatuse kontrollimiseks), kuna pole mõtet seda kasutajale pakkuda, kui me läbipaistmatuse väärtust kunagi ei salvesta.

Igal komponendil on labelsaadaval tugi, välja arvatud värvivalija. Kui soovite sildi või teksti enne seda väljastada, peate selle hea väljanägemise tagamiseks HTML-i või stiiliga askeldama.

Ilmselgelt saate lisada nii palju paneele, kui soovite, lisage lihtsalt PanelBodypärast eelmist komponenti.

Kui olete huvitatud plokisätete lisamise kohta lisateabe saamiseks, on mul eraldi õpetused Inspectori keerukamate sätete ja komponentide jaoks; Pildivaliku lisamine ja värviseadete paneeli lisamine.

Käitleminesave

Jätsin savefunktsiooni endiseks. See on teie otsustada ja kõik sõltub sellest, mida väljundis olevad sätted juhivad. Teate juba, kuidas iga seade väärtusi hankida. Oletame näiteks, et tõeväärtuslik atribuut activateLasersjuhib kohandatud HTML-i elemendi renderdamist või mitte. Kui atribuut on truediv, tuleks väljastada, muidu mitte. Saate seda teha traditsioonilise if-checkiga või kasutada JSX-i sisemist ifja &&operaatorit. Lisateavet selle kohta leiate Reacti tingimusliku renderdamise juhendist.

Kuna me kasutame RichTextseda väljundit, poleks see redaktoris nähtav, kuid see ilmub kasutajaliideses.

Rohkem komponente leiate wp.components Githubi repost. Enamik neist kaustadest peaks pakkuma teile lugemist koos mõningate dokumentidega selle kasutamise kohta. Õppisin sellest suurema osa sellest repost ja ka WordPressi põhikomponentidest uurides, kuidas nad seda tegid.

Sarja järgmises etapis keskendume sellele, kuidas juhtida ploki tööriistariba. Õpime, kuidas käsitleda näiteks ploki joondust ja lisada tööriistaribale kohandatud nuppe.