Tässä Gutenbergin mukautetun lohkon opetusohjelmasarjan viimeisessä osassa opimme käyttämään korkeamman asteen komponentteja hyödyntämään WordPressin komponentteja kyselyjen tekemiseen viesteille ja muille WordPressin ydintiedoille.
Edellisessä osassa opimme dynaamisista lohkoista ja päädyimme ottamaan käyttöön toiminnot, joiden avulla voit kirjoittaa viestitunnuksen ja käyttää PHP:tä postauksen dynaamiseen hakemiseen ja hahmontamiseen käyttöliittymä- ja esikatselutilassa. Viestitunnuksen kirjoittaminen manuaalisesti ei ole intuitiivista tai käyttäjäystävällistä. On paljon parempi tarjota käyttäjälle jokin tapa valita tai etsiä viestejä julkaisun otsikon perusteella ja napsauttamalla jotakin valitaksesi.
Yksi osa tämän ratkaisemisesta on melko helppoa; miten voit kysellä viestejä lohkosi editfunktiosta. Meillä on tähän muutama vaihtoehto, ja paras vaihtoehto on käyttää joitain WordPressin niin sanottuja korkeamman asteen komponentteja . Voit myös käyttää Javascript-selainmenetelmiä AJAX-kutsujen suorittamiseen kohti WordPress REST API:ta esimerkiksi [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)tai aksioiden avulla. WordPress tarjoaa itse asiassa oman versionsa fetch: apiFetch().
Toinen osa tämän ratkaisemisesta on hieman sinun päätettävissäsi. Näin esitämme luettelon tai valinnan lohkossamme. Miten aiot esittää luettelon postauksista, joista valita? Valitussa, valintaruutujen luettelossa tai valintanapeissa? Vai haluatko tarjota hakumahdollisuuden ja siten toteuttaa automaattisen täydennysratkaisun tai suodatinratkaisun? Pitäisikö sinun sallia useiden viestien valitseminen vai vain yksi? Yleensä voit ratkaista tämän käyttämällä erilaisia WordPress-komponentteja, mutta sinun on päätettävä, minkä ratkaisun haluat toteuttaa.
Opitaanpa ensin hieman korkeamman asteen komponenteista ja WordPress-tietomoduulista, ennen kuin tarkastellaan, kuinka voimme suorittaa viestikyselyitä lohkossamme.
WordPress Core Data -moduuli ja korkeamman tason komponentit
Kun työskentelet Reactin kanssa, sinun on usein siirrettävä tila alaspäin lapsikomponentteihin tai ylöspäin yhteiseen vanhemmuuden komponenttiin, jotta kaikki muut alikomponentit pääsevät käsiksi niihin. Ratkaisu sovelluksen tilan keskittämiseen on Reduxin avulla. Reduxin avulla voit rakentaa kauppoja, jotka ovat objekteja, jotka sisältävät sovelluksen tilan ja tiedot.
WordPress Data -moduuli on eri kauppojen keskus ja tarjoaa toimintoja tietojen hallintaan eri moduulien välillä. Se on rakennettu Reduxin päälle – mutta älä pidä sitä WordPressin Reduxina, sillä siinä on melko vähän eroja. Voit rekisteröidä omat myymäläsi WordPressiin tai, mikä ehkä vielä tärkeämpää, käyttää WordPressin rekisteröityjä kauppoja.
Tässä on yleiskatsaus WordPress-tietomoduulin käytettävissä olevista kaupoista (muuttuu todennäköisesti ajan myötä). Kaikki WordPressin kaupat sisältyvät Core Data -moduuliin. Siellä on esimerkiksi kauppoja, jotka sisältävät editorin tietoja (core/editor), huomautuksia (core/notices), lohkotietoja (core/blocks), kuvaporttitietoja (core/viewport) ja viimeisenä mutta ei vähäisimpänä itse päävarastoa – core.
Sinun on käytettävä valitsimia, jotta voit käyttää myymälöiden tietoja. WordPressillä on valitsin wp.datapaketissa; [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Voit myös manipuloida kauppoja -sovelluksella dispatch, mutta tämä opetussarja ei kata tätä. Voit todella helposti kokeilla valitsinta itse nähdäksesi, mitä WordPressin myymälöissä on saatavilla.
Kokeillaan valitsinta
Avaa Gutenberg-editori Chromessa ja avaa konsolin virheenkorjaustyökalu. Kirjoita:
wp.data.select('core')Ja paina Enter. Sinun pitäisi saada objekti vastauksena kaikilla valitsimilla (funktioilla), joita voit käyttää. Esimerkkeinä löydät funktiot, kuten getMedia, getTaxonomy, getAuthors, ja niin edelleen. Se, jota käytämme viestien kyselyyn, on myös olemassa, mutta sillä ei ole intuitiivista nimeä; sitä kutsutaan getEntityRecords. Tällä hetkellä osa näistä toiminnoista on dokumentoitu, mutta useimmat eivät valitettavasti ole.
Kokeile myös muita kauppoja kuin coreesim.
wp.data.select('core/editor').getBlocks()Tämä palauttaa kaikki tiedot kaikista viestissäsi tällä hetkellä olevista lohkoista. Voit leikkiä tämän kanssa Chrome-konsolin virheenkorjausohjelmassa ja yrittää kutsua joitain toimintoja nähdäksesi, mitä saat vastauksena. Jotkut vaativat parametreja ja toiset eivät.
Käyttääksemme valitsimia ja päästäksemme kauppoihin meidän on käytettävä niitä korkeamman asteen komponenteissa. Korkeamman asteen komponentit ovat yksinkertaisesti malli tehdä jotain Reactissa. Välitämme komponentin funktiolle (tai komponentille), joka voi lisätä joitain rekvisiitta, ja sitten palautamme uuden komponentin.
Sisältä WordPress Data moduuli löydämme [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect); korkeamman asteen komponentti, jota voidaan käyttää rekvisiitta ruiskuttamiseen rekisteröityjen valitsimien avulla. Toisin sanoen; sisällä withSelectmeillä on pääsy valitsimeen select()ja voimme käyttää sitä puhelujen suorittamiseen. Valitsimen tulokset ovat sen komponentin rekvisiitta, johon siirrymme withSelect. Jos sinun on yhdistettävä useita korkeamman asteen komponentteja, WordPress Data -moduuli tarjoaa composetoiminnon, mutta tämä ei kuulu tämän opetusohjelman piiriin. Käytämme vain yhtä korkeamman asteen komponenttia; withSelect.
Tämä on ollut paljon teoriaa, joten aletaan tarkastella koodia ja käytännön esimerkkejä.
Viestien hakeminen withSelect-toiminnolla, valitse ja hanki EntityRecords
Yhteenvetona edellä olevista meidän on määritettävä korkeamman asteen komponentti withSelectlohkollemme. Tämän sisällä voimme käyttää valitsimia päästäksemme WordPressin kauppoihin, jotka ovat rekvisiitta komponentille, johon siirrymme withSelect. Käytämme corekauppaa ja valitsinta getEntityRecordsviestien kyselyyn.
Toimintoa getEntityRecordsei valitettavasti ole kovin dokumentoitu tällä hetkellä. Mutta olen oppinut, että voimme välittää postTypeensimmäisenä parametrina (entiteettityyppi) ja sitten viestityypin toisena parametrina (esim. ‘ post‘ tai ‘ page‘). Kolmas parametri on valinnainen ja voi olla objekti, jossa on kyselyargumentteja. Tarkastellaan kolmatta parametria myöhemmin.
Jos noudatit tätä opetussarjaa edellisestä osasta, sinulla olisi mukautettu lohko, joka hyväksyy manuaalisesti kirjoitetun viestitunnuksen tekstinsyötössä. Lohko käyttää PHP:tä dynaamisesti hahmontamaan viestin käyttöliittymässä (ja esikatselutilassa). Poistetaan vaatimus post ID:n manuaalisesta kirjoittamisesta ja korvataan se jollain intuitiivisemmalla. Kuten aiemmin mainittiin, sinun on itse päätettävä, miten viestiluettelo esitetään ja mikä on paras tapa antaa käyttäjän valita viesti. Yksinkertaisuuden vuoksi lisäämme valikoiman kaikista viestien otsikoista, joista valita.
KoodauswithSelect
Aloitetaan tämän koodaaminen. Ensin meidän on tuhottava tietopaketista se, mitä tarvitsemme;
const { withSelect, select } = wp.data;Sitten käytämme withSelectlohkomme editfunktiossa ja välitämme muokkauskomponenttimme; FirstBlockEdit. Sisällä withSelectdestructure selectparametrina ja käytä valitsinta select()kyselyihin viestien kanssa getEntityRecords. Palautamme objektin, jolla on yksi ominaisuus, jota kutsumme ja postsjoka sisältää puhelun tuloksen select().
Komponenttimme yläpuolella oleva koodi FirstBlockEditsaa nyt uuden ehdotuksen; posts. Kaikki mitä palautamme withSelectkorkeamman asteen komponentin sisään, on käytettävissä ohittamamme komponentin rekvisiittana (sulussa aivan lopussa).
Viestien käsittely valitsijalta
Voimme nyt mennä komponenttiimme FirstBlockEditja katsoa uutta props.posts. Koska komponenttimme on luokkapohjainen komponentti, meidän on viitattava rekvisiittauksiin this. Konsolikirjataan se ulos render()funktion sisällä FirstBlockEdit:
render() {
const { attributes, setAttributes } = this.props;
console.log(this.props.posts);
...
}Pidä silmällä konsolivirheenkorjausta. Saatat huomata, että tämä kirjautuu kahdesti; ensin nullja sitten joskus myöhemmin se kirjaa joukon viestejä. Tämä johtuu siitä, että viestien kysely tapahtuu asynkronisesti. Komponenttimme renderöidään ensin ennen vastausta, jolloin props.postson null. Kun saamme vastauksen, komponenttimme hahmonnetaan uudelleen rekvisiitta täytettynä. Sinun tulee aina muistaa ottaa huomioon tämä lyhyt aika ilman koodisi tietoja.
Lisää valinta näyttääksesi viestit
Valmistaudutaan täyttämään valitut palautetuilla viesteillä ja käytämme siihen WordPress-komponenttia SelectControl. Komponentti SelectControlhyväksyy joukon vaihtoehtoja, joissa jokainen vaihtoehto on objekti, jolla on ominaisuudet valueja label.
Jos katsot konsolin kirjattua (toista) vastausta, voit nähdä, että saamme joukon post-objekteja. Jokainen viesti sisältää suurimman osan postauksen tiedoista, mutta valitun valinnan osalta meitä kiinnostaa vain postin tunnus arvona ja julkaisun otsikko otsikkona. Joten käymme läpi postspropan ja täytämme taulukkomuuttujan, jonka välitämme SelectControl. Älä unohda käsitellä pientä aikaväliä, jossa postsrekvisiitta on null. Siinä tapauksessa täytämme valintataulukon yhdellä vaihtoehdolla, jonka otsikko on "Ladataan…".
Huomaa, että meidän on viitattava viestin otsikkoon nimellä post.title.rendered. Voit etsiä itseäsi kirjautuneesta konsolista postsja nähdä, kuinka kunkin viestin tiedot on rakennettu.
Tämän jälkeen meidän on vain lisättävä SelectControlminne haluamme sen. Se voi olla itse lohkon sisällä (mieluiten muokkaustilan koodissa) tai Inspectorin sisällä.
Asetamme SelectControlviittaamaan attribuuttiin, selectedPostIdjonka määritimme edellisessä vaiheessa. Asetamme tallennetun arvon potkuriin valueja käsittelemme sen päivittämisen onChangepotkurissa – kuten olemme tehneet useaan otteeseen ennenkin. Varmistamme, että numero tallennetaan käyttämällä, parseInt()koska numerolla on selectedPostIdtyyppi number. Ja välitämme luodun valikoiman valintoja prop options.
Siinä todellakin kaikki! Jos noudatit edellisen vaiheen koodia, sinulla pitäisi jo olla koodi, joka lukee tallennetun viestitunnuksen ja näyttää sen!
Tietysti suosittelen, että toteutat viestien luettelon ja valinnan eri tavalla kuin pelkän valinnan. Tämä ei ole kaunis tai käyttäjäystävällinen ratkaisu, etenkään sivustoille, joilla on paljon viestejä. Kun puhutaan viestien määrästä, huomasitko, että valitsin getEntityRecords palauttaa vain enintään 10 viimeisintä viestiä? Tämä on getEntityRecordsin oletuskäyttäytyminen, mutta voimme muokata lähetyskyselyä välittämällä kolmannen parametrin.
Muokkaa getEntityRecords-kyselyä
Välittämällä objektin kolmantena parametrina getEntityRecordsille voimme muokata lähetyskyselyä. Kuten aiemmin mainittiin, valitettavasti asiakirjat getEntityRecordspuuttuvat. Mutta lukemalla koko verkkoa olen kerännyt luettelon mahdollisista kyselyargumenteista;
per_page: Aseta numero, jos haluat rajoittaa viestien määrää. Aseta arvoksi-1noutaaksesi enimmäismäärä 100. Oletus10.exclude: Sulje pois tietyt viestit kyselystä. Aseta viestitunnus tai numerojoukko useille viestitunnuksille.parent_exclude: Sulje pois tietyt vanhemman viestit. Aseta viestitunnukseksi tai useiden viestitunnusten joukkoon.orderby: Päätä viestien järjestys. Todennäköisesti voit käyttää samoja parametreja kuin WP_Query’s orderby. Voi olla esim. "menu_order".order: joko'asc'tai ‘desc'nousevassa tai laskevassa järjestyksessä.status: Suodata postin tilan mukaan. Voi olla merkkijono, merkkijono, jossa on useita pilkuilla erotettuja tiloja, tai joukko tilamerkkijonoja. Esim['publish', 'draft']. tiedustella sekä julkaistuja että laadittuja viestejä.categories: Suodata viestit tiettyjen luokkien mukaan. Anna luokkatunnus tai joukko luokkatunnuksia. Uskon, että tämä toimii vain viestiluokissa, ei muissa mukautetuissa taksonomioissa.tags: Suodata viestit tiettyjen tunnisteiden mukaan. Anna tunnistetunnus tai joukko tagitunnuksia. Toimii vain viestitunnisteille, ei muille mukautetuille taksonomioille.search: Lisää hakukysely (merkkijono).
Huomautus: Tämä ei ole tyhjentävä luettelo, ja se voi myös muuttua!
Muokataan kyselyämme. Haluamme tehdä kaksi asiaa; Ensin haluamme hakea kaikki viestit, ei vain 10 viimeisintä. Tätä varten tarjoamme -1. per_pageToiseksi haluamme sulkea nykyisen viestin pois viestiluettelosta antamalla nykyisen viestitunnuksen osoitteeseen exclude. Usein ei ole mitään järkeä näyttää viestin pikakuvaketta tai esikatselua itse nykyisestä viestistä.
Saatat ajatella; odota, miten saamme nykyisen viestitunnuksen? Älä unohda, että me korkeamman asteen komponentissa withSelectja selectvalitsimella pääsemme kaikkiin WordPressin ydintietovarastoihin. Nykyinen viestitunnus on luonnollinen asia tallentaa johonkin WordPressin ydinmyymälöistä. Sisältä core/editorlöydämme funktion getCurrentPostId().
Muokataan withSelectpalautusta tähän tapaan:
Yllä oleva muutos on melko itsestään selvä. Luomme kyselyobjektin ominaisuuksineen per_pageja excludevälitämme tämän kolmantena parametrina getEntityRecords(). Nyt props.postssisäisen FirstBlockEditkomponentin pitäisi luetella kaikki viestit, mutta sulkea pois nykyinen viesti.
Johtopäätös
Tämä viesti päättää Kuinka luoda mukautettuja Gutenberg-lohkoja opetusohjelmasarjan. Sarjan tarkoituksena oli käydä läpi omien mukautettujen lohkojen kehittämisen perusteet ja tarjota sinulle lähtökohta omien ja monimutkaisempien lohkojen kehittämiseen. Pidä ehdottomasti silmällä lisää Gutenbergiin liittyviä opetusohjelmia täältä. Ehkä löydät opetusohjelman, joka selittää tarkemmin jotain, mitä halusit tehdä itse!