Selle õpetuste seeria eelmine samm läbis kohandatud ploki registreerimise nii Javascriptis kui ka PHP-s. Selles etapis õpime kasutama WordPressi komponente erinevat tüüpi väljade ja sätete lisamiseks.
WordPressi komponentide kasutamiseks oma plokis peame esmalt teadma rekvisiite.
Rekvisiidid
Rekvisiidid on Reacti peamine funktsioon ja see on põhimõtteliselt viis muutujate või funktsioonide edastamiseks teistele komponentidele. Kui te ei tunne Reacti rekvisiite, võite lugeda selle kohta Reacti ametlikku õpetust.
WordPress pakub mõningaid rekvisiite rakenduse editja savefunktsioonide jaoks registerBlockType(). Nende rekvisiitide sees saame juurdepääsu kriitilistele asjadele, nagu atribuudid ja meetod oma atribuutide värskendamiseks. Järgmises etapis käsitleme atribuute üksikasjalikult !
Siiani oleme oma plokis kirjutanud funktsiooni jaoks editja savenii:
Peaksite harjuma parameetri propslisamisega mõlemale editja save, näiteks:
Nüüd on teil täielik juurdepääs muutujale propsja kõigele, mida see sisaldab, seest editja save. Kui olete uudishimulik, saate lause console.log(props);ette lisada editfunktsiooni return. Peaksite nägema, millised rekvisiidid on konsooli siluris saadaval.
WordPressi komponentide kasutamine
Nagu varem mainitud, on meil globaalses paketis juurdepääs tohutule komponentide ja kasulike funktsioonide raamatukogule wp. Leiate kasutusvalmis komponente mis tahes tüüpi sisendiga seotud komponentide jaoks. Näited hõlmavad tekstisisestusi, rikasteksti sisestusi, rippmenüüd, lülitit, märkeruudud, erineva stiiliga nupud, meedia üleslaadija ja värvivalijad. Täiustatud funktsionaalsuse jaoks on ka funktsioone ja komponente. Näiteks WordPressist sisu (postitused, kategooriad jne) päringute esitamine sisseehitatud funktsioonidega või toomine REST API-ga.
Lihtsam ja soovitatav on kasutada WordPressi kasutajaliidese komponente. Selle eesmärk on tagada, et disain ja funktsionaalsus oleksid võimalikult sujuvad, et kasutajaid mitte segadusse ajada ega häirida.
Kuid kahjuks on selle kirjutamise ajal Gutenbergi dokumentatsioon väga napp. Leidsin parima võimaluse saada teavet selle kohta, mis wppaketi sees on ja kuidas komponendid tegelikult töötavad, vaadates nende ametlikku Gutenbergi Githubi repot. Mõnel paketil (kaustadel) on lugemiseks tekst, mis pakub natuke dokumentatsiooni. Vaadake näiteks nuppu Readme või lülitit.
Githubi repo peaks vastama wppaketi sees olevale (olenevalt sellest, milline versioon teil on ja millist haru Githubis vaatate). See tähendab, et iga kaust, mida näete packagesGithubi juurkataloogis, asub globaalses wppaketis. Näiteks pidage meeles, et eelmises etapis kasutatud funktsioon registerBlockType(), oli sees wp.blocks, mis tähendab, et leiate selle funktsiooni lähtekoodi, mis on eksporditud packages/blocks/.
Kuna olen välja töötanud mitmeid kohandatud Gutenbergi plokke ja uurinud üsna palju Githubi repost, avastasin, et on mõned paketid, mis sisaldavad kõige tavalisemaid kohandatud plokkide loomiseks kasutatavaid funktsioone. Lisan need allpool.
Saadaolevatest komponentidest täielikuma ülevaate saamiseks soovitan alla laadida minu tasuta e-raamatu, mis hõlmab Gutenbergis saadaolevaid komponente! See sisaldab kõige levinumaid ja kasulikke komponente koos rekvisiitide ja koodinäidetega:
Kiire ülevaade enamlevinud pakettidest, mida plokkide jaoks kasutate
Ilmselgelt on saadaval palju rohkem, kuid allpool on plokkide arendamiseks kõige tavalisem. Selles õpetusesarjas kasutame enamikku neist, kui mitte kõiki. Kui soovite mõnda komponenti kasutada, peate teadma, millises pakendis see on.
wp.components
Enamiku kasutajaliidese sisendkomponentidest leiate wp.components. Näiteks erinevad tekstisisestused, valikud, märkeruudud, raadionupud, lohistatavad komponendid, nupud, värvivalija, kuupäevavalija jne. Samuti leiate kasutajaliidese komponendid, mida saate kasutada plokkide tööriistariba ja seadete külgriba sisu jaoks (nn InspectorControls).
Vaadake Githubi repos olevaid kaustu .
wp.blockEditor ja wp.editor
Nendest kahest paketist leiate kasulikke komponente rikasteksti jaoks, piltide/meediumiüleslaadija haldamiseks ning tööriistaribade või kohandatud inspektori (külgriba) paneelide lisamiseks.
Selle seeria lõpus vaatleme dünaamiliste plokkide ehitamist, milles kasutame ploki väljundi renderdamiseks PHP-d ja selleks kasutame komponenti wp.editor.
Nagu ma aru saan, algas enamik komponente wp.editorjuba Gutenbergi päevil, kuid eriti pärast WordPress 5.3 viidi paljud neist üle wp.blockEditor. Kui kasutate komponenti, wp.editormillesse WordPress kavatseb sellesse kolida, wp.blockEditorei kuku see praegu läbi, kuid konsooli siluris saate hoiatusi, et see on aegunud ja peaksite võimaluse wp.blockEditorkorral sellele üle minema. Ja pöörduvalt, kui jälgite seda seeriat vanema WordPressi versiooniga, võite mingil põhjusel ilmneda tõrkeid komponentide helistamisel, mida pole wp.blockEditorveel teisaldatud.
wp.element
Seest wp.elementleiate komponendid, mis vastavad Reacti komponentidele. Näiteks Component(mis vastab React.Component) ja Fragment( React.Fragment). Kasutame neid siis, kui hakkame koodi jagama eraldi komponentideks.
wp.i18n
Nagu nimigi ütleb, wp.i18nsisaldab pakett tõlke haldamise funktsioone. See sisaldab samu tõlkefunktsioone, mida me teame PHP-s; näiteks __()ja _e(). Vaatleme seda üksikasjalikult jaotises <<<>>>>, kui saame teada, kuidas oma plokki tõlkida.
wp.data
Pakett wp.dataon mõeldud WordPressist andmete pärimiseks väljaspool redaktorit. Sõnumite saatmiseks on olemas komponendid, withSelectmida selectkasutame selles seerias hiljem meie blokis olevate postituste päringute tegemiseks.
wp.compose
Eelmine pakett ja wp.composeon täiustatud plokkide ehitamiseks. Selle paketi seest leiame komponendid ja funktsioonid nn kõrgema järgu komponentide loomiseks. Kõrgema järgu komponendid on Reacti mustritehnika komponentide ja loogika taaskasutamiseks ning me kasutame seda koos komponendiga wp.datapostituste päringute tegemiseks.
Piisavalt juttu – kuidas te mõnda neist komponentidest praktikas kasutate?
Nagu varem mainitud; WordPressi komponentide kasutamiseks peate teadma, kus need asuvad. Loodetavasti annab minu ülaltoodud ülevaade koos Githubi repoga teile aimu, kust neid hankida.
Ärge unustage, et saate alati lisada tavalisi HTML-märgendeid, nagu div, span, pealkirjad jne. Ärge unustage järgida atribuutide osas Reacti juhiseid . Näiteks classon Reactis reserveeritud märksõna (klassipõhiste komponentide loomiseks), nii et kui soovite HTML-elemendile klassi lisada, peate kasutama className.
Märkus. Arendades ärge unustage npm run startkoodi kompileerimist alustada.
Lihtsa näitena proovime mõnda komponenti, et näha, kuidas need välja näevad. Destruktureerime need vastavatest pakettidest ja kasutame neid oma editfunktsioonis.
Selle tulemuseks on näiteks see, et meie plokk näeb redaktoris välja selline.
Märkate, et konsoolis kuvatakse nende sisestamisel veateateid ja see ei salvesta postituse värskendamisel (ja värskendamisel) sisestatavat teksti. Selle põhjuseks on asjaolu, et meil puuduvad komponentide rekvisiidid, mis on ühendus atribuutidega, kuhu salvestatakse kõik meie plokkide andmed. Rekvisiidid vastutavad salvestatud väärtuste edastamise ja funktsioonide eest, mis vastutavad meie atribuutide värskendamise eest, kui meie sisendites midagi muudetakse. Seda teeme järgmises etapis, kus hakkame lõpuks päriselt koodi kirjutama.