{"id":62196,"date":"2023-01-25T12:10:47","date_gmt":"2023-01-25T11:10:47","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=62196&#038;preview=true&#038;preview_id=62196"},"modified":"2025-12-16T21:51:45","modified_gmt":"2025-12-16T20:51:45","slug":"anadir-meta-box-a-entradas-de-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/","title":{"rendered":"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg"},"content":{"rendered":"<p>Los <a href=\"https:\/\/kinsta.com\/es\/blog\/advanced-custom-fields\/#what\">campos personalizados<\/a> proporcionan una forma de a\u00f1adir informaci\u00f3n adicional al contenido del sitio web. Estos fragmentos de informaci\u00f3n suelen conocerse como <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">metadatos<\/a>.<\/p>\n<blockquote><p>Los metadatos contienen informaci\u00f3n sobre la informaci\u00f3n. En el caso de WordPress, es informaci\u00f3n asociada a entradas, usuarios, comentarios y t\u00e9rminos.<\/p>\n<p>Dada la relaci\u00f3n de muchos a uno de los metadatos en WordPress, tus opciones son bastante ilimitadas. Puedes tener tantas opciones de metadatos como desees, y puedes almacenar casi cualquier cosa en ellos.<\/p>\n<p><em>&#8211;<a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbook<\/a><\/em><\/p><\/blockquote>\n<p>Aqu\u00ed tienes algunos ejemplos de metadatos que puedes adjuntar a una entrada utilizando campos personalizados:<\/p>\n<ul>\n<li>Las coordenadas geogr\u00e1ficas de un lugar o inmueble<\/li>\n<li>La fecha de un evento<\/li>\n<li>El ISBN o autor de un libro<\/li>\n<li>El estado de \u00e1nimo del d\u00eda del autor del post<\/li>\n<\/ul>\n<p>Y existen muchas m\u00e1s.<\/p>\n<p>De entrada, WordPress no proporciona una forma sencilla de a\u00f1adir y gestionar campos personalizados. En el Editor cl\u00e1sico, los campos personalizados se muestran en un cuadro situado en la parte inferior de la p\u00e1gina, debajo del editor de entradas.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142717 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Campos personalizados en el Editor cl\u00e1sico.\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Campos personalizados en el Editor cl\u00e1sico.<\/figcaption><\/figure>\n<p>En Gutenberg, los campos personalizados est\u00e1n desactivados por defecto, pero puedes mostrarlos seleccionando el elemento correspondiente en la configuraci\u00f3n de la entrada.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142718 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"A\u00f1adir el panel de campos personalizados al editor de bloques.\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">A\u00f1adir el panel de campos personalizados al editor de bloques.<\/figcaption><\/figure>\n<p>Por desgracia, no hay forma de mostrar metadatos en el frontend sin utilizar un plugin o ensuciarse las manos con el c\u00f3digo.<\/p>\n\n<p>Si eres usuario, encontrar\u00e1s por ah\u00ed varios <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">plugins excelentes<\/a> que hacen el trabajo por ti. Pero si eres desarrollador y quieres sacar m\u00e1s partido a los campos personalizados de WordPress, integrarlos perfectamente en el editor de bloques y mostrarlos en el frontend de tu sitio web de WordPress mediante un bloque personalizado de Gutenberg, entonces est\u00e1s en el lugar adecuado.<\/p>\n<p>As\u00ed que, si te preguntas cu\u00e1l es la mejor forma de utilizar los campos personalizados de WordPress tanto en <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a> como en el <a href=\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\">Editor cl\u00e1sico<\/a> para desarrolladores de WordPress, la respuesta r\u00e1pida es \u00abcrear un plugin que funcione tanto para el Editor cl\u00e1sico como para Gutenberg\u00bb.<\/p>\n<p>Pero no te preocupes demasiado. Si crear un plugin para gestionar campos personalizados en ambos editores puede ser un poco complicado, intentaremos que el proceso sea lo m\u00e1s sencillo posible. Una vez que comprendas los conceptos que trataremos en este art\u00edculo, adquirir\u00e1s las habilidades necesarias para gestionar metacampos personalizados en Gutenberg y construir todo tipo de sitios web.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En este art\u00edculo asumimos que est\u00e1s familiarizado con tecnolog\u00edas como <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-node-js\/\">Node.js<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">npm<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a>. Tambi\u00e9n se requieren conocimientos b\u00e1sicos de desarrollo de WordPress.<\/p>\n<p>Si eres nuevo en el desarrollo de bloques Gutenberg, aseg\u00farate de consultar nuestras gu\u00edas anteriores antes de empezar a leer este art\u00edculo:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">C\u00f3mo crear bloques personalizados para Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\">C\u00f3mo crear bloques din\u00e1micos para Gutenberg<\/a><\/li>\n<\/ul>\n<p>Si prefieres el contenido en v\u00eddeo, echa un vistazo a nuestro curso de v\u00eddeo gratuito <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/\">Desarrollo de bloques personalizados para Gutenberg<\/a>.<\/p>\n<\/aside>\n\n<p><strong>Nota: Antes de empezar, aseg\u00farate de que tienes una <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">versi\u00f3n actualizada de Node.js<\/a> en tu ordenador<\/strong><\/p>\n<p>Dicho esto, aqu\u00ed tienes nuestra gu\u00eda:<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Crear un Plugin de Bloques con la Herramienta Oficial create-block<\/h2>\n<p>El primer paso es crear un nuevo plugin con todos los archivos y dependencias necesarias para registrar un nuevo tipo de bloque. El plugin de bloques te permitir\u00e1 crear f\u00e1cilmente un tipo de bloque personalizado para gestionar y mostrar metadatos personalizados.<\/p>\n<p>Para crear un nuevo tipo de bloque, utilizaremos la herramienta oficial de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a>. Para obtener una descripci\u00f3n detallada de c\u00f3mo utilizar la herramienta crear un bloque, consulta nuestro <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#create-block\">art\u00edculo anterior<\/a> sobre el desarrollo de bloques Gutenberg.<\/p>\n<p>Abre tu herramienta de l\u00ednea de comandos, navega hasta el directorio de <strong>plugins<\/strong> de tu <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/staging\/\">sitio web de desarrollo de WordPress<\/a> y ejecuta el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Cuando se te solicite, a\u00f1ade los siguientes datos:<\/p>\n<ul>\n<li><strong>La variante de plantilla a utilizar para este bloque:<\/strong> dynamic<\/li>\n<li><strong>El slug del bloque utilizado para la identificaci\u00f3n (tambi\u00e9n el nombre de la carpeta de salida):<\/strong> metadata-block<\/li>\n<li><strong>El espacio de nombres interno para el nombre del bloque (algo \u00fanico para tus productos):<\/strong> meta-fields<\/li>\n<li><strong>El t\u00edtulo de visualizaci\u00f3n de tu bloque:<\/strong> Meta Fields<\/li>\n<li><strong>La descripci\u00f3n breve de tu bloque (opcional):<\/strong> Descripci\u00f3n del bloque<\/li>\n<li><strong>El dashicon para facilitar la identificaci\u00f3n de tu bloque (opcional):<\/strong> book<\/li>\n<li><strong>El nombre de la categor\u00eda para ayudar a los usuarios a navegar y descubrir tu<\/strong> <strong>bloque:<\/strong> widgets<\/li>\n<li><strong>\u00bfQuieres personalizar el plugin de WordPress?<\/strong> S\u00ed\/No<\/li>\n<\/ul>\n<p>Dediquemos un momento a revisar estos detalles e intentemos comprender d\u00f3nde se utilizan.<\/p>\n<ul>\n<li><strong>El slug del bloque utilizado para la<\/strong> <strong>identificaci\u00f3n<\/strong> define el <strong>nombre de la carpeta<\/strong> y el <strong>textdomain<\/strong> del plugin<\/li>\n<li><strong>El espacio de nombres interno para el nombre del bloque<\/strong> define el <strong>espacio de nombres interno<\/strong> del bloque y el <strong>prefijo de la funci\u00f3n<\/strong> que se utiliza en todo el c\u00f3digo del plugin.<\/li>\n<li><strong>El t\u00edtulo de visualizaci\u00f3n de tu<\/strong> <strong>bloque<\/strong> define el <strong>nombre<\/strong> <strong>del plugin<\/strong> y el <strong>nombre del bloque<\/strong> utilizado en la interfaz del editor.<\/li>\n<\/ul>\n<p>La configuraci\u00f3n puede tardar un par de minutos. Cuando se complete el proceso, obtendr\u00e1s una lista de los comandos disponibles.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"Plugin de bloque instalado correctamente.\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Plugin de bloque instalado correctamente.<\/figcaption><\/figure>\n<p>Antes de pasar a la siguiente secci\u00f3n, en tu <a href=\"https:\/\/kinsta.com\/es\/blog\/linux-comandos\/\">herramienta de l\u00ednea de comandos<\/a>, navega hasta la carpeta de tu plugin y ejecuta los siguientes comandos:<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Aseg\u00farate de ejecutar el comando <code>npm start<\/code> cada vez que inicies tu entorno de desarrollo de Gutenberg.<\/p>\n<p>Cuando ejecutes <code>npm start<\/code>, un observador se ejecutar\u00e1 en el terminal y reconstruir\u00e1 los archivos JS y CSS despu\u00e9s de cualquier cambio (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">leer m\u00e1s<\/a>).<\/p>\n<\/aside>\n\n<p>Ya est\u00e1s listo para construir tu c\u00f3digo. El siguiente paso es editar el archivo PHP principal del plugin para construir un meta box para el Editor Cl\u00e1sico.<\/p>\n<p>As\u00ed que, antes de pasar a la siguiente secci\u00f3n, <strong>instala y activa el<\/strong> <strong>plugin<\/strong> <strong> <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a><\/strong>.<\/p>\n<p>A continuaci\u00f3n, abre la pantalla Plugins y activa el nuevo plugin <strong>Meta<\/strong> <strong>Fields<\/strong>.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143199 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Activar plugins.\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Activar plugins.<\/figcaption><\/figure>\n<h2>A\u00f1adir un Meta Box al Editor Cl\u00e1sico<\/h2>\n<p>En el contexto del <a href=\"https:\/\/kinsta.com\/es\/blog\/deshabilitar-gutenberg-wordpress-editor\/\">Editor cl\u00e1sico<\/a>, un metabox es un contenedor que contiene elementos de formulario para introducir informaci\u00f3n espec\u00edfica, como el autor de la entrada, etiquetas, categor\u00edas, etc.<\/p>\n<p>Adem\u00e1s de los meta boxes incorporados, los desarrolladores de plugins pueden a\u00f1adir cualquier n\u00famero de <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">meta boxes personalizados<\/a> para incluir elementos de formulario HTML (o cualquier <a href=\"https:\/\/kinsta.com\/es\/blog\/aprender-html\/\">contenido HTML<\/a>) donde los usuarios del plugin puedan introducir datos espec\u00edficos del plugin.<\/p>\n<p>La API de WordPress proporciona funciones \u00fatiles para registrar f\u00e1cilmente meta boxes personalizados que incluyan todos los elementos HTML que tu plugin necesita para funcionar.<\/p>\n<p>Para empezar, a\u00f1ade el siguiente c\u00f3digo al archivo PHP del plugin que acabas de crear:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post',\n\t\t'side',\n\t\t'default'\n\t );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n\t  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n\t  $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n\t  $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n\t  ?&gt;\n\t  &lt;div class=\"inside\"&gt;\n\t  \t  &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\t\n\t\t  &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t  &lt;\/div&gt;\n\t  &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>La funci\u00f3n <code>add_meta_box<\/code> registra un nuevo meta box, mientras que la funci\u00f3n callback construye el HTML que se inyectar\u00e1 en el meta box. No profundizaremos en este tema porque est\u00e1 fuera del alcance de nuestro art\u00edculo, pero encontrar\u00e1s todos los detalles que necesitas <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">aqu\u00ed<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">aqu\u00ed<\/a> y <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">aqu\u00ed<\/a>.<\/p>\n<p>El siguiente paso es crear una funci\u00f3n que guarde los datos introducidos por el autor de la entrada cada vez que se active el <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-hooks\/\">gancho<\/a> <code>save_post<\/code> (consulta <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Recursos para desarrolladores<\/a>):<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_author'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\t$author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n\tupdate_post_meta( $post_id, '_meta_fields_book_title', $title );\n\tupdate_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>De nuevo, consulta la documentaci\u00f3n online para m\u00e1s detalles. Aqu\u00ed s\u00f3lo se\u00f1alaremos el car\u00e1cter de subrayado (<code>_<\/code>) que precede a la meta clave. Esto indica a WordPress que oculte las claves de estos campos personalizados de la lista de campos personalizados disponibles por defecto y hace que tus campos personalizados s\u00f3lo sean visibles en tu metabox personalizado.<\/p>\n<p>La siguiente imagen muestra el aspecto del cuadro meta personalizado en el Editor cl\u00e1sico:<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142726 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"Un meta box personalizado en el Editor cl\u00e1sico.\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">Un meta box personalizado en el Editor cl\u00e1sico.<\/figcaption><\/figure>\n<p>Ahora bien, si desactivas el plugin del Editor cl\u00e1sico y compruebas lo que ocurre en el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor de bloques<\/a>, ver\u00e1s que el cuadro meta sigue apareciendo y funcionando, pero no exactamente de la forma que cabr\u00eda esperar.<\/p>\n<p>Nuestro objetivo es crear un sistema para gestionar los metadatos adjuntos a las entradas del blog o a los <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipos-de-postes-personalizados\/\">tipos de entrada personalizados<\/a> que se integre perfectamente en el editor de bloques. Por esta raz\u00f3n, el c\u00f3digo mostrado hasta ahora s\u00f3lo ser\u00e1 necesario para garantizar la compatibilidad con el Editor cl\u00e1sico.<\/p>\n<p>As\u00ed que, antes de seguir adelante, le diremos a WordPress que elimine el metabox personalizado del editor de bloques a\u00f1adiendo la bandera <code>__back_compat_meta_box<\/code> a la funci\u00f3n <code>add_meta_box<\/code> (consulta tambi\u00e9n <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Banderas de compatibilidad de metabox<\/a> y <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">compatibilidad con versiones anteriores<\/a>).<\/p>\n<p>Volvamos a la funci\u00f3n de devoluci\u00f3n de llamada que registra el meta box y cambi\u00e9mosla como sigue:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post', \n\t\t'side',\n\t\t'default',\n\t\t\/\/ hide the meta box in Gutenberg\n\t\tarray('__back_compat_meta_box' =&gt; true)\n\t );\n}<\/code><\/pre>\n<p>Guarda el archivo del plugin y vuelve al administrador de WordPress. Ahora, ya no deber\u00edas ver el cuadro meta personalizado en el editor de bloques. Si, en cambio, reactivas el Editor cl\u00e1sico, tu metabox personalizado volver\u00e1 a aparecer.<\/p>\n<h2>A\u00f1adir Metacampos Personalizados al Editor de Bloques de Gutenberg (Tres Opciones)<\/h2>\n<p>En nuestros art\u00edculos anteriores sobre el desarrollo de bloques de Gutenberg, proporcionamos descripciones detalladas del editor, sus partes y c\u00f3mo desarrollar <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">bloques est\u00e1ticos<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\">bloques din\u00e1micos<\/a>.<\/p>\n<p>Como hemos mencionado, en este art\u00edculo iremos un paso m\u00e1s all\u00e1 y hablaremos de c\u00f3mo a\u00f1adir metacampos personalizados a las entradas del blog.<\/p>\n<p>Hay varias formas de almacenar y utilizar los metadatos de las entradas en Gutenberg. Aqu\u00ed cubriremos las siguientes:<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Crear un bloque personalizado para almacenar y mostrar metacampos personalizados<\/h3>\n<p>En esta secci\u00f3n, te mostraremos c\u00f3mo crear y gestionar metacampos personalizados desde dentro de un <strong>bloque<\/strong> <strong>din\u00e1mico<\/strong>. Seg\u00fan el Manual del Editor de Bloques, un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">metacampo de una entrada<\/a> \u00abes un objeto de WordPress que se utiliza para almacenar datos adicionales sobre una entrada\u00bb y necesitamos registrar primero un nuevo meta campo antes de poder utilizarlo.<\/p>\n<h4>Registrar metacampos personalizados<\/h4>\n<p>Antes de registrar un meta campo personalizado, debes asegurarte de que el <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipos-de-postes-personalizados\/\">tipo de entrada<\/a> que lo utilizar\u00e1 admite campos personalizados. Adem\u00e1s, cuando registres un metacampo personalizado, debes establecer el par\u00e1metro <code>show_in_rest<\/code> en <code>true<\/code>.<\/p>\n<p>Ahora, vuelve al archivo del plugin. A\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n    foreach( $metafields as $metafield ){\n        \/\/ Pass an empty string to register the meta key across all existing post types.\n        register_post_meta( '', $metafield, array(\n            'show_in_rest' =&gt; true,\n            'type' =&gt; 'string',\n            'single' =&gt; true,\n            'sanitize_callback' =&gt; 'sanitize_text_field',\n            'auth_callback' =&gt; function() { \n                return current_user_can( 'edit_posts' );\n            }\n        ));\n    }  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> registra una meta clave para los tipos de post especificados. En el c\u00f3digo anterior, hemos registrado dos meta campos personalizados para todos los tipos de entrada registrados en tu sitio web que admiten campos personalizados. Para m\u00e1s informaci\u00f3n, consulta la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">referencia de la funci\u00f3n<\/a>.<\/p>\n<p>Una vez hecho esto, abre el archivo <strong>src\/index.js<\/strong> de tu plugin de bloque.<\/p>\n<h4>Registra el tipo de bloque en el cliente<\/h4>\n<p>Ahora ve a la carpeta <strong>wp-content\/plugins\/metadata-block\/src<\/strong> y abre el archivo <strong>src\/index.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\tedit: Edit,\n} );<\/code><\/pre>\n<p>Con los bloques est\u00e1ticos tambi\u00e9n habr\u00edamos visto una <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#indexjs\">funci\u00f3n<code>save<\/code><\/a>. En este caso, falta la funci\u00f3n <code>save<\/code> porque hemos instalado un bloque din\u00e1mico. El contenido mostrado en el frontend se generar\u00e1 din\u00e1micamente mediante PHP.<\/p>\n<h4>Construye el tipo de bloque<\/h4>\n<p>Navega hasta la carpeta <strong>wp-content\/plugins\/metadata-block\/src<\/strong> y abre el archivo <strong>edit.js<\/strong>. Deber\u00edas ver el siguiente c\u00f3digo (sin comentarios):<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>Aqu\u00ed a\u00f1adir\u00e1s el c\u00f3digo para generar el bloque que se mostrar\u00e1 en el editor.<\/p>\n<p>El primer paso es importar los componentes y funciones necesarios para construir el bloque. Aqu\u00ed tienes la lista completa de dependencias:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Si has le\u00eddo nuestros art\u00edculos anteriores, deber\u00edas estar familiarizado con muchas de estas <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">declaraciones<code>import<\/code><\/a>. Aqu\u00ed mostraremos s\u00f3lo un par de ellas:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Una vez que hayas importado estas dependencias, as\u00ed es como <code>useSelect<\/code> y <code>useEntityProp<\/code> en la funci\u00f3n <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> es un gancho personalizado para <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#build-the-block-to-be-rendered-in-the-editor\">recuperar accesorios de selectores registrados<\/a>. Lo utilizaremos para recuperar el tipo de entrada actual (consulta tambi\u00e9n <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"> la referencia @wordpress\/data<\/a> y las <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">introducciones useDispatch y useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> es un gancho personalizado que permite a los bloques recuperar y cambiar los campos meta de las entradas. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">Se define<\/a> como un \u00abgancho que devuelve el valor y un setter para la propiedad especificada de la entidad proporcionada m\u00e1s cercana del tipo especificado\u00bb. Devuelve \u00abun array donde el primer elemento es el valor de la propiedad, el segundo es el setter y el tercero es el objeto de valor completo de la API REST que contiene m\u00e1s informaci\u00f3n como <code>raw<\/code>, <code>rendered<\/code> y <code>protected<\/code> props\u00bb. (Consulta tambi\u00e9n <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">Actualizaciones generales de la API del Editor de bloques<\/a>)<\/li>\n<\/ul>\n<p>Este c\u00f3digo proporciona el actual <code>postType<\/code>, un objeto de metacampos (<code>meta<\/code>), y una funci\u00f3n setter para actualizarlos (<code>setMeta<\/code>).<\/p>\n<p>Ahora sustituye el c\u00f3digo actual de la funci\u00f3n <code>Edit()<\/code> por el siguiente:<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n\tconst blockProps = useBlockProps();\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\tconst bookTitle = meta[ '_meta_fields_book_title' ];\n\tconst bookAuthor = meta[ '_meta_fields_book_author' ];\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_title: newValue } );\n    };\n\tconst updateBookAuthorMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_author: newValue } );\n\t};\nreturn ( ... );\n}<\/code><\/pre>\n<p>Otra vez:<\/p>\n<ul>\n<li>Utilizamos <code>useSelect<\/code> para obtener el tipo de entrada actual.<\/li>\n<li><code>useEntityProp<\/code> devuelve una matriz de metacampos y una funci\u00f3n setter para establecer nuevos meta valores.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> y <code>updateBookAuthorMetaValue<\/code> son dos manejadores de eventos para guardar los valores de los metacampos.<\/li>\n<\/ul>\n<p>El siguiente paso es construir el c\u00f3digo JSX (JavaScript XML) devuelto por la funci\u00f3n <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n\t...\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelBody \n\t\t\t\t\ttitle={ __( 'Book Details' )}\n\t\t\t\t\tinitialOpen={true}\n\t\t\t\t&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={__( 'Book title' )}\n\t\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Book author' ) }\n\t\t\t\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;RichText \n\t\t\t\t\ttagName=\"h3\"\n\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\t\/&gt;\n\t\t\t\t&lt;TextControl\n\t\t\t\t\tlabel=\"Book Author\"\n\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>El componente <code>RichText<\/code> proporciona una entrada de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">contenido editable<\/a>, mientras que <code>TextControl<\/code> proporciona campos de texto simples.<\/p>\n<p>Tambi\u00e9n creamos un panel de barra lateral que contiene dos campos de entrada para utilizarlos en lugar de los dos controles de formulario incluidos en el bloque.<\/p>\n<p>Guarda el archivo y vuelve al editor. A\u00f1ade el bloque <strong>Meta Fields<\/strong> desde el insertador de bloques y rellena el t\u00edtulo y el autor del libro.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142769 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Un bloque personalizado que incluye dos metacampos personalizados.\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Un bloque personalizado que incluye dos metacampos personalizados.<\/figcaption><\/figure>\n<p>Observar\u00e1s que cada vez que cambies el valor del campo en el bloque, tambi\u00e9n cambiar\u00e1 el valor del campo de texto correspondiente en la barra lateral.<\/p>\n<p>A continuaci\u00f3n, tenemos que crear el c\u00f3digo PHP que genera el HTML que se mostrar\u00e1 en el frontend.<\/p>\n<h4>Mostrar el bloque en el frontend<\/h4>\n<p>Abre de nuevo el archivo PHP principal en tu editor de c\u00f3digo y reescribe la funci\u00f3n de llamada de retorno que genera la salida del bloque de la siguiente manera:<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n\tregister_block_type(\n\t\t__DIR__ . '\/build',\n\t\tarray(\n\t\t\t'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n\t\t)\n\t);\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n\t\n\t$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n\t$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n\t$output = \"\";\n\n\tif( ! empty( $book_title ) ){\n\t\t$output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n\t}\n\tif( ! empty( $book_author ) ){\n\t\t$output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n\t}\n\tif( strlen( $output ) &gt; 0 ){\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n\t} else {\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n\t}\n}<\/code><\/pre>\n<p>Este c\u00f3digo se explica por s\u00ed mismo. En primer lugar, utilizamos <code>get_post_meta<\/code> para recuperar los valores de los metacampos personalizados. A continuaci\u00f3n, utilizamos esos valores para construir el contenido del bloque. Por \u00faltimo, la funci\u00f3n de devoluci\u00f3n de llamada devuelve el HTML del bloque.<\/p>\n<p>El bloque est\u00e1 listo para ser utilizado. Hemos mantenido intencionadamente el c\u00f3digo de este ejemplo lo m\u00e1s sencillo posible, pero utilizando los componentes nativos de Gutenberg puedes construir bloques m\u00e1s avanzados y sacar el m\u00e1ximo partido de los metacampos personalizados de WordPress.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142768 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Un bloque personalizado que incluye varios metacampos.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Un bloque personalizado que incluye varios metacampos.<\/figcaption><\/figure>\n<p>En nuestro ejemplo, hemos utilizado los elementos <code>h3<\/code> y <code>p<\/code> para construir el bloque para el frontend.<\/p>\n<p>Pero puedes mostrar los datos de muchas formas. La siguiente imagen muestra una simple lista desordenada de metacampos.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142770 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Un bloque de ejemplo en el frontend.\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Un bloque de ejemplo en el frontend.<\/figcaption><\/figure>\n<p>Encontrar\u00e1s el c\u00f3digo completo de este ejemplo en <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">este gist p\u00fablico<\/a>.<\/p>\n<h3>A\u00f1adir un meta box personalizado a la barra lateral del documento<\/h3>\n<p>La segunda opci\u00f3n es adjuntar metacampos personalizados a las entradas mediante un plugin que genera un panel de configuraci\u00f3n en la barra lateral del documento.<\/p>\n<p>El proceso es bastante similar al del ejemplo anterior, salvo que en este caso no necesitaremos un bloque para gestionar los metadatos. Crearemos un componente para generar un panel que incluya un conjunto de controles en la barra lateral Documento siguiendo estos pasos:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Crea un nuevo plugin de bloque con create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registra un metacampo personalizado para el Editor Cl\u00e1sico<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registra los campos meta personalizados en el archivo principal del plugin mediante la funci\u00f3n register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registra un plugin en el archivo index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Construye el componente utilizando los componentes integrados de Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Crear un nuevo plugin de bloque con la herramienta create-block<\/h4>\n<p>Para crear un nuevo plugin de bloque, sigue los pasos de la <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">secci\u00f3n anterior<\/a>. Puedes crear un nuevo plugin o editar los scripts que construimos en el ejemplo anterior.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registrar un Meta Box Personalizada para el Editor Cl\u00e1sico<\/h4>\n<p>A continuaci\u00f3n, debes registrar un metabox personalizado para garantizar la compatibilidad con versiones anteriores de los sitios web de WordPress que a\u00fan utilicen el Editor cl\u00e1sico. El proceso es el mismo que el descrito en la <a href=\"#add-a-meta-box-to-the-classic-editor\">secci\u00f3n anterior<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registrar los metacampos personalizados en el archivo principal del plugin<\/h4>\n<p>El siguiente paso es registrar los metacampos personalizados en el archivo principal del plugin a trav\u00e9s de la funci\u00f3n <code>register_post_meta()<\/code>. De nuevo, puedes seguir el <a href=\"#register-custom-meta-fields\">ejemplo anterior<\/a>.<\/p>\n<h4 id=\"option-2-register-plugin\">Registrar un plugin en el archivo index.js<\/h4>\n<p>Una vez que hayas completado los pasos anteriores, es hora de registrar un plugin en el archivo <strong>index.js<\/strong> para renderizar un componente personalizado.<\/p>\n<p>Antes de registrar el plugin, crea una carpeta <strong>components<\/strong> dentro de la carpeta <strong>src<\/strong> del plugin. Dentro de la carpeta <strong>components<\/strong>, crea un nuevo archivo <strong>MetaBox.js<\/strong>. Puedes elegir el nombre que creas conveniente para tu componente. S\u00f3lo aseg\u00farate de seguir las <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">mejores pr\u00e1cticas de nomenclatura<\/a> en React.<\/p>\n<p>Antes de continuar, instala el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">m\u00f3dulo<code>@wordpress\/plugins<\/code><\/a> desde tu herramienta de l\u00ednea de comandos.<\/p>\n<p>Det\u00e9n el proceso (mac), instala el m\u00f3dulo y vuelve a iniciar el proceso:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>Una vez hecho esto, abre el archivo <strong>index.js<\/strong> de tu plugin y a\u00f1ade el siguiente c\u00f3digo.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>Este c\u00f3digo es bastante autoexplicativo. Sin embargo, queremos detenernos un momento en las dos declaraciones <code>import<\/code> para aquellos lectores que no tengan conocimientos avanzados de React.<\/p>\n<p>Con la primera sentencia <code>import<\/code>, encerramos el nombre de la funci\u00f3n entre llaves. Con la segunda sentencia <code>import<\/code>, el nombre del componente no va entre llaves.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Una sentencia <code>import<\/code> sin llaves se utiliza para <strong>importar la exportaci\u00f3n por defecto<\/strong>. Una sentencia <code>import<\/code> con llaves se utiliza para <strong>importar una exportaci\u00f3n con nombre<\/strong>. Para m\u00e1s detalles, consulta los siguientes recursos:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Importar y exportar componentes<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Importar un componente<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">\u00bfCu\u00e1ndo debo utilizar llaves en la importaci\u00f3n ES6?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>A continuaci\u00f3n, registra tu plugin:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> simplemente registra un plugin. La funci\u00f3n acepta dos par\u00e1metros:<\/p>\n<ul>\n<li>Una cadena \u00fanica que identifica al complemento<\/li>\n<li>Un objeto de configuraci\u00f3n del plugin. Ten en cuenta que la propiedad <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">debe estar especificada<\/a> y debe ser una funci\u00f3n v\u00e1lida.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Construir el componente utilizando los componentes incorporados de Gutenberg<\/h4>\n<p>Es hora de construir nuestro componente React. Abre el archivo <strong>MetaBox.js<\/strong> (o como lo hayas llamado) y a\u00f1ade las siguientes sentencias import:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>La funci\u00f3n <code>compose<\/code> realiza la <strong>composici\u00f3n de funciones<\/strong>, lo que significa que el resultado de una funci\u00f3n se pasa a otra funci\u00f3n.Antes de poder utilizar <code>compose<\/code>, puede que necesites instalar el m\u00f3dulo correspondiente:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Veremos la funci\u00f3n <code>compose<\/code> en acci\u00f3n dentro de un momento.<\/li>\n<li><code>withSelect<\/code> y <code>withDispatch<\/code> son dos <strong>componentes de orden superior<\/strong> que te permiten obtener o enviar datos desde o hacia un almac\u00e9n de WordPress. <code>withSelect<\/code> se utiliza para inyectar accesorios derivados del estado utilizando <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">selectores<\/a> registrados, <code>withDispatch<\/code> se utiliza para enviar accesorios utilizando <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">creadores de acciones<\/a> registrados.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> renderiza elementos en la barra lateral del documento (consulta el c\u00f3digo fuente <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">en Github<\/a>).<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, crear\u00e1s el componente para mostrar el panel metabox en la barra lateral del documento. En tu archivo <strong>MetaBox.js<\/strong>, a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n\tif ( 'post' !== postType ) return null;\n\n\treturn(\n\t\t&lt;PluginDocumentSettingPanel \n\t\t\ttitle={ __( 'Book details' ) } \n\t\t\ticon=\"book\"\n\t\t\tinitialOpen={ false }\n\t\t&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_title }\n\t\t\t\t\tlabel={ __( \"Title\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_author }\n\t\t\t\t\tlabel={ __( \"Author\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_publisher }\n\t\t\t\t\tlabel={ __( \"Publisher\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;DateTimePicker\n\t\t\t\t\tcurrentDate={ metaFields._meta_fields_book_date }\n\t\t\t\t\tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n\t\t\t\t\t__nextRemoveHelpButton\n\t\t\t\t\t__nextRemoveResetButton\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t);\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n\t\tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n\t\tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n\t\tsetMetaFields ( newValue ) {\n\t\t\tdispatch('core\/editor').editPost( { meta: newValue } )\n\t\t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>Vamos a desglosar este c\u00f3digo.<\/p>\n<ul>\n<li>El <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\">elemento<code>PluginDocumentSettingPanel<\/code><\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">crea un nuevo panel<\/a> en la barra lateral del documento. Establecemos el t\u00edtulo (\u00abBook Details\u00bb) y el icono, y establecemos <code>initialOpen<\/code> en <code>false<\/code>, lo que significa que inicialmente el panel est\u00e1 cerrado.<\/li>\n<li>Dentro de <code>PluginDocumentSettingPanel<\/code> tenemos tres campos de texto y un elemento <code>DateTimePicker<\/code> que permite al usuario establecer la fecha de publicaci\u00f3n.<\/li>\n<li><code>withSelect<\/code> proporciona acceso a la funci\u00f3n <code>select<\/code> que estamos utilizando para recuperar <code>metaFields<\/code> y <code>postType<\/code>. <code>withDispatch<\/code> proporciona acceso a la funci\u00f3n <code>dispatch<\/code>, que permite actualizar los valores de los metadatos.<\/li>\n<li>Por \u00faltimo, la funci\u00f3n <code>compose<\/code> nos permite componer nuestro componente con componentes de orden superior <code>withSelect<\/code> y <code>withDispatch<\/code>. Esto da acceso al componente a las propiedades <code>metaFields<\/code> y <code>postType<\/code> y a la funci\u00f3n <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Guarda tu archivo <strong>MetaBox.js<\/strong> y crea una nueva entrada en tu sitio web de desarrollo de WordPress y echa un vistazo a la barra lateral del documento. Deber\u00edas ver el nuevo panel de <strong>Book Details<\/strong>.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"Un panel metabox personalizado en Gutenberg.\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Un panel metabox personalizado en Gutenberg.<\/figcaption><\/figure>\n<p>Ahora haz tus pruebas. Establece los valores de tus meta campos personalizados y guarda la entrada. Despu\u00e9s recarga la p\u00e1gina y comprueba si los valores que has introducido est\u00e1n en su sitio.<\/p>\n<p>A\u00f1ade el bloque que hemos construido en la secci\u00f3n anterior y comprueba si todo funciona correctamente.<\/p>\n<h3>A\u00f1adir una barra lateral personalizada para gestionar los metadatos de la entrada<\/h3>\n<p>Si tienes un gran n\u00famero de meta campos personalizados que a\u00f1adir a tus entradas o tipos de entrada personalizados, tambi\u00e9n puedes crear una Barra Lateral de Configuraci\u00f3n Personalizada espec\u00edfica para tu plugin.<\/p>\n<p>El proceso es muy similar al del ejemplo anterior, as\u00ed que si has entendido los pasos que se han comentado en la secci\u00f3n anterior, no tendr\u00e1s ninguna dificultad para crear una Barra Lateral Personalizada para Gutenberg.<\/p>\n<p>De nuevo:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Crea un nuevo plugin de bloque con create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Registra un metabox personalizado para el Editor Cl\u00e1sico<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Registra los campos meta personalizados en el archivo principal del plugin mediante la funci\u00f3n register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Registra un plugin en el archivo index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Construye el componente utilizando los componentes integrados de Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Crear un nuevo plugin de bloque con la herramienta create-block<\/h4>\n<p>De nuevo, para crear un nuevo plugin de bloque, sigue los pasos descritos anteriormente. Puedes crear un nuevo plugin o editar los scripts creados en los ejemplos anteriores.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registra una Meta Box Personalizada para el Editor Cl\u00e1sico<\/h4>\n<p>Ahora registra un metabox personalizado para garantizar la compatibilidad con versiones anteriores de los sitios web de WordPress que a\u00fan utilizan el Editor cl\u00e1sico. El proceso es el mismo que el descrito en la secci\u00f3n anterior.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registrar los metacampos personalizados en el archivo principal del plugin<\/h4>\n<p>Registra los metacampos personalizados en el archivo principal del plugin mediante la funci\u00f3n <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">Registrar un plugin en el archivo index.js<\/h4>\n<p>Ahora crea un archivo <strong>CustomSidebar.js<\/strong> vac\u00edo en tu carpeta de <strong>componentes<\/strong>.<\/p>\n<p>Una vez hecho esto, cambia tu archivo <strong>index.js<\/strong> de la siguiente manera:<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n    render: CustomSidebar\n} );<\/code><\/pre>\n<p>Con el c\u00f3digo anterior importamos primero el componente <code>CustomSidebar<\/code>, y luego le decimos a la funci\u00f3n <code>registerPlugin<\/code> que renderice el nuevo componente.<\/p>\n<h4 id=\"#option-3-build-component\">Construir el componente utilizando los componentes incorporados de Gutenberg<\/h4>\n<p>A continuaci\u00f3n, abre el archivo <strong>CustomSidebar.js<\/strong> y a\u00f1ade las siguientes dependencias:<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Deber\u00edas darte cuenta de que estamos importando dos nuevos componentes:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> a\u00f1ade un icono en la barra de herramientas de Gutenberg que, al hacer clic, muestra una barra lateral que incluye el contenido envuelto en el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">elemento<code>&lt;PluginSidebar \/&gt;<\/code><\/a> (El componente tambi\u00e9n est\u00e1 documentado <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">en GitHub<\/a>).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> muestra <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">un elemento de men\u00fa<\/a> en Plugins en el men\u00fa desplegable <strong>More Menu<\/strong>\u00a0y se puede utilizar para activar el componente <code>PluginSidebar<\/code> correspondiente (v\u00e9ase tambi\u00e9n <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">en GitHub<\/a>).<\/li>\n<\/ul>\n<p>Ahora puedes crear tu componente personalizado:<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n        \n    if ( 'post' !== postType ) return null;\n\n    return (\n        &lt;&gt;\n            &lt;PluginSidebarMoreMenuItem \n                target=\"metadata-sidebar\" \n                icon=\"book\"\n            &gt;\n                Metadata Sidebar\n            &lt;\/PluginSidebarMoreMenuItem&gt;\n            &lt;PluginSidebar \n                name=\"metadata-sidebar\" \n                icon=\"book\" \n                title=\"My Sidebar\"\n            &gt;\n                &lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_title }\n                            label={ __( \"Title\" ) }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_author }\n                            label={ __(\"Author\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_publisher }\n                            label={ __(\"Publisher\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ metaFields._meta_fields_book_date }\n                            onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/PluginSidebar&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>El paso final es la composici\u00f3n del componente con los componentes de orden superior <code>withSelect<\/code> y <code>withDispatch<\/code>:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n        metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n        setMetaFields ( newValue ) {\n            dispatch('core\/editor').editPost( { meta: newValue } )\n        }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Guarda los cambios y comprueba la interfaz del editor. Si abres el desplegable <strong>Opciones<\/strong>, ver\u00e1s un nuevo elemento <strong>Barra lateral de metadatos<\/strong> en la secci\u00f3n <strong>Plugins<\/strong>. Si haces clic en el nuevo elemento, se activar\u00e1 tu flamante barra lateral personalizada.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143176 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"El componente PluginSidebarMoreMenuItem a\u00f1ade un elemento de men\u00fa bajo Opciones - Plugins.\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">El componente PluginSidebarMoreMenuItem a\u00f1ade un elemento de men\u00fa bajo Opciones &#8211; Plugins.<\/figcaption><\/figure>\n<p>Lo mismo ocurre cuando haces clic en el icono del libro de la esquina superior derecha.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143175 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"La barra lateral de Configuraci\u00f3n del Plugin.\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">La barra lateral de Configuraci\u00f3n del Plugin.<\/figcaption><\/figure>\n<p>Ahora vuelve a tu sitio web de desarrollo, y crea una nueva entrada de blog. Rellena tus meta campos, y luego a\u00f1ade el bloque al lienzo del editor. Deber\u00eda incluir los mismos metavalores que introdujiste en tu barra lateral personalizada.<\/p>\n<p>Guarda la entrada y previsualiza la p\u00e1gina en el frontend. Deber\u00edas ver tu ficha con el t\u00edtulo del libro, el autor, la editorial y la fecha de publicaci\u00f3n.<\/p>\n<p>Encontrar\u00e1s el c\u00f3digo completo de este art\u00edculo en este <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">gist p\u00fablico<\/a>.<\/p>\n\n<h2>Lecturas Adicionales<\/h2>\n<p>En este art\u00edculo hemos tratado m\u00faltiples temas, desde selectores hasta componentes de orden superior y mucho m\u00e1s. Tambi\u00e9n hemos enlazado los principales recursos que hemos utilizado como referencia a lo largo del art\u00edculo.<\/p>\n<p>Pero si deseas profundizar en esos temas, tambi\u00e9n puedes consultar los siguientes recursos adicionales:<\/p>\n<h3>Documentaci\u00f3n de Gutenberg y Recursos Oficiales de WordPress<\/h3>\n<ul>\n<li>Manual del Plugin \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Custom Meta Boxes<\/a><\/li>\n<li>Manual del Plugin \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">Managing Post Metadata<\/a><\/li>\n<li>Gu\u00edas Pr\u00e1cticas \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Meta Boxes<\/a><\/li>\n<li>Gu\u00edas Pr\u00e1cticas \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Plugin Sidebar<\/a><\/li>\n<li>Manual del Editor de Bloques \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>Referencia de Paquetes \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Paquetes \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">Comparaci\u00f3n con Redux<\/a><\/li>\n<li>Paquetes \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">withDispatch<\/a><\/li>\n<li>Paquetes \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Paquetes \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Paquetes \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">select<\/a><\/li>\n<\/ul>\n<h3>M\u00e1s recursos oficiales<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Componentes de orden superior<\/a> en React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Creadores de acciones<\/a> en Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">Derivar datos con selectores<\/a> en Redux<\/li>\n<\/ul>\n<h3>Recursos adicionales de la comunidad<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Ganchos fant\u00e1sticos y d\u00f3nde utilizarlos<\/a> (por Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">Visi\u00f3n general e introducci\u00f3n a las series de datos de WordPress<\/a> (por Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Gu\u00eda de estilo React\/JSX de Airbnb<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">Componentes de orden superior (HOC) de React<\/a> (por Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Composici\u00f3n de funciones en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Solicitar datos en Gutenberg con getEntityRecords<\/a> (por Ryan Welcher)<\/li>\n<\/ul>\n<h3>Lecturas \u00fatiles del sitio web de Kinsta<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">\u00bfQu\u00e9 es React.js? Un vistazo a la popular biblioteca JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/practicas-de-react\/\">Las mejores pr\u00e1cticas de React para mejorar tu juego<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-de-componentes-react\/\">Bibliotecas de componentes de React UI<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/workflow-wordpress\/\">C\u00f3mo crear un flujo de trabajo de WordPress eficaz para desarrolladores<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/salario-desarrollador-wordpress\/\">El salario de un desarrollador de WordPress: La media y c\u00f3mo aumentar el tuyo<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">\u00bfQu\u00e9 es JavaScript? Un vistazo al lenguaje de programaci\u00f3n m\u00e1s popular de la Web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/errores-en-javascript\/\">Gu\u00eda definitiva para gestionar errores en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">Las 40 mejores bibliotecas y marcos JavaScript para 2023<\/a><\/li>\n<\/ul>\n<h2>Resumen<\/h2>\n<p>En este tercer art\u00edculo de nuestra serie sobre el desarrollo de bloques de Gutenberg, hemos tratado nuevos temas avanzados que deber\u00edan completar el panorama esbozado en los art\u00edculos anteriores sobre el <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\">desarrollo de bloques din\u00e1micos<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">est\u00e1ticos<\/a>.<\/p>\n<p>Ahora deber\u00edas ser capaz de aprovechar el potencial de los campos personalizados en Gutenberg y crear sitios web de WordPress m\u00e1s avanzados y funcionales.<\/p>\n<p>Pero a\u00fan hay m\u00e1s. Con los conocimientos que has adquirido en nuestros art\u00edculos sobre el desarrollo de bloques, tambi\u00e9n deber\u00edas tener una buena idea de c\u00f3mo desarrollar componentes React fuera de WordPress. Despu\u00e9s de todo, Gutenberg es una SPA basada en React.<\/p>\n<p>\u00a1Y ahora te toca a ti! \u00bfHas creado ya bloques Gutenberg que utilicen metacampos personalizados? Comparte tus creaciones con nosotros en los comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los campos personalizados proporcionan una forma de a\u00f1adir informaci\u00f3n adicional al contenido del sitio web. Estos fragmentos de informaci\u00f3n suelen conocerse como metadatos. Los metadatos contienen &#8230;<\/p>\n","protected":false},"author":36,"featured_media":62197,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1356,1345],"class_list":["post-62196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-consejos-wordpress","topic-desarrollo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:10:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T20:51:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg\",\"datePublished\":\"2023-01-25T11:10:47+00:00\",\"dateModified\":\"2025-12-16T20:51:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\"},\"wordCount\":4630,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\",\"name\":\"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"datePublished\":\"2023-01-25T11:10:47+00:00\",\"dateModified\":\"2025-12-16T20:51:45+00:00\",\"description\":\"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg","description":"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg","og_description":"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.","og_url":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-01-25T11:10:47+00:00","article_modified_time":"2025-12-16T20:51:45+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"26 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg","datePublished":"2023-01-25T11:10:47+00:00","dateModified":"2025-12-16T20:51:45+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/"},"wordCount":4630,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/","name":"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","datePublished":"2023-01-25T11:10:47+00:00","dateModified":"2025-12-16T20:51:45+00:00","description":"Gutenberg cambia la forma en la que usamos los meta boxes y los campos personalizados en WordPress. En este art\u00edculo, aprender\u00e1s a gestionar los metadatos en el editor de bloques como un profesional.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo A\u00f1adir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/62196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=62196"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/62196\/revisions"}],"predecessor-version":[{"id":81467,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/62196\/revisions\/81467"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/translations\/fr"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/62196\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/62197"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=62196"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=62196"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=62196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}