{"id":228295,"date":"2022-10-16T09:18:00","date_gmt":"2022-10-16T06:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228295"},"modified":"2022-11-09T01:44:35","modified_gmt":"2022-11-08T22:44:35","slug":"uso-de-post-metacampos-para-almacenar-atributos-en-el-editor-de-bloques-de-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/uso-de-post-metacampos-para-almacenar-atributos-en-el-editor-de-bloques-de-wordpress-gutenberg\/","title":{"rendered":"Uso de post metacampos para almacenar atributos en el editor de bloques de WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Cuando registra y almacena atributos en el editor de bloques de WordPress (Gutenberg), tiene la opci\u00f3n de almacenarlos como meta meta, en lugar de los atributos de bloque habituales.<\/p>\n<p>Con este m\u00e9todo, puede tener una configuraci\u00f3n en su bloque que pueda controlar algo en toda la publicaci\u00f3n o en la plantilla.<\/p>\n<p><strong>Una nota importante sobre la representaci\u00f3n de metaatributos de publicaci\u00f3n<\/strong><\/p>\n<p>No puede renderizar los meta atributos de la publicaci\u00f3n usando un m\u00e9todo de guardado de JavaScript. El equipo de Gutenberg tom\u00f3 una decisi\u00f3n para evitar esto, porque los bloques que representan los campos meta de la publicaci\u00f3n pueden romperse f\u00e1cilmente debido a que la meta meta cambia en otra parte de la publicaci\u00f3n.<\/p>\n<p>En esta gu\u00eda, vamos a ampliar lo que ya hemos creado 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>, y tambi\u00e9n en la <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de bloques din\u00e1micos<\/a>.<\/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<li>Sea familiar <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">con los bloques din\u00e1micos y la representaci\u00f3n del lado del servidor<\/a><\/li>\n<\/ul>\n<h2>Registrando el Post Meta en PHP<\/h2>\n<p>Antes de que podamos usar un metacampo de publicaci\u00f3n en JavaScript, debemos asegurarnos de que lo hayamos registrado en PHP usando <code>register_meta<\/code>y que el <code>show_in_rest<\/code>argumento se haya establecido en verdadero.<\/p>\n<p>Siguiendo con la <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de Dynamic Block<\/a>, abra el archivo PHP ra\u00edz del complemento (en este caso <code>wholesome-plugin.php<\/code>) y agregue el siguiente c\u00f3digo al final de ese archivo despu\u00e9s de todas las dem\u00e1s funciones:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_block_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; __( 'Wholesome Plugin \u2013 hello from the editor!', 'wholesome-plugin' ),\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Este c\u00f3digo registra un metacampo llamado <code>_wholesomecode_wholesome_plugin_block_text<\/code>para el <code>post<\/code>tipo de publicaci\u00f3n. Tambi\u00e9n garantiza que la API REST pueda acceder a este metacampo con el <code>show_in_rest<\/code>valor establecido en verdadero.<\/p>\n<p>Tambi\u00e9n estamos pasando la funci\u00f3n <code>__return_true<\/code>al <code>auth_callback<\/code>argumento para asegurarnos de que tenemos los permisos para acceder a este par\u00e1metro. Si quisi\u00e9ramos una mayor seguridad para este par\u00e1metro, lo modificar\u00edamos a una funci\u00f3n personalizada que verifique un determinado rol de usuario.<\/p>\n<h2>Registro de los metaatributos de la publicaci\u00f3n en JavaScript<\/h2>\n<p>Nuevamente, siguiendo con la gu\u00eda anterior, abra <code>\/src\/index.js<\/code>y reemplace <code>attributes<\/code>con lo siguiente:<\/p>\n<pre><code>attributes: {\n  blockText: {\n    meta: '_wholesomecode_wholesome_plugin_block_text',\n    source: 'meta',\n  },\n},\n<\/code><\/pre>\n<p>En lugar de indicar el tipo de atributo y asignar un valor predeterminado, definimos la clave meta de la que provendr\u00e1 el atributo de datos e indicamos que el <code>source<\/code>del atributo es <code>meta<\/code>.<\/p>\n<p>Como se indica en la advertencia en la parte superior de esta gu\u00eda, no puede acceder a los atributos del metacampo de publicaci\u00f3n a trav\u00e9s del <code>save<\/code>m\u00e9todo JavaScript, as\u00ed que compile el complemento <code>npm start<\/code>y veamos c\u00f3mo podemos generar el meta.<\/p>\n<h2>Representaci\u00f3n de la publicaci\u00f3n meta<\/h2>\n<p>Debido a que hemos guardado nuestro atributo como publicaci\u00f3n meta, podemos generar esto en cualquier lugar de WordPress usando <code>get_post_meta<\/code>(siempre que tengamos <code>$post_id<\/code>):<\/p>\n<pre><code>get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );\n<\/code><\/pre>\n<p>Continuando con la <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de Dynamic Block<\/a>, veamos c\u00f3mo podemos acceder a este atributo en el lado del servidor en PHP.<\/p>\n<p>El meta no est\u00e1 disponible a trav\u00e9s del <code>$attributes<\/code>par\u00e1metro de <code>render_callback<\/code>, ya que los meta atributos de la publicaci\u00f3n no pasan su valor a trav\u00e9s de este par\u00e1metro, pero podemos acceder al <code>$post<\/code>objeto global para obtener la ID de la publicaci\u00f3n.<\/p>\n<p>Con esto en mente, actualicemos nuestro <code>register_block_type<\/code>para generar el meta de la publicaci\u00f3n:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  array(\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      global $post;\n      $block_text = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_block_text', true );\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<\/code><\/pre>\n<p>Tenga en cuenta que ya no necesitamos registrar <code>attributes<\/code>aqu\u00ed, porque solo estamos accediendo al metacampo de publicaci\u00f3n a trav\u00e9s de la <code>get_post_meta<\/code>funci\u00f3n.<\/p>\n<h3>Usando el bloque<\/h3>\n<p>Este no es el mejor caso de uso de este tipo de meta, sin embargo, cuando usamos el bloque, podemos ver que debido a que estamos almacenando los atributos como meta posterior, si actualizamos el atributo en un bloque, actualiza todos los bloques, como la publicaci\u00f3n meta se almacena en la publicaci\u00f3n, no en el bloque individual:<\/p>\n<p>Publicar metaatributos en acci\u00f3n<\/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>Lleve m\u00e1s lejos el uso de post meta en Gutenberg mediante la <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-custom-meta-boxes-using-the-wordpress-block-editor-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creaci\u00f3n de metaboxes personalizados en Gutenberg<\/a><\/li>\n<li>Eche un vistazo al <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uso de configuraciones para almacenar datos en la tabla de opciones en Gutenberg<\/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>Cuando registra y almacena atributos en el editor de bloques de WordPress (Gutenberg), tiene la opci\u00f3n de almacenarlos como meta de publicaci\u00f3n, en lugar de los atributos de bloque habituales.Usando este m&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223685,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,810,716,935,914,861],"tags":[1172],"class_list":["post-228295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-complementos","category-desarrollador","category-gutenberg-2","category-otro","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228295","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=228295"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228295\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}