 Muchas gracias, Elia. Bueno, me da mucha alegría que haya tanta gente que haya venido a esta charla que es de desarrollo meramente. Vamos a ver algo de código. Pero sobre todo me hace ilusión por dos cosas. Primero, porque es la primera vez que se explica, creo, en una Workamp, una manera mucho más simple de crear bloques de Gutenberg. Ahora vamos a ver por qué, porque hacerlo implica un montón de nuevas tecnologías y que no todos los empleados, no solamente freelance, desarrolladores en general, no todos tenemos el tiempo de aprendernos todo ese kit que hay que saber para poder desarrollar bloques personalizados de Gutenberg. Y el segundo motivo es porque hoy es mi cumpleaños y para mí devolver a la comunidad de WordPress todo lo que me ha dado no me hace más mayor ilusión que estar aquí y compartir con todos vosotros estos conocimientos que vengo aprendiendo de hace ya un tiempo. Así que, sin más dilación, vamos a comenzar con la charla. Antes, vamos a hacer un pequeño, a ver si esto funciona o no funciona. Si no le pongo el USB, no va a funcionar nunca. Guardémonos los minutos para el final. No sé de cosa que nos quedemos sin tiempo. Mi nombre es Mauricio Gélves. Soy desarrollador freelance de WordPress. Hace tres años que vengo sobreviviendo en España como freelance. Hasta ahora todo bien. Soy noma de digital. Eso significa que viajo por el mundo a la vez que desarrollo sitios webs para distintas empresas de España y alrededor del mundo. Y tengo cuenta en YouTube, en Instagram, en Twitter. Me pueden seguir como Mao Gélves. Y me van a encontrar muy fácil. Primero voy a hacer un pequeño disclaimer, ya que he tenido problemas hace dos años en la Workup de Madrid. Porque a mí me gusta mucho ACF. ACF tiene una versión gratuita y una versión de pago, ¿vale? Yo no recibo ningún dinero, nada, ningún pago, ninguna comisión de ACF. Simplemente explico y me motiva a dar estas charlas, porque considero que esta herramienta ayuda muchísimo a ahorrar muchísimo tiempo a los desarrolladores. Y para mí es un recurso muy valioso, ¿vale? Así que no tengo ninguna relación con la empresa. No recibo nada y no pasa absolutamente nada. Vamos a hablar un poco del tiempo del freelance. Hay muchísimos tipos de empleados. No solamente freelance en general. Están las personas que trabajan meramente en una oficina. Están los freelance que trabajan meramente con una empresa, como pueden ser las empresas que están ahora distribuidas por todo el mundo. Existen los freelance que trabajan con otros freelance y que van compartiendo distintas tareas. Y después está Mauricio Helves, que se encarga un poco de todo, ¿vale? No sé si conocéis a este acrobata conocido mundialmente. ¿Lo conocéis? Se llama Christopher Hendricks. ¿Lo conocéis? No, yo tampoco lo conozco y me mente el nombre, ¿vale? Pero vamos a suponer que es Mauricio Helves, ¿vale? Y los platos son los presupuestos, el desarrollo del proyecto, el project management, los mantenimientos y las work-ups, obviamente, porque esta charla hay que prepararla. Yo tengo un montón de horas. Entonces el ser freelance, como yo lo hago, implica tener todos estos platos de movimiento. Y cada uno de estos platos son un montón de horas que me quitan de mi vida. Como ven, ahí tenemos un palo vacío, que sería el que ocuparía nuestro querido amigo Gutenberg, y todas las cosas que tendría que aprender para poder mantener ese plato en movimiento. Para mí, Gutenberg me dio miedo, no por una tecnología nueva, sino por el hecho de tener que agregar algo más a mi tiempo de desarrollo como freelance. Pero bueno, no trabajo solo, en cierta forma. Trabajo dentro de la comunidad de WordPress, ¿vale? Donde hay cientos, sino miles de desarrolladores, no solamente desarrolladores. Alrededor del mundo, creando plugins, haciendo que el core sea mucho más seguro. Y que, en cierta forma, la hora de trabajo de esta gente, a mí me ayuda a que yo pueda trabajar por mi cuenta, solo, para distintas empresas. Es gracias a ellos, es gracias a vosotros, a la comunidad, que yo puedo desarrollar el trabajo que quiero. Porque podría trabajar en una empresa, pero no es lo que quiero. Quiero ser freelance. Entonces, como he dicho, hay gente que se encarga de la seguridad, que está trabajando para mí y para vosotros, de que WordPress sea seguro día a día. Hay gente que desarrolla plugins, desde los más simples hasta los más complejos. Y hoy vamos a hablar de uno de esos plugins, que es ACF, Advanced Custom Fields o Campos Personalizados Avanzados. Es la primera vez que escucháis de ACF, de este plugin, ¿no? Todos los que están aquí conocen ACF, ¿sí? Vale, quien no conozca ACF, tenemos esta charla, que fue la que di en la Workup de Madrid, copiando ese código, lo veréis, ¿vale? Es una charla introductoria. Y si no, ponéis ACF en YouTube o donde sea, o en WordPress TV, en WordPress TV. Y hay muchísima información como para comenzar. Pero, claro, lo que he dicho en un principio, ahora tenemos a Gutenberg, ¿no? Y que se nos viene con un montón de cargas, un montón de tecnologías. Aquí, Vidaña, que siempre explica mucho de Gutenberg y ha estado en las primeras etapas, nos comentaba sobre que tenemos que saber Webpack, tenemos que saber Havascript puntualmente, ECMAScript 6. Y montar todo esto, claro, son tecnologías nuevas que no estábamos preparados, o al menos yo no estaba preparado. Y son tecnologías un poco más duras a la que no estábamos acostumbrados los desarrolladores de WordPress. Y esto para mí era un riesgo muy grande. Pero bueno, acepto a Gutenberg porque los principios que tiene este gran cambio en WordPress son muy buenos. Vale, primeramente era poner un poco de control a la cantidad de basura que se está guardando en la base de datos a introducir un backend más visual para que la gente lo pueda ver un poquito mejor, ¿no? Detrás que no sea ahí tanta magia. Y también se agrega a nivel de datos una nueva estructura, no estamos hablando ya de bloques, ¿vale? Pero ahora todos conocemos, todos hemos escuchado la palabra bloques, pero realidad con ACF y con otras tecnologías, pero vamos a quedarnos con la ACF, esto ya existía. Vale, era algo que se llamaba los content layouts, ¿vale? Con content layouts nosotros podíamos crear aquí distintos, vamos a llamar bloques, y que cada uno tenía su conjunto de campos. La única diferencia es que no estaba en forma visual, ¿vale? Esto ya existía desde hace muchísimo tiempo. La idea, ¿no? De vamos a hacer pequeños bloques específicos y que a su vez el usuario podía ir jugando en la disposición que querían esos bloques. Ha pasado el tiempo desde que se anunció Gutenberg y todas estas tecnologías y yo ya estaba deseando de que la gente de ACF hiciera algo respecto para poder solucionar un poco este problema que tenía, ¿no? De todo lo que me tenía que poner a trabajar extra, yo de estudiar y obviamente el desarrollo en sí mismo me iba a llevar muchísimas más horas. Así que estaba reazando profundamente para que el equipo de Elliot Conn donde de Australia hiciera una solución. Encima se lo tenían muy callados, supongo que por una cuestión de negocios para que los competidores no tuvieran algunas ideas. Entonces hasta ese entonces yo seguí trabajando con el Classic Editor, en realidad lo hacía por código, pero ese es un plugin que desactiva Gutenberg de raíz y con la ACF de toda la vida que trabajaba los layouts. ¿Cómo lo venía haciendo? Pero un buen día, el 14 de octubre del año pasado me encuentro con este tweet, que ACF introduce los bloques de Gutenberg, ¿vale? Me alegría, no pudo ser mayor, ¿vale? Le puse mi respuesta. Muchísimas, muchísimas gracias. Y este era el ejemplo que tenía en ese blog. Vamos a verlo rápidamente. Ahí va de alta un bloque, el bloque de testimonio. Ahí vemos que se genera un conjunto de campos. Ese es Elliot Conn, el dueño de la empresa. Ahí escribes un nombre, escribes su testimonio. Va a poner un color de fondo al bloque, un color de texto. Y ahora va a hacer click aquí arriba en hacer switch para previsualizar. Y se transforma automáticamente en el HTML y CSS que tiene por detrás, ¿vale? La única diferencia es que no puede editar directamente en el diseño final. Es la única diferencia que tiene con el Gutenberg clásico. Pero sí nos muestra todos los campos y a su vez ya vemos que cuando hacen switch, todos los campos se vienen al sidebar, ¿vale? Y aquí sí ya puede interactuar, pero no puede interactuar directamente con el bloque. Pero bueno, es súper funcional y sirve. Ahora sí, vamos al lío. Vamos a ver un poquito más de código, cómo funciona esto por detrás y para que lo vean lo simple, lo fácil que es y la cantidad de horas que podemos evitarnos. Vamos a suponernos Juanca y Fernando. Juanca está por ahí, Fernando, ¿no? Bueno, ahí están. Los he utilizado. Vamos a suponer que una empresa nos pide. Una empresa o la organización de la Workup nos solicita que en alguna parte del diseño de la página web tengamos este pequeño bloque donde ellos puedan dar de alta charlas, ¿vale? Las que ellos quieran y que en el frontend pues se pinta de esta manera, ¿no? En el cual, bueno, aquí podemos ver que tenemos un campo que es imagen, obviamente tenemos un campo título, un campo de descripción, el nombre del ponente y si tiene Twitter, pues ponemos el Twitter. Y a su vez tiene, como todo ese bloque, un título de cabecera. ¿Cuáles son los pasos que tenemos que seguir? ¿Vale? Primeramente, lo que tenemos que hacer, al igual que como se hace con los bloques nativos de Gutenberg, es registrarlo. Lo siento si no se ve muy bien. Seguro que en el vídeo lo vamos a tener perfecto, ¿vale? Siento el contraste. Lo primero que tenemos que hacer es añadir la acción ACF init, una función cualquiera, que la tenemos aquí de momento está vacía, pero registramos ahí el bloque. La misma función nativa de Gutenberg, es lo único que vamos a tener que tocar de Gutenberg nativo, ¿sí? Donde ponemos el nombre del bloque, le ponemos un título, la descripción. Muy importante, ¿qué función vamos a llamar para pintar el HTML? Categoría, que ahora vamos a ver qué es lo que hace esta línea de código. Le ponemos un icono a ese bloque. Y lo de los keywords es para cuando ponemos la barra, que nos aparece la caja de texto que podemos escribir, testimonian y automáticamente se van filtrando los bloques de Gutenberg que podemos utilizar. Bien, primer punto, hasta aquí sencillo. Esto está muy bien documentado. No hay ningún problema. Segundo paso, crear los campos personalizados con ACF, tal como lo hemos hecho al día de hoy. Para resumir, lo tengo aquí, ¿vale? Es un grupo de campos. Solamente tengo el título, que era de la cabecera, pero que nos pidieron aquí en la Workamp. Y obviamente tenemos un campo que se va a repetir un montón de veces con todas las charlas. A su vez aquí dentro de este repetidor, está el otro conjunto de campos de cada charla. La imagen, el título de la charla, el ponente y su descripción. Pero el gran cambio que ha implementado ACF, que todavía está en versión beta, por lo cierto, no está todavía lanzado al público, es este bloque de aquí abajo. Es decir, ¿dónde vamos a poner este conjunto de campos? Vale, por si no lo ven bien, aquí lo tengo un poco, mostrar este grupo de campos solamente si el bloque es del tipo TOX, charlas, ¿sí? Este es el gran cambio de ACF. Han incluido este nuevo espacio donde asignar un conjunto de campos personalizados. Antes teníamos páginas, post taxonomías, usuarios, bueno, hay muchísimos. Pero este es totalmente nuevo. Esto es lo que genera una vez que ya tengamos todos los campos, que el vaquén lo veamos de esta manera. Como lo hemos visto toda la vida con ACF. Solo que ahora lo vemos como un bloque de Gutenberg, donde podemos ir dando de alta. Bueno, aquí tenemos dos filas, ¿no? Cada uno con su bloque de campos. Ya está ahí, vamos perfecto. Siguiente campo, este es opcional, ¿vale? Esto es para desarrolladores que trabajen con Git, ¿vale? Que quieran tener toda esta estructura de datos en el código fuente ahí bien registrado. Lo que vamos a hacer es exportar estos campos a JSON y PHP para que quede ahí bien registrado y a su vez poder compartirlo con otros desarrolladores si trabajamos en equipo. Eso se hace yendo a, vamos a ver la animación, a herramientas de ACF. Ahí tenemos nuestro campo que hemos creado. Con el export file no va a exportar el JSON, que lo incluimos en nuestro proyecto. Y por otra parte tenemos el generar el código PHP que nos genera todo ese conjunto de campos que lo copiamos, lo pegamos en nuestro proyecto. Y después tranquilamente podemos borrar ese campo, ¿vale? Esto genera dos cosas, dos beneficios. Uno, que tengamos el código controlado, lo podamos compartir con otros desarrolladores. Y segundo, menos consulta la base de datos para recuperar los campos que necesitamos, ¿vale? Lo consume directamente del código. Siguiente, en realidad estos dos están un poco unidos, ¿no? Aquí tendría que ir en paralelo. Vamos a crear el HTML y el CSS para pintar ese conjunto de campos. No he puesto obviamente todo el HTML que vamos a pintar en ese bloque, pero si he hecho un pequeño resumen, que tenemos aquí un simple div en el que está parte de la información de la charla, tenemos el título de la charla y la descripción, sigue en un h3 y en un párrafo. Pintamos con la función propia de hf, de field, el nombre del campo y lo mismo para la descripción. ¿Vale? Obviamente el HTML es mucho más extenso, pero con este ejemplo es más que suficiente. Hay un bloque de código que es un poquito más complejo, que es el de repetidor. Obviamente no vamos a repetir. No podemos hacerlo en forma fija la cantidad de charlas que tenemos, sino que tiene que ser en forma dinámicas. Entonces, ¿cuántas filas de charlas tienes? Pues tengo 10, pues va haciendo el bucle y pintando siempre este bloque de color. No lo he incluido para no marear demasiado. Ya con este bloque HTML y con el siguiente paso que va en paralelo, en el backend lo veríamos de esta manera. Los mismos campos que hemos dado de alta y pinchando, bueno, no tengo el botón, pero que decía hacer el cambio hacia la previsualización. ¿Por qué todavía no lo veríamos? Porque lo que nos falta es encolar el CSS, ¿vale? Para que también se cargue en el administrador de WordPress, no solamente en el frontend, y que tiene un action específico, que es este de aquí. Encolar todos los assets para el editor de bloques, ¿sí? Llamamos una función y registramos un estilo, como lo hemos hecho hasta ahora en WordPress. Lo registramos y lo encolamos. Solamente lo único que cambia es la acción, que esto va a decir solamente, mete este CSS en el administrador de WordPress. Algo que se me ocurrió hoy a las 11 y 20 haciendo la revisión de la charla, uno de los problemas que yo tenía, bueno, no se ve, pero lo voy a explicar. Uno de los problemas que tenía era que cuando yo encolaba el CSS del frontend en el backend, me cambiaba automáticamente toda la tipografía por defecto del backend de WordPress, ¿vale? Es algo pequeñito, pero a mí me molestaba. Y se me ocurrió revisando hoy en la mañana, la charla es que en realidad tendríamos que tener toda la declaración de tipografía, desde H1 hasta el parra, fue los listas en un CSS aparte, ¿vale? Trabajamos todo en un CSS, la estructura, y lo que es puntualmente la tipografía, lo tenemos en otros CSS y basta con no encolarlo aquí para que el administrador de Gutenberg mantenga las tipografías por defecto. No lo he probado, pero la idea está. Después lo voy a probar y lo pondré en Twitter si funciona o no funciona. Supongo que sí. Bueno, dicho esto, vamos a meter mano al código, vamos a hacer exactamente el mismo ejemplo que hemos visto, paso por paso, para que vean cómo funciona un poco más en vivo y no con tanta imágenes. Vamos a arreglar esto aquí. ¿Qué tal se ve? Bueno, ahí tenemos la plantilla de lo que es la página principal. No tiene gran historia. Tenemos el loop por defecto de WordPress. Lo único que tenemos es un H1 para mostrar el título y el contenido de lo que la persona escriba en los bloques de Gutenberg. ¿Sí? De momento esto es lo que tenemos en la página principal. Nada más. Siguiendo los pasos, lo primero que tenemos que hacer es registrar el bloque de Gutenberg. ¿Vale? Obviad un poco lo que es la estructura de mi proyecto. Esto lo podéis hacer como vosotros queráis. No hay ningún problema. Entonces, vamos a checarlo un poco. Ahí tenemos la función, la cfinit que tenemos aquí debajo. Estamos diciendo que cuando esa acción se ejecute, que llame a esta función que tenemos aquí, que es esto de acá. Esto es como los programas de televisión de cocina. Aquí tengo los ingredientes, pero yo ya lo tengo hecho y los sacan de costado, lo mismo. Porque si tengo que escribir todo esto, estaríamos 5 horas y se dormirían seguro. Vale, de esta manera ya tenemos el bloque registrado. Le damos un nombre del tipo Slack, es decir, sin espacios, sin mayúsculas, para que tenga como un código único dentro del entorno de WordPress. Un título, siempre hacerlo en forma que se pueda traducir, una descripción de qué va a ser ese título, el render callback importante, qué función vamos a llamar para coger todo ese HTML para pintar lo que vas a hacer. La categoría de la que ya hablaremos, el icono que vamos a utilizar y las palabras claves. Vamos a ver cómo funciona esto en el backend. Vamos a las páginas principales. Si aquí, por ejemplo, lo que decía, escribo la barra, obviamente lo tengo ahí porque ya lo he utilizado, pero podré escribir talks y vemos cómo se va filtrando. Y veo que de momento tenemos, ah, no sé porque lo tengo ya activo. Me habré olvidado de conectarlo. Exactamente. No habéis visto nada, no pasa nada. No tendré que haber hecho eso. Vamos de vuelta. Talk. Vale, por una parte vemos que ya tenemos que el bloque existe como tal, pero no nos está mostrando ningún campo porque todavía no lo hemos definido porque es el paso número 2 que vamos a ver ahora. Paso número 2. Vamos al plugin de ACF. Decimos que sí, que queremos irnos sin guardar los cambios porque no hay nada para hacer. Y aquí vamos a dar de alta los campos. Toda la estructura de información. Por favor, en este punto, tomaros un tiempo para definir bien la estructura de los datos que es lo que se va a guardar, ¿vale? Entonces aquí le ponemos un nombre estratégico. Vamos a ponerle Gutenberg Talks y como toda la vida. Vamos a poner el título de la sección, Section Title. Aquí también muy importante siempre poner nombres que sea fácil de reconocer. Por ejemplo, WorkCamp, Zaragoza, Gutenberg, Section Title. Texto es obligatorio. Bueno, esto lo vais a ver cuando hagáis la introducción de ACF. Hay muchísima información y el punto más importante es dónde queremos mostrar este conjunto de campos que es desarrollado aquí arriba. Aquí, como ven, la lista es muy grande, ¿vale? Por esto hace que este plugin sea tan importante. El nuevo que han agregado es este de aquí, Bloque. O sea, si tú tienes un bloque que se llama Talks o si alguien, en algún punto de Wordpress, escribiendo un artículo o escribiendo una página, quiere dar de alta un bloque que se llama Talks, pues tú le muestras estos campos, ¿vale? Ahí está la relación. Perfecto. Muéstrame la sección del título, publicamos esto. El paso opcional que habíamos hablado, si somos desarrolladores y queremos hacerlo en forma un poco más profesional de que esté en Git, tenemos que ir a herramientas. Venir aquí al campo que acabamos de crear, exportamos el fichero. Esto nos va a dar el JSON, ¿vale? Que tenemos que guardarlo lo ideal. Yo lo que siempre hago, en vez de utilizar el nombre por defecto, le pongo Gutenberg, Bloque, Section Title o lo que sea el nombre que queramos para que tenga relación con lo que tenemos el resto de los ficheros en el proyecto. Y por último, pinchando este botón de aquí, el generar PHP nos genera todo el código PHP suficiente para que hace F en vez de ir a la base de datos a buscar la estructura de los campos que hemos creado, tira directamente el fichero. Lo mismo, copiamos todo esto, que lo vamos a copiar. Y yo aquí tengo, me he creado aquí una carpeta que se llama hace F, donde tiro el JSON, ¿sí? Y aquí pondría el PHP. Ahí pondría el PHP. Perfecto. Ya estaría en el proyecto, estaría la misma estructura de información. Una vez que yo hago esto, podría directamente venir aquí y borrarlo. Esto, consejo personal, lo que yo siempre hago es dejar todos esos campos mientras lo estoy desarrollando en la papelera. No los elimino definitivamente. ¿Por qué? Porque si después me doy cuenta de que esta estructura no me conviene, tengo que hacer un pequeño cambio, lo único que hago es traerlo de la papelera, hacer las modificaciones que tengo que realizar y vuelvo a exportar todo. En el caso que el proyecto sea mucho más antiguo, que ya lo saquemos a producción y vuelva al año, tenemos el fichero JSON, ¿vale? Con el fichero JSON también podemos importarlo, nos carga a todos los campos en el vaquen, los trabajamos, volvemos a exportarlo, hacemos el commit, el push and get y solucionado. Cuarto paso, crear el HTML. No sé si vuelvo en tercero o cuarto, llame por un poco. No importa. Vamos a hacer un poco de espacio aquí. Vale, primero el HTML, ¿vale? Tenemos dicho que tenemos este nombre de la función aquí, ¿qué? Ya lo tengo aquí hecho. Aquí vamos a borrar este nombre, que era lo que no permitía que se mostrara. Y acá sí ya tengo el HTML mucho más extenso, ¿vale? Tenemos aquí el que va haciendo el bucle del repetidor, buscando todas las charlas que ha dado de alta la persona en el vaquen y la va a pintar con este HTML, ¿sí? Perfecto. Pues ya lo dejamos ahí activo. Vamos nuevamente a la home page. Crocemos los dedos para que todo salga bien. Vale, esto es porque estás tirando. A ver, ya sé por qué es. Lo soluciono rápido. Claro. Uy, ¿cuál de los dos era ahora? Vale, el de un campo este que no va. Restaurar este, herramientas, generar el PHP solamente. Había puesto solamente el campo del ejemplo que hice, y no el completo. Generar el PHP. Mientras que tenga solución fácil, no hay problema. Ahora sí lo podemos borrar. Vamos a probarlo nuevamente. Ahora sí, perfecto. Vemos que, perdón, vemos que por una parte nos pone los campos aquí en el sidebar. Lo voy a mutear así, todo subiendo. Vemos que pone los campos aquí en el sidebar y que de momento se quede un poco pequeño. Pero no pasa nada, lo podemos solucionar fácilmente, haciendo el switch hacia editar a lo que es el contenedor. Entonces, nos trae todos esos campos a la parte más amplia del contenido. Entonces, aquí podemos dar de alta WorkCamp, esa ragosa. Y aquí podríamos utilizar, esto es el famoso repeater de ACF, que una vez que yo pincho en una entrada, ya me muestra todos los campos específicos de una charla. Añadimos una imagen, la speaker name Mauricio Helves, lo que es de Gutenberg, la descripción y demás. Ahí vemos todos los campos específicos de una charla. Lo bueno es que con el repeater podemos aquí pinchar nuevamente y ya nos vuelve todo el mismo conjunto de campos para la siguiente charla. Le estamos dando, bien, ahí mismo a la persona que está en el vaquen para poder crear libremente todo el contenido que él quiera. Siempre y cuando nuestro HTML esté bien preparado para mostrarlo, ¿no? Voy a borrar esta página y voy a utilizar la que tengo en la papelera, que ya está con toda la información cargada. Aquí ya podemos ver lo que es el estilo, ¿vale? Toda la información. Obviamente, si pincho en el bloque y voy a la, aquí tengo todos los campos, pero como ven, es muy poco el espacio que tenemos para editarlo ahí. Eso podría ser una de las partes negativas de esta solución. Pero si pincho la forma de la previsualización, tengo aquí todos los campos, todas las filas de cada uno de los 40. Así es súper fácil de editar. Entonces, si ahora voy, claro, tengo que cambiar ahora la página principal de lectura, ¿sí? Obviamente, aquí ya está encolando lo que es el CCS, ¿vale? Lo voy a mostrar el CCS. Yo utilizo SAS puntualmente, que aquí está comentado, pero se ve que está tirando del CCS ya compilado. A todo el HTML que he generado, le digo, bueno, ese HTML también viene acompañado de estos estilos. Entonces, una vez que esto se procesa en el frontend, ya tenemos todo el diseño terminado. Así que dicho esto, eso es toda la charla. Es una forma muy simple de poder crear bloques de Gutenberg. Olvídense de los Javascripts. Olvídense de React. Olvídense de Webpack. Está muy simple. Lo que he dicho al principio, esta solución de ACF todavía está en beta. Esta es una beta muy avanzada. Se los digo porque tengo ya dos sitios web hechos trabajando en producción y no he tenido ningún problema. Inclusive, actualizando a las últimas versiones de Gutenberg, hubo un par de líos. Espero que inclusive la gente de WordPress, el mismo Madmulengue, se puso en contacto con el dueño de esta empresa para resolver esos problemas y acerque esta solución lo más accesible posible a los desarrolladores para que también esta nueva tecnología y todos los beneficios que nos traiga a Gutenberg sean beneficiosos para todos. Así que espero que les haya gustado la charla, que hayan aprendido mucho y que lo pongan en práctica muy pronto. Vamos a una pequeña ronda de preguntas ahora. Si alguien se queda con alguna duda o quiere ver código un poco más en detalle, me podéis encontrar en el hall, paradme y hacerme todas las preguntas que queráis, porque este es el momento, ¿vale? Aprovechada ahora, no solamente a mí, sino a todos los desarrolladores que estáis, que están a vuestro lado, para quitaros todas las dudas posibles. Así que, Mike. Hola, muy buenas. Antes de continuar, me gustaría que le felicitaramos a Mauricio, porque hace cumpleaños. Felicidades. Muchas gracias. Muchas gracias. La aplauso. Aplauso, sí, aplauso. Con un aplauso está bien. Con el aplauso está bien. Ya después tomamos una cerveza luego. Pero muchas gracias. A ver, antes cuando has mostrado ACF, cuando estaba seditando, había un icono al lado de los alineamientos que lleva como un, si vuelves a la edición. Sí. Ese, el del lojito, eso. Lo que hace es el switch, el mismo botón al lado. Sí, este mismo botón. Exactamente, sí, sí. Lo que hace es hacer el cambio, trae el HTML, el trae SSS y lo muestra. Si hacemos ahí lo que hace también, la edición. Me gustan de preguntas así fáciles, me gustan. De Juanca tengo un poco más de miedo, es más cañero. Yo vengo con la pregunta del millón. ¿Cómo guarda el contenido en el mismo? Excelente pregunta. En el mismo content, o siga haciéndolo bien. Excelente pregunta. Uno de las también de los k-bats, de los puntos débiles de este plugin, es que sigue guardando todo en el content. No tiene la opción de decir, este conjunto de campos guardamelo en la tabla meta, ¿vale? Punto negativo. Muy bien, Juanca. Y otro punto importante, y tal vez el más negativo de todos, es que ¿cómo guarda la información ACF en el content? Lo guarda dentro de comentarios de HTML, tal como lo hace Gutenberg. Pero lo que está guardando es un array de ACF, ¿vale? ¿Qué significa esto? Que este contenido genera loquín, ¿vale? Vamos a ser siempre dependientes del plugin de ACF. El punto por ahí pequeño, positivo que tiene, es que si nosotros desactivamos ACF, no vamos a tener ese típico contenido feo de todos los short codes que teníamos con otras herramientas y soluciones, sino que simplemente no vamos a saber nada, porque es un comentario de HTML, ¿vale? ¿Respondido, Juanca? Me lujo. Pero excelente pregunta. No conozco otras soluciones tan de la fondo, como Metabox o Toolset. ¿No lo he probado? ¿No lo he probado? Tú dices, en vez de seleccionar Blocks y seleccionar Conmet, pues esa sería la solución ideal. No lo he probado todavía, así que te voy a preguntar cuando te encuentro en el hall. Es que mi pregunta iba por ahí, precisamente, lo que está diciendo Juanca ahora, que estaba viendo que se ha cargado, o sea, se ha cargado Gutenberg el modo de trabajar con los Metabox de ACF. No, porque eso depende del desarrollo de cada uno. Por ejemplo, en los sitios que yo tengo en producción, yo sé cuál es el contenido oro de ese sitio web, ¿vale? Yo sé dónde está la parte importante. Gutenberg y esta solución, de momento, la estoy usando para lo que es una home page o poco más. Lo donde yo sé o veo que hay una información que es sensible, que pueda ser migrada a futuro, la sigo utilizando en forma clásica. Desactivo Gutenberg para ese post type específico y sigo utilizando la estructura de información que se guarda en postmeta. Pero, en resumen, o sea, quiero decir, con Gutenberg activo no puedes utilizar metaboxes, entonces. Sí, sí puedes, sí puedes. Sí puedes, sí puedes. Es lo que estaba diciendo Juanca, que en vez de utilizarlo de esta manera, sigue teniendo los metaboxes por debajo. Debajo, Juan. Tú lo utilizas como si fuera casi un builder. Exactamente. Exactamente, porque lo piden y la gente está acostumbrada no tanto al arrastrar, con este no puede arrastrar demasiado, se puede arrastrar los bloques de exposición, pero no está todavía muy, muy fino. Pero si le das al menos de que la home page, al menos, la vea como la va a ver. Y el resto de lo que es contenido un poco más, más sensible, pues ya, mira, no, ahí no. Ahí no vamos a meter Gutenberg. Y por último, he visto que cuando, que aquí has dicho en el ejemplo, muéstrame estos campos si el bloque es talks. Sí. No se puede añadir a los bloques por defecto de Gutenberg. Es que solo he visto que solo existía. No, no, porque ya estaría mezclando. No, no, es para campos personalizados. Para bloques personalizados. Sí, sí, no puedes mezclar ahí los dos. No sé, nos tenemos más tiempo, sí, por favor. Una sola pregunta más. Sí. Mi pregunta va, si ya tienes desarrollado un tema con los advanced custom files antiguamente, con tu lógica de los repeaters, con el get fill, etcétera, etcétera, ¿cómo de fácil es hacer el cambio a meter esa lógica dentro del bloque de... En el front end no cambia nada, porque tú sigues llamando a campos de ACF, no cambia nada. Pues en el front end todavía tienes que seguir. Sí, por supuesto. Por supuesto. Lo único que cambia... No tiene que integrar en el de content. Yo creía que ahí te iba a escupir todo ya. No, no, no, no tiene que... No hay ningún cambio en ese sentido, porque sigues llamando los mismos campos que llamábamos antes de ACF, en el caso de repeater, pones el código de repeater, no hay cambio en ese sentido. Pasa todo más en la parte de va a crear el bloque, crear el HTML específico para el bloque, saber dónde encolarlo, en qué acción específica. Obviamente está a charla ahora, luego la voy a colgar en Twitter, y también voy a escribir un artículo, porque a veces en las slides se queda un poco flojo. El viernes que viene, seguramente, en mi blog está explicación. Vale, gracias. Bueno, pues muchas gracias. Un aplauso para Mauricio.