 Hola a todos y bienvenidos, mi nombre es Frank Alderón, soy de Guatemala, soy desarrollador web con 10 años de experiencia trabajando en desarrollo web de tanto prong end como back end y me especializado en los últimos años con WordPress y el día de hoy vamos a platicar un poco acerca de la creación de botember blocks, así que vamos a iniciar con una breve introducción, luego vamos a ver la forma más fácil de cómo crear un botember blocks, que es con la herramienta que trae WordPress por defecto, una herramienta que él nos da, vamos a ver los archivos más importantes, vamos a ver cuáles son las tecnologías detrás de los botember blocks, vamos a ver un par de ejemplos y vamos a ver un código básico para poder agregar un bloque, editar el bloque, darle diseño y cómo guardar data en los diferentes bloques, así que quisiera empezar con una breve introducción de qué es botember, sé que desde la última versión, desde ya hacía varias versiones y botember es el editor por defecto de WordPress y botember viene a cambiar el paradigma de cómo editábamos el contenido, es una interfaz de edición basada en un sistema de bloques, viene a ser el reemplazo del time emcee, si se recuerdan durante muchos años se te loceó time emcee para el famoso what you see what you get, entonces botember lo viene a reemplazar específicamente para WordPress y la idea es que permita crear y publicar contenido de una forma más fácil y más intuitiva, sobre todo para el creador de contenido y es muy similar a los constructores visuales como divi o elemento, yo creo que botember viene a ser como la respuesta de WordPress a esta tendencia que se dio a utilizar todos estos constructores, si ustedes tienen experiencia trabajando con algunos constructores, los más comunes son divi, elemento, puede ser en su momento WP, bakery o cualquiera de estos, entonces botember viene a tratar de de ser esa respuesta para ahora utilizar de nuevo las opciones nativas de WordPress, un sistema basado en bloques donde cada bloque es reutilizable, cada bloque se puede personalizar de acuerdo a las necesidades y es parte de un proceso o una nueva etapa de WordPress, por así decirlo, donde vienen más cambios, por ejemplo ahora también viene el tema del full site editing donde de nuevo es poder editar desde el lado del front end y que sea mucho más visual, y su elemento principal pues obviamente es el editor de bloque, para continuar y así es como se ve el editor de bloques, prácticamente ahora cuando estamos editando el contenido en WordPress vamos a ver que tenemos tres secciones, de hecho estos paneles, esas tres secciones en algún momento se pueden ocultar regularmente la sección que vemos a la izquierda con el número uno, es donde vemos todo el estado de bloques que existen o que están disponibles, WordPress por defecto ya trae una cantidad inmensa de bloques que está dividido en diferentes categorías, tenemos bloques de texto, de media, de widget, de embed, etcétera que ya están listos para utilizar, una vez que seleccionamos el bloque vamos a ver en la parte central en donde está el número dos que es donde estamos editando el contenido como tal y vamos a ver diferentes opciones dependiendo el tipo de el bloque que hayamos seleccionado, en algunos casos verdad el más común puede ser un bloque de texto, entonces una vez que insertamos el bloque de texto vamos a ver que tenemos un toolbar muy similar a como lo teníamos en Time.c, donde podemos darle formato al texto pero luego dependiendo, como decía, el tipo de bloque tenemos algunos bloques que son para layouts, para formar columnas, para grupar, etcétera, entonces en parte dos que es donde más vamos a estar editando o generando contenido, ahí es donde podemos hacer los cambios de contenido como tal y luego tenemos en la sección derecha, tenemos la sección número tres, donde esta sección este sidebar regularmente va a cambiar de acuerdo al bloque en el que nosotros seleccionemos y aquí tenemos configuraciones, tal vez un poco más avanzadas o configuraciones que son más específicas para cada bloque y esto va a depender también del bloque que estemos utilizando y vamos a ver también que podemos nosotros al momento de crear nuestros Woottemberblog nativos o propios, podemos prácticamente configurar o personalizar toda esta interfaz de acuerdo a nuestras necesidades y al tipo de bloque o al tipo de contenido que queremos generar. Vamos a hablar que como les decía hay bloques nativos, son los que ya trae WordPress que regularmente están categorizados en texto, media, diseño que son layout, los widget que son los que anteriormente se utilizaban mucho para los sidebar, tenemos de tema también que hay algunas herramientas muy útiles por ejemplo query loops o comentarios, etcétera y los embed que es para traer contenido de otras plataformas como Facebook, Twitter, Instagram, etcétera, entonces esos son todos los bloques que podemos llamar nativos que son los que ya se incluyen dentro de WordPress y que están para poder utilizar inmediatamente y luego tenemos bloques personalizados que van de acuerdo a nuestras necesidades, ahí regularmente se utilizan por medio de plugins, hay plugins de bloque específico, acá les puse un ejemplo, doble performs que es un plugin para formularios, entonces ahora doble performs cuando nosotros lo instalamos ya nos genera un bloque específico para los forms y los de nosotros tenemos cierta configuración y agregamos ese Gutenberg block, lo configuramos, agregamos las opciones y ya lo tenemos disponible, así ahí de acuerdo a las necesidades hay diferentes tipos de bloques específicos para una función y luego también tenemos librería de bloques, una que es la que yo conozco seguramente hay más, verdad pero una que me ha funcionado a mí es la de genesis block que de nuevo es una lista de bloques adicionales de hay diferentes tipos, esta tiene una versión gratuita que nos permite tener más tipos de bloques para generar diferente tipo de contenido y la otra opción pues es crear nuestros bloques personalizados, ahí en la presentación vamos a ver que tenemos links verdad de hecho el link que tenemos acá de blog tutorial es a la documentación oficial de cómo crear bloques nativos para Gutenberg, la idea hoy es tener una breve introducción de qué lo que necesitamos para crear nuestros propios bloques, qué prerequisitos tenemos en el técnico pues obviamente necesitamos conocer el stack básico de web verdad que es HTML, CSS, JavaScript es importante saber que los bloques están construidos en react y por eso también tonizan jsx que va de la mano de react entonces es necesario tener un conocimiento por lo menos básico de cómo funciona react para poder trabajar con los bloques no se entra tan a detalle como a trabajar react como al cien por ciento de hecho es como una personalización se podría decir de las herramientas de react pero si es necesario conocer los conceptos básicos de react para poder trabajar de una forma más fácil también como crear WordPress plugin de WordPress porque de la manera en que lo vamos a hacer ahora es vamos a crear un plugin que en ese plugin vamos a crear a crear o agregar nuestro gutember blog necesitamos también un ambiente de desarrollo local porque vamos a utilizar herramientas que funcionan con Node.js y NPM verdad vamos a instalar unos paquetes que nos permiten tener la base para poder construir nuestros gutember blog y necesaria pues tener un ambiente de desarrollo local y para este ejemplo vamos a utilizar el paquete oficial de WordPress que es CreateBlog este acá también pueden ver la documentación lo instalan con un NPM instal arroba WordPress diagonal CreateBlog y es un paquete que nos va a permitir tener toda la herramienta para construir nuestros gutember blog de una forma más sencilla él nos va a dar como todo el esqueleto de un gutember blog para poder empezar no desde cero sino de tener una base una vez que tengamos instalado nuestro paquete de WordPress CreateBlog este es el comando que debemos ejecutar desde nuestra consola vamos a ver ahora la presentación vamos a dar un pequeño ejemplo para poder crear nuestro primer blog nos movemos desde la terminal va a navegamos hasta la carpeta de plugins ejecutamos este comando que es NBX arroba WordPress diagonal CreateBlog y en el último parámetro el nombre de mi plugin o el nombre perdón en este caso el nombre de mi gutember blog yo para este ejemplo le puse Workout al ejecutar este comando lo que va a hacer el paquete o la herramienta es generar todos los archivos necesarios para mi blog y va a crear un plugin con ese nombre vamos a ver ahora en un momento el listado de documento pero en realidad y estos son los más importantes nos va a crear una carpeta que es el build donde vamos a tener todos los archivos ya listos para producción todos los archivos necesarios nos va a crear una carpeta que es el source o CRC donde tenemos los archivos que nosotros vamos a estar editando para poder configurar nuestros gutember blog tenemos el pacac.yason porque recordemos que es un paquete de npm donde vamos a tener todas las dependencias e importante pues tenemos el archivo PHP que es del plugin como cualquier otro plugin normal de WordPress vamos a tener nuestro archivo principal donde va la configuración del plugin el nombre la versión etcétera y vamos a ver que ahí hay una función muy importante que es donde vamos a registrar el plugin como tal a partir de esto luego una vez que ya lo tenemos instalado vamos a tener que trabajar con dos comandos importantes desde la consola uno es el npm room build que este se ejecuta una vez para crear la versión de producción que es una versión compresa o comida de todos los archivos es como el minify el compres entonces si nosotros ya terminamos el trabajo le damos un npm room build y él va a agarrar nuestros archivos que están en la carpeta source los va a apartear y a codificar y a nos genera la versión final comprimida o compresa y si aún estamos como trabajando podemos utilizar el otro comando que es npm room star que este se ejecuta para los para crear los archivos en desarrollo o sea no es una versión comprimida sino es la versión completa y y también genera los so smart que nos permite hacer un debugging más fácil y que también inicia el proceso de watch es como cuando estamos utilizando por ejemplo golp y usamos el comando golp watch entonces no vamos a tener que estar corriendo el comando cada vez y no que él está revisando validando que cada vez que se parte del archivo o algo hay aún cambio en uno de los archivos él vuelve a generar los archivos de build y ya podemos ver de una forma más rápida los cambios que estamos haciendo un momento con los ejemplos va a ser un poquito más fácil pero solo tengan en mente que estos son los comandos con los que más vamos a estar utilizando y como mente durante la etapa de desarrollo pues vamos a utilizar el comando room star importante vamos a ver tres o cuatro cosas súper importantes de los glutenberg blog lo primero es recordemos que al final pues es react y react es javascript y vamos a tener una función muy importante un método que la función edit que esta nos permite personalizar la interfaz de edición en glutenberg toda la parte que hemos del editor blog donde nosotros vamos a estar creando el contenido cambiando los textos etcétera se va a manejar desde la función edit esto para facilidad lo que hace este paquete es que nos crea un archivo que es el edit.js para tenerlo todo separado y que sea más ordenado esto es muy similar a la función render para los que trabajan con react están familiarizados con react es muy similar a la función render y usan mucho de las sintaxis de la función render y donde se especifica un retool que es lo que queremos mostrar y que contiene jsx o la que jsx es una manera que es como similar a un html verdad pero específico para react para generar template o generar código eso es la función edit luego tenemos otra función que también es muy importante que la función save que para eso también el plugin nos crea un archivo que es el save.js que es donde se define cómo se va a mostrar el blog en el frontend para entenderlo un poquito mejor esto sería como cuando anteriormente teníamos nuestro template.php que es donde hacemos todo el código del backend etcétera y luego tenemos nuestro código por ejemplo si usamos twig nuestro código twig donde jalamos o obtenemos la información y este ya sería nuestro frontend regularmente la función save es un poquito más sencilla porque lo que hacemos es solo creamos nuestra textura html y vamos a traer la información que estamos guardando en nuestra función edit verdad es importante también saber que gutem guarda la configuración del blog en un comentario html serializado vamos a ver un momento con un ejemplo y luego que algo que es súper importante que es la base creo de los gutember blog son los atributos vamos a ver que tenemos un archivo json que es el blog.json donde se guarda toda la configuración del bloque y ahí podemos tener un objeto de atributos que prácticamente es toda la información que queremos guardar en el bloque esto se parcia para luego extraer la información del contenido guardado los textos, imágenes, configuración del bloque todo eso tenemos que nosotros declararlo dentro de un array o dentro de un objeto más bien de JavaScript en formato json en este caso vemos un ejemplo que tenemos atribut y dentro de atribut tenemos el primer objeto que es el tipo mensaje que podemos definir ciertas características en este caso es del tipo string el source de donde lo obtener es del texto que el selector es y que por defecto no tiene ningún valor se inicializa en blanco, luego tenemos algo importante que es el blog toolbar cada vez que nosotros agregamos un bloque y seleccionamos ese bloque vamos a ver que dependiendo del tipo de bloque podemos tener este toolbar esto es warpes también tiene unos controles ya nativos por ejemplo cuando estamos agregando un bloque del tipo texto vamos a ver qué tienen las configuraciones o los controles por defecto que es negrita, identación, alineación, etcétera o si agregamos una imagen vamos a ver que tenemos la opción para seleccionar la imagen etcétera podemos utilizar los tías trae warpes tiene toda una serie de componentes y herramientas que nosotros podemos ir agregando a nuestros blogs o bien nosotros podemos crear nuestros propios botones y nuestros propios controles vamos a poder agregar un icono vamos a poder linkar o configurar una función propia a ese icono que cuando el usuario le dé click nosotros podemos guardar cierto dato etcétera se puede hacer eso es para el blog tulpa y esto es específico recordemos también que dentro de un bloque de warpes podemos tener diferentes tipos de contenido dentro de un bloque de warpe yo puedo tener un barra foco con un título una imagen y esto va a ser específico para cada tipo de contenido dentro de un bloque yo puedo llamar a mi bloque warcam y tengo una imagen y tengo un texto entonces si yo selecciono solo esto voy a poder ver un toolbar solo para el texto si yo quiero una configuración de alguna manera más general para el bloque como tal entonces puedo utilizar el sidebar serings en el sidebar serings es lo que en la imagen anterior vimos que estaba de lado derecho a número tres este sirve para mostrar configuraciones que son menos utilizadas o quieren más espacio en la pantalla y que se deben utilizar para configuraciones a nivel de bloque por ejemplo cambios de color que va a afectar todo el bloque configuraciones etcétera y vamos a ver que también nosotros cuando estamos creando nuestros blog nativos podemos configurar qué opciones podemos tener en este sidebar serings ahora vamos a ir un poco a los ejemplos yo ya tengo acá creé un sitio web mi local verdad donde ya tengo un bloque y lo primero que me gustaría mostrarles es el el código vamos a movernos acá a nuestra pantalla vamos a cerrar todo y vamos a ir por cada uno de los archivos si se dan cuenta yo me voy aquí a mi ventana a mi carpeta de plugins y aquí es donde tengo mi carpeta de work que esta fue la carpeta que se instaló o que se creó cuando yo corrí el el comando para que el work y luego por esta fue el comando cuando yo ejecute este comando él me creó esta carpeta yo ya aquí ya hice algunas configuraciones agregue algunos valores verdad ya está a cierta duración cierta edición hecha para el ejemplo pero luego vamos a ver cuando como se inicializa uno de cero pero para este ejemplo es yo tengo acá este plugin esta carpeta de plugins les decía tengo el archivo PHP que es un archivo normal para cada por así decirlo que para utilizar con cualquier plugin entonces tengo este archivo acá lo que puedo ver es que tengo el nombre del plugin verdad tengo el plugin name work and blogs si yo me voy ahora a mi sitio web vamos a irnos acá si yo me voy a la sección de plugins veo que ese entonces prácticamente este plugin está configurado por medio de este archivo en la descripción tengo toda la información del plugin tengo los paquetes que se generó creando el paquete de blog tengo aquí algo importante que es la documentación verdad de la función que voy a utilizar porque en este caso está la función más importante estoy utilizando una función que se llama creed blog work and blog in it que la estoy agregando a la acción del in it y la función más importante es esta que es registrar un tipo de blog o registrar blog type donde le estoy mandando una carpeta acá lo que le estoy diciendo a WordPress por medio de este plugin es que voy a registrar un nuevo botember blog y que toda la configuración necesaria está en la carpeta build que lo que le decían en esta carpeta build yo tengo varios archivos si me voy acá esto algo importante es esta carpeta build nosotros no deberíamos de editar esos archivos en ningún momento nosotros tenemos que editar los sigos que están en la carpeta source que son los archivos de fuente que son los que luego se compilan para generar la carpeta pero WordPress utiliza la carpeta build como base para registrar el blog entonces regularmente si yo me voy aquí a blog en la carpeta de build vamos a ver toda la configuración necesaria para mostrar ese blog entonces aquí tenemos blog.json tenemos el index asset donde él trae todas las dependencias tenemos el archivo de css para darle estilos en este caso como yo creé esto utilizando el comando npm runestart me creó los source map luego vamos a ver la diferencia cuando estamos en build que no me crea esto source map tenemos el index js que es enorme pero no se preocupen porque lo vamos a ver de una manera más sencilla cuando vemos los archivos de source y tenemos el index map y el style index que este tenemos porque tenemos 12 css porque uno es para darle estilo a los bloques del lado de frontend y otro es solo para darle estilos en el lado de editor de bloques entonces esta la carpeta no deberíamos preocuparnos mucho por así decirlo de la carpeta build porque esta carpeta como les digo es auto generada cuando ejecutamos el comando npm rune build o npm runestart ahora importante lo que si vamos a estar editando es los archivos en la carpeta source que de nuevo tenemos acá tengo el blog.json que tengo el nombre del bloque siempre utilizamos un namespace para no tener conflictos con otros bloques tenemos la versión tenemos el título del work cam tenemos la categoría esto es importante porque aquí definimos en qué sección de los bloques va a aparecer tenemos un icono que esto podemos utilizarlo por medio de los dash icons podemos cambiar aquí el icono ponemos la descripción y tenemos aquí lo que les comentaba los atributos tenemos todos los valores que nosotros queremos guardar tanto a nivel de contenido como a nivel de configuraciones este dark team no lo estoy utilizando pero por ejemplo yo quiero tener en mi bloque un valor que sea del tipo stream para los títulos para yo en este bloque tengo un título que yo le puedo decir que sea un heading h1 h2 entonces lo genero acá le pongo un atributo que es el nombre título el tipo la fuente el selector tengo otro que es el mensaje y tengo estos son estos dos por así decirlo es de contenido el contenido que yo voy a estar agregando y luego tengo estos tres atributos que son más de configuraciones porque tengo uno de alignment estos son nombres y que yo coloqueo que esto no hay una enclatura obviamente trato de seguir nombres que se tengan sentido para que sean fáciles de interpretar pero estos atributos pueden tener cualquier nombre que ustedes deseen entonces tengo el atributo alignment que es un string que no tiene ningún defecto y luego tengo dos atributos de color por último tengo el text domain para la internacionalización para si yo quisiera hacer traducciones se puede por medio del workup del text domain que en este caso es workup e importante acá entonces tengo los archivos que voy a estar utilizando tanto para las configuraciones para los estilos verdad este es el bloque luego tengo el archivo edit js bueno vamos a parar aquí un poquito y quiero ahora mostrarles cómo se ve esto ya en warps si yo me voy de nuevo acá ya tengo activo mi warp mi plugin de warp de work and blocks perdón me voy a ir a una página a esta página a editar esta página como tal aquí está lo que yo les decía yo ahora acá le doy clic en insertar un bloque y en la sección de texto yo puedo ver que tengo este bloque que se llama workup acá vamos a ver empezar a ver un poquito de las personalizaciones si yo me vengo acá recuerden que este es en cada categoría yo puedo ponerle este que sea un widget guardo y es necesario que ya sea que yo ejecute el comando npm build o npm está para que estos cambios se vean reflejados voy a correr el comando npm run para que cualquier cambio que ahora esté yo ejecutando al momento de guardar el archivo y lo pueda ver si por alguna razón hay algún error y algo mal o no está algo funcionando bien acá me lo voy a decir si ustedes ven este este texto de su sexo es que quiere decir que se ejecutó bien entonces aquí lo cambié de categoría y le voy a cambiar el icono hay uno que se llama smiley no estoy mal e hice esos dos cambios ahora si yo me vengo acá a mi warp es veo que de momento estaba dentro de la categoría texto y tenía este eco voy a refrescar creo que me están apareciendo dos déjenme borrarlos estos eran los que estaba haciendo de ejemplo no llegaba aparte aún pero ahora si me voy acá se van a dar cuenta que ya no me aparece dentro de la categoría textos y no tengo que bajar hasta la categoría de widget y ahora acá me aparece y adicional le cambió el icono que de nuevo yo le puedo dar clic acá y me lo agrega ahora acá yo tengo este blog que en este momento este blog que tiene dos tipos de contenido para decirlo tengo la opción para agregar y tengo la opción para agregar un mensaje dos cosas importantes acá es vamos a ver rápidamente cómo manejar los estilos si yo me voy de nuevo a mi código tengo acá el editor si se dan cuenta esto es sas tengo el editor y acá pueda poder agregar estilos específicos que sólo voy a ver del lado del editor por ejemplo yo le puedo poner acá que va a ser acá un background rojo por ejemplo bueno de que estoy ejecutando mi función room star entonces el automáticamente va a generar los cambios vamos a ver qué pasa ahora a veces honestamente es un poquito complejo porque vamos a ver que tenemos dos hojas de estilos interactuando entonces hay que hacer un específico bueno bueno ahora lo pueden ver yo hice acá cambié el background en el editor eso quiere decir que estos cambios sólo lo voy a ver cuando esté editando ya tenía estos bloques le voy a dar guardar me voy a ir ahora acá que es esta misma página fron en si yo lo lo refresco vamos a ver acá vamos a agregar uno nuevo creo que se quedó tal vez en caché o algo vamos a agregar un título vamos a poner aquí bienvenidos y este es el contenido de lo que actualizar vamos a ver si ahora si me lo muestra no está mostrando esto es muy común cuando estamos creando los gutemar blog siempre le recomiendo inspeccionar para ver si no hay algún error y a quitarle el vídeo vamos a verlo como tal si perdón creo que estaba el previo era que no estaba funcionando entonces si se dan cuenta acá yo le cambié el texto a rojo pero de lado al fron en lo sigo viendo de color negro porque porque yo adicional tengo esta hoja de estilos este sas donde acá yo voy a agregar los estilos que son específicamente para el fron en y acá le tengo que el background color sea negro yo acá lo puedo cambiar y acá le puedo poner verde por ejemplo entonces ahora acá voy a ver que si lo edito voy a ver que el contenido entonces en el fron en cambió a verde por tanto porque a veces puede causar un poco de confusión y esto es porque a veces del lado del del editor queremos algo específico queremos remarcar ciertas cosas etcétera mi recomendación y pensando a futuro sobre todo que por pues estaba pensando a migrar al full site editing es tratar de mantener tanto los estilos en el editor como en el fron en iguales para que no cause confusión eso es con respecto a los estilos ahora cómo saber qué información quiero yo ingresar acá para eso como les decía tenemos dos archivos si yo me voy aquí al blog de nuevo Jason vamos a ver qué le está diciendo que los script están en el index y el editor está está en el index es aquí hay otro chivo importante perdón que es el index js que es donde nosotros vamos a a definir cuáles son las funciones que vamos a utilizar tanto para la parte de edir como para la parte que no es el vamos a usar la función y registrar un blog type con el meta data name que es el nombre del bloque que es todo lo está obteniendo de acá si se dan cuenta que le hace un import del meta data del archivo blog Jason entonces tiene prácticamente aquí tenemos toda la información que está acá en el blog Jason y si se dan cuenta que está el parámetro de name que es esto lo que está mostrando acá entonces cualquier nombre que nosotros coloquemos en el blog Jason lo va a tomar acá y luego acá nos dice que tenemos la función edir y para eso vamos a utilizar este archivo edir y tenemos la función y vamos a utilizar este archivo 6 entonces si yo me voy al archivo edir punto js acá ahora voy a poder ver todo lo que yo necesito agregar para en mi edición del del blog acá yo estoy importando varias cosas verdad esto es importante tenemos estoy importante desde el blog editor a algunos componentes recuerda de que esto es react algunos componentes que yo quiero utilizar vamos a empezar con este que es el rich text el rich text es un componente que me permite agregar contenido de texto enriquecido con formato vamos a empezar por ahí para que no sea tan complicado yo tengo acá entonces una función aquí está la función de default verdad aquí yo lo que hago es traer los atributos que eso es importante estoy pasándole los atributos para tener acceso a esos atributos cualquier atributo que yo haya definido acá yo lo voy a tener disponible acá dentro de mi función edir vamos a ver por un momento esto y nos vamos a ir al retón recuérdense esto es como una función de react esta es la parte que vamos a iniciar y la parte que nos interesa yo ya tengo acá un elemento del rich text que tiene varios estilos que está trayendo los atributos y le estoy diciendo que este va a ser el tag name que lo encierre dentro de una etiqueta a nivel de html de tipo h2 y luego tengo el valor que es lo que quiero mostrar dentro de ese rich text si nosotros recordamos acá tenemos este atributo que se llama tyrol entonces nosotros le estamos diciendo algo al bloque busque el atributo que es de tipo tyrol el tyrol y ese atributo el valor muestro acá adicional le vamos a decir que formatos le están permitidos de momento le podemos permitir que sea bol y tal y en el on change esta es una función cada vez que él detecte que hay un cambio en ese bloque va a agarrar el par el de tyrol y vamos a utilizar esta función que es el set attribute y vamos a volver a configurar ese ese valor que se está ingresando esto al principio puede ser tal vez un poquito confuso pero conforme la práctica se hacía nada más fácil verdad vamos a hacer uno nuevo para que podamos ver cómo funciona vamos a hacer aquí un rich text y vamos a empezar con lo básico que vamos a tener más o menos estos dos valores para iniciar perdón vamos a tenerle un tag name supongamos que queremos agregar un sub título entonces ya no va a ser un h2 sino va a ser un h3 y el valor este no lo hemos agregado ahora lo vamos a agregar va a ser un sub título y que en el on change cuando cambia algo vamos a decir que sea el sub tyrol o sub título y sub título y ahora guardo esto me va a dar un error por lo que me va a decir que no encuentra un atributo que sea mi sub título entonces eso es importante cada vez que yo quiero agregar un nuevo o un nuevo atributo yo tengo que declararlo también en objeto de atributos entonces me voy a bloke json vamos a copiar este que es lo más fácil y le dego un sub tyron es un string y esto es importante el selector ahora vamos a ver qué es esto y le doy un sub con esto y esto guardado vamos a regresar a mi bloque cada vez que estamos haciendo un cambio así como en tiempo real es común que veamos que nos va a dar un error porque él detecta que hay un nuevo cambio entonces acá si se dan cuenta a perdón me faltó a tengo aquí aquí tengo el título y aquí tengo la caja para ingresar el subtítulos pero no le puse ningún valor por defecto que es por eso que se ve como en blanco ese valor por defecto y veamos es un playholder entonces aquí va el subtítulos a ver creo que tengo un par de minutos para avanzar con esto ahora sí ya tengo un playholder y aquí puedo agregar un subtítulos le doy guardar le doy actualizar y ahora importante si se recuerdan estamos trabajando en el archivo edit punto si yo me voy a mi lado de fron ent no voy a ver ningún cambio porque de momento solamente estoy guardando esta información pero no la estoy agregando mi fron ent de hecho ni siquiera acá cuando lo guardo y refrescar no me no me mantiene ese valor eso es importante porque entonces yo tengo que saber que ahora que ya agregué este subtítulo yo me tengo que ir también a mi archivo de save.js que este es el que va a ser el render por así decirlo en el fron ent y aquí vemos también un archivo JavaScript que está trayendo varias opciones y aquí también tenemos un retool y acá vemos que también tenemos un rich text content donde nosotros vamos a traer la información de los atributos y lo vamos le vamos a hacer el render entonces importante acá de nuevo agrego otro rich text content ahora yo le quiero decir que etiqueta html le voy a decir que es un h3 que el valor que quiero mostrar no es el título sino que es el subtitle y también el nombre de la clase que voy a utilizar que es subtitle con esto tiene que esto es importante que se recuerdan acá en el blog Jason yo le puse el selector y le dije que el selector va a ser una clase que es tipo subtitle esto es importante porque esto le permite saber al bloque de dónde va a obtener la información que quiero mostrar o el valor que quiero mostrar con esto lo vamos a guardar me voy a ir de nuevo acá es probable que acá si me me me lance una alerta o un error siempre que estamos editando el archivo save y ya tenemos un bloque creado es probable que nos marque este error porque dice que hay una discrepancia y una diferencia entre el save y el edito se le vamos a dar acá en tratar de recuperar el bloque vamos a oir un momento de estos estas alertas vamos a darle hola vamos a actualizar yo realmente me gusta refrescar acá para ver que si se guardó el valor si se está guardando y ahora si me voy al frente puedo verlo acá y veo que ya parece vamos a ver dos cosas más para poder ir terminando hoy con esta introducción como les comentamos también tenemos la opción acá estoy en el lado de edición si yo le doy clic tenemos estos este tool tenemos el toolbar en el toolbar tenemos la opción de bol e italics eso es porque cuando yo configure en el edit acá yo le di a este rich text que es el primero le puse cuáles son los el tipo de formato que está permitido entonces yo seleccione volt e itálica al h3 yo no le puse esos valores entonces si yo me voy aquí al h3 voy a ver de que por defecto como es un rich text él me muestra todas las opciones entonces en realidad este forma este alud de format lo que me permite restringir sólo qué valores yo quiero mostrar o perdón en el toolbar qué tipo de formato yo le puedo dar de hecho vamos a cambiar que le voy a decir que por ejemplo a este yo quiero que sólo se le pueda dar formato de tipo vamos a refrescar si se dan cuenta ahora yo sólo le puedo dar volt y las otras opciones desaparecieron este botón que ustedes ven acá es el de alineación y ese también lo puedo agregar y para eso voy a agregar un nuevo control todo esto está en la documentación en los enlaces que yo les pasé lo pueden ver y para eso vamos a utilizar otro componente que trae que se llama blog controls todos los componentes que queremos utilizar dentro de nuestra fusión renter lo tenemos que declarar o lo tenemos que importar acá arriba se dan cuenta que yo tengo varios y este es blog control el blog control es el que nos permite agregar nuevas funcionalidades a la tulpa yo acá estoy agregando importando el blog control lo tengo acá y dentro del blog control tengo otro que es el alignment toolbar y en el alignment toolbar yo tengo un valor que está dentro de atributos esto es sumamente importante y lo nuevo es todos los atributos tienen que estar declarados en el blog yo acá tengo estos atributos que es el alignment que es un tipo string que no tiene por defecto ningún valor y lo que les estoy diciendo acá es que cuando cambie cuando yo seleccione le de clic al toolbar y cambia el valor va a ejecutar esta función que esta funciona tengo declarada acá arriba que es bastante sencillo en el on change alignment vamos a obtener el nuevo valor y le vamos a dar un set atributo cada vez que ustedes vean este set atributos quiere decir que está agarrando un valor y lo está guardando en el right atributos entonces va a agarrar el nuevo valor el alignment si es diferente a un definido le pone no y si no lo guarda que pasa acá si yo me voy a mi función save yo voy a ver que acá a nivel del dip que está encerrando todos mis mi contenido yo tengo un class name que le estoy diciendo alignment y le estoy concatenando el atributo que trae al aire vamos a verlo con un ejemplo yo acá selecciono este y este es el botón y este es el tex alignment si yo le doy clic ahora aquí al centro lo que estoy haciendo es cuando yo le de ese clic está ejecutando la función on change quiere decir esta función esta función y está agarrando el nuevo valor y lo está seteando y yo en mi save le estoy diciendo que ese valor lo agregue como una clase a mi lip principal si se dan cuenta ahora todo esto se centró ahora importante a nivel de código pero si está un poco pequeño ahí yo es este la función save me está generando este bloque este bloque html y acá tengo este alignment center que es la configuración y esto a su vez este estilo yo lo tengo que configurar en mi hoja de estilos se dan cuenta acá tengo los alignment tengo center left right y los estoy configurando para que del lado del frente funcione por así decir vamos a hacer una última prueba y luego vamos a ver el tú el site settings y ya con eso pasamos al tiempo de preguntas y respuesta ahora todo lo alinea a la derecha y por último también si yo le doy clic acá de poder controlar el el site y vamos a hacer lo más grande tenemos el site series acá lo que yo hice fue agregar unos controles de color que estos son componentes también ya traen gutembo que me permite facilitar y tengo el color que tiene esta rueda de colores tanto para el background como para el texto poner unos colores algo extraño voy a actualizar y lo vamos a ver ahora se dan cuenta cambió ahora cómo hago para agregar valores o cómo hago para agregar configuraciones acá en el site bar bueno eso lo hago por medio de otro componente acá en el edit recuerda que todo lo que queremos mostrar en edit están en el edit que ese es dos cosas tenemos el inspector controls y tenemos el color para uno es para agregar un bloque al site series y otro es específicamente para la paleta de colores los importamos y luego acá abajo tenemos otras dos funciones muy similares a las de new alignment donde estamos cambiando el text color y el background color que son parámetros que están acá que son string que tienen valores por defecto y luego tenemos acá en la función de retun tenemos el inspect control tenemos un panel body y acá tenemos toda la configuración y acá esto lo más importante si se cuenta esto es como un markup de html para darle sentido verdad para poner los textos etcétera pero esto es en realidad lo más importante con este componente el color palette este es el que nos genera esta opción de acá y le estamos diciendo que de nuevo cuando le de un change va a amar la función un change veje color y este es muy similar sólo que cuando este cambie cambia el valor de text color que son las funciones que están acá arriba y eso lo guardamos en la variable que se llama text color y veje color en el edito y si yo me voy al safe entonces en el safe tengo acá una opción donde dice estilos donde yo le digo esto es como los estilos de css por default que yo le digo el background color va a ser el valor que esté guardado en los atributos en el parámetro veje color y el color como tal va a ser el valor que esté guardado en el text color esto lo puede hacer tanto del lado del safe como del lado del edir que acá también lo es que está acá en el rich text si se dan cuenta esto sólo está siendo aplicado para el primer rich text por eso es de que sólo vemos que está acá y no acá ok yo sé que es bastante información yo sé que comúnmente la curva de aprendizaje es un poco alta pero para recapitular en los copos minutos que me quedan quiero hacer un resumen 10 lo más fácil para empezar con esta estructura que ustedes ven a acá que es el de warpress es utilizar el paquete de el paquete por defecto de warpress que es el warpress diagonal create block esto lo más fácil la función para crear el la función o el comando es npx warpress create block y el nombre del blog vamos a hacer un ejemplo super rápido acá que lo tengo instalado acá y le vamos a dar npx arroba warpress diagonal create block y vamos a ponerle un nuevo blog con esto vamos a ver que aquí en mi carpeta de plugins a perdón cometí un pequeño error y esto tendría que estar en la carpeta nivel de plumes verdad probablemente ahorita lo que va a hacer es crear toda la carpeta si me está dando un error de token vamos a ver sólo si no tengo la versión de no por alguna razón no está funcionando con la versión eso fue una una algo que me di cuenta no está funcionando con la versión de no 12 yo tengo no npm para manejar las diferentes versiones de no y de hecho eso es bueno porque entonces puedo salir de la carpeta ahora estoy a nivel de la carpeta de plugins y ahora casi voy a ejecutar el npm x nuevo blog esto me va a crear la carpeta con toda la estructura de todos los archivos necesarios para tener un nuevo blog se va a tardar un par de segundos y durando entonces son los archivos importantes que me va a crear me va a crear una carpeta con el bill que no tenemos que tocar esos archivos sino que eso los genera automáticamente cuando corremos el comando npm room bill o npm no va a generar el la carpeta con los archivos sols que estos son los archivos con los que vamos a estar trabajando dentro de esta carpeta tenemos el archivo blog punto json que es el más importante porque aquí configuramos la información del bloque y también configuramos los atributos tenemos el edit que es donde vamos a estar controlando todo lo que queremos ver dentro del editor de bloques o sea como en el backend por así decirlo tenemos el editor el archivo usado de editor para aplicar bloques específicamente del lado del bloque editor tenemos el index que es la base donde está la configuración donde le dice de este archivo va a estar la función eddie de este archivo hasta la función safe aquí está la información etcétera tenemos el archivo javascript el safe.js que es el que nos permite hacer el render o como queremos hacer el render en el frontend y tenemos los styles que también tienen que ver con los estilos para el render del frontend ya terminó acá y como yo les decía con ese comando que ejecuté ahora puedo ver que tengo acá una nueva carpeta con esta estructura y si yo me voy al a mi workpress me voy a la configuración de workpress a plugins voy a ver que acá me debería de aparecer un nuevo plugin que se llama nuevo bloque y al darle activar este trae la configuración por defecto entonces si le voy a activar ahora acá le voy a dar a actualizar y este me acaba de agregar un nuevo bloque de ejemplo que es este bloque de ejemplo le doy clic acá y si no estoy mal también está en widget lo pone por defecto y se debería llamar nuevo bloque nuevo bloque acá y este es un bloque básico que desde aquí podemos partir para empezar a toda la configuración necesaria esta es una introducción tal vez no tan breve si tienen dudas y pueden contactarme también por medio de mi twitter que es arroba fg calderón o por medio de mi sitio web fg.calderón.it y con mucho gusto puedo resolver cualquier duda que tengan y ampliar un poquito mala información en la presentación también están los enlaces a la documentación la documentación oficial la documentación de cómo crear un guttenberg blog y dos tutoriales muy buenos uno de quinta y otro de este de delicious acerca de cómo crear guttenberg blog donde van a ver más a detalle cada uno de estos pasos incluso desde la instalación de del ambiente local y todas las herramientas necesarias así que muchas gracias por su tiempo por su atención y ha sido para mí un gusto compartir con ustedes este tema