{"id":228330,"date":"2022-10-16T10:59:00","date_gmt":"2022-10-16T07:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228330"},"modified":"2022-11-09T01:54:51","modified_gmt":"2022-11-08T22:54:51","slug":"uso-de-php-para-renderizar-un-bloque-en-el-editor-de-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/uso-de-php-para-renderizar-un-bloque-en-el-editor-de-wordpress-gutenberg\/","title":{"rendered":"Uso de PHP para renderizar un bloque en el editor de WordPress (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Al crear un bloque en el Editor de bloques de WordPress (Gutenberg), es probable que haya estado usando JavaScript para convertir el bloque en el contenido de su publicaci\u00f3n. En esta gu\u00eda, veremos el uso de PHP para representar el bloque, creando lo que se conoce como un &#8216;Bloque din\u00e1mico&#8217;.<\/p>\n<p>Vamos a mantenerlo simple en esta gu\u00eda y ampliaremos lo que ya hemos construido en nuestra <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de complementos de WordPress Gutenberg<\/a>. Sin embargo, los bloques din\u00e1micos son muy \u00fatiles para presentar informaci\u00f3n m\u00e1s compleja en un bloque, como un post loop.<\/p>\n<h2>requisitos previos<\/h2>\n<ul>\n<li>Familiar\u00edcese con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creaci\u00f3n de complementos para WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Crear PHP para el bloque din\u00e1mico<\/h2>\n<p>Si a\u00fan no lo ha hecho, complete los pasos en la <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda del complemento de WordPress Gutenberg<\/a>, para que tenga un \u00e1rea editable de RichText.<\/p>\n<p>Agregue el siguiente PHP en su complemento (en este ejemplo <code>wholesome-plugin.php<\/code>), reemplazando el bloque de c\u00f3digo que comienza con <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>Atributos<\/h3>\n<p>Lo primero que notar\u00e1 es que hemos redefinido los atributos en este archivo, y son los mismos que definimos en el <code>\/src\/index.js<\/code>archivo en nuestra gu\u00eda anterior.<\/p>\n<p>La raz\u00f3n por la que necesitamos hacer esto es para que nuestra salida pueda acceder a los tipos de atributos y su contenido predeterminado.<\/p>\n<h3>Renderizar devoluci\u00f3n de llamada<\/h3>\n<p>En el c\u00f3digo anterior tambi\u00e9n hemos agregado el argumento <code>render_callback<\/code>a la <code>register_block_type<\/code>funci\u00f3n. Esto maneja la salida del bloque, reemplazando la <code>save<\/code>funci\u00f3n en el <code>\/src\/index.js<\/code>archivo.<\/p>\n<p>La <code>render_callback<\/code>funci\u00f3n toma dos par\u00e1metros. Estos son:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>\u2014 esto recibe los atributos que definimos tanto en el <code>attributes<\/code>argumento de esta funci\u00f3n como en el <code>\/src\/index.js<\/code>archivo<\/li>\n<li><strong><code>$content<\/code><\/strong>\u2014 esto recibe todo lo que se ha guardado a trav\u00e9s del <code>save<\/code>m\u00e9todo en el <code>\/src\/save.js<\/code>archivo. Esto es \u00fatil si estamos renderizando <code>InnerBlocks<\/code>, que de otro modo no se pasar\u00eda al m\u00e9todo de renderizado de PHP.<\/li>\n<\/ul>\n<p>En este ejemplo, hemos utilizado una funci\u00f3n an\u00f3nima para <code>render_callback<\/code>, pero podr\u00edamos haber pasado f\u00e1cilmente una referencia a una funci\u00f3n aqu\u00ed y definirla en otro lugar.<\/p>\n<p>Tenga en cuenta que no tenemos la capacidad de acceder a los accesorios en PHP render_callback, por lo que tuvimos que agregar manualmente la clase HTML a la <code>&lt;p&gt;<\/code>etiqueta para que nuestros estilos a\u00fan funcionen (en teor\u00eda, podr\u00edamos aprovechar el <code>$content<\/code>par\u00e1metro y hacer un poco de encontrar y reemplazar trucos si los quisi\u00e9ramos, pero eso es algo para otra gu\u00eda).<\/p>\n<h2>Eliminar el m\u00e9todo de guardado de JavaScript<\/h2>\n<p>Como se mencion\u00f3 anteriormente, el <code>$content<\/code>par\u00e1metro de la <code>render_callback<\/code>funci\u00f3n almacena la salida del <code>save<\/code>m\u00e9todo JavaScript, pero tenga en cuenta que no lo estamos usando en nuestro c\u00f3digo.<\/p>\n<p>En el archivo, <code>\/src\/index.js<\/code>reemplace el <code>save<\/code>m\u00e9todo con lo siguiente:<\/p>\n<p>Esto le dice al m\u00e9todo save que no devuelva nada.<\/p>\n<h3>Eliminar la <code>save<\/code>importaci\u00f3n<\/h3>\n<p>Mientras estamos en eso, tambi\u00e9n <strong>elimine<\/strong> la siguiente l\u00ednea de <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>Ahora tambi\u00e9n puede eliminar el <code>\/src\/save.js<\/code>archivo.<\/p>\n<h3>Compilando el complemento<\/h3>\n<p>Abra la terminal, aseg\u00farese de estar en el directorio ra\u00edz de su complemento y ejecute el siguiente comando:<\/p>\n<p>El script se compilar\u00e1. Si tiene alg\u00fan error, la terminal debe informarle cu\u00e1les son.<\/p>\n<h2>Usa el Bloque Din\u00e1mico<\/h2>\n<p>Ahora deber\u00eda poder insertar el bloque en una p\u00e1gina, editar su contenido y verlo en la parte delantera.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"Uso de PHP para renderizar un bloque en el editor de WordPress (Gutenberg)\" \/>El bloque din\u00e1mico en acci\u00f3n<\/p>\n<p>En este ejemplo b\u00e1sico, el bloque tendr\u00e1 el mismo aspecto y comportamiento que si hubiera utilizado un m\u00e9todo de renderizado de JavaScript.<\/p>\n<ul>\n<li>Eche un vistazo a la creaci\u00f3n de <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloques secundarios anidados con el <code>InnerBlocks<\/code>componente<\/a><\/li>\n<li>Explore <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el almacenamiento de atributos de Gutenberg como metacampos posteriores<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Al crear un bloque en el Editor de bloques de WordPress (Gutenberg), es probable que haya estado usando JavaScript para convertir el bloque en el contenido de su publicaci\u00f3n. En esta gu\u00eda vamos&#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":[892,716,935,914,800,840],"tags":[1172],"class_list":["post-228330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-gutenberg-2","category-otro","category-php-2","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228330"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228330\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}