Tähän mennessä tässä opetusohjelmasarjassa olemme kirjoittaneet kaiken koodin funktion sisään registerBlockType(). editSe on täysin mahdollista ja usein suositeltavaa määrittää muokkaus erilliseen komponenttiin. Näin voimme hyödyntää toimintoja, kuten komponenttien tila- ja elinkaarimenetelmiä. Se on myös paljon puhtaampi, luettavampi ja tarjoaa uudelleenkäytettävän koodin!
Jos et ole perehtynyt React-komponenttien luomiseen tai mitä tila- ja elinkaarimenetelmät ovat, suosittelen lukemaan ensin Reactin virallisen oppaan tästä aiheesta.
Luokkakomponentin määrittäminen kohteelleedit
Voit määrittää komponentin joko funktiona tai luokkana. Luokkakomponentilla voit käyttää toimintoja, kuten esimerkiksi tila- ja elinkaarimenetelmiä. Kuitenkin uudemmissa React-versioissa (16+) voit käyttää React-koukkuja tila- ja elinkaarimenetelmien simulointiin toimintokomponenttien sisällä. Mutta tässä opetusohjelmassa keskitymme luokkakomponentin luomiseen. Se, mitä olemme tähän mennessä luoneet tässä sarjassa, "inline" registerBlockType()for editja save, ovat funktiokomponentteja.
Luokkakomponentin määrittämistä varten laajennamme WordPressin Component( wp.elementpaketissa), aivan kuten laajennat luokkakomponentin kohtaan React.Component.
Muista, että luokkakomponenttisi tulee sisältää funktio render(). Ja koska Javascript toimii, luokkasi on määritettävä ennen registerBlockType()kutsua (kirjoita luokkakomponentti ensin tiedostoon ja säilytä registerBlockType()sen jälkeen. Myöhemmin tässä viestissä opimme erottamaan komponentit erillisiksi tiedostoiksi, viemään ja sisällyttämään niitä).
Lyhyesti näin:
Rekvisiitta osoitteesta editkäytetään automaattisesti komponenttiimme. Älä unohda, että luokkakomponentti, johon sinun on viitattava rekvisiitta this.props. WordPress Gutenberg -ytimessä on yleistä käyttää erillisiä komponentteja edittoimintoihin, koska ne sisältävät useimmiten paljon enemmän koodia. Funktio savevoidaan usein jättää sisään, registerBlockType()ellei siinä ole myös paljon koodia.
Tekemällä tämän voit nyt kirjoittaa komponentin aivan kuten kirjoittaisit Reactin kanssa. Voit lisätä toimintoja, rakentajia, tila- ja elinkaarimenetelmiä.
Tämä on koodi, jonka päädyimme viimeiseen vaiheeseen, muutettuna luokkakomponentiksi:
Jos destructered attributesja setAttributesrekvisiitta, kuten me teimme, sinun tarvitsee vain muuttaa siirtyessäsi erilliseen luokkakomponenttiin on yhden rivin vaihtaminen; #9alkaen props– this.props. Kaikki koodi toimii kuten ennenkin ilman korjauksia. Siinä on tuhoamisen kauneus. Jos et tuhonnut sitä ja viitannut esim. props.attributessuoraan, sinun on lisättävä this.kaikkien yksittäisten viittausten eteen attributesja setAttributeskaikkialle.
Aloitetaan tekemään asioita, joita voimme nyt tehdä luokkakomponentilla!
Toimintojen määrittely jathis
Kyllä, voit määrittää funktioita funktiokomponentin sisältä editennen kutsumista return. Mutta henkilökohtaisesti olen aina halunnut erottaa toiminnallisuuden logiikan mukaan. Minusta on parempi erottaa funktiot logiikkaa ja muita tarkoituksia varten tulosten hahmontamisesta vastaavan funktion ulkopuolella. Jotkut ihmiset myös kutsuvat mieluummin toimintoja tapahtumissa sen sijaan, että tekisivät ne inline-muodossa, kuten olemme tehneet tähän mennessä (setAttributes()esimerkiksi onChange).
Tällä hetkellä koodissamme on kaksi asiaa, jotka voisivat olla hyödyllisiä siirrettäessä toimintoihin; InspectorControlsja BlockControls. Tämä lyhentää returnhuomattavasti ja helpottaa koodin lukemista.
Määrittelemme kaksi funktiota, jotka palauttavat koko InspectorControlslohkon ja koko BlockControlslohkon. Käyttämällä nuolitoimintoja (functionName =() => { ... }) meillä on täysi pääsy thisrekvisiittaaksemme. Jos et suorittanut vaiheen 1 viimeistä osaa – Babelin määrittäminen uusimmilla syntakseilla, saat käännösvirheitä. Sinun on luotava rakentaja ja sidonta thisjokaiselle funktiolle. Voit lukea lisää käsittelystä Reactin UKK-sivunthis alussa .
Muista myös, että koska olemme nyt luokassa, sinun on kutsuttava kaikki sen funktiot this.edessä.
Huomaa, että olen jättänyt pois koodin todellisen sisällön InspectorControlsja BlockControlspitääkseni koodin lyhyempänä. Mikään heidän koodissaan ei tarvitse muuttua.
Hyödynnämme myös sitä, että returnlauseke voi palauttaa myös taulukon. Kaikki taulukossa oleva hahmonnetaan tavalliseen tapaan siinä järjestyksessä, jossa ne ovat. Tämän ansiosta meidän on helppo kutsua funktioita suoraan returnkäskyn sisällä.
Voit tietysti määritellä myös elinkaarimenetelmiä, kuten componentDidMount(). Näiden tekemisessä ei ole mitään eroa Gutenberg-komponenteissa kuin Reactissa.
Rakentaja ja käyttötila
Yritetään toteuttaa tila komponenttiimme. Muista, että tila on vain jotain, joka on tallennettu tilapäisesti luokkakomponenttiimme, eikä sitä tallenneta mihinkään – kuten attribuutteihin. Se on vain komponentin tilan hallintaan. Yleisiä tilan käyttöjä ovat tilan käyttö tilalippuna odottaessaan asynkronisen kutsun paluuta, jonkin pistemäärän säilyttäminen väliaikaisesti ennen sen tallentamista attribuutissa tai lohkon "esikatselu/muokkaustila" käyttöönotto.
Viittaat tilaan ja päivitystilaan kuten Reactissa; this.stateja setState(). _ Normaalisti alustat tilan konstruktorissa. Ja mitä tulee rakentajan määrittelyyn – se on aivan kuten Reactissa – älä unohda läpäistä propsja tehdä super(props)samoin. Lyhyesti:
class FirstBlockEdit extends Component {
constructor(props) {
super(props);
this.state = {
example: 1
}
}
render() {
this.setState({ example: 2 });
console.log(this.state.example);
...Estä-tilan muokkaus-/esikatselukytkin
Luodaan "tilanvaihtaja" lohkollemme edellisessä työkalupalkissa opittuja asioita. Otamme käyttöön työkalupalkin, jossa on painike, joka vaihtaa tilaa esikatselu- ja muokkaustilan välillä. Muokkaustilassa lohko saa kaksi RichText-komponenttia tavalliseen tapaan. Mutta kun siirryimme esikatselutilaan, otimme muokkauksen pois päältä ja renderöimme lohkotulosteen.
Ensin luodaan konstruktori ja asetetaan tila yhdellä boolen ominaisuudella; editModejoka alkaa nimellä true. Se super(props)on välttämätön määritettäessä konstruktoria luokkapohjaisessa React-komponentissa.
class FirstBlockEdit extends Component {
constructor(props) {
super(props);
this.state = {
editMode: true
}
}
...Työkalurivien tulostamistoiminnossa muutamme aiemmin luomaamme mukautettua painiketta (joka vain console.logjotain sitä napsauttaessa). Sen onClickpropessa kutsumme setState()ja kumoamme nykyisen editModeloogisen arvon. Jotta käyttäjän olisi helpompi ymmärtää, vaihdamme myös painikkeen kuvakkeen ja tunnisteen välillä. Esimerkiksi kun esikatselutila on aktiivinen, painikkeessa näkyy otsikko "Muokkaa" ja kynäkuvake, joka on yleisesti hyväksytty muokkaukseksi.
Ja lopuksi lohkomme päärenderöintimenetelmän sisällä voimme tehdä mitä haluamme. Tämä osa on todella sinun päätettävissäsi – teet samoin kuin teimme yllä olevan painikkeen etiketillä ja kuvakkeella. Lisäämme kaksi tulostelohkoa, yhden jos this.state.editModeon true(jonka pitäisi olla tavallisia muokattavia RichTextkomponentteja) ja toisen jos se on false.
Esimerkkinä käytän kahta WordPress-komponenttia wp.components; Placeholderja Disabledesikatselutilaa varten. Komponentti Placeholderlaittaa lohkosi mukavaan harmaaseen laatikkoon, mikä tekee todella selväksi, että sitä ei voi muokata. Muista, että se on liitetty muotoiluun, joten jos haluat täydellisen esikatselun, tämä ei ehkä ole sinua varten. Ja käärin kaiken myös Disabledkomponentin sisään, mikä tekee kaikesta sisältä ei-muokattavissa, ei napsautettavaa ja vedettävissä. Tämä on uusi render()toimintomme komponentissamme:
Käytän myös komponenttia Fragment( wp.elementpakettia), joka on sama kuin React.Fragment. Jos et tunne sitä, käärimme tulosteen sen sisään, kun emme halua lisätä ylimääräisiä tarpeettomia HTML-kääreitä. Reactissa kaikella on oltava juurisolmu. Kun muokkaustila on aktiivinen (rivi #13), tulostamme kaksi RichTextkomponenttia heti peräkkäin, joten tarvitsemme juurisolmun niiden ympärille.
Kun esikatselutila on aktiivinen (rivi #29), tulostamme kahden RichTextkomponentin arvot. Kuten savesovelluksessa, käytämme RichText.Contentpalauttamaan niiden arvot pienen editorin sijaan.
Komponentti Placeholdertulee joustavalla tyylillä ja oletuksena flex-direction-rivillä. Tarjoaminen truepotkurissa isColumnLayoutmuuttaa sen flex-direction-sarakkeeksi (joten kaikki pinoutuu). Mutta kuten aiemmin mainittiin – saatat haluta ohittaa tämän komponentin ja luoda esikatselun täsmälleen samalla tavalla kuin se olisi käyttöliittymässä.
Ja sillä meillä on estotilan esikatselu/muokkauskytkin. Ilmeisesti voit säätää "edit mode" -tilan sisältöä näyttämään esim. ohjaustulot tai mitä muuta.
Voit luoda niin monta komponenttia kuin haluat, et rajoita vain yhden edittoimintoon! Luo vain lisää komponentteja ja sisällytä ne returnlauseeseen. Se on itse asiassa Reactin idea – rakentaa kapseloituja koodinpätkiä, joista kukin mahdollisesti käsittelee omaa tilaansa ja yhdistää ne monimutkaiseksi käyttöliittymäksi.