Luo mukautettu Gutenberg-lohko – Osa 4: Attribuutit

Tässä osassa tarkastellaan attribuuttien määrittämistä, niiden arvojen hakemista ja päivittämistä. Attribuuttien avulla voimme hyväksyä syötteen editorista, tallentaa sen ja tulostaa sen haluamallamme tavalla. Edellisessä vaiheessa tarkastelimme WordPressin komponentteja, mistä ne löytyvät ja miten ne toteutetaan. Tässä postauksessa lisäämme rekvisiitta yhteyden muodostamiseen attribuutteihin – tallennettuihin tietoihin.

Attribuuttien määrittely

Attribuutit lisätään objekteina taulukossa olevaan attributesominaisuuteen registerBlockType(). Kunkin määritteen avain on määritteen nimi, ja sinulla on oltava typevähintään ominaisuus.

Omaisuus typevoi olla mikä tahansa seuraavista; null, boolean, object, array, number, string, tai integer.

Voit halutessasi määrittää ominaisuuden defaultmääritteen aloitusarvon määrittämiseksi. Jos et anna oletusarvoa, määritteen oletusarvo on null.

Toinen attribuuttiominaisuus on sourcese, että se toimii yhdessä selectorominaisuuden kanssa, mutta nämä ovat nirsoja asioita, joita tarkastellaan tarkemmin alla.

Esimerkiksi kahden attribuutin määrittäminen; exampleTextmerkkijonona ja postIdstaulukona näyttäisi tältä:

Kaikki mitä tarvitset tallennettavaksi lohkoasi varten (syöte käyttäjältä/editorilta) vaatii määritteen. Sinä päätät, kuinka rakennat tietosi määrittelemällä kullekin erilliset attribuutit tai yhdistämällä ne kaikki yhteen objektiin. Ero on vain siinä, kuinka haet heidän tietonsa ja kuinka päivität ne.

Haetaan attribuuttiarvoja

Attribuutit ovat käytettävissä lohkojesi editja savetoimintojesi rekvisiittana. Jos olet seurannut tätä sarjaa edellisestä vaiheesta, muista, että päivitimme funktiot välittämään rekvisiitta parametreina.

On yleistä tuhota attribuutteja rekvisiittasta, kuten yleensä viittaat niihin. Esimerkiksi attribuutin tulostaminen exampleTextnäyttäisi tältä:

Päivitetään määritteiden arvoja

Attribuuttien päivittämiseksi meillä on rekvisiittassa käytettävissä menetelmä nimeltä setAttributes(). Tämä funktio hyväksyy objektin, johon voit lisätä minkä tahansa määritteen, jonka haluat päivittää. Voit päivittää vain yhden määritteen, useamman tai kaikki kerralla. Jos olet määrittänyt useita määritteitä ja soita setAttributes()päivittääksesi vain yhden niistä, muita ei kosketa.

Jos sinulla on kokemusta Reactista, huomaat todennäköisesti välittömästi yhtäläisyydet setAttributes()ja välillä setState(). Ne toimivat täsmälleen samalla tavalla, mutta erona on, että Reactin tila on vain jotain, joka on tallennettu paikallisesti kyseiseen komponenttiin, ja attribuutit tallennetaan itse asiassa datana komponentin ulkopuolelle.

Attribuutin päivittämistä varten funktio yleensä tuhotaan rekvisiittasta ja kutsutaan sitä näin: Alla päivitämme exampleTextattribuutin muotoon "Hei".

const { setAttributes } = props;
setAttributes({ exampleText: 'Hi' });

Luonnollisesti ajaisit setAttributes()jonkin toiminnon sisältä. Yleinen esimerkki on onChangepropin sisällä jonkinlaisessa syöttökentässä, jota käytetään exampleTextattribuutin arvon tallentamiseen.

Muista tallentaa attribuutit siinä tyypissä, jonka määritit attribuutille. Sinulla ei ole onnea yrittää tallentaa objekteja esimerkiksi merkkijonoattribuutiksi.

Kokeillaan käytännössä! Tee aloite npm run start, jos et ole jo tehnyt.

Attribuutin näyttäminen mukautetussa tekstisyötössä ja määritteen arvon päivittäminen

Edellisessä vaiheessa lisäsimme joitain komponentteja sisään edit, esim. tekstinsyöttö, mutta mitään ei tallennettu. Lisätään attribuutti ja yksi tekstisyöte sille lohkoomme. Varmistamme molemmat, että tekstinsyöttö näyttää nykyisen arvon, ja aina kun syöttöä muutetaan, päivitämme attribuutin.

Lisäämällä tekstinsyötön ja sen onChangeprop

Tuhoamme attributesja setAttributeskoska propskäytämme molempia. Sitten käytämme TextControlkomponenttia WordPress- wp.componentspaketista. Annamme sille kaksi rekvisiittaa; valueasettaa syötteen arvon (sekä alussa että kirjoittamisen aikana) ja toiminnon syötteen tapahtumaan onChange.

Asetamme valuesen attribuuttimme arvoon; attributes.exampleText. Siinä onChangetapauksessa, että suoritamme funktion, joka välittää syötteemme kirjoitetun arvon parametrina newtext(syötearvo on komponentista palautettu prop). Tässä funktiossa kutsumme setAttributes()ja päivitämme attribuutin exampleTextsyötteeseen kirjoitetuksi.

Tämä on perus React – paitsi, että työskentelemme attribuuttien emmekä tilan kanssa. Jos yllä oleva hämmentää sinua, suosittelen katsomaan nopeaa opetusohjelmaa Reactissa, koska nämä selittävät tämän tavan todennäköisesti paremmin kuin minä!

Päivitä editori ja katso kuinka lohko toimii! Sinun pitäisi saada tavallinen tekstisyöte asioiden kirjoittamista varten, ja se tallennetaan aina, kun painat Tallenna/Päivitä jälkimuokkauksessa.

Tulos käyttöliittymässä ja tietokannassa

Jos katsot viestiäsi käyttöliittymässä, sen pitäisi silti kaikua div:llä, koska se on edelleen savetoiminnassamme. Mutta jotain on tapahtunut kulissien takana! Lohkomme kommenttilohko sisältää nyt JSON-attribuuttimme arvon.

Et näe kommenttilohkoja mallissa, joka tekee normaalin the_content()kutsun. Nähdäksesi kommenttilohkot sinulla on kaksi vaihtoehtoa. Katso joko post_contentviestien tietokantataulukkoa. Tai lisää echo get_the_content()malli ja katso sitä Tarkastus/virheenkorjaustyökalussa.

Ilmeisesti meillä on pääsy myös attribuutteihin save, rekvisiittasta.

Näytetään syötteen arvo sisäänsave

Näytetään attribuutin arvo div:n sisällä savefunktiossamme:

Huomautus: Kun olet tehnyt tämän muutoksen, saat rikkinäisen lohkon viestiin, johon olet jo lisännyt tämän lohkon. Tämä tapahtuu, koska editori kohtaa erilaisen tulosteen savekuin mitä olemme nyt määrittäneet. Poista lohko ja lisää se uudelleen. Kirjoita jotain tekstinsyöttöön, päivitä viesti ja tarkastele sitä käyttöliittymässä.

Ja tämä on itse asiassa asian ydin. Sinä päätät, mitä määritteitä tarvitset tallentaaksesi haluamasi lohkoon. Siinä edithahmotat tapoja, joilla käyttäjä voi syöttää, huolehtien siitä, että nykyiset arvot näkyvät ja päivittävät ne aina, kun ne muuttuvat. Ja savepurat tallennetut attribuutit ja teet tulosteen haluamallasi tavalla.

Käsittelemme paljon enemmän erilaisia ​​​​komponentteja ja ominaisuuksia tässä opetusohjelmasarjassa. Mutta katsotaanpa yhtä muuta komponenttia tässä viestissä nähdäksemme, mistä määritteen ominaisuudessa sourceon kyse.

RichText ja attribuutin ominaisuussource

WordPress- RichTextkomponentti antaa sinulle "reunattoman" tekstialueen tekstin muotoilutuella. Saatat mieluummin käyttää tätä (ruma?) tavallisen tekstinsyötön tai tekstialueen sijaan. Mutta muista, että RichTextsitä on käsiteltävä hieman eri tavalla, koska on olemassa useita rekvisiitta, jotka sinun on oltava tietoisia, ja on eroa siinä, kuinka saamme arvon savetoiminnallemme.

RichTextKomponentin lisääminen

Yksinkertaisin muoto RichTexton toteuttaa se samalla tavalla kuin tekstinsyöttöä käytettäessä:

Puramme RichTextkomponentin wp.blockEditorpaketista, mutta muuten yllä oleva on identtinen tavallisen tekstinsyötön kanssa.

Käsittely savekanssaRichText

Funktiossa savesinun on kuitenkin käytettävä RichTextkomponenttia uudelleen saadaksesi attribuutin arvon. Soitamme RichText.Contentja asetamme rekvisiitin valueattribuutillemme:

Tämä tulostaa editoriin kirjoitetun RichTextsuoraan ilman HTML-koodia.

Kun työskentelet kanssasi, RichTexthaluat todennäköisesti hallita tekstin ympärillä olevaa HTML-käärettä, esimerkiksi a <p>tai a <h2>, sekä käyttöliittymässä että editorissa. Tätä varten voimme käyttää rekvisiittaa nimeltä tagName.

Komponentti RichTextmahdollistaa myös useita muita rekvisiitta. Voit määrittää paikkamerkkitekstin, joka näytetään (häivytettynä), kun se on tyhjä placeholder. Komponentin avulla voit myös hallita, mitä muotoiluvaihtoehtoja kenttä sallii (mitä painikkeita se näyttää työkalupalkissa).

RichTextkanssatagName

Prop:n tagNameavulla voit ennalta määrittää, mihin HTML-tunnisteeseen sen tulos kääritään. Kun käytät, käytä tagNamesamaa tagNamepropaa ja arvoa molemmissa editja -kohdissa save.

Oletetaan, että haluat laittaa attribuutin arvon <h2>, joka pakottaa editorissa minkä tahansa syötteen arvoksi h2. Voit edittehdä:

Ja sisään save:

Yllä oleva tulostaa nyt sen, mikä on kirjoitettu tunnisteen RichTextsisällä olevalle alueelle .<h2>

Käyttämälläsource

Ilmeisesti voit yhdistää useita richtext-tekstejä lohkoa varten, esimerkiksi yhden otsikkoa ja yhden kappaletta varten. Muista vain, että jokainen tarvitsee oman ominaisuutensa. Esimerkiksi:

Nyt kuitenkin alat kohdata joitain ongelmia. Vaikka voit muotoilla tekstiä editorissa, mitään (tai osaa) muotoilusta ei tallenneta. Kun tarkastelet viestiä käyttöliittymässä, se näkyy vain muodossa h2ja pilman tekemiäsi muotoiluja (kursivointi, lihavoitu, linkki). Edes lohkosi kommenttilohko ei sisällä muotoilua. Tämä on hankala asia RichText. Tämän ratkaisemiseksi meidän on työskenneltävä attribuutin ominaisuuden kanssa source.

Ominaisuus source, jonka avulla WordPress voi poimia ja tulkita sisältöä suoraan viestin sisällöstä. Jos määritettä ei ole sourceasetettu, se tallennetaan ja puretaan HTML-kommenttilohkosta.

Kun työskentelemme kanssa, RichTextasetamme yleensä sourcearvoon html, joka käyttää WordPressin kirjastoa HTML-merkintöjen jäsentämiseen. Ominaisuus sourcetoimii yhdessä toisen attribuuttiominaisuuden kanssa; selectorjoka määrittää, mistä HTML-tunnisteesta sen tulee purkaa.

Esimerkkinä asetamme kappaleessamme sourceas :n ja asetamme asteen (muuten se on oletuksena lohkon juuri).html``RichText``selector``p

attributes: {
    ...
    myRichText: {
        type: 'string',
        source: 'html',
        selector: 'p'
    }
},

Nyt toisen RichTextpitäisi onnistuneesti tallentaa kaikki tekstimuotoilunsa. Huomaat myös, että kommenttilohko näyttää nyt vain myRichHeadingJSON-määritteen. Attribuutti myRichTexton kadonnut kokonaan kommenttilohkosta. Tämä johtuu siitä, että sourceWordPress jäsentää nyt viestin sisällön attribuutin arvon kommenttilohkon sijaan.

Ollakseni täysin rehellinen, en ole työskennellyt niin paljon sourcemääritteen kanssa ollenkaan ja suosittelen välttämään sitä, jos voit. WordPressin dokumentaatio selittää hieman enemmän lähteestä ja määritteistä, joiden haluat tarkistaa itse.

Tässä viestissä olemme oppineet attribuuttien perusasiat; kuinka ne määritellään, päivitetään ja arvot tulostetaan. Seuraavissa vaiheissa tarkastellaan lisää eri komponentteja ja kuinka lisätä asetuksia itse lohkon sisällön ulkopuolelle; työkalupalkissa ja editorin sivupalkissa (nimeltään Inspector).