 El Vidania, es Mr. Gutenberg, repite en la GoPontworkup esta vez para profundizar sobre los estilos de bloque para el nuevo editor de Warp Press. Diseñador Web Freelance desde 2005 como V de Vidania, formador presencial y online sobre Warp Press y GoogleCommerce. Es una de las personas de esta comunidad con la que puedes hablar de fútbol y esperar que te entienda. Un bloque de aplausos para él, por favor. Bueno, ya me ha presentado Lua, soy José Ángel Vidania y generalmente en las workings de España nacionales. Soy el que está hablando de Gutenberg, el que os aburre con el nuevo editor. Podéis encontrarme en uvedevidania.com. Luego tengo una newsletter que voy a decir que es a periódica, porque era semanal, pero al final como no tengo vida, pues tampoco me da vida para sacarla. Entonces, cuando voy juntando el contenido suficiente, la voy publicando que es aprendegutember.com. Podéis encontrarme en Twitter en arrobajotavidania. Y nada, si os gusta la charla y no tenéis miedo al tío de la fotografía, pues hacer una foto y me tareáis con ella. Vamos a comenzar hablando de qué es un estilo de bloque. ¿Cuánto está aquí? ¿Sabéis lo que es un estilo de bloque? Hostia, si lo sabéis todos, no sé para qué venir. Un estilo de bloque es que dentro de un bloque tenemos la posibilidad de darle variantes de estilo, como por ejemplo el bloque de gotón, si os fijáis, tiene tres estilos por defecto. Tiene el de por defecto, el de contorno y el cuadrado. Técnicamente hablando, un estilo de bloque simplemente es un estilo CSS, pero se aplica a través, registrándolo a través de un archivo de JavaScript y luego dando estilo a través de una hoja de estilos de CSS. Eso es un poco lo que os vengo a explicar hoy, que parece que es ultra complicado y es súper facilísimo como podréis ver. ¿Dónde veo los estilos de bloque en mi editor? Pues los estilos de bloque se pueden ver en dos sitios. Se pueden ver en la barra lateral los bloques que lo dispongan. Tendrán una pestañita que pone estilos, que la desplegáis si os aparecerán los estilos que vienen por defecto del core y luego en el botón de transformar, que lo tenéis en la barra flotante o si la tenéis fija arriba, es el iconito que parece como un reciclado, cuando pinchéis en él también os aparecerán los diferentes estilos de bloque que tenga ese bloque y podéis aplicar. ¿Qué bloques del core de WordPress llevan estilos por defecto? Pues tenemos el bloque de imagen que lleva un estilo por defecto y ahora a partir del plugin de Gutenberg en la versión 6.3 lleva uno de más cara circular que lo que nos permite es redondear la imagen sin necesidad de hacer ningún otro tipo de invento, ni tener que meter código, nada. Bloque de cita lleva dos, lleva uno por defecto y otro que es una cita que llaman grande porque cambia el estilo. El otro bloque de cita o pull quote en inglés es igual, lleva uno que es simplemente una rayita y otro que va con todo el fondo de un color sólido. Tenemos el bloque de tabla que lleva las típicas franjas que van alineadas, está en gris, está en blanco, está en gris, está en blanco. Tenemos el bloque de botón que como habéis visto lleva tres elementos, tres estilos, el de contorno al cuadrado y el que lleva por defecto que es el sólido y luego tenemos un bloque de separador que pues es una línea o una línea ancha o una línea por puntos, estos son los que vienen por defecto en el core es decir cuando nosotros seleccionemos cualquiera de esos bloques vais a tener ese desplegable de estilos y vais a poder seleccionar entre esos estilos. Nombres de bloque del core, esto es muy importante para lo que vamos a ver a continuación porque nosotros cuando queramos crear un estilo tendremos que referirnos al nombre del bloque que queremos dar estilo, entonces es tan sencillo como el nombre del bloque en inglés, no valdría a poner core botón, no, tienes que poner core barra botón, ahí veis que hay multitud de ellos y simplemente es quedarse con el nombre del bloque que nosotros vamos a querer evitar. ¿Qué bloques pueden tener estilos? Todos, a todos los bloques se le puede crear un estilo de bloque, lo que pasa que uno es más fácil o más intuitivo o tiene más sentido darle un estilo y otros pues no tiene tanta lógica el gastar tiempo en emplear para un cliente el hacerle un bloque, un estilo en concreto para una cosa que se podría hacer con una línea de CSS. ¿Cómo crea un estilo de bloque? A eso es a lo que hemos venido aquí, como os he dicho antes es muy fácil y eso lo lleva y son tres métodos diferentes. Lo que yo recomiendo el primero, creando un plugin. ¿Por qué creando un plugin? Porque eso lo vamos a poder reutilizar en todas nuestras instalaciones. Creamos un plugin y lo reutilizamos en todas nuestras instalaciones. Incluyéndolo dentro de un tema, en nuestro tema nosotros añadimos esos estilos de bloque o directamente si somos muy guais y vamos a pincho directamente dentro de nuestro bloque y hacemos ahí todo. ¿Qué pasa? Que cuando se actualice el bloque perdemos todo. Esa es la peor forma por así decirlo de hacerlo. Entonces, yo lo que voy a hacer es enseñaros con el método, no sé si habéis visto Kill Bill, el toque de la muerte, los famosos cinco pasos. Son cinco pasos para crear un estilo de bloque. El primer paso y el que yo recomiendo a todo el mundo que lo haga porque aquí entiendo que todo el mundo sabe HTML, CSS y un poquito de Javascript por lo menos para copiar y pegar y cambiar cosas. El primero es desencolar los estilos de los bloques por defecto. ¿Por qué? Porque eso ya lleva unos estilos en CSS y pueden entrar en conflicto con los que nosotros utilizemos o vayamos a utilizar. Creamos un archivo Index PHP como cualquier plugin. Ahora registra el plugin, luego encolamos estilos dentro del editor y para que se vean una vez está publicado en el frontend, en ese archivo Index.php creamos y editamos un archivo Javascript que es donde registraremos el bloque y esos estilos y por último creamos y editamos ese archivo style.css que es donde al final le decimos que apariencia y que estilo tiene que tener nuestro bloque. No sé qué tal se verá, luego intentaré compartir la presentación con todos porque así tenéis los códigos a tiro pero lo que yo recomendaba en el primer punto es desencolar todos los estilos y cómo se hace pues con una función por ejemplo no sé si lo veis, remove blocks.css y quitamos el estilo de WP Guion Block Library esos son del core de WordPress. WP Block Library, CIM para también quitarlos del tema si es 2019 o una cosa por el estilo. Si utilizamos Bookomers el estilo que debemos quitar WC Guion Block Style y si utilizamos Storefront o el Product Blocks que es el plugin este que tenemos de Bookomers pues quitamos Storefront Gutenberg Blocks. Lo que hacemos es simplemente desencolar todos esos estilos y lo que tendríamos sería limpio de estilos ahí ya para poder trabajar nosotros a gusto sin ningún tipo de problema. Punto 2, este es más fácil y el más rápido quien haya creado un plugin simplemente pones un nombre de plugin, tu URL si quieres la descripción, la versión y el autor esto creo que estaba más que superado y aquí no hay que entretenernos mucho. Encolar estilos, tenemos que encolar dos archivos tenemos que encolar un archivo JavaScript y un archivo CSS. El archivo JavaScript lo encolamos utilizando esta acción, este filtro en Queue Block Editor Assets. ¿Qué hace este en Queue Block Editor Assets? Lo que nos hace es ese archivo JavaScript lo carga únicamente en el editor, ¿vale? Y sin embargo el archivo de CSS lo encolamos con esta acción en Queue Block Assets porque se nos carga tanto en el editor como en el frontend para verlo al final esos estilos que estamos aplicando. Punto 4, hay dos formas de escribir JavaScript o 3 o 4, yo ya no sé cuántas formas hay. La moderna es esta que se conoce como S6. ¿Qué tenemos que hacer? Que esta es la madre de cómo se crea un estilo de bloque. Definimos una constante de internacionalización para que se puedan luego traducir esos nombres y definimos esta función, register block style. Esta es la que nos va a permitir crear estilos de bloque. Cogemos y ponemos register block style el nombre del bloque de la lista esa que vimos antes con todos los bloques y lo que tenemos que definir son simplemente tres ajustes, nombre, le ponemos un eslog que nosotros queramos la etiqueta que nos va a aparecer luego en el editor para seleccionar ese tipo de estilo y decir si ese bloque va a ser el que se carga por defecto o va a ser otro. Se pueden poner varios true que nos sale, es un desplegable y nosotros seleccionamos el que queremos que se quede por defecto. Esto si os fijáis es una imagen que lo que estoy haciendo es utilizarse con el estilo de filtro, le voy a aplicar ese blanco y negro, con el filtro blanco y negro y le voy a aplicar uno de esos de borroso con el blur. Si lo que queremos es registrar más de un estilo o registrar un estilo en más de un bloque tenemos que hacer la misma costantes de antes declaramos por ejemplo una función y lo que abrimos es un array con los bloques a los que queremos que afecten esos estilos que vamos a crear, es decir este bloque llamado por defecto va a estar disponible en el bloque de imagen y en el bloque de fondo, en esos dos bloques y simplemente lo que hay que definir es una array de los bloques a los que queremos que afecten. Se puede escribir con Javascript a la antigua usanza www.dunready y lo que hacemos si en el otro lado hacíamos una constante que hace register block type es igual a www blocks en el siguiente nos toca escribirlo toda mano www.registerblockstyle y es el mismo código pero teniendo lo que escribir y sin llevar la constante arriba pero hay que hacer referencia a ese dunready para que pille los estilos que nosotros no hemos desencolado todos los estilos anteriores con ese primer paso que vimos lo que podemos es deshabilitar estilos que ya vayan por defecto en el core como se hace eso con esta función register block style es decir para registrar utilizamos register block style para eliminar un bloque no lo queremos hacer por defecto que se cargue todo si queremos reutilizar contenido que ya está en el core los que quitemos con un register block style archivo css simplemente creamos un archivo llamado style.css y en ese archivo lo que se creará con el nombre, con el label que nosotros hemos dado este label gradient se creará un isstyle gradient y es el que definimos ahí ponemos todo el código que queramos poner y ese es el estilo, ya está no hay que hacer nada más directamente en el editor ya tendremos ese estilo quedaros con que todos es isstyle-guion el nombre que nosotros demos al estilo y simplemente lo que definimos es css como queremos que se comporte ese estilo los estilos por defecto como vimos antes en un bloque de botón ese es el bloque por defecto el de contorno que es el redondito y el cuadrado con ese código que yo he hecho eliminado con ese register block style eliminado todos los demás y únicamente me aparece el gradient volvemos un poco al código y lo veis yo he eliminado el de por defecto el de contorno y el cuadrado y he activado el bloque que lleva el gradiente como veis es para mí es muy sencillo y muy potente de cara a un cliente si ese cliente utiliza unos botones que van todos con un gradient le quito todos los estilos que el tenga y lo que hago es dejarle este único botón y que no invente porque es lo mejor que podemos hacer si lo que estamos haciendo es optimizar una web a medida para un cliente vamos a dejárselo que solo puede utilizar las cosas que necesita su tema o con los estilos de su tema y como veis es bastante sencillo simplemente eso modificamos un archivo Javascript que es que nos modificar es que si sabéis copiar y pegar y cambiáis nombres lo podéis hacer no requiere que programéis código ni nada por el estilo y luego si evidentemente el estilo css ahí si que hay que saber css para aplicar cosas y estilos a esos bloques había otra opción que son los estilos de bloques a través de un tema y al final funciona veréis que todo el rato es la misma estructura podemos desencolar todos los estilos como hicimos antes si queremos reutilizar y demás podemos crear un chai sim para no entrar en esos problemas de que luego actualizo etc encolamos los estilos en el archivo funtions.php y volvemos a crear y editar un archivo Javascript y un archivo css es decir en vez de crear un plugin con ese archivo index.php lo que hacemos es todos esos estilos los encolamos en el funtions que como se ha hecho de toda la vida en los temas directos yo os digo no es nada recomendable pero si queréis probar y os da igual y tenéis una web de pruebas y queréis trastear y queréis romper que es como al final se aprende buscáis buscáis el archivo.javascript que sea donde está vuestro bloque generalmente ese archivo es index.js buscáis ese archivo registráis los estilos nuevos en ese archivo y editáis los archivos en css como veis todos los ratos son los mismos pasos simplemente son 3 si no queréis desencolar es coger el archivo de javascript poner los estilos y darle los estilos en css no es nada complicado como vosotros vayáis dentro de vuestro bloque a buscarlo ahí a trastear y demás veréis algo parecido a esto una constante que tiene unos ajustes de bloque veréis el título, la descripción del bloque veréis las palabras clave simplemente para encontrar el bloque veréis el soporte y luego veréis edit safe y de perquete doy de alta los estilos directamente en mi bloque pues ven aquí y lo que creo es justo debajo de su port por ejemplo lo podéis poner en cualquier sitio pero siempre ponerlo antes del edit y del safe eso creo que es lo vital para no liarla abrimos ese atributo de ese ajuste de styles, dos puntos un array y hacemos el mismo código que hemos hecho antes en el ejemplo de prueba que os he puesto, un nombre una etiqueta y le decimos si es por defecto o no es por defecto esa es toda la complicación que tiene igual nombre, etiqueta y ahí podemos definir todos los que nosotros queramos, podemos ver todos los estilos que nos vengan en gana ejemplos de estilo de bloque un vídeo entretenido dais estilos y tenéis la imagen hacer la redonda hacerla circular hacerla con las esquinas redondeadas con un corte diagonal con el otro corte diagonal inverso con sombras como veis de golpe y porrazo podemos hacer que nuestro cliente tenga las opciones y toda la fotografía que lleva mi cliente en su diseño son redondeadas le pongo esa máscara circular si todas las imágenes que lleva son hexagonales porque quiere hacer un diseño un poco diferente al resto, con bordes redondeados le creo el estilo de bloque redondeado si directamente con un clic lo va a tener a tiro y no se lo tengo ni que encasular en el tema ni hacer, y es que lo va a tener visual es que lo más importante del nuevo editor es que va a ser visual él va a ver ese botoncito y ve que la imagen está redonda y dice yo creo que la imagen redonda pero claro, todo poder conlleva una gran responsabilidad lo que nos tenemos que limitar es a darle las opciones que realmente el necesita yo aquí lo que os pongo es muchos ejemplos para que veáis todo lo que todo lo que se puede hacer otro estilo, con filtros de CSS a ver que cargue tenemos la imagen normal la máscara probablemente no la veáis el blanco y negro el borroso o eso es un sepia esto es un polarizar o algo así me parece que no me acuerdo muy bien el término como es entonces lo mismo, si todas llevan un blur pequeñito ahí yo he puesto una burrada, no se ve muy bien pero la imagen no tiene ninguna nitidez pues directamente se lo ponéis y simplemente con que le pinche lo va a llevar otro ejemplo más estilos con clip path podemos hacer toda la forma que queramos es águano, rombo, estrella con forma de mensaje os he puesto estos ejemplos de imagen porque son los más representativos y los más gráficos para una ponencia porque vosotros veis eso y os quedáis con la idea de que se pueden hacer cosas pero igual que se puede hacer eso se puede hacer con encabezados, con párrafos con cualquier bloque o sea con cualquier bloque lo podéis tunear a vuestro gusto con estos estilos para todo lo demás como dice mastercard css3 cogeis css, esto al final es css todo lo que se puede hacer con css se puede importar se puede llevar a este mundo de estilos de bloque entonces si sabes css podéis hacer lo que os venga en gana y dejárselo preparado a vuestro cliente que va a estar súper emocionado de ver que es dar solo un clip pues tiene la imagen en hexagonal y esos son dos líneas de código y porque hay que ponerla de webkit que si no no tira que si no solo sería una todo esto que yo se he dicho para crear el plugin no sé qué un poco en así rapidito hay un plugin de automatic que se llama que lo bajáis y ya tenéis todo preparado simplemente lo que tenéis es que vos sustituís vosotros el contenido poner ese name subís y ya lo tenéis hecho tiene creado el Javascript tiene creado el archivo css y ya os digo solo es que vosotros pongáis vuestro código y nada como me repito siempre yo sigo pensando y soy partidario de que contra antes os adapteis más pronto vais a Margottenberg yo sé que esto todo cambio en tecnología y demás cuesta pero es que es lo que vamos a tener que utilizar de nada sirve quedarnos anclados en el pasado lo que vamos a tener que utilizar o guste o no guste entonces con estos estilos de bloque como habéis visto lo que tenéis es una posibilidad muy fácil de hacer cosas muy chulas y que sean visuales para vuestro cliente y así dejarles pues un tema medida que sea lo que necesite el cliente y siempre eso sólo lo que necesite o sea dejárselo que no pueda tocar muchos botones vale y nada muchas gracias a todos bueno el temido turno de preguntas ¿alguien ha entendido algo? si, os parece fácil os parece difícil o sea al final es simplemente dar clases de CSS y ya os digo que el Javascript aunque no sea eso o sea no tienes que programar es simplemente... hola una preguntita los estilos que tudes tienen que ser fijos o pueden ser variables por ejemplo en el gradiente que te has puesto ¿puedo dejarle la opción de que elija los dos colores del gradiente o tengo que darle ya no porque lo defines en el estilo de CSS lo que podrías hacer es crearle dos tipos de estilo diferentes o sea pues no sé un gradiente que vaya de arriba abajo y el otro que vaya no sé en la otra forma circular o... no, esto lo que es es cada uno es un estilo y es completamente diferente o sea no es variable por así decirlo se lo tendrías que dejar cerrado es para dar un estilo y ese estilo está luego lo que tú puedes hacer yo he puesto ejemplos más o menos simples pero por ejemplo a esos visteis el corte así en diagonal ahora sabéis que hay un montón de esto, está de modo a lo de las olas no? ese corte diagonal también le podéis hacerlo de las olas y lo tiene ya hecho es decir vosotros pensar que todo lo que se puede hacer con CSS se puede llevar a este mundo pero claro cada estilo tiene definido un CSS y es lo que hay de ahí no puedes salir alguna pregunta más por aquí a este no le dejes el micro seguro que pregunta algo para putear bueno lo primero gracias por la charla la verdad que ha sido super completa creo que hemos cogido bastante la punta y tenemos tareas bueno aparte de tus cursos que eso es ley cualquiera que quiera aprender de Gutenberg esto es el pan de valor para neófitos tú nos podrías recomendar bueno sabes que cuando empezamos con Gutenberg empezaron a salir recopilaciones de estilos de bloques, plugins como Atomic Blocks y tal nos podrías recomendar tú uno para los diseñatas que no nos queremos meter tanto en código y un plugin que tenga vamos que sea interesante a la hora de recopilación de estilos a ver de recopilación de estilos no hay tantos es decir estos estilos de bloque nos están usando tanto y yo vi que era una cosa que tiene un potencial enorme sobre todo para cuando tú creas algo a medida un cliente genial o incluso para ti porque si tú haces un recopilatorio de ese click path con todas las imágenes de rombo no se que no se cuanto y lo haces en un plugin lo tienes para toda la vida el código css no te va a cambiar lo puedes utilizar en todos tus clientes de colecciones de bloques para crear estructuras y demás que no lleve esos bloques por ejemplo yo lo he sacado del plugin block options que se llama editor's kit o algo así editor's kit lleva los de las imágenes lleva uno de imágenes y yo de ahí dije tu llevas esto yo voy a inventar los míos con mi código css ese block editor ese editor's kit es que es block options y tengo un caca en la cabeza ese editor's kit ya lleva estilos de bloque el resto de colecciones de bloques generalmente no los utilizan más allá de uno que sea por ejemplo que te dice es un plugin de botones y lo que llevan son 70 estilos de bloques vale eso sí pero lo que es una colección de bloques como tal no hay ninguno ese editor's kit por lo menos no hay ninguno que yo todavía haya encontrado que utilice eso una última pregunta tienen miedo dijiste que se pueden reutilizar pero dónde los buscamos los originales digamos es que eso hay que hacerlo a mano al final piensa que es si tú creas el archivito ese plugin con el que te he dicho yo tú te lo creas, lo guardas y luego lo activas como plugin en cualquiera de otras instalaciones dentro de Gutenberg están en la librería lib el lib dentro del plugin no no no dentro del core dentro del core están dentro del core dentro del core hay una carpeta que se llama lib y dentro están todos los bloques entonces encuentras el bloque y ahí es donde por ejemplo podrías editarlo a machetes si quisieras y podrías hacer los cambios pero claro eso no es recomendable porque no es reutilizable lo bueno y la idea que yo quiero que saques de aquí es que si tú creas un pequeño plugin con estilos de bloque lo vas a poder utilizar siempre ¿vale? y lo único que conllevas es ese tú te puedes crear un plugin por ejemplo de botones de estilos de botones que se han redondeado eso como una píldora que tenga contorno, que tenga no sé qué con todos los colores, con gradient, con no sé qué y tú lo tienes, tú tienes tu plugin lo subes y activas el estilo que tú quieras y tú puedes reutilizar de por vida es que CSS no es no es otra cosa yo lo que intentaré hacer es ser algún tipo de repositorio o algo así porque yo ya tengo unos cuantos creados entonces yo que sé, lo subiré a GitHub o algo así y si la gente quiere pues que pille y que aproveche y luego a partir de ese pues que turnen y se lo pongan a a su gusto y antojo ¿vale? pero el concepto es CSS lo que puedes hacer con CSS se puede hacer con los estilos de blog ¿vale? gracias