 Venga, pues vamos con el siguiente ponente con José Ángel Bidánea, es diseñador web freelance de Alcalá de Nares y lleva utilizando WordPress como herramienta de trabajo desde finales del 2005, bajo la denominación V de Bidánea en vdebidánea.com. Es formador de cursos presenciales de HTML, CSS, JavaScript, WordPress y WooCommerce en la Academia Ondas Formación de Alcorcon, Madrid, desde 2013 y también es formador online en la plataforma boluda.com y curso.gutembert.com. ¿Es curso.gutembert o cursos? Curso.gutembert. Sí, vale, está bien. Curso.gutembert. Si te interesa saber algo más sobre él, puedes seguirle en Twitter en arroba.javidánea, que es donde suele compartir enlaces acerca de WordPress y WooCommerce. Gutembert, artículo relacionado con diseño web y de vez en cuando se deja llevar por su pasión futbolera. Os dejo con José Ángel y su ponencia Gutembert desde 3 puntos de vista 2.0. Un aplauso para él. Gracias a todos. Bueno, lo primero, como podéis ver, ahí no pone 2.0, sino que pone 20.20. 20.20. Era un poco de no de confusión. Realmente, está... Ni palante, ni para atrás. Vale, ¿no tendrá pila? ¿Está pagado esto? Está pagado, está pagado. Está pagado. Así. Hey. Hago spoiler por ahí. Bueno, vamos rapidito. Lo que os decía. Esta es una versión, digamos, 2.0, de una charla que fue la primera charla que yo di en Work on Madrid en 2018 en abril. Vale, cuando del mundo Gutembert, pues prácticamente se sabía poco o nada dentro de las workas nacionales. Me animé a hacer esa charla. No sé muy bien el motivo. Bueno, lo expliqué en Zaragoza. Fue un poco una locura. Pero, bueno, estoy súper feliz de haber dado esa charla. Esta charla de hoy es la versión evolucionada de aquella charla. O sea, no solo es la versión 2.0, sino que es la que os habla de las novedades que hay ahora dos años después de esa charla. El 7 de diciembre de 2018, como todos sabéis, fue el fin del mundo de WordPress. Fue ese momento en el que llegó la versión 5.0 de WordPress. ¿Y qué pasó? Pues que se suponía que iba a dar al botón de actualizar y que todo iba a explotar, todo se iba a dejar de funcionar, etcétera, etcétera. Eso hasta donde yo sé no ha pasado. ¿La ha pasado alguien de los que está en la sala que haya dado al botón de actualizar la versión 5.0 y de repente se haya quedado sin página web o sin WordPress, todo haya dejado de funcionar? No, ahora lo que tenéis, es que estamos a 29 de febrero, fecha pisiesta y ya tenemos bloques para todos. Esto es un auténtico festival. Ahora entréis donde entréis, vais a ver bloques para todas vuestras instalaciones de WordPress. Vais a ver colecciones de bloques, vais a ver bloques en solitario, vais a ver que todo ha cambiado, o sea, todo el ecosistema ha cambiado. ¿Qué ocurre? Pues que al final ejecuten, pero ese nuevo editor nos afecta a todos nos afecta desde diferentes puntos de vista, porque depende cómo tratemos nosotros con WordPress, nos afectará de una forma u otra. ¿Qué hago yo en esta charla? Yo en esta charla lo que digo son qué cosas afectan a los diseñadores, qué cosas afectan a los desarrolladores y qué cosas afectan por final a los que son usuarios que simplemente entran dentro de su página de WordPress. Vamos a comenzar por los diseñadores entre los que yo me incluyo. Los diseñadores que en un principio eran los que menos problemas iban a tener, ahora van a ser los que más problemas van a tener, como vais a ver en breve. ¿Qué tenemos disponibles desde hace mucho tiempo a la hora de crear un tema en nuestro sitio web con WordPress desde esa versión 4.5 o 5.0? Tenemos estilos por defecto de los bloques del core. Tenemos un alineamiento ancho y un alineamiento completo en el editor. Tenemos una paleta de colores personalizada que nosotros podemos alterar a nuestro gusto, también tamaño de fuente personalizado y luego también lo que podemos hacer es decir, no me gusta ni el color personalizado ni los tamaños de fuente personalizado, los deshabilites. También existe, ahora que está muy de moda, eso del tarmode, el editor oscuro del propio editor de WordPress, que no sé, ¿muchos sabéis que esto existe o seguís funcionando con el editor de toda la vida en blanco con sus colores? Vale, lo podéis transformar con una única línea de código. También podéis encolar estilos en el editor, cambiar el ancho del editor, incluso hacer que los contenidos, todos esos vídeos, audios que subáis, cuando lo subáis, sobre todo los vídeos, son responsables de forma automática, tanto en vuestro editor como en vuestro tema y vuestra plantilla. Cositas que han añadido nuevas, más o menos recientemente. Ahora lo que tenemos son gradientes. Los gradientes es esa cosa que les gusta, los que de verdad son diseñadores, que les gusta mezclar colores sin sentido. Yo recuerdo cuando era pequeñito que iba al parque de atracciones y había una cosa que tú cogías la mano con un color rojo, toma un color verde y eso empezaba a girar y te daba un cuadro, como los que venden por millones ahora en hartas tracts. Eso, ahora ya se puede hacer dentro de Gutenberg con una única línea. Hacín support editor gradient presets. Como veis, lo que os crea es un color, por ejemplo, en este caso de superposición, podéis elegir entre un color sólido o un color degradado. Ahora hay unas cuantas combinaciones por defecto, pero vosotros, luego, dentro de esa línea, podéis crear el gradient del tipo que os dé la gana. Podéis jugar con el radio, con el ángulo, con la opacidad, eso lleva muy poquito. Muy poquito lleva dentro del editor. También tenemos estilos de bloque. Los estilos de bloque simplemente CSS. Quien sepa CSS puede crear un estilo de bloque con la locura que le venga en gana. En este caso es una imagen y la imagen lo que yo tengo son estilos diferentes creados con CSS. Tengo, por ejemplo, el de por defecto. Lo tengo redondeado. Lo tengo en hexágono, en rombo, en estrella o en ese tipo de comentario. Yo simplemente pincho ahí o en este caso pincharía al cliente y yo tendría la imagen que haya subido con el estilo que está aplicado. Lo único que se necesita, como digo, es conocimiento de CSS porque el resto y el JavaScript es copiar y pegar porque no cambia nada. Son dos líneas de JavaScript que nunca cambian, son inalterables. Lo único que tendríais es que declarar vuestro CSS. Otra cosilla que lleva bastante tiempo entre nosotros y cada vez van mejorando más y es lo que al final va a generar el futuro nuestros temas son las plantillas de bloque. Es decir, crear una plantilla que ya la das predefinida con un contenido de prueba y simplemente el usuario lo que va a tener que hacer es sustituir como cualquier constructor visual que hay ahora actualmente. Vosotros subís, tiene una librería que ya tiene una plantilla creada le dais, cambiáis fotografías, cambiáis textos, ya está todo. Eso dentro de nada, de hecho ya está si lo queréis utilizar, ya lo tenéis en el nuevo editor. En cuanto a temas si queréis experimentar un poco los temas y ver cuáles son los temas que mejor adaptados están al nuevo editor y que tienen todas las funcionalidades y aprender cómo crear vosotros un tema desde cero que funcione perfectamente con el nuevo editor pues el mejor ejemplo es 2020. Ese tema a nivel diseño puede ser más bonito, más feo eso será a gusto del consumidor pero dentro de sus entrañas dentro de su código es donde ves todas esas funcionalidades que yo he explicado hace un momento y veis cómo poder integrarlas en vuestra web entonces si queréis trastear y crear un tema de cero abrir este tema y destriparlo y ver cómo funciona. Otro tema que está bastante bien es el tema Go. El tema Go lo creo Rick Tabor que iba a decir un tío es un tío es un tío que lleva desde el inicio que ha salido el nuevo editor lleva trabajando con ello y es de los que va metiendo muchas funcionalidades nuevas y muchas capacidades es tan bueno que llegó GoDaddy que es una empresa que le sobra los billetes y yo te contrato a ti solo para que me hagas este tema y bloques a medida mismo caso que tu en 2020 que es de un desarrollador danés no, danés no, sueco que es Anders Noren y es otra de las personas que deberíais seguir en Twitter si os interesa todo este tema de los temas entonces esos dos temas yo son los que cojo y cuando quiero hacer algo a parte de la documentación de WordPress voy, entro, miro como hacen las cosas y a continuación copiar y pegar ya sabéis que el universo se va a copiar y pegar pero luego sustituir y entender como decía Daniel en su charla tienes que saber leer el código de nada te sirve ver letras y tú sustituir letras tienes que saber lo que tienes que saber lo que eres temas de WordPress en el futuro cuando estuve buscando una imagen dije solo hay una imagen posible es el supercoche el supercoche este de Homer Simpson que todo el mundo conoce de los de los Simpson ¿vale? ¿Por qué? pues porque ni los propios creadores ahora del nuevo editor saben como van a ser los temas de WordPress en el futuro nos están dando unas pequeñas pinceladas pero son pequeñas pinceladas que no sabemos a dónde van a ir o dónde van a dejar de ir tenemos que ver un poco por dónde va a evolucionar qué pasa que ahora mismo existe esto si instaláis el plugin de Gutenberg abajo tendréis una pestañeta que pone experimental y en esa pestañeta que pone experimental tenéis edición de sitio completo esto al final es coge parte de contenido de un tema coge los bloques del core y lo que crea son plantillas de bloques como las que hemos visto antes con eso que haces ya creas toda una estructura y tú sustituyes el asunto está que el header y el footer PHP que hemos conocido toda la vida están integrados como un bloque si veis esto tiene que llevar aquí pone footer ¿vale? ya no va a haber que crear una plantilla no, va a ser visual se lanzó una versión 7.6 hace nada de Gutenberg hay unos nuevos bloques y un bloque era el de meta por ejemplo para debajo de donde tú creas tu artículo poner la meta y uno de autor para poner tu nombre de autor ¿vale? la edición de sitio completo al final es algo parecido a esto una hoja de estilos está en el punto CSS que estáis acostumbrados toda la vida a utilizarla si tenéis temas una hoja de Functions.php ¿vale? y el Block Templates donde van incluidos los archivos que hemos utilizado toda la vida cuando creamos un tema y luego lo que era Content Parts pues ahora son Block Template Parts y ahí se irá sustituyendo problemas con los que se enfrentan como por ejemplo coges y creas un bloque de header y te cargas toda la información del head del HTML eso lo tendrán que sustituir ahora estaban probando y practicando el JSON que es un formato intercambiable de archivos que tú coges subes ese JSON y de repente te pinta toda esa información todo esto está en completo desarrollo es decir, esto que hoy yo se estoy contando aquí dentro de tres meses igual ha llegado a alguien con una idea mejor o con una idea peor y dicen vamos por ese camino pero a día de hoy es esto los desarrolladores son los que más tranquilos van a vivir su única problemática es cómo tienen que pegarse con los cambios que hacen de desarrollo porque son desarrollo constante si a mí me cambian todos los nombres de una función o me cambian todos los nombres de un elemento vale o de una propiedad pues todo eso que antes funcionaba ahora de repente me deja de funcionar me explota la cabeza mira donde es, la documentación no hay nada pero luego en un posi que la han puesto ese es el verdadero problema que van a tener los desarrolladores aprende javascript más claro agua y aprende primero javascript no aprendas real real lo utiliza WordPress para crear los bloques pero va por una capa que va por debajo más cositas, saber real para nada para poder crear un bloque ahora si no sabes javascript no vas a poder hacer nada luego para mí la combinación de si sabes WordPress sabes javascript y encima sabes real o ya puedes hacer todo lo que te dé la gana pero sabiendo WordPress y sabiendo javascript vais a poder crear el bloque personalizado que os venga en gana más cositas la función con la que creamos un bloque que es el de la web veis que hay diferentes ajustes o propiedades en este caso que serían title, description, category icon, keywords, styles, attributes sample, variations transform, parent, supports edit, save si creo un bloque tengo que utilizar todos esos ajustes no solo tengo que utilizar los cuatro que llevan es asterisco es decir le tengo que poner un título el bloque le tengo que poner una categoría y luego los atributos de editar y salvar también los tengo que poner sí o sí el resto de opciones pues la descripción es una descripción del bloque keywords es para cuando haya un directorio de bloques encuentran tu bloque por ese keywords styles es para los estilos que os he dicho antes con el tema sample es que vosotros ahora cuando dais al botón de un bloque en añadir bloque os aparece al lado derecho un panel en el que expone este bloque sirve para hacer tal, tal, tal pues ahí iría sample, vale cada uno transforms para la función está de transformar bloques que sabéis que existe entonces cada uno tiene una función la realidad sabría que ver un poco que hace cada una esto al final de forzarte a coger y crear un bloque personalizado pues aprendes a saber cómo funciona cada uno vuelva a repetir mismo ejemplo que con los temas si queréis cogeis un bloque de alguien que lo ha creado, abris el código es código GPL veis como lo ha hecho y replicáis y cambiáis el código a vuestro a vuestro antojo, nadie nace enseñado y más que esto es relativamente nuevo que debo aprender si soy desarrollador a pegarme con la block API y que la block API lo que lleva es una función para registrar cualquier bloque que es register block type tenemos la filter reference que ahí es donde vienen todos los hooks todas esas acciones y filtros que podemos hacer al nuevo editor los fills son los componentes del editor esa barra lateral meter información en la barra lateral de los bloques y luego rich text es dentro de lo que es el editor todo lo que tenga que ver con ese mundo del formato de códigos de poner negrita cambiar colores etc en todos los bloques que sean editables si el bloque no se puede editar no sería necesario handbook importantísimo si tenéis cualquier duda ya sabéis donde acudir hay un handbook se va actualizando ahí tenéis toda la información del editor tarden más o tarden menos toda la información sobre el editor de bloques aparece ahí este proyecto a mí me encanta es un tío que se llama Nick Hanze y hace los bloques más locos que te puedas ocurrir además tú tienes una pedrada se lo dices y el tío la desarrolla cuando digo pedrada es en sentido jocoso pero por ejemplo para retransmitir en directo en stream uno que lo que hace es ghostwriter de eso la funcionalidad esta que parecen que están escribiendo y está el cursor todo el rato parpadeando son bloques de cosas ahora ha subido uno con el que puedes crear memes dentro del editor puedes crear tus propios memes tiene un montón de locuras lo que hace es algo parecido como era Cengarden en CSS que era una plantilla para que tú cogieras y tú hicieras tus movidas desarrollas tu CSS tú le dices una locura él la desarrolla y si ya eres desarrollador los dos juntos y dáis formato a ese locurón esta web entrar en ella tiene ejemplos de plugins muy simpáticos y muy chulos usuarios los usuarios al final están afectados tanto por los temas como por el desarrollo que te hayan hecho como por todo en general porque al final son el último eslabón de la cadena primero siempre instalar el plugin de Gutenberg con él tendréis las últimas actualizaciones del nuevo editor de WordPress del editor de bloques que siempre hay que ayudar también al desarrollo es maravilloso instalarlo y que te pega un petardazo y nada funciona no lo hagáis en producción hacerlo en una web de pruebas con esto vais viendo todas las cosas nuevas que hay esa edición de sitio completo que mostré antes con los temas eso está disponible sólo si instaláis el plugin de Gutenberg todo lo que yo he hecho en falta la transición del editor clásico al editor de bloques de Gutenberg lo tiene este plugin editor skit para mí impepinable este plugin tiene que ir instalado a la vez que se instala el de de Gutenberg todas esas cosas como todo el mundo que siempre pregunta cómo vuelvo a justificar mi texto en WordPress si yo digo que no lo justifiquen cuando lo quitaron era porque había un motivo que lo quitaran pero la gente te dice que a mí me gusta todo el texto justificado te instalas este plugin tiene un botón todo el texto justificado todas esas opciones que antes veíais en el editor clásico que tenía esa barra Rojo Word Excel y que ahora ya nos aparecen dentro del editor de bloques editor skit las replicas también tiene opciones como por ejemplo el ocultar un bloque móvil el ocultar un bloque en tablet o el ocultar un bloque en desktop ahora que todo vamos a ese mundo de que en cada dispositivo se ofrece una cosa diferente con este plugin podéis decir este bloque que solo se vea móvil la única pega que le veo es que dentro de tu web vas a tener dos o tres bloques un poco estéticos y que ninguno te pone este es para móvil este es para desktop, este es para tablet con lo cual puedes llegar editas sin querer el desktop y estás editando el de móvil lo estás cambiando y te puedes volver tu mismo te puedes volver un poco loco pero ya digo este plugin para mí es imprescindible instalarlo más cositas desde hace un tiempo ya todo eso de no puedo crear una estructura en el editor de bloques pasó a mejor vida ahora ya está el bloque de grupo que trasladado HTML es un div y el bloque de colundas como si tienen alguna pequeña carencia pero con él ya podéis desarrollar la estructura que os venga en Ghana la combinación de los dos bloques es un win-win entonces siempre utilizarlo podéis crear un formato como esa estructura esos son tres colundas dentro de un bloque de grupo colecciones de bloques en Zaragoza había 70 ahora ya imagino que eran por 80 la gente se apuesta a desarrollar colecciones de bloques a lo loco si queréis instalar una colección de bloques que sé que de verdad la necesitáis y instalar una no instaléis todas las colecciones de bloques del mundo estoy haciendo un curso con unos alumnos yo les digo colecciones de bloques todas las colecciones, las 10 colecciones instaladas y activas a la vez entonces tenía un berengenal el pobre chaval dentro de su web tremendo porque ya les superaban las opciones que tenía mirar una si os vale utilizar esa y listo hay un montón la primera es de las más conocidas que es la de Gutenberg Blocks Ultimate Add-ons porque está desarrollada por la gente del tema de Astra también tenéis co-blocks, cadenblocks canta, otterblocks, atomicblocks hay un montón lo mismo gestor de bloques, esto lo tenéis en el menú es de kebab descubrí que se llaman los tres puntitos menú de kebab el gestor de bloques lo que tiene es que tú puedes decir que bloques se utilizan, que bloques no se utilizan bloques que no utilizéis, deshabilitarlos no son necesarios para nada librerías de bloques, a esto va a tender los temas y va a tender WordPress con su editor todo va a ser librerías precargadas que tú le das al click te precarga esa estructura y tú lo que haces es sustituir contenido va a ser todo completamente visual la misma persona que hace el plugin editor's kit tiene esta web, que es ser a block lo que tiene son plantillas con estructuras que tú las descargas en un archivito JSON y luego lo importas a través de JSON hace simplemente la rastra a donde tú lo quieras mostrar y ya tienes la estructura creada y sustituyes contenido y lo único que tienes que hacer es sustituir fotografías, textos etcétera es decir, el nuevo editor de WordPress al final para los usuarios se va a convertir en un 3kliks sustituyo contenido usuarios de WordPress en el futuro qué cositas van a tener van a tener un directorio de bloques cuando no haya un bloque específico del core para esa funcionalidad si buscas, por ejemplo, Twitch como no hay uno del core te sale uno que está en el repo problema no puede haber rollo freemium no puede haber ningún tipo de publicidad han puesto unas unas leyes y unas restricciones bastante estrictas en ese caso pero para darte a conocer si creas bloques es una muy buena es una muy buena forma voy terminando bloque de navegación os dije antes que gdrphp y futrphp lo que se ha creado es un bloque en ese bloque de navegación donde teníamos el menú las opciones de apariencia menú importamos ese bloque que tengamos seleccionamos el bloque ahí quiero utilizar este menú directamente ya tienes tu menú de navegación esto también lo podéis probar si tenéis activo el plugin de Gutenberg en experimentos yo sigo pensando que el futuro de WordPress es que todo es al final por mucho editor clásico que haya por ahí corriendo vais a acabar amando Gutenberg soy José Ángel Vidanea como me presentaron antes estoy en vdvidanea.com tengo un newsletter que prometo que en marzo a partir del día 9 va a volver a salir a partir del día 9 es que ya termino por fin y ya puedo volver a hacerla mi twitter es a robajotavidanea si queréis comentar algo ya sabéis el hashtag vwc muchas gracias me encanta me encanta recomendar cuando tenga vida que en una semana vuelve tenéis alguna pregunta para José Ángel seguro que sí alguna pregunta ah mira allí donde muchas gracias por la ponencia una cosilla en el gestor de bloques cuando tú desactivas un bloque simplemente desaparece a la hora de la pantalla de usabilidad cuando tú vas a añadir el bloque o también por ejemplo si ese bloque tuviera asociado un JavaScript desactivaría desaparece el bloque como tal desaparece el bloque en el editor ya no lo puedes volver a utilizar si tuviera algo relacionado entiendo que que vuela porque si es un archivo de javascript que va unido a un bloque y si el bloque no puede estar activo si haces la llamada javascript lo que te va a decir te va a tirar un error que no funciona muchas gracias alguna otra pregunta que va a pasar cuando salga todo digamos el repositorio de bloques si va a casar con todas estas colecciones de bloques se van a tener que dividir todos sus bloques a uno y subir todos los bloques al repositorio se van a quedar plugins con colecciones de bloques o eso ya no va a asistir es una buena pregunta hablando con Fernando Tellado los dos llegamos a la conclusión de que el asunto será que probablemente gente lo utilice para promocionarse en el sentido de darse a conocer ese directorio de bloques lo que está restringido es que tú hagas ningún tipo de promoción estamos acostumbrados a instalar cualquier tipo de plugin en el repositorio que tiene una versión pro que te está bombardeando con mil notificaciones cambiate a pro, ten este descuento ten tal, ten cual eso en el directorio de bloques no va a poder asistir entonces la única forma de la que tú puedes crear marca es subir muchos bloques pequeñitos sueltos que para mí es el mejor formato porque si solo necesitas un bloque no tienes porque instalar toda una colección si tú quieres un carrusel no sería gran idea que quieras un carrusel pero si tú necesitas un carrusel vale, pues instalas das un clic y ya tienes el carrusel no tienes que instalar toda una colección con 20 bloques para poder utilizar el carrusel si van a desaparecer las colecciones si empieza a ver muchos bloques chiquitos que hacen funcionalidades y la colección ya no tiene sentido como tal en mi opinión te quería preguntar ahora con Elementor que casi todo el mundo utiliza Elementor como va a ser la transición de Elementor a Bloques sobre todo pensando de que no hay que hacer webs desde cero porque se tomó la decisión de Elementor como dicen esta semana la decisión de Elementor es crear un software a service es crear su propio editor web sin necesidad de que tú utilices de que tú utilices WordPress dentro del mundo WordPress entiendo que seguirá funcionando exactamente igual que ahora ahora mismo Elementor que corroboro es un personalizador a lo bestia cualquier opción que tengas dentro puedes personalizarla y puedes editarla yo voy que a lo que tú haces con el plugin gratuito de Elementor a día de hoy lo puedes hacer con el nuevo editor de WordPress sin ningún tipo de problema porque toda esa función ahí es pro lo que te requieren es pasar por caja y como va a expandirse Elementor ahora después de esos 15 millones que le han dado eso es como la pregunta al millón a saber qué hacen las grandes mentes pensantes de Benpims y toda esta gente habrán hecho su plan pero todo pinta a que lo que van a crear es un creador web externo Rojo Wix WordPress etc pero ya digo que eso son lo que se dice los mentideros porque todavía ellos no han salido nada tenéis alguna otra pregunta aprovechad que tenéis aquí aprovechad si bueno luego si me queréis pillar por ahí por banda no tengo más preguntas entonces pues vamos a dar un aplauso José Ángel muchas gracias después estoy en on antes es que estaba no