...
✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

Kohandatud Gutenbergi ploki loomine – 4. osa: atribuudid

12

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 attributesatribuudile asukohas registerBlockType(). Iga atribuudi võti on atribuudi nimi ja atribuut peab olema typevähemalt.

Vara typevõib olla üks järgmistest; null, boolean, object, array, number, string, või integer.

Soovi korral saate defaultoma atribuudi algväärtuse määratlemiseks määrata atribuudi. Kui te vaikeseadet ei anna, on atribuudiks vaikimisi null.

Teine atribuudi atribuut on sourcesee, mis töötab atribuudiga koos selector, kuid need on peened asjad, mida me allpool üksikasjalikumalt vaatleme.

Näiteks kahe atribuudi määratlemine; exampleTextstringina ja postIdsmassiivina 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 editja savefunktsioonide 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 exampleTextnä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 exampleTextatribuuti "Tere".

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

Loomulikult käivitaksite setAttributes()mõne toimingu seestpoolt. Tavaline näide on onChangerekvisiidi sees mingil sisendväljal, mida kasutatakse exampleTextatribuudi 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 onChangerekvisiidi lisamine

Destruktureerime attributesja setAttributesalates propskuna kasutame mõlemat. Seejärel kasutame TextControlkomponenti WordPressi wp.componentspaketist. Anname sellele kaks rekvisiiti; valuemäärab sisendi väärtuse (nii algselt kui ka tippimise ajal) ja toimingu sisendi sündmusele onChange.

Seadistame valueselle oma atribuudi väärtusele; attributes.exampleText. Juhul, kui onChangekä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 exampleTextvastavalt 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 savefunktsioonis endiselt olemas. Aga lava taga on midagi juhtunud! Meie ploki kommentaariplokk sisaldab nüüd meie JSON-i atribuudi väärtust.

Kohandatud Gutenbergi ploki loomine – 4. osa: atribuudid

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_contentpostituste 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 savefunktsioonis 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 savekui 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 editsaate kasutajale sisestusviise, hoolitsedes selle eest, et kuvatakse praegused väärtused, ja värskendate neid alati, kui need muutuvad. Ja saveekstraheerite 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 sourcekujutab.

RichText ja atribuudi atribuutsource

WordPressi RichTextkomponent 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 RichTexttuleb käsitleda veidi erinevalt, kuna on mitmeid rekvisiite, millest peate teadma, ja see, kuidas me oma savefunktsiooni väärtust saavutame, on erinev.

RichTextKomponendi lisamine

Lihtsaim vorm RichTexton selle rakendamine nagu tekstisisestuse korral:

Destruktureerime RichTextkomponendi wp.blockEditorpaketist, kuid muidu on ülaltoodu identne sellega, mida tegime standardse tekstisisestuse puhul.

Käsitsemine savekoosRichText

Kuid savefunktsioonis peate RichTextatribuudi väärtuse saamiseks komponenti uuesti kasutama. Helistame RichText.Contentja seadistame rekvisiidi valueoma atribuudile:

See väljastab kõik, mis redaktorisse sisestati, RichTextotse ilma HTML-i ümbritsemata.

Kui töötate koos RichTextteiega, 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 RichTextvõimaldab ka mitmeid muid rekvisiite. Saate määrata kohatäideteksti, mida kuvatakse (kaotakse), kui see on tühi koos placeholderrekvisiidiga. Samuti võimaldab komponent juhtida, milliseid vormindamisvalikuid väli lubab (millisi nuppe see tööriistaribal näitab).

RichTextkoostagName

Rekvisiidiga tagNamesaate eelmääratleda, millisesse HTML-i märgendisse selle väljund mähitakse. Kasutamisel tagNamepeaksite kasutama sama tagNamerekvisiidi ja väärtust mõlemas editja save.

Oletame, et soovite oma atribuudi väärtuse panna <h2>, mis muudab redaktoris iga sisendi väärtuseks h2. Siin editsaate teha:

Ja sisse save:

Ülaltoodud väljastab nüüd kõik, mis on kirjutatud sildi RichTextsees 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 h2ja 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 sourcemääratud, salvestatakse see HTML-i kommentaariplokki ja ekstraheeritakse see sealt.

Töötades RichTextme tavaliselt määrame source, htmlmis kasutab HTML-märgistuse sõelumiseks WordPressi teeki. Atribuut sourcetöötab koos teise atribuudi atribuudiga; selectormis määrab, millisest HTML-i märgendist see peaks ekstraktima.

Näitena määrame sourceoma htmllõigule asendi RichTextja määrame selectorkui p(muidu vaikimisi on see ploki juur).

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

Nüüd RichTextpeaks meie teine ​​​​kogu tekstivormingu edukalt salvestama. Samuti märkate, et kommentaariplokk kuvab nüüd ainult myRichHeadingJSON-i atribuuti. Atribuut myRichTexton kommentaariplokist täielikult kadunud. Selle põhjuseks on asjaolu, et sourceWordPress analüüsib nüüd atribuudi väärtuse kommentaariploki asemel postituse sisu.

Kohandatud Gutenbergi ploki loomine – 4. osa: atribuudid

Kui aus olla, ei ole ma selle sourceatribuudiga ü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).

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem