{"id":233628,"date":"2023-02-19T18:12:00","date_gmt":"2023-02-19T15:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233628"},"modified":"2022-11-11T00:43:37","modified_gmt":"2022-11-10T21:43:37","slug":"luo-mukautettu-gutenberg-lohko-osa-9-dynaamiset-lohkot-ja-php-renderoeinti","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-9-dynaamiset-lohkot-ja-php-renderoeinti\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko – Osa 9: Dynaamiset lohkot ja PHP-render\u00f6inti"},"content":{"rendered":"\n

Toistaiseksi olemme render\u00f6ineet lohkon tulosteen Javascriptiss\u00e4. Dynaamisen sis\u00e4ll\u00f6n, kuten viimeaikaisten viestien tai viestien n\u00e4ytt\u00e4misen, kanssa meid\u00e4n on kuitenkin render\u00f6it\u00e4v\u00e4 lohkon tulos PHP:ss\u00e4. T\u00e4ss\u00e4 viestiss\u00e4 opimme kuinka ja miksi.<\/p>\n

Miksi meid\u00e4n t\u00e4ytyy k\u00e4sitell\u00e4 dynaamisia lohkoja eri tavalla?<\/h2>\n

Jotkut esimerkit ovat ilmeisi\u00e4; lohko, joka n\u00e4ytt\u00e4\u00e4 luokan uusimmat viestit, on dynaaminen, koska viestit muuttuvat ajan my\u00f6t\u00e4. Et valitse lohkon viestej\u00e4; Sen sijaan sinulla on luultavasti asetukset luokan valitsemiseksi, mit\u00e4 tietoja kussakin viestiss\u00e4 n\u00e4ytet\u00e4\u00e4n, viestien lukum\u00e4\u00e4r\u00e4\u00e4, sarakkeiden lukum\u00e4\u00e4r\u00e4\u00e4 ja niin edelleen. Joka kerta, kun WordPress lataa postauksen t\u00e4ll\u00e4 lohkolla, sen t\u00e4ytyy kysell\u00e4 WordPressist\u00e4 tuolloin uusimmat viestit. Saman postauksen katsominen kuukauden kuluttua saattaa tuottaa erilaisia \u200b\u200btuloksia, vaikka itse lohkoa sis\u00e4lt\u00e4v\u00e4\u00e4 viesti\u00e4 ei ole p\u00e4ivitetty.<\/p>\n

Mutta dynaamisten lohkojen tarve ei joskus ole niin ilmeinen. Voit kuvitella, ett\u00e4 suositusviestilohko, jossa valitset yhden tietyn viestin n\u00e4ytett\u00e4v\u00e4ksi, ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 ole dynaaminen. Mutta se voi olla – ja sen pit\u00e4isi olla. Muista, ett\u00e4 valitun postauksen otsikko, ote tai esitelty kuva voi p\u00e4ivitt\u00e4\u00e4 milloin tahansa \u2013 ja t\u00e4m\u00e4n pit\u00e4isi n\u00e4ky\u00e4 lohkoissa, joissa t\u00e4m\u00e4 viesti on.<\/p>\n

Jotta voit tehd\u00e4 ei-dynaamisen lohkon yksitt\u00e4isen viestin n\u00e4ytt\u00e4mist\u00e4 varten, sinun on tallennettava viestin tunnus, sen URL-osoite, esitellyn kuvan URL-osoite, katkelmamerkkijono tai mik\u00e4 tahansa mit\u00e4 tarvitset julkaisun esikatseluun, lohkon attribuutteihin. Ja t\u00e4ss\u00e4 piilee ongelma. Jos p\u00e4ivit\u00e4t valitun postauksen suositeltua kuvaa, viesti, jossa on suositustekstilohko, ei p\u00e4ivit\u00e4 automaattisesti m\u00e4\u00e4ritteit\u00e4\u00e4n. Se s\u00e4ilyy vanhan esitellyn kuvan URL-osoitteen kanssa. Vain kun muokkaat viesti\u00e4 lohkolla ja varmistat, ett\u00e4 se tallentaa m\u00e4\u00e4ritteet uudelleen p\u00e4ivitetyill\u00e4 tiedoilla, lohko n\u00e4ytt\u00e4\u00e4 oikeat p\u00e4ivitetyt tiedot.<\/p>\n

Joten aina kun k\u00e4sittelemme dynaamista sis\u00e4lt\u00f6\u00e4 \u2013 viestej\u00e4, luokkia tai mit\u00e4 tahansa, mik\u00e4 saattaa muuttua ajan my\u00f6t\u00e4 \u2013 k\u00e4sittelemme dynaamisia lohkoja. Ja dynaamisille lohkoille meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 PHP:t\u00e4 – palvelinpuolen koodia – lohkomme render\u00f6imiseksi varmistaaksemme, ett\u00e4 se hakee p\u00e4ivitetyt tiedot joka kerta, kun se hahmonnetaan.<\/p>\n

Dynaamisten lohkojen muuttunut luonne editorissa<\/h2>\n

Kun alat kehitt\u00e4\u00e4 dynaamisia lohkoja, lohkosi luonne editorissa muuttuu. My\u00f6s lohkosi edit<\/code>toiminnon on usein oltava dynaaminen. Esimerkiksi suositeltua viestilohkoa varten sinun on haettava viestej\u00e4, joista valita, tai uusimpien uutisten lohkoa varten sinun on haettava luettelo luokista, joista k\u00e4ytt\u00e4j\u00e4 voi valita.<\/p>\n

On t\u00e4ysin mahdollista pyyt\u00e4\u00e4 tietoja WordPressist\u00e4 editorin sis\u00e4lt\u00e4 tekem\u00e4ll\u00e4 AJAX-pyynt\u00f6j\u00e4 \u2013 joko k\u00e4ytt\u00e4m\u00e4ll\u00e4 paketteja ja komponentteja tai suorittamalla ne manuaalisesti WordPress REST API<\/a> :lla. Riippumatta menetelm\u00e4st\u00e4, jonka valitset, lohkon on k\u00e4sitelt\u00e4v\u00e4 asynkroninen sy\u00f6tt\u00f6virta \u2013 aikajakso vastausta odotellessa.<\/p>\n

Dynaamisen lohkon luomiseksi Gutenbergille on useita menetelmi\u00e4 ja malleja. Useimmiten k\u00e4yt\u00e4t React-mallia, jota kutsutaan korkeamman asteen komponenteiksi<\/a>, joihin WordPress tarjoaa runsaasti toimintoja ja komponentteja.<\/p>\n

Tarkastelemme seuraavassa opetusohjelman osassa, kuinka noutaa viestit ja kuinka noutaa luokkia lohkossamme. Toistaiseksi meid\u00e4n on opittava saamaan PHP render\u00f6im\u00e4\u00e4n lohkomme.<\/p>\n

Lohkomme valmistaminen PHP-render\u00f6inti\u00e4 varten<\/h2>\n

T\u00e4rkein osa, joka meid\u00e4n on teht\u00e4v\u00e4 Javascriptiss\u00e4, on save<\/code>palauttaa lohkon funktio null<\/code>. Voit s\u00e4ilytt\u00e4\u00e4 alkuper\u00e4isen tulosteen, mutta kun kerromme WordPressin k\u00e4ytt\u00e4m\u00e4\u00e4n PHP:t\u00e4 lohkon render\u00f6imiseen, t\u00e4m\u00e4 j\u00e4tet\u00e4\u00e4n huomiotta. Muutamme toimintoa, jotta itselle ja muille olisi selv\u00e4\u00e4, ett\u00e4 lohkon tulosta ei k\u00e4sitell\u00e4 Javascriptiss\u00e4 save<\/code>.<\/p>\n

registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    ...\n    edit: FirstBlockEdit,\n    save:() => { return null }\n});<\/code><\/pre>\n
\u00c4l\u00e4 unohda, ett\u00e4 tallennustoiminnon muuttaminen rikkoo kaikki olemassa olevat lohkot. Lis\u00e4\u00e4 lohko uudelleen. Lohkon pit\u00e4isi toimia kuten ennenkin; asetusten kanssa ja attribuuttien p\u00e4ivitt\u00e4minen. Se ei nyt vain tulosta mit\u00e4\u00e4n k\u00e4ytt\u00f6liittym\u00e4\u00e4n. Kommenttilohko on siell\u00e4, ja se tallentaa kaikki attribuutit JSONiin, mutta n\u00e4kyv\u00e4\u00e4 HTML-koodia ei hahmonneta.<\/p>\n
Kuitenkin; Jos jokin m\u00e4\u00e4ritteist\u00e4si k\u00e4ytt\u00e4\u00e4 source<\/code>ominaisuutta, sinun on muutettava t\u00e4t\u00e4. T\u00e4t\u00e4 ei tueta PHP:ll\u00e4 render\u00f6idyiss\u00e4 lohkoissa, koska ne j\u00e4sennet\u00e4\u00e4n suoraan tallennuksen l\u00e4hd\u00f6st\u00e4 \u2013 johon nyt palaamme null<\/code>. K\u00e4yt\u00e4mme l\u00e4hdett\u00e4 lohkomme toisessa RichText<\/code>– kappaleessa. T\u00e4ss\u00e4 vaiheessa editori ei tallenna t\u00e4h\u00e4n laittamaasi RichText<\/code>ollenkaan.<\/p>\n
Joten jos k\u00e4yt\u00e4t edelleen source<\/code>attribuuttia myRichText<\/code>, meid\u00e4n on poistettava source<\/code>ja selector<\/code>ominaisuudet varmistaaksemme, ett\u00e4 attribuutit tallennetaan eik\u00e4 niit\u00e4 j\u00e4sennet\u00e4 save<\/code>funktiosta:<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n    },\n    ...<\/code><\/pre>\n
T\u00e4m\u00e4n j\u00e4lkeen lohkomme on valmis render\u00f6it\u00e4v\u00e4ksi PHP:ss\u00e4. Voimme j\u00e4tt\u00e4\u00e4 Javascript-tiedostot (\u00e4l\u00e4 unohda rakentaa niit\u00e4) ja loput tehd\u00e4\u00e4n PHP:ll\u00e4.<\/p>\n
Lohkojen render\u00f6inti PHP:ss\u00e4<\/h2>\n
Jotta WordPress voidaan k\u00e4ske\u00e4 render\u00f6im\u00e4\u00e4n lohkon tulos PHP:ss\u00e4, lis\u00e4\u00e4mme funktioon uuden argumentin register_block_type()<\/code>. Meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 render_callback<\/code>taulukkoon avain sen funktion arvolla, jonka sen pit\u00e4isi suorittaa.<\/p>\n
add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n        'render_callback' => 'awp_myfirstblock_render'\n    ]);\n});<\/code><\/pre>\n
PHP render\u00f6intitoiminto<\/h3>\n
M\u00e4\u00e4ritet\u00e4\u00e4n funktio awp_myfirstblock_render<\/code>alempana functions.php<\/code>(tai minne tahansa olet sijoittanut PHP-koodisi). Toimintomme saa kaksi parametria; soitamme heille $attr<\/code>ja $content<\/code>.<\/p>\n
function awp_myfirstblock_render($attr, $content) {\n    \/\/ return the block's output here\n}<\/code><\/pre>\n
Parametri $attr<\/code>on assosiatiivinen taulukko, jossa on kaikki tallennetut attribuutit. Toinen parametri, $content<\/code>, on lohkomme sis\u00e4ll\u00e4 oleville lohkoille. T\u00e4m\u00e4 koskee vain lohkoja, jotka tukevat sis\u00e4kk\u00e4isi\u00e4 lohkoja \u2013 kuten esimerkiksi Sarakkeet tai Kansi.<\/p>\n
Toiminnolla ei koskaan pit\u00e4isi olla echo<\/code>mit\u00e4\u00e4n vikaa. Kaikki tulosteet on palautettava, joten sinun on muodostettava merkkijono ja palautettava se lopussa.<\/p>\n
Attribuuteissa on t\u00e4rke\u00e4\u00e4 muistaa, ett\u00e4 vain tallennetut attribuutit n\u00e4kyv\u00e4t funktion ensimm\u00e4isess\u00e4 parametrissa. Jos attribuuttia ei koskaan varsinaisesti muutettu ja tallennettu \u2013 eli vain luotaen sen default<\/code>, attribuuttia ei sis\u00e4llytet\u00e4 PHP-funktiollemme ollenkaan.<\/p>\n
Sinun on k\u00e4sitelt\u00e4v\u00e4 t\u00e4m\u00e4 ongelma joko aina tarkistamalla if (isset($attr['...']))<\/code>tai suositeltavalla tavalla: m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 attribuutit register_block_type()<\/code>kutsussamme. Voimme tarjota toisen avaimen, attributes<\/code>ja asettaa sen arvon taulukkoon, jossa on kaikki attribuutit, jotka haluamme poimia lohkostamme. Rakenteen tulee olla identtinen Javascriptiss\u00e4 m\u00e4\u00e4ritt\u00e4m\u00e4si rakenteen kanssa, mutta Javascript-objektin sijasta tarvitset sen PHP-taulukossa. T\u00e4m\u00e4 voi olla hieman hankalaa m\u00e4\u00e4ritt\u00e4\u00e4 samat attribuutit uudelleen, mutta \u00e4lykk\u00e4\u00e4ll\u00e4 koodieditorilla pit\u00e4isi olla melko nopea kopioida+liit\u00e4 ja monirivinen muokata se PHP:hen.<\/p>\n
Lis\u00e4\u00e4mme render\u00f6intifunktion attribuutteja<\/h3>\n
Lis\u00e4t\u00e4\u00e4n uusi attributes<\/code>elementti register_block_type()<\/code>ja liitet\u00e4\u00e4n t\u00e4sm\u00e4lleen samat attribuutit, jotka m\u00e4\u00e4ritimme Javascript-tiedostossamme:<\/p>\n
add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n        'render_callback' => 'awp_myfirstblock_render',\n        'attributes' => [\n            'myRichHeading' => [\n                'type' => 'string'\n            ],\n            'myRichText' => [\n                'type' => 'string'\n            ],\n            'textAlignment' => [\n                'type' => 'string',\n            ],\n            'toggle' => [\n                'type' => 'boolean',\n                'default' => true\n            ],\n            'favoriteAnimal' => [\n                'type' => 'string',\n                'default' => 'dogs'\n            ],\n            'favoriteColor' ==> [\n                'type' => 'string',\n                'default' => '#DDDDDD'\n            ],\n            'activateLasers' => [\n                'type' => 'boolean',\n                'default' => false\n            ],\n        ]\n    ]);\n});\n\u00a0\nfunction awp_myfirstblock_render($attr, $content) {\n    return '<div>'.$attr['favoriteColor'].'<\/div>';\n}<\/code><\/pre>\n
Muista, ett\u00e4 jos m\u00e4\u00e4rit\u00e4t a default<\/code>kaikille m\u00e4\u00e4ritteille, funktiosi $attr<\/code>parametrin tulee aina sis\u00e4lt\u00e4\u00e4 kaikki attribuutit. Esimerkiksi textAlignment<\/code>yll\u00e4 oleva attribuutti on olemassa vain, $attr<\/code>jos sit\u00e4 on muutettu \u2013 ja sinun on tarkistettava isset($attr['textAlignment'])<\/code>.<\/p>\n
Valitettavasti t\u00e4ll\u00e4 hetkell\u00e4 on kaksi asiaa, joita et saa k\u00e4siksi PHP-lohkon render\u00f6innill\u00e4<\/strong>. Yksi on className<\/code>rekvisiitta \u2013 joten sinun on rakennettava k\u00e4\u00e4reluokka (jos haluat) itse. Toinen on support<\/code>ominaisuus lohkojen kohdistusta varten. T\u00e4ll\u00e4 hetkell\u00e4 WordPress ei tue t\u00e4t\u00e4 ominaisuutta dynaamisissa lohkoissa. Emme saa k\u00e4siins\u00e4 valitun lohkokohdistuksen arvoa, ellemme muuta sit\u00e4 attribuutiksi ja k\u00e4sittele sit\u00e4 manuaalisesti Javascriptiss\u00e4.<\/p>\n
Mit\u00e4 tulee funktion HTML-tulostukseen, t\u00e4m\u00e4 on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si!<\/p>\n
PHP-render\u00f6innin pyyt\u00e4minen sis\u00e4editorista<\/h2>\n
On mahdollista pyyt\u00e4\u00e4 lohkomme PHP-render\u00f6inti\u00e4 editorissa. T\u00e4m\u00e4 on hy\u00f6dyllist\u00e4, jos haluat esikatsella lohkon tulosta editorissa. ServerSideRender<\/code>Voimme tehd\u00e4 t\u00e4m\u00e4n wp.editor<\/code>paketista kutsutulla komponentilla .<\/p>\n
Rekvisiittana ServerSideRender<\/code>sinun on m\u00e4\u00e4ritelt\u00e4v\u00e4 kaikki attribuutit, jotka haluat v\u00e4litt\u00e4\u00e4. V\u00e4hint\u00e4\u00e4nkin sinun on annettava lohkon nimi rekvisiittalle block<\/code>, jotta WordPress tiet\u00e4\u00e4, mit\u00e4 render\u00f6intimenetelm\u00e4\u00e4 etsi\u00e4. T\u00e4m\u00e4 on k\u00e4ytett\u00e4viss\u00e4si props.name<\/code>toiminnossa edit<\/code>. Sinun on my\u00f6s annettava kaikki tarvittavat attribuutit attributes<\/code>. Halutessasi voit lis\u00e4t\u00e4 my\u00f6s t\u00e4nne muokattuja muuttujia attribuuttien ulkopuolelle. Muista vain, ett\u00e4 t\u00e4m\u00e4 toimii vain sis\u00e4isess\u00e4 editorissa, ei k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
Et voi k\u00e4ytt\u00e4\u00e4 ServerSideRender<\/code>lohkon save<\/code>toiminnossa. Funktiosi save<\/code>on silti palattava null<\/code>.<\/p>\n
Toteutetaan ServerSideRender<\/code>lohkossamme n\u00e4hd\u00e4ksesi sen k\u00e4yt\u00e4nn\u00f6ss\u00e4.<\/p>\n
ServerSideRenderin k\u00e4ytt\u00e4minen lohkon esikatselu-\/muokkaustilassa<\/h3>\n
Jos noudatit edellist\u00e4 vaihetta, jossa teimme esikatselu\/muokkaustilan vaihtajan lohkollemme, voimme nyt k\u00e4ytt\u00e4\u00e4 ServerSideRender<\/code>lohkon esikatselun hahmontamiseen PHP:st\u00e4, kun vaihdamme esikatselutilaan.<\/p>\n
Ensin meid\u00e4n on muistettava tuhota ServerSideRender<\/code>yl\u00e4reunassa:<\/p>\n
const { ServerSideRender } = wp.editor;<\/code><\/pre>\n
Jos muistat edellisest\u00e4 vaiheesta, k\u00e4ytimme komponentteja Disabled<\/code>ja\/tai Placeholder<\/code>esikatselun pit\u00e4miseen. K\u00e4yt\u00f6n ongelmana Placeholder<\/code>on, ett\u00e4 saamme ei-toivottua tyyli\u00e4 tuotoksellemme. Korvataan. Placeholder<\/code>_ ServerSideRender<\/code>Voit halutessasi s\u00e4ilytt\u00e4\u00e4 Disabled<\/code>komponentin varmistaaksesi, ettei sen sis\u00e4lt\u00f6 ole napsautettavaa tai vedett\u00e4v\u00e4\u00e4.<\/p>\n
Koodissa lohkon render\u00f6imiseksi, kun attribuutti editMode<\/code>on ep\u00e4tosi, teemme:<\/p>\n
...\n{!this.state.editMode && \n    <ServerSideRender\n        block={this.props.name}\n        attributes={{ \n            myRichHeading: attributes.myRichHeading, \n            myRichText: attributes.myRichText, \n            textAlignment: attributes.textAlignment, \n            toggle: attributes.toggle, \n            favoriteAnimal: attributes.favoriteAnimal, \n            favoriteColor: attributes.favoriteColor,\n            activateLasers: attributes.activateLasers\n        }}\n    \/>\n}\n...<\/code><\/pre>\n
Nyt ty\u00f6kalupalkin mukautettu painike n\u00e4ytt\u00e4\u00e4 PHP-tuloksen, kun siirrymme esikatselutilaan. Tulosteen tulee olla identtinen, kun katsotaan viesti\u00e4 etuosasta. T\u00e4m\u00e4 on hyv\u00e4 tapa varmistaa, ett\u00e4 tulos on identtinen sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
Esimerkki: Dynaaminen lohko, joka n\u00e4ytt\u00e4\u00e4 valitun viestin<\/h2>\n
PHP-render\u00f6intitoiminnon tulos voi olla mit\u00e4 tahansa, ja sinulla on t\u00e4ysi p\u00e4\u00e4sy kaikkiin WordPress-toimintoihin. Oletetaan lohko, jossa viestitunnus tallennetaan attribuutissa. PHP – render_callback<\/code>funktiossa voit kysy\u00e4 viesti\u00e4 tunnuksesta ja tulostaa sen tiedot. Sen pit\u00e4isi olla melko itsest\u00e4\u00e4n selv\u00e4\u00e4, kuinka t\u00e4m\u00e4 tehd\u00e4\u00e4n, mutta t\u00e4ss\u00e4 on nopea esimerkki.<\/p>\n
HUOM<\/strong>: T\u00e4ss\u00e4 esimerkiss\u00e4 lis\u00e4\u00e4mme yksinkertaisesti tekstisy\u00f6tteen editoriin postauksen tunnuksen manuaalista sy\u00f6tt\u00e4mist\u00e4 varten. T\u00e4m\u00e4 ei ole kovin intuitiivinen ja k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen ratkaisu postauksen valitsemiseen \u2013 mutta t\u00e4m\u00e4n opimme seuraavassa vaiheessa. Painopiste on t\u00e4ss\u00e4 PHP-osassa valitun viestin hahmontamisessa.<\/p>\n
Lis\u00e4t\u00e4\u00e4n selectedPostId<\/code>tyypin numero attribuutti:<\/p>\n
attributes: {\n    selectedPostId: {\n        type: 'number'\n    }\n}<\/code><\/pre>\n
Ja jonnekin lohkomme edit<\/code>funktion sis\u00e4\u00e4n lis\u00e4\u00e4mme TextControl<\/code>komponentin. Se voi olla miss\u00e4 haluat \u2013 korttelin sis\u00e4ll\u00e4 tai Inspectorissa.<\/p>\n
<TextControl \n    label={__(\"Type in post ID\", 'awhitepixel')}\n    type=\"number\"\n    value={attributes.selectedPostId}\n    onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\n
Huomaa, ett\u00e4 olen erityisen huolellinen varmistaakseni, ett\u00e4 sy\u00f6te tallentaa m\u00e4\u00e4ritteen oikein numerona muuntamalla sen kokonaisluvuksi k\u00e4ytt\u00e4m\u00e4ll\u00e4 parseInt()<\/code>. Vaikka asetimme tyypin prop type<\/code>arvoksi number<\/code>numerosy\u00f6tteen render\u00f6imiseksi, muuttunut arvo tulkitaan silti merkkijonoksi. WordPress ei tallenna attribuuttiasi, jos se on v\u00e4\u00e4r\u00e4ss\u00e4 muodossa.<\/p>\n
\u00c4l\u00e4 unohda lis\u00e4t\u00e4 uutta attribuuttia ServerSideRender<\/code>komponenttiin, jos sinulla on sellainen:<\/p>\n
<ServerSideRender\n    block={this.props.name}\n    attributes={{ \n        selectedPostId: attributes.selectedPostId,\n        ...<\/code><\/pre>\n
PHP osa<\/h3>\n
Sen olisi pit\u00e4nyt hoitaa Javascript-osa. Siirryt\u00e4\u00e4n PHP:hen. Ensin meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 uusi selectedPostId<\/code>attribuutti attributes<\/code>taulukkoon register_block_type()<\/code>:<\/p>\n
register_block_type('awp\/firstblock', [\n    'editor_script' => 'awp-myfirstblock-js',\n    'render_callback' => 'awp_myfirstblock_render',\n    'attributes' => [\n        'selectedPostId' => [\n            'type' => 'number',\n            'default' => 0\n        ],\n        ...\n    ]\n]);<\/code><\/pre>\n
render_callback<\/code>Toiminnossa voimme nyt k\u00e4ytt\u00e4\u00e4 viestitunnusta $attr['selectedPostId']<\/code>. Voimme t\u00e4ll\u00e4 suorittaa yksinkertaisen get_post()<\/code>ja tulostaa viestin tiedot; sen linkki ja otsikko:<\/p>\n
function awp_myfirstblock_render($attr, $content) {\n    $str = '';\n    if ($attr['selectedPostId'] > 0) {\n        $post = get_post($attr['selectedPostId']);\n        if (!$post) {\n            return $str;\n        }\n        $str = '<div class=\"awp-myfirstblock\">';\n        $str .= '<a href=\"'. get_the_permalink($post). '\">';\n        $str .= '<h3>'. get_the_title($post). '<\/h3>';\n        $str .= '<\/a>';\n        $str .= '<\/div>';\n    }\n    return $str;\n}<\/code><\/pre>\n
T\u00e4m\u00e4 on hyvin perusesimerkki, joka on tarkoitettu ponnahduslautana sinulle kehittyneemm\u00e4n ja mukautetun koodin kirjoittamiseen.<\/p>\n
Nyt kun tied\u00e4mme kuinka k\u00e4sitell\u00e4 dynaamisten lohkojen render\u00f6inti\u00e4, seuraava askel on oppia tekem\u00e4\u00e4n my\u00f6s editoriosasta intuitiivisempi. Seuraavassa vaiheessa keskitymme siihen, kuinka tehd\u00e4 kyselyit\u00e4 julkaisuista lohkoeditorissa ja tarjota k\u00e4ytt\u00e4j\u00e4lle parempi tapa valita viesti.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Dynaamisen lohkosis\u00e4ll\u00f6n, kuten viimeaikaisten viestien tai viestien n\u00e4ytt\u00e4misen, kanssa meid\u00e4n on render\u00f6it\u00e4v\u00e4 lohkon tulos PHP:ss\u00e4. T\u00e4ss\u00e4 viestiss\u00e4 opimme kuinka ja miksi.<\/p>\n","protected":false},"author":1,"featured_media":152680,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,938,938,895,1110,843,803,803,843,864,864],"tags":[1166],"class_list":{"0":"post-233628","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-gutenberg-5","11":"category-n-a","12":"category-opetusohjelmia","13":"category-php-5","16":"category-wordpress-5","18":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233628"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/152680"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}