 Me gustaría presentaros a Jesús, que hoy nos va a hablar sobre Gutenberg y su fiel caballero. Es un nombre, la verdad, que me ha gustado mucho cuando lo escuché. Ya todos sabéis, este año, lo que en Gutenberg y la 5.0 nos ha venido encima y yo creo que el compañero nos va a poder explicar muy bien todo lo que nos ofrece. Muchas gracias y adelante, Jesús. Gracias. Vale, pues lo he dicho. Mi nombre es Jesús, trabajo como desarrollador y diseñador front-end en Logroño, aquí, Ferquita, ahí organiza también el emitter de Warpers Logroño, que la gente. Y bueno, a la chatlava sobre creación de temas, intentando aprovechar las posibilidades que nos da el nuevo editor. ¿De los que están aquí? ¿Quiénes desarrollan temas? ¿Tienen perfiles de desarrollador? ¿Quiénes más de diseño? ¿Implementadores? La charla es práctica, que observa a los desarrolladores. Cualquier cosa que no entendáis, me vais preguntando. Si alguna cosa desea mucho, me puedes ir preguntando. Y nada, lo que os decía, vamos a verlo y va a ser lo más práctico posible. Vamos a empezar. En el nuevo editor hay muchas funcionalidades. Como, por ejemplo, la de añadir el tamaño de fuente personalizado está haciendo ahí. ¿Cómo podemos añadir esto a nuestro tema? Pues ya sabemos, en nuestra función le tenemos que añadir, en esa función añadimos un array con todos nuestros tamaños de fuentes. Con esto ¿qué hacemos? Pues le decidimos el tamaño, el nombre que va a aparecer y el slug. Con este slug nos genera una clase, que es la que va a añadir a nuestros bloques. Y nosotros tenemos que en nuestra CSS personalizar ese tamaño. En este caso, lo que hago bien es crear el mismo tamaño para desktop y para móvil. Podemos aprovechar mejor el tamaño del móvil, si utilizamos tamaños más pequeños, sobre todo en cabezados. Que no sean tan grandes. Entonces, no me gusta utilizar tamaños más pequeños para móvil, y luego en escritorio sí que lo utilizo. Y luego utilizar, no tenemos por utilizar 40, que son píxeles, podemos utilizar unidades relativas. Queda mejor en la deposición poner unidades relativas. Pero bueno, puedes utilizar lo que quieráis. Lo mismo los colores. El mismo funcionamiento. Añadimos en el función, añadimos el array con todos nuestros colores. Pero en este caso nos genera dos clases. Una para añadir el fondo y otro para añadir el color. De esta forma añadimos. A mí me gusta utilizar primario. En vez de utilizar rojo, por ejemplo. Son clases, el día de mañana, cambio ese color de fondo. Ese color primario que tiene mi tema. Y lo pongo un poquito más claro, o cambio esta de naranja en vez de rojo. Pues lo puedo seguir manteniendo. Son clases, simplemente luego cambio los dos sitios donde lo añado. Y lo tomo todo actualizado. Y luego otro tema importante, tener colores suficientes. Porque si ponemos un color muy oscuro de fondo, necesitamos un color blanco para el texto. Entonces siempre utilizar, añadir el blanco y el negro. O un color muy oscuro y muy claro. Lo siguiente, deshabilitar los colores y las fuentes personalizados. Tamaño de fuente personalizado. Gutemberg nos da la opción de que pueda el propio editor poner el color que quiera o el tamaño de fuente que quiera. No digo es activarlo porque pueda poner el color que quiera no de quedar cosas muy feas o cosas muy grandes, sino por el hecho de que lo que va a hacer es incrustar un style en nuestro HTML. Entonces si queremos modificar eso de nuestra CSS, vamos a tener problemas. Y si el día de mañana queremos utilizar otro color, vamos a tener ese style ahí metido. Vamos a tener problemas. Lo siguiente. La primera línea nos añade los estilos por defecto que tienen los bloques en nuestro tema. La siguiente línea nos añade los estilos que tienen nuestros iframes, los vídeos de YouTube para que sean responsibles y se adapten a diferentes tamaños. Y la siguiente línea nos habilita los anchos, los nuevos anchos que han aparecido ahora. Esto lo habilita, pero nosotros tenemos que implementarlo. ¿Cómo lo implementamos esto? Esos anchos lo que hace es añadir una clase a LandFull o a LandWide en nuestros bloques. Normalmente si tenemos un contenedor ya con una anchura definida a través de márgenes negativas y unidades relativas al anchura de la pantalla viewport y al elemento en sí, podemos centrar y podemos conseguirlo. Hay opciones más fáciles. Si en vez de dar la anchura al contenedor, si la damos a los elementos hijos directos, pues nos queda un código bastante más fácil de leer y más sencillo. Si ya nos ponemos para la nota, podemos hacerlo hasta con Grid. Donde definimos donde empieza una anchura, donde termina esa anchura y luego a los elementos lo vamos diciendo. Esta empieza aquí, acaba aquí, empieza aquí, acaba aquí, empieza aquí, acaba aquí, acaba aquí. ¿Y dónde colocamos nuestro sidebar? Si nuestra columna está aquí, le hemos metido un margen negativo, se nos pisa por encima. ¿Dónde lo metemos? Pues lo primero, ¿seguro que la necesitamos? Necesitamos esa columna que aparece a la derecha de nuestro contenido, que la versión móvila bajamos debajo del contenido y nos genera un churro infinito hacia abajo. Vamos allá. Igual no necesitamos. Primero valoramos y no necesitamos. Luego esa columna, el usuario, ya no la ve. Es como la política de Cooke, ya le das a aceptar, no sabe ni lo que puestan y nada. Entonces necesitamos sorprender con diferentes layout. Si añadimos esa columna, limita el contenido. Entonces no podemos... El tamaño del contenido va a ser más limitado. Tenemos que tenerlo en cuenta. Si ya no así decimos, no, pues quiero meterlo. Pues lo metéis, no hay ningún problema. Son clases que le añade a nuestros bloques. Entonces, desde nuestra CSS, si le añadimos una clase al body, cuando tenga el sidebar, podemos decirle que aplique esos estilos cuando el body no tenga la clase has sidebar. Y ahora hay que personalizar la edición. Ahora sí que nos toca curar. Tenemos que conseguir que cuando el clientele de al botón editar página, sienta que está editando la página. Para eso añadimos esta línea que le vamos a decir a WordPress, que vamos a personalizar los estilos. Y desde esta otra añadimos la hoja de estilos. Esta es la ruta de nuestra hoja de estilos. Esto significa que está al mismo nivel que nuestro style.fss. Podemos añadir varias hojas de estilo. Podemos añadir también las fuentes, ya que nuestro tema os utilizará fuentes, pues podemos incluirlas también así. ¿Por qué le incluimos así esta CSS? Porque WordPress lo que va a hacer es interpretarla. Y va a transformar donde nosotros poníamos body, va a poner el editor style wrapper, que es el dig que lo contiene. A los H2 cuando nosotros pongamos H2, WordPress le va a añadir primero esta otra clase para no cambiar todos los encabezados o todos los enlaces de nuestro dashboard de WordPress. El único un poco raro que me ha encontrado es el de H1. Tengo que añadir esa clase, pero bueno, imagino que poco a poco vayan cambiando. Y yo para hacer esto me ha venido muy bien utilizar SAS. ¿De aquí quiénes utilizáis SAS? ¿Lo conocéis, por lo menos? ¿O post-CSS? Bueno, pues cuando empiezas a tener cosas duplicadas que tienes que ponerlas en el style.fss o en el editor con SAS como puedes tener partidos, tu CSS en diferentes archivos y lo puedes llamar desde varias CSS, pues para componer esas dos CSS me ha venido muy bien. Hacen support, dar editor. Esto lo que hace es estos iconitos que aparecen aquí encima del contenido de nuestro WordPress los pone en color blanco. Claro, si nosotros ponemos el color de nuestro fondo en negro y con las letras en blanco, lo que pasa es que por defecto el editor tiene los iconos en negros, no se ve bien y no es suficiente contraste. Eso le avisa al editor y me pone en los iconos para que se vea. Ahora, podemos personalizar los bloques. Aquí sí que encolamos desde de acción, encolamos en nuestro editor.js y desde aquí podemos hacer varias cosas. ¿Cómo añadir estilos? Los estilos son eso que aparece a la derecha al seleccionar un bloque, le podemos dar diferentes estilos. En este caso es las listas, le podemos decir que sea de check, que sea de lista, que sea tal. Aparece como un pequeño preview y con un nombre. Nosotros podemos añadir ahí todos los que queramos. En este caso he añadido uno que es el Restless y esto lo que hace es añadirle lo mismo. Tenemos que añadir el editor y en este el punto FSS. Cuando empezamos a tener así cosas duplicadas y tenemos que acordarnos de modificar uno en los dos sitios, mejor tener un único archivo que modificamos. Simplemente añadimos la clase. Esto es lo mismo que añadir una clase personalizada a nuestro bloque. Pero lo bueno es que tenemos un preview, no nos tenemos por qué acordar de esa clase y es mucho más fácil para el usuario. Vamos a estallar muy fino y nos proporciona hasta filtros para nuestros bloques. ¿Qué podemos hacer con estos filtros? Lo que nos dé la gana. Hasta editarlos. Por ejemplo, en este caso cojo el bloque de tabla y le añado un dip alrededor y lo devuelvo. Y luego a ese dip lo que le pongo por CSS le añado una serie de estilos que lo que me va a hacer es que no va a encoger de cierto tamaño y en móvil voy a tener un scroll. Algo que me parece bastante útil y que no viene por defecto puede añadirse a la funcionalidad. Podemos hacer limpieza de bloques. Hay unos cuantos bloques que no hacen falta y que no podemos limpiarlos. Nos dan estas funciones para limpiar también los estilos que no vayamos a utilizar por lo limpiamos. Pensar que cada bloque que añadimos en nuestro Warpers tenemos que personalizar su aspecto y tenerlo en cuenta. Si nos podemos quitar unos cuantos, pues mejor. Lo único que tenemos que añadir hay más dependencias cuando encolamos nuestro editor.js necesitamos más dependencias. CustomPostite. Crear un tema no es exactamente CustomPostite. Igual no va muy dentro de crear un tema pero siempre acabamos creando un CustomPostite entonces me parecía obligado ponerlo. Lo primero soy inrace. Si habéis trastado con Gutembe sabéis que lo tenéis que poner en todos los sitios y si se quiere, podemos personalizar la edición en nuestra página para un POSTITE en concreto. Por ejemplo, los H2 creo que sean más pequeños en este POSTITE. Añade esta clase POSTITE .se, guión el nombre del POSTITE le añade al editor entonces podemos personalizarlo simplemente con esa clase espacio H2 y ya podemos poner el tamaño que nos dé la gana. Lo más interesante podemos vincular un template una estructura de bloques ya definidas a ese CustomPostite incluso bloquearla para que no pueda modificarla ¿Cómo hacemos esto? Cuando declaramos nuestro CustomPostite le añadimos un template y esto es lo que les decía, incluso bloquearlo para que no puedan ni editar ni añadir más bloques ni nada. Este template esto es una array donde vamos a crear nuestros bloques donde incluso le podemos pasar parámetros a nuestros bloques y esto ve una estructura con un layout que hemos creado nosotros con una serie de parámetros y ya la sensación no va a ser de completar campos de una base de datos la sensación ya va a ser que está editando creando la página web podemos crear nuestros profesors layout y ya empieza ya la caña ¿Qué necesitamos para esto? Muy sencillo Bueno, antes de decir esto ¿Alguno ya se ha empezado a pelear con los bloques? ¿He empezado a crear y alguno? ¿Sí? ¡Ay! Muy divertido, ¿vale? Os voy a hacer un poquito así por encima un bloque tiene dos metros fundamentalmente que es el Edit y el Save Edit es la es lo que hacemos el editor y el Save es lo que va a devolver en el frontend ¿Vale? Aquí InnerBlock simplemente añadiendo eso lo que le vamos a decir es que aquí dentro va a meter lo que él quiera y le metemos un defaultredor con la clase que nosotros queramos a este InnerBlock le pasamos un template igual que hemos hecho el custom post type donde le decimos el template que va a tener esas dos columnas lo demás el bloqueamos y los bloques que están permitidos y en el Save ¿Qué es lo que vamos a devolver en el frontend de nuestro WordPress? InnerBlock.contend nos devuelve el contenido, ya está esto es todo lo que tenemos para hacer el DIP que va a contener nuestro layout y luego tenemos los hijos las dos columnas para decirle que es hijos simplemente le decimos que tiene un parent y lo mismo InnerBlock pero en este caso no le bloqueamos nada y que puedan añadirle lo que quiera y le volvemos lo mismo el contenido y con eso conseguimos un DIP con la clase que nosotros queramos las columnas como queramos nosotros dos porque dicho en este caso podía poner lo que quiera las estructuras que nos dé la gana pero no solamente podemos hacer eso con WordPress o con Gutenberg también nos deja trabajar con metas añadiendo información estructural en los trabajos de datos no solamente es colocar las cosas en muchas veces necesitamos la información para poder filtrarla por utilizarla ¿Cómo trabajamos con metas? cuando desclaremos el custom post type le añadimos los custom fill después tenemos que registrar las metas con lo fundamental soin res siempre si no no va a aparecer y desde los atributos estos son los atributos del bloque otra característica fundamental que tiene los bloques es que tienen atributos y entonces le decimos que este atributo que es el play le he puesto lo va a sacar de esta meta tipo meta lo saca de aquí empezamos a crear bloques para mantener los ordenados ¿Cómo mantenemos nuestros bloques ordenados? WordPress nos proporciona un filtro donde le podemos pasar que bloque es pasar, que bloque es no me parece más interesante poder crear nuestras propias categorías en este filtro simplemente mergeamos a la raíz de categorías las nuestras propias y podemos crear nuestros bloques vinculados a su categoría ¿Qué es lo siguiente? podemos filtrar categorías enteras en cierto tipo de en cierto tipo de pos los que nos es mucho más fácil ordenar simplemente toda esta categoría que he creado para este post-it no lo muestras en el resto de sitios ¿Cómo creamos nuestras páginas ahora? pues las imagináis bloques por aquí un bloque por aquí, otro bloque por aquí y bloque muy utilizados para esto son los bloques dinámicos normalmente lo típico es poder mostrar los últimos artículos añadidos al blog esa tipo de información cambia no es estática, no es entonces necesitamos renderizarla desde PHP eso, simplemente hay cuando registramos nuestro bloque le pasamos una función que es la que va a renderizar esto es simplemente mandamos este html cuando nos lo llaman nos seguimos los últimos posts y los mandamos y ahora, desde nuestro bloque pintamos haciendo uso del API podemos hacer un bucle que pinta todo pintar los últimos posts, esto es un jaleo ¿Vale? ¿Qué ha pasado? de repente ha aparecido aquí un componente mágico que ya le decimos el bloque y los atributos y ya está la sensación que tengo es esta de poco a poco están facilitando mucho la vida hace hace muy poquito, tenía que hacer todo esto es exactamente lo mismo que hacía con PHP lo tenía que hacer así y ahora simplemente es esto espero que la tendencia sea esta fundamental, si trabajamos con bloques dinámicos tenemos que pasar el lado, los atributos también porque los valores por defectos no nos lo pasan en la función, entonces tenemos que añadirlos directamente aquí hay un mundo aquí en los bloques si no habéis empezado a tracer con ellos empezar a hacer grandes cosas y es el futuro o el presente, yo creo os dejo un montón de enlaces de documentación con por ejemplo, están fundamentales que tengo que poner de WordPress, también Vidaña se les ha hablado mucho sobre ello lo explica muy bien, tiene varios cursos una semana, en semana WP que hablaron sobre el desarrollo de temas sobre Gutenberg y un día en concreto que era sobre el desarrollo de temas un ojo lo explican de maravilla y conclusiones yo lo que me da cuenta cada vez que seguido indagando más y metiéndome un tema va muy ligado a los bloques mejora mucho la experiencia de edición por fin cuando nuestro cliente le de editar página va a sentir que está editando la página y hacerle participe de la creación del sitio es muy chulo facilita mucho el trabajo del implementador ahora van a ser todos los bloques muchas veces, yo admiro porque cada tema está de una forma, ya lo sabrás que cada tema tienes que aprender un montón de cosas de cómo lo ha hecho él ahora la tendencia, yo creo que va a ser bloques, entonces simplemente vas a decir que bloque es o va a ser mucho más sencillo y vamos a ver qué significa esto, que podemos utilizar todos los componentes que están hechos en Rial los podemos utilizar dentro de nuestro editor llevan varios años trabajando en Rial, hay grandes desarrolladores trabajando en Rial hay un montón de trabajo ya hecho que podemos utilizar ya mismo y luego el contenido vamos a poder enriquecer mucho más nuestro contenido y luego el contenido ya no va a ser ese deep en nuestro tema el contenido va a crear, literalmente va a crear el tema vamos a desde nuestro contenido, vamos a crear cada uno del aspecto que va a tener nuestro tema ¿preguntas? si va a ser el sin darte cuenta lo vas a ir aprendiendo Riat es Javascript tiene alguna cosa más chula facilita la vida tampoco aprenda Javascript y luego Riat tiene alguna cosita más pero bueno no hace falta, pero sí que la consejo los animo a los si plugin si, si, si hombre, esto es lo típico de añadir este tema trabaja mejor con este plugin ahora mismo nos está haciendo así en un futuro no sé es que lo veo muy ligado porque la tendencia yo creo que es esta de momento así, como este tema funciona mejor con estos bloques y tener una colección de bloques que son específicos de ese tema por ahora así el año que viene si vuelvo ya os contaré alguna pregunta