 Bueno, buenas tardes a todos. La charlada de esto de cómo crear bloques es de cero. Mi perspectiva es la de, yo hace mucho tiempo que trabajo haciendo webs y he trabajado mucho con temas clásicos. Y con temas de bloques, no, ha hecho uno y ya, nada más. Entonces, de vosotros, no sé si alguno de vosotros ha visto ya algún tema, vamos a empezar, alguno ha creado alguna vez un tema de bloques, lo que estáis aquí. Uy, no guay, está ahí como que, casi. Está haciendo el proceso, ¿no? Vale. Y temas clásicos, alguno ha creado temas clásicos. Sí, no guay, también. Mi perspectiva es esa, ¿eh? Mi perspectiva es la de haber trabajado con temas clásicos y ahora enfrentarme a esto de los temas de bloques. Pues eso, con la mirada esa de ver los cambios que hay entre uno y otro. De todas maneras, vamos a hacer un repaso un poco de cómo se crean los bloques, en general, o sea que si alguien no ha creado nunca un tema, no os preocupéis que vamos a hacer un poco de repaso de todos. Este aquí soy yo, que me llamo Fran Rosa y soy Wolpes Developer, que es un cargo súper estupendo, sobre todo si vas a hacer una sala sobre Wolpes, queda fantástico. Además, tengo ese cargo de Wolpes Developer, aunque trabajo en una empresa que se llama Volcani, que es de la Garrocha, pero en desarrollo pasa estas cosas. Que hablamos medio en inglés, medio en castellano, medio en catalán, medio un poco de todo. Que sepáis también, que esto significa que seguramente la charla habrá para ser inglés alguna parte, he intentado que no, pero si veis alguna o tenéis alguna duda, no tengáis problema en decirlo. Entonces, yo soy desarrollador ahora y técnicamente es la pianeta que soy desarrollador. O sea, llevo haciendo webs desde hace unos 20 años, soy muy mayor ya, pero básicamente siempre he tenido el título de diseñador, que además he ido haciendo desarrollo, pero nunca he tenido como título ser desarrollador. Básicamente porque me he dedicado a parte de Frontend y bueno, siempre he habido, ahora sí que existe el desarrollo de Frontend y antes el Frontend era maquetador y poco más, ya está. Pero entonces mi perspectiva es esta, ahora que empiezo a ser desarrollador y que estoy más involucrado con la comunidad de Wolpes en general, pues se planteaba como una necesidad, primero hacer un blog y hablar de las cosas que voy aprendiendo, que voy descubriendo y en base a que haga ese blog propio, pues pensé, pues estaría bien tener un tema propio y que fuera de blog es y que fuera moderno y que no estuviera, que no estuviera un poco viejo uno. Entonces, qué me plantea yo ahora hacer el tema? Veis que no es un tema muy ambicioso, pero el verdad es que era un tema basado en texto, sin imágenes, lo cual es muy extraño, sobre todo si no llevo diseñador, pero básicamente es como siempre pasa, cuando hay una tendencia, hay una contratendencia, pues esté a tendencia de poner imágenes porque sí a todos los blogs de entrar en la web de Ansplash o cualquier otro recurso parecido y coger imágenes gigantes, aunque sean imágenes de archivo y no tenga mucho que ver con lo que haces, pero poner imágenes cada vez más grandes, más pesadas, igual no hace falta y que ahora fuera visualmente atractivo, que esto ya es muy opinable y accesible, que es algo que sí me preocupa, sobre todo en utilizar la tipografía o así que más de colores. Entonces, el tema que he creado es este, esto es un par de páginas de mi blog, la portada y la página en la about, la página sobre mí, porque como he dicho antes, pues el blog también está en inglés, o sea, para que sepáis que siempre creáis pantalones o hasta todo en inglés porque el blog es así. Como veis, una cosa muy sencilla, uso de textos muy grandes para tener un poco de intervisual, la imagen mía de la página de About es una de las pocas imágenes que hay, aparte de algún post o una imagen ilustrativa y también el tema de este es que hay colores que va cambiando, depende de las secciones, por ejemplo tiene un blog que tiene los proyectos, que es un custom post type que básicamente he puesto el tema que he creado y un plugin que también he probado, he hecho un bloques y que tiene unas particularidades, como por ejemplo el tema de las tocas del código, que son como muy visibles, estamos resaltados, porque parte de la gracia del bloque este es ir compartiendo desarrollo que voy haciendo, entonces las partes del código son importantes, que se vean bien. Pero esto es más, lo que he dicho antes, no es un tema muy ambicioso, pero que sepáis que eso que ahora mismo en WordPress hacen falta, que se creen más temas de bloques, o sea que cualquier opinión que tengáis. Me refiero que no hace falta que os planteéis el tema como una cosa muy gigante, sino cualquier punto de vista que tengáis ahora el plan de un tema es interesante, que lo tengáis, que lo planteéis, que queréis el tema y aunque no vaya a ser un tema que luego vayan a usar miles de personas, pero sí que es un tema que puede ser que alguien lo baje, alguien lo pruebe y a partir de ahí tengo una idea para crear un tema distinto y muchas veces toda la comunidad evoluciona así, teniendo más que grandes ideas, grandes proyectos, pequeñas ideas que van sumando unas con otras. O sea, yo recomiendo que lo intentéis, no ha sido tan traumático, por eso es mi caso. Vale, diferentes temas clásicos y temas de bloques. Supongo que incluso los que no habéis creado temas, sí que tenéis experiencia con los temas, bajando un tema, instalándole de más, sabéis que básicamente es una carpeta, con un montón de plantillas y a veces si el tema es un poco así, pues tiene más carpetas con asets y una cosa, pero básicamente es una carpeta con un montón de plantillas con un montón de nombres y algún césar por ahí. Pero si nos vamos a la documentación de WordPress, tiene una página específica que te dice ¿Cuáles son los cambios de crear temas con bloques o crear temas en plantillas? Que esta cosa está muy bien, aunque como casi toda documentación también, está la más nueva, está toda en inglés, está pente de traducción. Entonces, en esta parte que es lo que nos dice, primero, ¿Qué pasamos de trabajar con PHP a trabajar con HTML? Vale, esto a vosotros no sé si os preocupa mucho, pero es también parte de la cabeza. O sea, tener que poder crear plantillas sin PHP es como vale, y eso es como se hace. Lo veremos, pero es estas cosas que os tenéis que retantear mucho la idea de cómo tenéis de cómo funciona internamente un tema. ¿Otros cambios más así en global? Todas estas cosas que tenemos aquí, que son los template tags, los template tags, para que no lo sepa, porque no es un nombre muy común, son las funciones que usamos para sacar información en WordPress. El típico de title, de content, de author, todas se empiezan con D, o con get, si aquí es tener o con D, si aquí es pintar. Pero todas estas funciones que te pinta información que tienes en tu web, tu título, el título del post, el contenido del post, se llaman generalmente template tags. La lógica condicional, cuando hacemos en PHP cualquier cosa de introducir un if, un else, introducir lógicas dependiendo de si pasa esto, enseñame esta cosa o esta otra. El tema del loop, que es lo que suele mostrar los posts, sobre todo los listados de WordPress, aunque cuando haces un single también tiene un loop en teoría, pero básicamente cuando haces listados de posts tiene ese bucle que repite una vez por cada post que sale en el listado. Los widgets, que es una cosa que ha quedado ahora un poco más en desuso, el general tema del site bar y el tema de los widgets y el tema de los menus, que de hecho las últimas versiones ya no funcionan tan como antes, pero en general WordPress nos dice que todo esto de aquí se sustituye por bloques de editor. El único que hay de aquí que no tengo claro, o sea, el template tags es fácil porque hay bloques que son como esos. Hay un bloque que es para el título, un bloque que es para el contenido del post, ese tipo de cosas. El loop también ha tenido su propio bloque. Los widgets pueden ser bloques con funciones propias. El menu tiene un bloque que es la navegación. El único que yo lo veo muy claro es el tema del condicional, biffles, cuando ponen esta cosa en la tabla de WordPress, ¿qué querían decir con esto? Porque en realidad no existe un bloque con condicionales. Ellos dicen que usando las opciones de los bloques es como que ya usamos la lógica interna para estas veces las condiciones. Pero que sepáis que si no lo ves muy claro, este aquí, este punto en concreto, yo tampoco lo voy a ver muy claro cuando vi la lista. Luego tenemos esta otra parte, que es la parte de personalizar. El personalizado, el personalizador más avanzado que había antes, o la parte de custo11ss, que era básicamente un cuadro donde podíamos escribir nuestro propio CSS. Esto nos dice WordPress, que pasan a hacer las opciones, o lo que es el editor de sitio, que básicamente es el editor que nos permite usar el editor de bloques, pero para editar plantillas. Y características generales de nuestro sitio. Y luego hay una cosa también muy extraña en esta tabla, que es esta, que dice localizar que hay un texto, que sean traducibles, no se puede hacer. Que dices, vale, pues no lo pongas en la tabla, porque esto desanima bastante. Esto, luego lo veremos, no es exactamente así, tiene unas salvedades, se puede hacer de otra manera, pero básicamente las funciones y estas que existen, que es el barra baja x, barra baja e, el doble barra baja, que se utilizan para poner textos en nuestro tema, y que si cambiamos de idiomas se puedan traducir. Por ejemplo, así en el sidebar, que debemos poner que arriba ponga sidebar, o que ponga herramientas, algo así, pero que cuando cambiamos de idiomas sea traducible, normalmente utilizamos estas funciones. Al no tener PHP en las plantillas, no podemos usarlas. Un par de conceptos sobre los temas de bloques. Así más generales. Nuevamente con el tema de temas de bloques habla de todo esto, del editor de bloques y de Gutenberg y el editor de sitio full site editing. Esto, yo no quiero aportar confusión, lo hablamos un poco, pero a veces es un poco confuso, porque por ejemplo, Gutenberg en teoría es el nombre que tenía el plugin y el nombre del proyecto de cambio, de la manera de trabajar de WordPress, y en teoría Gutenberg se decía todo, pero como era un plugin que se utilizaba antes para utilizar un editor de post y de páginas, muchas veces cuando veis escrito por ahí Gutenberg, la gente se refiere al editor de bloques. Entonces, aunque el concepto significa eso, normalmente Gutenberg se puede referir también a eso. También hay partes, por ejemplo, en el github de WordPress, todavía se le llama Gutenberg al core este nuevo del editor de bloques de WordPress. Entonces, puede ser un poco confuso. Y luego, el full site editing como concepto, que en teoría también es el mismo concepto que Gutenberg, o sea, es como una manera de llamar a este nuevo paradigma hasta una manera de crear de WordPress, pero normalmente la gente cuando sale del full site editing se refiere al editor de sitio, o sea, las capacidades de editar plantillas y editar las opciones del sitio más allá de editar los post o las páginas como hacíamos antes con el editor clásico. Yo lo he puesto estas dos maneras, aunque como os he comentado, tanto Gutenberg con full site editing se puede aplicar a todo, porque hay una diferencia que hará entre los dos grupos. El de arriba, el editor de bloques, si os bajáis WordPress ahora y lo instaláis, unas versiones, no tenéis que hacer nada. Ya viene con el editor de bloques. Da igual que pongáis un tema antiguo, da igual que pongáis un tema clásico, que será un pechepe y todo el red, da igual. Podéis editar con bloques y el contenido de los post y las páginas, hacerlo con bloques. En cambio, la capacidad de editar el sitio, de editar plantillas depende exclusivamente de que tengáis un tema que se funcione con bloques. Por ejemplo, en WordPress, que es muy majo y que se permite hacer experimentos, por ejemplo, post en un tema medio de bloques, medio que no, unos con PHP, otros con HTML, si de repente decidís ponéis un WordPress en PHP, WordPress te lo acepta, se puede trabajar con ello. Pero la plantilla que se echen en HTML y con bloques lo podéis utilizar en el editor de sitio y la que está en PHP no. Entonces, mi recomendación o en esta charla lo que os quiero animar a todos es que vaya esa por la parte de abajo, a que sigáis todo la lógica de bloques en la creación de las plantillas y demás y entréis en este nuevo concepto de WordPress para poder tener todas estas ventajas del editor de sitio en todas tu web, en todas las plantillas. Porque ya veremos que luego con esto van a hacer cosas bastante potentes. Vamos a crear un tema. Ahora en directo no, os voy a explicar un poco cómo le crea yo, pero no me voy a poder hacer código ahora mismo. Entonces, ¿cuál es la parte básica de crear un tema? Porque hemos visto que el tema puede tener un montón de archivos y tal. Básicamente, el tema son obligatoriamente dos archivos. Que son un index.hp, que es una plantilla y el styles.sx, que es un archivo para poner estilos. Esto ha segurado la recomendación de WordPress y en realidad, vaya, son los dos únicos archivos obligatorios para poder crear un tema. Casi ningún tema tiene solo esos dos, tiene un montón de cosas más. Pero vamos a empezar con estas dos cosas, que son los dos puntos básicos de crear un tema nuevo. Por las plantillas ya hemos hablado antes, ya no va a ser en PHP, va a ser en HTML, pero ¿cómo funciona esto en HTML? Vamos a explicarlo pasito a pasito porque esto es un poco complicado o a mí me parece complicado. Igual a nosotros parece más sencillo que trabajar con PHP. Primero de las plantillas, no sé si habéis oído hablar de lo que se llama la jerarquía de plantillas, que es un concepto muy de WordPress. Ya mucho tiempo. Si buscáis en internet jerarquía de plantillas os parece este gráfico, que asusta mucho. Y aparte de eso es que tienes que aumentar un montón de veces en la legal para poderlo leer y no entiendes muy bien qué es. Por lo tanto, en la política en cómo WordPress decide que plantilla te muestra cada vez o que plantilla usa cada vez cuando entras en una página. Entonces, básicamente, la barra a la derecha WordPress lo que hace es ir de izquierda a derecha y a la que encuentra una plantilla usa esa. Si no encuentra ninguna, al final llega a la derecha de todo donde está index PHP, ahora HTML, porque aunque sea un bloc que es utilizada misma lógica, que el index lo muestra todo. O sea, cualquier cosa que no tenga una plantilla antes, no utiliza el index. Y si veis aquí los ejemplos que hay, pues por ejemplo, que pone que si estáis en la home de la web, pues mira si hay un front page, si la plantilla front page no está, pues mira si está utilizando post, se hace una página y cada una pues va haciendo los caminitos estos y va buscando las plantillas y si no encuentra ninguna, al final acaban todas allá al final en el index. Pero básicamente, en la lógica esta lo que dice es que el index sirve para todo lo que no tenga plantilla propia y no hace falta crearlas todas, sino que con las que quieras ser más específicas las puedes crear y las que no, pues el tirará de las más genéricas. Lo que sí que cambia es que las plantillas no están en la raíz, o sea, antes si tú tenías un tema que se llamaba super tema, por ejemplo, por ser muy original, pues dentro de la carpeta super tema tenías ahí todas las plantillas tiradas en la raíz. Ahora no, ahora dentro de la carpeta del tema tienes una carpeta template donde van todas las plantillas del tema. Y en el caso del blog que os he enseñado las plantillas que lo he creado son estas. Así se ve como muy largo toda la vez pero veis que es una estructura super simple. Tengo una home, tengo el blog que sería la home de los posts de las entradas del blog, la página para el post, digamos para cada post individual, luego el custom post art que son los proyectos también, uno para el archivo y otro para el cada proyecto en particular y luego la página de about, que es sobre mí y ya está. En principio mi página, el index.html no debería usarse, está creado porque es obligatorio y tiene que estar ahí, pero en principio todas acaban estando en unas otras plantillas. Pero por ejemplo, no tengo que crear una plantilla de error, o sea, que si en un momento mi blog da un error 404 ir a leer el index.html que es la que está por defecto. Tenemos también las plantillas parciales. Esto hasta ahora también era así, también existía un header, un footer, de hecho también un sidebar, aunque ya como se ha dicho, el de los bloques el sidebar la crea yo como un poco en desgracia. No es que no se puede usar, se puede usar el sidebar pero es como que ya no se lleva, como que ya no, WordPress no lo recomienda mucho. Más que nada, porque antes WordPress recomendaba el sidebar para usar los widgets y ahora ya tampoco recomienda widgets, o sea que es una cosa un poco, está como en un limbo extraño. Los parciales también, ya no van en la raíz, como iban los, antes estaban mezclados, o sea, pensé en contar el index y el header en la misma carpeta, ahora no, tiene su carpeta que se llama parts. Y yo solo tengo dos, que es un header y un footer, muy fácil de entender. Y de hecho no es del todo verdad, si os descargáis el tema este, que por cierto, luego lo podéis cargar, el tema este está en GitHub para descargarlo, en realidad tengo cuatro. Tiene cuatro g's y un footer, vale, luego esto explicar en detalle por qué tiene más de uno y cómo se usan, pero que sepáis eso, que si abres mi tema ahora tiene cuatro g's con nombres distintos y un footer. ¿Cómo se crean las plantillas? Pues se crean así, es tan fácil como esto. Los bloques en una plantilla se utilizan con estos comentarios que habéis aquí, tal cual los veis aquí, o sea, un comentario en HTML que pone WP, dos puntos y el nombre del bloque. Como el HTML, hay algunos que tienen contenido dentro y otros que se abren y se cierran solos, por ejemplo, como este se abre y se cierra como si fuera un dip, el de arriba, y el de abajo es como una imagen, que tiene sólo una etiqueta que se abre y se cierra en sí misma y ya está, y no tiene nada más dentro. Y los nombres de los bloques normalmente ya están definidos, no sé qué usáis bloques propios, pero los de WordPress, los que vienen por defecto con WordPress, solos de siempre, pues el párrafo, el título y demás, y tienen simplemente ponéis WP, dos puntos y el nombre del bloque, y ya está. Aparte de esto, que se utiliza para, digamos, el HTML, lo que pone la etiqueta del HTML dentro, es lo que se interpreta y el comentario sirve para darle al editor información sobre ese bloque. Y decirle, oye, esto de aquí es un bloque. Aparte del nombre, también tiene atributos, que si no conocéis este formato, luego lo vais a ver bastante, porque es el formato que utiliza en Json, en JavaScript, que es un formato que básicamente es un listado de variables, nombre de variable y valor, nombre de variable y valor todo el rato, que luego en el tema, en el JSON del tema también se usa. Pero básicamente para que sepáis, es eso, cada atributo tiene el nombre de atributo y luego un valor, y nos falta que sea un texto, si no puede ser un número, por ejemplo, o un valor como true or false. Esto está muy bonito, pero vamos a ver un ejemplo real. Esto es un ejemplo real de un bloque en una plantilla. Que, visto todo así, parece que hay mucho código, pero vamos a ir viendo, porque básicamente entre HTML y los atributos hay como una correlación, se van como duplicando y vamos a verlo. Esto es un heading, que es un titular, y cuando vamos al editor de bloques nos aparece este editor, cuando editamos un titular, entonces de la parte que tenemos aquí, vamos a ir viendo parte por parte, que significa cada cosa. Primero, la parte BP Heading en el nombre del bloque, y veis que eso también incluye una clase dentro del H2 que pone WLP Block Heading. Esto pasa con todos los bloques, hay unas clases predefinidas que tienen el mismo nombre que el bloque y que siten para darle al bloque las clases que vienen definidas con WLP y demás, y se puede cambiar en el editor arriba de todo. Si le dais al iconito todo esto que parece un marco a páginas, os permite cambiar el titular para que sea un párrafo, para que sea una cita, lo que queráis. Sin quitar el texto que ya habéis introducido, entonces esto está, es una de las ventajas que tiene Editor con Bloques. Si vamos hacia la derecha, tenemos también el level 2, los titulares son de un H2 y un H6, el H1 que WLP te ha reservado para el título del posto de la página. Y como veis, en los atributos es un atributo que se llama level y eso indica que dentro tenemos un H2. Como ya tenemos el H2 en la etiqueta no hace falta que tenga una clase específica. Y en este caso, por ejemplo, el tema de la line si habéis jugado un poco con el editor de bloques normalmente tiene tres formatos por defecto que es el formato del ancho de la columna que es lo que ocupa la columna de texto y luego un ancho wide que normalmente se utiliza o más ancho de la columna de texto que normalmente se utiliza cuando quieres que la imagen o el titular sobresalga un poco por los lados y el tercero que ya es full que es directamente de punta a punta de la ventana. Entonces en este caso hemos elegido el wide que significa que es un poco más ancho que la columna de texto normal y como veis, tanto tiene tanto el atributo en los atributos del bloque como luego una clase asociada dentro del h2 y luego esto, que no me voy a extender pero es que parece una cosa un poco rara pero básicamente este atributo lo que hace es permitiros que se pueda cambiar que la line wide ponerlo contenido del texto al más ancho o al full si le ponéis este atributo es que sea editable y que en el editor te aparezca lo puedes cambiar si quitáis esto, en el editor no aparecerías ese icono se podría cambiar y todo esto es un poco extraño, todas estas clases de estas cosas, la mejor manera de verlo es usando el propio editor de bloques vosotros os metéis en editor de bloques vais poniendo quitando cosas y podéis ver en el editor de código que va cambiando, que clases va añadiendo y cada vez que tocas algo que es lo que va poniendo quitando porque todo esto está en la documentación pero es mucho más fácil verlo que le doy la documentación que hace un poco guada veis, es del al de la pausa que te había dicho porque ahora vamos con la la otra parte que es junto a las tantillas la importante de los temas hemos hablado de las tantillas ya y el tema de estilos en un tema de bloques no solo tiene el style css sino que tiene el json del tema json yo normalmente lo llamo Jason porque somos ya muy amiguis, nos conocemos mucho pero si digo Jason, que se parece que se me refiere a esto, el json es el mismo formato de este, como he visto los atributos de nombre y valor pero he repetido infinitamente para qué sirve está el css básicamente para esto dices, bueno, pero también servirá para poner css pero básicamente esto es lo que es obligatorio que tenga el css de vuestro tema si no queréis poner el css no hace falta que le pongáis pero esto sí que es obligatorio que le pongáis el tema y de estas no todas son obligatorias por ejemplo la versión y eso pues no costuma ser obligatorio pero la mayoría son recomendables sobre todo que pongáis, es importante el tema de descripción, los taxis y demás si lo queréis publicar luego en el repositorio de WordPress y es tema de la licencia es muy importante siempre que queréis uno lo compartáis si queréis que tenga la licencia que todo el mundo lo pueda abrir y estripar o no pues está bien que lo pongáis aquí que es lo que tiene pues un montón de cosas empieza con el valor este versión 2 este es muy guay porque no tiene mucho sentido así visto aislado y aparte es muy corto y me hace entender básicamente la versión actual del JSON es la 2, ocupa uno a uno que es cuando empezó a crearse Gutenberg y demás y digamos que actualmente por cómo funciona los temas de bloques deberíais crear uno con versión 2 si no ponéis la versión WordPress entenderá que es la versión 1 por tanto hay cosas que os fallarán es decir, el versión 2 hay que pensarlo hay que ponerlo, se pone siempre y ya está no tiene más luego tenemos los settings los settings que es muy divertido tiene este tipo de categorías podemos poner settings para el borde, para el color para el layout que es ¿cuál es la explicación del layout? es el formato de la pagina digamos si alguien tiene traducción castellana para el layout ¿me lo puede distiguir? bueno te compro o tipografía que por ejemplo aquí podemos poner el enlace a los archivos de las web font que queríamos usar en nuestro tema ¿y para qué sirve esto? ¿qué podemos hacer aquí? pues podemos hacer básicamente dos cosas la primera, activar y desactivar opciones porque si tú en tu Jason por ejemplo le dices que el borde el radio que es lo que se usa para hacer por los redes redondeados sea falso, cuando te vas luego al editor directamente no aparece el ejemplo que dice en la izquierda es lo que aparece normalmente que te deja cambiar el ancho, el color y demás del borde y el de la derecha el radio directamente no aparece o sea cuando algo le decís que no queréis que esté no aparece desactivado ni nada, simplemente no sale bien porque podéis hacermos tu tema elegir qué cosas son las que se pueden editar y que no, tampoco os volváis locos a quitarlo todo porque he visto post en algunos blogs de cómo quitar todas las opciones que se pueden quitar de un tema tampoco hace falta y el segundo es que se pase con los settings es añadir o eliminar valores por defecto por ejemplo aquí usamos el tema de los colores que tenemos la paleta por defecto de WordPress que son los colores que vienen igual que en Paint por ejemplo en Windows tienes colores por defecto WordPress tiene su paleta de colores por defecto super mona y la podéis desactivar pues no la quiero y podéis abrir la paleta y hacer la vuestra propia que como hemos visto antes todo el JSON son todos siempre valores colecciones de valores con su nombre y su valor este por ejemplo es como se quiera un color lo podéis mirar luego a la comentación este es uno de los que tiene por ejemplo mi tema y cuando creáis los colores así uno atrás de otro parece a bueno, esto es importante cada vez que creáis cualquier tema los presets los settings del JSON WordPress se va creando variables esto bien que lo sepáis porque los vuestras variables se pueden rehusar tanto dentro del JSON como en los CSS por ejemplo yo crea el color este y dentro de los presets está el color y le da el nombre de accent home pues con esta variable super larga que me crea WordPress si la pongo esto me pinta el valor del color que tenga yo ahí así si luego más adelante cambio este color de la paleta pues me cambia todos los sitios donde aparezca y así como aparece en el editor cuando vais a cambiar un color en este caso me salen los colores que he puesto yo en mi tema perdón una pregunta de los presets que has dicho crea para cada color queda un variable o para cada opción o como que lo que has dicho si esto lo veremos luego porque lo crea en casi todo lo que vas añadiendo pero aquí por ejemplo en settings en color en la paleta de colores cada color que tú creas te crea una variable yo por ejemplo tengo estos 6 colors definidos en el tema pues hay 6 variables diferentes cada uno con su nombre que me permiten reutilizarlo en otras partes incluso en algunas páginas cambiar unas variables definidas por otras por ejemplo en los colores que utilizo para las variaciones de color de la cabecera lo que hago es que tengo una variable de color general que utilizo en la cabecera y cuando estoy en cada parte de la página te digo pues ahora esta variable me das este valor que es de esta otra variable lo de las variables en CSS parece complicado pero es básicamente por ahorrar tiempo no tienes que repetir el color un montón de veces si simplemente lo tienes en una parte y así cuando lo cambias después te cambian todas partes de la vez para cambiar los bloques los bloques es gracioso porque básicamente podemos poner el mismo contenido que tenemos en los settings generales pero aplicado un bloque solo por ejemplo en este caso si lo aplicamos y aquí los bloques los predefinidos por WordPress van con core delante por ejemplo el bloque de botón se llama core-button y si pones un bloque que está creado con un plugin normalmente se llamará plugin-barra y el nombre del bloque entonces en este caso si lo hago así si desactivo el bloque redondeado solo al bloque de dos botones en toda la web le voy a poner el bloque redondeado a todo pero cuando vaya a dos botones no voy a poder que dicho así suena un poco absurdo pero eso está bien porque depende de qué bloques puedes hacer por ejemplo puedes hacerlo al revés que no se va a poner bloques redondadas o sea bordes redondadas a ninguna parte pero los botones sí porque tú quieres que tu tema tenga botones redondeados eso hay que quitar y poner opciones dependiendo de qué bloque es interesante sobre todo para definir cómo quieres que funcione tu bloque y cómo quieres que el usuario trabaje con el bloque con el tema que creas y para acabar tenemos una cosa que son las Custom que básicamente es para crear variables propias yo por ejemplo que como soy diseñador y tenemos estas cosas pues he creado una base que se llama grid una variable que se llama grid básicamente que le he puesto 8 pixels porque básicamente todos los tamaños de márgenes de paddings de tamaño de tipografía además lo hago multiplicando la base ésta así todo tiene una relación de tamaños entre ellos y si algún día me da por cambiar la de 8 a 10 o 12 pues todos los tamaños van a cambiar proporcionalmente esto como decía antes también crea una variable propia en este caso en lugar de preset es Custom porque es en el apartado de Custom de aquí y como os he dicho yo lo he utilizado por ejemplo en la tipografía que veis como os he hecho antes cada vez que creáis algo nuevo siempre os crea una variable pues en este caso tengo esta variable grid que la uso aquí pero al introducir un tamaño de fuente también me he creado otra variable para el tamaño de fuente eso no hace falta que se acordeis de todo pero si me dices para que entendáis cada vez que vais cambiando algo va creando variables nuevas que podéis re usar si queréis y en mi caso lo que he hecho es esto los tamaños de fuentes pues tengo uno que es esos 8 píseles de la grid por 2, por 3, por 4 y por 8 que es el texto de este gigante con el fondo morado en medio lo guay de esto de los tamaños de de texto por ejemplo es que cuando vas al editor te aparece de esta manera los iconos de SMXL estos son predeterminados de WordPress, él lo pone siempre así pero si vas de encima de cada uno te ponen los nombres que yo le he dado de manera en este caso pues normal, big, huge o mega que son los nombres que yo le puse pero el icono de las tallas de esta camiseta estos lo tienen WordPress por defecto y siempre ponen los mismos independientemente del nombre que tú le pongas ¿Qué más tiene el JSON? Steelers que es más o menos CSS o sea, Steelers tiene casi todo lo que puedes hacer con CSS pero en lugar de hacerlo en CSS lo haces aquí en el JSON ¿Por qué? porque si lo haces aquí en el JSON luego te permite cambiarlo en el editor y si no lo haces aquí son cosas que no puedes acceder a ellas ¿Y cómo funciona? pues básicamente ya veis igual que el CSS que conocemos convencional por ejemplo la parte de spacing incluye márgenes y paddings y también un atributo propio que se llama block gap que es como espacio entre bloques y el filter por ejemplo en teoría son filtros CSS aunque actualmente se lo tiene el de Duotono que es uno de los CSS o sea que no es de los más útiles tipo grafías, color, bordes ya veis que son cosas habituales aparte de eso también tenemos los elementos que es que lo podemos dar estilos específicamente en el elemento pues como los links, los headings el h1, h2, h3, h4 lo he puesto así pero podéis poner específicamente cualquiera de los 6 o el caption o el button ¿Esto para qué nos sirve los elementos? pues por ejemplo para hacer cosas como ésta yo tengo una web en la que defino que el color del texto sea negro y luego los elementos le digo que el color de texto de los links sea azul que esto en este caso no es muy particularmente original pero sirve para eso para darle estilos particulares a los elementos y como hemos visto antes también podemos hacerlo con los bloques dentro del bloque podemos por ejemplo de elegir un bloque y dentro de ese bloque darle color al texto normal y luego darle color luego poner también elementos dentro del bloque esto nos permite hacer locuras tipo ésta que es que tenemos una web en que tenemos el cord definimos el cord del texto luego definimos el cord de los enlaces y luego dentro del bloque de la navegación que es el que utiliza el menú definimos el cord del texto y el cord de los enlaces y pues pensar esto es muy práctico bueno si esto es algo bastante habitual en las webs por ejemplo tenemos una web en la que el texto es negro y los enlaces son azules y luego en la parte del menú el texto es un poco más claro, es un gris y el azul también es un azul más claro pues esto es fácil de ver así lo que pasa es que traducido al Jason significa eso, que tenéis que meteros poner los estilos dentro de elementos en general y luego estilos dentro del bloque dentro del bloque es más complicado hacerse la idea de cómo funciona todo eso, que no escribirlo por sí que no es muy complicado esto sólo lo pongo a nivel anécdota porque es muy reciente se añade también a las variaciones que es lo que pasa es que ahora mismo sólo funciona con variaciones existentes por ejemplo las imágenes el bloque de imágenes tiene dos variaciones la normal, digamos o cuadrada y la redonda que le añade un estilo que pone un redondeado que es al 100% creo de 900 y pico píxeles si quisiéramos cambiar de ese redondeado por un redondeado diferente podemos utilizar el tema de variaciones para decirle qué estilo queremos esto en teoría tiene que funcionar cuando creemos nuestras propias variaciones en el futuro pero ahora sólo funciona con las que vienen de efecto con WordPress y lo he puesto porque me ha hecho ilusión pero que sepáis que acaba de salir y no lo vais a usar mucho en general pero es lo que sabes estas que piensas ya que está, ya que lo sé, lo voy a poner todo esto que hacemos sobre todo el tema de los bloques lo gracioso es que WordPress lo traduce en estilos inline dentro del HTML o sea, cuando usted entra dentro del HTML todo esto está puesto inline eso qué significa pero carga esto que está guay aquí debajo de todos esto de aquí es el CSS que yo he creado y todo lo demás es CSS que genera WordPress por defecto base a lo que tengo al JSON entre los comentarios que genera WordPress para interpretar las etiquetas y esto te queda un fichero guapo guapo en realidad los comentarios se defiende a la reformación de los bloques eso no se pinta no, ya, ya, ya, pero yo digo el fichero ah, pero el fichero sí que sale el fichero index HTML los comentarios sí que están si, si, si si, entonces si resumas los comentarios que es digamos instrucciones más luego de esto si, pero esto es cuando el CSS es toda la web esto es lo que te pinta cuando esto esto, que es un poco sorprendente después de destacar cuando lo ves no tiene mucho sentido, pero a nivel de rendimiento por ejemplo está muy bien porque significa que tú tienes un trozo inline de CSS que se pinta cuando estás usando un bloque concreto de manera que el el trozo con las especificaciones que yo he puesto para el bloque de imágenes solo sale cuando yo cargo imágenes en mi post o mi página si en el post o página no hay ninguna imagen ese trozo no se carga por lo tanto a nivel de rendimiento está bastante bien a nivel de rendimiento me refiero que Google le guste un poco la carga de tu página entonces de cosas que cargue rápido el poner estilos inline es algo que se lleva hace mucho tiempo no está extraño es extraño cuando ves toda la lista a la vez porque te sorprende un poco pero no es una practica que sea muy extraña de hecho hace cosas por ejemplo como las webfones que defines en el JSON tiene su propio trozo de webfones que se carga así si alguna vez lo cambias o sea al no generar archivos y vuelvos a cargar te evitas que temas de estos de caché extraños que tengas una versión anterior del archivo o cualquier cosa lo pintas directamente a nivel de rendimiento está bien y carga la página bastante bien tiene bastante sentido a nivel de desarrollo a nivel de cuando lo ves así el código pues sorprende bastante y entonces en STYCCS hay algún CSS pues en mi tema en concreto hay algunas cosas como por ejemplo esto esto que es el título del blog básicamente es el título y el tagline lo que sería la frase el slogan del blog aparecen así con CSS entonces esto se podría hacer en el JSON porque básicamente es posicionarlos y ponerle un bargen negativo tampoco tiene mucho misterio pero como es algo que yo no creo que la gente vaya a editar o vaya a cambiar sino que es así tiene ese diseño pues lo he puesto en CSS directamente aparece así ya está he utilizado CSS para este tipo de cosas qué más tenemos y esta es la última parte ya de los que tengo en mi en mi tema las template parts que esto también parece muy guay esto cuando lo ves así el ejemplo este piensas vale esto sirve para nada porque tengo una template part que se llama footer que el título es footer y que el área es footer vámonos para casa esto en realidad que sólo para que lo sepáis el nombre tiene que coincidir con el nombre del archivo y el área en principio o es g de los footer que ponen una de las dos no hay más opciones no se pueden definir de momentárias nuevas así no parece muy útil pero por ejemplo si os acordáis, he estado hablando antes de que tenía varios g's en mi web yo cuando estaba haciendo el diseño que este es el diseño que se ve en desktop el mobile se apila uno con otro que yo me planteaba tengo un menú este que es muy corto y me permite hacerlo así qué pasa si el título del blog es más largo o si tengo más ítems en el menú algún día pues necesitaría esto lo que había planteado qué pasa si el menú tiene más opciones y no hay menú si el título del title es más largo pues necesitaría una versión que ocupe cien por cien para poder tener más ítems en el menú poder tener la cabecera más larga o por ejemplo tener la misma versión sin el menú pues esto que habéis visto aquí tanto esto como esto son las cuatro versiones que tengo de mi cabecera entonces cómo funciona esto las de abajo son igual que la de arriba todas tienen los tres valores lo he puesto así resumido para que no ocupe toda la pantalla pero básicamente los tres cada uno tiene su nombre su título y su número de archivo y todos están definidos en el mismo área todos están definidos en el área header esto que permite que cuando me voy al editor de sitio y elijo el header me aparece cuál tengo seleccionado y me da la opción de reemplazarlo y reemplazarlo te aparece esto tienes todas las opciones que has diseñado tú y puedes reemplazar una con otra y no tienes que como el resto de bloques no tienes que volver a crear el menú cambias uno por otro y ya te lo adapta al que has elegido nuevo y esto a mí me parece de las cosas más guais que se pueden hacer con el tema este de los parciales dos cosas que yo no estoy usando en mi tema y que voy a hablar así por encima solo para que sepáis que existen el tema de custom templates estos son ejemplos de la página de WordPress los dos el custom templates es cuando tenéis plantillas generales para aplicar los apóstos a páginas que no siguen la nomenclatura de categorías o esto que yo tiene sino que creáis una plantilla y le podéis decir el nombre que vosotros queréis pues la podéis decidir aquí para que cuando creáis un post o una página en el selector de plantillas os aparezca y tiene una cosa guai que es que podéis seleccionar qué tipo de post type que queréis que admita la página de contacto con un formulario le podéis decir que se puede aplicar a las páginas pero que no se puede aplicar a los posts de manera que cuando estéis editando un post no aparecerá esta opción pero en una página así y el tema de patterns esto lo que permite es cargar directamente desde el directorio de WordPress patterns que ya existen podéis entrar ahí, navegar y si queréis algún pattern que un pattern es como un trozo de plantilla con diferentes bloques dentro si hay alguno que lo veis allí y os interesa y lo queréis poner en vuestra plantilla simplemente con poner el nombre aquí lo cargará directamente desde la web de WordPress, no tenéis que bajarlo ni distribuirlo con vuestro tema de manera que siempre está actualizado porque lo cargará directamente desde allí parecía que no se acababa nunca el JSON pues ya está, se acabó PHP, esto es solo para la gente que tiene un poco de mono de PHP con todo lo que hemos visto hay dos maneras de usar PHP el Functions, ese ya lo conocimos todos ya sabemos cómo funciona el Functions es lo único que no cambia en absoluto es exactamente igual el Functions que había en los temas clásicos que hay ahora la única cosa que es nueva que antes no estaba es que aparte de añadir nuevos estilos no CSS podéis añadir CSS para un bloque concreto podéis crear un archivo CSS determinado lo añadís a un bloque y hará como los trozos inline que hemos visto antes solo lo cargará cuando carguéis ese bloque si por ejemplo queréis crear uno con una clase para diferentes imágenes por ejemplo, yo en mi blog lo utilizo para que la imagen mía principal tenga la forma de estar exágono que tiene pues lo podéis oponer ahí y de manera que cuando usáis un bloque de imagen si le ponéis la clase apropiada que coincide con las CSS aparecerá esto y solo se cargará en el caso que utilices la página sin embargo se sabe que es bastante eficiente aunque no sustituye esto al poner en el JSON el estilo general que queréis para vuestros bloques no es que esto sustituya al otro sino que en principio es una cosa accesoria que podéis usar y luego está el tema de los patterns que como he dicho son trozos de tantilla que normalmente incluyen varios bloques los patterns se registran así y usan PHP cuando tú guardas un pattern lo guardas en la carpeta patterns como hemos visto y tiene un nombre .php lugar de HTML y se registra así utilizas la función de register block pattern con un título, una descripción el nombre que es un nombre en dos partes como siempre igual que los de web tienen core de barra algo pues el gusto tiene que tener lo que queráis vuestro nombre por ejemplo, barra y el nombre del pattern y como veis este utiliza las funciones que hemos dicho antes que no se pueden utilizar, las de internet internacionalización o localización o traducción que es más fácil supongo que me lío o sea que básicamente esto hemos visto antes lo que hay acá en el texto si se puede pero solo en los patterns que no es que los patterns se usen especialmente mucho pero bueno yo por lo menos en mi tema no los he usado si los empezáis a usar pues igual os robo alguno después y entonces donde veis el contenido aquí abajo el content que os he dejado hacía ahí es donde va la plantilla del pattern que básicamente es como una plantilla de las otras con los bloques, con sus comentarios y demás, con los bloques que tenga el pattern que queréis crear con la gracia o con la diferencia de que estos como es un archivo PHP podéis usar HTML para bloques y podéis incluir PHP por en medio es decir, podéis utilizar PHP para crear condiciones por ejemplo mostrar una cosa u otra en el final tiene que pintar una plantilla igual que las otras sea la plantilla resultante que es HTML pero podéis utilizar PHP para leer funciones o para leer variables y en base a estas pintar una cosa u otra y luego una cosa más que quiero añadir después de todo esto hemos visto básico de crear un tema ese tema de preferencia que ya existía o sea tu en WordPress, WordPress tiene una cosa por defecto que con los temas o lo que estamos más habituados que cuando queramos un tema hijo el tema hijo siempre sobreescribe lo que diga el tema de manera que si WordPress dice que algo es negro y el tema hijo es rojo, será rojo y si luego el tema hijo dice que es verde pues el tema hijo se lleva la palma y es lo que diga en los temas de bloques aparece una nueva capa que es los cambios de la usuaria que se guardan en la base de datos esto es muy importante esto significa que cuando yo creo un tema de bloques si en el editor de bloques me pongo a hacer cambiar las plantillas WordPress esos cambios que yo hago en el editor no lo guarda la plantilla o sea no guarda una versión nueva de la plantilla sino que lo guarda la base de datos pero el cambio este que ha hecho el usuario sobreescribe cualquier cambio que haga el tema de manera que si el usuario ha hecho cambios de una plantilla y luego el tema se actualiza porque hemos sacado una nueva versión en las plantillas que haya cambiado no va a haber los cambios pero la versión que el tiene guardada va a prevalecer sobre la que tenemos los otros eso que he visto así y sobre todo desde el punto de vista donde el desarrollador es un poco pesadilla porque piensas que va a haber problemas tiene una ventaja y se puede hacer cosas muy guay con esto por ejemplo este plugin este plugin se llama CreateBlogSim que como veis está firmado por WordPress.org o sea está hecho por los mismos contributores que trabajan en el core y demás y te permite hacer cosas con los temas como por ejemplo definir los webfones que utilizas y ese tipo de cosas pero sobre todo tiene una cosa muy guay que es que tu puedes bajarte un tema de bloques hacer tus cambios y cuando ya lo has cambiado todo de lo que es a tu gusto puedes generar un tema a partir de tus cambios esos cambios tuyos que están en la base de datos generas un tema a partir de eso y ese tema lo puedes compartir o lo puedes crear un tema en la parte de eso a alguien o ponerlo en otro blog es muy interesante y eso solo es posible a partir de un tema que utilice bloques porque utilice esta manera de preferencia vale conclusión de todo esto muchos bloques, muchas cosas de todos los colores en general se van juntando dos cosas los cambios técnicos más pequeños como pasamos a utilizar una función a utilizar un bloque o como se formatea un JSON que es una cosa un poco más aburrida si queréis y luego los cambios más interesantes que son a nivel de paradigma de qué nos permite hacer los bloques que antes no nos permitía como el tema del plugin que os he enseñado que podéis generar temas desde el editor sin hacer una línea de código y en general nuevos problemas que van a ir apareciendo y nuevas oportunidades cuando la gente vaya creando temas de bloques como ya os he dicho, no hay muchos temas de bloques hay que animar y crear temas de bloques la gente los cogerá los destripará y a partir del puesto a las otras cosas y a partir del que he creado yo os lo podéis bajar y ver qué os pasa interesante y copiarlo y lo que no pasa interesante pues lo volvéis a hacer pero básicamente de todo el tema esto lo que yo creo que si os deis que queda alguna idea de toda la charla debería ser esta con el capitán Lee que si os vais a poner a crear un tema de bloques, sobre todo desbloquear todo lo que es el full site editing todas las opciones que da a crear el editor de sitio y darle al usuario el poder de poderlo cambiar todo es la parte más interesante de crear un tema de bloques respecto a los clásicos y ya está, no toma nada más alguna duda