{"id":233616,"date":"2023-02-19T18:12:00","date_gmt":"2023-02-19T15:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233616"},"modified":"2022-11-11T00:39:21","modified_gmt":"2022-11-10T21:39:21","slug":"skapa-anpassat-gutenberg-block-del-9-dynamiska-block-och-php-rendering","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-anpassat-gutenberg-block-del-9-dynamiska-block-och-php-rendering\/","title":{"rendered":"Skapa anpassat Gutenberg-block &#8211; Del 9: Dynamiska block och PHP-rendering"},"content":{"rendered":"\n<p>Hittills har vi renderat blockets utdata i Javascript. Men med dynamiskt inneh\u00e5ll som senaste inl\u00e4gg eller visning av ett inl\u00e4gg m\u00e5ste vi rendera blockets utdata i PHP. I det h\u00e4r inl\u00e4gget kommer vi att l\u00e4ra oss hur och varf\u00f6r.<\/p>\n<h2>Varf\u00f6r beh\u00f6ver vi hantera dynamiska block annorlunda?<\/h2>\n<p>N\u00e5gra exempel \u00e4r uppenbara; ett block som visar de senaste inl\u00e4ggen i en kategori \u00e4r dynamiskt eftersom inl\u00e4ggen kommer att f\u00f6r\u00e4ndras \u00f6ver tiden. Du v\u00e4ljer inte inl\u00e4ggen i blocket; ist\u00e4llet kommer du f\u00f6rmodligen att ha inst\u00e4llningar f\u00f6r att v\u00e4lja kategori, vilken information som ska visas f\u00f6r varje inl\u00e4gg, antalet inl\u00e4gg, antalet kolumner och s\u00e5 vidare. Varje g\u00e5ng WordPress laddar ett inl\u00e4gg med detta block m\u00e5ste det fr\u00e5ga WordPress vid den tidpunkten f\u00f6r de senaste inl\u00e4ggen. Att titta p\u00e5 samma inl\u00e4gg m\u00e5naden efter kan ge olika resultat \u00e4ven om inl\u00e4gget med sj\u00e4lva blocket inte har uppdaterats.<\/p>\n<p>Men n\u00f6dv\u00e4ndigheten av dynamiska block \u00e4r ibland inte s\u00e5 uppenbar. Du kanske f\u00f6rest\u00e4ller dig ett utvalt inl\u00e4ggsblock d\u00e4r du v\u00e4ljer ett specifikt inl\u00e4gg f\u00f6r att visa det, inte n\u00f6dv\u00e4ndigtvis \u00e4r dynamiskt. Men det kan vara \u2013 och borde vara. Kom ih\u00e5g att det valda inl\u00e4gget kan uppdatera sin titel, utdrag eller utvalda bild n\u00e4r som helst \u2013 och det b\u00f6r \u00e5terspeglas i blocken som inneh\u00e5ller detta inl\u00e4gg.<\/p>\n<p>F\u00f6r att g\u00f6ra ett icke-dynamiskt block f\u00f6r att visa ett enskilt inl\u00e4gg m\u00e5ste du spara inl\u00e4ggets ID, dess URL, webbadress f\u00f6r utvald bild, utdragsstr\u00e4ng eller vad du nu beh\u00f6ver f\u00f6r att f\u00f6rhandsgranska inl\u00e4gget, i blockets attribut. Och h\u00e4r ligger problemet. Om du uppdaterar det valda inl\u00e4ggets utvalda bild kommer inl\u00e4gget med det utvalda inl\u00e4ggsblocket inte automatiskt att uppdatera dess attribut. Den f\u00f6rblir sparad med den gamla utvalda bildens URL. F\u00f6rst n\u00e4r du redigerar inl\u00e4gget med blocket, och ser till att det sparar attributen med den uppdaterade informationen, kommer blocket att visa den korrekta uppdaterade informationen.<\/p>\n<p>S\u00e5 n\u00e4rhelst vi hanterar dynamiskt inneh\u00e5ll \u2013 inl\u00e4gg, kategorier eller n\u00e5got som kan f\u00f6r\u00e4ndras \u00f6ver tid \u2013 har vi att g\u00f6ra med dynamiska block. Och f\u00f6r dynamiska block m\u00e5ste vi anv\u00e4nda PHP \u2013 kod p\u00e5 serversidan \u2013 f\u00f6r att rendera v\u00e5rt block f\u00f6r att s\u00e4kerst\u00e4lla att det kommer att h\u00e4mta uppdaterad information varje g\u00e5ng det renderas.<\/p>\n<h2>Den f\u00f6r\u00e4ndrade karakt\u00e4ren hos dynamiska block i editorn<\/h2>\n<p>N\u00e4r du b\u00f6rjar utveckla dynamiska block kommer karakt\u00e4ren p\u00e5 ditt block i editorn att \u00e4ndras. Ditt blocks <code>edit<\/code>funktion beh\u00f6ver ofta ocks\u00e5 vara dynamisk. Till exempel f\u00f6r ett utvalt inl\u00e4ggsblock m\u00e5ste du h\u00e4mta inl\u00e4gg att v\u00e4lja mellan, eller f\u00f6r ett senaste nyhetsblock m\u00e5ste du h\u00e4mta en lista med kategorier som anv\u00e4ndaren kan v\u00e4lja mellan.<\/p>\n<p>Det \u00e4r fullt m\u00f6jligt att beg\u00e4ra information fr\u00e5n WordPress inifr\u00e5n editorn genom att g\u00f6ra AJAX-f\u00f6rfr\u00e5gningar \u2013 antingen genom att anv\u00e4nda paket och komponenter eller utf\u00f6ra dem manuellt med <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress REST API<\/a>. Oavsett vilken metod du v\u00e4ljer m\u00e5ste ditt block hantera den asynkroniserade str\u00f6mmen av input \u2013 tidsramen medan du v\u00e4ntar p\u00e5 ett svar.<\/p>\n<p>Det finns flera metoder och m\u00f6nster f\u00f6r att skapa ett dynamiskt block f\u00f6r Gutenberg. Vanligtvis anv\u00e4nder du ett React-m\u00f6nster som kallas <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">komponenter av h\u00f6gre ordning<\/a> d\u00e4r WordPress tillhandah\u00e5ller massor av funktioner och komponenter f\u00f6r.<\/p>\n<p>Vi kommer att titta p\u00e5 hur man h\u00e4mtar inl\u00e4gg och hur man h\u00e4mtar kategorier i v\u00e5rt block i n\u00e4sta handledningsdel. F\u00f6r nu m\u00e5ste vi l\u00e4ra oss hur vi f\u00e5r PHP att rendera v\u00e5rt block.<\/p>\n<h2>G\u00f6r v\u00e5rt block redo f\u00f6r PHP-rendering<\/h2>\n<p>Huvuddelen vi beh\u00f6ver g\u00f6ra i Javascript \u00e4r att f\u00e5 blockets <code>save<\/code>funktion att returnera <code>null<\/code>. Du kan beh\u00e5lla originalutg\u00e5ngen, men n\u00e4r vi s\u00e4ger \u00e5t WordPress att anv\u00e4nda PHP f\u00f6r att rendera blocket kommer detta att ignoreras. F\u00f6r att g\u00f6ra det klart f\u00f6r oss sj\u00e4lva och andra att blockets utdata inte hanteras i Javascript kommer vi att \u00e4ndra <code>save<\/code>funktionen.<\/p>\n<pre><code>registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    ...\n    edit: FirstBlockEdit,\n    save:() =&gt; { return null }\n});<\/code><\/pre>\n<p>Gl\u00f6m inte att om du \u00e4ndrar sparfunktionen kommer alla befintliga block att g\u00e5 s\u00f6nder. L\u00e4gg till blocket igen. Blocket ska fungera precis som tidigare; med inst\u00e4llningarna och uppdatering av attributen. Det kommer nu bara inte att mata ut n\u00e5got i frontend. Kommentarsblocket kommer att finnas d\u00e4r och lagrar alla attribut i JSON, men ingen synlig HTML renderas.<\/p>\n<p>I alla fall; om n\u00e5got av dina attribut anv\u00e4nder <code>source<\/code>egenskapen m\u00e5ste du \u00e4ndra detta. Detta st\u00f6ds inte med block som renderas med PHP eftersom de tolkas direkt fr\u00e5n savens utdata \u2013 vilket vi nu \u00e5terkommer <code>null<\/code>till. Vi anv\u00e4nder k\u00e4lla p\u00e5 den andra <code>RichText<\/code>i v\u00e5rt block \u2013 f\u00f6r stycket. Redakt\u00f6ren sparar inte alls det du l\u00e4gger i det h\u00e4r <code>RichText<\/code>.<\/p>\n<p>S\u00e5 om du ocks\u00e5 fortfarande anv\u00e4nder <code>source<\/code>p\u00e5 <code>myRichText<\/code>attributet, m\u00e5ste vi ta bort egenskaperna <code>source<\/code>och <code>selector<\/code>f\u00f6r att s\u00e4kerst\u00e4lla att attributen kommer att lagras och inte tolkas fr\u00e5n <code>save<\/code>funktionen:<\/p>\n<pre><code>attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n    },\n    ...<\/code><\/pre>\n<p>Efter detta \u00e4r v\u00e5rt block redo f\u00f6r rendering i PHP. Vi kan l\u00e4mna Javascript-filerna (gl\u00f6m inte att bygga det) och resten g\u00f6rs i PHP.<\/p>\n<h2>Rendering av block i PHP<\/h2>\n<p>F\u00f6r att s\u00e4ga \u00e5t WordPress att rendera blockets utdata i PHP l\u00e4gger vi till ett nytt argument till funktionen <code>register_block_type()<\/code>. Vi m\u00e5ste l\u00e4gga till nyckeln <code>render_callback<\/code>till arrayen med ett v\u00e4rde f\u00f6r funktionen den ska k\u00f6ra.<\/p>\n<pre><code>add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' =&gt; 'awp-myfirstblock-js',\n        'render_callback' =&gt; 'awp_myfirstblock_render'\n    ]);\n});<\/code><\/pre>\n<h3>PHP-renderingsfunktionen<\/h3>\n<p>L\u00e5t oss definiera funktionen <code>awp_myfirstblock_render<\/code>l\u00e4ngre ner i <code>functions.php<\/code>(eller var du \u00e4n har lagt din PHP-kod). V\u00e5r funktion kommer att f\u00e5 tv\u00e5 parametrar; vi ringer dem <code>$attr<\/code>och <code>$content<\/code>.<\/p>\n<pre><code>function awp_myfirstblock_render($attr, $content) {\n    \/\/ return the block's output here\n}<\/code><\/pre>\n<p>Parametern <code>$attr<\/code>kommer att vara en associativ array med alla sparade attribut. Den andra parametern, <code>$content<\/code>, \u00e4r f\u00f6r block inuti v\u00e5rt block. Detta \u00e4r endast relevant f\u00f6r block som st\u00f6der kapslade block \u2013 vilket till exempel Columns eller Cover g\u00f6r.<\/p>\n<p>Funktionen f\u00e5r aldrig <code>echo<\/code>ut n\u00e5got. All utdata m\u00e5ste returneras s\u00e5 du m\u00e5ste bygga en str\u00e4ng och returnera den i slutet.<\/p>\n<p>N\u00e5got som \u00e4r viktigt att komma ih\u00e5g om attribut \u00e4r att endast sparade attribut visas i den f\u00f6rsta parametern till funktionen. Om ett attribut faktiskt aldrig \u00e4ndrades och sparades \u2013 dvs bara f\u00f6rlitade sig p\u00e5 dess <code>default<\/code>, kommer attributet inte att inkluderas alls f\u00f6r v\u00e5r PHP-funktion.<\/p>\n<p>Du m\u00e5ste hantera detta problem genom att antingen alltid kontrollera <code>if (isset($attr['...']))<\/code>eller p\u00e5 det b\u00e4sta s\u00e4ttet: definiera attributen i v\u00e5rt <code>register_block_type()<\/code>samtal. Vi kan tillhandah\u00e5lla en annan nyckel, <code>attributes<\/code>, och st\u00e4lla in dess v\u00e4rde till en array med alla attribut vi vill extrahera fr\u00e5n v\u00e5rt block. Strukturen b\u00f6r vara identisk med den du definierade i Javascript, men ist\u00e4llet f\u00f6r ett Javascript-objekt beh\u00f6ver du det i en PHP-array. Det h\u00e4r kan vara lite kr\u00e5ngligt att omdefiniera samma attribut, men med en smart kodredigerare borde det g\u00e5 ganska snabbt att kopiera+klistra in och redigera flera rader i PHP.<\/p>\n<h3>L\u00e4gger till attributen f\u00f6r v\u00e5r renderingsfunktion<\/h3>\n<p>L\u00e5t oss l\u00e4gga till det nya <code>attributes<\/code>elementet <code>register_block_type()<\/code>och klistra in exakt samma attribut som vi definierade i v\u00e5r Javascript-fil:<\/p>\n<pre><code>add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' =&gt; 'awp-myfirstblock-js',\n        'render_callback' =&gt; 'awp_myfirstblock_render',\n        'attributes' =&gt; [\n            'myRichHeading' =&gt; [\n                'type' =&gt; 'string'\n            ],\n            'myRichText' =&gt; [\n                'type' =&gt; 'string'\n            ],\n            'textAlignment' =&gt; [\n                'type' =&gt; 'string',\n            ],\n            'toggle' =&gt; [\n                'type' =&gt; 'boolean',\n                'default' =&gt; true\n            ],\n            'favoriteAnimal' =&gt; [\n                'type' =&gt; 'string',\n                'default' =&gt; 'dogs'\n            ],\n            'favoriteColor' ==&gt; [\n                'type' =&gt; 'string',\n                'default' =&gt; '#DDDDDD'\n            ],\n            'activateLasers' =&gt; [\n                'type' =&gt; 'boolean',\n                'default' =&gt; false\n            ],\n        ]\n    ]);\n});\n\u00a0\nfunction awp_myfirstblock_render($attr, $content) {\n    return '&lt;div&gt;'.$attr['favoriteColor'].'&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>T\u00e4nk p\u00e5 att om du definierar a <code>default<\/code>f\u00f6r alla attribut ska din funktions <code>$attr<\/code>parameter alltid inneh\u00e5lla alla attribut. Till exempel kommer attributet <code>textAlignment<\/code>ovan bara att finnas i <code>$attr<\/code>om det \u00e4ndrades \u2013 och du m\u00e5ste kontrollera <code>isset($attr['textAlignment'])<\/code>.<\/p>\n<p>Tyv\u00e4rr finns det f\u00f6r tillf\u00e4llet tv\u00e5 saker du <strong>inte kommer att f\u00e5 tag p\u00e5 med PHP block render<\/strong>. Den ena \u00e4r <code>className<\/code>rekvisiten \u2013 s\u00e5 du m\u00e5ste bygga omslagsklassen (om du vill ha det) sj\u00e4lv. Den andra \u00e4r <code>support<\/code>egenskapen f\u00f6r blockinriktning. F\u00f6r tillf\u00e4llet st\u00f6der WordPress inte den h\u00e4r egenskapen i dynamiska block. Vi kommer inte att f\u00e5 tag p\u00e5 v\u00e4rdet p\u00e5 den valda blockjusteringen om vi inte \u00e4ndrar det till ett attribut och hanterar det manuellt i Javascript.<\/p>\n<p>N\u00e4r det g\u00e4ller HTML-utdata f\u00f6r funktionen \u00e4r detta helt upp till dig!<\/p>\n<h2>Beg\u00e4r PHP-rendering fr\u00e5n insidan av editorn<\/h2>\n<p>Det \u00e4r m\u00f6jligt att beg\u00e4ra PHP-renderingen av v\u00e5rt block inuti editorn. Detta \u00e4r anv\u00e4ndbart om du vill kunna f\u00f6rhandsgranska blockets utdata i editorn. Vi kan g\u00f6ra detta med en komponent som anropas <code>ServerSideRender<\/code>fr\u00e5n <code>wp.editor<\/code>paketet.<\/p>\n<p>Som rekvisita till <code>ServerSideRender<\/code>dig m\u00e5ste du definiera alla attribut du vill f\u00f6rmedla. Som ett minimum m\u00e5ste du ange blockets namn till prop <code>block<\/code>, s\u00e5 att WordPress vet vilken renderingsmetod du ska leta efter. Detta \u00e4r tillg\u00e4ngligt f\u00f6r dig i <code>props.name<\/code>funktionen <code>edit<\/code>. Du m\u00e5ste ocks\u00e5 ange alla attribut du beh\u00f6ver i rekvisitan <code>attributes<\/code>. Om du vill kan du l\u00e4gga till anpassade variabler utanf\u00f6r attribut h\u00e4r ocks\u00e5. T\u00e4nk bara p\u00e5 att detta bara kommer att fungera f\u00f6r inre editor, och inte frontend.<\/p>\n<p>Du kan inte anv\u00e4nda <code>ServerSideRender<\/code>i blockets <code>save<\/code>funktion. Din <code>save<\/code>funktion m\u00e5ste fortfarande \u00e5terv\u00e4nda <code>null<\/code>.<\/p>\n<p>L\u00e5t oss implementera <code>ServerSideRender<\/code>i v\u00e5rt block f\u00f6r att se det i praktiken.<\/p>\n<h3>Anv\u00e4nder ServerSideRender f\u00f6r blockera f\u00f6rhandsgransknings-\/redigeringsl\u00e4ge<\/h3>\n<p>Om du f\u00f6ljde f\u00f6reg\u00e5ende steg d\u00e4r vi gjorde en f\u00f6rhandsgransknings-\/redigeringsl\u00e4gesv\u00e4xlare f\u00f6r v\u00e5rt block, kan vi nu anv\u00e4nda <code>ServerSideRender<\/code>f\u00f6r att \u00e5terge f\u00f6rhandsvisningen av blocket fr\u00e5n PHP n\u00e4r vi v\u00e4xlar till f\u00f6rhandsgranskningsl\u00e4ge.<\/p>\n<p>F\u00f6rst m\u00e5ste vi komma ih\u00e5g att destrukturera <code>ServerSideRender<\/code>\u00f6verst:<\/p>\n<pre><code>const { ServerSideRender } = wp.editor;<\/code><\/pre>\n<p>Om du kommer ih\u00e5g fr\u00e5n f\u00f6reg\u00e5ende steg anv\u00e4nde vi komponenterna <code>Disabled<\/code>och\/eller <code>Placeholder<\/code>f\u00f6r att h\u00e5lla f\u00f6rhandsvisningen. Problemet med att anv\u00e4nda <code>Placeholder<\/code>\u00e4r att vi f\u00e5r o\u00f6nskad styling applicerad p\u00e5 v\u00e5r produktion. L\u00e5t oss ers\u00e4tta <code>Placeholder<\/code>med <code>ServerSideRender<\/code>. Du kan v\u00e4lja att beh\u00e5lla <code>Disabled<\/code>komponenten f\u00f6r att s\u00e4kerst\u00e4lla att inget av dess inneh\u00e5ll \u00e4r klickbart eller dragbart.<\/p>\n<p>Vid koden f\u00f6r att rendera blocket n\u00e4r attributet <code>editMode<\/code>\u00e4r falskt g\u00f6r vi:<\/p>\n<pre><code>...\n{!this.state.editMode &amp;&amp; \n    &lt;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    \/&gt;\n}\n...<\/code><\/pre>\n<p>Nu kommer v\u00e5r anpassade knapp i verktygsf\u00e4ltet att \u00e5terge utdata fr\u00e5n PHP n\u00e4r vi byter till f\u00f6rhandsgranskningsl\u00e4ge. Utdata ska vara identisk n\u00e4r du tittar p\u00e5 inl\u00e4gget i frontend. Detta \u00e4r en god vana att se till att resultatet \u00e4r identiskt i b\u00e5de editor och frontend.<\/p>\n<h2>Exempel: Dynamiskt block som visar ett valt inl\u00e4gg<\/h2>\n<p>Utdata i din PHP-renderingsfunktion kan vara vad som helst och du har full tillg\u00e5ng till alla WordPress-funktioner. Antag ett block d\u00e4r ett inl\u00e4ggs-ID kommer att sparas i ett attribut. I <code>render_callback<\/code>PHP-funktionen kan du fr\u00e5ga inl\u00e4gget fr\u00e5n ID:t och mata ut dess information. Det borde vara ganska sj\u00e4lvf\u00f6rklarande hur man g\u00f6r detta, men h\u00e4r \u00e4r ett snabbt exempel.<\/p>\n<p><strong>OBS<\/strong>: I det h\u00e4r exemplet l\u00e4gger vi helt enkelt till en textinmatning till editorn f\u00f6r manuell inmatning av ett inl\u00e4ggs-ID. Det h\u00e4r \u00e4r inte en v\u00e4ldigt intuitiv och anv\u00e4ndarv\u00e4nlig l\u00f6sning f\u00f6r att v\u00e4lja ett inl\u00e4gg \u2013 men det h\u00e4r \u00e4r vad vi kommer att l\u00e4ra oss i n\u00e4sta steg. Fokus h\u00e4r ligger p\u00e5 PHP-delen av renderingen av det valda inl\u00e4gget.<\/p>\n<p>L\u00e5t oss l\u00e4gga till ett attribut <code>selectedPostId<\/code>av typnummer:<\/p>\n<pre><code>attributes: {\n    selectedPostId: {\n        type: 'number'\n    }\n}<\/code><\/pre>\n<p>Och n\u00e5gonstans inne i v\u00e5rt blocks <code>edit<\/code>funktion l\u00e4gger vi till en <code>TextControl<\/code>komponent. Den kan vara var du vill \u2013 inne i blocket eller i Inspekt\u00f6ren.<\/p>\n<pre><code>&lt;TextControl \n    label={__(\"Type in post ID\", 'awhitepixel')}\n    type=\"number\"\n    value={attributes.selectedPostId}\n    onChange={(newval) =&gt; setAttributes({ selectedPostId: parseInt(newval) })}\n\/&gt;<\/code><\/pre>\n<p>Observera att jag \u00e4r extra noga med att s\u00e4kerst\u00e4lla att indata sparar attributet korrekt som ett tal genom att konvertera det till heltal med <code>parseInt()<\/code>. \u00c4ven om vi st\u00e4ller in typ prop <code>type<\/code>f\u00f6r <code>number<\/code>att \u00e5terge en sifferinmatning, tolkas det \u00e4ndrade v\u00e4rdet fortfarande som en str\u00e4ng. WordPress kommer inte att spara ditt attribut om det \u00e4r i fel format.<\/p>\n<p>Gl\u00f6m inte att l\u00e4gga till det nya attributet till din <code>ServerSideRender<\/code>komponent om du har en:<\/p>\n<pre><code>&lt;ServerSideRender\n    block={this.props.name}\n    attributes={{ \n        selectedPostId: attributes.selectedPostId,\n        ...<\/code><\/pre>\n<h3>PHP-delen<\/h3>\n<p>Det borde ha tagit hand om Javascript-delen. L\u00e5t oss g\u00e5 vidare till PHP. F\u00f6rst m\u00e5ste vi l\u00e4gga till det nya attributet <code>selectedPostId<\/code>till <code>attributes<\/code>arrayen i <code>register_block_type()<\/code>:<\/p>\n<pre><code>register_block_type('awp\/firstblock', [\n    'editor_script' =&gt; 'awp-myfirstblock-js',\n    'render_callback' =&gt; 'awp_myfirstblock_render',\n    'attributes' =&gt; [\n        'selectedPostId' =&gt; [\n            'type' =&gt; 'number',\n            'default' =&gt; 0\n        ],\n        ...\n    ]\n]);<\/code><\/pre>\n<p>I <code>render_callback<\/code>funktionen kan vi nu komma \u00e5t post-ID med <code>$attr['selectedPostId']<\/code>. Vi kan med det utf\u00f6ra en enkel <code>get_post()<\/code>och mata ut postens data; dess l\u00e4nk och titel:<\/p>\n<pre><code>function awp_myfirstblock_render($attr, $content) {\n    $str = '';\n    if ($attr['selectedPostId'] &gt; 0) {\n        $post = get_post($attr['selectedPostId']);\n        if (!$post) {\n            return $str;\n        }\n        $str = '&lt;div class=\"awp-myfirstblock\"&gt;';\n        $str .= '&lt;a href=\"'. get_the_permalink($post). '\"&gt;';\n        $str .= '&lt;h3&gt;'. get_the_title($post). '&lt;\/h3&gt;';\n        $str .= '&lt;\/a&gt;';\n        $str .= '&lt;\/div&gt;';\n    }\n    return $str;\n}<\/code><\/pre>\n<p>Detta \u00e4r ett mycket grundl\u00e4ggande exempel menat som en springbr\u00e4da f\u00f6r dig att skriva mer avancerad och anpassad kod.<\/p>\n<p>Nu n\u00e4r vi vet hur man hanterar rendering av dynamiska block, \u00e4r n\u00e4sta steg att l\u00e4ra sig hur man g\u00f6r redigeringsdelen mer intuitiv ocks\u00e5. I n\u00e4sta steg kommer vi att fokusera p\u00e5 hur man fr\u00e5gar efter inl\u00e4gg fr\u00e5n blockredigeraren och ger anv\u00e4ndaren ett b\u00e4ttre s\u00e4tt att v\u00e4lja ett inl\u00e4gg.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Med dynamiskt blockinneh\u00e5ll som senaste inl\u00e4gg eller visning av ett inl\u00e4gg m\u00e5ste vi rendera blockets utdata i PHP. I det h\u00e4r inl\u00e4gget kommer vi att l\u00e4ra oss hur och varf\u00f6r.<\/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":[901,942,942,848,901,1110,807,807,848,868,868],"tags":[1173],"class_list":["post-233616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-gutenberg-9","category-handledningar","category-n-a","category-php-9","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233616"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233616\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/152680"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}