 Hola a todos comunidad, como están. Bienvenidos a esta charla del World Camp San José 2022. Mi nombre es Alex Guadra, soy de Nicaragua. En esta ocasión les vengo a dar una charla sobre desarrollo Wordpress, específicamente desarrollo de bloques. En el título de la charla es creando un bloque de Gutenberg dinámico desde cero, pero a partir de código de un short bloc, perdón, un short code que ya teníamos previamente preparado. Como les decía, mi nombre es Alex, soy de Nicaragua y trabajo como software engineer en NicaSource, usuario de Wordpress desde hace algún tiempo, ya casi de años utilizando Wordpress, miembro de la comunidad Wordpress de Nicaragua. Desde 2017 y pues me pueden encontrar en LinkedIn como Alex Guadra y también tengo un pequeño y sencillo sitio web y lo podemos buscar como alesquadra.deb. Entonces, ¿qué vamos a aprender en esta charla? Bien, a lo largo del World Camp han aprendido un poco cómo crear bloques de Gutenberg. Sabemos que Gutenberg es el nuevo editor de código y ha venido a hacer, digamos, un antes y un después de lo que es el desarrollo en Wordpress. Entonces, en esta ocasión vamos a igual a trabajar, a aprender a hacer un bloque básico y a partir de un short code que ya tenemos previamente desarrollado, vamos a transferir toda la lógica de este short code a este bloque. También vamos a ver dos elementos interesantes que están dentro de la documentación del editor de bloques, que es el transformar bloques y los end-to-end tests, que igual son dos secciones que todavía están en desarrollo, no todavía se está trabajando en ello, pero es muy interesante tocarlo en esta ocasión. Ahora, ¿qué es exactamente el editor de bloques de Gutenberg? Ok, el editor de bloques simple e esencialmente es lo que sustituyó el viejo editor clásico. Ahora lo que tenemos es un editor basado en React, es decir, React está integrado y había integrado en Wordpress, lo cual igual este editor, al igual que el anterior, permite crear, editar, borrar contenido, pero esta vez lo hace a través de bloques, es decir, podemos interactuar con nuestro contenido, manipulando pequeños bloques de contenido como imágenes, ya sea párrafo, galerías, etcétera. Entonces, de hecho también para algunas personas es mucho más fácil utilizar el editor de bloques que utilizar el editor clásico. El editor clásico recordemos que era más que todo tecto plano, podemos meter un poco de HTML también, pero también nosotros, digamos, esa necesidad de crear cosas personalizadas, la sustentábamos con shortcodes. No quiere decir que los shortcodes desaparecieron, todavía existe un bloque que se llama shortcodes en el editor de bloques. Ahora, todo esto en Wordpress como sabemos, Wordpress es open source, por lo tanto nosotros podemos personalizarlo, podemos hacer, digamos, cosas un poco más adaptadas a las necesidades, ya sea de nuestro cliente, entonces siempre vamos a quedar de alguna u otra manera personalizar todo. Los tímulos personalizamos, los plugins los personalizamos. Entonces, ¿por qué desarrollar un bloque personalizado? Simple y sencillamente porque va a haber un momento en que necesitamos un bloque que no hace lo que hacen los bloques que están dentro del directorio de bloques de Wordpress. Entonces, siempre vamos a necesitar, ya sea por solicitud de un cliente o porque de pronto se nos ocurre, pues crear un bloque que, digamos, satisfaga una necesidad del sitio, entonces vamos a recurrir a la personalización o lo que le llaman a crear este tipo de componentes from scratch. Actualmente existen muchos paquetes de bloque como son crawlblocks y otros que, digamos, ya nos trae, digamos, una gran cantidad de bloques distintos o que tienen mayores o mayores funcionalidades que las que ya trae Wordpress por defecto. Entonces, igual, pero si no encontramos un bloque dentro de ese grupo, entonces también lo necesitaríamos personalizar. ¿Qué se necesita para que desarrollemos bloques? Ok, en este caso el paradigma pues ha cambiado un poco porque antes solo necesitamos de PHP para desarrollar un Wordpress y un poco de jQuery o JavaScript y CSS para personalizar nuestro frontend y también hacer un poco de animaciones, etcétera. Pero ahora necesitamos una otra gran cantidad de herramientas para poder desarrollar bloques ya que recordemos que estos bloques requieren del React para trabajar. Entonces, por ende, necesitamos conocer JavaScript y Node.js y, claro, está React. En esta ecuación nosotros necesitaríamos también un ambiente de prueba, como lo puede ser local, también podría ser docker si quisiéramos o igual, vamos a utilizar también la herramienta de Wordpress ENF para hacer prueba. Entonces, aparte de esto, pues, siempre vamos a tocar PHP, claro, está Wordpress, está sustentado, basado en PHP, entonces necesitamos todavía conocimientos de PHP. No es vital el 100% del conocimiento de React para crear un bloque básico porque ya el paquete de componentes de Wordpress trae una gran cantidad de componentes que podríamos reutilizar. Sí recomiendo conocer de React para aventurarse en esto, pero la documentación hasta el momento está un poco mejor que hace 3 años que comenzó, que se comenzó a trabajar con Wordpress, entonces ya hay mucho ejemplo, ya hay una gran cantidad de componentes que podemos reutilizar, pero sí recomiendo conocer más de esta tecnología Node.js y React. Que vamos a construir en esta ocasión, ok. Actualmente tenemos un sitio con un shortcode que es un shortcode que retorna información del clima a nuestra, a una página que nosotros queramos, entonces esta información del clima es alimentada por la OpenWare, la API de OpenWare y por ende el shortcode solo me pide un atributo que es la ciudad, entonces cuando tengo la ciudad, él me va a retornar la información del clima de esa ciudad. Entonces lo que vamos a hacer es que vamos a hacer este shortcode, lo vamos a convertir a bloque, pero no vamos a dejar de utilizar la misma logica que teníamos antes, vamos a reutilizar la logica que tenía el shortcode, ok. Y vamos a empezar a crear nuestro bloque, nosotros tenemos, vamos a utilizar un comando que ya viene en el paquete Scripts de Wordpress que es CreateBlock. Para los que ya conocen React, hay un comando que es CreateReactApp, que es el comando por así decirlo oficial para crear aplicaciones de React, pero en este caso hay un paquete, verdad, un NPM package dentro de Wordpress que nos permite crear este paquete de, perdón, esto bloque. Lo que va a hacer simple es sencillamente es crear ya mi directorio y dejarlo listo para que yo pueda simple, sencillamente comenzar a trabajar en los componentes. No voy a necesitar trabajar nada más que y lo que es decir el código que voy a trabajar en los componentes y el código del plugin que de la logica del plugin que yo quiero. Entonces lo que va a hacer es eso mismo, crear un plugin en el directorio donde yo seleccione, le va a asignar el nombre y va a realizar toda esa sustitución de todos los nombres y domains que necesite el plugin. Igual vamos a necesitar activar luego de esto nuestro plugin. Vamos a confiar el archivo blog.json que es el archivo prácticamente de configuración de nuestro plugin y yo que ahí después vamos a realizar una prueba. Ahora, ok, vamos al código. Este código pues también lo pueden encontrar en mi repositorio personal de GitHub, se van a, me buscan como a lexico21 y si buscan el webblog, ahí está todo el código de este ejemplo. Entonces primero, ok, vamos a realizar la configuración, la instalación de create blog. Entonces solo para esto vamos a utilizar el npx, vamos a escribir arroba wordpress, script, perdón, es arroba wordpress pk create blog. Y le vamos a dar el nombre en este caso, pongámosles blogeclimo. Le vamos a enter y vamos a esperar que intale todos los paquetes necesarios para nuestro bloque. Para mientras vamos a ir viendo acá, en nuestro sitio, creo que lo tengo acá, en nuestro sitio este es el shortcode que habíamos creado previamente y este shortcode verdad lo que hace es simple y sencillamente devolver esta información. Es decir, el shortcode ya tiene una configuración de estilos, de lógica y dándonos nosotros el, la ciudad por ejemplo podríamos cambiar aquí de Miami, ahora está la información que dice tenedad de Miami. Todo esto lo estamos trayendo desde el API de OpenWare y nos vamos a por ejemplo a Madrid, actualizamos y ahí está la información de Madrid, aparentemente verdad, hay un clima de cielo claro. Ok, vamos a ver si todavía está creando el paquete, luego lo vamos a abrir en nuestro editor de código. Ok, entonces vamos a revisar un poco también el código que tenemos del shortcode entras. Entonces como pueden ver, voy a hacer un poco más de suma acá para que se pueda ver mejor. Ok, como pueden ver este shortcode es un plugin normal pues como siempre se ha creado y aquí en este caso sí, recibe como atributo el nombre de la ciudad y este nombre de la ciudad es insertado en la URL que es el endpoint que me proporciona el API OpenWare. Obviamente acá necesito igual una una key para la API, una API key y luego de esto verdad solo hago la solicitud de respuesta de mi API y proceso esta solicitud. Esto me va a dar como retorno, un objeto que este objeto es el que yo voy a tomar y del cual voy a sacar toda la información que quiero como la temperatura, el nombre de la ciudad, la descripción, el porcentaje de humedad, la velocidad del viento y el icono ese icono donde sale el sol del clima. Entonces y también digamos yo puse acá de que me devuelva una estructura HTML que va a ser que es la que es donde yo estoy mostrando, imprimiendo en pantalla mi información. Ok, vamos a ver si ya terminó. Ok, ya terminó. Entonces como vemos al igual que cuando creamos una aplicación en React, con Create React App, hay una serie de comandos que son necesarios para empezar a trabajar con nuestro paquete como son NpnStart. NpnStart lo que va a ser es simple necesariamente a buildear todo el JavaScript que estoy utilizando y para que lo que se pudiera pueda mostrar en el frontend. Si de no ser por eso, entonces yo necesitaría siempre buildear en cada momento esta información y para que se me pueda mostrar en el frontend. Pero en este caso pues tengo una especie de Watcher que es el que va a estar realizando todos los cambios que hay en el código y lo va a compilar y lo va a guardar en la carpeta build para que pueda mostrarse en mi frontend. Entonces voy a correr el comando en NpnStart. Estoy dentro de la carpeta de plugins pero necesito irme a mi carpeta de bloque clima. Ahora sí, Npn. Igual va, ahora sí ya compilo. Él está tomando varios objetos de la misma API del editor de bloque como es lo que es el objeto bloque, el objeto elemento y el block editor que lo vamos a estar ocupando también. Entonces vamos a abrir este directorio que tenemos en WordPress. Como podemos ver, les decía anteriormente que ya tengo toda mi estructura de directorio de mi bloque. Tengo los archivos necesarios, el edit.js, el index.js, el block.json y lo estilo. Y también tengo mi archivo principal de plugins que es este bloqueclima.php. Vamos a ver qué es lo que me trajo esto. Lo que tengo que hacer para probar mi bloque de primera mano, irme a plugins y vemos que ya él como dentro de plugins creamos la carpeta de bloque clima. Entonces me creó, digamos, un accesso a un plugin, entonces lo voy a activar. Entonces vamos a ir a una página para ver esto. Vamos a ver prueba de bloque y vamos a buscarlo acá. Aquí está, bloque clima. Entonces esto es, por así decirlo, el tipo de bloque que viene por defecto. Entonces esto es lo que vamos a comenzar a editar. Ahora, dónde lo editamos, lo vamos a editar acá en dos lugares. Primero, bueno, toda la información del block.json ya, no importa, lo tenemos. Podríamos cambiarlo. Por ejemplo, aquí le podemos cambiar el título. Podemos cambiarle, por ejemplo, el nombre. Este nombre es importante porque el nombre del namespace que va a utilizar el bloque. También tenemos el icono. Podríamos utilizarlo. Cualquier icono de dash icon que está disponible dentro de Wordpress lo podemos utilizar. Y acá está archivo que él va a buscar para poder hacer el build de mi bloque. El editor script y el editor style lo está buscando dentro de index.ss y index.js. Pero estos archivos no están dentro de mi carpeta source, que es donde yo trabajo mi bloque, sino que van a estar aquí dentro de build. Entonces, bueno, vamos a revisar un poco acá el código en bloque clima. Podemos encontrar que el bloque dice, el bloque está registrado, lo vamos a encontrar en la carpeta build, no está en src, src es nuestro director de trabajo. Posteriormente, cuando nosotros empaquetemos el bloque, se tendría que ir pues con ese rectorio, pero ya no necesitaríamos otro rectorio como node modules para trabajar. Ok, entonces esto ya pues ya lo tenemos registrado y vamos a revisar también el index.js que el index.js, la función de register block type, toma como parámetro, el nombre y estas dos funciones, edit y save. Pero en este caso, como edit y save, como solo vamos a utilizar edit, entonces, y no necesitamos save porque vamos a utilizar un bloque dinámico, entonces vamos a aman bien y volarlo a nul. Vamos a decir que save va a ser para tornar un nul. Esto lo hacemos porque la lógica de lo dinámico en este bloque es que, ok, save lo que hace es guardar estáticamente la información que nosotros creamos en edit, en el editor. Entonces lo guarda de forma estática dentro de nuestro base dato. Pero nosotros no creemos nada estático, nosotros queremos que cada vez que cambie la API o que cada vez que cambiemos en la ciudad, inmediatamente nos devuelve esa información de forma enámica, no necesitaríamos guardarle la base dato, solo lo que requerimos es trasladar un JSON que nos solicitamos a la API y se lo mostramos al editor. Entonces acá en edit, pues estaríamos configurando esta parte. En esta parte pues necesitaríamos verificar que estamos importando el useBlockProps que este hook nos permite trabajar entre bloque y entre componente. Pero también vamos a ocupar, vamos a importar un componente que ya viene en WordPress que es el text control, text control y lo vamos a importar desde WordPress Component. Esto lo voy a copiar aquí para no teclearlo. Ok, ahí está. Entonces ya tenemos un componente, verdad que está dentro de la biblioteca de componentes de WordPress y lo vamos a utilizar acá. Entonces acá por ejemplo vamos a sustituir un poco el div, no va a ser un div ya, perdón, vamos a sustituir el párrafo ya no va a ser un párrafo, va a ser un div y este div por ejemplo dentro del div vamos a traernos el componente text control, verdad. Aquí lo tenemos text control que cierra en sí mismo y esto por ejemplo tendríamos que darle a ponerle un label, a ponerle español y vamos a ponerle también un hint para que sepa el usuario que es lo que va a hacer. Ok, como vemos todos los cambios lo está compilando, vamos a revisar acá qué es lo que nos está devolviendo, dice que, ok, ahí está. Entonces este es lo que habíamos cambiado y acá nos está devolviendo, nos está pidiendo un nombre de ciudad. Lo publicamos, no nos va a devolver nada porque todavía no le hemos agregado lógica esto. Como nosotros agregamos, dijimos que pues que save y va a ser nul, entonces no nos devuelve nada porque no está guardando nada en la base data, pero ya vemos acá que nuestro bloque está funcionando. Entonces luego de esto vamos a trabajar en nuestro archivo PHP, vamos a cambiar un par de cosas. En este caso vamos a agregar toda la lógica que tenemos desde el, nuestro shortcode, toda esta lógica, lo vamos a pegar nuestro archivo PHP. Esto lo hacemos exactamente acá. Hay que cambiar muchas cosas, verdad, no solo eso, pero vamos a irlo trabajando ahí. Entonces, pero acá bueno vamos a eliminar esto que está aquí, que no lo necesitamos y aquí claro está necesitamos decirle a WordPress, al core de WordPress de que ya no vamos a estar ocupando el archivo save, la función save. Entonces esto lo hacemos solo agregándole un atributo más, un parámetro más a la función register block type. Esta función, este parámetro va a ser un arreglo, este arreglo lo que va a contener es esta información que es, va a contener información, por ejemplo, vamos a crear una función que renderice todo el contenido del bloque, entonces vamos a decir que render callback va a ser igual a esta función que vamos a utilizar aquí. Esta función la podemos, la podemos cambiar un poco, le podemos decir que se ame Alex renderNima y esto va a ser lo que vamos a hacer acá, la copiar acá. Entonces ya register block type sabe entonces que todo lo que es ser relacionado con renderizar la información del bloque lo va a procesar acá en esta función. Entonces en esta función ya no necesitamos los atributos que traemos de ShortCop si no quedamos necesitar atributos, lo vamos a traer desde el blog JSON. Igual en blog JSON vamos a volvernos un poco a blog JSON, porque en blog JSON necesitamos agregar un par de líneas también que es por ejemplo esa misma atributo que estamos llamando en nuestra función de render, entonces vamos a decir acá atributs y para esto necesito una variable que me guarde, que me pueda guardar el nombre de la ciudad, entonces en este caso vamos a llamarle city name porque es como está en ShortCop. ¿Visto acá entonces? Y acá le tenemos que decir el tipo y este tipo es una cadena de texto. Ok, vamos a guardar acá también, entonces lo que está haciendo acá es que estos atributos lo estoy mandando a traer en mi función de renderizado. Ok, estos atributos acá en este archivo pueden ser de muchos, pueden tener muchas variaciones, por ejemplo acá en estos atributos en este archivo también podría decirle al blog que qué tipo de variaciones de color por ejemplo podría tener o toda aquella variable que yo necesite procesar también la voy a tener aquí. En este caso como estamos utilizando ShortCop entra pues en como de una forma amigable que nosotros le indiquemos de que vamos a utilizar ese tipo de atributo. Ok, entonces bueno tenemos lista este archivo, ahora vamos a continuar trabajando con esto, vamos aquí a agregarle un par de líneas, por ejemplo vamos a crear una variable que se llame city name que va a traer de atributos el nombre de la ciudad y en caso que no exista nombre de la ciudad me va a dejar una ciudad por defecto con esta variable. Ahora igualmente acá yo necesitaría cambiar esto que está aquí ya no sería ya no traeríamos de los atributos del ShortCop sino que sería el city name y eso sería todo lo que cambiaremos en este archivo no cambiaremos más nada. Ya tenemos la lógica del plugin de perdón, la lógica del bloque traída de un ShortCop, necesitaríamos nada más. Pueden haber digamos situaciones un poco más compleja en este caso como por ejemplo de que necesitaríamos crear una reactividad entre el front entonces ya la situación pues cambia, ya no sería tan fácil pero sí pues es posible. Entonces en edit va a dar un problema aquí, nos va a empezar a dar error, esto no está el error, ok no hay error todavía, no me permitió un guardar, esto es porque no he terminado con esa parte del bloque, a esto necesitamos agregarle un par de atributos más, por ejemplo el valor que me va a traer que va a contener el text control tiene que ser city name, ok, pero esta variable no existe, esta variable nosotros la tenemos que traer de los props y tenemos que guardarla en, vamos en realidad de construirla dentro de una variable que son los atributos, lo que le decimos const, si pudiéramos más, si pudiéramos más elementos en atributos pues alimentaría este también este objeto. Igual tendremos como, como sabemos, como es react tenemos que utilizar el siempre setear, digamos nuestro estado, lo que tenemos en atributo y que vamos a hacer cuando este atributo cambia, entonces de igual manera tendríamos que decirle al text control qué es lo que va a hacer al cambiar y por eso le ponemos esta función en un chain y lo que va a hacer es que me va a traer de cualquier nuevo cambio que haga, que haya en el text control, lo va a setear como que la variable city name que está dentro de atributo, entonces ahora sí, en este caso tengo que recargar, ahora sí voy a poder cambiar mi ciudad, lo puedo actualizar y si me voy al front end me debería de dar esto. Como pueden ver en esta ocasión ya está, ya tiene estilos pero yo en realidad no llame ningún, no he tocado ningún tipo de estilo, esto se da porque como esa pequeña estructura de html que hice dentro del shortcode ya tiene estilo, entonces ya están registradas dentro del style en queue de warpref, entonces ya me trajo los estilos pero si yo quisiera cambiar los estilos del editor me voy acá, el de hecho crea una clase por defecto que es este el create block y dash el nombre de la, de la del bloque, ok, entonces continuando, vamos a ver, ya pues codiamos un poco, ya vimos como trabaja, vamos a ver algo bastante interesante ahora que es lo de la transformación de bloque, esto lo puede encontrar en la documentación del editor de bloque, pero de qué trata, ok, la transformación de bloque trata de la mayoría, me imagino que tiene experiencia utilizando el editor de bloque, sabe que podemos convertir un bloque a otro, por ejemplo un bloque de parrafo lo podríamos crear como un bloque de quad o de heading o inclusive un bloque clásico, entonces la idea es que nosotros pudiéramos convertir el shortcode a este bloque, ¿por qué? porque ahí podrían haber proyectos que tienen años de estar utilizando un shortcode, entonces quisiéramos en algún momento nosotros tener la habilidad de simple esencialmente agarrar este bloque y transformarlo, entonces en la documentación hay múltiples maneras pero la más cercana lo que estamos nosotros haciendo es la de convertir un poco, convertir el bloque simple esencialmente pegando el shortcode dentro de dentro de mi editor, entonces para ello vamos a utilizar este parámetro que se llama transforms y lo vamos a pegar acá en el archivo index.js, entonces como pueden ver, bueno acá le vamos a cambiar, ok, ya no se llama weather block, sino que bloque clima y ok, se fijan el shortcode que nosotros teníamos tenía como tac weather, entonces acá el tac que vamos a seguir utilizando es este, weather y vamos a darle lo atributo de city name, ¿verdad? y qué es lo que va a hacer, que cada vez que encuentre, perdón cada vez que nosotros peguemos este cualquier shortcode contact weather, lo que va a hacer es crear un bloque que es el bloque que le estamos indicando acá, entonces vamos a guardar y si nos vamos a nuestro sitio de prueba lo vamos a hacer exactamente donde está el shortcode para que vean la diferencia, aquí está, yo vengo copio esto y lo pego, inmediatamente me aparece el bloque, esto claro necesita un poco más de desarrollo porque pues si ustedes fijan no me trajo el atributo que necesito, entonces no tendría sentido de estar solo copiando y pegando el shortcode, claro está, sino que lo lógico sería que ya me copie esto con el atributo que yo quisiera, imagínense un bloque que tuviera varios atributos más de uno, entonces sería tedioso, entonces da lo mismo crear un nuevo bloque a copiarlo y pegarlo y la otra forma, aparte de ésta es simple y sencillamente agarrando el, vamos a comentar esto, agarrando el bloque de shortcode y transformándolo directamente y esto lo podemos hacer con este pequeño bloque de código, lo que va a hacer es que va a buscar el tipo bloque que sea shortcode, está dentro de cores, es un namespace y me lo va a cambiar a bloque clima y lo mismo lo podemos, vamos a recargar acá, creo que estas cosas no lo hace por defecto y en el botón de transformar, vamos a ver que está ahí, estaba ahí el bloque clima, hay un error acá, supongo que debe ser, ok, sí, no puede leer la propiedad que le estoy pasando, solo vamos a hacer un pequeño cambio acá y debería, siempre da el problema, pero ok, esa es la, como le decía, esa es la idea de hacer este tipo de transformaciones de que el pudiera simple y sencillamente de que yo venir a agarrar mi bloque viejo, darle transform to en el botón de transformar y pasármelo a otro tipo de bloque, es la idea y por último vamos a ver un par de cosas de forma rápida que es el entuentes, el entuentes en sí, grande esto, el entuentes en sí es la prueba que hacemos de la funcionalidad que está dentro, dentro del, del frontend, ok, para esto WordPress actualmente ha estado desarrollando un par de bibliotecas en la comunidad WordPress, verdad, ha estado desarrollando un par de bibliotecas como lo son los test-utils, entuentes-utils y los entuentes, todo esto nosotros lo tendríamos que instalar por razones de tiempo pues no podríamos hacerlo aquí en este momento, pero todo esto lo vamos a instalar dentro de nuestro, nuestro, nuestro, nuestro pakad Jason, verdad, nuestro director de trabajo y tendríamos que instalar también NVN Start, NVN, perdón, que es prácticamente una especie de, de intancia de Docker con WordPress que trae para que nosotros podamos hacer este tipo de prueba. Ahora también podríamos correr esto interactivamente que no habrá la pantalla y que no haga las pruebas directamente desde el navegador, perdón, por utilizando popter. Es por esto digamos que por ejemplo no valdría la pena tomárselo el tiempo para hacerlo acá porque es una solución que ya la comunidad está migrando hacia otro herramienta, la está migrando hacia Playwright y Playwright es una librería un poco más sencilla de utilizar y nos haría un poco más sencillo la práctica de este Entrant Testing. Entonces en el Entrant Testing, por ejemplo, utilizando todavía estas librerías que están todavía disponibles, pero ya se les dejó de dar soporte solo para la, más bien solo se le da soporte para la reparación de box. Entonces no hay mucha actualización que digamos y la documentación puede estar un poco ahí en standby. Pero lo que hacen Entrant Test es agarrar el bloque que yo he estado trabajando y insertarlo dentro de un nuevo post que yo le diga y probar de que el bloque existe dentro del post. Entonces el resultado por ejemplo debería hacer que las pruebas pasen. Un ejemplo de código de esto, dónde insertaríamos por ejemplo este código, tendríamos que insertarlo dentro de una carpeta acá en Array de todo mi, que se llama Test. Y acá yo crearía un archivo que se llamé por ejemplo Entrant por ponerle a un ejemplo Test.js y ahí agregaría un código que sería mi código de prueba y lo voy a explicar rápidamente. Y acá por ejemplo traeríamos desde Entrant Utils dos funciones que son Create New Post e Insert Block. Entonces lo que haríamos ahí es cuando es un tipo de prova automática que cuando la corremos él va a crear dentro de esta instancia de MVM va a crear un nuevo post, va a insertar un bloque y luego va a probar de que exista un atributo con nombre data type que tenga el nombre del bloque en este caso por ejemplo bloque clima y si existe no debería ser nulo y entonces pasaría mi prueba. Ese es el ejemplo que les estaría acá. Toma algún tiempo de vamos a instalar MVM que descargue por ejemplo popter e instalar los utils pero sí veamos una herramienta muy útil a la hora de que nosotros trabajemos con bloque, crear varios bloques y que nos permitiríamos tener desarrollar una especie de utilizando metodologías ágiles, crear una especie de CICD para no depender digamos mucho solamente de las pruebas manuales que una de las cosas que Warp ha estado implementando, implementando prueba automática en muchas de las unités en muchos de los desarrollos que se está haciendo. Entonces esto es algo que les traía que les quería compartir. Los recursos que utilizados para desarrollar esta presentación son el handbook del editor de bloque pueden también consultar los canales de Ryan Welcher en YouTube y Twitch. Ryan Welcher es alguien que contribuye al proyecto también Goldenberg y aquí les dejo el enlace al repositorio si quieren probar el código, jugar con él, descargarlo, estar libre, un repositor público y también algo un poco más detallado sobre esta presentación un paso a paso está en un artículo que escribí de medium para Nikazors de que es cómo crear un bloque dinámico de Gotemberg paso a paso. También podrían consultar Gotemberg Times que es otro recurso muy interesante sobre noticias y cosas que acerca de este proyecto y igual cualquier consulta puede escribirme a mis redes sociales o escribirme a través de mi sitio web. Muchas gracias y yo soy Alistuara y fue un gusto haber compartido con ustedes aquí en WorkCamp San José.