{"id":55943,"date":"2022-08-08T08:57:37","date_gmt":"2022-08-08T06:57:37","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=55943&#038;preview=true&#038;preview_id=55943"},"modified":"2025-01-20T11:03:18","modified_gmt":"2025-01-20T10:03:18","slug":"bloques-dinamicos","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/","title":{"rendered":"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg"},"content":{"rendered":"<p>\u00bfTodav\u00eda est\u00e1s desconcertado por <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a>? \u00bfO eres de los que creen firmemente en el potencial del editor de bloques y quieres descubrir hasta d\u00f3nde puede llegar su creatividad utilizando el editor de bloques?<\/p>\n<p>Sea cual sea la categor\u00eda de usuarios a la que pertenezcas, Gutenberg ha llegado para quedarse y este post te dar\u00e1 una visi\u00f3n general en profundidad de lo que ocurre entre bastidores del editor de bloques de WordPress. \u00a1Pero eso no es todo!<\/p>\n<p>Tras <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">nuestro anterior tutorial<\/a>, en el que proporcionamos una introducci\u00f3n general al desarrollo de bloques de Gutenberg, este art\u00edculo va m\u00e1s all\u00e1 de lo b\u00e1sico, presentando tipos de bloques m\u00e1s avanzados. Estos bloques se denominan bloques din\u00e1micos.<\/p>\n<p>Hoy aprender\u00e1s qu\u00e9 son los bloques din\u00e1micos, c\u00f3mo funcionan y todo lo que necesitas saber para crear bloques din\u00e1micos desde cero.<\/p>\n<p>Entonces, \u00bfqu\u00e9 son los bloques din\u00e1micos de Gutenberg y cu\u00e1les son las principales diferencias entre los bloques <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">est\u00e1ticos<\/a> y los din\u00e1micos?<\/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>\u00bfQu\u00e9 Son Los Bloques Din\u00e1micos? Un Ejemplo<\/h2>\n<p>Mientras que con los bloques est\u00e1ticos el contenido es a\u00f1adido manualmente por el usuario mientras edita una entrada o p\u00e1gina, con los bloques din\u00e1micos el contenido se carga y procesa sobre la marcha al cargar la p\u00e1gina. Con los bloques din\u00e1micos, el contenido del bloque se recoge de la base de datos y se muestra tal cual o como resultado de cualquier tipo de manipulaci\u00f3n de datos.<\/p>\n<p>Vamos a explicarlo con un ejemplo. Digamos que quieres crear un grupo de bloques anidados que muestren los detalles del autor de la entrada con una selecci\u00f3n de las \u00faltimas entradas del mismo autor.<\/p>\n<figure id=\"attachment_119966\" aria-describedby=\"caption-attachment-119966\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119966 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/from-the-author.jpg\" alt=\"Un bloque de grupo que incluye el autor de la publicaci\u00f3n y sus \u00faltimas publicaciones\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119966\" class=\"wp-caption-text\">Un bloque de grupo que incluye el autor de la publicaci\u00f3n y sus \u00faltimas publicaciones<\/figcaption><\/figure>\n<p>Como usuarios de Gutenberg, podr\u00edas utilizar los siguientes bloques:<\/p>\n<ul>\n<li>El bloque del core <strong>Encabezamiento<\/strong><\/li>\n<li>El bloque del core <strong>Autor de la publicaci\u00f3n<\/strong><\/li>\n<li>El bloque del core <strong>\u00daltimas publicaciones<\/strong><\/li>\n<\/ul>\n<p>Tambi\u00e9n podr\u00edas crear un grupo que incluya esos bloques y a\u00f1adir el grupo a los bloques reutilizables para su uso futuro.<\/p>\n<figure id=\"attachment_119967\" aria-describedby=\"caption-attachment-119967\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119967 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-to-reusable-blocks.jpg\" alt=\"A\u00f1adiendo un bloque de grupo a bloques reutilizables\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119967\" class=\"wp-caption-text\">A\u00f1adiendo un bloque de grupo a bloques reutilizables<\/figcaption><\/figure>\n<p>Es bastante sencillo, \u00bfverdad? Puedes crear un bloque din\u00e1mico y a\u00f1adirlo a tus publicaciones y p\u00e1ginas en un abrir y cerrar de ojos.<\/p>\n<p>A partir de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a>, el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor de bloques<\/a> ofrece m\u00e1s de 90 bloques diferentes, y lo m\u00e1s probable es que encuentres el bloque adecuado para ti nada m\u00e1s sacarlo de la caja. Y, si necesitas m\u00e1s, haz una b\u00fasqueda r\u00e1pida en el directorio de plugins de WordPress y encontrar\u00e1s un mont\u00f3n de plugins gratuitos que proporcionan <a href=\"https:\/\/wordpress.org\/plugins\/search\/gutenberg\/\">bloques adicionales<\/a>.<\/p>\n<p>Pero, \u00bfqu\u00e9 ocurre si eres un desarrollador de WordPress \u2013 o est\u00e1s planeando una carrera como <a href=\"https:\/\/kinsta.com\/es\/blog\/salario-desarrollador-wordpress\/\">desarrollador de WordPress<\/a>? Quiz\u00e1 tengas necesidades muy espec\u00edficas y no encuentres el bloque que buscas, o simplemente quieras adquirir nuevas habilidades profesionales. En tales situaciones, es posible que quieras aprender a crear tus bloques din\u00e1micos.<\/p>\n\n<h2>Los Bloques Din\u00e1micos de Gutenberg desde la Perspectiva del Desarrollador<\/h2>\n<p>Los <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">bloques din\u00e1micos<\/a>\u00a0tienen dos casos de uso principales.<\/p>\n<p>El primer caso de uso es cuando necesitas actualizar el contenido de un bloque cuando la p\u00e1gina que lo contiene no se ha actualizado. Por ejemplo, esto ocurre cuando el bloque incluye una lista de las \u00faltimas publicaciones o comentarios, y en general siempre que el contenido del bloque se genera din\u00e1micamente utilizando datos recuperados de la base de datos.<\/p>\n<figure id=\"attachment_119976\" aria-describedby=\"caption-attachment-119976\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119976 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/query-loop-block.jpg\" alt=\"A\u00f1adiendo un bloque de Query Loop\" width=\"1996\" height=\"1176\"><figcaption id=\"caption-attachment-119976\" class=\"wp-caption-text\">A\u00f1adiendo un bloque de Query Loop<\/figcaption><\/figure>\n<p>El segundo caso de uso es cuando una actualizaci\u00f3n del c\u00f3digo del bloque debe mostrarse inmediatamente en el front-end. Utilizar un bloque din\u00e1mico en lugar de un bloque est\u00e1tico hace que los cambios se apliquen inmediatamente a todas las apariciones del bloque.<\/p>\n<p>En cambio, si cambiaras el HTML producido por un bloque est\u00e1tico, el usuario ver\u00e1 un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">di\u00e1logo de invalidaci\u00f3n<\/a> hasta que se eliminen todas las instancias de la versi\u00f3n anterior del bloque y se sustituyan por la nueva versi\u00f3n, o bien marques la versi\u00f3n antigua como obsoleta (consulta tambi\u00e9n la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">Deprecaci\u00f3n<\/a> y <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">Validaci\u00f3n de Bloques, Deprecaci\u00f3n y Experiencia de Migraci\u00f3n<\/a>).<\/p>\n<figure id=\"attachment_120364\" aria-describedby=\"caption-attachment-120364\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120364 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/this-block-contains-unexpected-or-invalid-content.jpg\" alt=\"Contenido inesperado o no v\u00e1lido.\" width=\"1350\" height=\"378\"><figcaption id=\"caption-attachment-120364\" class=\"wp-caption-text\">Contenido inesperado o no v\u00e1lido.<\/figcaption><\/figure>\n<p>Dicho esto, hay algunos conceptos que debes entender antes de empezar a construir bloques din\u00e1micos.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Estado de la Aplicaci\u00f3n y Almacenamiento de los Datos<\/h3>\n<p>Gutenberg <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#what-is-a-gutenberg-block\">es una aplicaci\u00f3n React SPA<\/a>, y todo en Gutenberg es un componente React. El t\u00edtulo de la entrada, los encabezados, los p\u00e1rrafos, las im\u00e1genes y cualquier bloque de contenido HTML en el editor es un componente React, as\u00ed como los controles de la barra lateral y de la barra de herramientas del bloque.<\/p>\n<p>En nuestro art\u00edculo anterior, s\u00f3lo utilizamos propiedades para almacenar datos. En este art\u00edculo, daremos un paso m\u00e1s introduciendo el concepto de <strong>estado<\/strong>.<\/p>\n<p>En pocas palabras, el objeto <code>state<\/code> es <a href=\"https:\/\/www.w3schools.com\/react\/react_state.asp\">un objeto JavaScript simple<\/a> que se utiliza para contener informaci\u00f3n sobre un componente. El <code>state<\/code> del componente puede cambiar con el tiempo, y cada vez que cambia, el componente se vuelve a renderizar.<\/p>\n<p>Al igual que el objeto <code>state<\/code>, las propiedades son objetos JavaScript planos que se utilizan para contener informaci\u00f3n sobre el componente. Pero hay <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html#what-is-the-difference-between-state-and-props\">una diferencia<\/a> clave entre las propiedades y <code>state<\/code>:<\/p>\n<blockquote><p><code>props<\/code> se pasan al componente (similar a los par\u00e1metros de una funci\u00f3n) mientras que <code>state<\/code> se gestiona dentro del componente (similar a las variables declaradas dentro de una funci\u00f3n).<\/p><\/blockquote>\n<p>Puedes pensar en el estado como una instant\u00e1nea de datos tomada en un momento dado que una aplicaci\u00f3n almacena para controlar el comportamiento de un componente. Por ejemplo, si la barra lateral de ajustes del editor de bloques est\u00e1 abierta, se almacenar\u00e1 una informaci\u00f3n en alg\u00fan lugar del objeto <code>state<\/code>.<\/p>\n<p>Cuando la informaci\u00f3n se comparte dentro de un solo componente, lo llamamos <strong>estado local<\/strong>. Cuando la informaci\u00f3n se comparte entre los componentes de una aplicaci\u00f3n, lo llamamos <strong>Estado de la Aplicaci\u00f3n<\/strong>.<\/p>\n<p>El Estado de la Aplicaci\u00f3n est\u00e1 estrechamente relacionado con el concepto de almacenamiento. Seg\u00fan <a href=\"https:\/\/redux.js.org\/api\/store\">los documentos de Redux<\/a><\/p>\n<blockquote><p>Un almac\u00e9n contiene todo el <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">\u00e1rbol de estado<\/a> de tu aplicaci\u00f3n. La \u00fanica forma de cambiar el estado dentro de \u00e9l es enviar una <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action\">acci\u00f3n<\/a> sobre \u00e9l.<\/p><\/blockquote>\n<p>Por tanto, Redux almacena el estado de una aplicaci\u00f3n en un \u00fanico \u00e1rbol de objetos inmutable (es decir, un almac\u00e9n). El \u00e1rbol de objetos s\u00f3lo puede cambiarse creando un nuevo objeto mediante <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#designing-actions\">acciones<\/a> y <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#writing-reducers\">reductores<\/a>.<\/p>\n<p>En WordPress, los almacenes son gestionados por el <strong>m\u00f3dulo de datos de WordPress<\/strong>.<\/p>\n<h3>Modularidad, Paquetes y Almacenes de Datos en Gutenberg<\/h3>\n<p>El repositorio de Gutenberg est\u00e1 construido desde cero sobre varios <strong>m\u00f3dulos reutilizables e independientes<\/strong> que, combinados entre s\u00ed, construyen la interfaz de edici\u00f3n. Estos m\u00f3dulos tambi\u00e9n se denominan <strong>paquetes<\/strong>.<\/p>\n<p>La documentaci\u00f3n oficial enumera dos <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#types-of-packages\">tipos diferentes de paquetes<\/a>:<\/p>\n<ul>\n<li>Los <strong>paquetes de producci\u00f3n<\/strong> conforman el c\u00f3digo de producci\u00f3n que se ejecuta en el navegador. Hay dos tipos de paquetes de producci\u00f3n en WordPress:\n<ul>\n<li>Los<strong> paquetes con hojas de estilo<\/strong> proporcionan hojas de estilo para que funcionen correctamente.<\/li>\n<li>Los <strong>paquetes con almacenes de datos<\/strong> definen almacenes de datos para manejar su estado. Los <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">paquetes con almacenes de datos<\/a> pueden ser utilizados por plugins y temas de terceros para recuperar y manipular datos.<\/li>\n<\/ul>\n<\/li>\n<li>Los <strong>paquetes de desarrollo<\/strong> se utilizan en el modo de desarrollo. Estos paquetes incluyen herramientas para linting, pruebas, construcci\u00f3n, etc.<\/li>\n<\/ul>\n<p>Aqu\u00ed nos interesan sobre todo los <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">paquetes con almacenes de datos<\/a>, utilizados para recuperar y manipular datos.<\/p>\n<h3>El Almac\u00e9n de Datos de WordPress<\/h3>\n<p>El m\u00f3dulo de datos de WordPress est\u00e1 construido sobre <a href=\"https:\/\/redux.js.org\/\">Redux<\/a> y comparte los <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">tres principios b\u00e1sicos de Redux<\/a>, aunque con <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md#comparison-with-redux\">algunas diferencias clave<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">Redux<\/a> es un gestor de estados para aplicaciones JavaScript. El funcionamiento de Redux se resume en <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">tres principios b\u00e1sicos<\/a>:<\/p>\n<ul>\n<li><strong>Fuente \u00fanica de verdad<\/strong>: El <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">estado global<\/a> de tu aplicaci\u00f3n se almacena en un \u00e1rbol de objetos dentro de un \u00fanico almac\u00e9n.<\/li>\n<li><strong>El estado es de s\u00f3lo lectura<\/strong>: La \u00fanica forma de cambiar el estado es emitir una acci\u00f3n, un objeto que describa lo ocurrido.<\/li>\n<li><strong>Los cambios se realizan con funciones puras<\/strong>: Para especificar c\u00f3mo se transforma el \u00e1rbol de estado mediante acciones, escribes reductores puros.<\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>La documentaci\u00f3n oficial ofrece la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md\">siguiente definici\u00f3n<\/a><\/p>\n<blockquote><p>El m\u00f3dulo de datos de WordPress sirve como centro para gestionar el estado de la aplicaci\u00f3n tanto para los plugins como para el propio WordPress, proporcionando herramientas para gestionar los datos dentro de los distintos m\u00f3dulos y entre ellos. Est\u00e1 dise\u00f1ado como un patr\u00f3n modular para organizar y compartir datos: lo suficientemente simple como para satisfacer las necesidades de un peque\u00f1o plugin, a la vez que escalable para cumplir los requisitos de una aplicaci\u00f3n compleja de una sola p\u00e1gina.<\/p><\/blockquote>\n<p>Por defecto, Gutenberg registra <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/\">varios almacenes de datos<\/a> del estado de la aplicaci\u00f3n. Cada uno de estos almacenes tiene un nombre y un prop\u00f3sito espec\u00edficos:<\/p>\n<ul>\n<li><code>core<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/core-data\">Datos del Core de WordPress<\/a><\/li>\n<li><code>core\/annotations<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/annotations\">Anotaciones<\/a><\/li>\n<li><code>core\/blocks<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/blocks\">Datos de los Tipos de Bloques<\/a><\/li>\n<li><code>core\/block-editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-editor\">Datos del Editor de Bloques<\/a><\/li>\n<li><code>core\/editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/editor\">Los Datos del Editor de Posts<\/a><\/li>\n<li><code>core\/edit-post<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/edit-post\">Datos de la Interfaz de Usuario del Editor<\/a><\/li>\n<li><code>core\/notices<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/notices\">Datos de los Avisos<\/a><\/li>\n<li><code>core\/nux<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/nux\">Datos de la NUX (Nueva Experiencia de Usuario)<\/a><\/li>\n<li><code>core\/viewport<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/viewport\">Datos del Viewport<\/a><\/li>\n<\/ul>\n<p>A trav\u00e9s de estos almacenes, podr\u00e1s acceder a un mont\u00f3n de datos:<\/p>\n<ol>\n<li><strong>Datos relacionados con la entrada actual<\/strong>, como el t\u00edtulo de la entrada, el extracto, las categor\u00edas y etiquetas, los bloques, etc.<\/li>\n<li><strong>Datos relacionados con la interfaz de usuario<\/strong>, como por ejemplo, si un interruptor est\u00e1 activado o desactivado.<\/li>\n<li><strong>Datos relacionados con toda la instalaci\u00f3n de WordPress<\/strong>, como las taxonom\u00edas registradas, los tipos de entradas, el t\u00edtulo del blog, los autores, etc.<\/li>\n<\/ol>\n<p>Estos almacenes viven en el objeto global <code>wp<\/code>. Para acceder al estado de un almac\u00e9n, utilizar\u00e1s la funci\u00f3n <code>select<\/code>.<\/p>\n<p>Para ver c\u00f3mo funciona, crea una nueva entrada o p\u00e1gina y lanza <a href=\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\">el inspector de navegador<\/a>. Busca la consola y escribe la siguiente l\u00ednea de c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\")<\/code><\/pre>\n<p>El resultado ser\u00e1 un objeto que incluye una lista de funciones que puedes utilizar para obtener datos del almac\u00e9n de datos <code>core<\/code>. Estas funciones se llaman <strong>selectores<\/strong> y act\u00faan como interfaces para acceder a los valores de estado.<\/p>\n<figure id=\"attachment_120245\" aria-describedby=\"caption-attachment-120245\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120245 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core.jpg\" alt=\"El objeto del almac\u00e9n de datos del core de WordPress\" width=\"1306\" height=\"1332\"><figcaption id=\"caption-attachment-120245\" class=\"wp-caption-text\">El objeto del almac\u00e9n de datos del core de WordPress<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El objeto <code>selectors<\/code> incluye un conjunto de funciones para acceder y derivar valores de estado. Un selector es una funci\u00f3n que acepta el estado y argumentos opcionales y devuelve alg\u00fan valor del estado. <em>Llamar a los selectores es el mecanismo principal para recuperar datos de tu<\/em> estado, y sirve como una abstracci\u00f3n \u00fatil sobre los datos brutos, que suelen ser m\u00e1s susceptibles de cambio y menos utilizables como <a href=\"https:\/\/redux.js.org\/usage\/structuring-reducers\/normalizing-state-shape#designing-a-normalized-state\">objeto normalizado<\/a>. (Fuente: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16\/packages\/data\/README.md#selectors\">Github<\/a>)<\/p>\n<\/aside>\n\n<p>El almac\u00e9n de datos de WordPress incluye informaci\u00f3n sobre WordPress en general y los selectores son la forma de obtener esa informaci\u00f3n. Por ejemplo, <code>getCurrentUser()<\/code> devuelve los detalles del usuario actual:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getCurrentUser()<\/code><\/pre>\n<figure id=\"attachment_120246\" aria-describedby=\"caption-attachment-120246\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120246\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core-getcurrentuser.jpg\" alt=\"Inspecting getCurrentUser response\" width=\"1306\" height=\"1058\"><figcaption id=\"caption-attachment-120246\" class=\"wp-caption-text\">Inspeccionando la respuesta de getCurrentUser<\/figcaption><\/figure>\n<p>Otro selector que puedes utilizar para recuperar los detalles del usuario del almac\u00e9n de datos es <code>getUsers()<\/code><a id=\"getusers\"><\/a> :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()<\/code><\/pre>\n<p>La siguiente imagen muestra el objeto de respuesta:<\/p>\n<figure id=\"attachment_120247\" aria-describedby=\"caption-attachment-120247\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120247\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getusers.jpg\" alt=\"Inspecting getUsers response\" width=\"1306\" height=\"990\"><figcaption id=\"caption-attachment-120247\" class=\"wp-caption-text\">Inspeccionando la respuesta de getUsers<\/figcaption><\/figure>\n<p>Para obtener los detalles de un solo usuario, puedes escribir la siguiente l\u00ednea<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()[0]<\/code><\/pre>\n<p>Utilizando el mismo selector tambi\u00e9n puedes recuperar los usuarios del sitio con el rol <code>author<\/code> asignado:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core' ).getUsers({ who: 'authors' })<\/code><\/pre>\n<p>Tambi\u00e9n puedes recuperar las taxonom\u00edas registradas:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getTaxonomies()<\/code><\/pre>\n<figure id=\"attachment_120248\" aria-describedby=\"caption-attachment-120248\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120248\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-gettaxonomies.jpg\" alt=\"Inspecting getTaxonomies response.\" width=\"1306\" height=\"790\"><figcaption id=\"caption-attachment-120248\" class=\"wp-caption-text\">Inspeccionando la respuesta de getTaxonomies.<\/figcaption><\/figure>\n<p>Una lista de los tipos de correos registrados:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPostTypes()<\/code><\/pre>\n<p>O una lista de plugins:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPlugins()<\/code><\/pre>\n<p>Ahora vamos a intentar acceder a un almac\u00e9n de datos diferente. Para ello, seguir\u00e1s utilizando la funci\u00f3n <code>select<\/code>, pero proporcionando un espacio de nombres diferente. Intentemos lo siguiente:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\")<\/code><\/pre>\n<p>Ahora obtendr\u00e1s el siguiente objeto de respuesta.<\/p>\n<figure id=\"attachment_120249\" aria-describedby=\"caption-attachment-120249\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120249\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post.jpg\" alt=\"Accessing the Editor\u2019s UI Data\" width=\"1306\" height=\"1310\"><figcaption id=\"caption-attachment-120249\" class=\"wp-caption-text\">Accediendo a los datos de la IU del editor<\/figcaption><\/figure>\n<p>Si quieres saber si la barra lateral de ajustes est\u00e1 abierta o no, utilizar\u00e1s el selector <code>isEditorSidebarOpened<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\").isEditorSidebarOpened()<\/code><\/pre>\n<p>Esta funci\u00f3n devuelve <code>true<\/code> si la barra lateral est\u00e1 abierta:<\/p>\n<figure id=\"attachment_120957\" aria-describedby=\"caption-attachment-120957\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120957\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post-iseditorsidebaropened-2.jpg\" alt=\"The sidebar is open.\" width=\"1718\" height=\"1052\"><figcaption id=\"caption-attachment-120957\" class=\"wp-caption-text\">La barra lateral est\u00e1 abierta.<\/figcaption><\/figure>\n<h2>C\u00f3mo acceder a los datos de las publicaciones<\/h2>\n<p>Ahora deber\u00edas tener una comprensi\u00f3n b\u00e1sica de c\u00f3mo acceder a los datos. Ahora veremos con m\u00e1s detalle un selector espec\u00edfico, la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">funci\u00f3n<code>getEntityRecords<\/code><\/a> , que es el selector que da acceso a los datos de la entrada.<\/p>\n<p>En el editor de bloques, haz clic con el bot\u00f3n derecho y selecciona <strong>Inspeccionar<\/strong>. En la pesta\u00f1a Consola, copia y pega la siguiente l\u00ednea:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post')<\/code><\/pre>\n<p>Esto env\u00eda una petici\u00f3n a la API Rest y devuelve una matriz de registros correspondientes a las \u00faltimas entradas del blog publicadas.<\/p>\n<figure id=\"attachment_120303\" aria-describedby=\"caption-attachment-120303\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120303\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getentityrecords.jpg\" alt=\"getEntityRecords returns a list of posts.\" width=\"1698\" height=\"330\"><figcaption id=\"caption-attachment-120303\" class=\"wp-caption-text\">getEntityRecords devuelve una lista de entradas.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ten en cuenta que la primera vez que env\u00edes la solicitud a la API Rest, la respuesta ser\u00e1 <code>null<\/code> hasta que se haya completado la solicitud. As\u00ed que, si te sale <code>null<\/code>, no te preocupes y vuelve a intentarlo<\/p>\n<\/aside>\n\n<p><code>getEntityRecords<\/code> acepta <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">tres par\u00e1metros<\/a>:<\/p>\n<ul>\n<li><code>kind<\/code> <em>cadena<\/em>: Tipo de entidad (por ejemplo, <code>postType<\/code>).<\/li>\n<li><code>name<\/code> cadena: Nombre de la entidad (por ejemplo, <code>post<\/code>).<\/li>\n<li><code>query<\/code> <em> objeto<\/em>: Consulta de t\u00e9rminos opcional (es decir, <code>{author: 0}<\/code>).<\/li>\n<\/ul>\n<p>Puedes construir peticiones m\u00e1s espec\u00edficas utilizando un <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/posts\/#arguments\">objeto de argumentos<\/a>.<\/p>\n<p>Por ejemplo, puedes decidir que la respuesta s\u00f3lo contenga entradas de una categor\u00eda determinada:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {categories: 3})<\/code><\/pre>\n<p>Tambi\u00e9n puedes solicitar s\u00f3lo art\u00edculos de un autor determinado:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2})<\/code><\/pre>\n<p>Si haces clic en cualquiera de los registros devueltos por <code>getEntityRecords<\/code>, obtendr\u00e1s una lista de propiedades del registro seleccionado:<\/p>\n<figure id=\"attachment_120305\" aria-describedby=\"caption-attachment-120305\" style=\"width: 1846px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120305\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords.jpg\" alt=\"An example API request with getEntityRecords.\" width=\"1846\" height=\"746\"><figcaption id=\"caption-attachment-120305\" class=\"wp-caption-text\">Un ejemplo de solicitud de la API con getEntityRecords.<\/figcaption><\/figure>\n<p>Si quieres que la respuesta incluya la imagen destacada, tendr\u00e1s que a\u00f1adir un argumento adicional a tu petici\u00f3n anterior:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2, _embed: true})<\/code><\/pre>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120307\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Featured image details in getEntityRecords response.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Detalles de la imagen destacada en la respuesta de getEntityRecords.<\/figcaption><\/figure>\n<p>Ahora deber\u00edas entender mejor c\u00f3mo acceder al almac\u00e9n de datos de WordPress y recuperar los detalles de las entradas. Para ver m\u00e1s de cerca el selector <code>getEntityRecords<\/code>, consulta tambi\u00e9n <a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Solicitud de datos en Gutenberg con getEntityRecords<\/a>.<\/p>\n<h2>C\u00f3mo crear un bloque din\u00e1mico: Un proyecto de ejemplo<\/h2>\n<p>Tras nuestra larga premisa te\u00f3rica, podemos pasar a la pr\u00e1ctica y crear un bloque din\u00e1mico utilizando las herramientas que introdujimos en nuestro anterior tutorial de desarrollo de bloques.<\/p>\n<p>En ese art\u00edculo, hablamos de:<\/p>\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#setting-up-your-wordpress-development-environment\">C\u00f3mo configurar un entorno de desarrollo de WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">Qu\u00e9 es un andamio de bloques<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#the-project-building-your-first-gutenberg-block\">C\u00f3mo construir un bloque est\u00e1tico de Gutenberg<\/a><\/li>\n<\/ol>\n<p>Por eso no trataremos esos temas en profundidad en el presente art\u00edculo, pero no dudes en consultar nuestra gu\u00eda anterior para obtener informaci\u00f3n adicional, o simplemente para refrescarla.<\/p>\n<h3>Configurar un entorno de desarrollo de JavaScript<\/h3>\n<p>Empecemos por configurar un entorno de desarrollo de JavaScript.<\/p>\n<h4>Instala o actualiza Node.js<\/h4>\n<p>Primero, <a href=\"https:\/\/nodejs.org\/en\/download\/\">instala o actual<\/a> iza Node.js. Una vez hecho esto, lanza tu herramienta de l\u00ednea de comandos y ejecuta el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Deber\u00edas ver tu versi\u00f3n de Node.<\/p>\n<h4>Configura tu entorno de desarrollo<\/h4>\n<p>A continuaci\u00f3n, necesitar\u00e1s un entorno de desarrollo para WordPress. Para nuestros ejemplos, hemos utilizado <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a>, nuestra herramienta gratuita de desarrollo de WordPress que te permite poner en marcha un sitio web local de WordPress en muy poco tiempo.<\/p>\n<figure id=\"attachment_120268\" aria-describedby=\"caption-attachment-120268\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120268\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta-create-custom-site.jpg\" alt=\"Creating a custom site in DevKinsta\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120268\" class=\"wp-caption-text\">Creando un sitio personalizado en DevKinsta<\/figcaption><\/figure>\n<p>Pero sigues siendo libre de elegir el <a href=\"https:\/\/kinsta.com\/es\/ebooks\/wordpress\/wordpress-desarrollo-local\/\">entorno de desarrollo local de WordPress<\/a> que quieras, como MAMP o XAMPP, o incluso la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">soluci\u00f3n oficial wp-env<\/a>.<\/p>\n<p>Si utilizas DevKinsta, haz clic en <strong>Nuevo sitio de WordPress<\/strong> o en <strong>Sitio<\/strong> personalizado, rellena los campos del formulario y pulsa <strong>Crear sitio<\/strong>.<\/p>\n<p>El proceso de instalaci\u00f3n dura uno o dos minutos. Cuando se haya completado, lanza tu sitio local de desarrollo de WordPress.<\/p>\n<figure id=\"attachment_120269\" aria-describedby=\"caption-attachment-120269\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120269\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta.jpg\" alt=\"Site Info screen in DevKinsta.\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120269\" class=\"wp-caption-text\">Pantalla de informaci\u00f3n del sitio en DevKinsta.<\/figcaption><\/figure>\n<h4>Configura tu plugin de bloques<\/h4>\n<p>Lo que necesitas ahora es un plugin de bloque inicial. Para evitar toda la molestia de una configuraci\u00f3n manual, el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">equipo de desarrolladores del n\u00facleo de<\/a> WordPress lanz\u00f3 la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\"> herramienta @wordpress\/create-block<\/a>, que es <em>la herramienta oficial de configuraci\u00f3n cero para crear bloques Gutenberg<\/em>.<\/p>\n<p>Hemos cubierto <code>@wordpress\/create-block<\/code> en profundidad en nuestro <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#dev-environment\">art\u00edculo anterior<\/a>, as\u00ed que aqu\u00ed podemos empezar la configuraci\u00f3n de inmediato.<\/p>\n<p>En tu herramienta de l\u00ednea de comandos, navega a la carpeta <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-105130\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"New terminal at folder in Mac OS.\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">Nuevo terminal en la carpeta en Mac OS.<\/figcaption><\/figure>\n<p>Una vez all\u00ed, ejecuta el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Ahora est\u00e1s listo para instalar el paquete <code>@wordpress\/create-block<\/code>:<\/p>\n<figure id=\"attachment_120270\" aria-describedby=\"caption-attachment-120270\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120270\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-wordpress-create-block.jpg\" alt=\"Installing the @wordpress\/create-block package.\" width=\"1432\" height=\"296\"><figcaption id=\"caption-attachment-120270\" class=\"wp-caption-text\">Instalando el paquete @wordpress\/create-block.<\/figcaption><\/figure>\n<p>Para confirmar, escribe <code>y<\/code> y pulsa Intro.<\/p>\n<p>Esto genera los archivos PHP, SCSS y JS del plugin en <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#set-up-the-plugin\">modo interactivo<\/a>.<\/p>\n<p>A continuaci\u00f3n se muestran los detalles que utilizaremos en nuestro ejemplo. Si\u00e9ntete libre de cambiar estos detalles seg\u00fan tus preferencias:<br \/>\n[aviso]<\/p>\n<ul>\n<li>El slug del bloque utilizado para la identificaci\u00f3n (tambi\u00e9n el nombre del plugin y de la carpeta de salida): <strong>author-plugin<\/strong><\/li>\n<li>El espacio de nombres interno para el nombre del bloque (algo \u00fanico para tus productos): <strong>author-box<\/strong><\/li>\n<li>El t\u00edtulo de visualizaci\u00f3n de tu bloque: <strong>Caja de autor<\/strong><\/li>\n<li>La breve descripci\u00f3n de tu bloque (opcional): <strong>Un bloque de ejemplo para los lectores de Kinsta<\/strong><\/li>\n<li>El dashicon para facilitar la identificaci\u00f3n de tu bloque (opcional): <strong>empresario<\/strong><\/li>\n<li>El nombre de la categor\u00eda para ayudar a los usuarios a navegar y descubrir tu bloque: <strong>widgets<\/strong><\/li>\n<li>El nombre del autor del plugin (opcional). Se pueden enumerar varios autores utilizando comas: <strong>su nombre<\/strong><\/li>\n<li>El nombre corto de la licencia del plugin (opcional): <strong>&#8211;<\/strong><\/li>\n<li>Un enlace al texto completo de la licencia (opcional): <strong>&#8211;<\/strong><\/li>\n<li>El n\u00famero de versi\u00f3n actual del plugin: <strong>0.1.0<\/strong><\/li>\n<\/ul>\n<p>[\/notice]<br \/>\nUna vez que pulses enter, descarga y configura el plugin.<\/p>\n<figure id=\"attachment_120271\" aria-describedby=\"caption-attachment-120271\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120271\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-the-block-plugin.jpg\" alt=\"Installing the block plugin.\" width=\"1424\" height=\"878\"><figcaption id=\"caption-attachment-120271\" class=\"wp-caption-text\">Instalando el plugin de bloqueo.<\/figcaption><\/figure>\n<p>El proceso puede tardar un par de minutos. Cuando se complete, deber\u00edas ver la siguiente pantalla:<\/p>\n<figure id=\"attachment_120272\" aria-describedby=\"caption-attachment-120272\" style=\"width: 1428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120272\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-bootstrapped.jpg\" alt=\"Block bootstrapped in the plugin folder.\" width=\"1428\" height=\"1026\"><figcaption id=\"caption-attachment-120272\" class=\"wp-caption-text\">Bloque arrancado en la carpeta del plugin.<\/figcaption><\/figure>\n<p>Ver\u00e1s una lista de los comandos que puedes ejecutar desde el directorio del plugin:<\/p>\n<ul>\n<li><code>$ npm start<\/code> &#8211; Inicia la construcci\u00f3n para el desarrollo.<\/li>\n<li><code>$ npm run build<\/code> &#8211; Construye el c\u00f3digo para producci\u00f3n.<\/li>\n<li><code>$ npm run format<\/code> &#8211; Formatea los archivos.<\/li>\n<li><code>$ npm run lint:css<\/code> &#8211; Limita los archivos CSS.<\/li>\n<li><code>$ npm run lint:js<\/code> &#8211; Limitar los archivos JavaScript.<\/li>\n<li><code>$ npm run packages-update<\/code> &#8211; Actualiza los paquetes de WordPress a la \u00faltima versi\u00f3n.<\/li>\n<\/ul>\n<p>Bien, ahora pasa al directorio de plugins con el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">cd author-plugin<\/code><\/pre>\n<p>E inicia tu compilaci\u00f3n de desarrollo:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>A continuaci\u00f3n, ve a la pantalla de plugins de tu panel de control de WordPress y activa el plugin <strong>Author box<\/strong>:<\/p>\n<figure id=\"attachment_120273\" aria-describedby=\"caption-attachment-120273\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120273\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/plugins-screen.jpg\" alt=\"The block plugin is listed in the Plugins screen.\" width=\"2104\" height=\"1268\"><figcaption id=\"caption-attachment-120273\" class=\"wp-caption-text\">El plugin de caja aparece en la pantalla de plugins.<\/figcaption><\/figure>\n<p>Ahora puedes comprobar si el plugin funciona correctamente. Crea un nuevo post y empieza a escribir <code>\/<\/code> para lanzar el insertador r\u00e1pido:<\/p>\n<figure id=\"attachment_120958\" aria-describedby=\"caption-attachment-120958\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120958\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/quick-inserter-2.jpg\" alt=\"The block item in the Quick Inserter.\" width=\"1402\" height=\"804\"><figcaption id=\"caption-attachment-120958\" class=\"wp-caption-text\">El elemento de bloque en el insertador r\u00e1pido.<\/figcaption><\/figure>\n<p>Tambi\u00e9n encontrar\u00e1s el bloque de la <strong>caja de autor<\/strong> en el Insertador de bloques, en la categor\u00eda de <strong>Widgets<\/strong>. Selecciona el bloque para a\u00f1adirlo al lienzo del editor:<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120275\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"The WordPress Block Inserter.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">El insertador de bloques de WordPress<\/figcaption><\/figure>\n<p>Ya has terminado. Ahora guarda el post y previsualiza la p\u00e1gina para comprobar si el bloque se muestra correctamente.<\/p>\n<h4>El andamiaje de bloques<\/h4>\n<p>Ya hemos <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">hablado<\/a> del andamiaje de bloques en nuestro post anterior. Por lo tanto, aqu\u00ed s\u00f3lo daremos una visi\u00f3n r\u00e1pida de los archivos que vamos a modificar para nuestros ejemplos.<\/p>\n<p><strong>La carpeta ra\u00edz<\/strong><br \/>\nLa carpeta ra\u00edz es donde encontrar\u00e1s el archivo PHP principal y varias subcarpetas.<\/p>\n<p><strong>author-plugin.php<\/strong><br \/>\nPor defecto, el paquete <code>@wordpress\/create-block<\/code> proporciona el siguiente <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#plugin-file\">archivo PHP<\/a>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Plugin Name:       Author box\n * Description:       An example block for Kinsta readers\n * Requires at least: 5.8\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Carlo\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       author-plugin\n *\n * @package           author-box\n *\/\n\n\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/\nfunction author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build' );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>En el encabezamiento, ver\u00e1s los datos que hemos introducido en la configuraci\u00f3n.<\/p>\n<p>Con los bloques est\u00e1ticos, la mayor parte del tiempo trabajar\u00e1s en los archivos JavaScript situados en la carpeta <em>src<\/em>. Con los bloques din\u00e1micos, escribir\u00e1s c\u00f3digo PHP para mostrar el contenido del bloque en el front end.<\/p>\n<p><strong>La carpeta <em>src<\/em><\/strong><br \/>\nLa carpeta <em>src<\/em> es tu carpeta de desarrollo. Aqu\u00ed encontrar\u00e1s los siguientes archivos:<\/p>\n<ul>\n<li><em>bloque.json<\/em><\/li>\n<li><em>index.js<\/em><\/li>\n<li><em>editar.js<\/em><\/li>\n<li><em>guardar.js<\/em><\/li>\n<li><em>editor.scss<\/em><\/li>\n<li><em>estilo.scss<\/em><\/li>\n<\/ul>\n<p><strong>block.json<\/strong><br \/>\nEl block. <em>json<\/em> es tu archivo de metadatos. <code>@wordpress\/create-block<\/code> genera el siguiente archivo <strong>block.json<\/strong>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"author-box\/author-plugin\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Author box\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"businessperson\",\n\t\"description\": \"An example block for Kinsta readers\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"author-plugin\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<p>Para ver m\u00e1s de cerca el archivo block. <em>json<\/em> en general, consulta <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#block-json\">nuestra anterior entrada del blog<\/a>.<\/p>\n<p><strong>index.js<\/strong><br \/>\nEl archivo index <em>.<\/em> js es donde se registra el tipo de bloque en el cliente:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\n\nregisterBlockType('author-box\/author-plugin', {\n\tedit: Edit,\n\tsave,\n});<\/code><\/pre>\n<p><strong>edit.js<\/strong><br \/>\nEl archivo edit <em>.<\/em> js es donde construir\u00e1s la interfaz del bloque que se muestra en el editor:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('Author box \u2013 hello from the editor!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>save.js<\/strong><br \/>\nEl archivo save <em>.<\/em> js contiene el script que construye el contenido del bloque que se guardar\u00e1 en la base de datos. No utilizaremos este archivo en este tutorial:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__('Author box \u2013 hello from the saved content!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h2>Construir el bloque para renderizarlo en el editor<\/h2>\n<p>Abre tu proyecto en <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/#visual-studio-code\">Visual Studio Code<\/a> o en cualquier <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\">editor de c\u00f3digo<\/a> que desees.<\/p>\n<p>Si est\u00e1s utilizando Visual Studio Code, ve a <strong>Terminal -&gt; Nueva Terminal<\/strong>. Esto lanzar\u00e1 una ventana de terminal en la carpeta ra\u00edz de tu proyecto.<\/p>\n<p>En el terminal (o en tu herramienta de l\u00ednea de comandos favorita), escribe el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Ahora est\u00e1s ejecutando el entorno de Node en modo de desarrollo.<\/p>\n<figure id=\"attachment_120337\" aria-describedby=\"caption-attachment-120337\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120337\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/the-project-in-visual-studio-code.jpg\" alt=\"The block plugin project in Visual Studio Code.\" width=\"2378\" height=\"1628\"><figcaption id=\"caption-attachment-120337\" class=\"wp-caption-text\">El proyecto del plugin de bloques en Visual Studio Code.<\/figcaption><\/figure>\n<p>A partir de aqu\u00ed, seguir\u00e1s dos rutas diferentes. Para renderizar el bloque en el editor, trabajar\u00e1s en el archivo <em>edit.js<\/em>. Para representar el bloque en el front-end, tendr\u00e1s que escribir c\u00f3digo PHP en el archivo principal del plugin.<\/p>\n<p>Ahora s\u00fabete las mangas porque empieza la codificaci\u00f3n:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"10\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En este art\u00edculo, s\u00f3lo proporcionamos fragmentos de c\u00f3digo. El c\u00f3digo completo est\u00e1 <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">disponible en Gist<\/a><\/p>\n<\/aside>\n\n<h3>Registrar el bloque en el servidor<\/h3>\n<p>En primer lugar, tienes que registrar el bloque en el servidor y escribir el c\u00f3digo PHP para recuperar los datos de la base de datos.<\/p>\n<p>En el archivo <em>author-plugin.php<\/em>, tendr\u00e1s que pasar un segundo argumento a la <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#plugin-file\">funci\u00f3n<code>register_block_type<\/code><\/a>:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build', array(\n\t\t'render_callback' =&gt; 'author_box_author_plugin_render_author_content'\n\t) );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>El segundo argumento es una matriz de argumentos para registrar un tipo de bloque (ver la <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_block_type\/__construct\/\">lista completa de argumentos disponibles aqu\u00ed<\/a>). En el c\u00f3digo anterior s\u00f3lo hemos proporcionado <code>render_callback<\/code>, que determina la funci\u00f3n de devoluci\u00f3n de llamada que renderiza el bloque en la pantalla.<\/p>\n<p>A continuaci\u00f3n, declara la funci\u00f3n:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content() {\n\treturn 'Hello World!';\n}<\/code><\/pre>\n<p>Guarda el archivo, crea una nueva entrada o p\u00e1gina y a\u00f1ade el bloque <strong>Author Box<\/strong> al lienzo del editor.<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120275\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"The WordPress Block Inserter.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">El insertador de bloques de WordPress.<\/figcaption><\/figure>\n<p>El editor de bloques sigue mostrando el bloque de inicio, ya que a\u00fan no hemos cambiado el archivo <em>edit.js<\/em>.<\/p>\n<p>Pero si previsualizas la entrada en el front-end, ver\u00e1s que el contenido del bloque original ha sido sustituido por la cadena \u00abHola Mundo\u00bb.<\/p>\n<p>Ahora, como el HTML que se muestra en el front-end es generado por el archivo PHP, no ser\u00e1 necesario que la funci\u00f3n <code>save<\/code> devuelva nada. As\u00ed que vayamos directamente al archivo <em>save.js<\/em> y cambiemos el c\u00f3digo como se muestra a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-js\">export default function save() {\n\treturn null;\n}<\/code><\/pre>\n<h3>Definir los atributos del bloque<\/h3>\n<p>Ahora necesitas un lugar para almacenar los ajustes del usuario. Por ejemplo, el n\u00famero de elementos de la entrada que se deben recuperar de la base de datos, si se debe mostrar o no un campo espec\u00edfico, etc. Para ello, definir\u00e1s una serie de <code>attributes<\/code> en el archivo <em>block.json<\/em>.<\/p>\n<p>Por ejemplo, podr\u00edas dar al usuario la posibilidad de determinar el n\u00famero de publicaciones que se incluir\u00e1n en el bloque, la opci\u00f3n de mostrar la imagen destacada, la fecha, el extracto, y\/o ocultar\/mostrar la foto de perfil del autor.<\/p>\n<p>Aqu\u00ed est\u00e1 la lista completa de atributos que utilizaremos para construir nuestro bloque de ejemplo:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"numberOfItems\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 3\n\t\t},\n\t\t\"columns\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 1\n\t\t},\n\t\t\"displayDate\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayExcerpt\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayThumbnail\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayAuthorInfo\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"showAvatar\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}, \n\t\t\"avatarSize\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 48\n\t\t},\n\t\t\"showBio\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Construye el bloque que se mostrar\u00e1 en el editor<\/h3>\n<p>El selector <code>getEntityRecords<\/code> est\u00e1 incluido en el paquete <code>@wordpress\/data<\/code>. Para utilizarlo, tendr\u00e1s que importar el gancho <code>useSelect<\/code> de ese paquete en tu archivo <code>edit.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>useSelect<\/code> es un gancho react personalizado para recuperar valores de selectores registrados, basado en el <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\">gancho React<code>useCallback<\/code><\/a> .<\/p>\n<\/aside>\n\n<p>A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo a la funci\u00f3n <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect( ( select ) =&gt; {\n\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t'per_page': 3\n\t});\n});<\/code><\/pre>\n<p>En el c\u00f3digo anterior, hemos codificado el n\u00famero de publicaciones. Pero es posible que quieras dar a los usuarios la posibilidad de establecer un n\u00famero diferente de publicaciones. Puedes utilizar un atributo para ello.<\/p>\n<p>En tu <em>block.json<\/em> deber\u00edas haber definido un atributo <code>numberOfItems<\/code>. Puedes utilizarlo en tu funci\u00f3n <code>Edit<\/code> como se muestra a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect( ( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems\n\t\t});\n\t});\n\n\tconsole.log( posts );\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Todav\u00eda no ver\u00e1s los mensajes en la pantalla, pero ejecuta un <code>console.log<\/code> y observa lo que ocurre en la consola del inspector de tu navegador:<\/p>\n<figure id=\"attachment_120340\" aria-describedby=\"caption-attachment-120340\" style=\"width: 1714px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120340\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/console-log.jpg\" alt=\"The result in the browser's console.\" width=\"1714\" height=\"906\"><figcaption id=\"caption-attachment-120340\" class=\"wp-caption-text\">El resultado en la consola del navegador.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"><code>useSelect<\/code> puede tomar dos argumentos<\/a>: una llamada de retorno en l\u00ednea y una matriz de dependencias. Ambos devuelven una versi\u00f3n <a href=\"https:\/\/en.wikipedia.org\/wiki\/Memoization\">memoizada<\/a> de la llamada de retorno que s\u00f3lo cambia cuando cambia una de las dependencias.<\/p>\n<p>As\u00ed que, para volver a obtener las entradas en cada cambio de atributo de <code>numberOfItems<\/code>, tienes que cambiar la funci\u00f3n <code>Edit<\/code> como se muestra a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t}, \n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, tienes que <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">renderizar tu lista de entradas<\/a>. Para ello puedes utilizar el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">m\u00e9todo incorporado de JavaScript <code>map<\/code><\/a>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\t\n\treturn (\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{ posts && posts.map( ( post ) =&gt; {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t\t\t{ \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>En primer lugar, comprueba si tienes al menos una entrada en el array, y luego ejecuta el bucle.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El m\u00e9todo <code>map()<\/code> crea una nueva matriz poblada con los resultados de la llamada a una funci\u00f3n proporcionada en cada elemento de la matriz llamada &#8211; Fuente: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">MDN web docs<\/a>.<\/p>\n<\/aside>\n\n<p>Ten en cuenta que, como estamos utilizando el m\u00e9todo <code>map<\/code> con un componente React, tambi\u00e9n estamos utilizando un atributo <code>key<\/code> para asignar el ID de la entrada al elemento actual de la lista.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Una \u00abclave\u00bb es un atributo de cadena especial que debes incluir al crear listas de elementos &#8211; Fuente: <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">Listas y Claves<\/a> en React Docs.<\/p>\n<\/aside>\n\n<p><code>post.link<\/code> y <code>post.title.rendered<\/code> muestran la URL y el t\u00edtulo de la entrada, respectivamente.<\/p>\n<p>La imagen siguiente muestra la lista completa de las propiedades del objeto <code>post<\/code>.<\/p>\n<figure id=\"attachment_120341\" aria-describedby=\"caption-attachment-120341\" style=\"width: 2290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120341\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/js-loop-1.jpg\" alt=\"The Post object.\" width=\"2290\" height=\"1270\"><figcaption id=\"caption-attachment-120341\" class=\"wp-caption-text\">El objeto Post.<\/figcaption><\/figure>\n<p>El c\u00f3digo anterior es s\u00f3lo un ejemplo b\u00e1sico del uso de <code>getEntityRecords<\/code>. Ahora es el momento de poner en pr\u00e1ctica nuestros conocimientos.<\/p>\n<p>Supongamos que quieres evitar que tu bloque muestre las etiquetas HTML que el usuario pueda haber a\u00f1adido al t\u00edtulo de la entrada. WordPress proporciona un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#rawhtml\">componente<code>RawHTML<\/code><\/a> para ello.<\/p>\n<p>Primero, importar\u00e1s el componente del <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\"> paquete @wordpress\/elemento<\/a>:<\/p>\n<pre><code class=\"language-js\">import { RawHTML } from '@wordpress\/element';<\/code><\/pre>\n<p>A continuaci\u00f3n, envolver\u00e1s el t\u00edtulo de la entrada dentro de un elemento <code>RawHTML<\/code>:<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...useBlockProps() }&gt;\n\t&lt;ul&gt;\n\t\t{ posts && posts.map((post) =&gt; {\n\t\t\treturn (\n\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t{ post.title.rendered ? (\n\t\t\t\t\t\t\t\t&lt;RawHTML&gt;\n\t\t\t\t\t\t\t\t\t{ post.title.rendered }\n\t\t\t\t\t\t\t\t&lt;\/RawHTML&gt;\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t&lt;\/li&gt;\n\t\t\t)\n\t\t})}\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Y eso es todo. Ahora a\u00f1ade una etiqueta HTML al t\u00edtulo de tu entrada y guarda la entrada. A continuaci\u00f3n, prueba tu c\u00f3digo con y sin <code>RawHTML<\/code> y observa c\u00f3mo cambia el contenido de tu bloque en la pantalla.<\/p>\n<h3>A\u00f1ade la fecha<\/h3>\n<p>WordPress proporciona una serie de funciones de JavaScript para gestionar y dar formato a las fechas. Para utilizar esas funciones, primero tendr\u00e1s que importarlas del <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-date\/\">paquete<code>@wordpress\/date<\/code><\/a> en tu archivo <em>edit.js<\/em>:<\/p>\n<pre><code class=\"language-js\">import { dateI18n, format, __experimentalGetSettings } from '@wordpress\/date';<\/code><\/pre>\n<ul>\n<li><code>dateI18n<\/code>: Formatea una fecha, traduci\u00e9ndola a la configuraci\u00f3n regional del sitio.<\/li>\n<li><code>format<\/code>: Formatear una fecha.<\/li>\n<li><code>__experimentalGetSettings<\/code>: Mostrar la fecha en el formato establecido en los ajustes generales de WordPress.<\/li>\n<\/ul>\n<p>Estas funciones no est\u00e1n documentadas, pero encontrar\u00e1s ejemplos \u00fatiles en el c\u00f3digo fuente de varios bloques. Consulta, por ejemplo, los archivos <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/latest-posts\/edit.js\">latest-posts<\/a> y <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-date\/edit.js\">post-date<\/a> <em>edit.js<\/em>.<\/p>\n<p>Ahora a\u00f1ade el atributo <code>displayDate<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate } = attributes;<\/code><\/pre>\n<p>A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo dentro del elemento <code>&lt;li&gt;<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{ \n\tdisplayDate && (\n\t\t&lt;time\n\t\t\tclassName='wp-block-author-box-author-plugin__post-date'\n\t\t\tdateTime={ format( 'c', post.date_gmt ) }\n\t\t&gt;\n\t\t\t{ dateI18n(\n\t\t\t\t__experimentalGetSettings().formats.date, \n\t\t\t\tpost.date_gmt\n\t\t\t)}\n\t\t&lt;\/time&gt;\n\t) \n}<\/code><\/pre>\n<p>\u00bfQu\u00e9 ocurre aqu\u00ed?<\/p>\n<ul>\n<li>Si <code>displayDate<\/code> es <code>true<\/code>, entonces muestra la fecha utilizando un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/time\">elemento<code>time<\/code><\/a> .<\/li>\n<li>El atributo <code>dateTime<\/code> proporciona la hora y\/o la fecha del elemento en uno de los <a href=\"https:\/\/wordpress.org\/support\/article\/formatting-date-and-time\/\">formatos permitidos<\/a>.<\/li>\n<li><code>dateI18n<\/code> recupera la fecha en formato localizado. Esta funci\u00f3n funciona de forma similar a la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/date_i18n\/\">funci\u00f3n PHPPHP <code>date_i18n<\/code> de WordPress<\/a>.<\/li>\n<\/ul>\n<h3>A\u00f1adir el extracto<\/h3>\n<p>Ahora deber\u00eda ser f\u00e1cil a\u00f1adir el extracto del post. Primero, echa un vistazo a la propiedad <code>excerpt<\/code> en el inspector del navegador. Ver\u00e1s que el contenido real se almacena en <code>excerpt.rendered<\/code>.<\/p>\n<figure id=\"attachment_120343\" aria-describedby=\"caption-attachment-120343\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120343\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/inspecting-post-excerpt.jpg\" alt=\"Inspecting the post excerpt in Chrome DevTools.\" width=\"1640\" height=\"868\"><figcaption id=\"caption-attachment-120343\" class=\"wp-caption-text\">Inspeccionando el extracto del post en Chrome DevTools.<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, a\u00f1ade el atributo <code>displayExcerpt<\/code> al objeto <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate, displayExcerpt } = attributes;<\/code><\/pre>\n<p>A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo antes de la etiqueta de cierre <code>&lt;\/li&gt;<\/code> en la funci\u00f3n <code>Edit<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Si no est\u00e1s familiarizado con JavaScript, aqu\u00ed y arriba utilizamos la <strong>evaluaci\u00f3n de circuito corto<\/strong>, por la que, si todas las condiciones son verdaderas, se devuelve el valor del \u00faltimo operando (lee m\u00e1s en <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Inline If con el operador l\u00f3gico &#038;&#038;<\/a> y el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND\">AND l\u00f3gico (&#038;&#038;)<\/a>).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En JavaScript, <code>true &amp;&amp; expression<\/code> siempre se eval\u00faa como <code>expression<\/code>, y <code>false &amp;&amp; expression<\/code> siempre se eval\u00faa como <code>false<\/code>.<\/p>\n<p>Por lo tanto, si la condici\u00f3n es <code>true<\/code>, en la salida aparecer\u00e1 el elemento situado justo despu\u00e9s de <code>&amp;&amp;<\/code>. Si es <code>false<\/code>, React lo ignorar\u00e1 y lo omitir\u00e1. Fuente: <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Renderizaci\u00f3n condicional<\/a> en React Docs.<\/p>\n<\/aside>\n\n<p>Por \u00faltimo, puedes volver a probar tu c\u00f3digo. Cambia el valor del atributo en el archivo <em>block.json<\/em> y observa lo que ocurre en el editor.<\/p>\n<h3>A\u00f1ade la imagen destacada<\/h3>\n<p>Ahora tienes que a\u00f1adir el c\u00f3digo que muestra las im\u00e1genes destacadas. Comienza a\u00f1adiendo el atributo <code>displayThumbnail<\/code> a <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tdisplayDate, \n\tdisplayExcerpt, \n\tdisplayThumbnail \n} = attributes;<\/code><\/pre>\n<p>Ahora tienes que averiguar d\u00f3nde se almacena la imagen destacada. Como hemos mencionado anteriormente, para obtener la imagen destacada necesitas a\u00f1adir un nuevo argumento <code>_embed<\/code> a tu consulta. De vuelta a tu c\u00f3digo, cambia los argumentos de la consulta de la siguiente manera<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Aqu\u00ed simplemente a\u00f1adimos <code>'_embed': true<\/code> a la matriz de argumentos. Esto proporciona un objeto <code>post<\/code> que contiene la propiedad <code>_embedded<\/code>, la cual proporciona los detalles de la imagen que necesitas para disponer de las im\u00e1genes destacadas.<\/p>\n<p>Ahora deber\u00edas saber d\u00f3nde <a href=\"#accessing-post-data-using-the-wordpress-rest-api\">encontrar los detalles de la imagen<\/a>.<\/p>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120307\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Featured image details in getEntityRecords response.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Detalles de las im\u00e1genes destacadas en la respuesta getEntityRecords.<\/figcaption><\/figure>\n<p>S\u00f3lo tienes que a\u00f1adir el c\u00f3digo que muestra la imagen en la pantalla:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayThumbnail && \n\tpost._embedded && \n\tpost._embedded['wp:featuredmedia'] &&\n\tpost._embedded['wp:featuredmedia'][0] &&\n\t&lt;img \n\tclassName='wp-block-author-box-author-plugin__post-thumbnail'\n\t\tsrc={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }\n\t\talt={ post._embedded['wp:featuredmedia'][0].alt_text }\n\t\/&gt;\n}<\/code><\/pre>\n<p>Guarda el archivo, pasa al editor de bloques y comprueba si la imagen se muestra correctamente cuando el atributo <code>displayThumbnail<\/code> se establece en <code>true<\/code>.<\/p>\n<figure id=\"attachment_120354\" aria-describedby=\"caption-attachment-120354\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120354\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt.jpg\" alt=\"A list of posts with featured image, date and excerpt.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120354\" class=\"wp-caption-text\">Una lista de publicaciones con imagen destacada, fecha y extracto.<\/figcaption><\/figure>\n<h3>A\u00f1adir controles a la barra lateral<\/h3>\n<p>Hasta ahora hemos estado utilizando los valores por defecto de los atributos establecidos en el <em>block.json<\/em>. Pero por <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#define-attributes\">nuestro art\u00edculo<\/a> anterior sabemos que podemos definir manejadores de eventos para dar a los usuarios la posibilidad de asignar valores personalizados a cada atributo.<\/p>\n<p>Para ello, a\u00f1adir\u00e1s un conjunto de controles a la <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#settings-sidebar\">barra lateral de configuraci\u00f3n<\/a> del bloque. En <em>edit.js<\/em>, importa los siguientes componentes de los paquetes correspondientes:<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps,\n\tInspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n\tPanelBody,\n\tPanelRow,\n\tQueryControls,\n\tToggleControl,\n\tRangeControl\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code>InspectorControls<\/code>: Contiene ajustes de la barra lateral que afectan a todo el bloque (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">en GitHub<\/a>)<\/li>\n<li><code>PanelBody<\/code>: A\u00f1ade un contenedor plegable a la barra lateral de ajustes (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">en GitHub<\/a>)<\/li>\n<li><code>PanelRow<\/code>: Produce un contenedor gen\u00e9rico para los controles de la barra lateral (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\">en GitHub<\/a>)<\/li>\n<li><code>QueryControls<\/code>: Proporciona controles de configuraci\u00f3n para construir una consulta (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/query-controls\">en GitHub<\/a>)<\/li>\n<li><code>ToggleControl<\/code>: Proporciona un bot\u00f3n de alternancia para que los usuarios activen\/desactiven una opci\u00f3n espec\u00edfica (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\">en GitHub<\/a>)<\/li>\n<li><code>RangeControl<\/code>: Se utiliza para hacer selecciones de un rango de valores incrementales (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/range-control\">en GitHub<\/a>)<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, tienes que actualizar la funci\u00f3n <code>Edit<\/code> para utilizar los controles ahora disponibles. En primer lugar, modifica la funci\u00f3n <code>Edit<\/code> como sigue:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\n\tconst { \n\t\tnumberOfItems, \n\t\tcolumns, \n\t\tdisplayExcerpt, \n\t\tdisplayDate, \n\t\tdisplayThumbnail\n\t} = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems,\n\t\t\t\t'_embed': true\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\t...\n}<\/code><\/pre>\n<p>Observa la propiedad <code>setAttributes<\/code> que se pasa a la funci\u00f3n <code>Edit<\/code>.<\/p>\n<p>Ahora puedes a\u00f1adir los elementos correspondientes a tu c\u00f3digo JSX:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Content Settings', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;QueryControls \n\t\t\t\t\t\tnumberOfItems={ numberOfItems }\n\t\t\t\t\t\tonNumberOfItemsChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { numberOfItems: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminItems={ 1 }\n\t\t\t\t\t\tmaxItems={ 10 }\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;RangeControl\n\t\t\t\t\t\tlabel={ __( 'Number of Columns', 'author-plugin' ) }\n\t\t\t\t\t\tvalue={ columns }\n\t\t\t\t\t\tonChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { columns: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 4 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Featured Image', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayThumbnail }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayThumbnail: ! displayThumbnail } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Date', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayDate }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayDate: ! displayDate } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Excerpt', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayExcerpt }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayExcerpt: ! displayExcerpt } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PanelBody&gt;\n\t\t&lt;\/InspectorControls&gt;\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t...\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Vaya, es mucho c\u00f3digo, \u00bfverdad? Pero es bastante f\u00e1cil de entender.<\/p>\n<p>Los atributos del elemento que m\u00e1s merecen tu atenci\u00f3n aqu\u00ed son <code>onNumberOfItemsChange<\/code> en <code>QueryControls<\/code> y <code>onChange<\/code> en <code>RangeControl<\/code> y <code>ToggleControl<\/code>. Esos atributos establecen los <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">manejadores de eventos<\/a> necesarios para que el usuario pueda personalizar la apariencia y\/o el comportamiento de un bloque.<\/p>\n<p>Tambi\u00e9n te dar\u00e1s cuenta de que hemos utilizado las etiquetas <code>&lt;&gt;<\/code> y <code>&lt;\/&gt;<\/code>, que son la sintaxis corta para declarar <a href=\"https:\/\/reactjs.org\/docs\/fragments.html#short-syntax\">fragmentos de React<\/a>.<\/p>\n<p>Ahora, guarda tu archivo, entra en el editor y actualiza la p\u00e1gina:<\/p>\n<figure id=\"attachment_120367\" aria-describedby=\"caption-attachment-120367\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120367\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-box-content-settings.jpg\" alt=\"Block settings.\" width=\"1862\" height=\"1022\"><figcaption id=\"caption-attachment-120367\" class=\"wp-caption-text\">Configuraci\u00f3n del bloque.<\/figcaption><\/figure>\n<p>\u00bfEst\u00e1 todo ah\u00ed? Entonces sigamos adelante y a\u00f1adamos los datos del autor del post.<\/p>\n<h3>Encuentra el autor del post<\/h3>\n<p>Como hemos mencionado anteriormente, nuestro bloque mostrar\u00e1 una lista de art\u00edculos escritos por el mismo autor que el post actual.<\/p>\n<p>Para obtener el ID del autor del post, importar\u00e1s el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-editor\/#getcurrentpostattribute\">selector<code>getCurrentPostAttribute<\/code><\/a> del almac\u00e9n de datos <code>core\/editor<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core\/editor' ).getCurrentPostAttribute( 'author' )<\/code><\/pre>\n<p><code>getCurrentPostAttribute<\/code> devuelve un valor de atributo para el post guardado.<\/p>\n<p>Una vez que obtengas el ID del autor, puedes cambiar la consulta como se muestra a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\t\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Con este c\u00f3digo, obtendr\u00e1s una lista de art\u00edculos de <code>n<\/code> del mismo autor que el post actual.<\/p>\n<p>Ahora que tienes el ID de autor, tambi\u00e9n puedes utilizarlo para obtener datos adicionales de la base de datos.<\/p>\n<h3>Mostrar los detalles del autor<\/h3>\n<p>Como no tenemos ninguna documentaci\u00f3n disponible, utilizamos el c\u00f3digo del <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-author\/edit.js\">bloque central Post Author<\/a> como referencia.<\/p>\n<p>Para mostrar los detalles del autor, primero tienes que importar una nueva dependencia:<\/p>\n<pre><code class=\"language-js\">import { forEach } from 'lodash';<\/code><\/pre>\n<p>A continuaci\u00f3n, en la funci\u00f3n <code>Edit<\/code>, actualiza el objeto <code>attributes<\/code> como sigue:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tcolumns, \n\tdisplayExcerpt, \n\tdisplayDate, \n\tdisplayThumbnail, \n\tdisplayAuthorInfo, \n\tshowAvatar, \n\tavatarSize, \n\tshowBio \n} = attributes;<\/code><\/pre>\n<p>Una vez hecho esto, editar\u00e1s el c\u00f3digo visto en el apartado anterior para recuperar los datos del autor:<\/p>\n<pre><code class=\"language-js\">const { authorDetails, posts } = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\n\t\tconst authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;\n\t\n\t\tconst posts = select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\n\t\treturn { \n\t\t\tauthorDetails: authorDetails,\n\t\t\tposts: posts\n\t\t};\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Ten en cuenta que hemos utilizado el <a href=\"#getusers\">selector<code>getUser<\/code><\/a> para obtener los detalles del autor.<\/p>\n<p>A continuaci\u00f3n, es posible que quieras obtener el avatar del autor. El c\u00f3digo siguiente construye una matriz de elementos que almacenan las URLs y los tama\u00f1os de los avatares:<\/p>\n<pre><code class=\"language-js\">const avatarSizes = [];\nif ( authorDetails ) {\n\tforEach( authorDetails.avatar_urls, ( url, size ) =&gt; {\n\t\tavatarSizes.push( {\n\t\t\tvalue: size,\n\t\t\tlabel: `${ size } x ${ size }`,\n\t\t} );\n\t} );\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, a\u00f1adir\u00e1s los paneles y controles de la barra lateral para que los usuarios puedan personalizar el \u00e1rea del autor en el bloque:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Author Info', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Author Info', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayAuthorInfo }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayAuthorInfo: ! displayAuthorInfo } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t{ displayAuthorInfo && (\n\t\t\t\t\t&lt;&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show avatar' ) }\n\t\t\t\t\t\t\t\tchecked={ showAvatar }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showAvatar: ! showAvatar } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t\t\t&lt;SelectControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Avatar size' ) }\n\t\t\t\t\t\t\t\t\tvalue={ avatarSize }\n\t\t\t\t\t\t\t\t\toptions={ avatarSizes }\n\t\t\t\t\t\t\t\t\tonChange={ ( size ) =&gt; {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tavatarSize: Number( size ),\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show Bio', 'author-plugin' ) }\n\t\t\t\t\t\t\t\tchecked={ showBio }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showBio: ! showBio } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;\/&gt;\n\t\t\t\t) }\n\t\t\t&lt;\/PanelBody&gt;\n\t\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\t\t...\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>La imagen siguiente muestra la barra lateral de configuraci\u00f3n actualizada:<\/p>\n<figure id=\"attachment_120379\" aria-describedby=\"caption-attachment-120379\" style=\"width: 1908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120379\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-settings-panel.jpg\" alt=\"The Author Info settings panel.\" width=\"1908\" height=\"960\"><figcaption id=\"caption-attachment-120379\" class=\"wp-caption-text\">El panel de configuraci\u00f3n de la informaci\u00f3n del autor.<\/figcaption><\/figure>\n<p>Por \u00faltimo, puedes a\u00f1adir la secci\u00f3n del autor a tu bloque:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t{ displayAuthorInfo  && authorDetails && (\n\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__author\"&gt;\n\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__avatar\"&gt;\n\t\t\t\t\t\t\t&lt;img\n\t\t\t\t\t\t\t\twidth={ avatarSize }\n\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\tauthorDetails.avatar_urls[\n\t\t\t\t\t\t\t\t\t\tavatarSize\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\talt={ authorDetails.name }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t) }\n\t\t\t\t\t&lt;div className='wp-block-author-box-author-plugin__author-content'&gt;\n\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__name'&gt;\n\t\t\t\t\t\t\t{ authorDetails.name }\n\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t{ showBio &&\n\t\t\t\t\t\t\t\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\n\t\t\t\t\t\t\tauthorDetails?.description &&\n\t\t\t\t\t\t\tauthorDetails.description.length &gt; 0 && (\n\t\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__description'&gt;{ authorDetails.description }&lt;\/p&gt;\n\t\t\t\t\t\t) }\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t)}\n\t\t\t&lt;ul&gt;\n\t\t\t...\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>La siguiente imagen muestra c\u00f3mo se visualiza en la pantalla.<\/p>\n<figure id=\"attachment_120380\" aria-describedby=\"caption-attachment-120380\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120380\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings.jpg\" alt=\"Author details section and Info settings.\" width=\"1912\" height=\"844\"><figcaption id=\"caption-attachment-120380\" class=\"wp-caption-text\">Secci\u00f3n de detalles del autor y configuraci\u00f3n de la informaci\u00f3n.<\/figcaption><\/figure>\n<p>Ahora guarda tu archivo <em>edit.js<\/em> y ejecuta tus pruebas. Tu bloque deber\u00eda incluir diferentes elementos en funci\u00f3n de la configuraci\u00f3n del bloque.<\/p>\n<figure id=\"attachment_120384\" aria-describedby=\"caption-attachment-120384\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120384\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings-no-bio-2.jpg\" alt=\"Author details not showing author's bio.\" width=\"1912\" height=\"484\"><figcaption id=\"caption-attachment-120384\" class=\"wp-caption-text\">Los detalles del autor no muestran la biograf\u00eda del autor.<\/figcaption><\/figure>\n<p>Falta una \u00faltima cosa: el n\u00famero de columnas para mostrar los art\u00edculos.<\/p>\n<h3>Cambiar el n\u00famero de columnas<\/h3>\n<p>Para dar al usuario la posibilidad de mostrar las vistas previas de los art\u00edculos en columnas, definimos el atributo <code>columns<\/code> en el archivo <em>block.json<\/em>. Tambi\u00e9n incluimos un atributo <code>columns<\/code> en el script y creamos un control de configuraci\u00f3n para permitir a los usuarios cambiar el n\u00famero de columnas, aunque este cambio no tiene efecto por el momento.<\/p>\n<p>En el c\u00f3digo JSX anterior habr\u00e1s observado que hemos a\u00f1adido clases CSS a varios elementos:<\/p>\n<p>Clases asignadas a los elementos de la secci\u00f3n Autor:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__author<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__avatar<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__author-content<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__name<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__description<\/code><\/li>\n<\/ul>\n<p>Clases asignadas a elementos de la secci\u00f3n de contenido:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__post-items<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-thumbnail<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-title<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-date<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-excerpt<\/code><\/li>\n<\/ul>\n<p>Todav\u00eda falta una clase. El nombre de esta clase se generar\u00e1 din\u00e1micamente para reflejar el n\u00famero de columnas establecido por el usuario.<\/p>\n<p>Vuelve al archivo <code>Edit.js<\/code> y modifica el elemento <code>ul<\/code> como sigue:<\/p>\n<pre><code class=\"language-jsx\">&lt;ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }&gt;\n\t...\n&lt;\/ul&gt;<\/code><\/pre>\n<p>A\u00f1adimos una nueva clase <code>columns-${ columns }<\/code> de acuerdo con la sintaxis de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">los literales de la plantilla<\/a> para insertar una expresi\u00f3n dentro de una cadena. De este modo, el atributo que se adjunte al elemento <code>ul<\/code> depender\u00e1 de la configuraci\u00f3n del usuario (por ejemplo, <code>columns-1<\/code>, <code>columns-2<\/code>, etc.).<\/p>\n<p>Ahora abre el archivo <code>style.scss<\/code> y sustituye el c\u00f3digo existente por el siguiente:<\/p>\n<pre><code class=\"language-css\">.wp-block-author-box-author-plugin {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: .6em;\n\tul.wp-block-author-box-author-plugin__post-items {\n\t\tpadding: 0;\n\t\tlist-style-type: none;\n\t\tdisplay: grid;\n\t\tgap: .5em;\n\t\t@for $i from 2 through 4 {\n\t\t\t&.columns-#{ $i } {\n\t\t\t\tgrid-template-columns: repeat(#{ $i }, 1fr);\n\t\t\t}\n\t\t}\n\t\tli {\n\t\t\tlist-style: none;\n\t\t\timg.wp-block-author-box-author-plugin__post-thumbnail {\n\t\t\t\theight: auto;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n.wp-block-author-box-author-plugin__author {\n\tdisplay: flex;\n    flex-wrap: wrap;\n}\n\n.wp-block-author-box-author-plugin__avatar {\n\tmargin-right: 1em;\n}\n\n.wp-block-author-box-author-plugin__author-content {\n\tflex-basis: 0;\n    flex-grow: 1;\n}<\/code><\/pre>\n<p>No profundizaremos en ese c\u00f3digo, ya que est\u00e1 fuera del alcance de este art\u00edculo. Pero si quieres profundizar, puedes consultar los siguientes recursos:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">Dise\u00f1o de rejilla CSS<\/a><\/li>\n<li><a href=\"https:\/\/learncssgrid.com\/\">Aprender la rejilla CSS<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/at-rules\/control\/for\">La regla @for en Sass<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/style-rules#nesting\">Anidamiento en Sass<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_120388\" aria-describedby=\"caption-attachment-120388\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120388\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-block-editor-view.jpg\" alt=\"The Author block in the editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120388\" class=\"wp-caption-text\">El bloque Autor en el editor.<\/figcaption><\/figure>\n<p>Y eso es todo para la renderizaci\u00f3n del bloque en el editor.<\/p>\n<h2>Construyendo el bloque para renderizarlo en la p\u00e1gina<\/h2>\n<p>Ahora que el c\u00f3digo que renderiza el bloque en el editor est\u00e1 completo, podemos pasar a construir el bloque para renderizarlo en el front end.<\/p>\n<p>Como hemos mencionado antes, cuando se trata de bloques din\u00e1micos, el archivo del plugin es el responsable de generar el HTML que se renderizar\u00e1 en el front-end.<\/p>\n<p>As\u00ed que abre el archivo principal de tu plugin<em>(author-plugin.php<\/em> en nuestro ejemplo).<\/p>\n<p>Lo primero que hay que hacer es poner los atributos del bloque a disposici\u00f3n de la funci\u00f3n PHP de WordPress. En tu archivo PHP, cambia la definici\u00f3n de la funci\u00f3n como sigue<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t...\n}<\/code><\/pre>\n<p>Ahora puedes utilizar las funciones de WordPress para recuperar y manipular datos. Por ejemplo, puedes utilizar <code>get_posts<\/code> para recuperar las \u00faltimas entradas del blog (lee m\u00e1s en nuestro art\u00edculo en profundidad sobre la <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-get_posts\/\">funci\u00f3n<code>get_posts<\/code><\/a> ):<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems'],\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t$output .= '&lt;li&gt;&lt;a href=\"' . esc_url( get_permalink( $p-&gt;ID ) ) . '\"&gt;' \n\t\t\t. $p-&gt;post_title . '&lt;\/a&gt;&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>La funci\u00f3n anterior recupera las \u00faltimas entradas del blog <code>numberOfItems<\/code> de tu base de datos de WordPress (por defecto <code>post_type<\/code> est\u00e1 configurado como <code>post<\/code>) y devuelve una matriz de objetos <code>$post<\/code>. Luego itera sobre la matriz para construir los elementos de la lista.<\/p>\n<p>Si inspeccionas la salida HTML, ver\u00e1s que es una simple lista de entradas, como la que se muestra en la siguiente imagen:<\/p>\n<figure id=\"attachment_120521\" aria-describedby=\"caption-attachment-120521\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120521\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts.jpg\" alt=\"A simple list of posts.\" width=\"1866\" height=\"732\"><figcaption id=\"caption-attachment-120521\" class=\"wp-caption-text\">Una simple lista de entradas.<\/figcaption><\/figure>\n<p>En nuestro art\u00edculo anterior mencionamos que utilizar\u00edas el gancho React <code>useBlockProps<\/code> para marcar el <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#import-components\">elemento envolvente<\/a> del bloque en tu c\u00f3digo JSX. Tendr\u00e1s que hacer lo mismo en tu funci\u00f3n PHP.<\/p>\n<p>WordPress proporciona la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">funci\u00f3n<code>get_block_wrapper_attributes<\/code><\/a> para ello.<\/p>\n<p>Por tanto, cambia tu c\u00f3digo PHP de la siguiente manera:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\t$output .= '&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;';\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Ahora se ha asignado una <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">clase<code>wp-block-author-box-author-plugin<\/code><\/a> al elemento contenedor y el bloque tiene un color de fondo diferente.<\/p>\n<p>Entonces la funci\u00f3n <code>get_posts<\/code> obtiene los datos de <code>WP_Posts<\/code> y el ciclo <code>foreach<\/code> construye los elementos de la lista (ver tambi\u00e9n <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-get_posts\/#display\">C\u00f3mo mostrar los datos devueltos por get_posts<\/a>).<\/p>\n<figure id=\"attachment_120520\" aria-describedby=\"caption-attachment-120520\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120520\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-2.jpg\" alt=\"A list of posts with a CSS class assigned.\" width=\"1866\" height=\"650\"><figcaption id=\"caption-attachment-120520\" class=\"wp-caption-text\">Una lista de posts con una clase CSS asignada.<\/figcaption><\/figure>\n<h3>A\u00f1ade la imagen destacada, la fecha y el extracto<\/h3>\n<p>A continuaci\u00f3n, tendr\u00e1s que a\u00f1adir las miniaturas de las entradas, las fechas y los extractos. En el mismo archivo, cambia tu c\u00f3digo PHP como sigue:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-\"&gt;';\n\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\t\t\t$thumbnail = has_post_thumbnail( $p-&gt;ID ) ? get_the_post_thumbnail( $p-&gt;ID, 'medium' ) : '';\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\tif( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){\n\t\t\t\t$output .= $thumbnail;\n\t\t\t}\n\t\t\t$output .= '&lt;h5&gt;&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;&lt;\/h5&gt;';\n\t\t\tif( $attr['displayDate'] ){\n\t\t\t\t$output .= '&lt;time datetime=\"' . esc_attr( get_the_date( 'c', $p ) ) . '\"&gt;' . esc_html( get_the_date( '', $p ) ) . '&lt;\/time&gt;';\n\t\t\t}\n\t\t\tif( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){\n\t\t\t\t$output .= '&lt;p&gt;' . get_the_excerpt( $p ) . '&lt;\/p&gt;';\n\t\t\t}\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>El bucle <code>foreach<\/code> itera sobre la matriz <code>$my_posts<\/code>. En cada iteraci\u00f3n, varias condiciones comprueban los valores de los atributos y construyen la salida en consecuencia.<\/p>\n<p>Ahora echa un vistazo a la salida en la pantalla:<\/p>\n<figure id=\"attachment_120649\" aria-describedby=\"caption-attachment-120649\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120649\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt-1.jpg\" alt=\"A list of posts with featured images, dates, and excerpts.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120649\" class=\"wp-caption-text\">Una lista de publicaciones con im\u00e1genes destacadas, fechas y extractos.<\/figcaption><\/figure>\n<p>Ahora puedes hacer tus pruebas. Cambia la configuraci\u00f3n de la fecha, el extracto y la miniatura y comprueba c\u00f3mo cambia el contenido del bloque en el front-end.<\/p>\n<h3>Mostrar publicaciones en columnas<\/h3>\n<p>En nuestro c\u00f3digo JavaScript, hemos utilizado una clase <code>columns-${ columns }<\/code> para mostrar las vistas previas de las entradas en columnas. Ahora tenemos que hacer lo mismo en PHP.<\/p>\n<p>Para ello, s\u00f3lo tienes que a\u00f1adir estas dos l\u00edneas de c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">$num_cols = $attr['columns'] &gt; 1 ? strval( $attr['columns'] ) : '1';\n\n$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '\"&gt;';<\/code><\/pre>\n<p>Esto a\u00f1adir\u00e1 una clase <code>columns-n<\/code> al elemento <code>ul<\/code> que contiene las vistas previas de las entradas. Ahora el n\u00famero de columnas mostradas en la p\u00e1gina deber\u00eda coincidir con el n\u00famero de columnas establecido en la configuraci\u00f3n del bloque.<\/p>\n<h3>Construir la caja de autor<\/h3>\n<p>Por \u00faltimo, tienes que construir la caja que contiene los detalles del autor, incluyendo el avatar, el nombre y la descripci\u00f3n.<\/p>\n<p>Dentro de la funci\u00f3n de devoluci\u00f3n de llamada, tendr\u00e1s que a\u00f1adir un conjunto de condiciones para comprobar el valor actual de cada atributo:<\/p>\n<pre><code class=\"language-php\">if( $attr['displayAuthorInfo'] ){\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author\"&gt;';\n\t\n\tif( $attr['showAvatar'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__avatar\"&gt;' \n\t\t\t. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author-content\"&gt;';\n\t\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__name\"&gt;' \n\t\t. get_the_author_meta( 'display_name' ) \n\t\t. '&lt;\/div&gt;';\n\n\tif( $attr['showBio'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__description\"&gt;' \n\t\t\t. get_the_author_meta( 'description' ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;\/div&gt;';\n\t$output .= '&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>El c\u00f3digo es bastante sencillo. Comprueba el valor actual de cada atributo, y si es <code>true<\/code>, entonces genera el HTML necesario.<\/p>\n<p>Ahora guarda tu archivo PHP y compara el bloque en el editor con el mismo bloque en el front end.<\/p>\n<figure id=\"attachment_120952\" aria-describedby=\"caption-attachment-120952\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120952\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/full-block.jpg\" alt=\"Our custom block in the block editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120952\" class=\"wp-caption-text\">Nuestro bloque personalizado en el editor de bloques.<\/figcaption><\/figure>\n<p>Encontrar\u00e1s el c\u00f3digo completo del bloque de ejemplo en <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">este Gist p\u00fablico<\/a>.<\/p>\n\n<h2>Recursos recomendados para el desarrollo de bloques din\u00e1micos<\/h2>\n<p>Si has agudizado el o\u00eddo al leer este art\u00edculo y has empezado a reconocer las oportunidades de desarrollo profesional que conlleva aprender a crear bloques Gutenberg, nuestro consejo es que sigas explorando y adquiriendo nuevas habilidades en las tecnolog\u00edas que hay detr\u00e1s del desarrollo de bloques.<\/p>\n<p>Aunque todav\u00eda falta documentaci\u00f3n oficial fiable, sin embargo hay excelentes recursos por ah\u00ed, tanto gratuitos como de pago, que hemos consultado mientras escrib\u00edamos este art\u00edculo. Entre los muchos recursos disponibles, recomendamos los siguientes:<\/p>\n<p><strong>Recursos oficiales<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md\">Datos<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/core-data\/README.md\">Datos b\u00e1sicos<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">Creaci\u00f3n de bloques din\u00e1micos<\/a><\/li>\n<li><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-gutenberg-block-development\/\">Introducci\u00f3n al desarrollo de bloques Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/www.meetup.com\/en-US\/wordpress-social-learning\/\">Aprendizaje social de WordPress<\/a> en MeetUp<\/li>\n<\/ul>\n<p><strong>Tutoriales recomendados de los colaboradores del n\u00facleo de WordPress<\/strong><\/p>\n<ul>\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 (@ryanwelcher)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">Una visi\u00f3n pr\u00e1ctica de la API @wordpress\/data<\/a> por Darren Ethier (@nerrad)<\/li>\n<\/ul>\n<p><strong>Recursos de JavaScript, React y Redux<br \/>\n<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Tutorials#javascript_tutorials\">Tutoriales de JavaScript<\/a> por MDN<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">Introducci\u00f3n a React<\/a> (oficial)<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/essentials\/part-1-overview-concepts\">Tutorial de Redux<\/a> (oficial)<\/li>\n<\/ul>\n<p><strong>Recursos relacionados de Kinsta<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">\u00bfQu\u00e9 es JavaScript? Una mirada al lenguaje de scripting m\u00e1s popular de la web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/errores-en-javascript\/\">Gu\u00eda definitiva para el manejo de errores en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-node-js\/\">Qu\u00e9 es Node.js y por qu\u00e9 deber\u00edas usarlo<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">C\u00f3mo instalar Node.js y npm en Windows, macOS y Linux<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/node-debug\/\">C\u00f3mo depurar el c\u00f3digo de Node.js con varias herramientas<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/node-js-vs-php\/\">Node.js frente a PHP: Una comparaci\u00f3n cara a cara<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/node-js-aplicaciones\/\">los 10 tipos de aplicaciones Node.js m\u00e1s populares en 2022<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/angular-vs-react\/\">Angular vs React: Una comparaci\u00f3n detallada lado a lado<\/a><\/li>\n<\/ul>\n<h2>Resumen<\/h2>\n<p>Hemos llegado al final de este (segundo) largo viaje por el desarrollo del bloque Gutenberg.<\/p>\n<p>En este art\u00edculo, hemos cubierto algunos temas avanzados, como el estado de la aplicaci\u00f3n y los almacenes Redux. Pero esperamos que ahora tengas una mejor comprensi\u00f3n del desarrollo de bloques en general.<\/p>\n<p>S\u00ed, los conocimientos de Node.js, Webpack, <a href=\"https:\/\/kinsta.com\/es\/blog\/transpilacion-php\/#what-is-transpiling\">Babel<\/a>, React y Redux son esenciales cuando se trata de construir bloques avanzados de Gutenberg, pero no necesitas ser un ninja de React para empezar. Aprender a desarrollar bloques Gutenberg no tiene que ser necesariamente complicado. S\u00f3lo tienes que hacerlo con la motivaci\u00f3n adecuada y siguiendo el camino de aprendizaje apropiado.<\/p>\n<p>Y esperamos que este art\u00edculo -y <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">el anterior<\/a>&#8211; te proporcionen el mapa adecuado para encontrar tu camino y empezar a desarrollar Gutenberg de inmediato.<\/p>\n<p><em>\u00a1Ahora depende de ti! \u00bfHas creado ya bloques din\u00e1micos? \u00bfTienes alg\u00fan ejemplo que compartir con nosotros? \u00bfY cu\u00e1les fueron los mayores obst\u00e1culos en tu experiencia? No dudes en dejar un comentario a continuaci\u00f3n.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfTodav\u00eda est\u00e1s desconcertado por Gutenberg? \u00bfO eres de los que creen firmemente en el potencial del editor de bloques y quieres descubrir hasta d\u00f3nde puede llegar &#8230;<\/p>\n","protected":false},"author":36,"featured_media":55944,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345],"class_list":["post-55943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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 Crear Bloques Din\u00e1micos para Gutenberg<\/title>\n<meta name=\"description\" content=\"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero\" \/>\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\/bloques-dinamicos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg\" \/>\n<meta property=\"og:description\" content=\"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\" \/>\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=\"2022-08-08T06:57:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T10:03:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.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=\"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.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=\"44 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg\",\"datePublished\":\"2022-08-08T06:57:37+00:00\",\"dateModified\":\"2025-01-20T10:03:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\"},\"wordCount\":7357,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\",\"name\":\"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"datePublished\":\"2022-08-08T06:57:37+00:00\",\"dateModified\":\"2025-01-20T10:03:18+00:00\",\"description\":\"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#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 Crear Bloques Din\u00e1micos para 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 Crear Bloques Din\u00e1micos para Gutenberg","description":"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero","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\/bloques-dinamicos\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg","og_description":"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero","og_url":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-08-08T06:57:37+00:00","article_modified_time":"2025-01-20T10:03:18+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"44 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg","datePublished":"2022-08-08T06:57:37+00:00","dateModified":"2025-01-20T10:03:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/"},"wordCount":7357,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/","url":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/","name":"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","datePublished":"2022-08-08T06:57:37+00:00","dateModified":"2025-01-20T10:03:18+00:00","description":"No esperes m\u00e1s para convertirte en un desarrollador de bloques. En esta gu\u00eda, aprender\u00e1s todo lo que necesitas saber para crear bloques din\u00e1micos desde cero","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","width":1460,"height":730,"caption":"C\u00f3mo Crear Bloques Din\u00e1micos para Gutenberg"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#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 Crear Bloques Din\u00e1micos para 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\/55943","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=55943"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/55943\/revisions"}],"predecessor-version":[{"id":56447,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/55943\/revisions\/56447"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/55943\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/55944"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=55943"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=55943"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=55943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}