Cómo crear bloques dinámicos para Gutenberg

¿Sigue desconcertado por Gutenberg? ¿O se encuentra entre los que creen firmemente en el potencial del editor de bloques y quiere saber hasta dónde puede llevar su creatividad usando el editor de bloques?

Independientemente de la categoría de usuarios en la que se encuentre, Gutenberg llegó para quedarse y esta publicación le brindará una descripción detallada de lo que sucede detrás de escena del editor de bloques de WordPress. ¡Pero eso no es todo!

Siguiendo nuestro tutorial anterior en el que brindamos una introducción general al desarrollo de bloques de Gutenberg, este artículo va más allá de los conceptos básicos y presenta tipos de bloques más avanzados. Estos bloques se conocen como bloques dinámicos.

Hoy aprenderá qué son los bloques dinámicos, cómo funcionan y todo lo que necesita saber para crear bloques dinámicos desde cero.

Entonces, ¿qué son los bloques dinámicos de Gutenberg y cuáles son las diferencias clave entre los bloques estáticos y dinámicos?

¿Qué son los bloques dinámicos? Un ejemplo

Mientras que con los bloques estáticos, el usuario agrega manualmente el contenido mientras edita una publicación o página, con los bloques dinámicos, el contenido se carga y procesa sobre la marcha en la carga de la página. Con los bloques dinámicos, el contenido del bloque se toma de la base de datos y se muestra tal cual o como resultado de cualquier tipo de manipulación de datos.

Vamos a explicar eso con un ejemplo. Supongamos que desea crear un grupo de bloques anidados que muestren los detalles del autor de la publicación con una selección de las últimas publicaciones del mismo autor.

Como usuarios de Gutenberg, puedes usar los siguientes bloques:

• El bloque principal de encabezado
• El bloque central del autor de la publicación
• El bloque principal Últimas publicaciones

También puede crear un grupo que incluya esos bloques y agregar el grupo a bloques reutilizables para uso futuro.

Es bastante sencillo, ¿no? Puede crear un bloque dinámico y agregarlo a sus publicaciones y páginas en un instante.

A partir de WordPress 5.9, el editor de bloques proporciona más de 90 bloques diferentes, y lo más probable es que encuentre el bloque adecuado para usted recién salido de la caja. Y, si necesita más, realice una búsqueda rápida en el directorio de complementos de WordPress y encontrará muchos complementos gratuitos que brindan bloques adicionales.

Pero, ¿qué pasa si eres un desarrollador de WordPress o estás planeando una carrera como desarrollador de WordPress? Quizás tienes necesidades muy específicas y no encuentras el bloque que buscas, o simplemente quieres adquirir nuevas habilidades profesionales. En tales situaciones, es posible que desee aprender a crear sus bloques dinámicos.

¿Listo para llevar tu carrera como desarrollador de WordPress a la luna? ¡Comience con esta guía masiva para el desarrollo de bloques dinámicos! Haz clic para twittear

Bloques dinámicos de Gutenberg desde la perspectiva de un desarrollador

Los bloques dinámicos tienen dos casos de uso principales.

El primer caso de uso es cuando necesita actualizar el contenido de un bloque cuando la página que contiene el bloque no se ha actualizado. Por ejemplo, esto sucede cuando el bloque incluye una lista de las últimas publicaciones o comentarios y, en general, siempre que el contenido del bloque se genera dinámicamente utilizando datos extraídos de la base de datos.

El segundo caso de uso es cuando una actualización del código de bloque debe mostrarse inmediatamente en la interfaz. El uso de un bloque dinámico en lugar de un bloque estático hace que los cambios se apliquen inmediatamente a todas las instancias del bloque.

Por otro lado, si cambia el HTML producido por un bloque estático, el usuario verá un cuadro de diálogo de invalidación hasta que se eliminen todas las instancias de la versión anterior del bloque y se reemplacen con la nueva versión, o marque la versión anterior. versión como obsoleta (consulte también Obsolescencia y validación de bloques, Obsolescencia y experiencia de migración).

Dicho esto, hay algunos conceptos que debe comprender antes de poder comenzar a construir bloques dinámicos.

Estado de la aplicación y almacenes de datos

Gutenberg es una aplicación React SPA, y todo en Gutenberg es un componente React. El título de la publicación, los encabezados, los párrafos, las imágenes y cualquier bloque de contenido HTML en el editor es un componente de React, así como los controles de la barra lateral y de la barra de herramientas del bloque.

En nuestro artículo anterior, solo usamos propiedades para almacenar datos. En este artículo, daremos un paso más al introducir el concepto de estado .

En pocas palabras, el objeto de state es un objeto de JavaScript simple que se usa para contener información sobre un componente. El state del componente puede cambiar con el tiempo y, cada vez que cambia, el componente se vuelve a renderizar.

De manera similar al objeto de state , las propiedades son objetos simples de JavaScript que se utilizan para contener información sobre el componente. Pero hay una diferencia clave entre props y state :

props se pasan al componente (similar a los parámetros de la función) mientras que state se administra dentro del componente (similar a las variables declaradas dentro de una función).

Puede pensar en el estado como una instantánea de los datos tomados en un momento dado que una aplicación almacena para controlar el comportamiento de un componente. Por ejemplo, si la barra lateral de configuración del editor de bloques está abierta, una información se almacenará en algún lugar del objeto de state .

Cuando la información se comparte dentro de un solo componente, lo llamamos estado local . Cuando la información se comparte entre componentes dentro de una aplicación, lo llamamos Estado de la aplicación .

El estado de la aplicación está íntimamente relacionado con el concepto de tienda. De acuerdo con los documentos de Redux:

Una tienda contiene todo el árbol de estado de su aplicación. La única forma de cambiar el estado dentro de él es enviar una acción sobre él.

Entonces, Redux almacena el estado de una aplicación en un solo árbol de objetos inmutables (es decir, una tienda). El árbol de objetos solo se puede cambiar creando un nuevo objeto usando acciones y reductores.

En WordPress, las tiendas son administradas por el módulo de datos de WordPress .

Modularidad, paquetes y almacenes de datos en Gutenberg

El repositorio de Gutenberg está construido desde cero sobre varios módulos reutilizables e independientes que, combinados, construyen la interfaz de edición. Estos módulos también se denominan paquetes .

La documentación oficial enumera dos tipos diferentes de paquetes:

• Los paquetes de producción conforman el código de producción que se ejecuta en el navegador. Hay dos tipos de paquetes de producción en WordPress:
  • Los paquetes con hojas de estilo proporcionan hojas de estilo para que funcionen correctamente.
  • Los paquetes con almacenes de datos definen almacenes de datos para manejar su estado. Los paquetes con almacenes de datos pueden ser utilizados por complementos y temas de terceros para recuperar y manipular datos.
• Los paquetes de desarrollo se utilizan en el modo de desarrollo. Esos paquetes incluyen herramientas para pelar, probar, construir, etc.

Aquí estamos más interesados ​​en paquetes con almacenamiento de datos, utilizados para recuperar y manipular datos.

El almacén de datos de WordPress

El módulo de datos de WordPress se basa en Redux y comparte los tres principios básicos de Redux, aunque con algunas diferencias clave.

La documentación oficial proporciona la siguiente definición:

El módulo de datos de WordPress sirve como un centro para administrar el estado de la aplicación tanto para los complementos como para WordPress, proporcionando herramientas para administrar datos dentro y entre módulos distintos. Está diseñado como un patrón modular para organizar y compartir datos: lo suficientemente simple como para satisfacer las necesidades de un complemento pequeño, mientras que es escalable para cumplir con los requisitos de una aplicación compleja de una sola página.

De forma predeterminada, Gutenberg registra varios almacenes de datos dentro del estado de la aplicación. Cada una de estas tiendas tiene un nombre y propósito específico:

• core : datos básicos de WordPress
• core/annotations : Anotaciones
• core/blocks : Tipos de bloques Datos
• core/block-editor : Los datos del editor de bloques
• core/editor : Los datos del editor de publicaciones
• core/edit-post : los datos de la interfaz de usuario del editor
• core/notices : Avisos Datos
• core/nux : Los datos NUX (nueva experiencia de usuario)
• core/viewport : los datos de la ventana gráfica

A través de estas tiendas, podrá acceder a una gran cantidad de datos:

1. Datos relacionados con la publicación actual , como título de la publicación, extracto, categorías y etiquetas, bloques, etc.
2. Datos relacionados con la interfaz de usuario , es decir, si se activa o desactiva un conmutador.
3. Datos relacionados con toda la instalación de WordPress , como taxonomías registradas, tipos de publicaciones, título del blog, autores, etc.

Estas tiendas viven en el objeto wp global. Para acceder al estado de una tienda, utilizará la función de select .

Para ver cómo funciona, cree una nueva publicación o página e inicie el inspector de su navegador. Busque la consola y escriba la siguiente línea de código:

 wp.data.select("core")

El resultado será un objeto que incluye una lista de funciones que puede usar para obtener datos del almacén de datos core . Estas funciones se denominan selectores y actúan como interfaces para acceder a los valores de estado.

El almacén de datos de WordPress incluye información sobre WordPress en general y los selectores son la forma en que obtendrá esa información. Por ejemplo, getCurrentUser() devuelve detalles del usuario actual:

 wp.data.select("core").getCurrentUser()

Otro selector que puede usar para recuperar detalles de usuario del almacén de datos es getUsers() :

 wp.data.select("core").getUsers()

La siguiente imagen muestra el objeto de respuesta:

Para obtener detalles de un solo usuario, puede escribir la siguiente línea:

 wp.data.select("core").getUsers()[0]

Usando el mismo selector, también puede recuperar usuarios del sitio con el rol de author asignado:

 wp.data.select( 'core' ).getUsers({ who: 'authors' })

También puede recuperar taxonomías registradas:

 wp.data.select("core").getTaxonomies()

Una lista de los tipos de correos registrados:

 wp.data.select("core").getPostTypes()

O una lista de complementos:

 wp.data.select("core").getPlugins()

Ahora intentemos acceder a un almacén de datos diferente. Para hacer eso, seguirá usando la función de select , pero proporcionando un espacio de nombres diferente. Probemos lo siguiente:

 wp.data.select("core/edit-post")

Ahora obtendrá el siguiente objeto de respuesta.

Si desea saber si la barra lateral de configuración está abierta o no, debe usar el selector isEditorSidebarOpened :

 wp.data.select("core/edit-post").isEditorSidebarOpened()

Esta función devuelve true si la barra lateral está abierta:

Cómo acceder a los datos de la publicación

Ahora debe tener una comprensión básica de cómo acceder a los datos. Ahora veremos más de cerca un selector específico, la función getEntityRecords , que es el selector que da acceso a los datos de la publicación.

En el editor de bloques, haga clic derecho y seleccione Inspeccionar . En la pestaña Consola, copie y pegue la siguiente línea:

 wp.data.select("core").getEntityRecords('postType', 'post')

Esto envía una solicitud a la API Rest y devuelve una serie de registros correspondientes a las últimas publicaciones de blog publicadas.

getEntityRecords acepta tres parámetros:

• kind string : tipo de entidad (es decir postType ).
• cadena de name : nombre de la entidad (es decir, post ).
• query ?Objeto : consulta de términos opcionales (es decir {author: 0} ).

Puede crear solicitudes más específicas utilizando un objeto de argumentos.

Por ejemplo, puede decidir que la respuesta solo debe contener publicaciones en una categoría específica:

 wp.data.select("core").getEntityRecords('postType', 'post', {categories: 3})

También puede solicitar solo artículos de un autor determinado:

 wp.data.select("core").getEntityRecords('postType', 'post', {author: 2})

Si hace clic en cualquiera de los registros devueltos por getEntityRecords , obtendrá una lista de propiedades para el registro seleccionado:

Si desea que la respuesta incluya la imagen destacada, deberá agregar un argumento adicional a su solicitud anterior:

 wp.data.select("core").getEntityRecords('postType', 'post', {author: 2, _embed: true})

Ahora debería tener una mejor comprensión de cómo acceder al almacén de datos de WordPress y recuperar los detalles de la publicación. Para ver más de cerca el selector getEntityRecords , consulte también Solicitud de datos en Gutenberg con getEntityRecords.

Cómo crear un bloque dinámico: un proyecto de ejemplo

Después de nuestra larga premisa teórica, podemos pasar a la práctica y crear un bloque dinámico usando las herramientas que presentamos en nuestro tutorial anterior de desarrollo de bloques.

En ese artículo, discutimos:

1. Cómo configurar un entorno de desarrollo de WordPress
2. ¿Qué es un andamio de bloques?
3. Cómo construir un bloque estático de Gutenberg

Es por eso que no cubriremos esos temas en profundidad en el presente artículo, pero no dude en consultar nuestra guía anterior para obtener información adicional o simplemente para refrescarse.

Configurar un entorno de desarrollo de JavaScript

Comencemos configurando un entorno de desarrollo de JavaScript.

Instalar o actualizar Node.js

Primero, instale o actualice Node.js. Una vez que haya terminado, inicie su herramienta de línea de comandos y ejecute el siguiente comando:

 node -v

Debería ver la versión de su nodo.

Configure su entorno de desarrollo

A continuación, necesitará un entorno de desarrollo para WordPress. Para nuestros ejemplos, usamos DevKinsta, nuestra herramienta gratuita de desarrollo de WordPress que le permite lanzar un sitio web local de WordPress en muy poco tiempo.

Pero aún puede elegir cualquier entorno de desarrollo local de WordPress que desee, como MAMP o XAMPP, o incluso la solución oficial wp-env.

Si está utilizando DevKinsta, haga clic en Nuevo sitio de WordPress o en Sitio personalizado , complete los campos del formulario y presione Crear sitio .

El proceso de instalación tarda uno o dos minutos. Cuando esté completo, inicie su sitio web local de desarrollo de WordPress.

Configure su complemento de bloque

Lo que necesita ahora es un complemento de bloque de inicio. Para evitar todas las molestias de una configuración manual, el equipo de desarrollo central de WordPress lanzó la herramienta @wordpress/create-block, que es la herramienta oficial de configuración cero para crear bloques de Gutenberg .

Cubrimos @wordpress/create-block en profundidad en nuestro artículo anterior, por lo que aquí podemos comenzar la configuración de inmediato.

En su herramienta de línea de comandos, vaya a la carpeta /wp-content/plugins :

Una vez allí, ejecuta el siguiente comando:

 npx @wordpress/create-block

Ahora está listo para instalar el paquete @wordpress/create-block :

Para confirmar, escriba y y presione Entrar.

Esto genera los archivos PHP, SCSS y JS del complemento en modo interactivo.

A continuación se muestran los detalles que utilizaremos en nuestro ejemplo. Siéntase libre de cambiar estos detalles de acuerdo a sus preferencias:

Una vez que presiona enter, descarga y configura el complemento.

El proceso puede tardar un par de minutos. Cuando se complete, debería ver la siguiente pantalla:

Verá una lista de los comandos que puede ejecutar desde el directorio del complemento:

• $ npm start : inicia la compilación para el desarrollo.
• $ npm run build : crea el código para la producción.
• $ npm run format – Formatear archivos.
• $ npm run lint:css : archivos Lint CSS.
• $ npm run lint:js – Lint archivos JavaScript.
• $ npm run packages-update : actualiza los paquetes de WordPress a la última versión.

Bien, ahora muévase al directorio de complementos con el siguiente comando:

 cd author-plugin

Y comience su compilación de desarrollo:

 npm start

A continuación, navegue a la pantalla Complementos en su panel de control de WordPress y active el complemento Cuadro de autor :

Ahora puede verificar si el complemento funciona correctamente. Cree una nueva publicación y comience a escribir / para iniciar el insertador rápido:

También encontrará el bloque de cuadro Autor en el insertador de bloques, en la categoría Widgets . Seleccione el bloque para agregarlo al lienzo del editor:

Estás listo. Ahora guarde la publicación y obtenga una vista previa de la página para verificar si el bloque se muestra correctamente.

El andamio de bloques

Cubrimos el andamio de bloques en nuestra publicación anterior. Entonces, aquí solo proporcionaremos una descripción general rápida de los archivos que vamos a modificar para nuestros ejemplos.

La carpeta raíz
La carpeta raíz es donde encontrará el archivo PHP principal y varias subcarpetas.

autor-plugin.php
De forma predeterminada, el paquete @wordpress/create-block proporciona el siguiente archivo PHP:

 /** * Plugin Name: Author box * Description: An example block for Kinsta readers * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: Carlo * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: author-plugin * * @package author-box */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ function author_box_author_plugin_block_init() { register_block_type( __DIR__ . '/build' ); } add_action( 'init', 'author_box_author_plugin_block_init' );

En el encabezado, notará los detalles que ingresamos en la configuración.

Con bloques estáticos, la mayor parte del tiempo estará trabajando en los archivos JavaScript ubicados en la carpeta src . Con bloques dinámicos, escribirá código PHP para mostrar el contenido del bloque en la interfaz.

La carpeta src
La carpeta src es su carpeta de desarrollo. Aquí encontrarás los siguientes archivos:

• bloque.json
• índice.js
• editar.js
• guardar.js
• editor.scss
• estilo.scss

bloque.json
El block.json es su archivo de metadatos. @wordpress/create-block genera el siguiente archivo block.json :

 { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "author-box/author-plugin", "version": "0.1.0", "title": "Author box", "category": "widgets", "icon": "businessperson", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "author-plugin", "editorScript": "file:./index.js", "editorStyle": "file:./index.css", "style": "file:./style-index.css" }

Para ver más de cerca el archivo block.json en general, consulte nuestra publicación de blog anterior.

índice.js
El archivo index.js es donde registra el tipo de bloque en el cliente:

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('author-box/author-plugin', { edit: Edit, save, });

editar.js
El archivo edit.js es donde construirá la interfaz de bloque renderizada en el editor:

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('Author box – hello from the editor!', 'author-plugin')} </p> ); }

guardar.js
El archivo save.js contiene el script que crea el contenido del bloque para guardarlo en la base de datos. No usaremos este archivo en este tutorial:

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__('Author box – hello from the saved content!', 'author-plugin')} </p> ); }

Construyendo el bloque para renderizar en el editor

Abra su proyecto en Visual Studio Code o cualquier editor de código que desee.

Si está utilizando Visual Studio Code, vaya a Terminal -> New Terminal . Esto abrirá una ventana de terminal en la carpeta raíz de su proyecto.

En la terminal (o en su herramienta de línea de comandos favorita), escriba el siguiente comando:

 npm start

Ahora está ejecutando el entorno de nodo en modo de desarrollo.

A partir de aquí, seguirás dos rutas diferentes. Para representar el bloque en el editor, trabajará en el archivo edit.js. Para representar el bloque en el front-end, deberá escribir el código PHP en el archivo del complemento principal.

Ahora arremangarse porque comienza la codificación:

Registrar el Bloque en el Servidor

Primero, debe registrar el bloque en el servidor y escribir el código PHP para recuperar datos de la base de datos.

En el archivo author-plugin.php , deberá pasar un segundo argumento a la función register_block_type :

 function author_box_author_plugin_block_init() { register_block_type( __DIR__ . '/build', array( 'render_callback' => 'author_box_author_plugin_render_author_content' ) ); } add_action( 'init', 'author_box_author_plugin_block_init' );

El segundo argumento es una matriz de argumentos para registrar un tipo de bloque (consulte la lista completa de argumentos disponibles aquí). En el código anterior, solo proporcionamos render_callback , que determina la función de devolución de llamada que representa el bloque en la pantalla.

A continuación, declarará la función:

 function author_box_author_plugin_render_author_content() { return 'Hello World!'; }

Guarde el archivo, cree una nueva publicación o página y agregue el bloque Cuadro de autor al lienzo del editor.

El editor de bloques aún muestra el bloque de inicio, ya que aún no hemos cambiado el archivo edit.js.

Pero si obtiene una vista previa de la publicación en el front-end, verá que el contenido del bloque original ahora ha sido reemplazado por la cadena "Hello World".

Ahora, dado que el HTML representado en el front-end es generado por el archivo PHP, no habrá necesidad de que la función de save devuelva nada. Así que vayamos directamente al archivo save.js y cambiemos el código como se muestra a continuación:

 export default function save() { return null; }

Definir atributos de bloque

Ahora necesita un lugar para almacenar la configuración del usuario. Por ejemplo, la cantidad de elementos de publicación para recuperar de la base de datos, si mostrar o no un campo específico, etc. Para hacerlo, definirá una cantidad de attributes en el archivo block.json .

Por ejemplo, podría darle al usuario la capacidad de determinar la cantidad de publicaciones que se incluirán en el bloque, la opción de mostrar la imagen destacada, la fecha, el extracto y/u ocultar/mostrar la imagen de perfil del autor.

Aquí está la lista completa de atributos que usaremos para construir nuestro bloque de ejemplo:

 { ... "attributes": { "numberOfItems": { "type": "number", "default": 3 }, "columns": { "type": "number", "default": 1 }, "displayDate": { "type": "boolean", "default": true }, "displayExcerpt": { "type": "boolean", "default": true }, "displayThumbnail": { "type": "boolean", "default": true }, "displayAuthorInfo": { "type": "boolean", "default": true }, "showAvatar": { "type": "boolean", "default": true }, "avatarSize": { "type": "number", "default": 48 }, "showBio": { "type": "boolean", "default": true } } }

Cree el bloque que se renderizará en el editor

El selector getEntityRecords está incluido en el paquete @wordpress/data . Para usarlo, deberá importar el gancho useSelect de ese paquete en su archivo edit.js :

 import { useSelect } from '@wordpress/data';

A continuación, agregue el siguiente código a la función Edit() :

 const posts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': 3 }); });

En el código anterior, codificamos el número de publicaciones. Pero es posible que desee dar a los usuarios la posibilidad de establecer una cantidad diferente de publicaciones. Puedes usar un atributo para eso.

En su block.json debería haber definido un atributo numberOfItems . Puede usarlo en su función Edit como se muestra a continuación:

 export default function Edit( { attributes } ) { const { numberOfItems } = attributes; const posts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': numberOfItems }); }); console.log( posts ); return ( ... ); }

Todavía no verá las publicaciones en la pantalla, pero ejecute un console.log y vea qué sucede en la consola del inspector de su navegador:

useSelect puede tomar dos argumentos: una devolución de llamada en línea y una matriz de dependencias. Ambos devuelven una versión memorizada de la devolución de llamada que solo cambia cuando cambia una de las dependencias.

Entonces, para recuperar publicaciones en cada cambio de atributo numberOfItems , debe cambiar la función Edit como se muestra a continuación:

 export default function Edit( { attributes } ) { const { numberOfItems } = attributes; const posts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': numberOfItems }); }, [ numberOfItems ] ); console.log(posts); return ( ... ); }

A continuación, debe renderizar su lista de publicaciones. Para hacer eso, puede usar el método de map de JavaScript incorporado:

 export default function Edit( { attributes } ) { const { numberOfItems } = attributes; const posts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': numberOfItems }); }, [ numberOfItems ] ); console.log(posts); return ( <div { ...useBlockProps() }> <ul> { posts && posts.map( ( post ) => { return ( <li key={ post.id }> <h5> <a href={ post.link }> { post.title.rendered ? post.title.rendered : __( 'Default title', 'author-plugin' ) } </a> </h5> </li> ) })} </ul> </div> ); }

Primero, verifica si tiene al menos una publicación en la matriz, luego ejecuta el ciclo.

Tenga en cuenta que, como estamos usando el método de map con un componente React, también estamos usando un atributo key para asignar la ID de la publicación al elemento de la lista actual.

post.link y post.title.rendered representan la URL y el título de la publicación, respectivamente.

La siguiente imagen muestra la lista completa de las propiedades del objeto de post .

El código anterior es solo un ejemplo básico del uso de getEntityRecords . Ahora es el momento de poner en práctica nuestros conocimientos.

Digamos que desea evitar que su bloque represente etiquetas HTML que el usuario puede haber agregado al título de la publicación. WordPress proporciona un componente RawHTML para eso.

Primero, importará el componente del paquete @wordpress/element:

 import { RawHTML } from '@wordpress/element';

A continuación, envolverá el título de la publicación dentro de un elemento RawHTML :

 <div { ...useBlockProps() }> <ul> { posts && posts.map((post) => { return ( <li key={ post.id }> <h5> <a href={ post.link }> { post.title.rendered ? ( <RawHTML> { post.title.rendered } </RawHTML> ) : ( __( 'Default title', 'author-plugin' ) )} </a> </h5> </li> ) })} </ul> </div>

Y eso es. Ahora agregue una etiqueta HTML al título de su publicación y guarde la publicación. Luego pruebe su código con y sin RawHTML y vea cómo cambia el contenido de su bloque en la pantalla.

Agregar la fecha

WordPress proporciona una serie de funciones de JavaScript para administrar y dar formato a las fechas. Para usar esas funciones, primero deberá importarlas desde el paquete @wordpress/date en su archivo edit.js :

 import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';

• dateI18n : da formato a una fecha, traduciéndola a la configuración regional del sitio.
• format : Dar formato a una fecha.
• __experimentalGetSettings : muestra la fecha en el formato establecido en la configuración general de WordPress.

Esas funciones no están documentadas, pero encontrará ejemplos útiles en el código fuente de varios bloques. Consulte, por ejemplo, las publicaciones más recientes y los archivos edit.js posteriores a la fecha.

Ahora agregue el atributo displayDate :

 const { numberOfItems, displayDate } = attributes;

Luego agregue el siguiente código dentro del elemento <li> :

 { displayDate && ( <time className='wp-block-author-box-author-plugin__post-date' dateTime={ format( 'c', post.date_gmt ) } > { dateI18n( __experimentalGetSettings().formats.date, post.date_gmt )} </time> ) }

¿Qué pasa aquí?

• Si displayDate es true , muestra la fecha usando un elemento de time .
• El atributo dateTime proporciona la hora y/o la fecha del elemento en uno de los formatos permitidos.
• dateI18n recupera la fecha en formato localizado. Esta función funciona de manera similar a la función PHPPHP date_i18n WordPress.

Agregar el extracto

Ahora debería ser fácil agregar el extracto de la publicación. Primero, eche un vistazo a la propiedad de excerpt en el inspector del navegador. Verá que el contenido real se almacena en excerpt.rendered .

A continuación, agregue el atributo displayExcerpt al objeto de attributes :

 const { numberOfItems, displayDate, displayExcerpt } = attributes;

Luego agregue el siguiente código antes de la etiqueta de cierre </li> en la función Edit :

 { displayExcerpt && post.excerpt.rendered && ( <p> <RawHTML> { post.excerpt.rendered } </RawHTML> </p> ) }

Si no está familiarizado con JavaScript, aquí y anteriormente usamos la evaluación de cortocircuito , mediante la cual, si todas las condiciones son verdaderas, se devuelve el valor del último operando (lea más en Inline If con operador lógico && y AND lógico (&& )).

Finalmente, puede probar su código nuevamente. Cambie el valor del atributo en el archivo block.json y vea qué sucede en el editor.

Agrega la imagen destacada

Ahora necesita agregar el código que representa las imágenes destacadas. Comience a agregar el atributo displayThumbnail a los attributes :

 const { numberOfItems, displayDate, displayExcerpt, displayThumbnail } = attributes;

Ahora necesita averiguar dónde se almacena la imagen destacada. Como mencionamos anteriormente, para obtener la imagen destacada, debe agregar un nuevo argumento _embed a su consulta. Volviendo a su código, cambie los argumentos de consulta de la siguiente manera:

const posts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': numberOfItems, '_embed': true }); }, [ numberOfItems ] );

Aquí simplemente agregamos '_embed': true a la matriz de argumentos. Esto proporciona un objeto de post que contiene la propiedad _embedded , que proporciona los detalles de la imagen que necesita para mostrar las imágenes destacadas.

Ahora debe saber dónde encontrar los detalles de la imagen.

Solo necesita agregar el código que representa la imagen en la pantalla:

 { displayThumbnail && post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0] && <img className='wp-block-author-box-author-plugin__post-thumbnail' src={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url } alt={ post._embedded['wp:featuredmedia'][0].alt_text } /> }

Guarde el archivo, cambie al editor de bloques y verifique si la imagen se muestra correctamente cuando el atributo displayThumbnail se establece en true .

Agregar controles de barra lateral

Hasta ahora, hemos estado usando los valores predeterminados de atributos establecidos en block.json . Pero de nuestro artículo anterior sabemos que podemos definir controladores de eventos para dar a los usuarios la capacidad de asignar valores personalizados a cada atributo.

Para hacer eso, agregará un conjunto de controles a la barra lateral de configuración del bloque. En edit.js , importe los siguientes componentes de los paquetes correspondientes:

 import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; import { PanelBody, PanelRow, QueryControls, ToggleControl, RangeControl } from '@wordpress/components';

• InspectorControls : contiene la configuración de la barra lateral que afecta a todo el bloque (ver en GitHub)
• PanelBody : agrega un contenedor plegable a la barra lateral de configuración (ver en GitHub)
• PanelRow : Produce un contenedor genérico para los controles de la barra lateral (ver en GitHub)
• QueryControls : proporciona controles de configuración para crear una consulta (ver en GitHub)
• ToggleControl : proporciona un botón de alternar para que los usuarios activen/desactiven una opción específica (ver en GitHub)
• RangeControl : se usa para hacer selecciones de un rango de valores incrementales (ver en GitHub)

A continuación, debe actualizar la función Edit para usar los controles ahora disponibles. Primero, modifique la función Edit de la siguiente manera:

 export default function Edit( { attributes, setAttributes } ) { const { numberOfItems, columns, displayExcerpt, displayDate, displayThumbnail } = attributes; const posts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': numberOfItems, '_embed': true }); }, [ numberOfItems ] ); ... }

Tenga en cuenta la propiedad setAttributes pasada a la función Edit .

Ahora puede agregar los elementos correspondientes a su código JSX:

 return ( <> <InspectorControls> <PanelBody title={ __( 'Content Settings', 'author-plugin' ) }> <PanelRow> <QueryControls numberOfItems={ numberOfItems } onNumberOfItemsChange={ ( value ) => setAttributes( { numberOfItems: value } ) } minItems={ 1 } maxItems={ 10 } /> </PanelRow> <PanelRow> <RangeControl label={ __( 'Number of Columns', 'author-plugin' ) } value={ columns } onChange={ ( value ) => setAttributes( { columns: value } ) } min={ 1 } max={ 4 } required /> </PanelRow> <PanelRow> <ToggleControl label={ __( 'Show Featured Image', 'author-plugin' ) } checked={ displayThumbnail } onChange={ () => setAttributes( { displayThumbnail: ! displayThumbnail } ) } /> </PanelRow> <PanelRow> <ToggleControl label={ __( 'Show Date', 'author-plugin' ) } checked={ displayDate } onChange={ () => setAttributes( { displayDate: ! displayDate } ) } /> </PanelRow> <PanelRow> <ToggleControl label={ __( 'Display Excerpt', 'author-plugin' ) } checked={ displayExcerpt } onChange={ () => setAttributes( { displayExcerpt: ! displayExcerpt } ) } /> </PanelRow> </PanelBody> </InspectorControls> <div { ...useBlockProps() }> ... </div> </> );

Wow, eso es mucho código, ¿no? Pero es bastante fácil de entender.

Los atributos de elementos que más merecen su atención aquí son onNumberOfItemsChange en QueryControls y onChange en RangeControl y ToggleControl . Esos atributos establecen los controladores de eventos necesarios para permitir que el usuario personalice la apariencia o el comportamiento de un bloque.

También notará que usamos etiquetas <> y </> , que son la sintaxis abreviada para declarar fragmentos de React.

Ahora, guarde su archivo, acceda al editor y actualice la página:

¿Está todo ahí? Luego avancemos y agreguemos los detalles del autor de la publicación.

Encuentra el autor de la publicación

Como mencionamos anteriormente, nuestro bloque mostrará una lista de artículos escritos por el mismo autor que la publicación actual.

Para obtener el ID del autor de la publicación, importará el selector getCurrentPostAttribute del almacén de datos core/editor :

 wp.data.select( 'core/editor' ).getCurrentPostAttribute( 'author' )

getCurrentPostAttribute devuelve un valor de atributo para la publicación guardada.

Una vez que obtenga la identificación del autor, puede cambiar la consulta como se muestra a continuación:

 const posts = useSelect( ( select ) => { const _authorId = select( 'core/editor' ).getCurrentPostAttribute( 'author' ); return select( 'core' ).getEntityRecords( 'postType', 'post', { 'author': _authorId, 'per_page': numberOfItems, '_embed': true }); }, [ numberOfItems ] );

Con este código, obtendrá una lista de n artículos del mismo autor que la publicación actual.

Ahora que tiene la identificación del autor, también puede usarla para obtener datos adicionales de la base de datos.

Mostrar detalles del autor

Dado que no tenemos ninguna documentación disponible, usamos el código del bloque principal Post Author como referencia.

Para mostrar los detalles del autor, primero debe importar una nueva dependencia:

 import { forEach } from 'lodash';

Luego, en la función Edit , actualice el objeto de attributes de la siguiente manera:

 const { numberOfItems, columns, displayExcerpt, displayDate, displayThumbnail, displayAuthorInfo, showAvatar, avatarSize, showBio } = attributes;

Una vez hecho esto, editará el código visto en la sección anterior para recuperar los detalles del autor:

 const { authorDetails, posts } = useSelect( ( select ) => { const _authorId = select( 'core/editor' ).getCurrentPostAttribute( 'author' ); const authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null; const posts = select( 'core' ).getEntityRecords( 'postType', 'post', { 'author': _authorId, 'per_page': numberOfItems, '_embed': true }); return { authorDetails: authorDetails, posts: posts }; }, [ numberOfItems ] );

Tenga en cuenta que usamos el selector getUser para obtener los detalles del autor.

A continuación, es posible que desee obtener el avatar del autor. El siguiente código crea una serie de elementos que almacenan URL y tamaños de avatares:

 const avatarSizes = []; if ( authorDetails ) { forEach( authorDetails.avatar_urls, ( url, size ) => { avatarSizes.push( { value: size, label: `${ size } x ${ size }`, } ); } ); }

Luego, agregará los paneles y controles de la barra lateral para permitir que los usuarios personalicen el área del autor en el bloque:

 return ( <> <InspectorControls> <PanelBody title={ __( 'Author Info', 'author-plugin' ) }> <PanelRow> <ToggleControl label={ __( 'Display Author Info', 'author-plugin' ) } checked={ displayAuthorInfo } onChange={ () => setAttributes( { displayAuthorInfo: ! displayAuthorInfo } ) } /> </PanelRow> { displayAuthorInfo && ( <> <PanelRow> <ToggleControl label={ __( 'Show avatar' ) } checked={ showAvatar } onChange={ () => setAttributes( { showAvatar: ! showAvatar } ) } /> { showAvatar && ( <SelectControl label={ __( 'Avatar size' ) } value={ avatarSize } options={ avatarSizes } onChange={ ( size ) => { setAttributes( { avatarSize: Number( size ), } ); } } /> ) } </PanelRow> <PanelRow> <ToggleControl label={ __( 'Show Bio', 'author-plugin' ) } checked={ showBio } onChange={ () => setAttributes( { showBio: ! showBio } ) } /> </PanelRow> </> ) } </PanelBody> ... </InspectorControls> ... </> );

La siguiente imagen muestra la barra lateral de configuración actualizada:

Finalmente, puedes agregar la sección del autor a tu bloque:

 return ( <> <InspectorControls> ... </InspectorControls> <div { ...useBlockProps() }> { displayAuthorInfo && authorDetails && ( <div className="wp-block-author-box-author-plugin__author"> { showAvatar && ( <div className="wp-block-author-box-author-plugin__avatar"> <img width={ avatarSize } src={ authorDetails.avatar_urls[ avatarSize ] } alt={ authorDetails.name } /> </div> ) } <div className='wp-block-author-box-author-plugin__author-content'> <p className='wp-block-author-box-author-plugin__name'> { authorDetails.name } </p> { showBio && // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining authorDetails?.description && authorDetails.description.length > 0 && ( <p className='wp-block-author-box-author-plugin__description'>{ authorDetails.description }</p> ) } </div> </div> )} <ul> ... </ul> </div> </> );

La siguiente imagen muestra cómo se representa en la pantalla.

Ahora guarde su archivo edit.js y ejecute sus pruebas. Su bloque debe incluir diferentes elementos según la configuración del bloque.

Todavía falta una última cosa: el número de columnas para mostrar artículos.

Cambiar el número de columnas

Para darle al usuario la capacidad de mostrar vistas previas de artículos en columnas, definimos el atributo de columns en el archivo block.json . También incluimos un atributo de columns en el script y creamos un control de configuración para permitir a los usuarios cambiar el número de columnas, aunque este cambio no tiene efecto por el momento.

En el código JSX anterior, debería haber notado que agregamos clases CSS a varios elementos:

Clases asignadas a elementos en la sección Autor:

• wp-block-author-box-author-plugin__author
• wp-block-author-box-author-plugin__avatar
• wp-block-author-box-author-plugin__author-content
• wp-block-author-box-author-plugin__name
• wp-block-author-box-author-plugin__description

Clases asignadas a elementos en la sección de contenido:

• wp-block-author-box-author-plugin__post-items
• wp-block-author-box-author-plugin__post-thumbnail
• wp-block-author-box-author-plugin__post-title
• wp-block-author-box-author-plugin__post-date
• wp-block-author-box-author-plugin__post-excerpt

Todavía falta una clase. El nombre de esta clase se generará dinámicamente para reflejar el número de columnas establecido por el usuario.

Regrese al archivo Edit.js y modifique el elemento ul de la siguiente manera:

 <ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }> ... </ul>

Agregamos una nueva clase de columns-${ columns } de acuerdo con la sintaxis de literales de plantilla para insertar una expresión dentro de una cadena. De esta forma, el atributo adjunto al elemento ul dependerá de la configuración del usuario (p. ej., columns-1 , columns-2 , etc.).

Ahora abra el archivo style.scss y reemplace el código existente con lo siguiente:

 .wp-block-author-box-author-plugin { background-color: #21759b; color: #fff; padding: .6em; ul.wp-block-author-box-author-plugin__post-items { padding: 0; list-style-type: none; display: grid; gap: .5em; @for $i from 2 through 4 { &.columns-#{ $i } { grid-template-columns: repeat(#{ $i }, 1fr); } } li { list-style: none; img.wp-block-author-box-author-plugin__post-thumbnail { height: auto; max-width: 100%; } } } } .wp-block-author-box-author-plugin__author { display: flex; flex-wrap: wrap; } .wp-block-author-box-author-plugin__avatar { margin-right: 1em; } .wp-block-author-box-author-plugin__author-content { flex-basis: 0; flex-grow: 1; }

No profundizaremos en ese código, ya que está más allá del alcance de este artículo. Pero si desea profundizar más, puede consultar los siguientes recursos:

• Diseño de cuadrícula CSS
• Aprenda la cuadrícula CSS
• La regla @for en Sass
• Anidando en Sass

Y eso es todo para la representación del bloque en el editor.

Construyendo el bloque para renderizar en la página

Ahora que el código que representa el bloque en el editor está completo, podemos continuar y construir el bloque para representarlo en el front-end.

Como mencionamos anteriormente, cuando se trata de bloques dinámicos, el archivo del complemento es responsable de generar el HTML que se representará en la interfaz.

Entonces, abra el archivo principal de su complemento ( author-plugin.php en nuestro ejemplo).

Lo primero que debe hacer es hacer que los atributos del bloque estén disponibles para la función PHP de WordPress. En su archivo PHP, cambie la definición de la función de la siguiente manera:

 function author_box_author_plugin_render_author_content( $attr ) { ... }

Ahora puede usar las funciones de WordPress para recuperar y manipular datos. Por ejemplo, puede usar get_posts para recuperar las últimas publicaciones de blog (lea más en nuestro artículo detallado que cubre la función get_posts ):

 function author_box_author_plugin_render_author_content( $attr ) { $args = array( 'numberposts' => $attr['numberOfItems'], ); $my_posts = get_posts( $args ); if( ! empty( $my_posts ) ){ $output = '<ul>'; foreach ( $my_posts as $p ){ $output .= '<li><a href="' . esc_url( get_permalink( $p->ID ) ) . '">' . $p->post_title . '</a></li>'; } $output .= '</ul>'; } return $output ?? '<strong>Sorry. No posts matching your criteria!</strong>'; }

La función anterior recupera las últimas publicaciones de blog de numberOfItems de su base de datos de WordPress (por defecto post_type está establecido en post ) y devuelve una matriz de objetos $post . Luego itera sobre la matriz para construir los elementos de la lista.

Si inspecciona la salida HTML, notará que es una lista simple de publicaciones, como la que se muestra en la siguiente imagen:

En nuestro artículo anterior, mencionamos que usará el gancho useBlockProps React para marcar el elemento contenedor del bloque en su código JSX. Deberá hacer lo mismo en su función PHP.

WordPress proporciona la función get_block_wrapper_attributes para eso.

Entonces, cambie su código PHP de la siguiente manera:

 function author_box_author_plugin_render_author_content( $attr ) { $args = array( 'numberposts' => $attr['numberOfItems'] ); $my_posts = get_posts( $args ); if( ! empty( $my_posts ) ){ $output = '<div ' . get_block_wrapper_attributes() . '>'; $output .= '<ul>'; foreach ( $my_posts as $p ){ $title = $p->post_title ? $p->post_title : 'Default title'; $url = esc_url( get_permalink( $p->ID ) ); $output .= '<li>'; $output .= '<a href="' . $url . '">' . $title . '</a>'; $output .= '</li>'; } $output .= '</ul>'; $output .= '</div>'; } return $output ?? '<strong>Sorry. No posts matching your criteria!</strong>'; }

Ahora se ha asignado una clase wp-block-author-box-author-plugin al elemento contenedor y el bloque tiene un color de fondo diferente.

Luego, la función get_posts obtiene los datos de WP_Posts y el ciclo foreach crea los elementos de la lista (consulte también Cómo mostrar los datos devueltos por get_posts).

Agregar imagen destacada, fecha y extracto

A continuación, deberá agregar miniaturas de publicaciones, fechas y extractos. En el mismo archivo, cambie su código PHP de la siguiente manera:

 function author_box_author_plugin_render_author_content( $attr ) { $args = array( 'numberposts' => $attr['numberOfItems'] ); $my_posts = get_posts( $args ); if( ! empty( $my_posts ) ){ $output = '<div ' . get_block_wrapper_attributes() . '>'; $output .= '<ul class="wp-block-author-box-author-plugin__post-items columns-">'; foreach ( $my_posts as $p ){ $title = $p->post_title ? $p->post_title : 'Default title'; $url = esc_url( get_permalink( $p->ID ) ); $thumbnail = has_post_thumbnail( $p->ID ) ? get_the_post_thumbnail( $p->ID, 'medium' ) : ''; $output .= '<li>'; if( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){ $output .= $thumbnail; } $output .= '<h5><a href="' . $url . '">' . $title . '</a></h5>'; if( $attr['displayDate'] ){ $output .= '<time datetime="' . esc_attr( get_the_date( 'c', $p ) ) . '">' . esc_html( get_the_date( '', $p ) ) . '</time>'; } if( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){ $output .= '<p>' . get_the_excerpt( $p ) . '</p>'; } $output .= '</li>'; } $output .= '</ul>'; $output .= '</div>'; } return $output ?? '<strong>Sorry. No posts matching your criteria!</strong>'; }

El ciclo foreach itera sobre la matriz $my_posts . En cada iteración, varias condiciones verifican los valores de los atributos y crean la salida en consecuencia.

Ahora eche un vistazo a la salida en la pantalla:

Ahora puede ejecutar sus pruebas. Cambie la configuración de fecha, extracto y miniatura y verifique cómo cambia el contenido del bloque en el front-end.

Mostrar publicaciones en columnas

En nuestro código JavaScript, usamos una clase de columns-${ columns } para mostrar las vistas previas de las publicaciones en columnas. Ahora necesitamos hacer lo mismo en PHP.

Para hacer eso, simplemente tienes que agregar estas dos líneas de código:

 $num_cols = $attr['columns'] > 1 ? strval( $attr['columns'] ) : '1'; $output .= '<ul class="wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '">';

Esto agregará una clase de columns-n al elemento ul que contiene las vistas previas de las publicaciones. Ahora, el número de columnas que se muestran en la página debe coincidir con el número de columnas establecido en la configuración del bloque.

Construya el cuadro de autor

Por último, debe crear el cuadro que contiene los detalles del autor, incluido el avatar, el nombre y la descripción.

Dentro de la función de devolución de llamada, deberá agregar un conjunto de condiciones para verificar el valor actual de cada atributo:

 if( $attr['displayAuthorInfo'] ){ $output .= '<div class="wp-block-author-box-author-plugin__author">'; if( $attr['showAvatar'] ){ $output .= '<div class="wp-block-author-box-author-plugin__avatar">' . get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) . '</div>'; } $output .= '<div class="wp-block-author-box-author-plugin__author-content">'; $output .= '<div class="wp-block-author-box-author-plugin__name">' . get_the_author_meta( 'display_name' ) . '</div>'; if( $attr['showBio'] ){ $output .= '<div class="wp-block-author-box-author-plugin__description">' . get_the_author_meta( 'description' ) . '</div>'; } $output .= '</div>'; $output .= '</div>'; }

El código es bastante sencillo. Comprueba el valor actual de cada atributo y, si es true , genera el HTML necesario.

Ahora guarde su archivo PHP y compare el bloque en el editor con el mismo bloque en la interfaz.

Encontrará el código completo del bloque de ejemplo en este Gist público.

Los bloques dinámicos son bloques de Gutenberg bajo esteroides y esta guía cubre todo lo que necesita saber para crear bloques dinámicos para su próximo proyecto Haga clic para tuitear

Recursos recomendados para el desarrollo de bloques dinámicos

Si aguzó el oído mientras leía este artículo y comenzó a reconocer las oportunidades de desarrollo profesional que surgen al aprender a crear bloques de Gutenberg, nuestro consejo es que continúe explorando y adquiriendo nuevas habilidades en las tecnologías detrás del desarrollo de bloques.

Aunque todavía falta documentación oficial confiable, existen excelentes recursos, tanto gratuitos como de pago, que consultamos mientras escribíamos este artículo. Entre los muchos recursos disponibles, recomendamos los siguientes:

Recursos oficiales

• Datos
• Datos básicos
• Crear bloques dinámicos
• Introducción al desarrollo de bloques de Gutenberg
• Aprendizaje social de WordPress en MeetUp

Tutoriales recomendados de los colaboradores principales de WordPress

• Solicitud de datos en Gutenberg con getEntityRecords por Ryan Welcher (@ryanwelcher)
• Una descripción práctica de la API @wordpress/data por Darren Ethier (@nerrad)

Recursos de JavaScript, React y Redux

• Tutoriales de JavaScript por MDN
• Primeros pasos con React (oficial)
• Tutorial de Redux (oficial)

Recursos relacionados de Kinsta

• ¿Qué es JavaScript? Una mirada al lenguaje de secuencias de comandos más popular de la Web
• Una guía definitiva para manejar errores en JavaScript
• ¿Qué es Node.js y por qué debería usarlo?
• Cómo instalar Node.js y npm en Windows, macOS y Linux
• Cómo depurar el código de Node.js usando varias herramientas
• Node.js vs PHP: una comparación cara a cara
• Los 10 tipos más populares de aplicaciones Node.js en 2022
• Angular vs React: una comparación detallada lado a lado

Resumen

Hemos llegado al final de este (segundo) largo viaje a través del desarrollo del bloque de Gutenberg.

En este artículo, cubrimos algunos temas avanzados, como el estado de la aplicación y las tiendas Redux. Pero con suerte, ahora debería tener una mejor comprensión del desarrollo de bloques en general.

Sí, las habilidades de Node.js, Webpack, Babel, React y Redux son esenciales cuando se trata de construir bloques avanzados de Gutenberg, pero no necesita ser un ninja de React para comenzar. Aprender a desarrollar bloques de Gutenberg no tiene por qué ser complicado. Simplemente hágalo con la motivación adecuada y siguiendo el camino de aprendizaje adecuado.

Y esperamos que este artículo, y el anterior, le brinden el mapa correcto para encontrar su camino y comenzar con el desarrollo de Gutenberg de inmediato.

¡Hasta usted ahora! ¿Ya creaste bloques dinámicos? ¿Tiene algún ejemplo para compartir con nosotros? ¿Y cuáles fueron los mayores obstáculos en su experiencia? Siéntase libre de dejar un comentario a continuación.