 Aquí ya sí que te pide el típico correo, elegir la plataforma, copiado. Aquí regina el formulario, si no queréis que os lleguen correo, os inventáis el correo y ya directamente se te descarga la aplicación. Y tendréis una cosa tal que así. Le dais al botoncito esta de aquí abajo, añadís el sitio local y ya pues vais montando el sitio poco a poco, pero esto como es una herramienta más y alguno lo tenéis ya en vuestro local y demás, pues no lo enseño mucho. Y ya por último, con el node instalado, es que si os da algún problema, lo que tenéis que hacer es reiniciar el lado para que te coja la ruta interna de node en la instalación y demás, si saltas en cualquier momento un mensaje que no te reconozco el node o no lo tienes instalado y tú ya lo ha descargado, lo ha instalado, mentira, los reiniciáis y sin problemas, ok? Luego, obviamente también va a hacer falta un edito de código, porque aquí vamos a tocar un poquito de código. Vale, eso ya os lo dejo vuestra elección, aunque yo utilizo el UBS code. Y nada, luego estás una herramienta de WordPress, que es un paquete de NPM que por comando tú en la consola, npx, WordPress create blog y ponéis el nombre del bloque, un slug, con guiones y demás. Y os monta ya un plugin, ok, con todo lo necesario para tener un blog hecho, vale, básico y además dentro hay un montón de documentación dentro del código, que ahora os iré enseñando y demás para que veáis y podáis aprender y demás. Yo ahora os voy a dejar que os vaya instalando todas las herramientas que os he dicho, vale, y ahora vamos a hacer el comando este, que tarda un ratito, vale, y mientras yo voy a empezar ahí pasando diapositivas y a dando un poquito de teorías básicas, vale, y después os pasamos manos a la obra, ok? Este comando es hiper mega importante, que como hace un plugin, pues vayáis a donde están los plugins dentro de la instalación de WordPress, que es donde? Dentro del tema, ¿no? No, en el WP content plugins, ok? Aquí por ejemplo, esta herramienta lo tengo muy fácil, le doy al go to site folder y aquí ya tengo la instalación de WordPress montada, plugins, ok, aquí ya tengo un par de bloquecitos, que serán los que veramos, los que veramos, los que veramos. Mostrar más opciones, abrir en terminal, mira ahora aquí, ¿se ve bien? Chiquitín, pero bueno. npx, elarroba, WordPress, barra, create, guionblock, espacio y el nombre que queráis. Ya no sé si tiene algún tipo de control de, pues te dejo meter 50 caracteres del nombre del plugin, hasta ahí ya no llego, pero vamos, tampoco hace falta que ponga un nombre extra largo, que es un slug realmente, va a ser el slug del plugin, ok? Pues básicamente pegamos mi primer bloquecito, está bien escrito, ¿no? La primera vez que lo uséis, aquí es cuando suele petar, suele dar problemas de no te encuentro el node, o no te encuentro el npm, o la versión de tal está desactualizada, porque me la acabo de descargar y tal. Pues aquí es donde tenéis que reiniciar el portátil, ¿vale? O decir que actualicéis el node, ¿vale? Pero esto es súper fácil, lo vais indicando, ¿vale? Y si todo va bien, os debe de salir lo que más salió a mí, el creating a new world plugin de mi primer bloquecito directory, y luego ya pues los mensajitos estos, ¿vale? Aquí se va a llevar lo menos 5 o 6 minutos, ya depende de la conexión interna y demás, pero de manera normal la herramienta de esta te monta el plugin súper rápido, facto furio, o sea que sin problema, aquí es donde ya vamos a pasar a la parte de la teoría de los bloques. 15 minutos, perfecto. Ahora, ¿vale? Cuando tengamos ya esto montado, os va a salir una cosa tal que así, dentro de los plugins. Aquí todavía, aunque eso se esté construyendo, aquí no hay ningún problema de que eso esté tocando los archivos y demás, porque yo el plugin, en mi primer bloquecito, como veis aquí, está desactivado. Espera, de esto más alto. Vale, en mi primer bloquecito lo tengo desactivado, porque aquí archivo que esté tocando, no hay problema, ¿vale? Mientras lo que tengamos desactivado, hasta que esto te diga, ok, todo listo, y te suelto una parrafada tremenda, ¿vale? Que ahora os enseñaré. Pues bueno, aquí os pondría tal que así, bueno pues el plugin este y demás con su descripción y demás, que eso luego se modifica, ¿OK? Nada eso, ya lo vemos, anatomía de un plugin de bloque, vale, perfecto. Pues nada, básicamente, la anatomía de un plugin de bloque, ¿vale? Porque ahora lo que se lleva con esa herramienta es que tú en vez de hacer un plugin con 34.000 bloques, ¿vale? Pues tú vayas haciendo un plugin para cada bloque, ¿vale? Y así como que lo puedes modular, lo puedes estructurar mejor. Dice, vale, pues si este cliente necesita este bloque, por lo que tengo que usar para este plugin, se lo mando y listo, ¿vale? Entonces, como que no obligas a tener el cliente un plugin instalado con 34 bloques, cuando nada más que está usando uno, ¿vale? O sea, que esta herramienta está enfocada en eso. Así que, en el futuro, la pregunta de si se puede meter varios bloques en este plugin, ¿no? Es de uno en uno, porque va registrando de un bloque en un bloque, ¿vale? Y bueno, y nos vamos a ver una carpetita como esta, ¿vale? Con el build, el node modules, el src y todos esos archivos, ¿vale? Poco a poco. La carpeta del build, ¿vale? Esto es realmente lo que te vale WordPress. WordPress, cuando te coja el plugin, te va a decir, ¿vale? Me voy ahí, al My First Block, ¿vale? El archivo PHP, porque es el que tiene toda la descripción del plugin, es el que WordPress va a entender que es como el archivo inicial del plugin, ¿ok? Y ese código te va a redirigir al build, que es donde está todo el código del bloque compilado, ¿vale? O sea, que en ningún momento, lo que está programando, que es donde vamos a ver que tenemos que programar bloques, ¿vale? Que es en el src, eso no lo va a estar leyendo, ¿vale? Va a estar leyendo todo el tiempo el build. Entonces, luego está la típica pregunta de, bueno, es que la carpeta del plugin pesa 300 o 400 megas, eso es porque el node modules está topetado, está lleno de un montón de archivos y demás, sin problemas, porque tú luego tienes un comando, que creo que era el NPM Expor o algo de eso, y a ti lo que te dejas es el plugin con el archivo de PHP, el Rhythmicrew y el build. Y ya está. Totalmente. O va a la chala de la 12 y cuarto de... No, de un tardabí, sí. Ah, de un tardabí, ¿sabes? Que aquí por nada, y os los plieguemos a hacerlo, ¿vale? Pero que no os preocupéis que al final el plugin como que pesará, yo qué sé, un par de megas y ya está como mucho, ¿vale? Depende ya de lo que hay flipado con el bloque que hay es eso. El node modules, por lo que os he dicho. Aquí es donde se meten todas las dependencias, todo lo que le va a hacer falta, al bloque, para poder funcionar, ¿vale? Esto es lo que más pesa del mundo entero. O sea, mirad ya, ¿sabes? Nos quedamos en el Installing Wordpress Scripts, ¿OK? Y ya pasó al formato Injava Script Fires con Piling Block, y ya el mensajito veres de... ¡Ole! Todo perfecto. Y ahora aquí tenemos los comandos que te dicen, ¡Mira! Puedes hacer esto, esto y esto. El comando que vamos a usar ahora es el NPM Star, ¿para qué es esto? Muy sencillo. Paquetó el código que vayamos programando en la carpeta del SRC pues se vaya compilando en la carpeta del build, porque al final lo que te está cogiendo es la instalación de Wordpress para leerte, ¿vale? ¿Cómo has hecho el bloque y demás? Y luego aquí tenemos los comanditos. Creo que era el... aquí está el NPM Run Build, ¿OK? Este ya te exporta lo que es el bloque para que tú lo puedas trabajar sin todos los nodes módulos y demás, ¿vale? O sea, esto ya aquí lo cerramos. Bueno, hay gente que prefiere tener la terminal está abierta. Cuando has hecho estos códigos, ¿vale? Te mueves hacia dentro de la carpeta y ahí ejecutas el NPM Star. Yo no lo hago así. Yo lo hago directamente en mi editor de código. Ahora lo voy a abrir. Vamos a abrir el plugin que nos ha creado. Mi primer bloquecito, ¿vale? Y aquí tenemos, bueno, para la estructura que... Yo les digo, no mostrar de nuevo y me lo muestro cada vez que lo hago. La carpeta está de VSCode, ¿vale? Esto no es del plugin de bloque. Esto es de editor de código, ¿vale? ¿Vale? Pues el nodemodules, el nodemodules tiene aquí... tremendo, ¿vale? Pero esto no os preocupéis porque esto no tenéis que tocar nada. Ni esta carpeta. Ni esta carpeta tocarla. Prohibido, totalmente. ¿Cómo toqué algo? Se va a romper. Fácil, además, fácil. No hay fallo en eso. Ahora tenemos aquí. Se ve bien, ¿no? El texto. ¿Vale? Si hace falta. Si alguno no lo ve, que me lo diga y lo agrando más todavía, ¿vale? Un pelín más grande, ¿ok? ¿Cómo vamos? Mejor, ¿no? Creo que también tiene la pantalla y a la izquierda, pero vamos. ¿Vale? Para los que estén al fondo-fondo. Ahora, tenemos aquí, bueno, por la típica descripción de un plugin donde se configure, ¿vale? Aquí es donde podéis tocar toda la información del plugin. Pero ya aquí no me meto porque es otro rollo. Ya es como se declara un plugin y demás. Aquí este archivo, lo que tiene es solamente una función. ¿Qué es la función que le dice a WordPress? Oye, registrame todo lo que haya en la carpeta de Bill. Ya está. Y en la carpeta de Bill nos vamos a encontrar. Esto no hay que tocarlo para nada. A menos que queramos hacer bloques dinámicos y demás. Que bloques dinámicos van también con PHP eso. ¿Vale? Entonces, por PHP, lo colocaje aquí. Pero de momento, en este taller, nada. Y el Bill por dentro nos vamos a encontrar el index.js que como vemos, en una línea, está ya todo compilado con el block JSON y toda la movida. O sea, que esto ya ni tocarlo. ¿Vale? Una vez estemos dentro de esto, ya da la carpeta. Yo lo que hago siempre es en este editor de código. Aquí ya tengo mi terminal. NPM Star. Y si todo sale bien, ¿qué es lo que debería? Porque aquí también solamente el problema de oye, ¿te falta? O NPM está desaptorizado. O está tal cosa desaptorizada. Lo solución hay porque os va a decir mira, tienes que darle este comando. Lo haces y ya está. ¿Vale? Y os va a aparecer todo este chorro de código. Mientras esto esté así todo guay. Si esto no está así está mal. Pero esto es muy importante porque te puedes tirar media hora programando y diciendo no estoy viendo los cambios porque esto es muy susceptible a cualquier tontería. Uy, es que he puesto en el bloque una coma de más. Esto deja de funcionar. Tú ni te enteras porque esto lo tienes aquí. Yo lo oculto y yo ni me entero y te tiras media hora programando y dices no se me cambia el bloque en lo que yo estoy programando. Pues vaya aquí la terminal y vaya a ver que esto no está así. Te vas a soltar un mensaje rojo o lo que tengas. Lo tienes que volver a empezar y listo. ¿Ok? Vale. Podemos entrar en la carpeta SLC. Vale, el block JSON. Este archivito ¿qué hace? Pues esto te configura lo que es la información del bloque. Vale, toda esta información luego va a aparecer en el editor de Gutenberg. En el bloque, le va a dar la versión que tiene el título, la categoría en la que está. Ahora vamos viendo todos esos detalles. El icono que tiene la descripción va a mostrar un montón de cosas. ¿Vale? Y aquí hay un montón de configuración que esto ya no hay que tocarlo en principio. ¿Vale? El test domain para la internacionalización para que se puedan traducir y demás. Y lo support. Que te permite personalizar un montón los bloques de Gutenberg. Sin tener que programar prácticamente nada. Esto se lo podéis aplicar prácticamente a todos los bloques que quiera hay. ¿Ok? Y esto casi nadie lo sabe. Porque no se mete la documentación. Pero tú lo encuentres y dices, Dios, lo que he encontrado. Y nada, lo support, HTML y tal. Luego tenemos aquí el index JS que es como la raíz de la carpeta ésta. ¿Vale? La raíz del SRC. Y aquí vamos viviendo ya que cada línea de código más o menos importante porque aquí no es cuánta más junta tiene su explicación en inglés pero la tiene. Aquí por ejemplo te dice, mira, por registrar el nuevo bloque que provee con un icono hombre y define su objeto. ¿Vale? Pues todas estas cosas ni tocarlas. Y solamente para hacer un bloque básico nos va a hacer falta tocar absolutamente nada de esto. O sea, simplemente si queréis por curiosidad cogeis, le dais al enlace que está súper bien para aprender porque es que os los documenta todo y ya simplemente cogeis el enlace lo pegáis y listo. Y aquí ya te explica lo que hace la función. ¿Vale? O lo que hace esa parte de, mira, por aquí en la configuración tenemos el título la descripción, la categoría todo, saqueis súper fácil en las herramientas esta que ha hecho Warpers para crear los bloques que te crea el plugin este, al final si os metéis dentro y simplemente vais viendo y leyendo la documentación os vais enterando de toda la fiesta. ¿Vale? Aquí encolamos bueno pues la función del para registrar el bloque, el tipo de bloque los estilos y estos archivos que ahora voy mirando poco a poco que son, ¿vale? Y esto nada, es que este archivo prácticamente lo explico pero esto ni meterse aquí, ni tocarlo prácticamente porque nos va a hacer falta. Donde está toda la chicha, donde está toda la emoción del asunto, ¿vale? Son estos dos archivos, el edit y el save. Y han metido uno nuevo que yo el taller que di en Atenas hace tres meses no lo tenía. Y yo cuando estaba preparando el taller este me quedé flipando porque di wow, han metido aquí un archivo que era súper necesario, que ahora voy a explicar realmente una tontería pero la verdad es que mejora un montón el tema de los bloques, que es el view.js Yo hace tres, cuatro meses no lo vi, o sea que yo lo vi y dije, uy, ¿esto qué? Me asusté un poco, nos voy a engañar pero cada vez que tocan algo, o sea estas, estas gente son muy son muy dados a, pues esta función va a funcionar igual pero le cambia una parte del nombre por ejemplo, yo qué sé, como si le da aquí por register block type porque se llame register block name hace exactamente lo mismo pero ya la función te ha cambiado y luego dice, bueno ¿y por qué no me funciona? ¿vale? Entonces son muy dados a eso es muy normal que tengáis un bloque de hace un año como todos los bloques funcionan de la manera que al final te dejan en los comentarios y el texto, todo en la entrada si tú no lo toca, pues eso sigue funcionando por el resto de la eternidad ¿vale? tú te actualiza la herramienta, te empieza a actualizar todas las dependencias y demás y te empieza a decir uy, es que register block type pues no funciona y dice, wow y aquí vamos a ir viendo que todos los nodes de módul, tiene aquí un montón de herramientas y un montón de cosas para meterle a vuestro bloque que podemos meterle campo de texto, campo de téarea campo de imagen, campo de tal, ¿vale? pues eso tiene unos nombres que tenéis que ir a la documentación para verlo y por eso os aviso que cambia bastante a menudo los nombres de esas cosas bueno, el edit, muy sencillito ¿vale? vamos a irnos aquí ya a una entrada voy a activar el plugin mi primer bloquecito hacemos una entrada nueva esto en principio se tiene que ver en todos los tipos de posts ¿vale? eso ya podéis vosotros controlarlo más adelante como queráis pero no nos vamos a meter en eso porque ya es un poquito más avanzado ¿vale? entrada qué bien con bloque es básico voy a usar el típico atajo de teclado para invocar los bloques ¿vale? la barrita lateral y aquí ya te salen por todos los bloques que tú vas a utilizar más frecuentemente si yo le doy mi primer, ya pongo mi ya me sale mi primer bloquecito que es el nombre que tiene aquí en la configuración el blog Jason, ¿vale? el title luego si queremos ver en vez de meterlo por esta parte que ya veis que funciona te dice, mira, mi primer bloquecito hello from the editor o sea, ya la persona que haya cogido en su instalación de WordPress en la carpeta de plugins haya cogido la terminal de nodes haya puesto el comando npxwarprexblog que hayas querido y haya esperado sus 10 minutos ya tiene su primer plugin con su bloque hecho saca hasta aquí, super fácil hacer el primer bloque y ahora vais a ver la cosa que podemos hacer prácticamente sin tocar códigos ¿vale? vamos a empezar a darle un montón de opciones aquí a la derecha en la barrita lateral y sin tener que programar o sea, yo me quedé de loco vale, por ejemplo, mira este conito, este conito es el que hemos definido aquí en el blog Jason ¿vale? en el icon smiley está sorriente luego si vamos aquí pues está todos los bloques por categoría ¿vale? si nosotros nos vamos a la de widget nos va a salir nuestro bloquecito aquí está, todos juntos mi primer bloque, mi primer bloquecito, aquí va a estar ¿vale? en la sección de widget la categoría de widget que es lo que hemos definido aquí categoría, categoría ¿vale? y ya bueno pues la descripción por encima, puedes saber la imagen el título y la descripción ¿vale? o sea que todo eso lo tocáis como os he dicho desde el blog Jason y ahora ¿para qué hemos venido aquí? vamos muy sencillo porque hay cada bloque tiene dos partes que se tienen que programar ¿vale? esencialmente esta parte hay que tocarla por fuerza el del index.js te puedes coger y te puedes ahorrar la molestia de tocarlo pero del edit.js que es este archivo y del safe.js esto hay que tocarlo por fuerza ¿por qué? porque el edit.js es la hoja de código donde tú programas cómo se va a ver el bloque en el editor por eso se llama edit.js porque se toca en el editor esto que esta parte de la página que es el editor de Gutenberg por todo como se muestra el bloque aquí, se toca en este archivo de código edit.js ¿vale? súper importante voy a hacerla en la barra lateral porque como lo tengo la pantalla chiquitita y tengo el código súper grande pues no lo vaya bien aquí ya de base han metido unas cuantas de de import, vale, ha importado unas cuantas de librerías y demás y de herramientas para que el bloque funcione con lo más básico por ejemplo, aquí tenemos las dos barras basas de internacionalización que aquí es que os lo va diciendo el use block procs que esto es para todo el tema de la configuración adicional que va cogiendo el bloque de los support y demás por ejemplo la clase la clase que va a tener bloque también la mete por ahí luego tenemos aquí el súper importante también el CSS los estilos que le vamos a dar el bloque ¿vale? al que coja metiendo CSS aquí directamente en el bloque se va para afuera aquí todo, cada parte de código en su parte el CSS se va a tocar la parte del editor en el editor punto SAS, vale, no es un CSS, es un SAS es como CSS, o sea, podéis prácticamente usarlo como si fuera CSS que no va a haber problemas vale, solamente que el SAS os da la ventaja de tener variable y demás e ir anirando el CSS ok, pero lo podéis utilizar como si fuera CSS sin problemas y todos los estilos que va a tener el bloque en el editor se meten aquí y a diferencia del style punto SAS que ese también afecta tanto al view, o sea, a la parte de fuera que es esta he metido un párrafo para que me salga el botón y me salga aquí el ver la entrada ¿vale? esta parte que es ya la página web por delante que se llama normalmente el frontend pues este código que aparece aquí o sea, este bloque que si cogemos aquí impresionada, botón derecho podemos aquí a ver super chiquitín vais a ver ya que pone se ve bien ¿no? más o menos que como la grande más todavía ya vale, vais a ver aquí que tenemos ya el div con un montón de cosas y el p que nosotros tenemos ahora os voy a enseñar no he salido el p con un montón de textos aquí dentro de la clase que nosotros no hemos programado que esto es para lo que sirve el use block props todo lo que te suelta esta parte de la clase lo saca el use block props ¿vale? pero vamos, no nos vamos anticipando lo importante es entender ahora mismo que esta parte se llama el frontend y que tú lo vas a tocar desde el view.js ¿que es esto de aquí? mentira desde el safe.js ¿que es esto de aquí? que es la parte del frontend del bloque y que el edit.js es la parte que os va a hacer la maqueta de aquí bueno, pues una vez entendido eso vamos a meternos un poco en faena aquí tenemos encolados los estilos y demás aquí nosotros vamos a tener que ir metiendo un montón de cositas que queremos usar por ejemplo un campo de textos ahora os voy a explicar como es el campo de textos por lo importamos aquí, creo que era en el blog editor ¿vale? esta parte de aquí arriba este archivo ya hay que tocarlo un montón el resto no hace falta tocarlo esto sí aquí también si tocáis algunas cosas normalmente no se rompe yo tengo aquí activa la terminal todavía no me voy a mostrar un mensaje de chungo ha explotado por ahora todo funciona correctamente aquí os explico ya un poquito de esta parte del código lo que os interesa normalmente hacer un bloque fácil, un bloque básico un bloque que te pide tu cliente mira, quiero meter un bloque que tenga dos columnas y tenga dos campos de textos o le metas una imagen nada más que os hace falta prácticamente tocar lo que pone aquí, dentro del retur ¿vale? esto es súper importante, ten en cuenta una cosa como tú metas aquí otro P ya te empieza a decir, escúchame para, para, para que la está aliando o sea, yo porque editor de código cada vez que la cago me empieza a decirquillo,quillo para, para que no funciona ¿vale? ¿por qué? ¿por qué? porque dentro de esta parte del código, de este paréntesis nada más que pueda ver un elemento primario ¿vale? me da igual lo que metéis si metéis un DIP, si metéis un P si metéis lo que queráis es uno ¿vale? y por fuerza porque si no el bloque nos va a funcionar pero ni para atrás por fuerza sea el elemento la etiqueta que sea, súper importante lo vuelvo a repetir, da igual lo que hagáis tenéis que meter entre, entre las llaves estas el tres puntos suspensivos use block props la función esta, este código tenéis que dejarlo ahí en el primer elemento que tocáis si esto es un DIP me da igual de verdad lo que sea pero súper importante ¿por qué? porque como no pongáis la función cita esa es que no va a funcionar prácticamente nada del bloque no va a tener ni su... es como si yo que sé hace una persona y no le da de neis pues tú igual ¿vale? es la forma que va a tener el worker de reconocer que ese bloque es ese y es el que te va a dar aquí ¿vale? lo que hemos visto antes de la consola y demás todo este texto eso lo vemos desde el safe.js que es la parte del... de la maqueta del bloque que sale en el frontend como hemos dicho antes ve aquí, este hay un par de funciones que cambien un poquito del edit.js al safe.js cambien un poquito, normalmente o le ponen un punto safe detrás o le ponen un punto content o le ponen un punto algo pero, vamos, que eso en cuanto hagáis tres o cuatro bloques, ya os acordáis lo que cabí, yo... hace dos semanas y lo veis, y sin problemas aquí vemos igual, que tenemos el P, con los dos colchetes saco los dos... con las dos llaves y el USBlockProb.save ¿ok? como no tengamos esto esto aquí no sale tampoco va a salir si clicamos aquí ¿por qué no se abre? aquí está si tocamos aquí en avanzado el clase adicional ¿vale? si yo meto aquí ahora mi clase adicional que esto realmente... estoy metiendo tres clases distintas esperate que yo he tocado aquí el edit.js esto va a explotar, ahora voy a explicar por qué me va a empezar a chillar la consola, esto es lo importante como esto dos en RIA ¿vale? con llavas crídemas de un alto nivel alto nivel no de complejidad que también, alto nivel me refiero a que es más entendible para el humano nos vamos a consola y aquí vamos a empezar un montón de cosas, esto no es del bloque cuando seas del bloque os vaya a dar cuenta, ¿vale? yo lo voy a dar aquí súper importante, comprobar que esto esté funcionando ¿eh? se ha guardado, todo perfecto, le damos a recargar mira esto a mí no me ha hecho nada seguramente porque no lo tenga cargado pues muy raro porque esto realmente te va a decir, mira la maqueta de aquí no es igual que la del safe ¿vale? aquí debería de salir un mensajito si es el mismo bloque, ¿no? y se está guardando o sea, te vamos a cerrar le vamos a dar otra vez por ese caso bueno, pues ahora no chillar la consola, pero normalmente si tú aquí pones una maqueta que sea distinta de la que hay aquí te va a decir, escúchame ten cuidado porque lo que tú estás teniendo en el EDG es distinto aunque sea en un punto, aunque sea en un guión te va a decir, escúchame esto es completamente distinto a lo que pones en el view de esto no funciona tal es súper instructivo porque te dice exactamente la línea donde está el problema ¿vale? que ahora pues seguramente se atrás lo que pasa es que aquí pues no está haciendo ahora mismo el problema pero bueno, ni quería nada más ver entrada vale, pues nada, pues sin problema os voy a abrir ahora porque ya lo he explicado esto realmente es súper básico ¿vale? ya tenemos nuestro primer bloque, hemos tocado aquí un poquito le vuelvo a dejar el P ¿vale? el useBlockProb ok, que esto ahora panto la tema de la clase y demás si nos vamos aquí, le ponemos aquí la clase clase adicional que le damos en fecena código aquí te va a salir ya la clase adicional si no hubiéramos metido el useBlockProb no hubiera salido esa clase ni todo esto ok ahora os voy a abrir otro código ¿vale? de un plugin o sea, de un bloque más venido arriba abrir carpeta esperate, esto hay que cerrarlo archivo, abrir carpeta esto todo el código que tengo aquí los tres plugins que tengo que, bueno, realmente los dos porque el bloque, mi primer bloque es igual que mi primer bloquecito el bloque con estos avanzado que me acaba de contar ahora voy a dejar en un repositor y lo voy a publicar por twitter ¿vale? para que el que quiera luego como esto claro, el tallera una hora y realmente tengo que explicar bastantes cosas pues imposible que yo del tallentero os enseñe todo o sea que os voy a dejar repositorio ¿vale? y ahí vais a poder sin problema ya os lo dejo abierto, vamos como si lo queréis clonar, descargar, lo que queráis vale, vamos a dejar aquí el bloque el bloque contexto el otro es que es bastante más avanzado mismo modus operandi, en cuanto entro en la carpeta de un bloque npmstar y que esto empieza a funcionar os voy a forzar un fallo ¿vale? para que veáis lo que pasa cuando por esto la velee y ya deja de trabajar ¿vale? y es que no, ni os enteráis bien yo he metido ahí ahora un carácter ¿vale? no sé ni qué he metido ah bueno pues, ¿qué me he cargado aquí? npmstar si yo aquí por ejemplo pongo al de faul ¿vale? una coma me va a empezar a decir ui, error error, error, error y esto ya ha explotado, te dices sin touch, error, específico del cuodo property ¿vale? te va a informar del error ¿vale? y de la posición solamente en el build pero os va a decir que aquí hay un problema ¿vale? y seguramente es lo último que he tocado esto como no pita ni nada, por lo menos tú estás tocando una tontería y te ha dejado de funcionar y tú aquí has cogido ha dicho ui, rojo lo quita, lo soluciona y dice ya está, ya está arreglado aquí no me sale nada rojo por no, porque ya te ha dejado de funcionar el npmstar y aquí es donde te tira media hora programando y no está funcionando y te dice ¿por qué no me funciona? pues por eso te va aquí al npmstar y otra vez ¿vale? a la línea aquí ya vemos un par de cositas distintas ¿vale? aquí vamos a ver os voy a mostrar el... el bloque este que es bloque con textos ¿vale? aquí ya tenemos ya un poquito más de gracia ¿vale? tenemos un título el título del bloque y el texto del bloque que como os habría dado cuenta ya aquí hay contenido ¿vale? ya está puesto el título del bloque y demás ¿cómo hemos hecho esto? las variables ¿vale? lo que guarda la información los bloques se llaman aquí atributos ¿dónde se configura los atributos? en el blog.json ¿ok? aquí los atributos ponéis todas las variables que queráis esto está súper guay porque en vez de tener todas las variables por ahí despedida por todas las hojas de código tú lo tienes aquí organizaito y sin problema ¿vale? aquí los atributos puedo decir ¿cómo se llama la variable? ¿ok? y vais definiendo el tipo, el por defecto el... según el tipo de variable ¿vale? pero normalmente las que vais a utilizar son el string el por ejemplo mostrar título ¿vale? esto va a ser un booleano un booleano que un sí o un no ¿vale? es un true or false ¿ok? yo como voy con el compañero de hija pues ya me va diciendo escúchame tú vas a mostrar aquí mostrar título esto tiene toda la pinta es un booleano ¿vale? y luego tenemos aquí también el... el número es number ¿vale? y hay otro ya más avanzado que es directamente el object que ahí te permite meter pues objetos que son más complejos que una simple variable que es de un tipo de que es un tipo de variable tipo string, booleano, number por aquí puedes meter por un montón de cosas ¿vale? es lo objeto pero es aquí no lo voy a meter ese es más complejo pues nada, tenemos aquí todos los bloques todos los atributos modus operandi, compruebo que esto está funcionando bien, seguimos adelante normalmente el archivo que más problema suele dar este es el bloke Jason luego en el digest para yo conseguir mostrar este campo de textos esto se llama un rich test un rich test ¿ok? ¿esto qué te hace? un texto enriquecido tú le defines aquí en los... en las etiquetas ¿vale? le dice el nombre de la etiqueta porque quiero que me muestre un alletot quiero que me muestre un deep quiero que me muestre un p, un span un lo que sea, un a ¿vale? puedes lo definir aquí ok, os vale el mismo campo de textos el mismo elemento para todo el play order que es lo que te define ¿qué texto va a mostrar? cuando no hay ningún valor en esa variable en este caso escribo tu título se ve ¿no? tenemos el value que el value directamente es entre llaves y de todos los atributos pues punto y el nombre que tengáis porque para acceder a todas las variables de vuestro bloque nada más que tendré que poner aquí la función del edit y en la del save pasarle por parámetros por parámetros poner aquí las llaves y poner el atribute en cuanto pongáis los atributes ya veis que tenéis acceso a todas las variables que tenéis aquí en el block JSON o sea que sin problemas súper fácil, ya lo tenéis ahí todo organizado todo modulado ¿vale? y aquí está un poco la movida el onchain ¿para qué sirve eso? pues lo que pasa cuando cambia el contenido de ese elemento ¿vale? en este caso siempre se escribe así igual ¿vale? entre paréntesis le pasa por parámetros que es el valor que está usando que estás metiendo estás insertando por el ristet igual y flechita para la derecha y usa la función set atributes ¿vale? que esto no funciona si aquí no lo tiene invocado si tú eres el atribute no lo metes por aquí no te funciona, no existe y aquí por parámetros cuando yo digo por parámetros es lo que meto entre estos paréntesis ¿vale? y le pone el nombre del título o sea el nombre de la variable y el valor este ¿vale? y esto es igual para todos los ristets ¿ok? ¿cómo podemos estar usando los ristets? pues porque previamente lo hemos importado en este bloque más arriba aquí esto en el otro bloque en la parte de block editor en los import sólo teníamos el use block props y aquí solamente, o sea, tenemos ya el use prop props y el ristet ¿vale? entonces muy sencillo que quieres utilizar un ristet se lo ponéis aquí en el block editor y sin problemas todos los componentes que queráis ir usando todos los elementos tipo ristets o medios o lo que sea tendré que buscarlo en la documentación en la parte correspondiente ¿ok? y ya lo podéis utilizar si no lo importáis, no lo utilizáis ¿vale? y en el save cambia un poco la historia vale, al igual que aquí veíamos los tres puntitos y el punto save pues aquí vemos el ristet punto content ¿vale? sólo cambia sólo es ese cambio es exactamente podéis copiar y pegar y lo pegáis como ésta es la parte del froning nos hace falta tocar nada ni cambiar nada porque no es un campo de texto no es un campo de introducción de contenido ¿vale? directamente en una etiqueta por on-chain nada y el play order tampoco y le ponéis aquí el punto content y ya está, habéis visto que es súper fácil pasar de la 10gs al 6gs ¿ok? está correcto ¿no? vale, hola mundo le damos a autorizar y aquí pues ahora vamos a ver nuestro bloquecito ¿vale? y ahora voy a enseñaros súper súper mega rápido los support ¿ok? vamos a empezar a ver que esto se mueve entero ¿si? para todo esto mira os voy a enseñar normalmente la del support que es la que más vaya a utilizar y de ahí ya tiráis a la que queráis ¿vale? aunque mi mayor documentación realmente es el repositorio de github de los bloques de Guthemer si de los bloques de Guthemer es la mejor documentación directamente buscáis el bloque del que queráis partir por ejemplo quiero hacer un 2 columnas ¿por qué vais a usar de ejemplo? por el bloque de columnas de Wordpress ¿vale? veis como lo ha montado ahí vais a sacar todos los imports que usan todo lo que usan ¿vale? y vosotros ya aprendís de ahí porque no hay una documentación entonces pues eso ¿vale? todo lo support que esto antes de irme lo quiero enseñar el Wordpress Guthemer support si buscáis esto en Google o en Bing os va a salir esta documentación que no la estáis viendo porque es súper chiquitito y ahora ponemos probabilidades ¿vale? aquí ya te explica todo de los support ¿vale? y además te está diciendo el NewsBlockProb súper importante pues aquí hay cositas tan chulas como por ejemplo el alineamiento ¿vale? dirá ¿para qué sirve esto? vaya flipa ¿por qué? vaya aquí a los support y le ponéis mira es que ya me estaba leyendo nuevamente le ponéis ya hay el aliado ¿ves? más plotado y menos más que me he dado cuenta entonces me ha parado pero que yo me he tirado cuando estaba empezando a programar estos bloques de verdad ¿eh? me diría ahora programando y diciendo ¿por qué no me funciona? si nosotros ahora normalmente con recargar la pestaña con control mayus r que es la recarga de la pestaña con cache ya debería de funcionar ¿veis aquí? nos habría dado cuenta porque esto es lo típico de que nadie se da cuenta de algo porque nos está fijando en eso y esto nos ha aparecido la alineación ¿ok? esto simplemente le va a decir al bloque ¿cómo se va a alinear? esto diréis vaya tonterías pero nada más que hemos puesto una línea de código totalmente vamos a salir despegando solo hemos puesto una línea de código y ya aquí mira como tenemos los bloques ha alineado al tope y no hemos tocado nada y esto os confirmo y aquí nos aparece a cualquier bloque desde la configuración le cambié la configuración del bloque por código con unos filtros que hay y se lo cambiáis todo esto super o vale para eso, yo qué sé el otro super chulo el color recargo con la cache y aquí nos aparece ya la derecha una configuración de color y aquí configuramos el color de texto o el color del fondo aquí salen los del tema y ya por los de por defecto y si queréis pues ya clicáis creo que era ha tenido que estar degradado si lo queréis configurado ¿vale? solo he puesto otras líneas de código y ya estoy configurando los colores básicos de lo típico, el texto, el fondo y demás o sea, lo que está cambiando el bloque habiendo tocado una tontería y ya por ejemplo otro un había otro no lo voy a poner hay otro por ejemplo que es el spacing vale, que es para controlar el margin y el padding del bloque ok, tú lo metes aquí spacing creo que directamente true no hay que ir diciéndole uno a uno ¿estás funcionando? el copilot la extensión de copilot de jihap ¿vale? vamos aquí recargamos y ahora vamos a ver aquí a la derecha otra configuración más que se llama dimensiones ok y aquí ya podemos definir lo que queramos de por ejemplo relleno, relleno del padding pues ya lo cambiamos, esto es una rebelenda tontería que solamente hemos puesto dos líneas de código, casi nadie lo sabe porque no se mete la documentación y esto solo podéis aplicar cualquier bloque que los de warp nativo todo esto le funciona pero los que os descarguéis del plugin x de fulanito de tal que tiene este bloque y queréis meterle el padding o el margin para poder modificarlo que esto realmente lo que más uso le da a la gente es que yo tengo este plugin que me gusta un montón pero yo quería ponerle el margin y el padding y te va el desarrollador o lo que sea que te dice vale te monto un plugin desde cero con un bloque desde cero que haga exactamente lo mismo te ve cobrada por 34.000 horas cuando realmente lo que puedes hacer es filtrar lo su porque tiene ese bloque le mete el spacing y chapamos vale y ya con esto ya termino vale y ya se ve aquí que se ha tocado por todo esto o sea que nada, ya aquí tenía preparado un pedazo de bloque con la barra lateral, el control pero ya era más complicado eso como comento lo dejo en mi Twitter, lo voy a poner ahora en Twitter para todo lo interesado que quiera ver todo el código de explicado y demás, de cómo controlar la barrita de aquí vale que le vamos a dar un par de opciones y aquí en lateral para poder por ejemplo tocar el texto del título y la descripción tocarla desde que abajo y ponerle un chatbot quiero que me muestre el título para que tú este bloque puedas controlar si muestras el título o no, por ejemplo vale, por cosas de esas, para poder controlar lo que muestras, eso lo voy a explicar lo pongo con el Twitter y demás, vale y ya está poquito más quedan dos minutos cualquier pregunta así rapidita aunque normalmente no me la suena a hacer ¿Cómo? lo vais a ver por el Twitter pero es PedroMCJ 95 pero eso está por todos lados, por el programa también, creo que era y demás más plugins si no, tiene que coger porque esto está pensado de la siguiente forma tú no vas a obligar a nadie a que se instale un plugin con 34 bloques y que solamente utilice uno entonces si usas esta herramienta está ya todo preparado y todo pensando en que tú vas a hacer un plugin por bloques, ¿vale? y como os he comentado, tú no estás arrastrando todo el peso del plugin, ¿vale? sino que estás arrastrando por solamente lo que tienes en la carpeta del build y el PHP o sea que no, la excusa del Dios, que me estoy cargando 34.000 plugins que me pesan un montón sin problema porque está pensado para que pese poquito ¿vale? en el fondo en principio están los theme support que hay que recordar que hay temas que nos soportan ciertos plugins o ciertos bloques y demás o ciertas propiedades de algunos bloques pero de normal esto es el tema no sé cuáles era el 2023 o algo de eso es el básico de WordPress claro, normalmente esto debería de funcionar sin problemas porque esto es nativo 100% de WordPress y de Gutenberg que usa la herramienta de WordPress, súper bien pero no estoy cogiendo la herramienta de esto es consolidar por WordPress o sea que sin problemas ah, no tenía preguntas ah, vale, aquí hay una documentación eso ya lo paso es más complejo aquí se hubiera pegado un tiro la mayoría porque ya empieza a hacer movidas de brujería negra o sea, ya empieza a hacer un montón de movidas de conectarme, de hacer como si fueran SQL y demás y es más complicado nos pasamos un minuto no, eso vaya a poder acceder eso también lo voy a pasar por Twitter una enlace a la dispositiva para que tengáis toda esa información si, por Twitter por el Twitter voy a poner un tweet mencionando o retweetando el tweet de la Workin para que lo tengáis también en la Workin con los repositorios y la diapositiva y aparte el que me quiera preguntar de, oye, mira, me ha gustado esto he visto que tocar los bloques de Gutenberg no es tan complicado como me parecía como me lo vendían y me gustaría aprender más acerca de cómo hacer bloques de Gutenberg porque me coge por aquí, me secuestra y me empieza a hacer preguntas, ¿vale? pero ya nos vamos y nada, muchas gracias por venir muchas gracias a la vuelta