Edellisissä vaiheissa opimme komponenttien ja attribuuttien hahmontamisesta lohkossa. Tässä vaiheessa keskitymme siihen, mitä WordPress (ainakin koodissa) kutsuu Inspectoriksi: sivupalkkiin editorin oikealla puolella. Käsittelemme joitain uusia komponentteja, jotka on järkevää sijoittaa sivupalkkiin ja miten niitä käsitellään.
Tarkastajan/sivupalkin komponentti
Jos haluat lisätä mukautetut asetukset ja HTML-koodin Inspector-sivupalkkiin, käärit kaiken komponentin nimeltä InspectorControls. Mitä tahansa laitat tämän komponentin sisään, tulostetaan sivupalkkiin, ei itse lohkoon/editoriin. Voit periaatteessa laittaa komponentin ja sen sisällön kaikkialle editfunktion palautukseen.
Sen lisäksi käsittelet asetuksia sivupalkin sisällä samoin kuin ne olivat lohkon sisällä. Jokainen asetus vaatii määritteen, ja voit ladata ja päivittää määritteet samalla tavalla.
Katsotaanpa ensin nopeasti, miltä lohkomme sivupalkki näyttää (kun lohkomme on aktiivinen editorissa) edellisessä vaiheessa päädyttyyn koodiin perustuen.
Kaikissa lohkoissa näkyy oletusarvoisesti lohkon kuvake, nimi ja kuvaus sekä osio Lisäasetukset – kutistettu. Advanced-kohdasta löydät tekstisyötteen CSS-luokan tarjoamiseksi lohkolle.
Sivupalkkiosion ja joidenkin asetusten lisääminen
Sivupalkki on jaettu osiin (kutsutaan koodissa paneeleiksi), ja optimaalisen suunnittelun ja toiminnallisuuden saavuttamiseksi (mukaan lukien avoimen tiivistyksen toiminto) meidän tulisi käyttää WordPressin komponentteja paneelien tulostamiseen oikein.
Käytä komponenttia PanelBodyosion lisäämiseen (ne jotka voit avata tai tiivistää), jotka löytyvät wp.componentspakkauksesta. Komponentti hyväksyy muutaman rekvisiitin, esimerkiksi otsikon ja sen, pitäisikö paneelin olla auki vai kiinni vai ei. Voit myös tarjota mukautetun luokan, kuvakkeen ja liittää tapahtumatoiminnon avaus-sulje-liipaisuun.
PanelBodyWordPress suosittelee sitten käyttämään PanelRowkomponenttia, joka toimii paneelin yleisinä konteina – suunnittelun virtaviivaistamisen varmistamiseksi. Tämä komponentti käyttää automaattisesti jonkin verran marginaalia ja joustavaa rivityyliä sisällöllesi. Tyylin " flex-direction: row" takia sinun tulee kääriä jokainen asetus yhteen PanelRow. Tai voit ohittaa sen kokonaan ja ottaa vastuun sen muotoilusta itse diveillä ja sellaisilla.
Paneelin ja asetusten lisääminen
Lisätään lohkoomme sivupalkkipaneeli, jossa on muutama asetus, jotta näemme sen käytännössä. Lisäämme vaihtosäätimen, valintatulon, värivalitsimen ja valintaruudun – vain saadaksemme kokemusta erityyppisistä syöttökomponenteista. Olen jättänyt lohkon sisällön (kahdella RichTexts:llä) ja savefunktion aivan kuten ennenkin.
Kuten aina, aloitamme purkamalla komponentit ja toiminnot, joita haluamme käyttää. Sisällä määritämme yhden attribuutin syötettä kohden ja attributessovitamme registerBlockType()tyypin – esimerkiksi vaihtosäädin odottaa loogista arvoa ja koska pudotusvalikon arvot ovat merkkijonoja, attribuutin tulee olla myös tyyppimerkkijono.
Riviltä #41aloitamme InspectorControlskomponentin, ja kaikki siitä pisteestä riviin #80ilmestyy sivupalkkiin. Loput näkyvät itse editorissa, enkä ole tehnyt siihen muutoksia.
Sisälle luomme ensin paneelin, PanelBodyjossa prop initialOpenon asetettu tosi, kerromme Gutenbergille, että tämä paneeli pitäisi avata oletuksena. Ja sitten on meistä itsestämme kiinni, mitä kuhunkin lisätään PanelRow.
Komponentille ToggleControlkäytämme samoja rekvisiitta, kuin olemme tehneet ennenkin tekstinsyötteiden kanssa, paitsi että prop:n sijaan valueannamme attribuutin arvon prop sisällä checked. Tämä koskee kaikkia syötteitä, jotka odottavat valittua attribuuttia tavallisessa HTML:ssä, esimerkiksi valintaruudut. Radiopainikkeissa käytät rekvisiittaa selected, koska tätä käytetään myös tavallisessa HTML:ssä. Muista, että tämän syötteen määritteen on oltava tyyppiä boolean.
Mitä tulee CheckboxControlyksittäisen valintaruudun käsittelyyn, se toimii täsmälleen samalla tavalla kuin ToggleControl– se palauttaa loogisen arvon riippumatta siitä, onko se valittu vai ei.
Luo SelectControlvalikon avattavan valikon ja odottaa mahdollisia valintoja taulukkona prop options. Jokaisen elementin on oltava objekti, jolla on ominaisuudet labelja value. Sama koskee valintaruutuja ja valintapainikkeita (RadioControl). Normaaleissa olosuhteissa luot luultavasti valinnat muuttujana HTML-ulostulon ulkopuolella.
Saatat huomata, että se ColorPickertoimii hieman eri tavalla kuin muut, koska tämä on monimutkaisempi komponentti eikä tavallinen HTML-syöttö. Anna colortallennetun värin tuki ja sen sijaan onChange(säteilee kerran napsauttamalla, mutta myös aina, kun arvoa muutetaan vedettäessä – mikä voi johtaa useisiin tulipaloihin) onChangeComplete. Tässä tapahtumassa palautettu rekvisiitta on myös objekti, jossa meidän on päätettävä, minkä osan haluamme tallentaa attribuutissamme. Tässä esimerkissä haluamme tallentaa heksadesimaaliarvon (ilman alfaa/opasiteettia), joten sisällä setAttributes()poimimme palautetun objektin hexominaisuuden. colorTästä syystä myös lisäämme kiinteistöndisableAlphaAlfa-kanavan käyttöliittymän poistaminen (opasiteetin hallintaan), koska ei ole järkevää tarjota käyttäjälle tätä, kun emme koskaan tallenna peittävyysarvoa.
Jokaisessa komponentissa on labelkäytettävissä rekvisiitta, paitsi värivalitsin. Jos haluat tulostaa tunnisteen tai tekstin ennen sitä, sinun on käytettävä HTML-koodia tai tyyliä varmistaaksesi, että se näyttää hyvältä.
Voit tietysti lisätä niin monta paneelia kuin haluat, lisää vain toinen PanelBodykomponentti edellisen jälkeen.
Jos olet kiinnostunut oppimaan lisää lohkoasetusten lisäämisestä, minulla on erilliset opetusohjelmat monimutkaisemmille asetuksille ja komponenteille Inspectorille. Kuvavalinnan lisääminen ja väriasetuspaneelin lisääminen.
Käsittelysave
Olen jättänyt savetoiminnon entisellään. Se on sinun ja kaikki riippuu siitä, mitä asetukset ohjaavat lähdössä. Tiedät jo, kuinka saada kunkin asetuksen arvot. Esimerkkinä oletetaan, että boolean-attribuutti activateLasersohjaa, hahmonnetaanko mukautettu HTML-elementti vai ei. Jos attribuutti trueon div, tulee tulostaa, muuten ei. Voit tehdä sen perinteisellä if-checkillä tai käyttää JSX:n riviä ifja &&operaattoria. Lue lisää tästä Reactin ehdollisen renderöinnin oppaasta.
Koska käytämme RichTexttätä tulostetta, se ei näy editorissa, mutta se näkyy käyttöliittymässä.
Löydät lisää komponentteja wp.components Githubin reposta. Useimmat näistä kansioista tarjoavat sinulle readme-tiedoston, jossa on ohjeita sen käytöstä. Opin suurimman osan tästä katsomalla tätä repoa ja myös WordPressin ydinkomponentteja, kuinka he sen tekivät.
Sarjan seuraavassa vaiheessa keskitymme lohkon työkalurivin ohjaamiseen. Opettelemme käsittelemään esimerkiksi lohkon kohdistusta ja lisäämään mukautettuja painikkeita työkalupalkkiin.