Selles osas vaatleme, kuidas atribuute määratleda, nende väärtusi hankida ja värskendada. Atribuutide abil saame vastu võtta redaktori sisendit, salvestada selle ja väljastada, kuidas me valime. Eelmises etapis vaatasime WordPressi komponente, kust neid leida ja kuidas neid juurutada. Selles postituses lisame rekvisiidid atribuutidega ühenduse loomiseks – salvestatud andmetega.
Atribuutide määratlemine
Atribuudid lisatakse objektidena massiivi attributes
atribuudile asukohas registerBlockType()
. Iga atribuudi võti on atribuudi nimi ja atribuut peab olema type
vähemalt.
Vara type
võib olla üks järgmistest; null
, boolean
, object
, array
, number
, string
, või integer
.
Soovi korral saate default
oma atribuudi algväärtuse määratlemiseks määrata atribuudi. Kui te vaikeseadet ei anna, on atribuudiks vaikimisi null
.
Teine atribuudi atribuut on source
see, mis töötab atribuudiga koos selector
, kuid need on peened asjad, mida me allpool üksikasjalikumalt vaatleme.
Näiteks kahe atribuudi määratlemine; exampleText
stringina ja postIds
massiivina näeks välja selline:
Kõik, mida vajate oma ploki jaoks salvestamiseks (kasutaja/redaktori sisend) nõuab atribuuti. Teie otsustate, kuidas oma andmeid struktureerite, määrates igaühe jaoks eraldi atribuudid või koondades need kõik ühte objekti. Vahe on lihtsalt selles, kuidas te nende andmeid hankite ja kuidas neid värskendate.
Atribuutide väärtuste hankimine
Atribuudid on saadaval teie ploki edit
ja save
funktsioonide rekvisiididena. Kui olete järginud seda seeriat eelmisest etapist, pidage meeles, et värskendasime funktsioone, et edastada parameetrina rekvisiidid.
On tavaline, et atribuute hävitatakse rekvisiitidest, nagu tavaliselt neile sageli viitate. Näiteks exampleText
näeks atribuudi väljastamine välja selline:
Atribuutide väärtuste värskendamine
Atribuutide värskendamiseks on meil rekvisiitides saadaval meetod nimega setAttributes()
. See funktsioon aktsepteerib objekti, kuhu saate lisada mis tahes atribuudi, mida soovite värskendada. Saate värskendada ainult ühte atribuuti, rohkem või kõiki korraga. Kui teil on määratletud mitu atribuuti ja helistate setAttributes()
ainult ühe neist värskendamiseks, siis teisi ei puudutata.
Kui teil on Reactiga kogemusi, tunnete tõenäoliselt kohe ära sarnasused setAttributes()
ja vahel setState()
. Need töötavad täpselt samamoodi, kuid erinevus seisneb selles, et Reacti olek on lihtsalt selles komponendis lokaalselt salvestatud ja atribuudid salvestatakse tegelikult andmetena väljaspool komponenti.
Atribuudi värskendamiseks peate tavaliselt funktsiooni rekvisiidist hävitama ja nimetama seda nii: allpool värskendame exampleText
atribuuti "Tere".
const { setAttributes } = props;
setAttributes({ exampleText: 'Hi' });
Loomulikult käivitaksite setAttributes()
mõne toimingu seestpoolt. Tavaline näide on onChange
rekvisiidi sees mingil sisendväljal, mida kasutatakse exampleText
atribuudi väärtuse salvestamiseks.
Salvestage atribuudid kindlasti atribuudis määratletud tüübis. Teil ei õnnestu näiteks objekte stringatribuuti salvestada.
Proovime seda praktikas! Algatage npm run start
, kui te pole seda juba teinud.
Atribuudi kuvamine kohandatud tekstisisendis ja atribuudi väärtuse värskendamine
Eelmises etapis lisasime mõned komponendid edit
, nt tekstisisestus, kuid midagi ei salvestatud. Lisame oma plokki selle jaoks atribuudi ja ühe tekstisisestuse. Mõlemad tagame, et tekstisisend näitab praegust väärtust, ja kui sisendit muudetakse, värskendame atribuuti.
Tekstisisestuse ja selle onChange
rekvisiidi lisamine
Destruktureerime attributes
ja setAttributes
alates props
kuna kasutame mõlemat. Seejärel kasutame TextControl
komponenti WordPressi wp.components
paketist. Anname sellele kaks rekvisiiti; value
määrab sisendi väärtuse (nii algselt kui ka tippimise ajal) ja toimingu sisendi sündmusele onChange
.
Seadistame value
selle oma atribuudi väärtusele; attributes.exampleText
. Juhul, kui onChange
käivitame funktsiooni, edastades parameetrina meie sisendi trükitud väärtuse newtext
(sisendväärtus on komponendilt tagastatav rekvisiit). Selles funktsioonis kutsume setAttributes()
välja ja värskendame atribuuti exampleText
vastavalt sellele, mis sisestati sisendisse.
See on põhiline React – peale selle, et me töötame atribuutidega, mitte olekuga. Kui ülaltoodu ajas teid segadusse, soovitan vaadata Reacti kiirõpetust, kuna see selgitab seda tõenäoliselt paremini kui mina!
Värskendage oma redaktorit ja vaadake, kuidas plokk töötab! Asjade sisestamiseks peaksite hankima standardse tekstisisestuse ja see salvestatakse alati, kui vajutate postituse redigeerimisel nuppu Salvesta/värskenda.
Tulemus frontendis ja andmebaasis
Kui vaatate oma postitust esiotsas, peaks see siiski kajama div-ga, millel on ":)", sest see on meie save
funktsioonis endiselt olemas. Aga lava taga on midagi juhtunud! Meie ploki kommentaariplokk sisaldab nüüd meie JSON-i atribuudi väärtust.
Te ei näe kommentaaride plokke mallis, mis teeb tavalist the_content()
kõnet. Kommentaariplokkide nägemiseks on teil kaks võimalust. Vaadake kas post_content
postituste andmebaasi tabelit. Või lisage echo get_the_content()
mall ja vaadake seda kontrolli-/silumistööriistas.
Ilmselgelt on meil juurdepääs ka atribuutidele save
, alates rekvisiitidest.
Sisendväärtuse kuvaminesave
Kuvame atribuudi väärtuse meie save
funktsioonis div sees:
Märkus. Pärast selle muudatuse tegemist kuvatakse postituses katkine plokk, kuhu olete selle ploki juba lisanud. See juhtub seetõttu, et redaktor puutub kokku erineva väljundiga save
kui see, mida oleme praegu määratlenud. Eemaldage plokk ja lisage see uuesti. Sisestage midagi oma tekstisisestusse, värskendage postitust ja vaadake seda kasutajaliideses.
Ja see on tegelikult asja tuum. Teie otsustate, milliseid atribuute vajate, et soovitud plokki salvestada. Te edit
saate kasutajale sisestusviise, hoolitsedes selle eest, et kuvatakse praegused väärtused, ja värskendate neid alati, kui need muutuvad. Ja save
ekstraheerite salvestatud atribuudid ja renderdate väljundi nii, nagu soovite.
Selles õpetusesarjas käsitleme palju rohkem erinevaid komponente ja atribuute. Kuid vaatame veel üht selle postituse komponenti, et näha, mida atribuudi atribuut endast source
kujutab.
RichText ja atribuudi atribuutsource
WordPressi RichText
komponent annab teile "ääristeta" tekstiala koos tekstivormingu toega. Võib-olla eelistaksite seda kasutada (inetu?) standardse tekstisisestuse või tekstiala asemel. Kuid pidage meeles, et seda RichText
tuleb käsitleda veidi erinevalt, kuna on mitmeid rekvisiite, millest peate teadma, ja see, kuidas me oma save
funktsiooni väärtust saavutame, on erinev.
RichText
Komponendi lisamine
Lihtsaim vorm RichText
on selle rakendamine nagu tekstisisestuse korral:
Destruktureerime RichText
komponendi wp.blockEditor
paketist, kuid muidu on ülaltoodu identne sellega, mida tegime standardse tekstisisestuse puhul.
Käsitsemine save
koosRichText
Kuid save
funktsioonis peate RichText
atribuudi väärtuse saamiseks komponenti uuesti kasutama. Helistame RichText.Content
ja seadistame rekvisiidi value
oma atribuudile:
See väljastab kõik, mis redaktorisse sisestati, RichText
otse ilma HTML-i ümbritsemata.
Kui töötate koos RichText
teiega, soovite suure tõenäosusega juhtida teksti ümber olevat HTML-i ümbrist, näiteks a <p>
või a <h2>
, nii kasutajaliideses kui ka redaktoris. Selleks saame kasutada rekvisiiti nimega tagName
.
Komponent RichText
võimaldab ka mitmeid muid rekvisiite. Saate määrata kohatäideteksti, mida kuvatakse (kaotakse), kui see on tühi koos placeholder
rekvisiidiga. Samuti võimaldab komponent juhtida, milliseid vormindamisvalikuid väli lubab (millisi nuppe see tööriistaribal näitab).
RichText
koostagName
Rekvisiidiga tagName
saate eelmääratleda, millisesse HTML-i märgendisse selle väljund mähitakse. Kasutamisel tagName
peaksite kasutama sama tagName
rekvisiidi ja väärtust mõlemas edit
ja save
.
Oletame, et soovite oma atribuudi väärtuse panna <h2>
, mis muudab redaktoris iga sisendi väärtuseks h2. Siin edit
saate teha:
Ja sisse save
:
Ülaltoodud väljastab nüüd kõik, mis on kirjutatud sildi RichText
sees olevasse piirkonda .<h2>
Kasutadessource
Ilmselgelt saate ploki jaoks kombineerida mitu rikasteksti, näiteks ühe pealkirja ja teise lõigu jaoks. Pidage meeles, et igaüks vajab oma atribuuti. Näiteks:
Kuid nüüdseks hakkate tekkima mõningaid probleeme. Kuigi saate redigeerijas teksti vormindada, ei salvestata midagi (või mõnda vormingust). Kui vaatate postitust esiservas, kuvatakse see lihtsalt kujul h2
ja p
, ilma et oleksite vormindanud (kaldkiri, paksus kirjas, link). Isegi teie ploki kommentaariplokk ei sisalda vormingut. See on keeruline asi RichText
. Selle lahendamiseks peame töötama atribuudi atribuudiga source
.
Atribuut source
, mis võimaldab WordPressil sisu otse postituse sisust välja võtta ja tõlgendada. Kui atribuuti pole source
määratud, salvestatakse see HTML-i kommentaariplokki ja ekstraheeritakse see sealt.
Töötades RichText
me tavaliselt määrame source
, html
mis kasutab HTML-märgistuse sõelumiseks WordPressi teeki. Atribuut source
töötab koos teise atribuudi atribuudiga; selector
mis määrab, millisest HTML-i märgendist see peaks ekstraktima.
Näitena määrame source
oma html
lõigule asendi RichText
ja määrame selector
kui p
(muidu vaikimisi on see ploki juur).
attributes: {
...
myRichText: {
type: 'string',
source: 'html',
selector: 'p'
}
},
Nüüd RichText
peaks meie teine kogu tekstivormingu edukalt salvestama. Samuti märkate, et kommentaariplokk kuvab nüüd ainult myRichHeading
JSON-i atribuuti. Atribuut myRichText
on kommentaariplokist täielikult kadunud. Selle põhjuseks on asjaolu, et source
WordPress analüüsib nüüd atribuudi väärtuse kommentaariploki asemel postituse sisu.
Kui aus olla, ei ole ma selle source
atribuudiga üldse nii palju töötanud ja soovitan võimalusel seda vältida. WordPressi dokumentatsioon selgitab mõnevõrra rohkem allika ja atribuutide kohta, mida soovite ise kontrollida.
Selles postituses oleme õppinud atribuutide põhitõdesid; kuidas neid defineerida, värskendada ja nende väärtusi väljastada. Järgmistes sammudes vaatame rohkem erinevaid komponente ja seda, kuidas lisada sätteid väljaspool ploki sisu; tööriistaribal ja redaktori külgribal (nimega Inspector).