{"id":228224,"date":"2022-10-16T10:34:00","date_gmt":"2022-10-16T07:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228224"},"modified":"2022-11-09T01:22:21","modified_gmt":"2022-11-08T22:22:21","slug":"uzywanie-php-do-renderowania-bloku-w-edytorze-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/uzywanie-php-do-renderowania-bloku-w-edytorze-wordpress-gutenberg\/","title":{"rendered":"U\u017cywanie PHP do renderowania bloku w edytorze WordPress (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Podczas tworzenia bloku w edytorze blok\u00f3w WordPress (Gutenberg) prawdopodobnie u\u017cywa\u0142e\u015b JavaScript do renderowania bloku w tre\u015bci swojego posta. W tym przewodniku przyjrzymy si\u0119 wykorzystaniu PHP do renderowania bloku, tworz\u0105c tak zwany \u201eblok dynamiczny&quot;.<\/p>\n<p>Zamierzamy zachowa\u0107 prostot\u0119 w tym przewodniku i rozszerzymy to, co ju\u017c zbudowali\u015bmy w naszym <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodniku po wtyczkach WordPress Gutenberg<\/a>. Jednak bloki dynamiczne s\u0105 bardzo przydatne do prezentowania bardziej z\u0142o\u017conych informacji w bloku, takich jak p\u0119tla post.<\/p>\n<h2>Warunki wst\u0119pne<\/h2>\n<ul>\n<li>Zapoznaj si\u0119 z <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tworzeniem wtyczek do WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Utw\u00f3rz PHP dla bloku dynamicznego<\/h2>\n<p>Je\u015bli jeszcze tego nie zrobi\u0142e\u015b, wykonaj czynno\u015bci opisane w <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodniku po wtyczkach WordPress Gutenberg<\/a>, aby mie\u0107 edytowalny obszar RichText.<\/p>\n<p>Dodaj nast\u0119puj\u0105cy kod PHP do swojej wtyczki (w tym przyk\u0142adzie <code>wholesome-plugin.php<\/code>), zast\u0119puj\u0105c blok kodu zaczynaj\u0105cy si\u0119 od <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>Atrybuty<\/h3>\n<p>Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 zauwa\u017cysz, jest to, \u017ce przedefiniowali\u015bmy atrybuty w tym pliku i s\u0105 one takie same, jak te, kt\u00f3re zdefiniowali\u015bmy w <code>\/src\/index.js<\/code>pliku w naszym poprzednim przewodniku.<\/p>\n<p>Powodem, dla kt\u00f3rego musimy to zrobi\u0107, jest to, aby nasze dane wyj\u015bciowe mog\u0142y uzyska\u0107 dost\u0119p do typ\u00f3w atrybut\u00f3w i ich domy\u015blnej zawarto\u015bci.<\/p>\n<h3>Renderuj wywo\u0142anie zwrotne<\/h3>\n<p>W powy\u017cszym kodzie dodali\u015bmy r\u00f3wnie\u017c argument <code>render_callback<\/code>do <code>register_block_type<\/code>funkcji. Obs\u0142uguje wyj\u015bcie bloku, zast\u0119puj\u0105c <code>save<\/code>funkcj\u0119 w <code>\/src\/index.js<\/code>pliku.<\/p>\n<p>Funkcja <code>render_callback<\/code>przyjmuje dwa parametry. To s\u0105:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>\u2014 otrzymuje atrybuty, kt\u00f3re zdefiniowali\u015bmy zar\u00f3wno w <code>attributes<\/code>argumencie tej funkcji, jak i w <code>\/src\/index.js<\/code>pliku<\/li>\n<li><strong><code>$content<\/code><\/strong>\u2014 otrzymuje wszystko, co zosta\u0142o zapisane za pomoc\u0105 <code>save<\/code>metody w <code>\/src\/save.js<\/code>pliku. Jest to przydatne, je\u015bli renderujemy <code>InnerBlocks<\/code>, kt\u00f3re w przeciwnym razie nie zosta\u0142yby przekazane do metody renderowania PHP.<\/li>\n<\/ul>\n<p>W tym przyk\u0142adzie u\u017cyli\u015bmy funkcji anonimowej dla <code>render_callback<\/code>, ale mogliby\u015bmy po prostu przekaza\u0107 tutaj odwo\u0142anie do funkcji i zdefiniowa\u0107 to w innym miejscu.<\/p>\n<p>Zauwa\u017c, \u017ce nie mamy mo\u017cliwo\u015bci dost\u0119pu do w\u0142a\u015bciwo\u015bci w PHP render_callback, wi\u0119c musieli\u015bmy r\u0119cznie doda\u0107 klas\u0119 HTML do <code>&lt;p&gt;<\/code>tagu, aby nasze style nadal dzia\u0142a\u0142y (teoretycznie mogliby\u015bmy wykorzysta\u0107 <code>$content<\/code>parametr i troch\u0119 popracowa\u0107 znajdowania i zast\u0119powania sztuczek, je\u015bli chcieli\u015bmy, ale to co\u015b dla innego przewodnika).<\/p>\n<h2>Usu\u0144 metod\u0119 zapisu JavaScript<\/h2>\n<p>Jak wcze\u015bniej wspomniano, <code>$content<\/code>parametr <code>render_callback<\/code>funkcji przechowuje dane wyj\u015bciowe <code>save<\/code>metody JavaScript, ale zauwa\u017c, \u017ce nie u\u017cywamy tego w naszym kodzie.<\/p>\n<p>W pliku <code>\/src\/index.js<\/code>zast\u0105p <code>save<\/code>metod\u0119 nast\u0119puj\u0105c\u0105:<\/p>\n<p>To m\u00f3wi metodzie save, aby nic nie zwraca\u0142a.<\/p>\n<h3>Usu\u0144 <code>save<\/code>import<\/h3>\n<p>Skoro ju\u017c przy tym jeste\u015bmy, <strong>usu\u0144<\/strong> r\u00f3wnie\u017c nast\u0119puj\u0105c\u0105 lini\u0119 z <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>Mo\u017cesz teraz r\u00f3wnie\u017c usun\u0105\u0107 <code>\/src\/save.js<\/code>plik.<\/p>\n<h3>Kompilacja wtyczki<\/h3>\n<p>Otw\u00f3rz terminal, upewnij si\u0119, \u017ce jeste\u015b w katalogu g\u0142\u00f3wnym swojej wtyczki i uruchom nast\u0119puj\u0105ce polecenie:<\/p>\n<p>Skrypt si\u0119 skompiluje. Je\u015bli masz jakie\u015b b\u0142\u0119dy, terminal powinien ci\u0119 poinformowa\u0107 o tym, czym one s\u0105.<\/p>\n<h2>U\u017cyj bloku dynamicznego<\/h2>\n<p>Powiniene\u015b teraz by\u0107 w stanie wstawi\u0107 blok na stron\u0119, edytowa\u0107 jego zawarto\u015b\u0107 i wy\u015bwietli\u0107 go na interfejsie.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"U\u017cywanie PHP do renderowania bloku w edytorze WordPress (Gutenberg)\" \/>Dynamiczny blok w akcji<\/p>\n<p>W tym podstawowym przyk\u0142adzie blok b\u0119dzie wygl\u0105da\u0142 i zachowywa\u0142 si\u0119 tak samo, jakby\u015b u\u017cy\u0142 metody renderowania JavaScript.<\/p>\n<ul>\n<li>Sp\u00f3jrz na tworzenie <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zagnie\u017cd\u017conych blok\u00f3w podrz\u0119dnych za pomoc\u0105 <code>InnerBlocks<\/code>komponentu<\/a><\/li>\n<li>Poznaj <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przechowywanie atrybut\u00f3w Gutenberga jako p\u00f3l meta post<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Podczas tworzenia bloku w edytorze blok\u00f3w WordPress (Gutenberg) prawdopodobnie u\u017cywa\u0142e\u015b JavaScript do renderowania bloku w tre\u015bci swojego posta. W tym przewodniku zamierzamy &#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":[721,940,919,897,805,845],"tags":[1169],"class_list":["post-228224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-gutenberg-7","category-inny","category-kod","category-php-7","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228224"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}