Selles Gutenbergi kohandatud plokkide \u00f5petuste seeria viimases osas \u00f5pime, kuidas kasutada k\u00f5rgema j\u00e4rgu komponente, et kasutada WordPressi komponente postituste ja muu WordPressi p\u00f5hiteabe p\u00e4ringute tegemiseks.<\/p>\n
Eelmises osas \u00f5ppisime tundma d\u00fcnaamilisi plokke ja l\u00f5puks juurutasime funktsioonid postituse ID sisestamiseks ja PHP abil postituse d\u00fcnaamiliseks toomiseks ning selle esiotsa ja eelvaate re\u017eiimis renderdamiseks. Postituse ID k\u00e4sitsi sisestamine ei ole intuitiivne ega kasutajas\u00f5bralik. Palju parem on pakkuda kasutajale mingi viis postituste valimiseks v\u00f5i otsimiseks postituse pealkirja j\u00e4rgi ja millegi valimiseks kl\u00f5psates.<\/p>\n
\u00dcks osa selle lahendamisest on \u00fcsna lihtne; kuidas oma ploki Selle lahendamise teine \u200b\u200bosa on teie enda otsustada; kuidas esitada loendit v\u00f5i valikut meie plokis. Kuidas kavatsete postituste loendit esitada? Kas valitud, m\u00e4rkeruutude v\u00f5i raadionuppude loendis? V\u00f5i soovid pakkuda otsinguv\u00f5imalust ja seel\u00e4bi automaatse t\u00e4itmise lahendust v\u00f5i filtrilahendust rakendada? Kas lubada valida mitu postitust v\u00f5i ainult \u00fcks? Tavaliselt saate selle lahendada erinevate WordPressi komponentide abil, kuid peate otsustama, millist lahendust soovite rakendada.<\/p>\n \u00d5ppime esmalt natuke k\u00f5rgema j\u00e4rgu komponentide ja WordPressi andmemooduli kohta, enne kui vaatame, kuidas saaksime oma plokis postitusp\u00e4ringuid teha.<\/p>\n Reactiga t\u00f6\u00f6tades peate sageli oleku \u00fcle kandma alamkomponentidele v\u00f5i \u00fcles \u00fchisele vanemlikule komponendile, et k\u00f5igil teistel alamkomponentidel oleks neile juurdep\u00e4\u00e4s. Lahendus rakenduse oleku tsentraliseerimise probleemi lahendamiseks on Reduxi<\/a> kasutamine. Reduxi abil saate luua kauplusi \u2013 need on objektid, mis hoiavad rakenduse olekut ja teavet.<\/p>\n WordPressi andmemoodul<\/a> on erinevate poodide keskus ja pakub funktsioone andmete haldamiseks erinevate moodulite vahel. See on \u00fcles ehitatud Reduxile, kuid \u00e4rge pidage seda Reduxiks WordPressi jaoks ekslikult, kuna erinevusi on \u00fcsna palju. Saate registreerida oma poed WordPressis v\u00f5i, mis veelgi olulisem, p\u00e4\u00e4seda juurde WordPressi registreeritud poodidele.<\/p>\n Siin on \u00fclevaade saadaolevatest poodidest<\/a> WordPressi andmemoodulis (t\u00f5en\u00e4oliselt muutub aja jooksul). K\u00f5ik WordPressi poed sisalduvad p\u00f5hiandmete moodulis<\/a>. N\u00e4iteks on olemas poed, mis hoiavad toimetaja andmeid ( Kaupluste andmetele juurdep\u00e4\u00e4suks peate kasutama valijaid. WordPressil on Avage Chrome’is Gutenbergi redaktor ja konsooli silurit\u00f6\u00f6riist. Tr\u00fcki sisse:<\/p>\n Ja vajutage sisestusklahvi. Peaksite saama vastusena objekti k\u00f5igi selektorite (funktsioonidega), mida saate kasutada. N\u00e4idetena leiate selliseid funktsioone nagu Proovige ka teisi poode peale See tagastab kogu teabe k\u00f5igi praegu teie postituses olevate plokkide kohta. Saate sellega m\u00e4ngida Chrome’i konsooli siluris ja proovida m\u00f5nele funktsioonile helistada, et n\u00e4ha, mida vastuseks saate. M\u00f5ned n\u00f5uavad parameetreid ja teised mitte.<\/p>\n Selektorite kasutamiseks ja kauplustele juurdep\u00e4\u00e4suks peame neid kasutama k\u00f5rgema j\u00e4rgu komponentides. K\u00f5rgemat j\u00e4rku komponendid on lihtsalt Reactis millegi tegemise muster. Edastame komponendi funktsioonile (v\u00f5i komponendile), mis v\u00f5ib lisada m\u00f5ned rekvisiidid, ja tagastame seej\u00e4rel uue komponendi.<\/p>\n WordPressi andmemooduli seest leiame See on olnud palju teooriat, nii et alustame m\u00f5ne koodi ja praktiliste n\u00e4idete vaatamist.<\/p>\n \u00dclaltoodu kokkuv\u00f5tteks peame Funktsioon Kui j\u00e4rgiksite seda \u00f5petuse seeriat eelmisest osast, oleks teil kohandatud plokk, mis aktsepteerib tekstisisestuses k\u00e4sitsi sisestatud postituse ID-d. Plokk kasutab PHP-d, et d\u00fcnaamiliselt renderdada postitust kasutajaliideses (ja eelvaatere\u017eiimis). Eemaldame postituse ID k\u00e4sitsi sisestamise n\u00f5ude ja asendame selle millegi intuitiivsemaga. Nagu eelnevalt mainitud, peate ise otsustama, kuidas postituste loendit esitada ja milline on parim viis, kuidas lasta kasutajal postitust valida. Lihtsuse huvides lisame valiku k\u00f5igi postituste pealkirjade hulgast.<\/p>\n Alustame selle sisse kodeerimist. K\u00f5igepealt peame andmepaketist vajaliku struktureerima;<\/p>\n Seej\u00e4rel kasutame Meie komponendi kohal oleva koodiga N\u00fc\u00fcd saame minna oma komponendi juurde Hoidke oma konsooli siluril silm peal. V\u00f5ite m\u00e4rgata, et see logib kaks korda; esmalt Valmistame ette valitud t\u00e4itma tagastatud postitustega ja selleks kasutame WordPressi komponenti Kui vaatate konsooli logitud (teist) vastust, n\u00e4ete, et saame hulga postitusobjekte. Iga postitus sisaldab enamikku postituse teabest, kuid valitud valikute puhul huvitab meid ainult postituse ID v\u00e4\u00e4rtusena ja postituse pealkiri siltina. Nii et me vaatame l\u00e4bi Pange t\u00e4hele, et peame viitama postituse pealkirjale kui P\u00e4rast seda peame lihtsalt lisama sinna, Seadsime See on t\u00f5esti k\u00f5ik! Kui j\u00e4rgisite eelmise sammu koodi, peaks teil juba olema kood, mis loeb salvestatud postituse ID ja kuvab selle!<\/p>\n Muidugi soovitan teil postituste loendit ja valikut rakendada teisiti kui lihtsalt valik. See ei ole ilus ega kasutajas\u00f5bralik lahendus, eriti paljude postitustega saitide puhul. Postituste arvust r\u00e4\u00e4kides, kas m\u00e4rkasite, et valija getEntityRecords tagastab ainult maksimaalselt 10 viimast postitust? See on getEntityRecordsi vaikek\u00e4itumine, kuid me saame postitusp\u00e4ringut muuta, edastades kolmanda parameetri.<\/p>\n Edastades objekti getEntityRecordsile kolmanda parameetrina, saame postitusp\u00e4ringut muuta. Nagu eelnevalt mainitud, M\u00e4rkus: see loetelu ei ole ammendav ja v\u00f5ib samuti muutuda!<\/p>\n Muudame oma p\u00e4ringut. Me tahame teha kahte asja; k\u00f5igepealt tahame tuua k\u00f5ik postitused, mitte ainult 10 viimast. Selleks pakume V\u00f5ite m\u00f5elda; oodake, kuidas me saame praeguse postituse ID? \u00c4rge unustage, et k\u00f5rgema j\u00e4rgu komponendis Muutkem \u00dclaltoodud muudatus on \u00fcsna iseenesestm\u00f5istetav. Loome p\u00e4ringuobjekti atribuutidega See postitus l\u00f5petab kohandatud Gutenbergi plokkide \u00f5petuseseeria. Seeria eesm\u00e4rk oli l\u00e4bida oma kohandatud plokkide v\u00e4ljat\u00f6\u00f6tamise p\u00f5hit\u00f5ed, pakkudes teile l\u00e4htepunkti oma ja keerukamate plokkide v\u00e4ljat\u00f6\u00f6tamiseks. Kindlasti hoidke silm peal, et saada rohkem Gutenbergiga seotud \u00f5petusi siit<\/a>. V\u00f5ib-olla leiate \u00f5petuse, mis selgitab t\u00e4psemalt midagi, mida tahtsite ise teha!<\/p>\nedit<\/code>funktsioonist postitusi p\u00e4ringuid teha. Meil on selleks paar v\u00f5imalust ja parim variant on kasutada m\u00f5nda WordPressi nn k\u00f5rgemat j\u00e4rku komponenti<\/a>. V\u00f5ite kasutada ka Javascripti brauseri meetodeid, et teha AJAX-i k\u00f5ne WordPress REST API-le, kasutades n\u00e4iteks [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>v\u00f5i axiosid. WordPress pakub tegelikult oma versiooni fetch<\/code>: apiFetch()<\/code>.<\/p>\nWordPress Core Data moodul ja k\u00f5rgema j\u00e4rgu komponendid<\/h2>\n
core\/editor<\/code>), teateid (core\/notices<\/code>), plokkide andmeid (core\/blocks<\/code>), vaateava teavet (core\/viewport<\/code>) ja l\u00f5puks, kuid mitte v\u00e4hemt\u00e4htsana, p\u00f5hipood ise \u2013 core<\/code>.<\/p>\nwp.data<\/code>paketi sees valija; [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Kauplustega saate manipuleerida ka rakendusega dispatch<\/code>, kuid see \u00f5petusesari seda ei k\u00e4sitle. Tegelikult saate valijat ise v\u00e4ga lihtsalt proovida, et n\u00e4ha, mis WordPressi poodides saadaval on.<\/p>\nProovin valijat<\/h3>\n
wp.data.select('core')<\/code><\/pre>\ngetMedia<\/code>, getTaxonomy<\/code>, getAuthors<\/code>ja nii edasi. See, mida me kasutame postituste p\u00e4ringute tegemiseks, on samuti olemas, kuid sellel pole intuitiivset nime; seda nimetatakse getEntityRecords<\/code>. Praegu on m\u00f5ned neist funktsioonidest dokumenteeritud<\/a>, kuid enamik kahjuks mitte.<\/p>\ncore<\/code>n\u00e4iteks:<\/p>\nwp.data.select('core\/editor').getBlocks()<\/code><\/pre>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>; k\u00f5rgema j\u00e4rgu komponent, mida saab kasutada rekvisiitide s\u00fcstimiseks registreeritud selektorite abil. Teisis\u00f5nu; sees withSelect<\/code>on meil juurdep\u00e4\u00e4s valijale select()<\/code>ja saame seda kasutada k\u00f5ne(de) tegemiseks. Valija tulemused on selle komponendi rekvisiidid, millele edastame withSelect<\/code>. Kui teil on vaja kombineerida mitut k\u00f5rgemat j\u00e4rku komponenti, pakub WordPressi andmemoodul seda compose<\/code>funktsiooni, kuid see ei kuulu selle \u00f5petuse ulatusse. Kasutame ainult \u00fchte k\u00f5rgemat j\u00e4rku komponenti; withSelect<\/code>.<\/p>\nPostituste toomine funktsiooniga withSelect, valige ja hanki EntityRecords<\/h2>\n
withSelect<\/code>oma ploki jaoks seadistama k\u00f5rgema j\u00e4rgu komponendi. Selle sees saame kasutada valijaid, et p\u00e4\u00e4seda juurde WordPressi poodidele, mis on rekvisiidid komponendile, millele edastame withSelect<\/code>. Postituste p\u00e4ringute tegemiseks kasutame core<\/code>poodi ja valijat .getEntityRecords<\/code><\/p>\ngetEntityRecords<\/code>on hetkel kahjuks v\u00e4he dokumenteeritud<\/a>. Kuid olen \u00f5ppinud, et saame edastada postType<\/code>esimese parameetrina (olemi t\u00fc\u00fcp) ja seej\u00e4rel teise parameetrina postituse t\u00fc\u00fcbi (nt " post<\/code>" v\u00f5i). Kolmas parameeter on valikuline ja v\u00f5ib olla p\u00e4ringuargumentidega objekt. Kolmandat parameetrit vaatame hiljem.<\/p>\nKodeerimine
withSelect<\/code><\/h3>\nconst { withSelect, select } = wp.data;<\/code><\/pre>\nwithSelect<\/code>oma ploki edit<\/code>funktsioonis ja edastame oma redigeerimiskomponendi; FirstBlockEdit<\/code>. Sees withSelect<\/code>me destruktureerime select<\/code>parameetrina ja kasutame valijat select()<\/code>postituste p\u00e4ringu tegemiseks getEntityRecords<\/code>. Tagastame \u00fche omadusega objekti, mille kutsume posts<\/code>ja mis sisaldab select()<\/code>k\u00f5ne tulemust.<\/p>\n...\nedit: withSelect(select => {\n return {\n posts: select('core').getEntityRecords('postType', 'post')\n }\n})(FirstBlockEdit),\nsave:() => { return null }\n...<\/code><\/pre>\nFirstBlockEdit<\/code>on n\u00fc\u00fcd uus rekvisiit; posts<\/code>. K\u00f5ik, mida me k\u00f5rgema j\u00e4rgu komponendi sees tagastame withSelect<\/code>, on juurdep\u00e4\u00e4setav l\u00e4bitava komponendi rekvisiitidena (p\u00e4ris l\u00f5pus suluses).<\/p>\nPostituste k\u00e4sitlemine valijast<\/h3>\n
FirstBlockEdit<\/code>ja heita pilk uuele props.posts<\/code>. Kuna meie komponent on klassip\u00f5hine komponent, peame viitama rekvisiitidele this<\/code>. Logime selle konsoolis render()<\/code>funktsiooni sees v\u00e4lja FirstBlockEdit<\/code>:<\/p>\nrender() {\n const { attributes, setAttributes } = this.props;\n console.log(this.props.posts);\n ...\n}<\/code><\/pre>\nnull<\/code>ja siis millalgi hiljem logib see hulga postitusi. Selle p\u00f5hjuseks on asjaolu, et postituste p\u00e4ringuid tehakse as\u00fcnkrooniliselt. Meie komponent renderdatakse esmalt enne vastust, mis ajal props.posts<\/code>on null<\/code>. Kui saame vastuse, renderdatakse meie komponent uuesti koos rekvisiidiga. Peaksite alati meeles pidama, et selle v\u00e4ikese ajavahemiku jaoks peaksite oma koodis andmeid kasutamata.<\/p>\nValiku lisamine postituste kuvamiseks<\/h3>\n
SelectControl<\/code>. Komponent SelectControl<\/code>aktsepteerib valikute massiivi, kus iga valik on objekt omadustega value<\/code>ja label<\/code>.<\/p>\nposts<\/code>rekvisiidi ja sisestame massiivimuutuja, mille edastame SelectControl<\/code>. \u00c4rge unustage k\u00e4sitleda v\u00e4ikest ajavahemikku, kus posts<\/code>rekvisiit on null<\/code>. Sel juhul t\u00e4idame valikumassiivi \u00fche valikuga, millel on silt \u201eLaadimine\u2026".<\/p>\nlet choices = [];\nif (this.props.posts) {\n choices.push({ value: 0, label: __('Select a post', 'awhitepixel') });\n this.props.posts.forEach(post => {\n choices.push({ value: post.id, label: post.title.rendered });\n });\n} else {\n choices.push({ value: 0, label: __('Loading...', 'awhitepixel') })\n}<\/code><\/pre>\npost.title.rendered<\/code>. Saate end logitud konsoolist otsida posts<\/code>ja vaadata, kuidas iga postituse teave on \u00fcles ehitatud.<\/p>\nSelectControl<\/code>kuhu tahame. See v\u00f5ib olla ploki enda sees (eelistatult redigeerimisre\u017eiimi koodis) v\u00f5i Inspectori sees.<\/p>\n<SelectControl\n label={__('Selected Post', 'awhitepixel')}\n options={choices}\n value={attributes.selectedPostId}\n onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\nSelectControl<\/code>atribuudi viitama atribuudile, selectedPostId<\/code>mille m\u00e4\u00e4ratlesime eelmises etapis. Seadistame rekvisiidis salvestatud v\u00e4\u00e4rtuse ja tegeleme selle value<\/code>v\u00e4rskendamisega onChange<\/code>rekvisiidis \u2013 t\u00e4pselt nagu oleme seda mitu korda varem teinud. Tagame numbri salvestamise kasutades, parseInt()<\/code>kuna sellel selectedPostId<\/code>on t\u00fc\u00fcp number<\/code>. Ja me edastame loodud valikute massiivi rekvisiidis options<\/code>.<\/p>\nMuutke getEntityRecordsi p\u00e4ringut<\/h3>\n
getEntityRecords<\/code>puuduvad kahjuks selle dokumendid. Kuid kogu veebi lugedes olen kogunud loendi v\u00f5imalikest p\u00e4ringuargumentidest;<\/p>\n\n
per_page<\/code>: m\u00e4\u00e4rake arv, et piirata postituste arvu. Seadistage v\u00e4\u00e4rtusele, -1<\/code>et tuua maksimaalselt 100. Vaikimisi 10<\/code>.<\/li>\nexclude<\/code>: teatud postituste v\u00e4listamine p\u00e4ringust. M\u00e4\u00e4rake postituse ID v\u00f5i numbrite massiiv mitme postituse ID jaoks.<\/li>\nparent_exclude<\/code>: teatud vanemate postituste v\u00e4listamine. M\u00e4\u00e4rake postituse ID v\u00f5i mitme postituse ID massiiv.<\/li>\norderby<\/code>: otsustage postituste j\u00e4rjekord. T\u00f5en\u00e4oliselt saate kasutada samu parameetreid, mis WP_Query j\u00e4rjekorras<\/a>. V\u00f5ib olla nt " menu_order<\/code>".<\/li>\norder<\/code>: kas 'asc'<\/code>v\u00f5i ‘ desc'<\/code>kasvavas v\u00f5i kahanevas j\u00e4rjestuses.<\/li>\nstatus<\/code>: filtreerige postituse oleku j\u00e4rgi. V\u00f5ib olla string, mitme komaga eraldatud olekuga string v\u00f5i olekustringide massiiv. Nt ['publish', 'draft']<\/code>p\u00e4ringute tegemiseks nii avaldatud kui ka koostatud postituste kohta.<\/li>\ncategories<\/code>: postituste filtreerimine teatud kategooriate j\u00e4rgi. Esitage kategooria ID v\u00f5i kategooria ID-de massiiv. Usun, et see t\u00f6\u00f6tab ainult postituste kategooriate ja mitte muude kohandatud taksonoomiate puhul.<\/li>\ntags<\/code>: filtreerige postitusi teatud siltide j\u00e4rgi. Esitage sildi ID v\u00f5i m\u00e4rgendi ID-de massiiv. T\u00f6\u00f6tab ainult postitusm\u00e4rgendite ja mitte muude kohandatud taksonoomiate puhul.<\/li>\nsearch<\/code>: lisage otsingup\u00e4ring (string).<\/li>\n<\/ul>\n-1<\/code>. per_page<\/code>Teiseks tahame praeguse postituse postituste loendist v\u00e4lja j\u00e4tta, andes praeguse postituse ID aadressile exclude<\/code>. Sageli pole m\u00f5tet n\u00e4idata postituse otseteed v\u00f5i praeguse postituse eelvaadet.<\/p>\nwithSelect<\/code>ja select<\/code>selektoriga p\u00e4\u00e4seme juurde k\u00f5ikidele WordPressi p\u00f5hiandmesalvedele. Praeguse postituse ID on loomulik salvestada m\u00f5nda WordPressi p\u00f5hipoodi. Seest core\/editor<\/code>leiame funktsiooni getCurrentPostId()<\/code>.<\/p>\nwithSelect<\/code>naasmist millekski selliseks:<\/p>\nedit: withSelect(select => {\n const currentPostId = select('core\/editor').getCurrentPostId();\n const query = {\n per_page: -1,\n exclude: currentPostId\n }\n return {\n posts: select('core').getEntityRecords('postType', 'post', query)\n }\n})(FirstBlockEdit),<\/code><\/pre>\nper_page<\/code>ja exclude<\/code>edastame selle kolmanda parameetrina getEntityRecords()<\/code>. N\u00fc\u00fcd peaks meie props.posts<\/code>sisekomponent FirstBlockEdit<\/code>loetlema k\u00f5ik postitused, kuid v\u00e4listama praeguse postituse.<\/p>\nJ\u00e4reldus<\/h2>\n