{"id":228166,"date":"2022-10-16T10:36:00","date_gmt":"2022-10-16T07:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228166"},"modified":"2022-11-09T01:04:14","modified_gmt":"2022-11-08T22:04:14","slug":"anvaenda-php-foer-att-rendera-ett-block-i-wordpress-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/anvaenda-php-foer-att-rendera-ett-block-i-wordpress-editor-gutenberg\/","title":{"rendered":"Anv\u00e4nda PHP f\u00f6r att rendera ett block i WordPress Editor (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>N\u00e4r du skapar ett block i WordPress Block Editor (Gutenberg) har du sannolikt anv\u00e4nt JavaScript f\u00f6r att \u00e5terge blocket till inneh\u00e5llet i ditt inl\u00e4gg. I den h\u00e4r guiden kommer vi att titta p\u00e5 hur vi anv\u00e4nder PHP f\u00f6r att rendera blocket och skapa det som kallas ett &quot;Dynamiskt block&quot;.<\/p>\n<p>Vi kommer att h\u00e5lla det enkelt i den h\u00e4r guiden och ut\u00f6ka det vi redan har byggt i v\u00e5r <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenberg-pluginguide<\/a>. Men dynamiska block \u00e4r mycket anv\u00e4ndbara f\u00f6r att presentera mer komplex information i ett block, till exempel en postloop.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>Var bekant med <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa plugins f\u00f6r WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Skapa PHP f\u00f6r det dynamiska blocket<\/h2>\n<p>Om du inte redan har gjort det, slutf\u00f6r du stegen i <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenberg-pluginguiden<\/a>, s\u00e5 att du har ett redigerbart RichText-omr\u00e5de.<\/p>\n<p>L\u00e4gg till f\u00f6ljande PHP i din plugin (i det h\u00e4r exemplet <code>wholesome-plugin.php<\/code>), ers\u00e4tt kodblocket som b\u00f6rjar med <code>register_block_type<\/code>:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  [\n    'attributes'      =&gt; [\n      'blockText' =&gt; [\n        'default' =&gt; 'Wholesome Plugin \u2013 hello from the editor!',\n        'type'    =&gt; 'string',\n      ],\n    ],\n    'editor_script'   =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'editor_style'    =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'render_callback' =&gt; function( $attributes, $content) {\n      $block_text = esc_html( $attributes['blockText'] );\n      return \"&lt;p class='wp-block-wholesomecode-wholesome-plugin'&gt;$block_text&lt;\/p&gt;\";\n    },\n    'style'           =&gt; 'wholesomecode-wholesome-plugin-block',\n  ]\n);\n<\/code><\/pre>\n<h3>Attribut<\/h3>\n<p>Det f\u00f6rsta du kommer att m\u00e4rka \u00e4r att vi har omdefinierat attributen i den h\u00e4r filen, och de \u00e4r desamma som de vi definierade i <code>\/src\/index.js<\/code>filen i v\u00e5r tidigare guide.<\/p>\n<p>Anledningen till att vi beh\u00f6ver g\u00f6ra detta \u00e4r s\u00e5 att v\u00e5r utdata kan komma \u00e5t attributtyperna och deras standardinneh\u00e5ll.<\/p>\n<h3>G\u00f6r \u00e5teruppringning<\/h3>\n<p>I koden ovan har vi \u00e4ven lagt till argumentet <code>render_callback<\/code>till <code>register_block_type<\/code>funktionen. Detta hanterar utdata fr\u00e5n blocket och ers\u00e4tter <code>save<\/code>funktionen i <code>\/src\/index.js<\/code>filen.<\/p>\n<p>Funktionen <code>render_callback<\/code>tar tv\u00e5 parametrar. Dessa \u00e4r:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>\u2014 detta tar emot attributen vi definierade i b\u00e5de <code>attributes<\/code>argumentet f\u00f6r denna funktion och de i <code>\/src\/index.js<\/code>filen<\/li>\n<li><strong><code>$content<\/code><\/strong>\u2014 denna tar emot allt som har sparats via <code>save<\/code>metoden i <code>\/src\/save.js<\/code>filen. Detta \u00e4r praktiskt om vi renderar <code>InnerBlocks<\/code>, som annars inte skulle \u00f6verf\u00f6ras till PHP-renderingsmetoden.<\/li>\n<\/ul>\n<p>I det h\u00e4r exemplet har vi anv\u00e4nt en anonym funktion f\u00f6r <code>render_callback<\/code>, men vi kunde ganska enkelt ha skickat in en referens till en funktion h\u00e4r ist\u00e4llet och definierat denna p\u00e5 annat h\u00e5ll.<\/p>\n<p>Observera att vi inte har m\u00f6jlighet att komma \u00e5t rekvisita i PHP render_callback, s\u00e5 vi har varit tvungna att manuellt l\u00e4gga till HTML-klassen i <code>&lt;p&gt;<\/code>taggen s\u00e5 att v\u00e5ra stilar fortfarande fungerar (i teorin skulle vi kunna dra nytta av <code>$content<\/code>parametern och g\u00f6ra lite hitta och ers\u00e4tta knep om vi ville ha dem, men det \u00e4r n\u00e5got f\u00f6r en annan guide).<\/p>\n<h2>Ta bort JavaScript-sparametoden<\/h2>\n<p>Som tidigare n\u00e4mnts lagrar <code>$content<\/code>parametern f\u00f6r <code>render_callback<\/code>funktionen utdata fr\u00e5n JavaScript- <code>save<\/code>metoden, men observera att vi inte anv\u00e4nder detta i v\u00e5r kod.<\/p>\n<p>I filen <code>\/src\/index.js<\/code>ers\u00e4tt <code>save<\/code>metoden med f\u00f6ljande:<\/p>\n<p>Detta s\u00e4ger \u00e5t sparmetoden att inte returnera n\u00e5got.<\/p>\n<h3>Ta bort <code>save<\/code>importen<\/h3>\n<p>Medan vi h\u00e5ller p\u00e5, ta ocks\u00e5 <strong>bort<\/strong> f\u00f6ljande rad fr\u00e5n <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>Du kan nu ocks\u00e5 ta bort <code>\/src\/save.js<\/code>filen.<\/p>\n<h3>Kompilera plugin<\/h3>\n<p>\u00d6ppna terminalen, se till att du \u00e4r i rotkatalogen f\u00f6r ditt plugin och k\u00f6r f\u00f6ljande kommando:<\/p>\n<p>Skriptet kommer att kompileras. Om du har n\u00e5gra fel b\u00f6r terminalen g\u00f6ra dig medveten om vad de \u00e4r.<\/p>\n<h2>Anv\u00e4nd det dynamiska blocket<\/h2>\n<p>Du b\u00f6r nu kunna infoga blocket p\u00e5 en sida, redigera dess inneh\u00e5ll och se det i anv\u00e4ndargr\u00e4nssnittet.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"Anv\u00e4nda PHP f\u00f6r att rendera ett block i WordPress Editor (Gutenberg)\" \/>Det dynamiska blocket i aktion<\/p>\n<p>I det h\u00e4r grundl\u00e4ggande exemplet kommer blocket att se ut och bete sig p\u00e5 samma s\u00e4tt som om du hade anv\u00e4nt en JavaScript-renderingsmetod.<\/p>\n<ul>\n<li>Ta en titt p\u00e5 att skapa <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kapslade underordnade block med <code>InnerBlocks<\/code>komponenten<\/a><\/li>\n<li>Utforska hur du <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lagrar Gutenberg-attribut som post-metaf\u00e4lt<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e4r du skapar ett block i WordPress Block Editor (Gutenberg) har du sannolikt anv\u00e4nt JavaScript f\u00f6r att \u00e5terge blocket till inneh\u00e5llet i ditt inl\u00e4gg. I den h\u00e4r guiden g\u00e5r vi&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223841,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[942,848,901,922,807,724],"tags":[1173],"class_list":["post-228166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-handledningar","category-koda","category-oevrig","category-php-9","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228166","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=228166"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}