 Bueno, pues esta es la última ponencia en esta sala y vamos a dar paso a Fernando Gancia Rebolledo que en 2013 intentó crear un CMS para la empresa en la que trabajaba. Fue por entonces cuando descubrió WordPress, entonces cuando vio que mejor abandonaba el proyecto y se abrazaba esta nueva religión, bienvenido. Vale, desde el 17 trabaja como autónomo realizando desarrollos a medida, sus clientes son agencias profesionales y le da también algo de comercio. Su primera Meetup y Workout fue en 2016, descubrió los majos que somos y así que decidió montar una Meetup propia en Torre la Vega y es un miembro muy activo en la comunidad. Así que sin más preámbulos ni bulos, os dejo a Fernando creando bloques de contenido query loop block personalizado. Sí, ahora. Muchas gracias a toda la organización por haberse mencionado a charla, a vosotros que habéis venido porque son horas que ya cuesta mucho y encima tenemos otro crack en la otra sala. Pero bueno, vais a ver que soy los elegidos por estar aquí. Vale. Vamos a ver, espero que no lo hayáis visto porque entonces lo vais a flipar más. Vamos a ver cómo personalizar, en este caso, el query block haciendo una cosa que se llama variaciones de bloques. Primero os voy a explicar qué son las variaciones, vamos a ver algún ejemplo, luego cómo hacer esto con un perdonad que se llama bloque de contenido. Yo lo conocemos todo como query block, ¿vale? Es el mismo. Vale, entonces, bueno, ya me han presentado, soy Fernando García Rolledo, soy desarrollador web, backend por gusto y frontend por obligación, básicamente. Pero bueno, donde yo siempre me encontré más a gusto es en lo que no se ve, digamos, ¿vale? Soy co-organizador de la mitad de Torla Vega, que está en Cantabria. Os invito a todos a visitar esa bella tierra y cada 15 días con Adrián Cobo, un desarrollador web, también hacemos terapia y lo grabamos para hacer un podcast, que se llama El Arroyo de, que decimos que es el primer podcast rural de desarrollo web. Y también colaboro con la empresa WP Hercules, que es un hosting orientado a profesionales e agencias de WordPress, ¿vale? Podéis entrar ahí en su web y echar un vistazo o preguntarme lo que quiera eso. Bueno, mis redes, bueno, mis red, básicamente solo utilizó Twitter y muy poco, así que bueno, pero por ahí me vais a encontrar. Y aprovecho para deciros si queréis, luego después voy a compartir todo el código que vamos a ver, lo voy a compartir, ¿vale? Un repositorio de Jihad lo pondré en Twitter, junto con la charla, para que luego tengáis a medio, ¿vale? Porque sí, vamos a ver código. Básicamente esto es código, pero bueno, vais a ver que es una cosa muy sencilla. La 7 de la tarde igual no es el mejor momento, pero bueno, vamos a intentarlo. Venga, variaciones de bloques. Lo que os comentaba antes, vamos a ver en este primer bloque de la charla las variaciones, enseñaros un par de ejemplos. Si no lo conocéis, espero que tengáis la misma sensación que cuando yo lo utilicé la primera vez, decir, ¡qué guapo! A ver si es verdad. Una variación, lo que hacemos es definir bloques. Bueno, no he dicho nada, pero supongo que todos sabéis que hablo de bloques, bloques partiendo de otros bloques. A mí me parece que, sin ser lo mismo, es hablando de muchas distancias, es como lo que hacemos en código es tender una clase, ¿vale? Cada variación se va a diferenciar de los demás por unos atributos. Vamos a ver que, y en la documentación, vais a tener los atributos de cada uno de los bloques, tienen los atributos diferentes. Luego esto también, hay otra cosa que se llama el estilo de los bloques, podemos modificar el estilo, no es lo mismo, ¿vale? Con el bloque está él, lo que hacemos es modificarse ese, básicamente. Aquí vamos a modificar, además de poder darle clases, etcétera, vamos a modificar sus atributos. Bien, me voy a poner aquí si nos importa, aquí se coge, bien, ¿no? Bien, ¿cómo registramos una variación? Esto, básicamente lo que tenemos que hacer es encolar con PHP, un archivo JavaScript y luego hacer el código en JavaScript. Muy poco, JavaScript muy poco, yo tampoco estoy a gusto con mucho JavaScript, así que si yo lo he hecho todos lo podemos hacer, ¿vale? Bien, por eso digo que JavaScript algo muy básico. Y luego encolar con esta acción que es en que block editor asset, simplemente es este código, hacemos la acción, encolamos y le decimos que nos ponga nuestro archivo JS después del WP blocks, ¿vale? Porque lo que vamos a hacer es una variación de eso. Y luego en el archivo JavaScript, simplemente llamamos al register block variation de w.blocks y ahí es donde hacemos la variación, sin más, ¿vale? Esto sería lo básico. Por ejemplo, vamos a hacer una variación del bloque de párrafo, el típico bloque de párrafo, normal y corriente. Vamos a hacer una variación de ese bloque y vamos a hacer que sea un bloque con un texto grande y alinear a la derecha, ¿vale? Simplemente le decimos la función que hemos dicho, que vamos a variar, aquí es lo que hay que decirle, qué bloque vamos a variar del core, el bloque de párrafo. Aquí una cosa, no sólo podemos variar bloques del core, si instalamos los típicos plugins que traen sus bloques, también podemos hacer variaciones de ellos, ¿vale? Y le damos una serie de propiedades, nombre, título, descripción y lo que os he comentado en los atributos. Un placeholder le he puesto en este caso, alineación a la derecha, una clase que va a ser párrafo derecha y un font size, el grande, ¿vale? Simplemente esto y una propiedad importante e interesante en algunos casos es esta que es is default. Si yo pongo is default true cuando el cliente o el usuario vaya a añadir bloque, no va a haber el bloque de párrafo, va a haber sólo mi bloque. Esto puede ser interesante, hombre, esta es una tontería, no un bloque de párrafo a la derecha, pero si tenemos usuarios, a ver cómo lo digo que no suene mal, de un nivel tecnológico, pues justo, quizás le va a volver loco si tiene dos párrafos ahí. Dice, bueno, vale, pues para que no te preocupes te va a haber sólo el tuyo y todos tus párrafos van a ser así, ¿vale? Entonces, esto es lo que vamos a ver. A ver, vamos poco a poco, es que esto es un gif, claro. Le damos añadir y veis que sólo, si os fijáis, sólo tengo bloque de párrafo, ya no tengo el párrafo normal, sólo tengo el bloque. El párrafo derecha, perdón, bloque de párrafo en el párrafo. Y cuando le añado me pone el placeholder que le había dicho y al escribirme lo alineé a la derecha y con el tamaño grande. Y así el usuario no tiene que añadir porofo. Luego venir aquí a la derecha, cambiar el tamaño, no, ya se lo damos hecho. Y han sido diez líneas de código, ya habéis visto, ¿vale? Otro ejemplo, un bloque típico, un bloque de equipo, ¿vale? Bloque de equipo que ya sé que hay muchos plugins que ya traen el bloque y tal, pero vamos a hacerle nosotros uno especial para nuestras necesidades. ¿Y cómo lo hacemos? Partimos de un bloque de columnas, del bloque de columnas y vamos a modificar ese contenido de las columnas y le vamos a poner una imagen o un titular y un párrafo, pues muy sencillo. La variación, este caso del core columns, o sea, del bloque de columnas. Vale, le damos un nombre, un título y esta es otra propiedad muy interesante que es inner blocks, es decir, dentro de esa variación voy a meter otros bloques. ¿Qué bloques voy a meter? Uno de columna, core column y dentro de él, imagen, titular y párrafo. Y luego le doy una propiedad. La imagen, le digo en la URL, le me la coger de playsholder.com y me lo metes ahí. Un playsholder en el heading y un playsholder en el párrafo. Eso lo copio, lo pego otras dos veces y entonces, esto lo que me genera es tres columnas y en cada una de ellas este contenido que le he dicho ya aquí. Es decir, fijaos, aquí una cosa, le he puesto el título equipo, lo veis? Entonces tú en el buscador de bloques, cuando vas a introducir un bloque, tú ahí, escribes equipo y ya te lo muestro, o sea, eso funciona igual que al hacer un bloque. Escribes equipo y al añadir, ya nos añade las tres columnas con los playsholder que le hemos dicho. Minima situación, al usuario se lo damos hecho. No tiene que coger, meter tres columnas, luego meter la imagen, luego meter el título, va a tardar mucho. Si se lo damos hecho, ya lo tiene ahí, solamente modifica las imágenes y ya está. Vale, esto ya vale el agorcan, esto ya vale los 25 euros. Bien, os dejo aquí, lo repito, luego os lo voy a compartir, pero os dejo la documentación de las variaciones. Es muy completa y os recomiendo que la hecheis un vistazo, ¿de acuerdo? Vale, entonces vamos al tema, variaciones del query block. O sea, vamos a hacer lo mismo, prácticamente de lo que hemos hecho, solo que con el bloque de query block. Más algunos añadidos, como es el fin de la charla, que es modificar la query que nos da por defecto y dársela a echar cliente. Vale, al cliente usuario. Esto, para ponernos en contexto, vamos a imaginar que tengo un post type de coches. Muy original. Y tengo ahí una serie de post de coches, ¿vale? Entonces, el usuario lo que va a querer o lo que nos ha dicho que quiere es... Bueno, perdona por el diseño, tampoco soy diseñador. El usuario lo que nos ha dicho es, pues mira, yo quiero que se vean los coches así en tres columnas y que ocupe toda la pantalla, ¿vale? Y quiero que me lo desecho porque, claro, yo no sé hacer. No sé cómo es eso del query block y de qué me estás hablando. Vale, de acuerdo. Entonces, analizamos esto un poco y dices, bueno, pues esto es el título y esto es la imagen destacada. Vamos a hacer un query block de título y imagen destacada. Vale, pues ya está. Aquí está. Os ha gustado hacerlo, ¿no? Vale, simplemente, ahora vamos viendo un poquito en el código, ¿vale? Pero esto es simplemente para que veáis cómo esto lo hacemos en, ¿qué? 20, 30 líneas y está hecho. No hay que ir con RIAQ y todo eso, ¿vale? Por eso digo que sí, es Javascript, pero al final es Javascript sencillo. ¿Qué he hecho aquí? Bueno, he declarado una constante porque la voy a utilizar luego y lo mismo registro la variación del bloque, en este caso, del query block. Le pongo un nombre, título, descripción y un icono. Esto de los iconos, no sé si conocéis, dentro de developer.warps.rg hay una sección de recursos que son los dash icons, dash icons, que son esos iconos cuando vais al menú de Warpers de la izquierda, del back, esos iconos que ahí están sacados de ahí, ¿vale? Es una librería que carga Warps. Entonces, hay un icono de un coche y me dice, tú pon un coche, pues ya está, aquí tengo el coche. Luego vais a ver para qué utilizo ese icono, ¿vale? Esto, este código es porque yo le tengo que decir de alguna forma al editor que ese bloque que está ahí es una variación mía. O sea, si yo aumento este código de aquí, yo voy a añadir el bloque mío hecho, pero si voy al árbol de bloques, sabéis, hay un botoncito que nos muestra el árbol de bloques. Me va a parecer que aquello es un query block, que no es mi bloque, sino va a parecer eso. Con eso, evitamos eso y entonces el editor reconoce que esto es una variación, pero es otro bloque, es nuestro bloque. Y esto es lo que os decía, si le vamos aquí, aquí nos aparece el iconito que le hemos definido y el gridcoches, ¿vale? Y luego esto que ahora vamos a ver cómo lo hacemos. Atributos, bueno, esto es lo que es un poco lo que hemos visto antes de atributos, aquí tiene lo diferente, es que aquí en el query es donde nosotros vamos a modificar esa query, ¿vale? La podemos modificar desde aquí, le podemos dar un autor, le podemos lo que queramos. En la documentación, cuando la echéis un vistazo, también vamos a poder modificar la query desde otros sitios, desde unos filtros que hay, lo echáis un vistazo en la documentación, pero esto es lo más sencillo, es decir, el post type va a ser coches, que es mi CPT, o sea, el CPT que habíamos creado, sin más. Y le decimos alineación full para que sea el ancho completo y en layout un flex a tres columnas. Y ya está, ¿vale? Y luego esto también es muy interesante. Cuando insertáis un bloque a la derecha tenemos las propiedades de ese bloque, ¿sabéis? En el caso del query block, cuando metéis uno normal siempre vais a poder cambiar el tipo de post, hay un desplegable tipo de post, vamos a poder filtrar por taxonomías, vamos a poder ordenar de una forma o otra aquello que se está mostrando, que es precisamente lo que en nuestro caso queremos evitar al usuario para que no entre en colaso y decirle, toma esto y ya está. Entonces, aquí le decimos de eso que hay ahí, que dejamos visible. En mi caso he puesto orden, es decir, sólo puede ordenar, va a tener desplegable de ordenar, ya está. Aquí tenemos, le podemos... Esto es un array, simplemente separado por comas le podemos añadir de esto lo que queramos, ¿vale? Entonces, en mi caso, cuando meta el bloque a la derecha solamente va a tener desplegable de ordenar y nada más. Y luego el inner blocks, como veíamos antes con las columnas, pues esto es muy similar. Le meto un bloque que se llama post template, es decir, la plantilla de cómo se va a mostrar ese post dentro del loop, ¿vale? Y ese post template simplemente va a tener post title, imagen destacada, nada más. Y luego le metemos esto, que es la paginación y este otro bloque que es cuando no hay resultados que tiene que poner. Podemos aquí añadir lo que nos dé la gana, el extra de lo que queráis, lo que sea, ¿vale? Entonces, quedaría de esta forma. Si añadimos, le damos al árbol de los bloques, vemos aquí que antes hemos visto cómo meter el grid de coches, tenemos la plantilla de entrada, que es esto de aquí y dentro de ella tenemos el título de la entrada, la imagen destacada de la entrada, la paginación y el sin resultados. Y esto el usuario no ha tenido que hacer nada. Quiere meter un grid de sus coches en una página. Pues mira, ya está, ¿vale? Si le vamos a dejar ordenar por si, quiero ordenar por algún criterio. Aquí tenéis la documentación de esto que estamos hablando, ¿vale? Es un tutorial de cómo extender el query block. Y también os dejo aquí unos enlaces interesantes, ¿vale? Pues, bueno, son ejemplos o que podéis ver el tema este de variaciones, ¿vale? Y, fin, nada más. Muchas gracias. Bueno, tenéis preguntas por aquí, ¿sí? Gracias, Fernando, por ducharla. A ti por venir. Para el tema de variaciones, ¿cómo añadirías más estilos a esos bloques que estás modificando? Le podéis poner clases. A través de clases y luego tendrías que anidarle una hoja de estilos. ¿Sí? No sé. Ya no la he hecho. Sí, sí, bueno, te lo añades que haces y luego le le das en la hoja de estilos lo que sea y se acabó, ¿no? Oye, una. Tengo también. Tengo dudas, aunque tú no te lo creas. Se le pueden añadir campos personalizados, imagino, o son los campos estándares. Sí, tú puedes filtrar por campos personalizados. Pero no, cuando tú añades en el... cuando lo construyes, que aquí has puesto la imagen y el título, si tenemos un CPT y tenemos con la CFE, por ejemplo, unos campos personalizados para ese CPT. Ahí, de todos los bloques que tengas, puedes añadir lo que quieras. Y si tienes un bloque que te meta de los campos personalizados, le pones ahí también. Más preguntas. Hola, gracias. ¿Se puede añadir JavaScript? Javascript. Sí. Personalizado solo para ese bloque. Sí, por ejemplo, yo sólo quiero que el código de JavaScript, perdón, se cargue en la página cuando ese bloque lo están utilizando. Si el bloque no lo utilizan, no quiero ni el Javascript ni el CSS. ¿Se puede hacer así o no? No estoy seguro, pero te diría que sí. Que algo hay al respecto en la documentación. Pero no te lo puedo asegurar. No sé si, aquí hay mucho crack también de bloque. Pero no sé si... Pero yo te diría que sí. Gracias. A ver, muchas gracias por la ya la Fernando. Y la pregunta va por... utilizando las variaciones de los bloques, como han mostrado, registrándolo con la API. Aparte de realizar estas variaciones con la API de Gutenberg, ha probado combinarlo, combinar el registro de variaciones por ejemplo, el bloque de render para hacer frones totalmente distintos. No lo he probado. Pero yo creo que funcionaría. Claro, he oído por si ya lo has probado. Y en nivel de rendimiento sí se notaría. Yo el rey hace esto lo he hecho. Que no quiere complicarse la vida con configuración del bloque, hacerse lo que ya he hecho. Por hacer variaciones de bloques totalmente disruptivas, sin tener que desarrollar con RIA, porque así podemos con un grupo de frones. Yo creo que perfectamente se puede hacer. Con lo cual, igual no hay que saber tanto RIA. Claro, claro. Vale. Hay más. Muchas gracias. Creo que nos bajamos ya. Nos vamos a despedida.