 Voy a hacer una apología explícita de que utilicéis bloques, tanto creando webs como creando contenido en WordPress. Seguramente necesitamos un poco de contexto, porque hace ya 4 años, más de 4 años que le Gutenberg, se incorporó en WordPress Core, es decir, fue el editor de bloques hace 4 años. Y todavía estamos aquí dando charlas de, venga, no seas tímidos utilizar los bloques, que mola un montón. Esto es porque venimos de una transición dolorosa, y es que esta incorporación en el Core fue un poco precipitada. Incluso los más optimistas y los que nos va la marcha nos pareció que fue un poco concalzador, parecía que iba a explotar todas las webs, iban a explotar, no pasó nada realmente a nivel de... Pero sí que la experiencia de usuario con los bloques era un poco áspera y la gente, pues básicamente lo que hizo, o hicisteis, no sé, es instalar el plugin, clasique editor, que hacía que todo se quedara como antes y tira pa'lante y ya vendrá algún motivo a dar una charla justificando porque hay que adoptar la nueva tecnología, ¿vale? Entonces, de hecho, los que estáis en, habéis ido a algunas work-ups o demás, esta camiseta igual los suena, y es que ya es como un meme, es un cachondeo, de sobrevivir a Gutenberg. Y eso es porque realmente los comienzos fueron duros, ¿vale? Entonces, además... Yo os voy a decir que esos comienzos fueron duros, pero que ahora da gusto trabajar con bloques, ¿vale? O sea, realmente ha habido una evolución muy potente, ha habido mucha gente haciendo muy bien las cosas para que vosotros podáis utilizar bloques, pero es muy probable que algunos estéis en plan, no voy a dejarme de vivir, o dicho de otra manera, señor, suélteme el brazo, ¿vale? Y seguramente es porque vosotros sentís, yo tengo un flujo de trabajo en el que me va genial con mí, querido, y aquí entra Divi, Elementor, Visual Composer, lo que os dé la gana, ¿vale? De hecho, quiero agradecer a todos los que me mandasteis las fotos de cuando os pedí cómo son vuestros lunes por la mañana, pues os me mandasteis esto, y entiendo que ahí irradiais felicidad, por cierto, esto no son fotos de stock, es gente que está con vosotros, ¿vale? Podéis echar un ojologo, ¿sí? Vale, entonces, como me voy a poner pesadito con lo de los bloques y por qué merece la pena, utilizarlo creo que es necesario dar un poco de contexto y justificar por qué os voy a dar esta chapa. Entonces, las ventajas que yo veo el primero que engloba a varios es que es un componente nativo de gorpes, es decir, es algo que ya está dentro de gorpes, con lo cual viene de saque. Esto significa no tienes que instalar nada, es gratis, va a evolucionar por la patilla, porque tú no vas a tener que pagar nada, y esto conlleva otras ventajas. Es un estándar homogéneo, ya el cachondeo este de los short-coach widgets y otros tipos propietarios para meter contenido, ya por fin tenemos un estádar en el que todo el mundo podemos utilizar el mismo. También a nivel de rendimiento, obviamente está dentro del correo de WordPress, a nivel semántico es mucho más cuidados o que la mayoría de constructores visuales y cualquier test que encontréis por ahí que se han hecho de cualquier constructor visual frente al editor de bloques o el WordPress per se, sale ganando siempre WordPress y esto va a seguir siendo así siempre. Pero aunque se va cayendo esto. Vale, y por otro lado es FutureProof, o dicho de otra manera, es una inversión de futuro en el sentido de que lo que crees con bloques es mucho más fácil que perdure en el tiempo que tu queridísimo plugin, aquí rellenar con el que queráis, que puede ser que en unos años o cierre o cambie de modelo o se vaya a otra plataforma, si no miro a nadie o que montes su propio chiringo, y el que quiera entenderlo entiende y el que no, pues que se ría también, que está bien. Luego cada vez hay más herramientas basadas en bloques. Esto significa que no tenéis que bajar al barro, como os voy a explicar en algunos ejemplos, luego, y que es muy entretenido, pero si sois usuarios, podéis utilizar un montón de tecnología que ya se ha creado. No estamos hace cuatro años que no había casi nada, sino que hay un montón de mandanga buena hablando en plata. Y por otro lado, si os apetece bajar al barro o crear cosas nuevas y lo veis como una oportunidad de hacer cosas nuevas y ofrecerlas, hay mucho contenido al respecto. En el handbook, luego voy a compartir un montón de enlaces y demás, y luego también hay gente que en la comunidad comparte sus avances o conocimientos sobre esto. Vale, ¿qué vamos a ver? Un poco para que os hagáis una idea. Vamos a ver bloques nativos, patrones de bloques, colecciones de bloques, estilos de bloques, variaciones de bloques, filtros para bloques y creación de bloques. Y pensaréis, ¿te has venido arriba, chaval? Con esa mierda de bobos, no vas a llegar ni a estilos. Vale, y seguramente nos falta razón. Pero mi intención, para ponerme lo más difícil, es que mi intención es que todos los que estáis aquí, saquéis algo en claro. Vale, obviamente los 40 minutos no van a ser divinos para uno de vosotros, pero sí que la idea es que, si os separara en grupos, que ya la separación puede ser un poco escamosa. Y empezamos por las que no debería dar problemas, que son los usuarios de API o dicho de otra manera, usuarios de WordPress, gente que metéis contenido y utilizáis WordPress como un usuario de API, como bien dice. Luego diseñadores, barra implementadores. Aquí que no se me ofenda nadie, los he juntado, sé que en algunos casos son dos perfiles distintos, en otros hay un poco de solapamiento, es por simplificar el tema de los emojis, ¿vale? Y por último, los desarrolladores, ¿vale? Gente que ya quiere bajar al barro y hacer cosas con código y demás. Entonces, para hacerme yo una idea del primer grupo, ¿cuántos os consideráis usuarios de, ¿vale? Muy bien, ¿cuáles os consideráis en el segundo grupo bien sea bajo uno u otro, ¿vale? Por ahora mayoría. Y en el tercero, está bastante repartido. Así que bueno, mi intención es que todos saquéis algo en claro cuando esto finalice. Vale, la última pregunta, seguramente. ¿Cuántos de vosotros cuando os metéis a WordPress a generar contenido veis esto? No se estímidos, ¿eh? No voy a hacer shaming aquí en directo. Es para hacer una idea, ¿vale? Muy bien, no voy a juzgar. Simplemente deciros que deberíais ver algo más parecido a esto, ¿vale? Yo creo que independientemente de toda la llegada precipitada y toda la movida que hubo con el lector de bloques hay que reconocer que es del inicio puso en manos del usuario final cosas tan sencillas como hacer columnas, meter botones de forma fácil. Antes había que usar o shortcoach, o saber HTML, obviamente, pero había cosas muy sencillas que eran difíciles de hacer y ahora no, ¿vale? Bueno, entonces mi intención es que los que habéis levantado la mano después de la charla hoy veáis algo más parecido a lo que está allí, ¿vale? Una de las quejas que hubo con el lector de bloques que yo creo que puede estar justificada es que todos son bloques. Esto está bien para meter y maquetar cosas distintas, pero si tú tienes un flujo de trabajo de yo estoy con mi teclado. No me hagas levantar la mano al ratón. Para vosotros vengo a deciros, por si no lo sabíais, desde el cariño, caso no, ahora un poco chulo, que hay un montón de atajos que además podéis acceder directamente desde el lector que te chiva, cuáles son los atajos, y van súper bien. Para, por ejemplo, duplicar bloques o mover bloques o buscar bloques, lo de la barra, y luego buscar el nombre del bloque es muy práctico. Entonces, si no estáis familiarizados, creo que merece la pena. Y esto puede ayudaros a que ese flujo de trabajo que tanto amáis y no queréis cambiar, se pueda mantener más parecido, ¿vale? Venga, vamos con los bloques nativos que son los que vienen de saque con WordPress, ¿vale? Estos son los que vienen gratis. Ya hay 95, poca broma, y 40 y tantos son más pensados para crearte más de bloques que hoy no me voy a meter ahí, que ya habéis visto que bastante me voy a querer meter en la charla de hoy. Pero bueno, voy a destacar no los 95, imaginaros, voy a charla, sino los más potentes para maquetar, ¿vale? Porque realmente en los últimos meses ha habido mejoras muy potentes en estos bloques. Bueno, en todos, pero especialmente en el bloque de fondo de grupo y de columnas, te permite modificar desde la interfaz de usuario, tanto padding, margin, bordes, y se pueden hacer cosas chulas, ¿vale? Otro bloque que da mucho juego para maquetar es el bloque de listado de estradas. Este es el típico o grid de entradas que quieres sacar, o demás, luego vamos a verlo en profundidad. Para que os hagáis una idea en plan rápido de qué se puede hacer, por ejemplo, si creas un grupo de bloque, te permite, pues es lo que os decía, ¿no? Cambiar padding, o sea, relleno, margin, él también puedes poner borde, puedes incluso elegir el tipo de borde, si tienes radio, o sea, son cosas. Esto es algo muy sencillo, pero el concepto es que veáis que son cosas que igual estáis acostumbrados a hacer con vuestro querido page builder o plugin de confianza, y que igual algunas ya están aquí, ¿vale? Vamos con el query block, que creo que es otro de los que igual no conocéis y que puede dar mucho juego, ¿vale? Básicamente, esto va a sacar, yo le llamo query block, y cuando digo listado de entradas es el mismo bloque, ¿vale? Básicamente, te permite sacar un listado de entradas, en el que, bueno, el gif va bastante rápido, pero puedes elegir qué elementos quieres mostrar, ¿no? Imagen, excerpt, fecha, y lo bueno es que una vez que lo metes, aparte de filtrar el contenido, que luego lo diré más, veis que son todo elementos, son bloques. O sea, es la imagen destacada, es el excerpt, con lo cual tú lo puedes mandar para arriba o para abajo, o cargártelo, si no quieres utilizar la fecha o lo que sea. Esto es muy potente. O sea, había gente que utilizaba page builders o plugins similares, solo para no tener que sacar en un shortcut o programar esto, ¿vale? Entonces, como el gif va bastante a toda leche, aquí lo he parado un poco para que veáis. Se puede filtrar bastante bien. Al principio solo eran entradas, las típicas entradas de blog, pero ahora ya puedes llamar custom post types, lecciones, portfolio, lo que tú tengas. Incluso te deja filtrar por categorías, aunque ahí no se vea, ¿vale? Puedes hacer esto de que esté en listado o en columnas, y también te permite ordenar por demás nuevas a más viejas, y de alaceta. Hay un poquito de limitación, pero te deja hacerlo básico. Y también te permite elegir cuánto se muestran, y si quieres que haya algún offset, de que alguno se muestre o utiliza este quiz. Esto es muy potente de saque, pero si luego lo combinamos con un filtro que os voy a comentar luego, se pueden hacer cosas muy, muy personalizadas. Vale, vamos a por los patrones. Los patrones de bloques básicamente son diseños predefinidos que tú puedes utilizar y copiar en un clic en tu web, ¿vale? Lo podéis acceder, de hecho, si utilizáis pitch builders, seguramente estáis utilizando diseños predefinidos o así, pues esta sería la versión en WordPress. Parte buena, que te puedes encontrar todos los que hay en esa URL que os he dicho, que es patterns, básicamente patrones en inglés, y ahí podéis filtrar por headers, imágenes, bueno, todos los filtros que hay ahí, y podéis, si estáis logueados, podéis guardar vuestros favoritos, con lo cual lo podéis tener ahí a mano. Y si lo queréis copiar, es darle a copy, y según te vas al editor, haces paste y magia. Ahí aparece. Esto es muy potente. Realmente, hay diseños muy buenos que podéis utilizar, y la idea es que luego simplemente te vas a cambiar la imagen, el texto, ¿vale? También podéis acceder a esto desde el editor. Lo que pasa es que con limitaciones, ¿vale? Aquí lo podéis ver, que yendo a bloques, hay un apartado que se llama patrones, os muestra, os voy a mostrar algunos del directorio, unos pocos, y luego los que haya metido el tema, que cualquier tema que se precie, debería de tener alguno ahí que invite a utilizarlo. Además, si le dais al clic, ahora mejora mucho la interfaz de usuario y es una modal, con lo cual es más fácil ver que diseños puede servir. Venga, vamos con el directorio de bloques. Como os decía, había 95, hay 95 bloques de WordPress, igual os falta alguno para lo que necesitáis maquetar o hacer vosotros. Puede ser uno de acordeón o lo que sea. Antes de iros a las colecciones de bloques, que lo goblaremos, os invito a pasaros por esta URL que básicamente son bloques, que son un solo bloqueo. O sea, es la página de plugins en el que estás buscando plugins que tienen un bloque, ¿vale? Lo podéis hacer desde la página, pero también lo podéis hacer desde el editor. Si le dais a más y buscáis, y aquí os pongo dos ejemplos que no están hechos al azar, porque si os fijáis, los primeros creadores de los dos bloques que aparecen, son gente de la comunidad de WordPress España, que fueron de los primeros que hicieron estos bloques, que me parece que es una idea que nos ha potenciado suficiente y que, aquí pongo un poco, si sois desarrolladores, a invitaros a que haya bloques que hagan solo una cosa. Esto está genial. Si no sirve solo un bloque, vais a necesitar más bloques. Y por lo que sea, necesitáis más control sobre el diseño, que lo que os permite por ahora los bloques de nativos, sí que os invito a echar un ojo a las colecciones de bloques, ¿vale? Esto es un mundo, no me voy a meter. Aquí os pongo, por cierto, la charla va a estar compartida el PDF en Twitter y, también, cuando salga en WordPress TV, siempre está asociada a la charla. Vale, no tenéis que volver los locos ahora cogiendo ideas. Yo no los utilizo mucho, pero me han hablado bastante bien de Cadence a nivel de querer sustituir un page builder. Es decir, que realmente las opciones y la granularidad que tienes como usuario, recuerda bastante a un page builder. Ahí os lo dejo, por si os interesa. Vale, hasta ahora hemos aprovechado un poco bloques que ya venían creados y que no habíamos tenido que hacer nosotros nada, ¿vale? Ahora vamos un poco hacia ese perfil en el que dice, venga, yo un poquito de código, me siento cómodo de o saber al menos qué puedo hacer con eso, ¿vale? Los estilos, básicamente, van a utilizar un bloque que ya existe, pero le vas a dar estilos adicionales, ¿vale? Esto es muy práctico para cosas como avisos, listado de iconos, imágenes, galerías, citas, o incluso plugins de terceros, como un ejemplo que pondré, que es CDD, pero puede ser cualquier plugin de tercero. La gracia de todo esto es que el usuario desde el editor de bloques va a poder previsualizar cómo va a quedar y va a tener, pues, en el ejemplo de los avisos, lo veis arriba. Y en el ejemplo de abajo es cómo puedes ofrecer de forma sencilla un listado que no sea solo con los típicas redonditas o demás, sino que sea un listado enriquecido, ¿vale? También si tenéis un plugin, o sea, perdón, un tema, si creéis temas tanto para vosotros, o vosotros o vuestros clientes como comerciales, meter estilos de bloques es una forma de darle amor a tu usuario, ¿vale? ¿Por qué? Porque ellos, por el mismo precio, van a poder elegir, por ejemplo, en el ejemplo de arriba, es un bloque de medio y texto, pues le ofreces, aparte el que viene con WordPress, uno personalizado en el que has utilizado el color primario, por ejemplo, o si no, a la hora de poner cuotas, también estás ofreciéndole otras, en ese ejemplo, otras dos opciones, mejor dicho. Con lo cual, te vas a asegurar de que le das opciones a tu cliente, pero también van a tener un poco el diseño y la paleta de colores y la identidad que se mantenga coherente, ¿vale? Como los GIFs molan un montón y siempre va bien para hacerse una idea de cómo funciona, ya veis que esto es una tontería, en realidad, es simplemente que una imagen, que inserta una imagen, puedas elegir distintos tipos de formas, lo mismo con una galería, ¿vale? La parte buena, ya veis, es que se previsualiza en la parte de la barra de la derecha y luego se ve en editor, ¿vale? Entonces, os he dicho que esto con un poco de código se puede conseguir y creo que no se ha mentido, ¿vale? Son tres pasos, que en realidad es registrar estilos, que lo puedes hacer con una función de JavaScript, que se llama register block style y que todo el JavaScript, si alguien se ha puesto nervioso cuando ha dicho JavaScript, es esta parte de aquí, que no estoy, a ver, bueno, es la parte de la izquierda, es muy poco JavaScript y se entiende muy bien, ¿vale? Es a lo que voy, o sea, yo no soy un programador súper experto en JavaScript, pero realmente esta parte me resulta muy asequible y cómoda, ¿vale? De hecho, solo vais a tener que poner el name y el label, son las dos cosas que son obligatorias. Y luego, donde veis, default false, es porque en este caso vamos a ofrecerlo como un estilo aparte del que va a ofrecer WordPress, ¿vale? Luego, solo tenéis que encolar el fichero, encolar significa simplemente que este fichero que habéis creado JavaScript lo llame WordPress en algún punto, en este caso en el editor, para mostrarlo. Y por último el CSS, que este va a ser el CSS, que estáis acostumbrados de toda la vida. Simplemente vais a hacer que cuando elijan un estilo, se aplique CSS, ¿vale? Ya veis que es bastante sencillo. Los estilos se pueden registrar tan bien con PHP. Lo he puesto en JavaScript, uno para que le perdáis el miedo, en caso de que le tengáis. Y también porque vamos a ver ahora las variaciones, que son primas hermanas, y la forma de utilizarlo es muy parecido, con lo cual, si os acostumbráis a esta forma de utilizar estilos con las variaciones, vais a estar muy cómodos también, ¿vale? Variaciones, básicamente, aparte de dar estilos, te permite jugar con la estructura de los bloques, ¿vale? En este caso, voy a poner un ejemplo muy sencillo, que es el bloque de área de estilos y texto. Este es el que viene de saque. Y tú puedes crear con un poco de código esto, que básicamente es el mismo bloque, pero que está utilizando un encabezado y un párrafo, y le ha dado un color de fondo, ¿vale? Y ha cambiado de lado las cosas, ¿vale? Esto va a aparecer en el editor de forma sencilla. Van a poder elegir esa variación. Y a lo que voy es que todo esto, o esta modificación, se ha conseguido con ese código que veis de ahí, que vuelve a ser bastante sencillo y manejable. De hecho, la parte importante o más potente de ahí, es la parte en la que pone inner blocks. Y aquí básicamente tú le estás diciendo inner blocks, y ahí va la estructura. Entonces tú le vas a decir, pues va a ser un encabezado, en este caso, y lo que sea. Son ejemplos muy sencillos, precisamente, para que sigáis conmigo y no os oyáis a otro lado. Pero se pueden hacer cosas muy potentes. Por ejemplo, con el query block, aquí te puedes volver loco. Puedes empezar a usar una imagen, la imagen destacada, poner encima la categoría del esto o el autor. Puedes hacer diseños muy potentes con esto. No me va a meter ahí para no perderos. Pero sí que os voy a poner otro ejemplo que yo creo que está guay, ¿vale? Y es que tú puedes ofrecer una variación nueva, como lo que os explicaba. O puedes hacer si uno de los bloques nativos te pone nervioso por algún motivo, aquí ya entran las negras personas desde cada uno, puedes modificarlo de forma sencilla. A mí qué me pasa, que cuando meto galerías de imágenes, me ponen nervioso que por defecto esté recortar imágenes. Porque es como, no, yo estoy poniendo estas imágenes en sí llámelas enteras. Si yo te digo, me las recordas. Pero no me las recortes por defecto. ¿Vale? Son manías, no me juzgáis, ¿vale? Lo mismo que yo no jugaba antes. No me juzgáis. Lo bueno es que con un poquito de código, tú le puedes decir, oye, este bloque, el nativo de WordPress, que me deje de quitar la vida cada vez que meto una galería, no meto tantas. En realidad es un poco tirarme el rollo. Y que venga por defecto desactivado el toggle. Veis que está desactivado. Este toggle sigue siendo activo. Simplemente lo puedes volver a activar y todo. Pero lo estás diciendo. A mí, enséñamelo sin recortar imágenes y enlázame la imagen al archivo multimedia. Esto está guay si utilizas Lightbox, que es este efecto de que se abra y así te aseguras que si todas las galerías están con este setting, el Lightbox va a funcionar, ¿vale? Lo bueno de esto, son, bueno, iba a decir cinco líneas de código, pero es un poco más. Pero se entiende el concepto. Es muy sencillo. Simplemente le dices, seguimos utilizando register block by addition. Le dices, ¿qué bloque? Que en este caso es core gallery. Le dices default true para decirle, oye, yo quiero que bloque siempre sea así como a mí me gusta. Y en este caso lo importante sería el image crop false, ¿vale? Y en la parte de link to media. Básicamente otra vez un ejemplo sencillo para que, y ya no hablo de vuestras neuras, sino de las neuras de vuestros clientes que las tienen, que nos conocemos. Entonces si les podéis poner la vida más fácil con tonterías de estas, yo creo que podéis ganar un poquito de cariño. Y lo único que faltaría a estos códigos, perdón, a estos códigos que os he dicho, sería encolarlo, que esto es una función de toda la vida, de encolar los estos estilos al editor otra vez para que se vea en el editor y listo, ¿vale? Entonces, ¿qué me gusta a mí más que lo que he enseñado antes? Los filtros, porque lo que más mola de WordPress, a mi juicio, son los filtros. Gracias a eso hay un montón de plugins que se pueden enganchar al core y gracias a esos filtros de los plugins, hayadons que se enganchan y por eso en WordPress se puede hacer prácticamente todo, ¿vale? Una de las pegas al inicio de los bloques es que los bloques iban un poco a su bola, ¿vale? O sea, era como yo hago aquí, salgo y me muestro y soy interactivo, pero una vez que salgo, a mí no me enganchas con hostias. Y algunos programadores de PHP decíamos, déjate tocar un poco, ni que sea modificar un poco, pues que vas a mostrar o dejar de mostrar. Estos son los filtros y ahora voy a poner ejemplos, porque se entiende un poco más de cómo se está haciendo esto, tirando yo solo y que está quedando un poco rara. Yo se más he caído la boca, así que voy a ver un poco. Venga, vamos con los ejemplos. Con renderBlock se pueden hacer un montón de cosas y a ver si no me enrollo mucho con el tema. Entre ellas puedes mostrar campos personalizados. Aquí básicamente estás yendo cuando se va a renderizar o mostrar el bloque, intervienes y le puedes mostrar cosas antes o después, ¿vale? Puedes mostrar un campo personalizado con lo cual todo esto que os voy a explicar de estilos, variaciones, filtros es para que no tengáis que hacer un bloque de cero, ¿vale? Estoy mirando por vuestros intereses. Entonces, aquí puedes mostrar un campo personalizado. También puedes mostrar texto antes de un bloque, explicaré o después. Puedes mostrar los comentarios en formato acordeón, porque os explicaré un ejemplo sencillo. Y también puedes, estos son ejemplos que se me han ocurrido a mí, mostrar una ventana modal en la que llames a un bloque reutilizable y que ahí captes el email o lo que te de a ti la gana. Vamos con el primero. En este caso que veis aquí, categoría general, esa sería la típica página de archivo. Y lo que es nuevo, lo que hemos hecho con render block es mostrar ese 234, que básicamente le estamos diciendo, oye, cuéntame cuántos posts de esta categoría hay. Y así es una forma de que la gente vea cuánto contenido hay sobre eso, ¿vale? Aquí estamos utilizando render block con más código que ahora no me voy a meter ahí, pero la idea es que entendáis que os podéis enganchar ahí y decir, oye, después en este caso es el block query title, que es el de categoría general, y luego mostraréis lo que os dé la gana, ¿vale? Luego el caso de los comentarios, podéis mostrar si hay un sitio con muchos comentarios y no queréis que ocupe todo el scroll, podéis hacer que por defecto vengan colapsados y que cuando clicken se despliegue. Aquí simplemente estás metiendo un dip con un poquito de CSS para que eso tenga un wrap y cuando pegan se muestre el esto, ¿vale? Y lo que os digo son ejemplos que pretendo que sean un poco inspiradores. Mismo concepto, aquí de hecho estamos utilizando render block con parse blocks. Básicamente, les hemos creado en un block reutilizable un formulario de, en este caso creo que pide email y de hecho, esto está creado con gravity phones, puede ser cualquier plugin. O sea, tú lo haces en el editor, le dices, guárdalo como blocker reutilizable y luego haces un poco de magia. Hay un poco más de código, pero básicamente son esas dos funciones las que se encargan de que ese bloque salga y sea totalmente operativo, ¿vale? Luego, si os venís arriba y no sé si estoy solo en todo esto, a mí esto me mola un montón. Entonces, bueno, yo hubo un momento en el que dije, esto yo puedo hacer un montón de cosas, pero necesito o me gustaría tener a mano el nombre de los bloques para saber dónde me puedo enganchar. Yo vengo de utilizar mucho y sigo utilizando genesis y hay un plugin que me gusta mucho, que es visual, genesis, visual hook. Básicamente te muestra dónde te puedes enganchar. Yo dije, puedo hacerlo mismo, va a saber yo dónde me puedo enganchar. Este es mi intento, ¿vale? Perdón por el contraste, podría ser mejor. Eso que veis en naranja es respetando la paleta de colores del plugin que os mencionaba, pero creo que es mejorable. La idea es que de un vistazo veas porque tú no te tienes porque saber cómo se llama todos los bloques. Hay 95, ¿vale? Son core, barra, no sé qué. Y no solo eso, sino que utilizando render block, también puedes sacar los atributos, ¿vale? Que esto luego explicaré. Entonces, bueno, he oído un O. Quiero pensar que ha amolado y voy a seguir pa'lante. ¿Vale? Un ejemplo rapidito, voy bien por ahora, ¿no? Venga. De render block data. En este caso, lo que estamos es interceptando el bloque, los datos que va a mostrar ese bloque y lo interceptamos y mostramos otros. Voy a poner un ejemplo, que siempre se entiende mejor. Imaginaros que vuestro cliente puse un bloque de últimas entradas detrás de cada post del blog y puso 10, porque se vino muy arriba. Y tú, después de una conversación, y a ver, ¿qué te parece si ponemos 3? Y al final la negociación termina en 5. Pues en vez de tener que ir a esos, imaginaos que son 100 posts y tener que cambiar en todos ellos los 10 posts que se van a montar, o sea, que se van a mostrar. Tú puedes utilizar este bloque y decirle, oye, cuando te encuentres, corre, barra, leites post, que es este bloque, muéstrame 5. Si habéis ganado la batalla, serán 3. Básicamente, entonces el concepto es que no solo podéis añadir cosas antes y después, con render block, sino que con render block data podéis intervenir en esa información y cambiarlo. A mí me parece potentísimo, no sé si. Un truque, si seguís, super enchufados, como yo con el tema de los bloques. ¿Qué cosas se pueden hacer? ¿Cuántos bloques tiene esta instalación? O sí, básicamente, entender cuántos bloques tiene una instalación. Si vosotros ponéis eso, que pone ahí arriba, WP Blocks Get Block Types, y lo pegáis en la consola del navegador, o sale esta ristra. Y os va a mostrar. Gracias, Milo, está quedando súper bien. Os va a salir el listado, no solo de los bloques nativos de WordPress, que a priori van a estar registrados, no sé qué hayáis hecho al contrario. Sino que os van a mostrar los de los plugins, que esto va súper bien. Si utilizáis en éstos blogs, como en ese ejemplo, se va a mostrar en bucomes, os van a ser chorrocientos, porque también hay muchos. Y no solo eso, sino que si queréis ver qué atributos y qué variaciones y qué block styles hay, pues eso es un desplegable, ya sé que no se lee muy bien. Pero bueno, la idea es que sepáis que este puede ser un truco para llevarlo al siguiente, bueno, si os engancháis, después de tachar, llevarlo al siguiente nivel. Vale, vamos a retomar el query loop, que es uno de mis favoritos. Os decía que se pueden controlar muchas cosas a nivel de interfaz de usuario, que está genial. Pero también os decía que con un filtro, yey, podemos conseguir ir todavía más lejos, ¿vale? Ese filtro se llama query barra baja loop y más cosas, que no voy a decir para ahorraros el disgusto. Y mi disgusto. Y básicamente, con este filtro, accedéis a la clase vp query. Oh, vendría bien uno. Bueno, si sois implementadores, desarrolladores vp query, es la consulta que controla la madre del cordero de toda, o sea, de la consulta de huirpes, con lo cual le puedes meter mano a nivel de lo que te dé la gana. Y estás utilizando un bloque nativo, insisto, te estás ahorrando bastante trabajo. Entonces, ejemplos, puedes ordenar por lo que quieras. Y cuando digo lo que quieras es no solo restringirte a de más antigua, más nuevo y da la Z, que es lo que te permite a nivel de interfaz. Puedes poner random, pero es que también puedes ordenar por campos personalizados, sin necesitas, que así sea el caso. También puedes elegir que entradas se muestran. Los que conocéis la clase vp query, estoy diciendo obviedades, ¿vale? Pero estoy dando ideas por si no las conocéis. Puedes excluir tanto categorías como etiquetas y también podéis combinar varios custom post types, ¿vale? Ejemplos. Ah, todo esto lo puedes vincular con etiquetas condicionales, de forma que entra ejemplos. Por ejemplo, is front page, que sería, es la página principal. Cuando sea una, bueno, básicamente cuando sea un query block y en front page, no me muestres las categorías de ese array, ¿vale? Y relevante, es solo un ejemplo. O muéstrame una combinación de custom post types, como es el caso de ahí, ¿vale? Pues tutorial, curso y portfolio. Esto es muy potente, ¿vale? Porque con etiquetas condicionales puede ser archive, puede ser is page y el IDE del page es muy potente. ¿Qué limitación potencial podría tener esto y que yo me encontré cuando estaba trasteando con esto? Que haya más de un bloque delistado de entradas en la misma página. Entonces dije, espérate, que hay filtros. Y entonces, combinando pre render block y nuestro querido query loop, puedes hacer lo mismo que os he comentado hasta ahora, pero a nivel de bloque individual. Es decir, da igual que haya 10 en la página principal que tú puedes hacer tu magia en todos ellos, como combinando los dos, ¿vale? Básicamente, estás metiendo el filtro de query loop dentro del pre render block, ¿vale? Nos quiero calentar la cabeza. Pero aquí el concepto es que en el query IDE, todos los bloques delistados de entradas tienen un IDE, ¿vale? En este caso, voy a decirle que en el 8 me muestre, creo que el ejemplo era, que excluya las categorías X, ¿vale? Pero aquí esto lo podéis utilizar con la query ID, lo que os dé la gana, pero podéis incluso utilizar esto para decirle, oye, cuando tenga la clase, lecciones barracursos, muéstrame lecciones barracursos. Es decir, el usuario de a pie va a meter clase, que eso es fácil, ¿no? Lecciones barracursos y tú, si has programado esto, va a hacer la magia, ¿vale? Y va a ser aplicable para todos los bloques que meta así. A mí me parece la hostia, no sé, a vosotros, pero a mí me parece que es muy potente, ¿vale? Porque básicamente estás teniendo todas las ventajas a nivel de interfaz de usuario, que os comentaba antes, de poder cargarte la imagen destacada o subirla o bajarla, o poner los bloques que te salgan de donde quieras, donde quieras, o al gastar redundancia, ¿vale? Bueno, idea que yo creo que está chula y que puede ser bastante práctica. El truque, si no estáis acostumbrados a mirar la parte de editor de código, tampoco hace falta que os familiaricéis. Pero, por ejemplo, para captar cuál es el query ID, podéis ir simplemente a ir y van a salir todos los atributos, pero entre ellos también va a estar el query ID, ¿vale? Venga, pues aquí era donde llegué y ya os he cascado la de San Dios y dije, pues ahora les cuento cómo se pueden crear bloques y así esto termina por todo el alto. Lo que pasa es que cuando me visualizaba haciendo esto, os visualizaba a vosotros lanzando objetos contundentes contra mi persona. Entonces, como ya veis que ya estoy justito de salud y de voz especialmente, no lo voy a hacer. Voy a hacer invitaciones o así. Bien tirado. Voy a hacer una invitación que está, ya veis que hay muchas invitaciones en esta charla y es que le perdáis un poco el miedo a crear bloques en general, ¿vale? Hay dos formas de hacerlo. Uno es usando JavaScript, que para los que somos más phperos o incluso los que no sois desarrolladores pues ya da un poquito de perecita y tal. Tengo que decir que la gente otra vez es que en la comunidad WordPress hay gente que mola muchísimo, que igual no les conocís, pero ya hacen cosas muy friquis como esta. Básicamente, claro, pensad que WordPress, su idea es que utilicemos bloques y por eso contratan a gente como mí para que hagamos esta charla. Esto es mentira, esto lo hago de motos propios. Voy a decir que ahora salga un titular que no estaba buscando hoy, ¿vale? Pero la idea sí que es que la gente utilice bloques, joder, porque se han pegado un currazo, lo han metido en core y llevamos cuatro años y hay gente que todavía utiliza el editor clásico. No miro a nadie, ¿vale? Entonces, su idea es vamos a bajar el listón para la gente que tiene ganas. Veas el individuo aquí motivado encima de él que lo puedan hacer sin tener grandes conocimientos de JavaScript o mientras me formo más profundamente en JavaScript como Matt nos recomiendo hace ocho años, creo. Bueno, a lo que iba, qué me dio. Este paquete, básicamente, lo que hace es empaquetar y abstraer todo de forma que tú con muy poquitas líneas de terminal, así que es terminal. Pero realmente os voy a dejar en los recursos un handbook donde se sigue y en cinco minutos tienes un bloque. ¿Qué hace ese bloque? Ser un bloque. O sea, realmente es los cimientos de un bloque. Luego tú tienes que tener una idea y cuanto más locas sean las cosas que quieres que haga el bloque, más complicado será programarlo. Pero un bloque de saque ahora lo puedes hacer de forma muy sencilla y os lo digo de verdad, ¿vale? Por cierto, esta mañana ha habido una charla super recomendable de Joaquín Ruiz que ha hablado de cómo crear un bloque en React. Y si os venís arriba y después de ver esto os apetece ampliar información, os recomiendo mucho porque me parece que ha estado muy didáctica y creo que para perderle el miedo a la gente que tiene ganas de inkarle el diente puede estar muy bien. Y si no, también una opción que estoy convencido que más gente de los aquí presentes conocéis es crear bloques con plugins. Obviamente con Abarth Custom Fields, porque ya es un gran plugin haciendo lo que hace y es que además te permite crear bloques de forma bastante sencilla. Y además en la última actualización han utilizado cosas que hacen que se parezca un poquito más a la forma nativa de crear bloques, ¿vale? O sea que el trabajazo, como siempre la gente de los Custom Fields. Y otra opción sería GeneXus Custom Blocks que también su idea es un poco lo mismo, abstraer la parte complicada y que mediante PHP puedas crear bloques. Y ahora con intención de recuperaros a esos usuarios que ya pide que al inicio levantasteis la mano y habéis dicho, ¿y de lo mío qué hay? Vale, pues de lo vuestro hay algo, porque como os decía cada vez hay más herramientas de gente que se le ocurra para que parte de estas cosas que he dicho que puedes hacer con un poco de código o un poco más de código, hay plugins que llegan a sitios interesantes. Uno de ellos es Editors Kit. Amplía las opciones que te ofrece el editor de bloques, ¿vale? Por ejemplo, los listados un poquito más enriquecidos es una de las opciones. También te da la opción de ocultar cosas, si está el usuario loqueado o cosas así. Y de hecho, a nivel de visibilidad de un bloque, lo podéis controlar aún mejor con este bloque, ¿vale? Si lo queréis controlar o por fechas, de que se muestre una fecha, deje de mostrarse en otro o cosas así, de forma condicional lo podéis hacer. Todos estos plugins son para nivel de usuario. O sea, todo tiene interfaz. No tenéis que hacer magia negra como la que habéis visto antes. Icon Block es otro plugin que es muy sencillito, que más utiliza SVG, con lo cual está integra iconos de forma muy bien, o sea, muy bien parido dentro del editor y no está sobrecargando, porque solo carga SVG donde toca. Y este es muy nuevo, Advanced Query Loop. Y este Ryan Welcher, que es uno de los que está aportando más contenido sobre cómo hacer estas locuras de variaciones de bloques y demás. Y entonces, parte de las cosas que os he dicho que se puede hacer de forma avanzada en el query loop, las has sacado a nivel de interfaz de usuario. Por ejemplo, acceder a metadatos y tal y cual. Y ahora lo puedes toquetear de forma a nivel de usuario, ¿vale? Le podéis echar un ojo. Yo creo que me gusta mucho el concepto, a pesar de que no tiene muchas instalaciones activas, pero me gusta mucho la idea que es básicamente Additional Block Styles. Esto es que sobre los bloques ya nativos de WordPress, tengas esa opción de igual los ejemplos que he puesto de la imagen de triángulo estrella y demás. No es lo más práctico, pero sí que puedes hacer cosas chulas con cuotas, citas y cosas así que haces que un usuario que no sabe programar tenga unos estilos extra que pueden ir muy bien. Y ya para terminar un poco con cosas guapas que puedes hacer con los bloques, este es un ejemplo de una web que creé para una iniciativa de WordPress Global, en la que estoy involucrado junto a otros colegas. Otra colega que está por aquí y otros colegas de WordPress y la idea era mostrar nuestras ideas como un ejemplo. Y con la idea de intentar hacerlo un poco más visual, lo que hicimos fue mostrarlo como si fuera un pase de diapositivas, ¿vale? Esto es una página web que podéis visitar en esa URL. Y si vais, veréis que básicamente el gif va todo a leche, pero el concepto es que vas navegando por diapositivas. Esto es un tema de bloques que con un poquito de magia, tampoco demasiado. Por mi parte, haciendo anchors y creando el tema de los grupos de bloques y demás, se puede conseguir algo muy chulo, ¿vale? Y seguramente estaréis pensando, hostia, ¿cómo se lo ocurran? ¿O hay que la presentación de hoy también se la ha hecho? No, no me ha dado la vida. Ha sido una semana complicada y ya veis que he llegado un poco justito. Pero bueno, que realmente no es muy complicado. De hecho, si os interesa utilizarlo, comentármelo, porque yo estoy encantado de compartir el código de cómo lo hice, porque no es muy complicado. Y creo que es bastante vistoso y puede ser chulo, ¿vale? Venga, recogiendo todo lo que os he contado hoy, el mensaje en realidad es súper simple y lo he dicho desde el inicio. Es, sea cual sea tu perfil, ¿vale? Y aquí os podéis sentir todos identificados. Podéis hacer o puedes hacer cosas guapas con los bloques, ¿vale? La elección de Mojiz podría haber sido un poco más curra, os he dicho que he llegado justito aquí, ¿vale? No me juzgáis. Y ya como nota final, para que veáis testimonios, testimonios de la gente tan maja que me había mandado su foto el lunes por la mañana, les dije, oye, ¿me podéis mandar una foto nueva de cómo es vuestra vida los lunes por la mañana después de haber incluido los bloques en vuestra vida? ¿Están ahí tan felices? Y en general, si tuviera que resumirlo, en una frase es Nahuay con los bloques vivo, todavía énfasis en todavía, porque ya vivían bien, todavía mejor, ¿vale? Entonces yo no sé si después de esto esta prueba irrefutable no os sumáis a investigar un poco sobre bloques, yo ya no sé qué más hacer, ¿vale? Entonces, bueno, recursos, os dejo un montón de recursos, porque hay un montón de recursos. Voy a destacar uno aquí que no pensaba hacerlo, pero lo voy a hacer porque ese primero que veis, fue uno de los que cambió la vida a Nora Ferreiros, que ha dado una charla esta mañana, en el que comentaba charlas que han cambiado mi vida, y la primera que está ahí es una de ellas. La es un blog, o sea, es un post y es una charla, y está muy bien, porque es todo lo que ha ido rápido, a nivel de usuario, de lo que se puede hacer con bloques, extendido, ¿vale? O sea, realmente si sois usuarios y casi os he convencido con estos ejemplos y demás, os invito mucho a mirarlo. También hay recursos, un montón de recursos para developers, y ya termino diciendo que, bueno, soy un desarrollador developers motivado de la vida, y espero haberos motivado un poquito también a vosotros. Y luego, pues, hago cosas, entre otras cosas, tengo mi blog donde escribía tanto entradas como newsletters en Nevada.com, donde sí que escribo habitualmente en codigos genesis.com, que me sirvió un poco para fliparme con estas cosas que os he mostraba ahora. Y también comparto como me flipo en general en la vida con Esther en el podcast de frlandepunto.com. Y con ella también creamos temas y plug-ins en osomfres.com. Y con esto, muchas gracias a todos y todas. Uy, muchas gracias. Enhorabuena. Y muchas gracias por la charla. Me gustaría saber tu opinión. Has mostrado el directorio de patrones de bloques. Tu opinión, desde el punto de vista, o sea, teniendo en cuenta que los patrones de bloques que están compartidos en el directorio tienen incorporado sus propios estilos, la utilidad real práctica del directorio de bloques, desde tu punto de vista. ¿Cuál es tu opinión? Es una muy buena pregunta. No, parece que lo hemos preparado. No, no lo hemos preparado. Hostia, voy diciendo cosas. Me estoy metiendo en jardinesión solo. Todavía tenemos que negociar. ¿Cuánto me vas a pagar por esto? Claro que no hemos hablado antes. Es muy buena pregunta porque creo que una de las cosas que me gustaría que sucedan, no creo que suceda para las 6.2, que es la siguiente gran release de WordPress, pero sí que ayudaría mucho a este tipo de cosas. Y al cambio de temas, incluso que plugins utilicen la paleta de los temas y demás, sería que hubiera una nomenclatura universal de los colores para que tú utilices primary y cuando es primary es primary. Y ya está, porque ahora, en general, la mayoría de gente que está creando bloques de temas, que es lo que utilizan mucho, tienen que definirlos en el JJison y demás, están promoviendo que haya un estándar, pero no lo hay todavía. Y efectivamente, el problema que te puedes encontrar es uno o que esté hardcodeado, que entonces lo cambias desde el editor, en ese caso no es muy grave, pero lo ideal sería que viniera con tu primary color, tu secondary color, tertiary y, bueno, lo que se proponga. Rich Stabber, en su momento, hizo un post hace un año y medio, así diciendo, hey, chicos, vamos hacia este camino. ¿Qué tal si nos ponemos de acuerdo y hacemos un estándar? No se ha dado todavía. Yo, como soy optimista en naturalidad, espero que se dé y creo que será más valioso todavía. Creo que sigue siendo valioso porque tú te lo copias, te lo pegas y lo que no cuadre, como ahora lo puedes cambiar a nivel de editor, no te tienes que ir ni a la hoja de estilos, ni no a ccesa adicional. El usuario puede ir y si el desarrollador del tema o el desarrollador de confianza le ha dejado la paleta ahí a mano, puede cambiar fácil, ¿no? Pero sería un mejor si hubiera un estándar de colores. Muy buena pregunta, insisto, no estaba preparado. Muy buenas, Naguay. Enhorabuena por la charla. Yo tengo dos preguntas, una rápida y una no tanto. La primera es posible que estemos ante el nacimiento de Naguay Senphil. ¿Qué le responda el resto de la gente? Pero gracias, me lo voy a tomar a mi. No sé si ya está incorporado en el Coro de Word, pero se va a venir en las 6.2. Y es que mediante una URL nos va a dar una previsualización de todos los bloques que tenemos disponibles y las variaciones y demás para que nos hagamos una idea. Por ejemplo, se acabamos de instalar un tema nuevo, lo que sea, de saber qué posibilidad es esa. De combinaciones de bloques, etcétera, etcétera. Sí, muy buena pregunta también. Aquí hay dos cosas, una que ya está hecha y es que en el directorio de bloques, si filtras por... Creo que ahora son blocsims, porque se han ido cambiando de nombre. Antes era Fullsite Editing Sims. Bueno, los temas de bloques te permiten ver, si tienen variaciones, estilos de colores distintos, los puedes previsualizar desde el vídeo. Eso es una forma, pero es limitada. Básicamente, ves las páginas si han hecho un modo oscuro, ves cómo queda el modo oscuro y tal, creo que está muy bien a la hora de elegir el tema, pero lo que viene, que creo que sí que va a entrar en las 6.2, es lo que llaman Book Style, que es un libro de estilos. Y esto creo que va a ser súper guapo, porque básicamente es lo que tú propones. Y es que haya un sitio donde tú puedas ver cómo quedan los estilos de todos los bloques, básicamente ahora lo que antes hacía un plugin de Rich Stubborn, que creo que era Block Unit Test, básicamente te saca todos los bloques que hay y te aplica en real time las distintas variaciones de estilos. Y esto va a ser muy potente. Y también va a ayudar a homogenizarlo. Incluso si tú eres un creador de plugin, puedes poner el tuyo y ver a dónde tienes que ir. Como todavía no están estandarizados los colores, igual tienes que corregir alguna cosa para que se muestre los estilos de los bloques. Pero sí, yo creo que esta es de las mejoras más chulas que a priori llegará en la versión 6.2. Yo no voy a hablar más.