Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico

Bienvenidos a este masterclass. Hoy veremos cómo podemos construir un sitio web de Next JS visualmente legible utilizando la biblioteca React Bricks. Soy Matteo Frana y soy el COO y desarrollador principal de frontend en React Bricks. Este será un masterclass de codificación en vivo, pero sugiero que me sigan y me gustaría que estén relajados observando lo que estoy haciendo en lugar de tener el estrés de copiar el código apresuradamente. Les daré el enlace al repositorio al final. Y de todos modos, si me siguen, entenderán los conceptos básicos de React Bricks tan bien que podrán comenzar desde cero sin siquiera necesidad de recurrir al repositorio. Así que por favor síganme, y no sabemos cómo copiar el código. Es realmente fácil. Verán que tendrán un método muy claro. Y así comenzaré con un par de diapositivas para darles un contexto sobre qué es React Bricks. Y será menos de 10 minutos. Y luego comenzaremos a codificar.

Entonces comencemos con qué es React Bricks? React Bricks es un CMS con edición visual basado en componentes de React. Pero la pregunta más importante es ¿por qué? ¿Por qué creamos otro CMS? Y bueno, sin revelar demasiado de la charla que será el 6 de junio, durante la historia de la gestión de contenido, vimos muchas veces la alternancia entre la edición visual y la edición con formularios. Algo que es genial para los desarrolladores y algo que es genial para los editores de contenido sin encontrar una síntesis satisfactoria entre los dos. Así que cuando comencé con el desarrollo web, fue en 1996 y solo se trataba de escribir código HTML, que enviarías a un servidor BFTP. Luego tuvimos las herramientas visuales como FrontPage donde podías crear el código visualmente, pero el código que se creaba era un desastre. Y si le dabas FrontPage a tu cliente, podrían arruinar el diseño. Así que tuvimos CGI con Pearl donde podías crear los formularios para editar contenido en una base de datos y luego obtener el contenido de la base de datos para crear el HTML y ESP y PHP. Que son las mismas cosas con el lenguaje de plantillas. Y luego vinieron los CMS, Joomla, WordPress, donde podías editar de manera visual en un lienzo en blanco nuevamente. Pero teníamos el problema de que aún podíamos tener a nuestros clientes creando texto rojo sobre fondo verde o algo así. Y así agregamos campos personalizados avanzados a WordPress y volvimos a los formularios de Ray. Entonces, y llegamos a hoy donde tenemos estas dos palabras, tenemos las herramientas como Wix o Webflow, que son geniales para los editores, pero no son adecuados para un sitio web corporativo porque no son lo suficientemente flexibles. Por ejemplo, con Wix, no puedes tener tu sistema de diseño perfecto en píxeles. Con Webflow, cuando tu editor entiende cómo cambiar cosas, agregar margen, etc., pueden volverse creativos y cambiar el diseño. Y por otro lado, tenemos los CMS sin cabeza que amamos, pero donde volvemos a los formularios grises. Bueno, viste, si viste la próxima Conf, verás que incluso Vercel está pensando que esta edición visual ahora es el momento de encontrar una síntesis de una forma visual de editar sitios web, lo cual también es genial para los desarrolladores. Y hablaremos de eso más adelante. Pero básicamente esto es por qué creamos React Bricks. Entonces, básicamente necesitamos cuatro productos, un CMS sin cabeza, un editor visual, una biblioteca de frontend para crear nuestro código y un producto llamado Libertad. Y ahora veremos por qué.

Y pensemos que tenemos un Editor de Contenido también un CMO, un Desarrollador, un Diseñador y un CTO. Parece el comienzo y el final de un chiste. Un Editor, Desarrollador, Diseñador, y el CTO entran a un bar. Pero veamos cuáles son las necesidades de estas personas. El Editor quiere tener una herramienta fácil de usar. No quiere lidiar con entidades y relaciones abstractas. Nosotros como Desarrolladores, necesitamos algo que sea flexible que nos permita usar la herramienta que amamos, los marcos de React y cualquier marco de CSS donde y necesitamos que el editor sea autónomo porque no queremos explicar a los editores cómo usar el CMS. Necesitan ser autónomos en su uso. Queremos ser productivos, por supuesto, mientras que los diseñadores quieren poder expresar la imagen corporativa perfecta con el sistema de diseño y asegurarse de que el editor no pueda romperlo. El CTO quiere que el equipo sea productivo y quiere elegir una solución que sea flexible y a prueba de futuro. Entonces, lo que necesitamos es un editor visual para el editor y un verdadero editor visual donde tengamos la edición en línea como Word o Pages. Para la flexibilidad, queremos el CMS acoplado sin cabeza y la capacidad de usar React como sucede con un sin cabeza. Para que los lectores sean autónomos, solo necesitamos un nuevo editor visual, por lo que también resuelve el problema para nosotros. Para ser productivos, necesitamos un método. Entonces, un método con opiniones que nos ayude a crear el front-end. Para el sistema de diseño, necesitamos bloques. Necesitamos buenas restricciones para que el sistema de diseño no se pueda romper. Y si tenemos todas estas cosas, tenemos un equipo altamente productivo porque el editor está feliz, el desarrollador está feliz, y el diseñador también está feliz. Entonces, un gran equipo, gran diseño, buen código. Buen código y, al final, gran contenido. Entonces, para tener flexibilidad y tener un sistema que sea a prueba de futuro, necesitamos la libertad. La libertad de elegir hoy y la libertad de cambiar de idea mañana sobre el marco, por ejemplo. Entonces, queremos un sistema que sea independiente del marco que funcione con SDS, con Gatsby, con Remix, que funcionará con Astro muy pronto. Y queremos la libertad de poder alojar el sitio web donde queramos, ya sea Recel, Netlify o cualquier otro. Entonces, permítanme reorganizar estas cosas. Necesitamos un CMS sin cabeza, un editor visual. React y Blocks son solo los componentes de React. Y necesitamos un método con restricciones y libertad. El CMS sin cabeza es proporcionado por las API de React Bricks. Entonces ahora tienes un CMS sin cabeza de nivel empresarial. Con la biblioteca de React Bricks, tienes un método para crear bloques de contenido visualmente editables que son componentes de React, y para establecer buenas restricciones para los editores. Y obtienes de forma gratuita la libertad de elegir y cambiar de idea. Entonces, con un solo producto con React Bricks, obtienes estos cuatro productos. Con otras soluciones que estamos viendo hoy, como por ejemplo, lo que vimos en la VersaConf, necesitas un CMS sin cabeza, que es algo como sanity o contentful. Luego tienes el editor visual, que realmente no está en línea con la edición visual como la que verás en un momento, y funcionará en la colaboración que tienes en VerCel. Entonces estás atado a esa plataforma. No tienes un buen método para crear los bloques del front-end, y estás obligado a usar next JS como marco. Entonces, al final, pierdes parte de la libertad.

Entonces, ¿cómo se crea React Brics? Bueno, todo se basa en este concepto de bloques de contenido visualmente editables que son simplemente componentes de React mejorados con la biblioteca de React Brics. Y llamamos a estos bloques de contenido Brics. Así que es muy fácil. Es como usar Word o Pages para algunos de los contenidos que editas directamente. Por ejemplo, para el texto, simplemente haces clic en él y lo editas. Para las imágenes, haces clic y las editas. Y esto es posible gracias a los componentes visuales de React Brics como texto, texto enriquecido, imagen, repetidor, archivo, etc. Y para las propiedades que no se pueden editar directamente como el color de fondo, es similar a lo que harías en Word. Buscas un control cibernético. Y así, los Brics de React tienen un esquema donde puedes definir propiedades de edición lateral que son simplemente controles que se asignan a las propiedades de tu componente para que recibas estos valores como propiedades de tu componente.

Pero comencemos de inmediato. Para comenzar, solo necesitamos ejecutar un comando de CLI. Así que npx create-reactbrics-app en su última versión. Hagámoslo. create-reactbrics-app en su última versión. De acuerdo, me pregunta si tengo una cuenta. Sí, la tengo. Luego ingreso un correo electrónico de cuenta. Ingreso mi contraseña. De acuerdo, ahora puedo usar una aplicación existente o crear una nueva, eso es genial, una nueva aplicación. Masterclass dos, tres, cinco, 18. Entonces esto también está bien para el nombre del proyecto y para el nombre de la carpeta. Ahora puedo elegir si quiero un proyecto vacío o un sitio web y un blog con Tailwind. Ahora elegimos este para que ya tengamos algunos estilos y algunos bloques predefinidos. Luego podemos elegir un framework. Entonces ves que podemos elegir NextJS, obtener VR Remix y estamos trabajando en el inicio de Astro. Así que elijamos NextJS. Podemos cargar algún contenido predeterminado, digamos que sí. Entonces ahora el CLI descargará el inicio correcto, descargará algunos bloques predefinidos de la interfaz de bloques, configurará toda la configuración y la variable .env con nuestro ID de la aplicación y clave de API, por lo que está conectado a nuestra aplicación Rare Bricks, que instalará la dependencia y luego, después de configurar el repositorio, verás que hará algunas llamadas a nuestra API para crear algunas páginas de ejemplo.

De acuerdo, ahora podemos ingresar al proyecto. Bien, y luego abramos nuestro VS Code. Mientras tanto, iniciemos el proyecto. Mientras se compila, echemos un vistazo a la estructura de carpetas del proyecto, es un proyecto XGS, y ves que tenemos la carpeta de páginas, y también crearemos una versión con una nueva carpeta de aplicación de next. Y ves que en la carpeta de páginas, está la carpeta de administración, donde se encuentran el sitio de administración y el sitio web. Así que alojas el sitio de administración junto con el sitio web, porque ambos acceden a nuestros bloques de contenido. Y lo que ves en el administrador es exactamente lo que obtenemos en el front-end. Y ves que solo tienes el editor, el playground, el componente de configuración de RealBricks con una capa de autenticación. Por lo general, no tienes que tocar esta parte, y tenemos una página de captura aquí, donde la parte importante es que en el proxy Get-study, ves que obtenemos la página usando una función de RealBricks, que es FetchPage que obtendrá el Slug y obtendrá el contenido. Y luego tenemos un visor de página que mostrará el contenido exactamente como lo vimos en el administrador. Realmente, tenemos un visor de tres páginas aquí porque tenemos uno para el encabezado, uno para el contenido de la página y uno para el pie de página. Esta es una forma de reutilizar contenido en todas las páginas cuando es utilizado por todas las páginas, luego veremos más adelante tres formas en las que puedes reutilizar contenido en todas las páginas en React Bricks. Para el encabezado y el pie de página, es muy, es útil hacer estas cosas y tener un visor de tres páginas. Y luego tenemos la carpeta de React Bricks que es donde vive toda la configuración de React Bricks. Y en particular, tenemos dos partes muy importantes que son Bricks y PageTypes. Los Bricks son nuestros bloques de contenido. Entonces ves que los bloques provienen de esta carpeta de Bricks. Si abro la carpeta de Bricks, tengo un índice. Y lo que estamos haciendo aquí es exportar una matriz de temas, tenemos este concepto de temas. Y tenemos dos temas. Uno es este tema personalizado, que tiene solo una categoría, sección de héroe con una unidad de héroe, que está aquí, esta es mi componente de unidad de héroe. Y luego tengo el tema de la interfaz de bloques reales, que proviene de esta carpeta. Y si abro el índice en este caso, ves que tenemos muchos componentes predefinidos que están organizados en categorías. Y luego se exportan como un tema de la interfaz de bloques reales. Ahora abramos el proyecto para que veamos la interfaz de bloques reales. Localhost 3000. Este es el sitio web, donde hicimos el contenido predeterminado. Entonces ves, tenemos una página de inicio, todo lo que ves son bloques con algún contenido predeterminado dentro. Y tenemos una página Acerca de nosotros, tenemos un blog organizado con etiquetas. Podemos hacer clic en un artículo del blog y ver el contenido. Pero ahora vayamos a este botón de editar contenido aquí que nos llevará a la carpeta de administración. Por supuesto, no lo tendrás en tu sitio web en vivo. Pero es solo una forma fácil de llegar a la carpeta de administración. Ahora podemos iniciar sesión con las mismas credenciales que usamos para el CLI y que usamos para el registro de nuestro usuario. Y aquí tenemos las páginas. Aquí hice clic en Inicio. Y cuando hago clic en el contenido, ves que aparece este borde rosa. Esto es un bloque. Entonces esto es un componentes react con un esquema y propiedades particulares y que está utilizando los componentes de React Bricks para ser editables visualmente. Entonces ves que aquí puedo hacer clic y escribir directamente sobre el contenido. Así que bienvenido a la masterclass de React Bricks. No estoy abriendo ninguna ventana emergente. No estoy accediendo a controles de la barra lateral. Simplemente escribo sobre el texto como si estuviera en Word o Pages. En este caso, puedo aplicar un estilo, que es resaltar porque en este texto, decidí que quería tener solo un resaltado. En este caso, a la derecha ves que puedo aplicar negrita y luego veremos que puedes proporcionar tu propia función de representación para cualquier estilo que tengas en los textos enriquecidos. A la derecha, ves que puedo cambiar el degradado del texto, por ejemplo, o puedo abrir este grupo plegable de fondo y cambiar el color de fondo. Entonces todo lo que ves aquí está definido por este bloque. Entonces puedes definir un conjunto de grupos plegables de propiedades con controles que se asignan a tus propiedades para que puedas renderizar condicionalmente según estas propiedades. Si voy a otro bloque, ves que en este caso, para el fondo tienes otros colores disponibles y puedes eliminar este booleano de escala de grises para tener los logotipos en color. Si voy a este otro bloque aquí, ves, por ejemplo, esto es muy flexible, puedes elegir, es un bloque de medios de texto donde puedo elegir tener un video de un video local un video en streaming donde puedo configurar la plataforma y el ID del video, puedo tener una imagen para que puedan aplicar eso y cargar una imagen que puede decidir el tamaño del medio, etc.

Ahora veamos el código de un brick. Veamos cómo se crea un brick. Primero que nada, me gustaría mostrarte mi brick Hero Unit, el del tema personalizado. Verás que cuando hago clic para agregar un nuevo brick, tengo todos los bricks disponibles. Y cuando paso el cursor sobre un brick, ves una vista previa del contenido. Estos son todos los bricks que puedes usar que ya están hechos. Así que tienes muchos, muchos bricks. Si quieres hacer algo similar a estos, puedes tomar inspiration de estos bricks. Por supuesto, luego crearás el tuyo propio, pero si elijo en lugar de React Bricks UI, elijo personalizado, estoy filtrando solo estos temas. Y ahora usaremos este tema personalizado. Permíteme agregar este Hero Unit personalizado. Verás que tenemos una imagen. Puedo hacer clic y cargar una imagen. Por ejemplo, puedo agregar un ícono. En este caso, ves, no puedo prop porque es un SVG, pero seleccionemos una imagen de Splash. De acuerdo, obtengamos esta imagen de Splash. Veamos cómo se ve esto. De acuerdo, ves que en este caso, puedo recortarlo, pero solo puedo recortarlo como un cuadrado. Veremos en un momento por qué. Así que volvamos al nombre social amigable. De acuerdo, así que tengo una imagen, tengo un texto donde no puedo aplicar ningún estilo de texto enriquecido y no puedo crear nuevas líneas si hago clic en el botón Enter. Y tenemos este texto enriquecido donde puedo aplicar negrita, cursiva, resaltado, código, y también puedo hacer clic para crear nuevas líneas. Así que abramos el código de este brick. Vimos que este es el MyHero unit. Primero que nada, ves que importamos algunos componentes de React Bricks, imagen, texto, texto enriquecido y los tipos de React Bricks. React Bricks está completamente escrito en TypeScript, por lo que todo está completamente tipado. El componente es de tipo brick, pero un brick ves que es solo un componente funcional con una propiedad de esquema. Y puedes establecer estos genéricos para que puedas definir un tipo o una interfaz para este brick, y también se utiliza en el esquema donde defines las propiedades predeterminadas para este componente. Pero lo veremos en un momento. Ves que aquí tenemos una imagen con la propiedad de nombre, un alt de respaldo. Entonces tenemos una etiqueta ALT como respaldo, pero viste que cuando subo la imagen, puedo decidir cuál es el alt. Luego tengo un ancho máximo. Esto es utilizado por el servidor de React Bricks para que si sé que una imagen tiene un ancho máximo de 200 píxeles, no es útil que el servidor de React Bricks cree una imagen de 2000 píxeles para la pantalla grande porque de todos modos será de 200 píxeles. Entonces creará una imagen que es dos veces 200 píxeles para la pantalla retina. Esta relación de aspecto es lo que hace que el recorte esté limitado a ser un cuadrado. Entonces puedo establecer una relación de aspecto para que nuestros editores puedan recortar directamente dentro de la interfaz pero teniendo una relación de aspecto fija si quiero. Y estoy aplicando un nombre de clase de imagen. Por ejemplo, si cambio la clase a redondeado y vamos aquí, ves que ahora está redondeado. Luego tenemos el texto con una función de representación. Entonces, cuando escribo sobre el texto, estoy escribiendo este h1. Ahora ves que estoy aplicando los nombres de clase porque estoy usando Tailwind, pero Rapbox funciona con cualquier framework de CSS, sin framework de CSS, con los frameworks de CSS en JS. Entonces ves que tengo este bloque de representación, un marcador de posición y la propiedad de nombre. Si borro este texto, tengo el tipo de marcador de posición. Pongo el título. Luego tenemos el texto enriquecido. El texto enriquecido es similar al texto pero puedo definir las características permitidas. Entonces ves que tenemos todo el código, los encabezados, resaltado, lista ordenada, cita, etc. Y pueden definir la función de representación para todo. En este caso, hice la anulación del código de representación para que no sea solo una etiqueta de código sino que tenga esta clase aplicada. Si quiero que el código sea azul, puedo decir, por ejemplo, Sky 200 y en oscuro se convierte en Sky 800. Permíteme guardar. Y ahora, Oh, no guardé. Olvidé guardar. Así que agreguemos el Hero Unit personalizado nuevamente y creemos una etiqueta de código. Ahora ves que se llama Sky y si lo pruebo en el modo de color oscuro, es Sky oscuro. De acuerdo, guardemos esta vez. Y bien, estoy en lo correcto. Ves que en este caso, solo tenemos una propiedad simple, relleno grande o relleno pequeño. Entonces, cuando hago clic, cambio, ese es solo el relleno vertical. Y ahora necesitamos ver este esquema para ver cómo funciona esto. Ves que este esquema tiene un nombre, tiene una etiqueta que aparece cuando agregas el nuevo brick, tiene una URL de imagen de vista previa y estas pueden generarse automáticamente por Real Bricks, lo veremos en un momento, luego tenemos una función que devuelve las propiedades predeterminadas que tenemos cuando se agrega un nuevo brick de este tipo a la página. Y luego hemos decidido las propiedades, pueden ser solo una matriz de propiedades o una matriz de grupos plegables de propiedades en bricks más complejos, en este caso, solo tenemos una propiedad, es de tipo select y las opciones son grande o pequeño. Lo que hacemos es simplemente tomar esta propiedad de relleno y renderizar condicionalmente, aplicando una clase u otra según esta propiedad de relleno. Ahora es el momento de crear nuestro propio brick. Y me gustaría crear un brick que tenga un texto en un lado y solo una imagen en el otro lado, algo así como un flex con dos columnas de texto, tal vez digamos un título y una descripción y luego una imagen. Entonces lo crearé en esta carpeta personalizada. Así que creemos un nuevo archivo. Llamémoslo, text.image.tsx. Y aquí te muestro que he instalado un complemento de VS Code con Snippet. Así que solo diré brick y obtendré un esqueleto de brick completado para mí, hay muchos autocompletados que mostraré.

Pero para este primer brick, lo escribiremos todo a mano. Así que te sugiero que instales el complemento de React Bricks para VS Code. Y ahora importemos los tipos de React Bricks. Y creemos un componente. Así que texto e imagen, que es del tipo Brick. Y por ahora, creemos solo un div. Y en este div, pongamos un h1, digamos h1 más nombre. Hagámoslo un poco más grande y en negrita. Tiene un margen inferior que será útil más adelante. Y digamos que en el modo oscuro, el texto es blanco.

De acuerdo. Y digamos hola mundo. De acuerdo. Ahora, exportemos este componente. Pero vemos que este no es un brick válido porque para un brick, también necesitamos tener el esquema. Así que creémoslo. Y necesitamos tener al menos un nombre para el brick. En este caso, hagamos workshop texto imagen. Y una etiqueta, digamos texto imagen. De acuerdo, ahora este es un brick mínimo válido. Agreguémoslo a todos nuestros bricks. Así que voy al índice y aquí, ahora creemos una nueva categoría. Esto es sección de héroe. Creemos una nueva categoría que llamaremos contenido principal. Y aquí, agreguemos nuestro texto imagen. De acuerdo, recarguemos. Ahora, hago clic en el botón más y verás que también tenemos texto imagen. Cuando paso el cursor aquí, ves que tenemos hola mundo y no podemos cambiarlo porque es solo el texto. No usamos el componente de texto de React Bricks. Así que arreglemos eso. Imagen y luego agreguemos, solo para tener mejores gráficos, permíteme agregar una sección de Bricks UI aquí para que no todo esté en el lado izquierdo, sino un poco más centrado con el contenedor también. De acuerdo. De acuerdo, ahora agreguemos un texto de React Bricks. Así que texto, lo estoy importando de React Bricks y para el texto también tenemos un sneaker. Así que te muestro que puede decir texto de React Bricks y así creará un texto mínimo, vamos a usarlo. No lo he hecho, llamemos a esta prop título. Entonces tienes un texto con la prop nombre de título y el tipo de marcador de posición escribe un título. En cuanto a la función de representación, podemos usar este h1 que ya creamos. Así que en lugar de este objetivo giratorio, tengamos este h1, por supuesto, en lugar de Hola Mundo, usaremos los hijos para la función de representación. Y veamos qué sucede ahora.

De acuerdo, ya ves que hay escribe un título. Así que ahora puedo escribir, este es un título y es editable visualmente. No tengo formato. Y no puedo agregar nuevas líneas. Es un texto simple que nuestro editor puede editar. De acuerdo, así que ves, cuando tenemos un nuevo brick, ahora, el editor verá el marcador de posición. Si queremos agregar un texto predeterminado, podemos hacerlo con la función get default props. Así que hagámoslo. Obtén propiedades predeterminadas. Devolverá un objeto con el título. Digamos, brick como un ladrillo. Si conoces a Jeju-taro, sabes, el título de la canción de Jeju-taro. Así que ahora, cuando agregue un brick de este tipo, así que hagamos clic en el botón más y agreguemos un texto imagen, verás que tenemos este texto predeterminado. Perfecto, ahora, permíteme agregar la imagen. Así que queremos un texto a la izquierda y una imagen a la derecha. Así que agreguemos un div de flex aquí, solo flex, justificar entre. Y aquí tenemos dos divs, uno para el texto y otro para la imagen. Pongamos nuestro texto en la primera columna. Y digamos que aquí tenemos una clase, que es un ancho de dos sobre cinco, para que tengamos un espacio de uno sobre cinco entre las dos columnas. Hacemos lo mismo para las otras columnas. De acuerdo y aquí agregamos nuestro componente de imagen de React Bricks, lo importamos de React Bricks. Y ahora tengo un fragmento también para la imagen. Así que imagen, hago clic en imagen de React Bricks. Y así ves que hay esta imagen con la prop nombre de imagen y en alt, esto es una imagen. No soy bueno en SEO, así que uso este texto alternativo aquí. Y digamos que tenemos un ancho máximo de 600 para la relación de aspecto. Digamos que queremos una imagen horizontal. Así que veamos, digamos 1.5. Y así, probémoslo. De acuerdo, agregué mi texto imagen y ves que ahora tenemos el título y tengo una imagen y cuando hago clic seleccionemos desde un splash, nuestro acostumbrado paisaje marino.

Quieres irte de vacaciones. Y ves que cuando selecciono una imagen puedo recortarla pero con estas relaciones de aspecto de píxeles de 1.5 sobre uno. Bien, ahora también me gustaría agregar una descripción debajo. Entonces, debajo de este texto, quiero agregar el texto enriquecido. Así que, texto enriquecido del frontend enriquecido y lo adivinaste. También tengo un fragmento para el texto enriquecido.

De acuerdo, digamos que en este caso no queremos renderizar un span sino que queremos renderizar un párrafo. Así que digamos un párrafo con un nombre de clase, digamos Text-LG con un poco de margen en la parte inferior y el texto más oscuro en blanco. De acuerdo, cerremos el P, perfecto. En cuanto a las funciones permitidas, ves que el fragmento crea solo el texto en negrita. Agreguemos también el texto en itálica. De acuerdo. Y también quiero crear una función de representación para que pueda proporcionar mi función de representación, obtengo los hijos y devuelvo una etiqueta i en los hijos pero aplico un nombre de clase. Hagámoslo azul. Así que texto digamos Sky 500. Y veamos cómo funciona. De acuerdo, ves que tengo el tipo de texto. Necesitamos agregar un valor predeterminado también para esto después pero aquí ves que puedo escribir y puedo aplicar negrita, puedo aplicar itálica y para la itálica ves que tienes este texto azul aquí porque definí la función de representación. Así que veamos solo para que podamos probar todo en el modo oscuro. Como también usamos las clases oscuras de Tailwind tenemos un componente que es solo código oscuro y compatible con el modo oscuro. Podemos probarlo en diferentes resoluciones que, por cierto, también puedes configurar en la configuración de las reglas, si deseas otros puntos de interrupción. Y ves que en el teléfono, esto no se ve tan bien así que arreglémoslo en un segundo. Podemos decir que es una llamada Flex de forma predeterminada y ajustar después de cierto punto se convierte en un crecimiento flexible. Así que también podemos decir que el ajuste cuando está por encima de cierto punto y debajo tenemos un margen para que se colapse y tengamos un poco de margen entre el texto y la imagen y luego desaparezca. De acuerdo y lo mismo ocurre para SM. De acuerdo, probemos esto. De acuerdo. Oh, no guardé, siempre olvido guardar. De acuerdo, ves que ahora tenemos un brick que es editable, podemos editar el título, podemos editar la descripción, podemos agregar una imagen y ya es compatible con el modo oscuro y receptivo. También podemos probar toda la página con la vista previa de pantalla completa y ves exactamente lo que verás con el Visor de Páginas. Este es el modo de solo lectura de React Bricks y lo que veremos en el frontend. Ahora que tenemos este brick, agreguemos una propiedad de edición lateral porque ves a la derecha no podemos modificar nada de este brick. Me gustaría que el editor pueda cambiar el color sin complicarse demasiado, solo quiero que pueda elegir blanco o celeste claro así que creemos una propiedad de edición lateral. Así que tengo un array de propiedades laterales, esto es un array y para crear una propiedad lateral, puedo usar un fragmento, así que hago clic en prop lateral. Lo mínimo que necesitamos configurar es un nombre, digamos BG Color, esto se convertirá en nuestra propiedad de nuestro componente, por supuesto, una etiqueta color de fondo, y el tipo, aquí ves que tenemos Booleano, el rango de números attimage, texto, etc. Ahora elijamos un select, para un control de selección, podemos proporcionar opciones de selección, y las opciones de selección tienen una propiedad de visualización, que puede ser, select, radio o color. En este caso, queremos un selector de color, así que elegimos color. Y luego tenemos el array de opciones, puedes proporcionar un array de opciones, o puedes usar una función que devuelva las opciones. Y también puedes proporcionar una función asíncrona que devolverá una promesa que se resuelve a un array de opciones, para que también puedas llamar a una API externa para obtener las opciones. Ahora solo necesito opciones simples, así que creemos este array. Una opción es un objeto que simplemente seleccionamos, etiqueta y valor. En nuestro caso, digamos blanco para el fondo blanco, y agregamos un valor. El valor puede ser cualquier cosa para el tipo de opción. Pero si estás usando la visualización de color, debe ser un objeto con al menos la propiedad de color. ¿Por qué? Porque necesitamos mostrar el color ballet, así que necesitamos un color. Así que en este caso, lo siento, FFF. Tenemos el FFF, el color blanco. Y como estamos usando Tailwind, me gustaría agregar también el nombre de clase aquí, que es bg-white, para que tengamos nuestra clase que podemos usar para renderizar. Agreguemos otra opción, de lo contrario no tiene sentido, así que digamos celeste. Y así es bg-sky 100, y ahora debes confiar en mí que el código para este color es E0F2FE. De acuerdo, tenemos un control, que permite seleccionar, permite a nuestro editor seleccionar un color. Necesitamos usarlo en nuestro código, así que obtengamos la propiedad bgColor. Y por supuesto, necesitamos definir una base o un tipo que desees. Así que digamos, props de texto e imagen. Y aquí defino un bgColor, que es de tipo bueno, en las reglas tienes el tipo, tienes la interfaz IColor, que es solo un objeto con una propiedad de color. En este caso, también necesitamos agregar el nombre de clase, tipo string, que agregamos. Y así, agreguemos esto genérico a nuestro brick. Es un brick con esta interfaz. Y ahora tenemos el bgColor que podemos usar. Y para usarlo, solo podemos usar esta sección, que ya tiene una propiedad de color de fondo, y esta propiedad de color de fondo es muy útil porque ya obtiene un objeto con el color y el nombre de clase. Así que solo pasamos bgColor aquí. Y ahora, de acuerdo, ves que el get default props arroja un error porque necesitamos proporcionar un valor predeterminado para este bgColor. Y digamos que de forma predeterminada, queremos el fondo blanco. De acuerdo, estamos listos. Recarguemos. De acuerdo, y ahora ves que de forma predeterminada, no tenemos nada seleccionado porque este componente ya estaba aquí. Si agrego uno nuevo, tendré el blanco seleccionado, y ahora puedo elegir blanco o celeste. Y ves que el color de fondo cambia y nuestro editor puede cambiar el color de fondo, pero solo con lo que nuestro sistema de design ha definido. Ahora, agreguemos un nuevo color y agreguemos también un color oscuro, digamos BG sky 900, que es 082F49. Así que te muestro eso.

Permíteme verificar una cosa. Oye, no le di un valor predeterminado al texto. Así que démosle también un valor predeterminado. Y ahora, permíteme recargar. No te vi. Ahora ves que puedo elegir blanco, este celeste claro o este azul. Y ves que los bricks entienden que este es un color oscuro y por lo tanto el texto es blanco. Pero es mejor agregar también un dark plus aquí, para que el viento nos ayude. Y guardemos. Y ahora cuando recargue, obtendremos el texto blanco cuando apliquemos el color oscuro.

De acuerdo, así que también vimos cómo podemos crear estas propiedades de edición lateral. Y ahora agreguemos otra propiedad para que aprendamos bien el método. Por ejemplo, podemos elegir, podemos permitir que el editor elija el lado de la imagen y el texto. Así que agreguemos otra propiedad aquí, que es una propiedad de edición lateral de clic. Es, digamos, lado de la imagen. Lado de la imagen y es de tipo, bueno, diría que haré un selector de botón de radio en este caso. Y el selector de botón de radio es un select y las opciones de selección. Así que veamos, también tenemos un fragmento para las opciones de selección. Hago clic en él y es de tipo select pero quiero mostrarlo como un radio. Y una opción es izquierda. Quiero la imagen a la izquierda. Y la otra opción es derecha. Tienes la imagen a la derecha como está ahora. Así que vayamos a nuestra interfaz. Agregamos el lado de la imagen, que es de tipo, es izquierda o derecha. Y podemos tomar este lado de la imagen y fácilmente. Solo necesitamos cambiar esta cuerda flex a una cuerda flex inversa. Así que eliminemos estas y creemos una plantilla de cadena. No quiero nada advanced como usar el nombre de clase algo así. Solo hago esto. Si el lado de la imagen es derecha, entonces uso el nombre de clase flex. De lo contrario, hago flex inversa. De acuerdo, veamos si esto funciona. De acuerdo, izquierda, derecha. De acuerdo, así que también necesitamos definir un valor predeterminado para esto para que cuando agreguemos el nuevo brick, si queremos asegurarnos de que tengamos el texto a la izquierda y la imagen a la derecha, podemos decir que el lado de la imagen por defecto es, ves que tienes el autocompletado aquí porque el get default props usa los genéricos que le diste a React Bricks. Y así vemos que decimos que por defecto la imagen está a la derecha. Y ahora somos el nuevo brick de este tipo. Así que agreguemos uno nuevo. De acuerdo. Ves que tienes todos los valores predeterminados correctos. Tienes una descripción de texto y tienes el color de fondo y el lado de la imagen. También podríamos decidir proporcionar un valor predeterminado para la imagen. Luego tal vez lo haremos. Ahora ves que cuando agrego un nuevo brick, todos los demás bricks tienen esta imagen y especialmente el de Real Bricks UI, tienen todas estas hermosas imágenes que son muy útiles para el editor. A través de eso, cuando pasas el cursor, tienes la vista previa pero es genial ver esta vista previa de imagen. Creemos una vista previa de imagen para nuestro brick. Vamos al playground y el playground es donde puedes ver todo tu design system. Puedes hacer clic en un brick, puedes jugar con él, puedes ver las propiedades que tiene y también puedes obtener una captura de pantalla del componente. Así que vayamos a nuestro tema que es personalizado. Vayamos a nuestro texto imagen. Bueno, para esta captura de pantalla, quiero algo mejor. Estamos tomando una fotografía, así que agreguemos algo de texto. Agreguemos una hermosa imagen esta vez. De acuerdo, obtengamos esta imagen aquí. De acuerdo, y ahora obtengamos la captura de pantalla del componente. De acuerdo, ahora tenemos la URL en nuestro portapapeles. Puedo ir aquí, y puedo decir URL de vista previa de imagen y luego copiar la cadena. Guardemos. Ahora vuelvo a mi Editor. De acuerdo. El nuevo brick. Y ves que el texto imagen tiene su vista previa de imagen. Así que es realmente muy fácil. Tienes estos métodos para crear bricks, y es realmente, realmente divertido. También es como jugar con ladrillos de Lego. Y tus Editores, entonces jugaremos con los ladrillos de Lego que creaste.

Entonces, me gustaría mostrarte otra cosa que puedes crear historias de un brick. Hay una función que son estas historias que no está permitida en el Plan Gratuito. Y esto permite a tus Editores crear historias del brick. Básicamente, guardar un conjunto de propiedades de un brick.

Pero también puedes crear historias en código. Entonces, digamos que hay, queremos que nuestro Editor pueda elegir la imagen de texto oscuro. Entonces, podemos crear, podemos ir aquí en la configuración, y decir historias. Y queremos un array de historias. Y una historia tiene un ID, digamos oscuro. Tiene un nombre, oscuro. Oscuro. Y tiene las propiedades. Para las propiedades, usemos el playground para copiar las propiedades. Entonces, voy al playground en nuestra imagen de texto, digamos grueso como un brick oscuro, tengo el color oscuro aquí, pongamos más texto, y luego seleccionemos también una imagen. Agrego también una imagen predeterminada. Entonces, por ejemplo, usemos nuestro logo para el fondo oscuro. De acuerdo, ahora quiero hacer dos cosas. Obtengo esta captura de componente, la copio. Y también puedo agregar la URL de la imagen de vista previa a una historia. De acuerdo, luego quiero copiar las propiedades. Entonces, voy aquí y copio todas las propiedades. Y las pongo aquí. De acuerdo, el título no estaba definido en nuestra interfaz. Entonces, agreguemos el título, string. Agreguemos un texto de tipo string. Y hay algo más. Sí, la imagen. Entonces, la imagen es de tipo, types.imageSource. Podemos usar este tipo de React Bricks. Y estamos listos para continuar. Entonces, una cosa, esta historia estará disponible en la pestaña de historias que no tenemos en el plan gratuito. Pero aquí puedo decir mostrar como brick. Y si digo mostrar como brick verdadero, entonces lo que sucede es que voy al editor. Siempre olvido guardar. Y hago clic en el botón de más. Lo siento. Para recargar. De acuerdo, y ves que tenemos la imagen de texto y esto oscuro. Realmente, es el mismo componente, pero si hago clic en más oscuro, tengo el componente de imagen de texto con la historia oscura. Entonces, con las propiedades oscuras aplicadas. Así que este es un componente muy completo que creamos en poco tiempo. Y ahora me gustaría mostrarte que con DevBricks, también puedes anidar bricks dentro de bricks y te mostraré cómo podemos hacerlo.

Entonces, digamos que creamos un brick de características donde tenemos un título y debajo un array de características que son una especie de miniaturas. Así que empecemos a crear este nuevo componente. Guarda de esta manera. Y luego, en la carpeta personalizada, esta vez, en lugar de crear un archivo directamente en la carpeta personalizada, ya que necesitaré los dos componentes, uno para las características y otro para el elemento de característica individual, crearé una nueva carpeta, a la que llamaré características. Y aquí tenemos los dos archivos.

Así que creo un nuevo archivo, que es features.tsx. Y en este caso, usemos el fragmento de código Brick para que seamos más rápidos. Entonces, características. De acuerdo. En cuanto al nombre del Brick, digamos, características del taller. No necesitas esto. Y, bueno, las características, y creemos una sección. Y un contenedor. Y ahora agreguemos el texto para el título. Entonces, texto. Texto, lo que usamos el fragmento de código, texto. Y digamos título, y esto es un, digamos en cada uno bastante grande, así que llamémoslo, texto tres orbital, hagámoslo extra negrita, y agreguemos el. Y con un margen inferior, lo que queremos. De acuerdo, cerremos este, así que tenemos un texto, y luego debajo, queremos nombrar característica, así que ahora creemos, lo siento, creemos, debajo del texto, no dentro del bloque renderizado. Queremos tener todas las características, así que aquí, tendremos las características.

De acuerdo, ya tenemos un valor predeterminado para esta propiedad de título, y entonces, agreguemos este brick a nuestro conjunto de bricks. Y esta interfaz de. Zoom, y no es muy, de acuerdo, así que agreguemos aquí, las características de nuestras características personalizadas, de acuerdo. Y entonces, cuando agrego este brick de características, de acuerdo, lo ves aquí, tienes este texto, que podemos editar como de costumbre, y aquí queremos tener todas las características que se pueden repetir. Así que ahora tenemos que crear este brick de característica que se repetirá. Así que nuevo brick, característica, digamos elementos de características, para que no confundamos características y característica es solo la letra que cambia. Así que es un brick, y bueno, y estos elementos de características, digamos que el nombre es WSFeatureItem. La etiqueta es FeatureItem. Y este brick, dije, es como una miniatura. Así que queremos una imagen, un texto y una descripción. Así que tengamos un div, el último nombre que obtengo de aquí. Entonces, lo siento. Él está, este botón. Quitamos este botón. De acuerdo. Porque tengo este botón. Lo siento, solo necesito hacer clic aquí, pero hay una barra de zoom que no me permite hacerlo. La voy a quitar. Lo siento, por primera vez déjame escribirlo porque tenemos la barra de zoom, lo siento. Entonces digamos simplemente flex 0, 1, 30% y digamos que por eso tenemos un poco de margen inferior. Así que tengo estos divs para que queramos tener tres características por fila y así que establecemos este 30% y luego queremos una imagen. Entonces imagen. Llamémoslo imagen. El alt es una característica. El aspect ratio uno está bien y ahora tenemos un nombre de clase de imagen. Quiero aplicar una clase a esta imagen. Veamos si esta vez podemos hacerlo. Tenemos una imagen que es más pequeña y luego después del punto de interrupción SM se vuelve más grande con object contain para asegurarnos de que sea un cuadrado. Realmente estamos seguros porque tenemos el aspect ratio de uno pero también estamos seguros desde un punto de vista CSS. y luego podemos tener una función de envoltura renderizada. Esta es una envoltura que se renderiza alrededor de la imagen cuando hay una imagen. Así que es solo una función de renderizado y solo queremos renderizar un div. Donde aplicamos el nombre de clase. Obtenerlo de aquí. Entonces ves, lo que queremos hacer es queremos en una pantalla grande tener la imagen y debajo el texto. Mientras que en una pantalla más pequeña tenemos este flotante a la izquierda. Así que la imagen simplemente flotará a la izquierda del texto. Así que necesitamos tener un div aquí y en este caso, lo que queremos hacer es establecer un desbordamiento en ellos para que todo el texto vaya a la derecha de la imagen y aquí queremos tener nuestro texto. Entonces texto de React Bricks. Y digamos que es un título. Y tenemos un, digamos que creamos un div con un nombre de clase que es este, de acuerdo. División diagonal, perfecto. Y debajo de este título, queremos una descripción. Entonces creamos otro texto. Llamémoslo descripción. Y es otro div con un nombre de clase plus. De acuerdo, así que este, así que es un poco gris, en este caso, y no tan negro. Y, bueno, de acuerdo. Así que tenemos una imagen y tenemos dos textos. Así que veamos cómo funciona este brick. Funciona el brick.

Entonces, ahora si recargo. Nuestras características son las mismas porque no agregamos el nuevo brick, pero, oh, tampoco agregué el nuevo brick de elemento de característica. ¡Lo siento! Necesitamos agregar el elemento de característica. De acuerdo. Ahora ves que tenemos el elemento de característica. Y si hago clic, tiene una imagen, que es un cuadrado, un texto. Y aquí puedes establecer una descripción. Así que agreguemos una descripción predeterminada. Y ahora agreguemos estas características, agreguemos estos elementos de características en el brick de características.

Para hacer esto, tenemos que usar un nuevo componente de React Bricks, que es el repetidor. Entonces, dentro de este div aquí, usaremos un repetidor. Para que el elemento se repita en columnas, necesitamos tener un flex aquí. Digamos que hacemos un flex-wrap y justificamos al centro. De acuerdo, y ahora tenemos nuestro repetidor. El repetidor tiene una propiedad nombre. También tenemos un fragmento de eso. De acuerdo, el repetidor es solo una propiedad nombre. Entonces digamos características como mínimo. Luego tenemos muchas propiedades que podemos establecer en un repetidor, pero el mínimo es una propiedad nombre. Ahora, ¿cómo puede RealBricks saber qué debe repetir en este repetidor? Necesitamos decirle a RealBricks qué queremos repetir. Y así que necesitamos agregar los elementos del repetidor. El elemento del repetidor es un array porque en un brick, podemos tener muchos tipos de otros bricks que se repiten en muchos lugares dentro del brick. Y en este caso, tenemos un tipo de brick que se repite y necesitamos establecerlo aquí. Necesitamos un nombre que coincida con este, así que características. Así que estamos haciendo coincidir ese repetidor y necesitamos decir cuál es el tipo de elemento. El tipo de elemento es el nombre del otro brick. Así que en este caso es WS, lo siento, elemento de característica. Elemento. Lo que podemos establecer aquí, podemos anular la etiqueta. Así que si queremos otra etiqueta para el elemento en este caso o podemos anular los valores predeterminados para el otro brick cuando se usa dentro de este repetidor. En nuestro caso, los valores predeterminados para el elemento de característica son geniales. Y te mostraré que también podemos establecer Min y Max. Digamos Max 6. Y ahora veamos qué sucede. De acuerdo. Ahora ves que tienes este agregar el nuevo elemento de característica. Si hago clic, tienes un elemento de característica. Hago clic de nuevo, tenemos dos, tenemos tres, cuatro, cinco, cinco, seis, y no se puede agregar más. Esto se debe a que establecí el máximo en seis. Si estableces un número mínimo de forma predeterminada, el repetidor se rellenará con el contenido predeterminado del elemento repetido hasta un mínimo del número de elementos que decidiste tener. Así que en este caso, solo establecí el máximo. Ahora puedo hacer clic aquí, editar el texto, y cuando hago clic en un elemento, ves que tienes el borde rosa alrededor del elemento y tienes la pestaña activa para el elemento. Así que tengo bloque, que es para las características, y luego elemento, que es para el elemento de característica. Ahora, ni las características ni el elemento de característica tienen propiedades. Y bueno, me gustaría mostrarte cómo podemos tener reglas de validación en Rehabrix. Así que agregaré una propiedad de edición lateral al elemento repetido, el elemento de característica, para mostrarte también cómo podemos validar las propiedades. Entonces, la idea es que quiero agregar un enlace debajo del título y la descripción, y es opcional. Por lo tanto, el usuario debería poder elegir si desea un enlace. Y así aparece el enlace. Podría haber usado el texto enriquecido con el enlace de texto enriquecido, pero luego le habría dado demasiada libertad a nuestro editor porque podrían agregar cualquier cantidad de enlaces dentro del texto. En cambio, quieren que la descripción sea solo un texto plano y debajo tener un enlace si el usuario lo desea. Primero que nada, creemos una propiedad de edición lateral de tipo booleano. Podemos llamarlo. Usemos el fragmento. Podemos llamarlo con enlace. Entonces con enlace, y es solo un booleano. De acuerdo, lo siento. De acuerdo, así que necesitamos otra propiedad, que es la ruta de enlace. Agreguémosla ya. De acuerdo, es ruta de enlace. Y es de tipo texto. De acuerdo, así que ahora usemos estas dos propiedades. Definámoslas en la interfaz. Así que podemos ajustar el with link, que es un booleano. Y tenemos un link path, que es una cadena de texto. Una cadena de texto. Así que usamos la interfaz aquí. Y simplemente obtenemos el with link y el link path. De acuerdo, así que ahora debajo de este texto, oh, démosle un valor predeterminado. Digamos que with link, de forma predeterminada, es false.

Y la ruta del enlace, de forma predeterminada, es una cadena vacía. Ahora, debajo de estos textos. Quiero decir, si tengo with link, entonces quiero renderizar nuestro enlace. Así que hagamos algunos, tengamos algo de distancia. Así que solo ID dentro del margen superior dos.

De acuerdo, y aquí usamos un enlace. Usamos un enlace, pero no el enlace siguiente. Usamos el enlace de React Bricks front-end. ¿Por qué? El enlace de React Bricks tiene algunas características interesantes. En primer lugar, en el administrador, es clickable, es editable, por lo que no activará el clic o el enlace. Y cuando el href, la ruta es una ruta local, utilizará el enlace de Next.js, mientras que si tienes un enlace HTTPS, un enlace externo, utilizará un Anchor simple. Entonces, y además, también tienes el nombre de clase y el nombre de clase activo. Así que es más potente y es compatible con múltiples frameworks. Cuando usas el enlace de React Bricks como la imagen de React Bricks, los mismos Bricks, exactamente los mismos Bricks, funcionan en cualquier frameworks. Entonces, si quieres, si tienes un proyecto de extra JS y quieres probar el Remix, simplemente comienza con un CLI con un nuevo proyecto con Remix. Copias la carpeta de React Bricks, copias las variables de entorno para tener el ID de la aplicación y la clave de API y estás listo para comenzar. El proyecto funciona en Remix. Entonces es importante usar este enlace de React Bricks para que este brick sea compatible con múltiples frameworks.

Y así, este enlace, tendrá un hrefl, que es la ruta del enlace, por supuesto. Y en el interior, simplemente escribamos enlace, de acuerdo. Entonces, lo que hicimos es agregar una propiedad booleana lateral y la propiedad de texto lateral. Las estamos obteniendo y cuando el booleano es verdadero, estamos renderizando este enlace utilizando la ruta del enlace, de acuerdo. Así que digamos, veámoslo. De acuerdo, agreguemos un elemento de característica. Y verás que cuando hago clic ahora, tengo with link. Si hago clic en with link, tengo este enlace, de acuerdo. Y puedo establecer una ruta de enlace. Digamos, slash home. Si voy a la vista previa, verás que ahora tengo un enlace que va a slash home y utilizará el enlace de Next.js. Entonces ahora este enlace no es muy visible. Así que hagámoslo un poco más claro que es un enlace. Bueno, lo tengo aquí, de acuerdo. Y ahora lo que me gustaría hacer es quiero escribir sobre el enlace. El texto del enlace es simplemente el enlace fijo en este momento. ¿Cómo puedo hacerlo? Simplemente agrego un texto de React Bricks. Así que uso un texto y digamos que es un texto de enlace, el adecuado. El tipo de texto está bien. Y está bien dejarlo como un span porque ya tenemos estos estilos en el enlace. Así que ahora proporcionemos el valor predeterminado también para este texto de enlace. Texto de enlace, este es el enlace, guardar. Y ahora esto ya estaba aquí, pero si lo elimino y agrego uno nuevo y agrego un enlace, verás que tienes esto, esto es un enlace. Puedes seleccionar la ruta, pero ahora puedo escribir sobre este enlace. Es el enlace en el que puedo escribir.

Entonces dije que quería mostrarte la validación. Pensemos que no queremos una ruta local. Queremos que nuestros editores solo puedan ingresar una URL. Y otra cosa que queremos solucionar es que ves que tenemos esta ruta de enlace, incluso cuando seleccionamos with link. Nos gustaría que esto desaparezca. Es muy fácil de hacer. Cuando tenemos una propiedad, podemos decir show y esta es una función que recibe las propiedades y quiero mostrarla solo si tengo el with link a través. En cuanto a la validación, tenemos una función de validación que recibe dos argumentos, el valor, por lo que el valor de este control y hay un segundo argumento, todas las propiedades para que también podamos realizar una validación cruzada de campos. En este caso, es fácil. Obtengamos solo el valor. Llamémoslo ruta de enlace, y, bueno, si no tengo una ruta de enlace, es válida. Pero si la tengo, la ruta de enlace comienza con HTTPS. De acuerdo. O mensaje de error, por favor ingrese una URL válida. Si devuelves false, es un error. Si devuelves true, está bien. Si devuelves una cadena, hay un error y el mensaje de error es la cadena. Así que veamos qué sucede ahora. De acuerdo. Ves que slash home ya no es válido. Será una ruta válida. Bueno, decidimos que queremos algo que comience con HTTPS. Entonces, si escribo HTTPS. De acuerdo, ahora está bien. Y ves que, cuando deselecciono with link ya no tengo la ruta del enlace, ¿de acuerdo? Cuando esto no es válido, si intento guardar ves que dice, advertencia, al menos un bloque tiene errores de validación. Entonces, si al menos un control lateral de al menos un brick de la página tiene un error de validación tendremos esta advertencia. Podemos elegir en la configuración de Rubrics prevenir el guardado, cuando hay al menos un error de validación.

En este caso, y de forma predeterminada, nos permite guardar de todos modos pero podemos configurarlo para que sea más estricto. Así que proporcionaría una ruta de enlace válida. De acuerdo. Y también vimos la validation. Algo interesante de ver, en mi opinión, es el hecho de que podemos pasar props desde el Padre a todos los bricks. Así que agreguemos un nuevo, agreguemos un elemento destacado gratuito. Y en el Padre, podemos tener, en el componente Padre, podemos tener una prop y queremos renderizar condicionalmente los hijos según esta prop. Así que hagámoslo muy rápido. Voy a Features y pongámonos elegantes. Creemos la prop, que es un Fluo. Entonces, prop de edición lateral. El nombre es, oh, tenemos dos pulseras americanas. Fluo. Y Fluo, y es solo un booleano. Solo un booleano. Y bueno, así es como agrego mis props de estos. Entonces, props de feature, tengo Fluo, que es un booleano. Y lo que hago es obtenerlo aquí, y simplemente lo paso al repetidor. Oh, digamos que Fluo de forma predeterminada es falso. Y aquí en el repetidor, te muestro que tenemos otras props. Por ejemplo, tienes el render wrapper, render item wrapper, etc. Pero hay una prop, que es item props. Así que puedo pasar una prop a todos los elementos y quiero pasarla, Fluo. De acuerdo, ahora voy al elemento destacado, y hago lo mismo. Entonces obtengo esta prop Fluo, un booleano, que obtengo aquí. Y lo que queremos hacer es simplemente quiero, de acuerdo, simplemente quiero que el fondo sea FluorCenter. Así que hagamos esto un template string. Perdón, hagamos esto un template string. Y digamos que si tengo Fluo, entonces agrego la nueva clase, que es, digamos background Lime 400, algo así, ¿de acuerdo? Y veamos si esto funciona. De acuerdo, agreguemos un par de ellos. Cuando hago clic en Fluo, verás que todos ellos obtienen estas props. Y otra prop que cada elemento recibe es el índice. Entonces, índice, que es un número, y adivina cuál es, el índice en el array para que puedan renderizar condicionalmente según el hecho, por ejemplo, de si es impar o par, y luego hagamos eso. Así que digo que si el índice es impar, impar, entonces es igual a uno, entonces aplico esta clase. Y ahora nos ponemos realmente elegantes. Si es par, agrego un color fucsia. De acuerdo. Y ahora recargo. De acuerdo. Así que ves que tenemos este hermoso tablero de ajedrez donde podemos usar el índice y si quieres una prop que se pasa desde el otro. De acuerdo. Así que hemos creado un nuevo brick, que es este features. Oh, ves que tienes un elemento destacado aquí. Esto no es genial porque no quiero que el editor pueda agregar directamente el elemento destacado. Así que quiero ocultarlo del menú de agregar en el elemento destacado, solo puedo decir en el esquema que quiero ocultarlo del menú, ocultar del menú. Verdadero. Y así, porque solo quiero que mi editor use los features y agregue el elemento destacado dentro de features. Y para este componente features, sería genial tener una imagen. Es realmente tan rápido que simplemente hagamos esto. Agreguemos esto también como predeterminado. Porque cuando agrego los nuevos features, lo tengo vacío sin ningún elemento, ningún hijo adentro. En cambio, me gustaría tener este feature. Así que copiemos solo esta parte de features aquí y la agregamos al valor predeterminado de features. Entonces, en el obtener props predeterminados, quiero agregar estos tres elementos de forma predeterminada. Y en esta configuración, obtengo la captura de pantalla del componente y la pongo aquí en la URL de la imagen de vista previa. Aquí está. De acuerdo. Ahora nuestro componente está realmente completo. Cuando agregamos los nuevos features verás que tenemos esta imagen de vista previa y realmente tenemos lo que vemos en la vista previa porque cuando lo agregamos, ya tenemos tres de ellos.

De acuerdo. Vimos muchas cosas. Creo que después de una hora y media, podemos hacer una pausa. Así que me gustaría hacer una pausa de cinco minutos y luego me gustaría hacer cinco minutos de preguntas y respuestas si tienen preguntas. Después, me gustaría mostrarles algunas características más avanzadas de React Bricks y algunas características de CMS y algunas características más avanzadas que podemos usar para crear el blog, por ejemplo, que usamos para crear el blog al principio. y que también podemos usar para crear una tienda en línea. Y también veremos algunos Pokemons para animar un poco las cosas. Así que ahora cinco minutos de pausa. Y después de la pausa, tengo dos preguntas para ustedes. Si tienen preguntas, las responderé. Me gustaría que me dijeran, ¿cuál es su primera impresión de React Bricks? Díganme cuál es su primera impresión de React Bricks y para qué lo usarán, ¿cuáles son las ventajas que ven al usar React Bricks en proyectos para sus clientes? Y mientras tanto, durante la pausa, Dario actualizó la aplicación a un plan enterprise para que también podamos ver algunas de las características que están disponibles en los planes de pago.

Volvamos al editor. Una cosa que me gustaría mostrar es que siempre miramos la pestaña de bloqueador y luego la pestaña de elemento. Pero también está esta pestaña de página. Aquí es donde tienes las propiedades del CMS para la página. Por ejemplo, si está publicada o en borrador. Y también puedes programar la publicación en el futuro. Por ejemplo, si configuramos esta página como borrador, puedo decir que se publique mañana a las ocho. Y si guardo, verás que ahora tenemos este calendario. Esta es la programación de publicación para mañana. Y si hago clic en el calendario editorial, puedes ver esta página aquí. Entonces, si tienes un blog y quieres programar la publicación en el futuro, es muy útil. Y verás que también puedes activar el despliegue automático cuando una página en borrador se publique. Así que si quieres crear un artículo para el día de Año Nuevo, no tienes que estar allí a medianoche para hacer clic en el botón de despliegue porque se hará automáticamente por ti.

Me gustaría mostrarte también las configuraciones de Rubrics. Vimos el playground y me gustaría mostrarte también las configuraciones. Aquí te mostré la vista previa a pantalla completa, pero no hablé sobre el enlace de vista previa. Y solo un segundo, si haces clic en obtener enlace de vista previa, tendrás un enlace en tu portapapeles que puedes enviar a cualquier persona, incluso si no tienen una cuenta de Rubrics. Y al hacer clic en el enlace, pueden ver una vista previa de la página, por ejemplo, para un proceso de aprobación. Y así puedes compartir una página de Rubrics en el enlace de vista previa. Si vamos a las configuraciones, aquí ves que, bueno, en este caso, no podemos desplegar en ningún entorno porque no configuramos un gancho de compilación, así que hagámoslo. Cuando hago clic en cualquiera de estos botones, iré al panel de control de Rubrics. Ves que, aunque hay esta barra de zoom, hay dashboard.rubrics.com. Aquí, ya no estamos en la interfaz de administración local de Rubrics, sino en el panel de control, por lo que hay un intercambio de tokens para que ya estemos conectados. Ves que aquí tienes el nombre de la aplicación. Podemos configurar un nombre de host para tener un botón para ir al sitio web, las credenciales. Podemos invitar usuarios. Por ejemplo, invitemos a Dario. En Rubrics, podemos elegir el rol. Digamos Editor. Podemos decir que podemos desplegar en producción, en preparación, crear páginas y editar páginas. De acuerdo. Enviamos una invitación, y ahora vemos que la invitación está pendiente. Puedes definir roles personalizados. Esto es algo que está habilitado en los planes Enterprise porque puedes definir permisos muy detallados basados también en roles personalizados. Creemos un rol personalizado, traductor. R, por ejemplo. De acuerdo. Y tenemos WebHooks. Así que creemos un WebHook falso aquí. Y ves que puedes activar el gancho en la publicación programada. Esto permite que Rubrics llame al gancho cuando una página se publique. Lo guardo. Tienes los idiomas, con Rubrics. También tienes la internacionalización integrada. Así que agreguemos el idioma italiano. Tienes el historial de cambios. Para que puedas retroceder en el tiempo al estado anterior a cualquier acción. Te lo muestro de inmediato. Así que vayamos a nuestro editor, y vayamos, por ejemplo, a la página de precios. Y digamos que cambio el precio a 499. Guardo, pero era el precio incorrecto, lo siento. De acuerdo, ahora volvamos al panel de control. Puedo retroceder en el tiempo, ves que edité la página de precios. Hago clic, retrocedo. De acuerdo, y ahora en el editor, déjame cambiar de página y volver, ves que tienes el precio antiguo, el precio correcto. Así que es muy fácil hacer esto. Y otra cosa que puedes hacer es la copia de seguridad y restauración. Puedes solicitar una copia de seguridad. Y después de un par de minutos, recibimos un correo electrónico y si regresas, puedes descargar un JSON completo, el JSON completo de tu contenido. Así que es solo una matriz de páginas con la matriz de bloques para cada página. Y con esta copia de seguridad, puedes restaurar autónomamente el contenido a cualquier punto en el tiempo. De acuerdo, ahora volvamos a nuestro editor, y ves que ahora también tenemos esta pestaña italiana porque habilitamos el idioma italiano. Así que creemos una traducción italiana. Por ejemplo, vayamos a la página de inicio y creemos una traducción italiana. Sí, no hay traducción, quiero crearla. Ahora el contenido se copia del idioma predeterminado, que es el inglés, pero ahora puedo escribir lo que quiera. Así que benvenuti. Nuestro taller super reactivo. De acuerdo, ahora la traducción es completamente independiente. Por lo tanto, en este caso, puedo elegir aplicar, por ejemplo, otro degradado y otro color de fondo.

Comienza desde la traducción predeterminada y luego puedes cambiar el contenido en esta localización para el italiano, por ejemplo. Ahora me gustaría mostrarte también la colaboración. Así que invitamos a Dario y veamos si Dario ha aprobado nuestra invitación. De acuerdo, ves que ya no está pendiente. Dario ha aceptado la invitación para colaborar en esta aplicación. Y ahora ves en la esquina superior derecha que estoy yo y también está Dario. La colaboración está activa para cualquier plan de pago y ahora Dario ha ingresado a esta página y ves su avatar. Ahora, cuando comenzamos a editar la página, ves que tenemos este borde rosa. Matteo Frana está editando. Estamos editando y Dario no puede editar. Si guardo, liberaré el bloqueo y ahora digamos que Dario comienza a editar la página. De acuerdo, ves a la derecha, esa página está bloqueada por Dario Ronzoni mientras edita la página. De acuerdo, ahora si hago clic, ves que no puedo hacer nada. No puedo cambiar el contenido directamente. No puedo enfocar. No puedo cambiar esta barra lateral. Mientras Dario guarda o cambia páginas sin guardar podemos, la interfaz vuelve a ser la interfaz normal donde puedo editar. Si Dario intenta editar de nuevo ahora, tengo este botón de desbloqueo forzado porque si necesitara hacer un cambio realmente urgente, puedo, por supuesto, los cambios realizados por la audiencia data se perderán pero pueden hacer clic en esto y forzar el desbloqueo para guardar los cambios. Esta es la función de colaboración de React Bricks.

También te mostraré la función de edición al hacer clic. Si voy al sitio web, el sitio web de frontend en localhost3000. Puedes ver que estoy conectado como administrador, oh, disculpa, ¿por qué no hay en la página? Porque decidimos que queremos que se publique mañana. Digamos que queremos que se publique hoy y luego eliminemos esto, esta afirmación de publicación, ¿de acuerdo? Ahora que esto está guardado y, bien, volvamos a nuestra propia página. Hemos alojado la propia página. Y así ves que en la esquina inferior derecha, tienes este botón de edición. Puedes elegir la esquina que desees. Si tienes el chat en tu sitio web en esa esquina, lo interesante es que puedes navegar por el sitio web. Por ejemplo, ve a esta página de `Acerca de nosotros`, haz clic en el botón de edición. Y editarás directamente la página de `Acerca de nosotros`.

Entonces, te muestro las historias, características, ahora. Ahora tenemos esta pestaña de historias aquí. Así que te muestro lo que podemos hacer con esto. Vamos a la página de inicio. Y por ejemplo, para nuestro bloque de características, digamos que nuestro editor quiere guardar, le gusta mucho la versión Fluo. Y así, quiere guardar esta versión de esta manera. Digamos, floo como bloque. Y van a las historias. Y guardan la historia como floo. Guardan la historia. Así que ves que tenemos esta historia. Esta no está guardada en el código como la que creamos antes pero está guardada en los servidores de Rubrics. Ahora, si voy a otra página, digamos en precios y el bloque de características, puedo elegir la historia fluo y obtendré estos contenidos. Esta es una forma de reutilizar contenido en varias páginas de forma rápida. Entonces, si cambio este contenido, no estoy cambiando la historia porque el contenido es completamente independiente en este momento. Simplemente copié la característica, todas las propiedades del bloque de plantillas que es la historia. Y bueno, otra forma de reutilizar contenido en varias páginas es usar las incrustaciones. Entonces, en una página puedes incrustar otra página. Digamos que aquí quiero incrustar, agrego un nuevo bloque, elijo todos los temas y tienen un bloque de página incrustada. Puedes crear tus propios bloques incrustados que son bloques particulares y puedes elegir qué página quieres incrustar solo un tipo de página. Veremos el tipo de página en un momento, pero ahora solo seleccionemos una página. Entonces, en la página de inicio, quiero incrustar la página de precios, por ejemplo. De acuerdo. Ahora ves que tienes la página de precios aquí y tiene esta superposición para entender que no es editable porque esta es una única fuente de crecimiento. Esto no es como las historias de plantillas. En este caso, si voy a los precios y cambio esto, guardo, agregué este signo de exclamación. Si voy a la página de inicio, ves que también ha cambiado aquí. Esto no es útil para incrustar páginas completas dentro de páginas, por supuesto. Esto es útil porque puedes definir también tipos de página de tipo entidades. Y así puedes agregar entidades que son fragmentos, o fragmentos de página, por ejemplo, una llamada a la acción, una suscripción al boletín, un producto, una oferta. Y luego puedes incrustar estos en páginas. Y cuando lo cambias en un lugar, se cambiará en todas partes. Entonces, ves, tenemos tres formas principales de reutilizar contenido en React Brics. Y te muestro esta diapositiva que es clara. Tienes la forma de plantilla de galletas, que son historias. Entonces, partes del contenido de la plantilla, pero luego cada copia es independiente. O tienes la prueba individual que puedes usar utilizando incrustaciones de página cuando es solo una parte, como una llamada a la acción. O cuando necesitas reutilizar algo en todas las páginas, como el encabezado y el pie de página, puedes tener los visores de múltiples páginas. Entonces, en tu página en Next.js o Gatsby, utilizas visores de múltiples páginas para que siempre tengas el encabezado, el pie de página y el contenido.

De acuerdo. Veamos los tipos de página y cómo implementamos el blog. Verás que para el blog, tenemos una ruta de blog con una barra diagonal. Puedo hacer clic en una etiqueta y luego podemos ir a /tag/nombre-de-la-etiqueta. Ahora solo tenemos un artículo y luego puedo hacer clic en el artículo y en /blog/post/slug. De acuerdo. Desde el editor, puedo ir a la página de tipo blog y puedo agregar una nueva publicación de blog. Digamos que es una publicación de prueba. Agreguemos solo una imagen. Mantengamos esta imagen predeterminada. Y verás que en el blog, solo puedo usar algunos bloques, como los bloques de una columna. Porque esto se define en el tipo de página, como te mostraremos en un segundo. Así que guardemos. Y también pongamos una imagen destacada aquí. Así que podemos ver aquí, puedo poner aquí, de acuerdo. Y también quiero establecer una etiqueta. Digamos que es un taller. De acuerdo, guardé la página. Ahora, si vuelvo a nuestro blog, verás que también tenemos la nueva publicación y la etiqueta taller. Si hago clic en taller, lo siento. De acuerdo. Eso fue, muéstralo de nuevo. De acuerdo, hago clic en taller y solo tienes este. Hago clic en React Bricks y tienen los demás. Los demás, hago clic en blog y tienen ambos. De acuerdo, si hago clic en la publicación, tengo la, esto es, de acuerdo, soy la publicación. De acuerdo. Veamos cómo creamos esto. Tengo una carpeta de blog en el blog, en la carpeta de blog y tengo un índice. Y este índice en getStaticProps llama a fetchPages. Pero en este caso, también pasando este parámetro tipo blog. Este es el tipo de página blog. De hecho, si abres los tipos de página, tenemos un tipo de página, que es page, que es el tipo de página predeterminado. Luego tenemos este tipo de página de tipo blogger. Y verás que solo hay algunos bloques que están permitidos en los bloques. Y así puedo obtener solo las páginas que son de tipo blogger. Esto es lo que estoy haciendo en el índice del blog. Así que obtengo. De acuerdo, estoy obteniendo el artículo de tipo blog, y luego simplemente mapeo estas publicaciones y renderizo estos componentes, que es el momento de mostrar la publicación. También obtengo todas las etiquetas con esta función fetchTags, y las renderizo para tener la lista de etiquetas. Lo mismo ocurre en la etiqueta, en este caso, donde obtengo por tipo y también por etiqueta, obteniendo la etiqueta de los parámetros de contexto. Para la publicación individual, tengo un GetStaticProps, que obtiene la publicación por slug, y el GetStaticPars, en cambio, crea una página para todas las páginas de tipo blog. Así que lo estamos usando, en este caso, estamos en NextJS y estamos usando el GetStaticPars de NextJS. Pero tener este tipo de página te permite hacer este tipo de cosas. Los tipos de página también tienen la capacidad de establecer campos personalizados, lo cual es interesante. Entonces, en este tipo de página, agreguemos un campo personalizado. El campo personalizado es un array, y un campo personalizado tiene un nombre, digamos Test, luego tenemos una etiqueta, TestField, y tenemos un tipo. Así que es como un headless CMS donde puedes definir tus campos personalizados. El tipo es exactamente como el lado de los tipos de prop. Así que hagamos un simple texto. Ahora guardo, y vayamos a nuestro editor. De acuerdo, vayamos a una página. Verás que en este blog, no tienes ningún campo personalizado, pero si voy a una página de tipo Page, verás que debajo de los campos personalizados, ahora tienes este TestField, y puedo escribir desde este TestField. Este TestField, lo obtendrás cuando obtengas la página porque tendrás los valores personalizados, que es un objeto con una clave valores, y obtendrás todos estos valores. Y también puedes usarlo dentro de un bloque. Así que hagámoslo. Así que usemos este MyHeroUnitBrick. Y bueno, tengo un hook de WebRigs, que es UsePageValues. Así que puedo decir const page, setPage = UsePageValues. De acuerdo, y ahora desde la página, puedo tomar los valores personalizados. Así que aquí puedo imprimir, puedo renderizar customValues.test. Así que estaba en el MyHeroUnit. Así que agreguemos el MyHeroUnit. De acuerdo. Verás esto como se muestra. Porque lo escribimos en el campo de prueba. Ahora cuando escribo, aquí verás que puedes obtener este campo personalizado aquí. Pero puedes hacer más. Si tienes una entidad, digamos un producto, también puedes editar de forma visual el campo personalizado, ¿cómo puedes hacerlo? Bueno, el texto de Rheabricks, en lugar de tomar un nombre de prop, también puede tener un nombre de campo personalizado. Así que el nombre del campo personalizado es test. Entonces, en lugar de imprimirlo de esta manera, podemos tener un texto.

Y ahora lo que sucede es que cuando escribo aquí, tengo el texto que cambia, pero también cuando escribo aquí, tengo un valor de página que está cambiando. Así que tengo enlaces de datos bidireccionales entre este campo y los campos personalizados. Por lo tanto, puedo editar de manera visual, una estructura de datos por ejemplo, un producto. Bueno, lo mismo se puede hacer con el metafield. Supongamos que tu usuario no quiere ir al metafield SEO y completar el título, pero siempre tienes el primer párrafo de tu página, que tiene un título grande que podría ser el metatítulo SEO. Lo que puedes hacer es enlazar el texto a un metafield. Entonces, el nombre del metafield es igual a. Ahora tienes el lenguaje de descripción del título. Pongo título. Entonces, lo que sucede ahora es que tienes inicio porque el metatítulo SEO de esta página es inicio. Digo página de inicio. Y ahora estoy enlazando a la etiqueta meta SEO. Cambio aquí. También estoy cambiando el título de la página. Esto es útil porque también se puede usar para enlazar una imagen a la imagen destacada de la página. En la imagen, de hecho, si en lugar del nombre de la propiedad, uso el nombre del metafield, verás que solo obtengo la imagen. Esta es la imagen destacada de la página.

De acuerdo. Así que otra cosa que me gustaría mostrarte es, no sé si notaste cuando agregué el, este prop decidido que es, agreguemos uno nuevo. Cuando eliges el tipo, también hay, también hay esta personalización. ¿Qué es un tipo de página personalizado? Esta es una forma de definir tu propio control para la barra lateral. Por ejemplo, si no te gusta el selector de color de página de referencia. Puedes crear tu propio componente o si quieres que tu usuario elija una latitud y longitud en un mapa pequeño. Puedes crearlo. Entonces, simplemente estableces el personalizado y ahora puedes establecer tu propio componente. Entonces digamos personalizado, personalizado y el componente, el componente obtendrá qué, el valor, la función de cambio y cambiar el valor y es válido porque vimos que puedes validar props. Entonces es posible que desees renderizar un borde rojo alrededor de tu componente cuando no pase la función de validación de los bloques reales. Entonces, para hacer algo muy simple podemos decir entrada y aquí ves que el valor es nuestro valor y cambio. Y aquí, simplemente eventos y decimos cambio, evento De acuerdo. Así que probemos esto, lo siento, no de nuevo. cambio ¿Qué hice mal aquí? Oh, no presioné la entrada. De acuerdo. Ahora, si voy aquí, ves que tenemos este componente personalizado. Y así, esto está cambiando este prop personalizado usando nuestro componente. Y para ver que funciona, podemos reemplazar este relleno aquí. Vemos que esto es realmente relleno. ¿De acuerdo? Quité este relleno. Y ahora ves que si escribo grande, es un relleno grande. Si escribo cualquier otra cosa, es un relleno pequeño. Entonces, realmente estoy cambiando este prop. Y si pudiera, por supuesto, también usaría la función válida. Podemos decir validar. Validar es una función de este valor que devuelve que el valor maestro comienza con A, ¿de acuerdo? Y ahora puedo ver que usé esto es válido y veo que tengo este estilo y lo aplico, por ejemplo, al color de fondo que es, si es válido, aplico un color de fondo que es verde claro. De lo contrario, aplico el color de fondo que es rojo. ¿De acuerdo? De acuerdo, así que recargamos y aquí estamos. No comienza con a, si hago algo No tengo el valor de si comienza con a, es válido. Entonces puedes crear tus propios componentes personalizados esto es para mostrarte que Rubrics es realmente muy flexible. Realmente, también puedes crear tus propios componentes de edición visual personalizados como nuestro texto, nuestro texto, nuestra imagen puedes crear tu propio componente visual personalizado también tienes ejemplos de estos. Y esto es complejo, pero solo te muestro el bloque de código que tenemos en la interfaz de Rubrics. Tenemos un bloque de código, usemos la función de búsqueda, código. Y este es un editor de código que también resalta el código que y también puedo elegir, por ejemplo me gusta la línea dos y mostrar números de línea. Si voy a la vista previa, ves que tengo me gustan los números. Y me gusta ser la línea dos. Y lo que estoy haciendo es que estoy proporcionando una edición personalizada, así que para editar y no necesitamos modo. Solo estoy usando Prisma para resaltar el código. Entonces realmente puedes hacer cualquier cosa que quieras con Rubrics, es realmente muy, muy, muy flexible. Quiero mostrarte solo una última cosa, que es la capacidad de obtener datos externos dentro de los bloques. Esto es útil cuando tienes contenido que proviene de un CMS sin cabeza o una plataforma de comercio electrónico como Shopify. Y así puedes tener tus bloques. Y por ejemplo, cuando creo un e-commerce completo en NextJS y tengo la página de destino del producto editada usando bloques reales con algunos bloques que muestran, por ejemplo, la parte de agregar al carrito, obteniendo datos de una fuente externa y luego permitiendo al usuario editar la otra parte de la página. Porque con bloques directos, también puedes bloquear algunas partes de la página. Entonces piensa que esta unidad de héroe aquí es el otro bloque de agregar al carrito y puedes obtener datos de una fuente de datos externa. Entonces la imagen del producto, el nombre del producto. Puedes bloquear este bloque, ¿de acuerdo? Y puedes elegir que el usuario pueda actualizar cualquier cosa o pueden editar, pero no pueden moverlo. Y no pueden poner antes o después o puedes elegir que solo puedan agregar después. Entonces, en este caso, este bloque siempre permanecerá allí y tu editor solo podrá agregar nuevos bloques después de este bloque. Esto también se puede hacer en el contenido predeterminado de un tipo de página. Entonces tienes un tipo de página, que es un producto de e-commerce. Puedes decir que de forma predeterminada, siempre tiene un bloque que muestra la parte de agregar al carrito y esto está bloqueado. Entonces tus usuarios no pueden cambiarlo.

Veamos cómo podemos obtener datos externos y usarlos dentro de nuestros Brics. Creemos un nuevo tipo de página. Usaré las APIs de Pokemon. Permíteme usar eso y crear un nuevo tipo de página, que, por supuesto, es Pokemon. Para cada tipo, necesito definir un nombre en plural. No sé cuál es el plural de Pokemon, así que simplemente diré Pokemon. Y luego solo quiero agregar la función getExternalData. La función getExternalData es una función que obtiene todos los valores de metadatos de la página. Entonces, todos los valores de metadatos de la página, valores personalizados, contenido como argumento, y debe devolver una promesa que se resuelva a un objeto que luego se puede mapear a nuestros Brics, tal vez. Entonces, es un poco complicado, pero en realidad no lo es. Es solo una función sincrónica que obtiene el contenido y luego usas el contenido dentro de los Brics. Entonces, para esta función, permíteme copiar aquí. Ya tengo este fragmento de código. Es este. De acuerdo, entonces estoy obteniendo datos de las APIs de Pokemon, obteniendo el slug de la página, y luego simplemente mapeo los datos porque vi que en la API de Pokemon, solo tienes una imagen muy pequeña del Pokemon mientras que en estos sitios web, tienes una versión más grande del Pokemon según el nombre. Entonces, aumento los datos usando esta URL de imagen aquí. Ahora tenemos el tipo de página con esta función getExternalData.

Ahora creemos un brick que consuma estos datos externos. Así que debajo de nuestro brick personalizado, creo un nuevo archivo, que se llama Pokemon.psx. Es un brick muy simple. Podemos doblarlo de esta manera. Y ahora, para el contenido, vamos a copiar desde aquí. De acuerdo. Tengo una interfaz, que es una interfaz de props de Pokemon y las props de Pokemon son estas. De acuerdo. Entonces, sección. Y aquí obtendré la URL de la imagen, el nombre, el ID, la altura y el peso. De acuerdo. ¿De dónde vienen? De acuerdo. Vienen de esta función, que es, permíteme quitar esto. De una función que es, mapear datos externos a props. Entonces, el mapeo externo, datos externos a props tiene dos argumentos, los datos externos, como primer argumento, y los props de los bricks, como segundo argumento. Es como el mapeo de estado a props en Redux, si lo conoces. Entonces, debemos devolver un objeto con las props que queremos usar. Entonces, en este caso, quiero usar estas props aquí. Así que solo estoy obteniendo los datos externos en este caso. No quiero considerar las props de los bricks. Luego vimos también estas. Y estoy creando estas props que puedo usar en mi componente. Así que déjame revisar. ¿Por qué hay un error aquí? Muy bien, veamos las props del popup. Les voy a dar un nombre. Hice a28. Rate, wait. Déjame revisar. Type pero muchas cosas puedo usarlo. Lo siento. Déjame revisar un segundo otra vez. Bueno, estoy obteniendo las props con ID y el nombre, tipo bricks, props. Tengo el año. El año, ID, nombre, URL de la imagen también. Lo siento. Espera, está bien. Si puedes encontrar la URL. Props, está bien. Año ID, nombre, altura, peso, URL de la imagen. De acuerdo. ¡Oh! Los paréntesis. Era solo eso, estaba obteniendo un, en lugar de un objeto props, estaba obteniendo todas las props de la forma incorrecta. Lo siento. De acuerdo. Ahora está bien. Así que veamos qué sucede ahora, cuando voy a nuestro sitio web. Ahora tengo un nuevo tipo de página. Ves Pokemon aquí sin páginas. Así que creemos una nueva página para un Pokemon. Digamos que queremos Pikachu. De acuerdo. Y ahora agrego un brick. Necesitamos agregar, por supuesto, el brick de Pokemon a nuestros bricks porque creamos el brick de Pokemon, pero no lo agregamos a nuestros bricks. Así que agreguemos ese Pokemon. Ahora volvamos a Pikachu y agreguemos un nuevo brick en nuestro tema personalizado. Y tienes este brick de Pokemon. De acuerdo. Hago clic en él y tengo a Pikachu. ¿Por qué? Porque el slug de esta página es Pikachu. Si voy aquí y cambio el slug, digamos que quieres Dragonair, obtendrás Dragonair. Y bueno, mi hijo dijo que hay un Pokemon que tiene el color real de los ladrillos reales. Así que mi hijo de siete años dijo que tienes que hacer Beno o no porque tiene el color que es mejor con el color de los ladrillos reales y es verdad. Entonces, lo que estamos haciendo aquí es que estamos obteniendo los datos y no es una solicitud del lado del cliente. Cuando construyas la página con Next.js, o Remix, o Gatsby, estos datos se obtienen en el lado del servidor y luego se pasan a los componentes reales de los bricks. Así que aquí puedes imaginar que tienes el producto de tu comercio electrónico con el botón Agregar al carrito y debajo puedes agregar tu propio componente para permitir que tu usuario componga la página de destino de una manera genial. Esto es algo que la mayoría de las plataformas de comercio electrónico carecen, que es la creación de una página de destino de una manera genial. De esta manera puedes crear tus bricks y puedes usarlos para crear la página de destino de un producto de comercio electrónico. Entonces, una cosa que podemos ver es, bueno, obtengo estos datos de mi Shopify pero si quiero que mi equipo de marketing cambie la descripción porque no es buena en la base de datos, por ejemplo, el precio. No, nadie puede tocar la disponibilidad tampoco pero quiero que puedan cambiar el nombre del producto, por ejemplo. Lo que pueden hacer es, bueno, en primer lugar, puedo crear un texto.

Un texto de rúbrica. Y en la función de renderizado, usa dee'sh1. Por supuesto, aquí no está el nombre, sino children. Y el nombre de la propiedad es name. Para obtener el nombre del Pokemon. Si lo hago de esta manera, por supuesto, no funcionará como se espera porque es cierto que puedo escribir aquí, puedo guardar y estoy guardando este campo, pero tan pronto como regrese, tengo el valor de la fuente de datos externa. Pero lo que puedo hacer es en esta función de método, puedo usar estas props de bricks. Así que puedo decir que el nombre no siempre es el nombre externo de la fuente de datos, pero puedo usar bricks props.name, o este. Realmente el nombre de las props de bricks puede ser algo que es complejo porque tenemos texto enriquecido con marcadores, etc. Entonces, lo que necesitamos hacer es usar una función simple de web bricks y hacer una serialización simple de este contenido. Y tengo que decir, si hay contenido, uso esto. De lo contrario, uso los datos externos. Ahora debería escribir esto mejor, pero ahora no tenemos tiempo. Solo quiero que veas que ahora, si recargo, obtengo el valor del nombre en el brick. Pero si lo borro, obtengo de nuevo el nombre de la fuente de datos externa. Así que puedo cambiarlo como quiera. Puedo guardar si voy a otra página y vuelvo. Tengo el nuevo texto, pero si lo borro, obtengo el texto que proviene de la fuente de datos externa. Así que también puedes interpretar estas cosas y tener datos externos que son la única fuente de verdad pero también puedes permitir que tu editor anule esto. Así que creo que con esto, hemos visto muchas cosas avanzadas de React Bricks. Y ahora me gustaría darte un vistazo de lo que sigue, en qué estamos trabajando. Entonces, bueno, puedo, usemos estas funciones que creamos aquí. ¿Qué sigue? Bueno, una cosa en la que estamos trabajando es la biblioteca de medios. Viste que cuando hago clic para agregar una imagen, ahora puedo seleccionar desde un splash o puedo elegir cualquier imagen de la computadora, pero no puedo obtener una imagen de una biblioteca de medios. Así que no se pueden reutilizar imágenes. Estamos trabajando en una biblioteca de medios con capacidades de búsqueda. Podrás buscar por relación de aspecto, por color, etc. Y otras cosas en las que estamos trabajando es un sistema de relleno. Y de esta manera, así que, lo usaremos. Por ejemplo, nosotros mismos para crear un complemento de SEO para que en lugar de, solo la etiqueta meta habitual, puedas proporcionar los datos JSON LD de schema.org. Y queremos que puedas crear un complemento como ese, que abrirá una interfaz para editar metadatos en la página. Entonces, otra función que queremos crear es tener múltiples ramas, múltiples ramas de contenido, para que, por ejemplo, quieras trabajar en la V2 de tu sitio web, pero aún quieras guardar en la V1, ¿de acuerdo? Y luego finalmente puedes crear otra rama del contenido, y cuando estés listo con la V2, simplemente puedes cambiar a V2, o puedes tener una rama que pueda ser utilizada por tus desarrolladores. Pueden hacer lo que quieran, meterse con el contenido, y no romperán el contenido en vivo. Luego, otra cosa en la que estamos trabajando es un flujo de trabajo. Queremos crear un flujo de trabajo adecuado para las páginas. Para que Uwe tenga el permiso, cuando comiences a trabajar en una página, crearás una copia de trabajo. Y cuando estés listo con todas las ediciones, puedes decir que está listo para publicar, y luego otro usuario puede aprobar la publicación. Y se publicará cuando hagas clic en el botón de implementación. Y bueno, lo último que me gustaría mostrarte es que también vamos a crear un mercado para que puedas crear conjuntos de bricks y tenerlos en nuestro mercado. Y para que las personas puedan descargarlos de forma gratuita o pagar por ellos. Y estas son nuestras ideas para los bricks reales antes de que ya estemos trabajando. Lo otro importante es que queremos admitir Astro. Y estamos abiertos a cualquier otro nuevo frameworks que sea interesante porque nuestra filosofía es que queremos mantenernos independientes del framework, para que puedas elegir el framework y ser independiente de la plataforma para que siempre puedas alojar lo que quieras. Entonces, si tienes alguna pregunta final, estoy aquí. Muy bien, ¿soportará Rubric el renderizado en el lado del servidor de Next? Una más, ¿este CMS permitirá compartir contenido en varias páginas o tal vez en varias aplicaciones? Muy bien, sí. Bueno, en cuanto a Next, sí, el renderizado en el lado del servidor si te refieres al renderizado en el lado del servidor, ya admite el renderizado en el lado del servidor porque con la carpeta de páginas de Rubric puedes hacer la generación estática, puedes hacer el renderizado en el lado del servidor y puedes hacer la generación estática incremental. En el ejemplo estamos usando get static props pero por supuesto también puedes usar get server props y tener las páginas generadas en el lado del servidor para cada solicitud. Pero si en lugar de eso, si te refieres a los componentes del servidor, la carpeta de la aplicación de Next.js, sí, estamos trabajando en ello y estará listo pronto. ¿Este CMS permitirá compartir contenido en varias páginas? Sí. Mostré una diapositiva para que tengas varias formas de compartir entre páginas. Puedes usar las historias para tener características predefinidas. Para repetir algo que hiciste en una página o en otras páginas, puedes incrustar los fragmentos. Entonces, un conjunto de bricks que puedes guardar como una página de entidad, puedes reutilizarlo en varias páginas y se convierte en una única fuente de verdad. Entonces, cuando lo cambias una vez, cambiará en cada página que lo incruste o puedes usar el visor de múltiples páginas para incrustar directamente un encabezado y un pie de página en todas las páginas. Para compartir contenido entre varias aplicaciones, actualmente no es posible, pero puedes duplicar una aplicación desde el panel y obtendrás todos los usuarios o el contenido de la aplicación original. Entonces, realmente podrías hacerlo usando directamente las APIs porque, por supuesto, Rubric tiene APIs subyacentes, por lo general no necesitas usarlas porque solo tienes nuestras funciones de envoltura como fetch pages que te ayuda. Pero usando estas páginas, estas funciones o directamente nuestras APIs REST, podrías reutilizar contenido entre páginas. Así que espero que haya respondido tus preguntas. Entonces, creo que podemos terminar ahora. Son dos horas y media. Pero me gustaría darte mi dirección de correo electrónico. Permíteme compartir la pantalla de nuevo. En primer lugar, se me olvidaba. Puedes encontrar el repositorio aquí. Entonces, github.com/reactbricks/React Summit 23 Dash Workshop. Y lo que sugiero es que realmente, en lugar de mirar el código que creamos, comiences a hacer el tutorial y crees tus propios Bricks porque es realmente divertido. Y creo que ahora entendiste los Bricks de software básicos. Así que con React Bricks, tienes un editor visual con buenas restricciones. Viste que es solo React porque nunca tuvimos que ir y venir entre un CMS sin cabeza para crear los campos y luego a VS Code para usar los campos. Es solo React y tienes un buen método. Solo tienes también el código de fragmento. Es muy fácil crear estos bricks de contenido visualmente editables. Puedes alojar en cualquier lugar, puedes usar cualquier framework y es realmente empresarial con funciones como colaboración, optimización de imágenes, permisos detallados y múltiples idiomas. Hay un programa de socios disponible. Entonces, si quieres convertirte en una agencia asociada, contáctame ahora. Mi nombre es matteo@reactbricks.com. También puedes encontrarme en Twitter en @mattfrana. Y bueno, eso es todo, siéntete libre de contactarme para cualquier cosa. Entonces, si tienes alguna pregunta después, contáctame y te responderé. Gracias.