 ¿Os estáis preguntando quién es la cara detrás del core de WordPress? Pues hoy os presento a la cara visible detrás del core de WordPress. Carlos Bravo, desarrollador culpable del core. Y si pensaba y si alguien todavía por aquí pensaba que en Comerci todavía no se puede trabajar con bloques, ya voy a destriparlo de entrada, está muy equivocado. Os dejo con Carlos Bravo con bloques en Google Comerci presente y futuro que la disfrutéis y después nos vemos en las preguntas. Gracias, se oye bien, sí. Pues nada, me llamo Carlos, estoy en el core de WordPress. Google Comerci, poquito la verdad, pero bueno. Y nada, vengo a hablaros de los bloques, que está en boca de todos. Un poco como podemos usarlos en Google Comerci. Bueno, vamos a hacer aquí un poco de repaso. Que levante la mano el que tenga una tienda de Google Comerci o gestione tiendas de Google Comerci a gente. Bien, casi la mitad. Que levante también la mano. ¿Quién tiene pensado montar una tienda de Google Comerci en un tiempo reciente? Poquillas, bueno, bien, poco a poco. Vale, y la pregunta es que no creo que levante nadie la mano, ¿alguien tiene un tema de bloques en Google Comerci? Perfecto, ¿sí? ¿Un valiente? Para experimentar es bueno, es lo que yo recomendaría. Vale, es normal, ¿eh? Están aumentando, ¿vale? Cada vez tenemos más tiendas con bloques, pero obviamente es algo muy nuevo. Acaba de entrar en el editor, el A61 se ve mejor, ¿no? El editor del sitio. Mejorarán un poquito más el A62, el A63, no creo, el A62 sería lo suyo. Y en Google Comerci también llegará un momento en el que podremos dar el poder al dueño de la tienda o nosotros poniendo tiendas a los clientes de poder editar casi toda la tienda con el menor código posible, ¿vale? Haciendo no code. Vamos a ver qué tenemos ahora y vamos a ver qué va a presentar el equipo de Google Comerci en el futuro, ¿vale? Bueno, empezamos con un aviso. En verdad voy a dar dos, ¿vale? El primero es... No soy diseñador, ¿vale? Los ejemplos no van a ser los más bonitos. Soy el típico que pone un fondo rojo con la letra blanca y se ve horrible y lo vais a ver en los ejemplos, ¿vale? O sea, el editor es muy potente, pero en manos de gente que no se le da bien podemos hacer auténticas barbaridades y cosas desastrosas. Luego lo veis en un implementador o en un diseñador y dices, qué locura, qué bien se os da, ¿vale? En el futuro habrá gente que maneje el editor mejor que los que trabajamos en el editor, ¿vale? Y yo de esos ya he visto un montónazo. El otro aviso es aunque he trabajado con el equipo de Google Comerci de vez en cuando hacemos colaboraciones y tal, no estoy de lleno en ello, con lo cual en la ronda de preguntas puedo contestar algunas cosillas pero otras no tendré ni idea del futuro, del desarrollo de Google Comerci esos son los únicos avisos. Vale, el editor de la tienda, ¿vale? En inglés le llaman Store Editing que es lo nuevo que está trabajando parte del equipo de Google Comerci y que es el editor de la tienda va a ser la combinación del editor del sitio y de Gutenberg, ¿vale? del editor con Google Comerci, ¿vale? La idea es llevar todo el poder del core de WordPress y su editor a Google Comerci, ¿vale? Para que no haga falta tanto CSS, tanto código plugins externos y demás, ¿vale? Ese es lo que parte del equipo de Google Comerci se está centrando, ¿vale? En el llamado editor de la tienda. ¿Qué bloques tenemos ahora disponibles en la tienda? Vamos a dar un repaso primero a los bloques que tenemos vamos a ver un poco también los cambios que puede haber en plantillas y demás, lo que nos dejan editar en el editor global y luego vamos a ver qué bloques vamos a presentar en el futuro de momento, ¿vale? Empezamos con el más importante de la tienda, ¿vale? Está ya disponible en cualquier instalación de Google Comerci el bloque de minicarrito, ¿vale? Hemos trabajado muy fuerte en él y nos va a permitir al editor de la tienda no se ve muy bien la captura, lo siento pero va a permitir añadir ese bloque en cualquier parte, ¿vale? Lo podemos añadir en la cabecera en el footer, en un lado en la página de producto es un bloque con toda su funcionalidad y en las opciones del editor vamos a poder añadir comportamientos al cuando añades el producto que haya una pequeña animación, lo que sea podemos ocultar el precio del carrito y podemos hacer pequeñas ediciones cómo cambiar el color del texto cambiar el color del fondo y cosas así que en manos de los diseñadores quedará bonito en manos de un desarrollador no tanto pero bueno luego está preparado el carrito un clic, se abre un modal en el lado que es la imagen del medio donde se puede ver pues es el carrito y todo el contenido esto también se puede editar en un futuro, o sea ahora se puede editar y lo bonito es que podemos añadir cross-selling, podemos añadir ahí un pequeño banner, podemos añadir cambiar textos, cosas así, ¿vale? cosas que antes se hacían con plug o con PHP o editando a fuego esto lo va a poder editar el cliente si le damos la opción o el implementador de la tienda podemos ver así, puedes con enlaces cambiar de pago, etc etc es un bloque súper importante y está bastante estable es el bloque más estable que tenemos el bloque de checkout ahora mismo cuando instalamos un Google Comer y vamos a una plantilla de bloques si vamos a la página de checkout esto es lo que aparece es el típico shortcode de toda la vida llamando a Google Comer checkout y todo eso, en PHP ya te sacas tu checkout entonces luego ya pues si tenemos plugins de one page checkout, se aplican esos y tal ¿qué podemos hacer? ¿qué vamos a cambiar? si quitamos eso tenemos el nuevo bloque de checkout esto es la presentación más tarde lo podéis ver mejor o si tenéis una tienda de prueba como decía podéis quitar el shortcode y añadir el bloque de checkout y aparecen todos los campos, ¿vale? entonces vamos a poder a través del editor cambiar pequeñas cosas ¿vale? sí que es verdad que hay muchos candaditos porque el checkout necesita una serie de pasos que no podemos quitar porque si no la tienda no funcionaría pero podemos cambiar tipografías, podemos cambiar tamaños podemos quitar o poner el numerito de cada paso podemos añadir campos como podéis ver ahí que pone empresa, apartamento teléfono, poner lo obligatorio podemos enseñar numeritos de la tienda podemos poner los términos y condiciones y podemos añadir lo mismo pequeños banners podemos añadir varias cosas al checkout ¿vale? aquí he hecho un ejemplo no se ve muy allá pero podemos en cualquier momento nos aparece el típico más del editor y podemos añadir párrafos, imágenes y separadores si queremos hacer la típica línea ponerlo de colores y tal el bloque de checkout también está muy estable y se puede utilizar en producción perfectamente ¿qué más tenemos? bloques de filtro de productos los filtros de productos es algo indispensable en todas las tiendas y los hemos puesto a bloques que incluyen varios filtros distintos y cada bloque de filtro tiene sus propias opciones podemos cambiar lo mismo fuentes, colores, tamaños de letras estilo de visualización y tenemos ahora mismo el filtro de productos activos, filtros por precio por atributo y por stock se pueden editar todos ¿vale? y luego ahora venimos un poco más adelante también se adaptan a las plantillas de bloques a los distintos estilos y demás ventajas de esto han trabajado también muy fuerte en el equipo porque hasta ahora esos filtros sólo funcionaban con un tipo de bloque de productos específico, que era el de todos los productos ahora ya funcionan con el que viene de WordPress por defecto no sé si sabéis, a partir de la 6.1 podemos añadir se llaman plantillas, parte de plantilla en temas clásicos ¿vale? entonces con un poco de código podemos decidir que partes del sitio se pueden gestionar con el editor y partes con código entonces con el editor podemos añadir los filtros y va a funcionar perfectamente con los bloques de WooCommerce de PHP que ve irán con sus plugins con sus filtros, con sus actions, etcétera ¿vale? entonces es bastante potente que ahora ya no depende sólo de un bloque sino que va a funcionar con todos los bloques WooCommerce de producto ya sea pues productos por categoría por todos los mal, resultado de búsqueda etcétera, etcétera y se pueden editar más o menos aquí se ven en el front ¿vale? pues se ven ahí bonito si le habéis clic y tal funcionarían y ya está, la verdad es que ha sido complica ello ¿qué más tenemos? tenemos el bloque de búsqueda de producto ¿vale? este es muy interesante porque bueno una parte de pequeñas personalizaciones que antes eran más complicadas, ahora es súper fácil podemos poner el placeholder que queramos, ahí no se ve pero pone buscar productos de la workangriñón podemos escribir ahí un poco lo que queramos que se vea podemos cambiar el buscar por una lupa quitar el botón, ponerlo etcétera, etcétera, podemos lo de siempre cambiarlo, moverlo para arriba para abajo poner el buscador donde nos dé la gana dentro del editor, dentro de cualquier artículo dentro de lo que queramos bonito de esto, el propio equipo o sea porque este bloque lo que hace es viene del bloque de búsqueda propio de WordPress ¿vale? del core entonces como WooCommerce necesitaba cosas específicas y mejoras de nuestro propio bloque de core han ayudado entonces esto es lo bonito como otros equipos o otras empresas o demás, es el open source permiten mejorar el propio core al final, en este caso el trabajo de WooCommerce va a ayudar a todos los WordPress del mundo en cuanto a términos de búsqueda y el bloque de búsqueda ¿vale? luego los bloques clásicos ¿vale? siguen estando ahí lo que han trabajado es o sea esto es simplemente cuando nosotros tenemos WooCommerce en una instalación básica y cambiamos a un tema de bloques ¿vale? WooCommerce va a añadir una serie de plantillas con estos bloques específicos de PHP eso significa que cuando cambiaremos a un tema de bloques nuestro WooCommerce debería de funcionar exactamente igual ¿vale? cambiarán los estilos pero funcionarán igual, si tenemos plugins que afectan a PHP no pasará nada, funcionará y todo de momento es la primera opción que hicieron ¿vale? eso nos permite poder usar temas de bloques en WooCommerce básicamente y ahí están, está el de producto el de producto simple y demás simplemente es como una marca esto es un placeholder va en la tienda en la propia tienda lo que va a mostrar es el producto imagen, título, o sea porque no deja de ser como un shortcode ¿vale? eso lo que pasa es que está hecho en bloque y pues también lo podemos mover ahí a hacer la petición al servidor y saca toda la información de producto estos bloques evolucionarán ¿vale? en un futuro vamos a ver un poco que podemos personalizar ahora en una tienda de WooCommerce con bloques ¿vale? primero vamos a diferenciar porque a lo mejor no todo el mundo está familiarizado la diferencia entre tema y plantilla ¿vale? o sea estos son temas de WordPress ¿vale? que también hay temas de WooCommerce un tema define los estilos hay veces incluyen más funcionalidades pero debería definir solo los estilos del sitio entero ¿vale? y por otro lado la plantilla son las partes de la tienda ¿vale? que se pueden personalizar una a una esto antes para los que programábamos era cuando te metías los archivos de la plantilla de PHP y tenías ahí el archive el index ¿el no sé qué? y ahora te aparecen en el propio editor ¿vale? y como podemos ver WooCommerce ya incluye los suyos propios incluye el catálogo de productos los resultados de la búsqueda de productos la plantilla por etiqueta y la página sin el propio producto ¿qué implica esto? que podemos entrar en el editor en cada una de ellas y poder modificarla ¿qué ha conseguido? o sea ¿en qué han trabajado el equipo de WooCommerce? en que cuando yo elija una plantilla de bloques ¿vale? por ejemplo la de Tobi, esa que está ahí al lado que es una plantilla de bloques no está pensada para WooCommerce de momento de un autor y la ventaja es que con el trabajo que hemos hecho podemos ver como la plantilla los estilos se adaptan automáticamente eso es una manera de poder no tener que utilizar temas propios de WooCommerce podemos utilizar temas de bloques y en WooCommerce van a funcionar eso es lo más poderoso esta es la nueva 2023 que entonces sin vuestras tiendas de prueba cambiáis podéis ver cómo cambian los estilos así ¿qué más? podemos modificar que esto es muy bueno, en la última versión podemos añadir plantillas por producto o categoría ¿vale? esto nos permite cosas muy chulas podemos decidir cambiar la página de producto para un producto en específico ¿vale? o sea podemos poner ahí el producto de Albul y añadir como podéis ver ahí diseñado horriblemente en azul y con un borde oferta solo hoy y mañana un enlace un lo que queráis y eso solo se va a ver dentro del producto específico ¿vale? abajo podéis ver que está el producto individual y luego en el frontal se vería todo más cosas estilos globales ¿vale? ahora en la entrada también de 6.1 y creo que la 6.0 ya estaba también podemos definir estilos globales dentro de un tema ¿vale? ventajas de eso podemos crear por ejemplo tenemos el bloque del listado de categorías podemos definir a nivel de bloque o a nivel global del entero del sitio decir oye quiero todo el color rojo entonces ese bloque que se muestra tanto en el catálogo de productos o lo podemos añadir luego en el producto individual lo podemos añadir donde queramos va a mantener si está definido estilo global bueno en global cambiaría todos los textos a rojo y también lo podemos definir a nivel de bloque ¿vale? o sea dentro de una opción podemos decir oye quiero que el bloque de categorías siempre se vea de color azul o siempre se vea de tal y ese bloque compartirá esos estilos en todo el sitio variaciones de estilos esto lo hemos incluido en la 6.1 ¿vale? y es una opción que a golpe de click podemos cambiar colores, tamaños, fuentes ¿vale? de todo nuestro sitio entonces aquí podemos ver varios ejemplos ¿vale? esto es 2023 es la misma plantilla que puede cambiar de estilo a golpe de click vamos seleccionando, vamos guardando, nos quedamos con la que nos interesa vamos al futuro vamos a ver qué presenta el equipo vamos al bloque más importante que vamos a crear es el de lista de productos está en beta por así decirlo vamos a trabajar sobre él y nos va a permitir personalizar un montón de cosas ¿vale? podemos ver el número de columnas el número de filas la opción de poner todos en fila o que suban abajo si tienes un texto más alto podemos cambiar o sea que se muestre o no imagen, título, precio opiniones, lo que sea ventajas de esto va a trabajar sobre el propio bloque de lista de contenidos de core lo va a extender un poquito con las opciones propias mejorará seguramente el propio de core y encima va a ser la evolución de los productos clásicos por categoría, portal, portal en un futuro van a estar basados en este bloque de tal manera que sea mucho más personalizable vamos a empezar a meter patrones tanto en los bloques de filtros patrones no sé si sabéis lo que es pero básicamente es como un modelo de cómo quiero colocar los filtros en vez de tener que colocar los filtros uno a uno y poner los estilos, la posición y demás esto ya viene como prefabricado esto se va a poder añadir así, a golpe de clic y ya te salen todos los filtros puestos, en fila, en columna, etc etc aceleramos vamos a tener más patrones para filtros aquí hay dos ejemplos, uno con stock uno con filtro de categoría y opiniones y otro sin él va a haber más patrones no se ve muy bien, lo podréis ver en un futuro para headers y footers para que no tengamos que andar haciendo el header y el footer que también es lo más complicado simplemente patrones que ya nos listarán productos, categorías y demás y más patrones y más patrones y por último vamos a pasar todo a bloques el futuro de Google Commerce si va bien, uno de los futuros que queremos es cuando tengas una plantilla de bloques todo funcione con bloques y por último vamos a añadir más bloques en un futuro en los cuales estamos trabajando que básicamente es uno para opiniones de producto las clásicas reviews con las estrellitas y toda la vaina, un bloque de galería de imágenes el producto y el bloque de migas de pan breadcrumbs, estamos trabajando en él también pues la típica navegación por categorías arriba esos serán los bloques más cercanos que vamos a ver quiero estar a la última página de GoogleCommerce.com barra customize, podemos ver lo que queramos ahí en el blog van actualizando que va a haber en 2022 el blog de desarrolladores y por último si sois más de picar tenéis GitHub empezamos una rondita de preguntas si tenéis algo que preguntar sobre lo que nos ha contado Carlos levantad la mano y os pasamos el micrófono preguntas a la una hay dos hola cuando crees que saldremos de la versión beta en fused en fused del editor no tiene que ver con GoogleCommerce lo que nos encantaría sería que la siguiente versión la 6.2 que suele ser para enero, febrero, marzo primer trimestre el equipo de core se está centrando mucho en estabilizar todo lo que hay esa sería la salida de beta luego siempre se pueden complicar las cosas osea iremos viendo lo ideal 6.2 que puede pasar pues 6.3, 6.4 esperemos que no, esperemos que al final de 2023 este osea eso sería el peor de los casos yo creo esto es lo malo que queda grabado es una pregunta ha dicho uno de core que terminéis el año que viene la idea es eso de ahí a lo que surja Open Source es complicado va despacito, lo revisa mucha gente de empresas que es complicado pero bueno yo creo que ya se pueden ir haciendo ya podéis, sitios a lo mejor muy grandes es un riesgo mayor pero sitios pequeños mi recomendación es probarlo de momento a ver yo trabajo sobre todo en el editor pero yo ya me ha acostumbrado yo ya uso solo el editor ya lo otro me parece como buf pregunta por ahí te quería preguntar yo tengo un tema que no es el 23 es el Astra, entonces luego las plantillas las pueden encontrar o no, ya me dedico solo Astra eso dependerá de Astra, osea nosotros si tienes una plantilla de bloques te va a aparecer todo el listado de las de WordPress te van a aparecer por defecto si Astra en su plantilla activa los bloques y activa las plantillas te aparecerán los desarrolladores de Astra tienen que decidir en la última versión en la 6.1 hemos añadido una opción de código que es una línea zip-loom que la pones y te permite definir secciones de la plantilla al editor de bloques entonces Astra ahí puede decidir que hacer pasarse una plantilla de bloques entera o directamente decir oye pues queremos que una opción que la cabecera se haga con bloques o que el sidebar lateral se haga con bloques o que el footer se haga con bloques pero eso lo deciden los desarrolladores de esa plantilla y tú que eres experto que plantilla utilizarías para que para un sitio para una tienda web para una tienda online es una pregunta complicada por eso te la hago 2023 es la plantilla por defecto yo para una tienda a lo mejor no la utilizaría porque no está centrada en plantillas es una plantilla un poco más global es que esto es por donde es imposible es muy complicado si pero bueno yo iría a cualquier plantilla de empresa o sea de plantillas de Gucomers, de Geed de más estarán bien nosotros por defecto en Gucomers tenemos Storfron que para una tienda pequeñita también te puede valer pero es fea gracias también podéis hacerlas vuestras propias ahora dentro de poco con el editor y demás ya dímelo a mí yo que diseñando soy muy malo alguna pregunta más la última a la una a las dos pues charla terminada africada lo agradecemos