 Bueno, aquí estamos, pero para arriba, a través, y bueno, vamos a tener el lujo ahora de tener nada menos que a Pablo Honey. Si andas por ahí ya, detenemos las manos a la vista, ahí está Pablo Honey. Bueno, un pequeño anticipo, ¿vale? ¿Sabes lo que es Gutenberg, lo que es el editor de Bloques? Bueno, pues este señor nada menos que un gallego en Nueva York que suena canción de Mecano, es parte del líder del equipo de diseño de nada menos que de Gutenberg, con lo cual creo que nos va a hablar mucho y bueno acerca de lo que es la visión, desde el punto de vista de diseño, la visión gráfica y diseño de lo que es el proyecto Gutenberg, y bueno, no me quiero enrollar más porque, o sea, esto es oro puro la charla que tenemos con Pablo y bueno, solo recordaros que las preguntas las guardéis para el final o la belleza apuntando y que no lo hagáis preguntas para más, que salas a contestar a más mañana, a hacerle preguntas sobre la charla que nos va a dar Pablo, que va a ser un auténtico lujo. Adelante, Pablo. Espero que me escuchéis bien. Bueno, un lujazo estar aquí, claro, y un lujazo tener esa introducción. Es un honor estar aquí y compartir parte del trabajo que estamos haciendo. Yo solo soy una parte de un contribuyente y una parte del equipo que hace Gutenberg a avanzar. Como se ha dicho, yo soy Pablo, me llamo Pablo, mucha gente me conoce por Pablo Hone. No es mi nombre real. Podemos hablar después de eso en la otra sala de Zoom. Y soy gallego, vivo en Nueva York, entonces empiezo disculpándome si meto algún anglicismo, si meto incluso mezclo con el gallego. Tengo unas cosas raras con los idiomas ahí. Soy un lead diseño en automática y contribuyo, como se ha hecho al editor, desde la perspectiva de diseño, especialmente en las últimas iteraciones. Y tengo la suerte de colaborar con gente muy talentosa, tanto en automática como en la comunidad de la que realmente aprendo mucho. Compartimos esta iniciativa, este avance desde el punto de vista de diseño, como en noviembre del año pasado y el feedback ha sido muy constructivo hasta ahora. Entonces, con ese espíritu abierto, me gustaría proponer esta charla con la misma transparencia y con gusto, contexto a preguntas al final o en el Zoom o en otros canales habituales. Seguro, Math tiene respuestas mucho más precisas y mucho más mejor construidas, pero intentar ayudar en lo que pueda. Desde el lanzamiento de Gutenberg, ha habido una explosión de bloques. Millones de usuarios han interactuado con el editor de bloques, llevando esto a muchas iteraciones, mejoras, desafíos y lecciones que no entendíamos cuando se lanzó. Entonces, hemos avanzado la interfaz del bloque, la interfaz de este producto. Todos los productos necesitan con actualidad avanzar. Quizá este proyecto de editor se germinó como ya casi tres años desde el inicio. Entonces, las cosas han de evolucionar naturalmente y de explicar cómo y por qué. Y os voy a compartir ese racionamiento y esa evolución. Y, sobre todo, lo que os voy a explicar es cómo hemos intentado resolver algunos desafíos que han ido surgiendo. Por cierto, como veis, hay un antes y un después aquí, el antes y el después. Desde esta vista se ve como una evolución natural, pero ahora vamos a hacer un poco más de zooming y veremos los cambios y evoluciones. Por ahora, estos cambios están solo en el plugin y desde la versión 7.7, así que tenemos tiempo y espacio para pestearlo y escuchar el feedback, vuestro feedback. Como he dicho, la interfaz emergido más compleja desde su comienzo, como concepto en su momento, fue el editor font, un concepto nuevo. Era relativamente sencillo. Todos los detalles del contenido serían un blog, será la idea. Y todos los blogs tienen un único UI, una única interfaz que aprender. Una vez que aprendes esa única interfaz, sabrías cómo hacer todo. No tienes que aprender a usar widgets, escribir HTMLes ad hoc, pegar una URL y esperar que incruste el vídeo o visitar una multitud de secciones para crear tu sitio. Pero incluso así, la interfaz en su momento fue diseñada para un set de herramientas y features mucho más sencillo y no absorbía problemas nuevos que fueron surgiendo. Cosas nuevas que fueron surgiendo, bloques como los bloques pudiendo anidar, lo que sí, en inglés nested, lo cual desafiaba el UI del bloque en sí. Y las dos toolbars, las dos barras de herramienta y los controles de posiciones se sobreponían, causando bastante ruido visual y dificultad funcional. Al estar restringido en los bordes cuadrados del bloque, la toolbar podía salir cortada en ciertas situaciones, como veis en la imagen. Entonces, un aprendizaje de este análisis es que había demasiado UI, había demasiados elementos de interfaz confundiendo la edición en sí. Y también dificultaba el uso del teclado, ya que dificultaba el uso del teclado, ya que el tap focus ha de atravesar múltiples controles. Otro aprendizaje es que el mover en el lateral se superpone en contextos sanidad. La toolbar pegada al bloque en sí nos cala bien en diferentes plugins y en contextos móviles, etc. Otra observación, irónicamente, un bloque no es siempre un cuadrado y los bordes no indicaban realmente la huella real del contenido. Al mismo tiempo, los bordes podían confundirse con el focus o selected, lo cual eclipsa lo que realmente está en focus. En esta captura, por ejemplo, que veis, el focus está en el elemento de alinear, lo cual es un poquito confuso con todos los bordes. Ya que esos bordes no representan la forma del bloque y su huella, técnicamente estaban dibujados fuera de las fronteras del mismo bloque, lo cual causaba una superposición innecesaria. Por lo que tuvimos que revisitar esos bordes para proveer claridad sobre lo que estaba en focus y lo que no. Algunas instancias insistían mucho en el uso de iconos, se mezclaban iconos hechos ad hoc, costum con iconos de material y da psychos. Había esta mezcla un poco confusa. Por lo que otro aprendizaje había la oportunidad de mejorar la unidad y claridad de los iconos y definir un uso más intencional de los mismos de esos iconos. En resumen, la interfaz ha evolucionado intentando resolver situaciones más complejas según editor, pero al intentar resolver esos problemas de manera aislada, obviamente situaciones nuevas emergieron, elementos que no estaban pensados para ser protagonistas, de repente lo eran, incluso elementos que no estaban diseñados todavía. Entonces miramos esencialmente a las tendencias de feedback relacionadas con el UI que surgieron en alrededor de 2.000 tickets o issues en Github. En base a estas observaciones y estos feedbacks empezamos a compartir algunas ideas como digo en noviembre de cómo podríamos resolver un poco más sistemáticamente esas observaciones y los feedbacks de la comunidad y de los usuarios. Y de ahí de esas ideas iniciadas seguimos probando cosas yterando en algunos de los diseños que os voy a compartir. Como digo esto no es, pero son algunas piezas que quizá son interesantes de ver con vosotros. Una de las cosas que hicimos para resolver esos desafíos es unificando la toolbar, la caja de la barra de herramientas. Notaréis como por ejemplo el antes y el después, notaréis que la silueta es mucho más claro donde está la interacción en el bloque en sí, todo sucede en la toolbar. Aprovechando la huella real del bloque también es más sencillo de ver qué es parte del bloque y que no. El focus es más evidente también. En ambos ejemplos la imagen tiene focus con lo cual si presionas borrar, delete en el teclado el bloque se borra. El focus no es muy evidente en el antes, en la imagen de la izquierda. Columnas es uno de los bloques más serpentinos y lo alivia reduciendo los elementos de la interfaz como veis aquí. El párrafo, sin embargo, es el ingrediente más básico del editor. Realmente no quieres UI intercumpiendo la actividad de escribir y si bien la toolbar nueva es más grande se siente más legera. Son 12 pixels añadidos al anterior, lo cual también ayuda para contextos de móviles usando el tapa. Como la imagen, el bloque spacer también se beneficia de indicadores claros de focus, como veis de nuevo en el antes y el después. El bloque link sociales también tiene cierta complejidad inerente ya que cada elemento es un bloque en sí mismo, cada elemento dentro de cada link, cada icono social. Solapando los bordes en un contexto tan estrecho es aún más importante reducir el UI del bloque para que no interfieran dimisiones, dimensiones tan reducidas. Controles de posición o movers absorbidos en la toolbar, proveen una interfaz unificada, independientemente si necesitas como aquí mover contenido elementos en vertical o horizontal. Incluso esta pieza, este elemento, los movers, ya están evolucionando y todo está evolucionando en GitHub y escuchando de nuevo el fígmate que la comunidad comparte. Otra cosa que hicimos es despegando la barra de herramientas, la toolbar del bloque en sí, resuelve situaciones extremas en márgenes o contextos anidados, evitando, por ejemplo, aunque el bloque esté flotando o se expanda en la página completa, la toolbar permanece constante en la parte superior izquierda del bloque. A diferencia de lo anterior, donde los controles de posición tenían que modificar su estado y lugar en ciertos contextos. Otra cosa que hicimos es reducir la huella visual, en general, el ejercicio de reducir para entender cuánto podíamos simplificar el UI del bloque nos guió a, por ejemplo, crear una grid, espero que se vea bien, crear una grid para balancear la anatomía de la toolbar. Los elementos comenzaron a verse más equilibrados y modulares. Al tener las zonas, como he dicho, más amplias, las zonas de tap o más amplias, más legidas, con más contraste, funcionan bien independientemente del diseño o fin. Queda más claro qué es el contenido y qué es el editor. Al disminuir los colores de la interfaz también, si recordáis en muchos grises, había muchos grises en la interfaz del bloque, reduciéndolos nos permite ganar de nuevo claridad y contraste independientemente del backdrop. Otra cosa que hemos hecho es enfatizar el floco. En lugar de tener cuatro estilos diferentes de Focus, abreviamos aún un estilo con un borde más grueso y visible, espero que se vea bien la animación. Se puede ver ese mismo estilo de Focus aplicado en varios elementos, en este caso se puede ver cómo el Focus viaja atravesando todo el bloque con nitidez. Cuando un bloque tiene un borde azul, no solo está enfocado y seleccionado, también significa que se puede borrar usando el teclado. Es particularmente relevante para lectores de pantalla, poder seleccionar rápidamente el bloque que quieres editar sin tener que presionar tap infinitamente. Si tienes 20 bloques en un post, se debería poder seleccionar en 20 tabs. Consideramos también o reconsideramos los iconos también, como he dicho, estaban mezclados con diferentes estilos y categorías estéticas. Explorándolo ampliar su tamaño, por ejemplo, simplificar su silueta y conectarlos con el resto del lenguaje de diseño que está rollando, si bien algunos hemos diseñado parte de iconos elementales, están abiertos para todo el mundo en un archivo de firma. También generamos una arquitectura y una anatomía de esos iconos que compatibles con otras librerías como Material, que pueden soportar escalar con fácilmente. Por ejemplo, hemos revisado los drop-downs en el contexto del bloque. Drop-downs se sienten un poco más naturales, surgiendo de los mismos elementos de la toolbar, reduciendo la cantidad de iconos y aprovechando el contraste y claridad un poco más. Estas son un poco rápido por el tiempo, pero todavía queda mucho. Algunos esfuerzos que se están revisando ahora son los controles alrededor del bloque, en sí mismo, como el inserter, como la búsqueda y la exploración de bloques y patterns. Aquí veis como una preview de un par de cosas, por ejemplo, que se están compartiendo y desarrollando a la izquierda del inserter como evolución al inserter y a la derecha como, por ejemplo, elementos o herramientas de la sidebar, una interfaz más secundaria. Por último, la mayoría lo sabéis, pero está bien recordar que esto es un proceso completamente abierto y nos ayuda a tener la colaboración en el fígado de todo el mundo. Así que os invito a colaborar tanto probando el plugin, como reportando tickets o compiars. Muchas gracias. Bueno, pues no me ha dejado ni avisarte de lo poco trabajo que tenía para hoy, que era avisarte que te ha quedado un minuto, has terminado, totalmente, hay o no. Y bueno, vamos a ver qué preguntas tenemos, porque este tema sabes Pablo que lo criticamos mucho, pero luego somos muy cobardes para preguntar, pero vamos a ver qué tenemos por ahí. Mira, por ejemplo, acabo de ver una que era mismo de Nadia Baena. A ver si mira, nos pregunta la última que tenemos aquí. Si recomiendas usar, espera a ver que la lea bien. ¿Recomiendas usar más código o añadir plugins que nos ayuden a otro tipo de elementos visuales a Gutenberg como co-blocks y demás? Sabes que ahora mismo pues la gente está intentando prácticamente sustituir los builders con Gutenberg y no tan carencias en comparación todavía en la cantidad de módulos que ofrecen muchos builders. Tú opinas de todo esto si conviene ir añadiendo, metiéndose en más colecciones de bloques para tener más más complejidad visual o quizá nos estamos equivocando y estamos confundiendo a Gutenberg con un builder y no lo es. Es una duda que tengo yo también por ahí en relación a esta pregunta. ¿Cómo lo ves Pablo? No sé si hay diferentes factores de la pregunta y hay factores más técnicos que igual no sabría responder bien. Yo diría que contribuyendo a generar más bloques, más tipologías de bloques, nos dan posibilidades de construir cosas más complejas. Entonces yo invitaría a todo el mundo a contribuir. Me suena como una edicotomía no muy clara. Si usar Gutenberg o no usar Gutenberg, yo lo probaría, le daría un chance y también contribuir con feedback y cosas que falten para los builders. Simplemente la conversación está siempre abierta y podemos siempre producir cosas que sean necesarias para la mayoría. Vale, pues la actitud correcta lógicamente. Mira nos pregunta también José Ángel Vidania que es un amante de los bloques y Atlánticipo. Si hay algún motivo especial en hacer desaparecer ese mover para reordenar los bloques hacia arriba y abajo. Si había un motivo especial. El motivo inicial, como he dicho, está incluso evolucionando esto. Y lo pueden ver en GearHub también. Estamos planteando alguna exploración en la que estén permanentes los movers otra vez. Pero la posición que tenían y teniendo una interfaz separada de la toolbar, como hemos mostrado en algunos casos, generaba ciertas discrepancias en situaciones como en situaciones anidadas o en situaciones expandidas de bloques, etcétera. La idea inicial de absorberla en la toolbar era que fueran más contextuales, que aparezcan los movers cuando realmente los necesitas. Y eso realmente para todas las interfaces. Que aparecen cuando las necesitas y no es que esconders quizás es demasiado violento, pero que estén ahí un poco menos prominentes cuando no las necesitas. Esa era la idea inicial. Pero insisto, esto está evolucionando y con gusto, si tienes ideas, con gusto las pones discutir. Venga, perfecto. Mira, tenemos una pregunta de un compañero tuyo, Álvaro Gómez, de Automatic, también del área de soporte. También un gran amante de Gutenberg y también de editor's kit y te pregunta por él. Es un plugin, no sé, espero que le conozcas, que añade funcionalidades al editor de actual de Wordpress, como Gutenberg, y añade funcionalidades, por ejemplo, de Responsive y demás. ¿Le conocías, Pablo? No estoy tan familiarizado con él, sí que lo conozco, pero sí conozco Álvaro, por cierto. La verdad es que no tengo una respuesta clara y específica a eso, pero podremos discutirlo más tarde, si queréis. Venga, pues nos quedamos con eso. Y bueno, vamos a ver alguna pregunta más. A ver si se dice lo bien. Echinette, Olivier, Carrion, pregunta que cuando podremos utilizar el editor de bloques para modificar cabeceras, pies de página, o sea, prácticamente el full-side editing, ¿no? Que está anunciado. ¿Tienes ya alguna idea o nos esperamos a ver que nos cuenta más mañana? Yo creo que Matt va a hablar un poco de eso. No lo sé, pero me da la sensación que sí. Yo diría que en un mes o dos empezamos a ver más funcionalidades específicas del full-side editing, como las que comentas. Yo creo que pronto habrá que iterar mucho y mejorarlo, pero yo mismo estoy esperando el full-side editing con ganas, la verdad. Bueno, todos, yo creo que todos, ¿no? De alguna manera, para ver todo el potencial suyo, ¿no? Miramos a ver una pregunta también de Iván Barreda, que nos la ha hecho dos veces por insistencia. No te preocupes Iván, que va a salir seguro. Dice, ¿hay algún plan para unificar la interfaz del backend de administración de Gutenberg para desarrollos de terceros? Yo no la entiendo, pero si tú la entiendas, le respondes. Yo no sé muy bien por dónde va Iván. La verdad es que no. Es una pregunta un poquito más técnica que quizá te miento si te digo algo específico. Prefiero contestarte en otro foro y buscar la respuesta que necesitas. Es muy buena respuesta, porque a más os recuerdo que todos los que os habéis registrado en Work in Spain Online habría recibido un correo con la sala de Zoom, donde Pablo va a intentar resolver algunas dudas de los que tengáis. No tenemos mucho tiempo, que ni tiene mucho tiempo, pero sí que os podéis pasar luego por la sala de Zoom ahora en un par de minutos. Y miramos a meter una última pregunta. En este caso de Héctor González, Carlos desde tu punto de vista, ¿no? Te está diciendo Héctor González, ¿sí? Dice, desde tu punto de vista, ¿por qué muchos diseñadores siguen prefiriendo utilizar el editor clásico que el Gutenberg? No sé si tendrás ese feeling tú o te ha llegado este feedback por parte de diseñadores que, pues, como no se han lanzado todavía a utilizar los loques. ¿Qué barreras consideras tú que pueden encontrar todavía o a día de hoy diseñadores a la hora de empezar a utilizar de manera masiva a Gutenberg o a algunos frenos que te hayan transmitido, pues, como responsable de la parte de diseño tiendo que te llegará a feedback, de frenos que se encuentren a la hora de adoptarlo totalmente, ¿no? Yo creo que, a ver, habrá particularidades de cada uno, ¿no? Que tendrá ciertas barreras específicas de su workflow, de las cosas que esté haciendo o necesite hacer para clientes o para sí mismos. Yo diría que la barrera es un poco la familiaridad, ¿no? Desde un punto de vista psicológico nos acostumbramos a autorizar ciertas interfaces y ciertos productos y nos da miedo saltar a usar otros. Quizá la barrera es que no tenemos tanta familiaridad. Algunos no tienen tanta familiaridad con Gutenberg todavía, pero yo creo que hoy en día saltamos de interfaces y productos muy fácilmente. Yo le daría una prueba y un poco de tiempo para ganar esa familiaridad y contribuir a las cosas que todavía no funcionen bien, ¿no? Para nada es perfecto, por eso intentamos que evolucione, que siga mejorando y iterando. Me parece el mejor mensaje para finalizar, además de la última y la positiva. Yo siempre digo menos quejarse y más contribuir, también, ¿no? Yo siempre digo que me quejo, pero también procuro contribuir, ¿no? Bueno, Pablo, muchísimas gracias. Ahora te vemos en la sala de Zoom. ¿Quieres decir alguna palabra de despedida antes de que pase yo a mi siguiente compañero? No, esto es un placer. Seguimos hablando. Estoy aquí, en las redes y tal, entonces ha sido un placer compartir con la comunidad española y conectar con la comunidad española que la he hecho de menos también. También te echamos de menos a ti. Bueno, podéis contarte con Pablo en la ropa Pablo Jone y Jony en Twitter y ahora, bueno, voy a dejar con Carla Saiz, que va a presentar a Vincenza and Cheese en esta sala y recordaros también que en la sala A tenemos otra charla, es necesario que mi blog tenga una newsletter, por parte de Clara Avila y por mí me despido. Hasta mañana, nos dejo con Carla.