{"id":77759,"date":"2025-01-20T09:17:47","date_gmt":"2025-01-20T08:17:47","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=77759&#038;preview=true&#038;preview_id=77759"},"modified":"2025-01-22T10:13:53","modified_gmt":"2025-01-22T09:13:53","slug":"plugin-gutenberg","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/","title":{"rendered":"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques"},"content":{"rendered":"<p>A lo largo de los a\u00f1os, hemos explorado Gutenberg desde muchas perspectivas. Hemos diseccionado las <a href=\"https:\/\/kinqsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">funcionalidades del editor<\/a>, las hemos comparado con las de <a href=\"https:\/\/kinqsta.com\/es\/blog\/gutenberg-vs-elementor\/\">otros constructores de p\u00e1ginas<\/a>, hemos construido bloques personalizados <a href=\"https:\/\/kinqsta.com\/es\/blog\/bloques-gutenberg\/\">est\u00e1ticos<\/a> y <a href=\"https:\/\/kinqsta.com\/es\/blog\/bloques-dinamicos\/\">din\u00e1micos<\/a>, y <a href=\"https:\/\/kinqsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\">mucho m\u00e1s<\/a>.<\/p>\n<p>Con las \u00faltimas versiones de WordPress, las nuevas funcionalidades y herramientas te permiten crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente, enriqueciendo y mejorando la funcionalidad del editor de bloques sin necesidad de construir bloques personalizados.<\/p>\n<p>Gracias a la introducci\u00f3n de <a href=\"https:\/\/kinqsta.com\/es\/blog\/patrones-de-bloques-wordpress\/\">patrones de bloques<\/a> y herramientas para desarrolladores como la <a href=\"https:\/\/kinqsta.com\/es\/blog\/api-block-bindings\/\">API Block Bindings<\/a>, hay menos casos de uso para los bloques personalizados. Ahora puedes crear estructuras de bloques complejas, inyectar valores de metadatos en tu contenido y automatizar buena parte de tu flujo de trabajo sin salir de la interfaz del editor. En resumen, ahora WordPress te permite crear sitios complejos con tan pocos clics como nunca antes.<\/p>\n<p>A\u00f1adir controles y herramientas personalizados al editor puede ayudarte a que el proceso de creaci\u00f3n de contenidos sea m\u00e1s fluido. Por ejemplo, puede que necesites a\u00f1adir un panel a la barra lateral de publicaciones para a\u00f1adir funcionalidad o crear una barra lateral personalizada para gestionar varios meta campos.<\/p>\n<p>\u00a1Vamos a empezar!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>C\u00f3mo crear un plugin editor de bloques sin crear un bloque personalizado<\/h2>\n<p>WordPress proporciona una pr\u00e1ctica <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">herramienta de l\u00ednea de comandos<\/a> que te permite instalar un entorno de desarrollo local Node.js con todos los archivos y dependencias necesarios para crear un bloque personalizado. S\u00f3lo tienes que escribir <code>npx @wordpress\/create-block<\/code> en la herramienta de l\u00ednea de comandos, esperar unos segundos y listo.<\/p>\n<p>Sin embargo, crear un bloque personalizado no es necesario cuando s\u00f3lo necesitas a\u00f1adir una barra lateral o un simple panel de configuraci\u00f3n. En este caso, necesitas crear un plugin de Gutenberg.<\/p>\n<p>WordPress no proporciona una utilidad para automatizar el proceso de creaci\u00f3n de un plugin para Gutenberg, por lo que tendr\u00e1s que hacerlo manualmente. Pero no te preocupes demasiado. El proceso es relativamente sencillo, y te guiaremos a trav\u00e9s de \u00e9l. Estos son los pasos a seguir:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Descarga e instala un entorno de desarrollo local<\/h3>\n<p><strong>Lo primero es lo primero:<\/strong> Aunque puedes desarrollar tu plugin Gutenberg en un entorno remoto, puede que te resulte m\u00e1s c\u00f3modo instalar localmente un sitio web de WordPress para el desarrollo. Puedes utilizar cualquier entorno basado en PHP y MySQL. Entre las <a href=\"https:\/\/kinqsta.com\/es\/blog\/mamp-alternativas\/\">muchas alternativas<\/a> disponibles ah\u00ed fuera, te recomendamos <a href=\"https:\/\/kinqsta.com\/es\/devkinsta\/caracteristicas\/\">DevKinsta<\/a>. Es gratuito, con todas las funcionalidades, f\u00e1cil de usar y 100% compatible con el alojamiento de Kinsta.<\/p>\n<p>Una vez que tengas configurado tu sitio de desarrollo, estar\u00e1s listo para crear un plugin de editor de bloques Gutenberg.<\/p>\n<h3>2. Descarga e instala Node.js y npm<\/h3>\n<p>Descarga Node.js de <a href=\"https:\/\/nodejs.org\/\">nodejs.org<\/a> e inst\u00e1lalo en tu ordenador. Esto tambi\u00e9n instalar\u00e1 npm, el gestor de paquetes de Node.<\/p>\n<p>Una vez hecho esto, inicia tu herramienta de l\u00ednea de comandos y ejecuta <code>node -v<\/code> y <code>npm -v<\/code>. Deber\u00edas ver las versiones instaladas de Node.js y npm.<\/p>\n<figure id=\"attachment_190001\" aria-describedby=\"caption-attachment-190001\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190001 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/node-v.png\" alt=\"Comprueba las versiones de node y npm\" width=\"1302\" height=\"308\"><figcaption id=\"caption-attachment-190001\" class=\"wp-caption-text\">Comprueba las versiones de node y npm<\/figcaption><\/figure>\n<h3>3. Crea la carpeta de tu plugin<\/h3>\n<p>Crea una nueva carpeta en <code>wp-content\/plugins<\/code> y ren\u00f3mbrala <code>my-sidebar-plugin<\/code> o algo similar. Recuerda que este nombre debe reflejar el nombre de tu plugin.<\/p>\n<p>Abre el terminal, navega hasta la carpeta del plugin e inicializa un proyecto npm con el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Esto crear\u00e1 un archivo b\u00e1sico <code>package.json<\/code>.<\/p>\n<figure id=\"attachment_190003\" aria-describedby=\"caption-attachment-190003\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190003 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/npm-init-y.png\" alt=\"Crear un archivo package.json b\u00e1sico\" width=\"1302\" height=\"886\"><figcaption id=\"caption-attachment-190003\" class=\"wp-caption-text\">Crear un archivo package.json b\u00e1sico<\/figcaption><\/figure>\n<h3>4. Instala las dependencias<\/h3>\n<p>En tu herramienta de l\u00ednea de comandos, escribe el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<ul>\n<li><code>@wordpress\/plugins<\/code> instala el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">m\u00f3dulo para WordPress<\/a>\u00a0<code>plugins<\/code><\/li>\n<li><code>@wordpress\/scripts<\/code> instala una colecci\u00f3n de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener noreferrer\">scripts reutilizables<\/a> para el desarrollo de WordPress.<\/li>\n<\/ul>\n<p>Se deber\u00eda haber a\u00f1adido una nueva carpeta <code>node_modules<\/code> a tu proyecto.<\/p>\n<p>Ahora, abre tu <code>package.json<\/code> y actualiza el <code>scripts<\/code> como se indica a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"my-sidebar-plugin\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.14.0\",\n\t\t\"@wordpress\/scripts\": \"^30.7.0\"\n\t}\n}<\/code><\/pre>\n<p>Ahora puedes comprobar la carpeta del plugin:<\/p>\n<figure id=\"attachment_190006\" aria-describedby=\"caption-attachment-190006\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190006 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/package-json.png\" alt=\"El proyecto del plugin en Visual Studio Code\" width=\"1862\" height=\"998\"><figcaption id=\"caption-attachment-190006\" class=\"wp-caption-text\">El proyecto del plugin en Visual Studio Code<\/figcaption><\/figure>\n<h3>5. Crea los archivos del plugin<\/h3>\n<p>En el directorio de tu plugin, crea un nuevo archivo <code>.php<\/code> y dale el mismo nombre que a tu carpeta. En nuestro ejemplo, es <code>my-sidebar-plugin.php<\/code>.<\/p>\n<p>Abre el archivo y pega el siguiente c\u00f3digo para registrar el plugin en el servidor:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: My Sidebar Plugin\n *\/\n\nfunction my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>A continuaci\u00f3n, crea una carpeta <code>src<\/code> en el directorio de tu plugin. En ella, crea un nuevo archivo <code>index.js<\/code> con el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">import { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/edit-post';\n\nconst MyPluginSidebar = () =&gt; (\n\t&lt;PluginSidebar\n\t\tname=\"my-sidebar-plugin\"\n\t\ttitle=\"My Sidebar Plugin\"\n\t&gt;\n\t\t&lt;div&gt;\n\t\t\tHello my friends!\n\t\t&lt;\/div&gt;\n\t&lt;\/PluginSidebar&gt;\n);\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<h3>6. Compila el c\u00f3digo<\/h3>\n<p>S\u00f3lo falta la compilaci\u00f3n. Vuelve a la l\u00ednea de comandos y ejecuta el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Esto crea una carpeta <code>build<\/code> con los archivos comprimidos del proyecto.<\/p>\n<figure id=\"attachment_190008\" aria-describedby=\"caption-attachment-190008\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190008 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/plugin-project-vsc.png\" alt=\"La carpeta del proyecto del plugin en VSC\" width=\"2120\" height=\"998\"><figcaption id=\"caption-attachment-190008\" class=\"wp-caption-text\">La carpeta del proyecto del plugin en VSC<\/figcaption><\/figure>\n<p>Cuando hayas terminado, ve a la pantalla de <strong>plugins<\/strong> de tu panel de control de WordPress y activa el plugin. Crea una nueva entrada o p\u00e1gina y haz clic en el icono del plugin en la esquina superior derecha para mostrar tu barra lateral personalizada.<\/p>\n<figure id=\"attachment_190010\" aria-describedby=\"caption-attachment-190010\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190010 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/gutenberg-custom-sidebar.png\" alt=\"Una barra lateral personalizada en el editor de entradas\" width=\"1976\" height=\"552\"><figcaption id=\"caption-attachment-190010\" class=\"wp-caption-text\">Una barra lateral personalizada en el editor de entradas<\/figcaption><\/figure>\n<h3>7. Desarrollar y construir<\/h3>\n<p>Hemos colocado el archivo <code>index.js<\/code> en la carpeta <code>src<\/code>. Utilizar una carpeta <code>src<\/code> es una convenci\u00f3n com\u00fan en el desarrollo de plugins y temas para WordPress, ya que facilita la comprensi\u00f3n de tu c\u00f3digo a otros desarrolladores.<\/p>\n<p>Al colocar tu c\u00f3digo JS en la carpeta <code>src<\/code>, puedes utilizar el comando <code>npm start<\/code> o <code>npm run start<\/code> para iniciar un entorno de desarrollo que supervise los scripts y recompile autom\u00e1ticamente el c\u00f3digo cuando sea necesario. Cuando hayas terminado con el desarrollo, el comando <code>npm build<\/code> o <code>npm run build<\/code> compilar\u00e1 el c\u00f3digo JavaScript en la carpeta <code>build<\/code>, que contendr\u00e1 el c\u00f3digo optimizado para producci\u00f3n.<\/p>\n<p>Ahora, pongamos en pr\u00e1ctica lo que hemos aprendido y modifiquemos el plugin que hemos creado en la secci\u00f3n anterior para a\u00f1adir un nuevo panel a la barra lateral del editor de entradas para gestionar los campos personalizados.<\/p>\n<h2>C\u00f3mo crear una barra lateral adicional para gestionar los campos meta de las entradas<\/h2>\n<p>Nuestro objetivo es crear una barra lateral personalizada que contenga un panel con un \u00fanico campo de texto para a\u00f1adir y editar un meta campo personalizado.<\/p>\n<p>Antes de entrar en materia, debemos mencionar que podr\u00edamos utilizar una meta box personalizada para conseguir el mismo resultado. Con WordPress 6.7, los <a href=\"https:\/\/kinqsta.com\/es\/blog\/wordpress-6-7\/#meta-boxes-in-the-post-editor\">meta boxes se han actualizado<\/a> y ahora son totalmente compatibles con el editor de bloques, as\u00ed que puede que te preguntes por qu\u00e9 gestionar los meta campos desde una barra lateral personalizada en lugar de desde un meta box. La raz\u00f3n es que una barra lateral te permite aprovechar los componentes incorporados. Esto te ayuda a construir interfaces m\u00e1s amigables con potentes controles que tambi\u00e9n deber\u00edan resultar familiares a los usuarios.<\/p>\n<p>Dicho esto, aqu\u00ed tienes el proceso para crear una barra lateral personalizada que te permita gestionar campos personalizados desde el editor.<\/p>\n<h3><code>my-sidebar-plugin.php<\/code><\/h3>\n<h4>Paso 1: Registrar el meta de la entrada<\/h4>\n<p>En primer lugar, debes registrar el campo meta. A\u00f1ade el siguiente c\u00f3digo al archivo principal del plugin:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_meta() {\n\tregister_post_meta(\n\t\t'post',\n\t\t'meta_fields_book_title', \n\t\tarray(\n\t\t\t'show_in_rest' =&gt; true,\n\t\t\t'type' =&gt; 'string',\n\t\t\t'single' =&gt; true,\n\t\t\t'sanitize_callback' =&gt; 'sanitize_text_field',\n\t\t\t'label' =&gt; __( 'Book title', 'my-sidebar-plugin' ),\n\t\t\t'auth_callback' =&gt; function() { \n\t\t\t\treturn current_user_can( 'edit_posts' );\n\t\t\t}\n\t\t)\n\t);\n}\nadd_action( 'init', 'my_sidebar_plugin_register_meta' );<\/code><\/pre>\n<p>La funci\u00f3n <code>register_post_meta<\/code> acepta tres argumentos:<\/p>\n<ul>\n<li>El tipo de publicaci\u00f3n para el que se registrar\u00e1 la meta key. Si dejas la cadena vac\u00eda, la meta key se registrar\u00e1 en todos los tipos de publicaci\u00f3n existentes.<\/li>\n<li>La meta key a registrar. Ten en cuenta que no estamos utilizando un gui\u00f3n bajo al principio de la meta key. Prefijar la meta key con un gui\u00f3n bajo ocultar\u00eda el campo personalizado, por lo que es posible que quieras utilizarlo en una meta box. Sin embargo, ocultar el campo personalizado impedir\u00eda que el campo meta se utilizara a trav\u00e9s de la API Block Bindings en el contenido de la entrada.<\/li>\n<li>Un array de argumentos. Ten en cuenta que debes establecer <code>show_in_rest<\/code> en <code>true<\/code>. Esto expone el metacampo a la API Rest y nos permite vincular el metacampo a atributos de bloque. Para los dem\u00e1s atributos, consulta la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">referencia de la funci\u00f3n<\/a>.<\/li>\n<\/ul>\n<h4>Paso 2: Registrar el meta box<\/h4>\n<p>Para garantizar la compatibilidad con versiones anteriores de tu plugin, debes registrar un meta box personalizado para que los usuarios puedan gestionar tus campos personalizados, aunque utilicen el editor cl\u00e1sico. A\u00f1ade el siguiente c\u00f3digo al archivo PHP de tu plugin:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register meta box\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n * \n *\/\nfunction my_sidebar_plugin_register_meta_box(){\n\tadd_meta_box(\n\t\t'book_meta_box', \/\/ Unique ID\n\t\t__( 'Book details' ), \/\/ Box title\n\t\t'my_sidebar_plugin_meta_box_callback', \/\/ Content callback\n\t\tarray( 'post' ), \/\/ Post types\n\t\t'advanced', \/\/ context\n\t\t'default', \/\/ priority\n\t\tarray('__back_compat_meta_box' =&gt; true) \/\/ hide the meta box in Gutenberg\n\t );\n}\nadd_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );<\/code><\/pre>\n<p>Ahora declara el callback que construye el formulario:<\/p>\n<pre><code class=\"language-php\">\/**\n * Build meta box form\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_nonce_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_meta_box_callback( $post ){\n\twp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );\n\t$title = get_post_meta( $post-&gt;ID, 'meta_fields_book_title', true );\n\t?&gt;\n\t&lt;div class=\"inside\"&gt;\n\t\t&lt;p&gt;&lt;strong&gt;&lt;?php echo __( 'Book title', 'my-sidebar-plugin' ); ?&gt;&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;\n\t&lt;\/div&gt;\n\t&lt;?php\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, escribe la funci\u00f3n para guardar tus metacampos en la base de datos:<\/p>\n<pre><code class=\"language-php\">\/**\n * Save metadata\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_verify_nonce\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/current_user_can\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_text_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_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\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\n\tupdate_post_meta( $post_id, 'meta_fields_book_title', $title );\n}\nadd_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );<\/code><\/pre>\n<p>No profundizaremos en este c\u00f3digo porque est\u00e1 fuera del alcance de este art\u00edculo, pero puedes encontrar toda la informaci\u00f3n que necesites siguiendo los enlaces de los encabezados de las funciones.<\/p>\n<p>Por \u00faltimo, necesitamos poner en cola el archivo <code>index.js<\/code> de nuestro plugin:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Eso es todo para el archivo PHP. A continuaci\u00f3n, tenemos que escribir el c\u00f3digo JS.<\/p>\n<h3><code>index.js<\/code><\/h3>\n<p>Tu <code>index.js<\/code> se encuentra en la carpeta <code>src<\/code>, que es donde almacenas tus archivos JS durante la fase de desarrollo.<\/p>\n<p>Abre tu <code>index.js<\/code> y a\u00f1ade las siguientes <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">declaraciones <code>import<\/code><\/a>:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/editor';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Necesitas estos recursos para construir la barra lateral con los controles necesarios.<\/p>\n<p>A continuaci\u00f3n, tienes que construir el componente de la barra lateral:<\/p>\n<pre><code class=\"language-js\">const MyPluginSidebar = () =&gt; {\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\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginSidebar\n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ticon=\"book\"\n\t\t\t\ttitle=\"My plugin sidebar\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/PluginSidebar&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>La funci\u00f3n <code>registerPlugin<\/code> registra el plugin y genera el componente llamado <code>MyPluginSidebar<\/code>.<\/p>\n<p>La funci\u00f3n <code>MyPluginSidebar<\/code> declara algunas constantes y devuelve el c\u00f3digo JSX del componente.<\/p>\n<ul>\n<li><code>useSelect<\/code> es un hook personalizado para recuperar accesorios de selectores registrados. Lo utilizamos para obtener el tipo de entrada actual. Consulta tambi\u00e9n <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/03\/how-to-work-effectively-with-the-useselect-hook\/\">esta entrada del blog<\/a> de desarrolladores de WordPress.<\/li>\n<li><code>useEntityProp<\/code> devuelve un array de meta campos y una funci\u00f3n setter para establecer nuevos valores meta. Consulta tambi\u00e9n la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-core-data\/#useentityprop\" target=\"_blank\" rel=\"noopener noreferrer\">referencia online<\/a>.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> es un controlador de eventos que guarda el valor del meta campo <code>bookTitle<\/code>.<\/li>\n<\/ul>\n<p>Hemos utilizado algunos componentes integrados para construir nuestra barra lateral:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> te permite a\u00f1adir elementos a la barra de herramientas de las pantallas del editor de Entradas o de Sitios. (Consulta <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\" target=\"_blank\" rel=\"noopener noreferrer\">la referencia del componente<\/a>.)<\/li>\n<li><code>PanelBody<\/code> crea un contenedor plegable que se puede abrir o cerrar. (Consulta la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\">referencia del componente<\/a>.)<\/li>\n<li><code>PanelRow<\/code> es un contenedor gen\u00e9rico para filas dentro de <code>PanelBody<\/code>. (Consulta la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\">referencia del componente<\/a>.)<\/li>\n<li><code>TextControl<\/code> es un campo de una sola l\u00ednea que puede utilizarse para introducir texto libre. (Consulta la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/text-control\/\">referencia del componente<\/a>.)<\/li>\n<\/ul>\n<p>Ahora ejecuta el comando <code>npm run build<\/code>, activa el plugin y crea una nueva entrada. Deber\u00eda aparecer un nuevo icono de libro en la barra lateral superior. Al hacer clic en ese icono, se mostrar\u00e1 la barra lateral de tu plugin.<\/p>\n<figure id=\"attachment_190019\" aria-describedby=\"caption-attachment-190019\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190019 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/plugin-sidebar.png\" alt=\"Una barra lateral personalizada con un campo meta\" width=\"1976\" height=\"558\"><figcaption id=\"caption-attachment-190019\" class=\"wp-caption-text\">Una barra lateral personalizada con un campo meta<\/figcaption><\/figure>\n<p>\u00bfY si no necesitas una nueva barra lateral pero quieres mostrar tu campo personalizado en la barra lateral de la entrada incorporada? S\u00f3lo tienes que sustituir <code>PluginSidebar<\/code> por <code>PluginDocumentSettingPanel<\/code>. Este es tu nuevo archivo <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\n\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\n\nconst MyPluginSidebar = () =&gt; {\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\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginDocumentSettingPanel \n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ttitle=\"Book details\" \n\t\t\t\tclassName=\"my-sidebar-plugin\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>La siguiente imagen muestra el resultado.<\/p>\n<figure id=\"attachment_190023\" aria-describedby=\"caption-attachment-190023\" style=\"width: 1914px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190023 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/default-sidebar-panel.png\" alt=\"Un panel de configuraci\u00f3n personalizado en la barra lateral de la entrada\" width=\"1914\" height=\"1418\"><figcaption id=\"caption-attachment-190023\" class=\"wp-caption-text\">Un panel de configuraci\u00f3n personalizado en la barra lateral de la entrada<\/figcaption><\/figure>\n<h2>Un caso de uso: la anulaci\u00f3n de un patr\u00f3n de bloque para automatizar tu flujo de trabajo<\/h2>\n<p>Ahora puedes a\u00f1adir un valor para el campo personalizado, y estar\u00e1 disponible a trav\u00e9s de la API Block Bindings para su uso con atributos de bloque. Por ejemplo, puedes a\u00f1adir un bloque P\u00e1rrafo a tu contenido y vincular el campo personalizado al atributo <code>content<\/code> del p\u00e1rrafo.<\/p>\n<figure id=\"attachment_190026\" aria-describedby=\"caption-attachment-190026\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190026 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/block-attributes.png\" alt=\"Vinculaci\u00f3n de metacampos a atributos de bloque\" width=\"1912\" height=\"1420\"><figcaption id=\"caption-attachment-190026\" class=\"wp-caption-text\">Vinculaci\u00f3n de metacampos a atributos de bloque<\/figcaption><\/figure>\n<p>Eres libre de cambiar el valor de tu campo personalizado, y estos cambios se aplicar\u00e1n autom\u00e1ticamente al contenido de tu p\u00e1rrafo.<\/p>\n<p>Si te est\u00e1s preguntando si hay algo m\u00e1s que puedas hacer con los campos personalizados y los Enlaces de Bloque, \u00a1la respuesta es s\u00ed! Los patrones de bloque y la API \u00a0Block Bindings te permiten automatizar todo el proceso de creaci\u00f3n de contenido.<\/p>\n<p>Para tener una pista, crea un patr\u00f3n con al menos un encabezado o un p\u00e1rrafo. En este ejemplo, creamos un patr\u00f3n de bloques con un bloque Columnas, una Imagen, un Encabezamiento y un par de bloques Fila, con dos p\u00e1rrafos cada uno.<\/p>\n<figure id=\"attachment_190040\" aria-describedby=\"caption-attachment-190040\" style=\"width: 2116px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190040 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/building-a-pattern.png\" alt=\"Un bloque Columnas con una imagen, un encabezado y dos filas\" width=\"2116\" height=\"1076\"><figcaption id=\"caption-attachment-190040\" class=\"wp-caption-text\">Un bloque Columnas con una imagen, un encabezado y dos filas<\/figcaption><\/figure>\n<p>Cuando est\u00e9s satisfecho con tu dise\u00f1o, selecciona los elementos envolventes y crea un patr\u00f3n sincronizado.<\/p>\n<figure id=\"attachment_190035\" aria-describedby=\"caption-attachment-190035\" style=\"width: 1334px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190035 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/create-pattern.png\" alt=\"Crear patr\u00f3n\" width=\"1334\" height=\"1184\"><figcaption id=\"caption-attachment-190035\" class=\"wp-caption-text\">Crear patr\u00f3n<\/figcaption><\/figure>\n<p>A\u00f1ade un nombre y una categor\u00eda para el patr\u00f3n de bloques, y aseg\u00farate de sincronizarlo.<\/p>\n<figure id=\"attachment_190041\" aria-describedby=\"caption-attachment-190041\" style=\"width: 1386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190041 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/add-new-pattern.png\" alt=\"A\u00f1adir nuevo patr\u00f3n\" width=\"1386\" height=\"994\"><figcaption id=\"caption-attachment-190041\" class=\"wp-caption-text\">A\u00f1adir nuevo patr\u00f3n<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, si creaste el patr\u00f3n en el editor de publicaciones, selecci\u00f3nalo y haz clic en <strong>Editar original<\/strong> en la barra de herramientas del bloque. Tambi\u00e9n puedes ir a la secci\u00f3n <strong>Patrones<\/strong> del editor de Sitios y encontrar el patr\u00f3n en <strong>Mis Patrones<\/strong> o en la categor\u00eda de patrones que hayas establecido antes.<\/p>\n<p>Abre el Editor de c\u00f3digo y busca el bloque que quieras vincular a tu campo personalizado. En el delimitador del bloque, a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-json\">&lt;!-- wp:heading {\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"core\/post-meta\",\n\t\t\t\t\"args\":{\n\t\t\t\t\t\"key\":\"meta_fields_book_title\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n} --&gt;<\/code><\/pre>\n<figure id=\"attachment_190042\" aria-describedby=\"caption-attachment-190042\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190042 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/block-pattern-in-code-editor.png\" alt=\"El delimitador de bloque en el Editor de c\u00f3digo\" width=\"1594\" height=\"1258\"><figcaption id=\"caption-attachment-190042\" class=\"wp-caption-text\">El delimitador de bloque en el Editor de c\u00f3digo<\/figcaption><\/figure>\n<p>Guarda el patr\u00f3n y crea un nuevo post. A\u00f1ade el patr\u00f3n a tu contenido y establece un valor para el campo personalizado. Deber\u00edas ver que ese valor se aplica autom\u00e1ticamente a tu patr\u00f3n.<\/p>\n<figure id=\"attachment_190044\" aria-describedby=\"caption-attachment-190044\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190044 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/01\/bound-blocks-in-a-synced-block-pattern.png\" alt=\"Un encabezado enlazado en un patr\u00f3n sincronizado\" width=\"2120\" height=\"1226\"><figcaption id=\"caption-attachment-190044\" class=\"wp-caption-text\">Un encabezado enlazado en un patr\u00f3n sincronizado<\/figcaption><\/figure>\n<p>Ahora, puedes jugar con este plugin. Gracias a los campos personalizados y a la API Block Bindings, puedes a\u00f1adir m\u00e1s campos y controles para rellenar autom\u00e1ticamente tus dise\u00f1os.<\/p>\n<h2>Resumen<\/h2>\n<p>Desarrollar un bloque personalizado puede ser todo un reto. Pero, \u00bfnecesitas construir un bloque cuando puedes hacer m\u00e1s con un patr\u00f3n de bloque?<\/p>\n<p>Con los avances en los patrones de bloques y la introducci\u00f3n de potentes funcionalidades para desarrolladores, como la API Block Bindings, ya no es necesario crear bloques personalizados para construir sitios web sofisticados y funcionales. Un simple plugin y un patr\u00f3n de bloques pueden automatizar eficazmente una parte importante de tu flujo de trabajo.<\/p>\n<p>Este tutorial ha demostrado c\u00f3mo a\u00f1adir funcionalidad al editor de entradas de WordPress mediante un plugin. Sin embargo, lo que hemos tratado en este post s\u00f3lo rasca la superficie de lo que puedes conseguir con las s\u00f3lidas funcionalidades que ahora ofrece WordPress<\/p>\n<p>\u00bfHas explorado ya estas funcionalidades y has a\u00f1adido funcionalidad al editor de WordPress? Si es as\u00ed, no dudes en compartir tus experiencias y puntos de vista en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A lo largo de los a\u00f1os, hemos explorado Gutenberg desde muchas perspectivas. Hemos diseccionado las funcionalidades del editor, las hemos comparado con las de otros constructores &#8230;<\/p>\n","protected":false},"author":36,"featured_media":77760,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1329,1345],"class_list":["post-77759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-consejos-tecnologicos","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 construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques<\/title>\n<meta name=\"description\" content=\"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\" \/>\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=\"2025-01-20T08:17:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-22T09:13:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png\" \/>\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=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques\",\"datePublished\":\"2025-01-20T08:17:47+00:00\",\"dateModified\":\"2025-01-22T09:13:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\"},\"wordCount\":2449,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\",\"name\":\"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"datePublished\":\"2025-01-20T08:17:47+00:00\",\"dateModified\":\"2025-01-22T09:13:53+00:00\",\"description\":\"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques","description":"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.","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:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques","og_description":"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.","og_url":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2025-01-20T08:17:47+00:00","article_modified_time":"2025-01-22T09:13:53+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques","datePublished":"2025-01-20T08:17:47+00:00","dateModified":"2025-01-22T09:13:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/"},"wordCount":2449,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/","url":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/","name":"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","datePublished":"2025-01-20T08:17:47+00:00","dateModified":"2025-01-22T09:13:53+00:00","description":"Aprende a crear dise\u00f1os complejos m\u00e1s f\u00e1cilmente creando un plugin de Gutenberg para mejorar la funcionalidad del editor de bloques.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinqsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo construir un plugin de Gutenberg para a\u00f1adir funcionalidad al editor de bloques"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/77759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=77759"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/77759\/revisions"}],"predecessor-version":[{"id":77797,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/77759\/revisions\/77797"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77759\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/77760"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=77759"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=77759"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=77759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}