Siiani oleme renderdanud ploki väljundi Javascriptis. Dünaamilise sisu puhul, nagu hiljutised postitused või postituse kuvamine, peame aga ploki väljundi PHP-s renderdama. Sellest postitusest õpime, kuidas ja miks.
Miks peame dünaamilisi plokke erinevalt käsitlema?
Mõned näited on ilmsed; plokk, mis kuvab kategooria viimaseid postitusi, on dünaamiline, kuna postitused muutuvad aja jooksul. Te ei vali ploki postitusi; selle asemel on teil tõenäoliselt seaded kategooria valimiseks, iga postituse kohta kuvatava teabe, postituste arvu, veergude arvu jne jaoks. Iga kord, kui WordPress laadib selle plokiga postituse, peab ta sel ajal WordPressist uusimate postituste jaoks päringu tegema. Sama postituse vaatamine järgmisel kuul võib anda teistsuguseid tulemusi, kuigi blokiga postitust pole värskendatud.
Kuid dünaamiliste plokkide vajadus pole mõnikord nii ilmne. Võite ette kujutada, et esiletoodud postituste plokk, kus valite selle kuvamiseks ühe kindla postituse, ei pruugi olla dünaamiline. Aga see võib olla – ja peaks olema. Pidage meeles, et valitud postitus võib oma pealkirja, väljavõtet või esiletoodud pilti igal ajal värskendada – ja see peaks kajastuma seda postitust sisaldavates plokkides.
Ühe postituse kuvamiseks mittedünaamilise ploki loomiseks peate ploki atribuutidesse salvestama postituse ID, selle URL-i, esiletoodud pildi URL-i, väljavõtte stringi või muu, mida vajate postituse eelvaate kuvamiseks. Ja siin peitubki probleem. Kui värskendate valitud postituse esiletoodud pilti, ei värskenda esiletõstetud postituse plokiga postitus automaatselt selle atribuute. See salvestatakse koos vana esiletoodud pildi URL-iga. Ainult siis, kui muudate postitust plokiga ja veenduge, et see salvestab atribuudid koos värskendatud teabega uuesti, kuvatakse plokis õige värskendatud teave.
Nii et kui käsitleme dünaamilist sisu – postitusi, kategooriaid või kõike, mis võib aja jooksul muutuda –, on tegemist dünaamiliste plokkidega. Ja dünaamiliste plokkide jaoks peame oma ploki renderdamiseks kasutama PHP-d – serveripoolset koodi – tagamaks, et see hangib värskendatud teabe iga kord, kui see renderdab.
Dünaamiliste plokkide olemus redaktoris
Kui hakkate dünaamilisi plokke arendama, muutub teie ploki olemus redaktoris. Teie ploki editfunktsioon peab sageli olema ka dünaamiline. Näiteks esiletõstetud postituste ploki jaoks peate hankima postitused, mille hulgast valida, või viimaste uudisteploki jaoks peate hankima kategooriate loendi, mille vahel kasutaja saab valida.
Täielikult on võimalik WordPressist teavet pärida redaktorist, tehes AJAX päringuid – kas pakette ja komponente kasutades või käsitsi WordPress REST API -ga teostades. Olenemata sellest, millist meetodit kasutate, peab plokk käsitlema asünkroonitud sisendvoogu – vastust ootama jäävat ajavahemikku.
Gutenbergi jaoks dünaamilise ploki loomiseks on mitu meetodit ja mustrit. Enamasti kasutate Reacti mustrit, mida nimetatakse kõrgema järgu komponentideks, mille jaoks WordPress pakub palju funktsioone ja komponente.
Järgmises õpetuse osas vaatame, kuidas postitusi tuua ja kategooriaid meie plokis tuua. Praegu peame õppima, kuidas panna PHP meie plokki renderdama.
Meie ploki valmistamine PHP renderdamiseks
Peamine osa, mida peame Javascriptis tegema, on ploki savefunktsiooni tagastamine null. Võite originaalväljundi alles jätta, kuid kui me ütleme WordPressile, et ta kasutaks ploki renderdamiseks PHP-d, siis seda ignoreeritakse. Et teha endale ja teistele selgeks, et ploki väljundit Javascriptis ei käsitleta, muudame savefunktsiooni.
Ärge unustage, et salvestamisfunktsiooni muutmine muudab kõik olemasolevad plokid katki. Lisage plokk uuesti. Plokk peaks töötama nagu varem; seadete ja atribuutide värskendamisega. Nüüd lihtsalt ei väljasta see eessüsteemis midagi. Kommentaariplokk on seal, salvestades kõik JSON-i atribuudid, kuid nähtavat HTML-i ei renderdata.
Kuid; kui mõni teie atribuutidest kasutab seda sourceatribuuti, peate seda muutma. Seda ei toetata PHP-ga renderdatud plokkide puhul, kuna need sõelutakse otse salvestuse väljundist – mille me nüüd tagasi pöördume null. Kasutame RichTextoma ploki teises allikas – lõigu jaoks. Sel hetkel ei salvesta toimetaja seda, mida te sellesse panite RichText.
Seega, kui kasutate endiselt sourceatribuuti myRichText, peame eemaldama atribuudid sourceja selectortagamaks, et atribuudid salvestatakse ja neid ei sõeluda savefunktsioonist:
attributes: {
...
myRichText: {
type: 'string',
},
...Pärast seda on meie plokk PHP-s renderdamiseks valmis. Javascripti failid saame jätta (ärge unustage seda ehitada) ja ülejäänu tehakse PHP-s.
Plokkide renderdamine PHP-s
Selleks, et käskida WordPressil ploki väljund PHP-s renderdada, lisame funktsioonile uue argumendi register_block_type(). Peame render_callbackmassiivile lisama võtme koos selle funktsiooni väärtusega, mida see peaks käivitama.
PHP renderdusfunktsioon
Määratleme funktsiooni awp_myfirstblock_renderallpool functions.php(või kuhu iganes olete oma PHP-koodi pannud). Meie funktsioon saab kaks parameetrit; me helistame neile $attrja $content.
function awp_myfirstblock_render($attr, $content) {
// return the block's output here
}Parameeter $attron assotsiatiivne massiiv koos kõigi salvestatud atribuutidega. Teine parameeter, $contenton meie ploki sees olevate plokkide jaoks. See kehtib ainult nende plokkide puhul, mis toetavad pesastatud plokke – mida näiteks veerud või kaaned teevad.
Funktsioon ei tohiks kunagi echomidagi välja kukkuda. Kogu väljund tuleb tagastada, nii et peate koostama stringi ja tagastama selle lõpus.
Midagi olulist atribuutide puhul meeles pidada on see, et funktsiooni esimeses parameetris kuvatakse ainult salvestatud atribuudid. Kui atribuuti tegelikult kunagi ei muudetud ega salvestatud – st lihtsalt tuginedes selle default, siis seda atribuuti meie PHP funktsiooni jaoks üldse ei kaasata.
Peate seda probleemi lahendama kas alati kontrollides if (isset($attr['...']))või eelistatud viisil: määratledes meie register_block_type()kõnes olevad atribuudid. Saame anda teise võtme attributesja määrata selle väärtuse massiivile, millel on kõik atribuudid, mida soovime oma plokist eraldada. Struktuur peaks olema identne Javascriptis määratletuga, kuid Javascripti objekti asemel vajate seda PHP massiivi. Samade atribuutide uuesti määratlemine võib olla pisut tülikas, kuid nutika koodiredaktoriga peaks selle kopeerimine+kleepimine ja mitmerealine muutmine PHP-sse üsna kiire.
Meie renderdusfunktsiooni atribuutide lisamine
Lisame uue attributeselemendi register_block_type()ja kleepime täpselt samadele atribuutidele, mille määratlesime oma Javascripti failis:
Pidage meeles, et kui määrate a defaultkõigi atribuutide jaoks, $attrpeaks teie funktsiooni parameeter alati sisaldama kõiki atribuute. Näiteks textAlignmentülaltoodud atribuut eksisteerib ainult siis, $attrkui seda muudeti – ja peate kontrollima isset($attr['textAlignment']).
Kahjuks on praegu kaks asja, millest te PHP-ploki renderdamisega aru ei saa. Üks on classNamerekvisiit – seega tuleb ümbrisklass (kui soovite) ise ehitada. Teine on supportplokkide joondamise omadus. Hetkel WordPress seda atribuuti dünaamilistes plokkides ei toeta. Me ei saa valitud ploki joonduse väärtust kätte, kui me ei muuda seda atribuudiks ja käsitleme seda käsitsi Javascriptis.
Funktsiooni HTML-väljundi osas on see täielikult teie otsustada!
PHP renderduse taotlemine sisemisest redaktorist
Redaktori sees on võimalik taotleda meie ploki PHP-renderdust. See on kasulik, kui soovite näha redaktoris ploki väljundi eelvaadet. Seda saame teha paketist kutsutud ServerSideRenderkomponendiga wp.editor.
Rekvisiidina ServerSideRenderpeate määratlema kõik atribuudid, mida soovite edasi anda. Peate rekvisiidile esitama vähemalt ploki nime block, et WordPress teaks, millist renderdamismeetodit otsida. See on teile props.namefunktsioonis saadaval edit. Samuti peate rekvisiidis esitama kõik vajalikud atribuudid attributes. Soovi korral saate siia lisada ka atribuutide väliseid kohandatud muutujaid. Pidage lihtsalt meeles, et see toimib ainult siseredaktoris, mitte kasutajaliideses.
Te ei saa kasutada ServerSideRenderploki savefunktsioonis. Teie savefunktsioon peab siiski tagastama null.
Rakendame ServerSideRenderoma plokis, et seda praktikas näha.
ServerSideRenderi kasutamine plokkide eelvaate/redigeerimisrežiimi jaoks
Kui järgisite eelmist sammu, kus tegime oma ploki jaoks eelvaate/redigeerimisrežiimi lüliti, saame nüüd kasutada ServerSideRendereelvaaterežiimi lülitumisel PHP-st ploki eelvaate renderdamist.
Kõigepealt peame meeles pidama ServerSideRenderülaosas destruktureerimist:
const { ServerSideRender } = wp.editor;Kui mäletate eelmisest sammust, kasutasime komponente Disabledja/või Placeholdereelvaate hoidmiseks. Kasutamise probleem Placeholderseisneb selles, et meie väljundile rakendatakse soovimatut stiili. Asendame. Placeholder_ ServerSideRenderSaate valida Disabledkomponendi allesjätmise tagamaks, et selle sisu pole klõpsatav ega lohistatav.
Koodi juures ploki renderdamiseks, kui atribuut editModeon vale, teeme järgmist:
Nüüd renderdab meie kohandatud nupp tööriistaribal PHP väljundi, kui lülitame eelvaaterežiimi. Väljund peaks olema identne, kui vaatate postitust esiküljel. See on hea komme tagada, et väljund oleks nii redaktoris kui ka kasutajaliideses identne.
Näide: dünaamiline plokk, mis näitab valitud postitust
Teie PHP renderdusfunktsiooni väljund võib olla ükskõik milline ja teil on täielik juurdepääs kõigile WordPressi funktsioonidele. Oletame plokki, kus postituse ID salvestatakse atribuudis. PHP funktsioonis render_callbacksaate ID-st postitust pärida ja selle teavet väljastada. See peaks olema üsna iseenesestmõistetav, kuidas seda teha, kuid siin on kiire näide.
NB! Selles näites lisame lihtsalt redaktorisse tekstisisestuse postituse ID käsitsi sisestamiseks. See ei ole väga intuitiivne ja kasutajasõbralik lahendus postituse valimiseks – aga seda õpime järgmises etapis. Siin keskendutakse valitud postituse renderdamise PHP osale.
Lisame atribuudi selectedPostIdtüübi number:
attributes: {
selectedPostId: {
type: 'number'
}
}Ja kuskil meie ploki editfunktsiooni sees lisame TextControlkomponendi. See võib olla kus iganes soovite – plokis või Inspektoris.
Pange tähele, et hoolitsen selle eest, et sisend salvestaks atribuudi õigesti numbrina, teisendades selle täisarvuks parseInt(). Kuigi määrasime numbrisisendi renderdamiseks tüübi prop typeväärtusele number, tõlgendatakse muudetud väärtust ikkagi stringina. WordPress ei salvesta teie atribuuti, kui see on vales vormingus.
Ärge unustage lisada oma ServerSideRenderkomponendile uut atribuuti, kui teil see on:
PHP osa
See oleks pidanud hoolitsema Javascripti osa eest. Liigume edasi PHP juurde. Kõigepealt peame massiivile selectedPostIdlisama uue atribuudi :attributes``register_block_type()
Funktsioonis render_callbackpääseme nüüd postituse ID-le juurde $attr['selectedPostId']. Sellega saame teha lihtsa get_post()ja väljastada postituse andmed; selle link ja pealkiri:
See on väga lihtne näide, mis on mõeldud hüppelauaks täpsema ja kohandatud koodi kirjutamiseks.
Nüüd, kui teame, kuidas dünaamiliste plokkide renderdamist käsitleda, on järgmine samm õppida, kuidas muuta ka redaktori osa intuitiivsemaks. Järgmises etapis keskendume sellele, kuidas teha postitusi plokiredaktorist päringuid ja pakkuda kasutajale paremat viisi postituse valimiseks.