 Muchas gracias por estar acá. Yo soy Matías, estoy liderando Guttemberg. Sí, yo soy Miguel Conceca. Yo soy porque es que el español no me sale así. Hola. Bueno, tengo dos micrófonos. Yo vengo de Portugal y el español no me sale así. Va a haber momentos en que Matías termina las frases por mí. O puedo intentar decir cosas en inglés que me salen. Bueno. Yo voy a hablar en Uruguay. Si algo no se entiende, por favor levante el par en nos. Vamos a la tarde a dejar un espacio para preguntas. Pero si levanten la mano hacía algo que en el momento no queda claro. Bueno, empezamos. Lo primero es ¿quiénes están familiarizados? ¿Quiénes saben qué es Guttemberg? ¿Quiénes lo han usado, lo han instalado en la universidad? Ok, entonces, primero vamos a hablar brevemente porque no nos queremos detener mucho en qué es Guttemberg porque hay mucha documentación sobre eso. Pero un poco para dar la visión general. Guttemberg es el nuevo editor para Wordpress que está planeado para la versión 5.0. La versión 5.0 va a salir cuando Guttemberg esté pronto. Él tiene más o menos tres etapas. La primera etapa es reemplazar el editor de entradas de pos, de artículos, de como se le llame. Y la siguiente etapa es que integre el personalizador. Es decir, además una herramienta para manejar los diseños y las leyes. Y la última es que realmente abarque todo el sitio entero y se da un constructor de sitios. Entonces, ahora estamos en la primera parte. Esto es una captura de pantalla de cómo se ve hoy. Ha estado en desarrollo desde junio, más o menos, del año pasado. La primera versión del clube se sacó en la Workup de Paris del año pasado. Ahora vamos por la 2.0, que salió el día de ayer. Y bien. Pueden entrar a esta URL si quieren ver un poco más del contexto del proyecto y tiene links a dónde se está desarrollando el GitHub, la documentación, las distintas charlas y las distintas cosas. Bueno. Podemos dar algún contexto en una historia que las ideas detrás de Guttemberg no son nuevas. Y tenemos los formatos de Post Formats desde 3.6 y la idea era que queríamos contestar a una necesidad de atribuir significado al contenido y decir, este contenido es de este tipo o de aquel. Y los Post Formats eran la abstractión que teníamos hace 3 años. ¿Cuántas? 5 años. Sí, un poco. Cuando las primeras versiones de Wordpress era simplemente un área del texto donde se ponía HTML y eso era un poco lo que se publicaba. A medida que avanzan las versiones, va haciendo cada vez más claro que los usuarios quieren expresar otros tipos de contenidos. Y ahí vienen cosas como los short codes, los switches, distintas formas de poder representar contenido que si el usuario tuviera que escribir directamente el HTML le no sabría cómo hacerlo. Los Post Formats fue... Bueno, los formatos de Post fue también una especie de eso. No sé si recuerdan, la versión 3.6 hubo un intento de que cuando entraba a la interfaz de Post, primero iba a hacer e-mail si querías publicar texto o una imagen o un video. Ese proyecto no funcionó. La conclusión fue que eso no era muy parecido a Tumblr, pero no era natural para lo que los usuarios esperaban de Wordpress, que es en general mezclar distintos tipos de contenido. Un post puede tener una cita, una imagen, un video, etcétera, etcétera. Así que antes de empezar teníamos unos principios muy claros con base en esa historia y también con base en lo que conocíamos de los page builders. Y estos principios no son extraños a Wordpress. La idea de la apertura, que Openness es una apertura de contenido. ¿Tú no quieres que tu contenido esté... esté? Preso bloqueado en tu plataforma o en tu web. Y, bueno, mismo con el código, Wordpress es open source. Sí, un poco, lo que los últimos años han mostrado, creo que particularmente en España es muy común usar los page builders sobre todo los finanzas que tienen que construir sitio. Lo que ha mostrado es que el usuario espera un determinado editor visual que le dé un feedback inmediato de lo que están manipulando y lo que están editando. Y Wordpress ya, el editor visual de Wordpress ya tenía casi prácticamente una década o por lo menos siete años y no estaba a la altura de lo que espera el usuario hoy. Ahora, la responsabilidad de Wordpress y por qué hablamos de los principios es porque se aparecen todas estas formas de crear contenido. La responsabilidad de Wordpress es volviendo un poco a las misiones del proyecto que se han dicho tantas veces como democratizar la publicación, todo ese tipo de cosas. El espíritu de contenido libre que tiene Wordpress lo tiene que garantizar, no solamente en que sea una plataforma open source y cualquiera lo puede usar, pero que el contenido del usuario esté creando sea un contenido que, si se quiera, el mío de Wordpress lo puedan copiar y llevarse al otro lado, que no estén bloqueados por la propia plataforma. Esa es una responsabilidad de más largo aliento. Estamos hablando de que en los próximos 10, 15 años, en los próximos 30, en los próximos 40, el contenido del usuario siempre sea lo más enero posible. Entonces... Bueno, lo más difícil con eso es que Wordpress es un proyecto grande y tiene preocupaciones como la compatibility. Tú no quieres que cuando hagan nuevas versiones de tu contenido perca su validez. Validez. Validez. Y desde ahí tenemos la necesidad de un proceso que sea iterativo, que sea incremental y, bueno, desde ahí la idea del formato. ¿Cómo dicen backwards compatibility? Retrococontinuidad. Sí, y entonces un poco en ese espíritu, la conclusión de esto es que HTML es propiamente el formato de la web. Es algo que Wordpress incorporó desde bien temprano, y es algo que Wordpress ha ayudado a desarrollar. Todo el movimiento en la charla anterior vimos un poco la evolución de cómo fue el diseño web. Todo el período más fuerte de los webstandards y todos los estándares de la tripleWB, Wordpress fue una ayuda muy fuerte para que eso se cimentara, porque ahora estamos casi en 30% de la web se hace en Wordpress. Es muy importante que todos los organismos de estándares siempre estuvieran viendo un poco y retroalimentándose con Wordpress para dar cómo Wordpress hace ya no sé cuántas versiones, cuando saca más soporte para HTML5, eso subió muchísimo el contenido semántico de la web. Entonces, esto también es una responsabilidad de Wordpress para el usuario, no sólo el dueño del contenido, sino que lo va a ver que eso se siga desarrollando de esta forma. Entonces, para Guttemberg, desde lo que empezamos es si este es nuestro contexto y no es solamente un resultado final, sino que tiene un valor intrínseco más fuerte, ¿cómo podemos desarrollar HTML para poder proveer al usuario de lo que está esperando, que es un editor visual, rico y fácil de usar, pero que a su vez tenga este tipo de prestaciones y que considera que es todo el tiempo. Entonces, de ahí viene también un poco la analogía con Guttemberg y con la imprenta, porque si consideramos, básicamente la imprenta es usar una serie de elementos que se confonen para dibujar un poco la página y eso se imprime. Entonces, la analogía de los bloques sirve también para decir que la forma en que el artículo se compone no queda reflejada en el final. O sea, cuando vemos la página impresa no sabemos que estuvo hecha por pedacitos de metal. Al usuario final, eso no le importa. Entonces, la noción de bloques de contenido que es muy útil para el editor es enteramente innecesaria para el resultado final. Esto también era un principio a tener en cuenta en el sentido de que no queremos contaminar el resultado final con etiquetas div por todos lados, porque es algo que el editor precisa. Entonces, el resultado final tiene que ser simplemente lo que el usuario va a consumir y tiene que ser lo más semántico posible. Entonces, ¿cómo podemos hacer de alguna forma volver a recrear el estado interno del editor que funciona por bloques? Una forma de imaginarlo es como si la página impresa tuviera marcas invisibles en el texto que después un scanner pudiera pasar por la página y decir, acá se usaron todos estos elementos y te vuelve a armar en un lugar todos los elementos metálicos para que puedas volver a reorganizarlo. Escribe escultita de LeMoldo. Exactamente. Los que hayan probado, buscan ver y viste un poco cómo funciona habrán visto los comentarios HTML. El año pasado hubiera una serie de polémicas también alrededor de los comentarios pero queríamos un poco hablar de cuál es la utilidad principal de los comentarios y excesa. Es ser ese tipo de marcas invisibles que le permiten al editor un querer inmediatamente una experiencia de blog de contenido que no están presentes en el HTML y por eso hablamos de que los bloques son un orden superior en términos semánticos al HTML porque, por ejemplo, podemos representar con una... Sí, con una figura porque al HTML5 el figure, para representar una figura eso puede representar una imagen de fotografía de tu sitio puede representar un poster de una película o puede representar el logo de una empresa Todos estos elementos pueden ser bloques distintos para el editor porque pueden tener distintas interfaces por ahí hay un bloque que les permite no sé, buscar en las películas de YMD y insertar el poster o sea, tiene un significado que va más allá de cómo se representa el HTML o dicho de otra forma el mismo HTML puede representar distintos bloques Y tenemos un poder expresivo mucho mayor en la web tenemos los tips y los fans y pueden tener un montón de de apariencias diferentes pero aquí con los bloques cada bloque fundamentalmente tiene una semántica específica Sí, y hay también una atención entre el hecho de que para el HTML es la mínima expresión posible o sea, lo más semántico y accesible para la gente pero para el editor que eres la máxima información posible para poder rápidamente impedir con qué tipo de bloque estás trabajando Entonces, en los comentarios permiten hacer una lectura y esa es un poco la estructura del comentario para los que también están familiarizados con Wordpress sabrán que Wordpress ya usa estos para, por ejemplo, representar la etiqueta de leer más si querés estructurar un post en varias páginas también hay un comentario La ventaja de estas cosas es que son completamente invisibles en un contexto como un correo electrónico o un lector de RSS si el servidor no logra transformar esas cosas el comentario simplemente desaparece Entonces, eso nos daba la ventaja de ser invisibles para el usuario final pero permitir una certeza léxica en el sentido de que podemos hacer un análisis sintáctico muy rápidamente saber, sin entrar en qué tipo de HTML estamos trabajando, saber qué tipo de bloque es que en el otro si fuera, si no tuviéramos eso y usáramos otro tipo de recurso como un atributo de data o una clase de HTML precisarías hacer dos pasos porque precisarías primero encontrar el elemento que sea un figure en el contenido después de que tenés el figure se te abriría 4 o 5 posibilidades porque habrían 4 o 5 bloques que podrían haber producido ese contenido entonces tendrías que inspeccionar la clase o inspeccionar el elemento data y todo eso empieza a ser costoso Entonces, esta otra estructura nos permite inmediatamente saber qué tipo de bloque es el primer análisis sintáctico que hace Gutenberg ni siquiera trabaja con el HTML interno simplemente desde los comentarios se alinfiere una lista de bloques y sigue de largo Bueno, aquí tenemos un ejemplo de un post con 3 bloques y el contraste es un poco bajo para los comentarios pero eso es un poco metafórico de como los comentarios no son muy relevantes sólo delimitaciones Si, limitaciones Si, limites Si miras al párrafo está diciendo algo que es relativamente obvio para nosotros en este contexto pero tú podrías tener una pita con al conectado a un bloque con un significado totalmente diferente Y lo otro es que bueno, de hecho, Gutenberg cuando se genera el post final quita los comentarios en el renderizado final porque lo que muestro claramente no son necesarios para el explorador que nos va a simplemente pasar por ahí y vamos a ver la otra cosa que esto nos permite es como sabemos inmediatamente que tipo de bloque estamos trabajando el siguiente paso que hace Gutenberg es ya una validación interna porque ahora una vez que sabe a esto es un bloque del imagen ya hay una serie de cosas que puede saber que tiene que encontrar una URL para el imagen que hay una serie de cosas que si no están significa que el bloque está roto porque la otra ventaja de usar de usar HTML como informato es que nos permitía que Gutenberg se pudiera empezar a usar en la primera versión y si lo probabas veías que no te funcionaba no sé qué le desactivabas y no tu contenido sería exactamente igual si abrís un post de Gutenberg en el editor viejo hay cosas que no vas a poder hacer que no son iguales pero el contenido siempre es accesible nunca vas a tener una página en blanco sin el texto pero eso significa también que lo que espera Gutenberg puede ser deformado por algún otro editor una aplicación móvil, Mars Edit que sigue en el que sigue en rondas cualquiera de esos editores puede manipular el contenido HTML de formas que Gutenberg después lo reciba y vea que no hay algo bien pero tenemos esos mecanismos para avisarle al usuario y esto es simplemente la versión que está ahora una comparación que te muestre el antes y el después para que el usuario pueda decidir con cual se queda y distintas opciones de transformación como decir no, me quiero quedar con el HTML de nuevo este y no me importa el bloque o bueno interir cosas más sofisticadas como bloque de este tipo pero mirándose a su contenido podría ser otra especialización del bloque original puedes decir si quiero que sea esto en vez de el otro bien entonces vamos a ver los atributos los tenemos los otros que van a notar en los comentarios HTML es que no solamente tiene el nombre del bloque sino que también tiene estos paréntesis curvos con los corchetes datos adicionales esto es porque cuando hablamos al principio de las cosas que Warp ya tenía como los short calls, switches Warp ya ha intentado generar este tipo de contenidos del bloque que sean dinámicos en el caso de los comentarios HTML ahí se ve un poco vagamente pero hay un bloque ahí que son los últimos costes de tu sitio en este caso no está guardando ningún contenido de HTML enteramente un bloque dinámico entonces los atributos están definidos dentro del comentario HTML y esto el servidor lo va a agarrar y lo va a generar como si fuera un short call el resultado final una cosa muy guay es que este es el estado del bloque de últimas entradas ahora pero la sintaxis es solo que esto es un bloque que no tiene contenido pero podría ser igual que los otros y tener atributos y después tener un contenido y tener el hecho el fecho de una fecha del bloque y eso quiere decir que tenemos bloques que son híbridos no tiene que ser solamente dinámicos o solamente estáticos y así que si si se está en un contexto como en emails o feeds de la web en que no hay en que no se puede hacer el géner el continuo dinámico el servidor no lo puede procesar bueno si ahí tú ves lo que está entre los markers un ejemplo puede ser este bloque puede ser los últimos cost de la categoría ahora eso si hay un contexto en el cual el servidor no lo puede procesar si hay un rcs que simplemente agarra el contenido puro en html el autor del bloque puede definir un un contenido por defecto que sea por ejemplo una url que te lleve a la página de categorías correspondientes a esos cost si en el contexto no se puede el sabio no puede generar los últimos cost puede si darte una url en el email y veas los últimos cost entonces esta flexibilidad de tener cuál es el contenido dinámico y qué se le puede dar como contenido por defecto también lo permite lo otro que queríamos mencionar es que el si bien gusta guardar todo el contenido en este momento en el post en el html eso no significa que los bloques en sí mismos deban guardar el contenido allí los bloques pueden ponerse información en la base de datos de la tabla de meta y pueden guardar en opción o si hay un bloque que es el título del sitio esa información obviamente va a estar en un campo específico de la base de datos entonces el bloque es más una idea para el usuario de que pueden insertar todo el contenido que van a manipular en Wordpress de la misma manera pero eso no significa que el autor de los bloques tenga que dar todo como html por tal cosas que son beneficiosas como la proliferación de las metaboxes los campos customizados se pueden seguir haciendo con los bloques me gusta la analogía con la enfrenta también porque es la idea de que estas marcas son anotaciones para la tienda tipográfica que va a imprimir y aquí los atributos solamente son referencias y pueden estar en cualquier parte pueden estar en un recurso externo que puede estar en la red y los comentarios guardan el identificador o cualquier cosa no tienen que dar a codificar todos los datos que tienen nos sentimos un par de días positivas porque se nos está yendo la hora pero lo otro es que esta estructura lo más desafiante del proyecto de Gutenberg es un poco como hay que mover tantas cosas el cambio final parece un cambio enorme pero en realidad es una sumatoria de capas que van haciendo cosas muy pequeñas y contenidas por ejemplo la estructura de los comentarios hace un año entero en funcionamiento ha sido de lo más estable de todo el proyecto nos ha permitido generar bloques sanidados sin problema de hecho Gutenberg ya soporta bloques sanidados en el sentido del analizador sintáctico desde hace unos meses entonces ha sido un poco como apilar capas sobre capas lo último que queríamos mostrar es un poco qué tipo de oportunidades esto de los bloques también ofrece sí, pero la diferencia fundamental es que antes de Gutenberg la unidad fundamental en WordPress es el POS que es una unidad muy robusta y permite describir entradas y páginas pero también menus y widgets todo esto es internamente un POS ahora con Gutenberg la unidad fundamental es el bloque y eso permite por fin lo cosas como acá en el video hay un bloque de youtube y eso ahí a la derecha inmediatamente registra y sugiere que esto puede ser un formato de video entonces el usuario puede elegir ese formato si empezas a añadir otros bloques y añadís un texto o una cita o algo ya vuelve a sugerir el estándar porque ya no se representa como un video pero esto es muy trivial de desarrollar este tipo de lógica porque el editor ya sabe exactamente qué tipo de intencionalidad el usuario está dando el contenido eso es un poco lo que hacia dónde también apunta Gutenberg que es incorporar empezar a absorber cosas que antes caían enteramente en el campo de los page readers y cada un theme o un plugin puede definir sus propios bloques dentro de esta estructura que Gutenberg asegura que va a ser compatible para WordPress a través de los años y aquí es la idea gracias a los bloques tienes la posibilidad de dividir tu contenido de una forma mucho más granular y antes si querías colaborar con alguien en un host lo que tienes es todo el host está vedado vedado si alguien está lo está editando también y con los bloques cada uno puede trabajar en un bloque en cada bloco en simultáneo y eso funciona ahora es mucho más fácil decir que bloqueamos simplemente el bloque específico que el usuario está editando entonces WordPress puede ofrecer colaboración en tiempo real de forma mucho más fácil sin tener que lidiar con problemas de sincronización bueno muy bien no creo que tengamos tiempo para preguntas pero si nos buscan por ahí estamos contentos de responder lo que sea