Luo mukautettu Gutenberg-lohko – Osa 9: Dynaamiset lohkot ja PHP-renderöinti

Toistaiseksi olemme renderöineet lohkon tulosteen Javascriptissä. Dynaamisen sisällön, kuten viimeaikaisten viestien tai viestien näyttämisen, kanssa meidän on kuitenkin renderöitävä lohkon tulos PHP:ssä. Tässä viestissä opimme kuinka ja miksi.

Miksi meidän täytyy käsitellä dynaamisia lohkoja eri tavalla?

Jotkut esimerkit ovat ilmeisiä; lohko, joka näyttää luokan uusimmat viestit, on dynaaminen, koska viestit muuttuvat ajan myötä. Et valitse lohkon viestejä; Sen sijaan sinulla on luultavasti asetukset luokan valitsemiseksi, mitä tietoja kussakin viestissä näytetään, viestien lukumäärää, sarakkeiden lukumäärää ja niin edelleen. Joka kerta, kun WordPress lataa postauksen tällä lohkolla, sen täytyy kysellä WordPressistä tuolloin uusimmat viestit. Saman postauksen katsominen kuukauden kuluttua saattaa tuottaa erilaisia ​​tuloksia, vaikka itse lohkoa sisältävää viestiä ei ole päivitetty.

Mutta dynaamisten lohkojen tarve ei joskus ole niin ilmeinen. Voit kuvitella, että suositusviestilohko, jossa valitset yhden tietyn viestin näytettäväksi, ei välttämättä ole dynaaminen. Mutta se voi olla – ja sen pitäisi olla. Muista, että valitun postauksen otsikko, ote tai esitelty kuva voi päivittää milloin tahansa – ja tämän pitäisi näkyä lohkoissa, joissa tämä viesti on.

Jotta voit tehdä ei-dynaamisen lohkon yksittäisen viestin näyttämistä varten, sinun on tallennettava viestin tunnus, sen URL-osoite, esitellyn kuvan URL-osoite, katkelmamerkkijono tai mikä tahansa mitä tarvitset julkaisun esikatseluun, lohkon attribuutteihin. Ja tässä piilee ongelma. Jos päivität valitun postauksen suositeltua kuvaa, viesti, jossa on suositustekstilohko, ei päivitä automaattisesti määritteitään. Se säilyy vanhan esitellyn kuvan URL-osoitteen kanssa. Vain kun muokkaat viestiä lohkolla ja varmistat, että se tallentaa määritteet uudelleen päivitetyillä tiedoilla, lohko näyttää oikeat päivitetyt tiedot.

Joten aina kun käsittelemme dynaamista sisältöä – viestejä, luokkia tai mitä tahansa, mikä saattaa muuttua ajan myötä – käsittelemme dynaamisia lohkoja. Ja dynaamisille lohkoille meidän on käytettävä PHP:tä – palvelinpuolen koodia – lohkomme renderöimiseksi varmistaaksemme, että se hakee päivitetyt tiedot joka kerta, kun se hahmonnetaan.

Dynaamisten lohkojen muuttunut luonne editorissa

Kun alat kehittää dynaamisia lohkoja, lohkosi luonne editorissa muuttuu. Myös lohkosi edittoiminnon on usein oltava dynaaminen. Esimerkiksi suositeltua viestilohkoa varten sinun on haettava viestejä, joista valita, tai uusimpien uutisten lohkoa varten sinun on haettava luettelo luokista, joista käyttäjä voi valita.

On täysin mahdollista pyytää tietoja WordPressistä editorin sisältä tekemällä AJAX-pyyntöjä – joko käyttämällä paketteja ja komponentteja tai suorittamalla ne manuaalisesti WordPress REST API :lla. Riippumatta menetelmästä, jonka valitset, lohkon on käsiteltävä asynkroninen syöttövirta – aikajakso vastausta odotellessa.

Dynaamisen lohkon luomiseksi Gutenbergille on useita menetelmiä ja malleja. Useimmiten käytät React-mallia, jota kutsutaan korkeamman asteen komponenteiksi, joihin WordPress tarjoaa runsaasti toimintoja ja komponentteja.

Tarkastelemme seuraavassa opetusohjelman osassa, kuinka noutaa viestit ja kuinka noutaa luokkia lohkossamme. Toistaiseksi meidän on opittava saamaan PHP renderöimään lohkomme.

Lohkomme valmistaminen PHP-renderöintiä varten

Tärkein osa, joka meidän on tehtävä Javascriptissä, on savepalauttaa lohkon funktio null. Voit säilyttää alkuperäisen tulosteen, mutta kun kerromme WordPressin käyttämään PHP:tä lohkon renderöimiseen, tämä jätetään huomiotta. Muutamme toimintoa, jotta itselle ja muille olisi selvää, että lohkon tulosta ei käsitellä Javascriptissä save.

Älä unohda, että tallennustoiminnon muuttaminen rikkoo kaikki olemassa olevat lohkot. Lisää lohko uudelleen. Lohkon pitäisi toimia kuten ennenkin; asetusten kanssa ja attribuuttien päivittäminen. Se ei nyt vain tulosta mitään käyttöliittymään. Kommenttilohko on siellä, ja se tallentaa kaikki attribuutit JSONiin, mutta näkyvää HTML-koodia ei hahmonneta.

Kuitenkin; Jos jokin määritteistäsi käyttää sourceominaisuutta, sinun on muutettava tätä. Tätä ei tueta PHP:llä renderöidyissä lohkoissa, koska ne jäsennetään suoraan tallennuksen lähdöstä – johon nyt palaamme null. Käytämme lähdettä lohkomme toisessa RichText– kappaleessa. Tässä vaiheessa editori ei tallenna tähän laittamaasi RichTextollenkaan.

Joten jos käytät edelleen sourceattribuuttia myRichText, meidän on poistettava sourceja selectorominaisuudet varmistaaksemme, että attribuutit tallennetaan eikä niitä jäsennetä savefunktiosta:

attributes: {
    ...
    myRichText: {
        type: 'string',
    },
    ...

Tämän jälkeen lohkomme on valmis renderöitäväksi PHP:ssä. Voimme jättää Javascript-tiedostot (älä unohda rakentaa niitä) ja loput tehdään PHP:llä.

Lohkojen renderöinti PHP:ssä

Jotta WordPress voidaan käskeä renderöimään lohkon tulos PHP:ssä, lisäämme funktioon uuden argumentin register_block_type(). Meidän on lisättävä render_callbacktaulukkoon avain sen funktion arvolla, jonka sen pitäisi suorittaa.

PHP renderöintitoiminto

Määritetään funktio awp_myfirstblock_renderalempana functions.php(tai minne tahansa olet sijoittanut PHP-koodisi). Toimintomme saa kaksi parametria; soitamme heille $attrja $content.

function awp_myfirstblock_render($attr, $content) {
    // return the block's output here
}

Parametri $attron assosiatiivinen taulukko, jossa on kaikki tallennetut attribuutit. Toinen parametri, $content, on lohkomme sisällä oleville lohkoille. Tämä koskee vain lohkoja, jotka tukevat sisäkkäisiä lohkoja – kuten esimerkiksi Sarakkeet tai Kansi.

Toiminnolla ei koskaan pitäisi olla echomitään vikaa. Kaikki tulosteet on palautettava, joten sinun on muodostettava merkkijono ja palautettava se lopussa.

Attribuuteissa on tärkeää muistaa, että vain tallennetut attribuutit näkyvät funktion ensimmäisessä parametrissa. Jos attribuuttia ei koskaan varsinaisesti muutettu ja tallennettu – eli vain luotaen sen default, attribuuttia ei sisällytetä PHP-funktiollemme ollenkaan.

Sinun on käsiteltävä tämä ongelma joko aina tarkistamalla if (isset($attr['...']))tai suositeltavalla tavalla: määrittämällä attribuutit register_block_type()kutsussamme. Voimme tarjota toisen avaimen, attributesja asettaa sen arvon taulukkoon, jossa on kaikki attribuutit, jotka haluamme poimia lohkostamme. Rakenteen tulee olla identtinen Javascriptissä määrittämäsi rakenteen kanssa, mutta Javascript-objektin sijasta tarvitset sen PHP-taulukossa. Tämä voi olla hieman hankalaa määrittää samat attribuutit uudelleen, mutta älykkäällä koodieditorilla pitäisi olla melko nopea kopioida+liitä ja monirivinen muokata se PHP:hen.

Lisäämme renderöintifunktion attribuutteja

Lisätään uusi attributeselementti register_block_type()ja liitetään täsmälleen samat attribuutit, jotka määritimme Javascript-tiedostossamme:

Muista, että jos määrität a defaultkaikille määritteille, funktiosi $attrparametrin tulee aina sisältää kaikki attribuutit. Esimerkiksi textAlignmentyllä oleva attribuutti on olemassa vain, $attrjos sitä on muutettu – ja sinun on tarkistettava isset($attr['textAlignment']).

Valitettavasti tällä hetkellä on kaksi asiaa, joita et saa käsiksi PHP-lohkon renderöinnillä. Yksi on classNamerekvisiitta – joten sinun on rakennettava kääreluokka (jos haluat) itse. Toinen on supportominaisuus lohkojen kohdistusta varten. Tällä hetkellä WordPress ei tue tätä ominaisuutta dynaamisissa lohkoissa. Emme saa käsiinsä valitun lohkokohdistuksen arvoa, ellemme muuta sitä attribuutiksi ja käsittele sitä manuaalisesti Javascriptissä.

Mitä tulee funktion HTML-tulostukseen, tämä on täysin sinun päätettävissäsi!

PHP-renderöinnin pyytäminen sisäeditorista

On mahdollista pyytää lohkomme PHP-renderöintiä editorissa. Tämä on hyödyllistä, jos haluat esikatsella lohkon tulosta editorissa. ServerSideRenderVoimme tehdä tämän wp.editorpaketista kutsutulla komponentilla .

Rekvisiittana ServerSideRendersinun on määriteltävä kaikki attribuutit, jotka haluat välittää. Vähintäänkin sinun on annettava lohkon nimi rekvisiittalle block, jotta WordPress tietää, mitä renderöintimenetelmää etsiä. Tämä on käytettävissäsi props.nametoiminnossa edit. Sinun on myös annettava kaikki tarvittavat attribuutit attributes. Halutessasi voit lisätä myös tänne muokattuja muuttujia attribuuttien ulkopuolelle. Muista vain, että tämä toimii vain sisäisessä editorissa, ei käyttöliittymässä.

Et voi käyttää ServerSideRenderlohkon savetoiminnossa. Funktiosi saveon silti palattava null.

Toteutetaan ServerSideRenderlohkossamme nähdäksesi sen käytännössä.

ServerSideRenderin käyttäminen lohkon esikatselu-/muokkaustilassa

Jos noudatit edellistä vaihetta, jossa teimme esikatselu/muokkaustilan vaihtajan lohkollemme, voimme nyt käyttää ServerSideRenderlohkon esikatselun hahmontamiseen PHP:stä, kun vaihdamme esikatselutilaan.

Ensin meidän on muistettava tuhota ServerSideRenderyläreunassa:

const { ServerSideRender } = wp.editor;

Jos muistat edellisestä vaiheesta, käytimme komponentteja Disabledja/tai Placeholderesikatselun pitämiseen. Käytön ongelmana Placeholderon, että saamme ei-toivottua tyyliä tuotoksellemme. Korvataan. Placeholder_ ServerSideRenderVoit halutessasi säilyttää Disabledkomponentin varmistaaksesi, ettei sen sisältö ole napsautettavaa tai vedettävää.

Koodissa lohkon renderöimiseksi, kun attribuutti editModeon epätosi, teemme:

Nyt työkalupalkin mukautettu painike näyttää PHP-tuloksen, kun siirrymme esikatselutilaan. Tulosteen tulee olla identtinen, kun katsotaan viestiä etuosasta. Tämä on hyvä tapa varmistaa, että tulos on identtinen sekä editorissa että käyttöliittymässä.

Esimerkki: Dynaaminen lohko, joka näyttää valitun viestin

PHP-renderöintitoiminnon tulos voi olla mitä tahansa, ja sinulla on täysi pääsy kaikkiin WordPress-toimintoihin. Oletetaan lohko, jossa viestitunnus tallennetaan attribuutissa. PHP – render_callbackfunktiossa voit kysyä viestiä tunnuksesta ja tulostaa sen tiedot. Sen pitäisi olla melko itsestään selvää, kuinka tämä tehdään, mutta tässä on nopea esimerkki.

HUOM: Tässä esimerkissä lisäämme yksinkertaisesti tekstisyötteen editoriin postauksen tunnuksen manuaalista syöttämistä varten. Tämä ei ole kovin intuitiivinen ja käyttäjäystävällinen ratkaisu postauksen valitsemiseen – mutta tämän opimme seuraavassa vaiheessa. Painopiste on tässä PHP-osassa valitun viestin hahmontamisessa.

Lisätään selectedPostIdtyypin numero attribuutti:

attributes: {
    selectedPostId: {
        type: 'number'
    }
}

Ja jonnekin lohkomme editfunktion sisään lisäämme TextControlkomponentin. Se voi olla missä haluat – korttelin sisällä tai Inspectorissa.

Huomaa, että olen erityisen huolellinen varmistaakseni, että syöte tallentaa määritteen oikein numerona muuntamalla sen kokonaisluvuksi käyttämällä parseInt(). Vaikka asetimme tyypin prop typearvoksi numbernumerosyötteen renderöimiseksi, muuttunut arvo tulkitaan silti merkkijonoksi. WordPress ei tallenna attribuuttiasi, jos se on väärässä muodossa.

Älä unohda lisätä uutta attribuuttia ServerSideRenderkomponenttiin, jos sinulla on sellainen:

PHP osa

Sen olisi pitänyt hoitaa Javascript-osa. Siirrytään PHP:hen. Ensin meidän on lisättävä uusi selectedPostIdattribuutti attributestaulukkoon register_block_type():

render_callbackToiminnossa voimme nyt käyttää viestitunnusta $attr['selectedPostId']. Voimme tällä suorittaa yksinkertaisen get_post()ja tulostaa viestin tiedot; sen linkki ja otsikko:

Tämä on hyvin perusesimerkki, joka on tarkoitettu ponnahduslautana sinulle kehittyneemmän ja mukautetun koodin kirjoittamiseen.

Nyt kun tiedämme kuinka käsitellä dynaamisten lohkojen renderöintiä, seuraava askel on oppia tekemään myös editoriosasta intuitiivisempi. Seuraavassa vaiheessa keskitymme siihen, kuinka tehdä kyselyitä julkaisuista lohkoeditorissa ja tarjota käyttäjälle parempi tapa valita viesti.