{"id":233660,"date":"2023-02-20T18:10:00","date_gmt":"2023-02-20T15:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233660"},"modified":"2022-11-11T08:42:15","modified_gmt":"2022-11-11T05:42:15","slug":"luo-mukautettu-gutenberg-lohko-osa-10-viestien-ja-korkeamman-jaerjestyksen-komponenttien-hakeminen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-10-viestien-ja-korkeamman-jaerjestyksen-komponenttien-hakeminen\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko – Osa 10: Viestien ja korkeamman j\u00e4rjestyksen komponenttien hakeminen"},"content":{"rendered":"\n

T\u00e4ss\u00e4 Gutenbergin mukautetun lohkon opetusohjelmasarjan viimeisess\u00e4 osassa opimme k\u00e4ytt\u00e4m\u00e4\u00e4n korkeamman asteen komponentteja hy\u00f6dynt\u00e4m\u00e4\u00e4n WordPressin komponentteja kyselyjen tekemiseen viesteille ja muille WordPressin ydintiedoille.<\/p>\n

Edellisess\u00e4 osassa opimme dynaamisista lohkoista ja p\u00e4\u00e4dyimme ottamaan k\u00e4ytt\u00f6\u00f6n toiminnot, joiden avulla voit kirjoittaa viestitunnuksen ja k\u00e4ytt\u00e4\u00e4 PHP:t\u00e4 postauksen dynaamiseen hakemiseen ja hahmontamiseen k\u00e4ytt\u00f6liittym\u00e4- ja esikatselutilassa. Viestitunnuksen kirjoittaminen manuaalisesti ei ole intuitiivista tai k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llist\u00e4. On paljon parempi tarjota k\u00e4ytt\u00e4j\u00e4lle jokin tapa valita tai etsi\u00e4 viestej\u00e4 julkaisun otsikon perusteella ja napsauttamalla jotakin valitaksesi.<\/p>\n

Yksi osa t\u00e4m\u00e4n ratkaisemisesta on melko helppoa; miten voit kysell\u00e4 viestej\u00e4 lohkosi edit<\/code>funktiosta. Meill\u00e4 on t\u00e4h\u00e4n muutama vaihtoehto, ja paras vaihtoehto on k\u00e4ytt\u00e4\u00e4 joitain WordPressin niin sanottuja korkeamman asteen komponentteja .<\/a> Voit my\u00f6s k\u00e4ytt\u00e4\u00e4 Javascript-selainmenetelmi\u00e4 AJAX-kutsujen suorittamiseen kohti WordPress REST API:ta esimerkiksi [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>tai aksioiden avulla. WordPress tarjoaa itse asiassa oman versionsa fetch<\/code>: apiFetch()<\/code>.<\/p>\n

Toinen osa t\u00e4m\u00e4n ratkaisemisesta on hieman sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. N\u00e4in esit\u00e4mme luettelon tai valinnan lohkossamme. Miten aiot esitt\u00e4\u00e4 luettelon postauksista, joista valita? Valitussa, valintaruutujen luettelossa tai valintanapeissa? Vai haluatko tarjota hakumahdollisuuden ja siten toteuttaa automaattisen t\u00e4ydennysratkaisun tai suodatinratkaisun? Pit\u00e4isik\u00f6 sinun sallia useiden viestien valitseminen vai vain yksi? Yleens\u00e4 voit ratkaista t\u00e4m\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 erilaisia \u200b\u200b\u200b\u200bWordPress-komponentteja, mutta sinun on p\u00e4\u00e4tett\u00e4v\u00e4, mink\u00e4 ratkaisun haluat toteuttaa.<\/p>\n

Opitaanpa ensin hieman korkeamman asteen komponenteista ja WordPress-tietomoduulista, ennen kuin tarkastellaan, kuinka voimme suorittaa viestikyselyit\u00e4 lohkossamme.<\/p>\n

WordPress Core Data -moduuli ja korkeamman tason komponentit<\/h2>\n

Kun ty\u00f6skentelet Reactin kanssa, sinun on usein siirrett\u00e4v\u00e4 tila alasp\u00e4in lapsikomponentteihin tai yl\u00f6sp\u00e4in yhteiseen vanhemmuuden komponenttiin, jotta kaikki muut alikomponentit p\u00e4\u00e4sev\u00e4t k\u00e4siksi niihin. Ratkaisu sovelluksen tilan keskitt\u00e4miseen on Reduxin<\/a> avulla. Reduxin avulla voit rakentaa kauppoja, jotka ovat objekteja, jotka sis\u00e4lt\u00e4v\u00e4t sovelluksen tilan ja tiedot.<\/p>\n

WordPress Data -moduuli<\/a> on eri kauppojen keskus ja tarjoaa toimintoja tietojen hallintaan eri moduulien v\u00e4lill\u00e4. Se on rakennettu Reduxin p\u00e4\u00e4lle \u2013 mutta \u00e4l\u00e4 pid\u00e4 sit\u00e4 WordPressin Reduxina, sill\u00e4 siin\u00e4 on melko v\u00e4h\u00e4n eroja. Voit rekister\u00f6id\u00e4 omat myym\u00e4l\u00e4si WordPressiin tai, mik\u00e4 ehk\u00e4 viel\u00e4 t\u00e4rke\u00e4mp\u00e4\u00e4, k\u00e4ytt\u00e4\u00e4 WordPressin rekister\u00f6ityj\u00e4 kauppoja.<\/p>\n

T\u00e4ss\u00e4 on yleiskatsaus WordPress-tietomoduulin k\u00e4ytett\u00e4viss\u00e4 olevista kaupoista<\/a> (muuttuu todenn\u00e4k\u00f6isesti ajan my\u00f6t\u00e4). Kaikki WordPressin kaupat sis\u00e4ltyv\u00e4t Core Data -moduuliin<\/a>. Siell\u00e4 on esimerkiksi kauppoja, jotka sis\u00e4lt\u00e4v\u00e4t editorin tietoja (core\/editor<\/code>), huomautuksia (core\/notices<\/code>), lohkotietoja (core\/blocks<\/code>), kuvaporttitietoja (core\/viewport<\/code>) ja viimeisen\u00e4 mutta ei v\u00e4h\u00e4isimp\u00e4n\u00e4 itse p\u00e4\u00e4varastoa \u2013 core<\/code>.<\/p>\n

Sinun on k\u00e4ytett\u00e4v\u00e4 valitsimia, jotta voit k\u00e4ytt\u00e4\u00e4 myym\u00e4l\u00f6iden tietoja. WordPressill\u00e4 on valitsin wp.data<\/code>paketissa; [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Voit my\u00f6s manipuloida kauppoja -sovelluksella dispatch<\/code>, mutta t\u00e4m\u00e4 opetussarja ei kata t\u00e4t\u00e4. Voit todella helposti kokeilla valitsinta itse n\u00e4hd\u00e4ksesi, mit\u00e4 WordPressin myym\u00e4l\u00f6iss\u00e4 on saatavilla.<\/p>\n

Kokeillaan valitsinta<\/h3>\n

Avaa Gutenberg-editori Chromessa ja avaa konsolin virheenkorjausty\u00f6kalu. Kirjoita:<\/p>\n

wp.data.select('core')<\/code><\/pre>\n
Ja paina Enter. Sinun pit\u00e4isi saada objekti vastauksena kaikilla valitsimilla (funktioilla), joita voit k\u00e4ytt\u00e4\u00e4. Esimerkkein\u00e4 l\u00f6yd\u00e4t funktiot, kuten getMedia<\/code>, getTaxonomy<\/code>, getAuthors<\/code>, ja niin edelleen. Se, jota k\u00e4yt\u00e4mme viestien kyselyyn, on my\u00f6s olemassa, mutta sill\u00e4 ei ole intuitiivista nime\u00e4; sit\u00e4 kutsutaan getEntityRecords<\/code>. T\u00e4ll\u00e4 hetkell\u00e4 osa n\u00e4ist\u00e4 toiminnoista on dokumentoitu<\/a>, mutta useimmat eiv\u00e4t valitettavasti ole.<\/p>\n
Kokeile my\u00f6s muita kauppoja kuin core<\/code>esim.<\/p>\n
wp.data.select('core\/editor').getBlocks()<\/code><\/pre>\n
T\u00e4m\u00e4 palauttaa kaikki tiedot kaikista viestiss\u00e4si t\u00e4ll\u00e4 hetkell\u00e4 olevista lohkoista. Voit leikki\u00e4 t\u00e4m\u00e4n kanssa Chrome-konsolin virheenkorjausohjelmassa ja yritt\u00e4\u00e4 kutsua joitain toimintoja n\u00e4hd\u00e4ksesi, mit\u00e4 saat vastauksena. Jotkut vaativat parametreja ja toiset eiv\u00e4t.<\/p>\n
K\u00e4ytt\u00e4\u00e4ksemme valitsimia ja p\u00e4\u00e4st\u00e4ksemme kauppoihin meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 niit\u00e4 korkeamman asteen komponenteissa. Korkeamman asteen komponentit ovat yksinkertaisesti malli tehd\u00e4 jotain Reactissa. V\u00e4lit\u00e4mme komponentin funktiolle (tai komponentille), joka voi lis\u00e4t\u00e4 joitain rekvisiitta, ja sitten palautamme uuden komponentin.<\/p>\n
Sis\u00e4lt\u00e4 WordPress Data moduuli l\u00f6yd\u00e4mme [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>; korkeamman asteen komponentti, jota voidaan k\u00e4ytt\u00e4\u00e4 rekvisiitta ruiskuttamiseen rekister\u00f6ityjen valitsimien avulla. Toisin sanoen; sis\u00e4ll\u00e4 withSelect<\/code>meill\u00e4 on p\u00e4\u00e4sy valitsimeen select()<\/code>ja voimme k\u00e4ytt\u00e4\u00e4 sit\u00e4 puhelujen suorittamiseen. Valitsimen tulokset ovat sen komponentin rekvisiitta, johon siirrymme withSelect<\/code>. Jos sinun on yhdistett\u00e4v\u00e4 useita korkeamman asteen komponentteja, WordPress Data -moduuli tarjoaa compose<\/code>toiminnon, mutta t\u00e4m\u00e4 ei kuulu t\u00e4m\u00e4n opetusohjelman piiriin. K\u00e4yt\u00e4mme vain yht\u00e4 korkeamman asteen komponenttia; withSelect<\/code>.<\/p>\n
T\u00e4m\u00e4 on ollut paljon teoriaa, joten aletaan tarkastella koodia ja k\u00e4yt\u00e4nn\u00f6n esimerkkej\u00e4.<\/p>\n
Viestien hakeminen withSelect-toiminnolla, valitse ja hanki EntityRecords<\/h2>\n
Yhteenvetona edell\u00e4 olevista meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 korkeamman asteen komponentti withSelect<\/code>lohkollemme. T\u00e4m\u00e4n sis\u00e4ll\u00e4 voimme k\u00e4ytt\u00e4\u00e4 valitsimia p\u00e4\u00e4st\u00e4ksemme WordPressin kauppoihin, jotka ovat rekvisiitta komponentille, johon siirrymme withSelect<\/code>. K\u00e4yt\u00e4mme core<\/code>kauppaa ja valitsinta getEntityRecords<\/code>viestien kyselyyn.<\/p>\n
Toimintoa getEntityRecords<\/code>ei valitettavasti ole kovin dokumentoitu<\/a> t\u00e4ll\u00e4 hetkell\u00e4. Mutta olen oppinut, ett\u00e4 voimme v\u00e4litt\u00e4\u00e4 postType<\/code>ensimm\u00e4isen\u00e4 parametrina (entiteettityyppi) ja sitten viestityypin toisena parametrina (esim. ’ post<\/code>’ tai ’ page<\/code>’). Kolmas parametri on valinnainen ja voi olla objekti, jossa on kyselyargumentteja. Tarkastellaan kolmatta parametria my\u00f6hemmin.<\/p>\n
Jos noudatit t\u00e4t\u00e4 opetussarjaa edellisest\u00e4 osasta, sinulla olisi mukautettu lohko, joka hyv\u00e4ksyy manuaalisesti kirjoitetun viestitunnuksen tekstinsy\u00f6t\u00f6ss\u00e4. Lohko k\u00e4ytt\u00e4\u00e4 PHP:t\u00e4 dynaamisesti hahmontamaan viestin k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 (ja esikatselutilassa). Poistetaan vaatimus post ID:n manuaalisesta kirjoittamisesta ja korvataan se jollain intuitiivisemmalla. Kuten aiemmin mainittiin, sinun on itse p\u00e4\u00e4tett\u00e4v\u00e4, miten viestiluettelo esitet\u00e4\u00e4n ja mik\u00e4 on paras tapa antaa k\u00e4ytt\u00e4j\u00e4n valita viesti. Yksinkertaisuuden vuoksi lis\u00e4\u00e4mme valikoiman kaikista viestien otsikoista, joista valita.<\/p>\n
KoodauswithSelect<\/code><\/h3>\n
Aloitetaan t\u00e4m\u00e4n koodaaminen. Ensin meid\u00e4n on tuhottava tietopaketista se, mit\u00e4 tarvitsemme;<\/p>\n
const { withSelect, select } = wp.data;<\/code><\/pre>\n
Sitten k\u00e4yt\u00e4mme withSelect<\/code>lohkomme edit<\/code>funktiossa ja v\u00e4lit\u00e4mme muokkauskomponenttimme; FirstBlockEdit<\/code>. Sis\u00e4ll\u00e4 withSelect<\/code>destructure select<\/code>parametrina ja k\u00e4yt\u00e4 valitsinta select()<\/code>kyselyihin viestien kanssa getEntityRecords<\/code>. Palautamme objektin, jolla on yksi ominaisuus, jota kutsumme ja posts<\/code>joka sis\u00e4lt\u00e4\u00e4 puhelun tuloksen select()<\/code>.<\/p>\n
...\nedit: withSelect(select => {\n    return {\n        posts: select('core').getEntityRecords('postType', 'post')\n    }\n})(FirstBlockEdit),\nsave:() => { return null }\n...<\/code><\/pre>\n
Komponenttimme yl\u00e4puolella oleva koodi FirstBlockEdit<\/code>saa nyt uuden ehdotuksen; posts<\/code>. Kaikki mit\u00e4 palautamme withSelect<\/code>korkeamman asteen komponentin sis\u00e4\u00e4n, on k\u00e4ytett\u00e4viss\u00e4 ohittamamme komponentin rekvisiittana (sulussa aivan lopussa).<\/p>\n
Viestien k\u00e4sittely valitsijalta<\/h3>\n
Voimme nyt menn\u00e4 komponenttiimme FirstBlockEdit<\/code>ja katsoa uutta props.posts<\/code>. Koska komponenttimme on luokkapohjainen komponentti, meid\u00e4n on viitattava rekvisiittauksiin this<\/code>. Konsolikirjataan se ulos render()<\/code>funktion sis\u00e4ll\u00e4 FirstBlockEdit<\/code>:<\/p>\n
render() {\n    const { attributes, setAttributes } = this.props;\n    console.log(this.props.posts);\n    ...\n}<\/code><\/pre>\n
Pid\u00e4 silm\u00e4ll\u00e4 konsolivirheenkorjausta. Saatat huomata, ett\u00e4 t\u00e4m\u00e4 kirjautuu kahdesti; ensin null<\/code>ja sitten joskus my\u00f6hemmin se kirjaa joukon viestej\u00e4. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 viestien kysely tapahtuu asynkronisesti. Komponenttimme render\u00f6id\u00e4\u00e4n ensin ennen vastausta, jolloin props.posts<\/code>on null<\/code>. Kun saamme vastauksen, komponenttimme hahmonnetaan uudelleen rekvisiitta t\u00e4ytettyn\u00e4. Sinun tulee aina muistaa ottaa huomioon t\u00e4m\u00e4 lyhyt aika ilman koodisi tietoja.<\/p>\n
Lis\u00e4\u00e4 valinta n\u00e4ytt\u00e4\u00e4ksesi viestit<\/h3>\n
Valmistaudutaan t\u00e4ytt\u00e4m\u00e4\u00e4n valitut palautetuilla viesteill\u00e4 ja k\u00e4yt\u00e4mme siihen WordPress-komponenttia SelectControl<\/code>. Komponentti SelectControl<\/code>hyv\u00e4ksyy joukon vaihtoehtoja, joissa jokainen vaihtoehto on objekti, jolla on ominaisuudet value<\/code>ja label<\/code>.<\/p>\n
Jos katsot konsolin kirjattua (toista) vastausta, voit n\u00e4hd\u00e4, ett\u00e4 saamme joukon post-objekteja. Jokainen viesti sis\u00e4lt\u00e4\u00e4 suurimman osan postauksen tiedoista, mutta valitun valinnan osalta meit\u00e4 kiinnostaa vain postin tunnus arvona ja julkaisun otsikko otsikkona. Joten k\u00e4ymme l\u00e4pi posts<\/code>propan ja t\u00e4yt\u00e4mme taulukkomuuttujan, jonka v\u00e4lit\u00e4mme SelectControl<\/code>. \u00c4l\u00e4 unohda k\u00e4sitell\u00e4 pient\u00e4 aikav\u00e4li\u00e4, jossa posts<\/code>rekvisiitta on null<\/code>. Siin\u00e4 tapauksessa t\u00e4yt\u00e4mme valintataulukon yhdell\u00e4 vaihtoehdolla, jonka otsikko on "Ladataan…".<\/p>\n
let 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>\n
Huomaa, ett\u00e4 meid\u00e4n on viitattava viestin otsikkoon nimell\u00e4 post.title.rendered<\/code>. Voit etsi\u00e4 itse\u00e4si kirjautuneesta konsolista posts<\/code>ja n\u00e4hd\u00e4, kuinka kunkin viestin tiedot on rakennettu.<\/p>\n
T\u00e4m\u00e4n j\u00e4lkeen meid\u00e4n on vain lis\u00e4tt\u00e4v\u00e4 SelectControl<\/code>minne haluamme sen. Se voi olla itse lohkon sis\u00e4ll\u00e4 (mieluiten muokkaustilan koodissa) tai Inspectorin sis\u00e4ll\u00e4.<\/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>\n
Asetamme SelectControl<\/code>viittaamaan attribuuttiin, selectedPostId<\/code>jonka m\u00e4\u00e4ritimme edellisess\u00e4 vaiheessa. Asetamme tallennetun arvon potkuriin value<\/code>ja k\u00e4sittelemme sen p\u00e4ivitt\u00e4misen onChange<\/code>potkurissa \u2013 kuten olemme tehneet useaan otteeseen ennenkin. Varmistamme, ett\u00e4 numero tallennetaan k\u00e4ytt\u00e4m\u00e4ll\u00e4, parseInt()<\/code>koska numerolla on selectedPostId<\/code>tyyppi number<\/code>. Ja v\u00e4lit\u00e4mme luodun valikoiman valintoja prop options<\/code>.<\/p>\n
Siin\u00e4 todellakin kaikki! Jos noudatit edellisen vaiheen koodia, sinulla pit\u00e4isi jo olla koodi, joka lukee tallennetun viestitunnuksen ja n\u00e4ytt\u00e4\u00e4 sen!<\/p>\n
Tietysti suosittelen, ett\u00e4 toteutat viestien luettelon ja valinnan eri tavalla kuin pelk\u00e4n valinnan. T\u00e4m\u00e4 ei ole kaunis tai k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen ratkaisu, etenk\u00e4\u00e4n sivustoille, joilla on paljon viestej\u00e4. Kun puhutaan viestien m\u00e4\u00e4r\u00e4st\u00e4, huomasitko, ett\u00e4 valitsin getEntityRecords palauttaa vain enint\u00e4\u00e4n 10 viimeisint\u00e4 viesti\u00e4? T\u00e4m\u00e4 on getEntityRecordsin oletusk\u00e4ytt\u00e4ytyminen, mutta voimme muokata l\u00e4hetyskysely\u00e4 v\u00e4litt\u00e4m\u00e4ll\u00e4 kolmannen parametrin.<\/p>\n
Muokkaa getEntityRecords-kysely\u00e4<\/h3>\n
V\u00e4litt\u00e4m\u00e4ll\u00e4 objektin kolmantena parametrina getEntityRecordsille voimme muokata l\u00e4hetyskysely\u00e4. Kuten aiemmin mainittiin, valitettavasti asiakirjat getEntityRecords<\/code>puuttuvat. Mutta lukemalla koko verkkoa olen ker\u00e4nnyt luettelon mahdollisista kyselyargumenteista;<\/p>\n