DE{CODE}: nuevas funciones para Atlas

Las actualizaciones de las herramientas de desarrollo sin cabeza Atlas de WP Engine lo ayudarán a cumplir con los requisitos más exigentes de sus clientes. Usando una cuenta gratuita de Sandbox, esta demostración le mostrará cómo agregar estas nuevas funciones a su sitio sin cabeza. ¡Vea el video a continuación para comenzar a construir su sitio web más seguro y de mayor rendimiento hasta el momento!

Diapositivas de la sesión

Transcripción de texto completo

KELLEN MACE : Hola. Soy Kellen del equipo de relaciones con desarrolladores de WP Engine. En esta charla, vamos a explorar algunas de las nuevas y emocionantes características del ecosistema Atlas. Veremos cómo en el portal de usuario de WP Engine, podemos crear una nueva aplicación Atlas y elegir este modelo de cartera. Al hacerlo, podemos tener un sitio completo de WordPress sin cabeza en vivo en Internet en cuestión de minutos.

Luego, veremos cómo podemos clonar ese proyecto en nuestra máquina local y configurarlo para el desarrollo local, de modo que podamos personalizar nuestro nuevo sitio. Luego, centraremos nuestra atención en Atlas Content Modeler y veremos cómo podemos usarlo para crear un nuevo modelo de contenido personalizado llamado Fotos.

Y este modelo de contenido de Fotos tendrá algunos de sus propios campos personalizados, incluido uno que es un campo repetible, que es una característica nueva que llegó recientemente a Atlas Content Modeler. Luego, finalmente, veremos cómo podemos hacer un desarrollo personalizado en nuestra aplicación de JavaScript de front-end y consultar los datos personalizados de Fotos y luego mostrarlos en la página.

Una vez que he creado una cuenta de WP Engine y he iniciado sesión en la página de Atlas del portal del usuario, puedo seguir adelante y hacer clic en el botón Crear una nueva aplicación. Desde aquí, podemos comenzar con un plano, que es un sitio preconstruido, o extraerlo de un repositorio existente. Comencemos con un plano. Ahora podemos seleccionar qué modelo nos gusta usar. Así que elegiremos el plano de la cartera y luego haremos clic en Continuar.

El siguiente paso es conectar esta aplicación a GitHub. Haremos clic en el botón para hacerlo y luego iniciaremos sesión en GitHub. Y después de eso, veremos esta pantalla, indicando que nuestra aplicación ha sido autorizada. Entonces, a continuación, necesitamos clonar este repositorio. Así que haremos clic en Clonar Blueprint y luego le daremos un nombre a nuestro nuevo repositorio. Y haga clic en el botón para crear un nuevo repositorio utilizando esta plantilla de plano.

Aquí puede ver que este nuevo repositorio de aplicaciones se ha creado en mi cuenta de GitHub. Ahora necesitamos vincular este repositorio a nuestra aplicación Atlas. Entonces, de vuelta en el portal del usuario, nos desplazaremos hacia abajo hasta la sección Repositorio seleccionado. Si permitió el acceso a todos sus repositorios, es posible que lo vea en la lista. Si no, puede hacer clic en Administrar repositorios.

En esta página, podrá seleccionar los repositorios a los que Atlas debería poder acceder. Así que seleccionaremos nuestro repositorio en la lista. Haga clic en Guardar y ahora, cuando volvamos al panel de usuario, veremos aparecer en la lista el repositorio que habíamos agregado. Así que adelante, seleccione eso. Para una región para nuestra aplicación, nos quedaremos con EE. UU. Central. Y finalmente, haga clic en el botón para crear esta aplicación Atlas.

Aquí, veremos una notificación de que nuestra aplicación ahora se está construyendo. Así que le daremos solo un minuto. Ahora que nuestra aplicación Atlas ha terminado de construirse, podemos continuar y hacer clic en este enlace URL de Atlas para ver nuestra nueva aplicación Atlas ejecutándose en vivo en Internet. Entonces, en la página de inicio, veremos nuestra lista de publicaciones más recientes. Veremos nuestros testimonios.

Podemos dirigirnos a la página de la cartera y ver una lista de nuestros proyectos de cartera aquí. Haré clic en un proyecto individual. A continuación, revisaremos el blog. Así que dirígete a la página del blog y mira nuestra cuadrícula de publicaciones aquí. Y también podemos hacer clic para ver una página de publicación de blog individual. Y luego listo, listo, clic, para volver a nuestra página de inicio.

Entonces, puede notar que estas transiciones de página son realmente rápidas. Obtenemos un corte inmediato de una página a otra. Y este es uno de los beneficios de optar por una arquitectura de WordPress sin cabeza. A continuación, veamos el sitio de WordPress que está detrás de escena impulsando esta experiencia. Así que volvamos al portal de usuario de WP Engine, y desde aquí podemos hacer clic en este enlace al entorno de WordPress vinculado.

Aquí podemos hacer clic en WP Admin para enviarlo al administrador de WordPress de nuestro sitio. Así que aquí está nuestro back-end que impulsa esta experiencia. Vayamos a las publicaciones, y podemos ver aquí que se ha rellenado previamente con varias publicaciones de blog ficticias. Así que aquí es de donde provienen todos los datos para nuestro nuevo sitio. Echemos también un vistazo a los complementos. Aquí puede ver que se han instalado y activado varios complementos para permitir el desarrollo de WordPress sin cabeza.

Prestemos especial atención a Atlas Content Modeler. Entonces, en la barra lateral, hacemos clic en Modelador de contenido. Puede ver aquí que se han creado dos piezas de contenido personalizado para nosotros, proyectos y testimonios. Y podemos verlos aquí en la barra lateral. Así que tenemos proyectos, una lista de ellos, así como testimonios, y una lista de esos. Así que aquí es de donde provienen los datos de proyectos y testimonios que vimos en el sitio front-end.

Así que hemos hecho un gran progreso. Hemos visto como desde el portal de usuario podemos crear una nueva app de Atlas. Y cuando hacemos eso, crea no solo una aplicación de JavaScript de front-end para servir las páginas de su sitio, sino que también crea el back-end de WordPress que impulsa esa experiencia y le ahorra la molestia de vincular los dos. Conecta esos dos para que la aplicación de front-end pueda obtener sus datos desde el back-end de WordPress.

A partir de ahí, pudimos echar un vistazo a la aplicación de front-end y verla ejecutándose en vivo en línea, así como hurgar en el administrador de WordPress y ver algunos de los tipos de datos personalizados o modelos de datos y también algunos de los datos ficticios que son sido creado para nosotros. Entonces, en muy poco tiempo, puede ver que ahora tenemos una aplicación de WordPress sin cabeza que funciona completamente.

Sin embargo, ¿qué pasa si en este punto queremos hacer cambios? ¿Qué sucede si está creando un sitio de cartera real y piensa para sí mismo, esto es realmente genial? Este es un gran comienzo. Pero ahora quiero hacer algunos cambios. Me gustaría hacer algunos cambios en el código para cambiar algunos colores o agregar páginas adicionales a mi sitio. ¿Cómo puedo hacer eso? ¿Cómo empiezo con el desarrollo local? Averigüémoslo a continuación.

Para comenzar, copiaremos el enlace a nuestro repositorio de GitHub y luego continuaremos y ejecutaremos git clone en la línea de comando para clonar nuestro proyecto. Desde aquí, podemos CD en ese directorio del proyecto y luego ejecutar NPM install para instalar las dependencias de nuestro proyecto. Una vez hecho esto, continuaremos y abriremos el proyecto en un editor de código.

A continuación, debemos configurar algunas variables de entorno. Verá que aquí se ha creado un archivo de muestra para nosotros. Y ahora solo tenemos que asegurarnos de que tenga los valores correctos. Entonces, de vuelta en el portal del usuario, haremos clic en Administrar variables y luego veremos las variables de entorno que usa la aplicación de producción. Continúe, copie y pegue ambos en nuestra aplicación para que nuestra aplicación local use las mismas variables de entorno que la producción.

Y el último paso aquí es cambiar el nombre de este archivo, eliminando .sample del final para que entre en vigor. Ahora, la aplicación front-end con la que estamos trabajando aquí se basa en Faust.js. Y Faust, para hacer la magia de obtención de datos que hace, necesita poder ejecutar lo que se llama una consulta de introspección de GraphQL.

Entonces, esto es básicamente Faust preguntando al back-end de WordPress, oye, ¿qué datos tienes disponibles en el esquema de GraphQL para que los consulte? Entonces necesitaremos habilitar la introspección para que esto funcione. Volveremos al administrador de WordPress aquí e iremos a GraphQL y luego a la configuración en la barra lateral.

En la página Configuración, nos desplazaremos hacia abajo hasta donde vemos Habilitar introspección pública, y continuaremos y haremos clic en ese cuadro. Ya que estamos aquí, recomiendo habilitar también el modo de depuración gráfica. Eso le dará más mensajes de depuración descriptivos que aparecen. Una vez que hayamos hecho eso, podemos continuar y hacer clic en el botón para guardar nuestros cambios. Y ahora finalmente podemos abrir la terminal y ejecutar NPM run generar. Y luego, una vez hecho esto, finalmente, NPM ejecuta dev para que nuestra aplicación funcione localmente.

Ahora, haré clic en este vínculo localhost 3000 y podremos ver que nuestro sitio se está ejecutando localmente aquí. Así que dijimos que queríamos agregar algo de contenido a esto para personalizar nuestro sitio. Y ahora que estamos preparados para el desarrollo local, podemos hacer exactamente eso. Entonces, digamos que para este proyecto, queremos tener no solo publicaciones de blog y luego nuestras pocas piezas de contenido personalizado que tenemos, como los proyectos de cartera que vimos y también estos testimonios.

Más allá de ese contenido personalizado, digamos que queremos agregar aún más. Más allá de alguien que crea publicaciones de blog y crea proyectos de cartera, digamos que el cliente para el que es el sitio también es fotógrafo y quiere mostrar las fotos que ha tomado. ¿Cómo podríamos agregar un tipo de contenido personalizado o un modelo de contenido personalizado a nuestro sitio para respaldar los datos de esta foto, consultarlos y luego mostrar las fotos en nuestra aplicación frontal? Hagamos eso a continuación.

Así que regresaré al administrador de WordPress aquí, e iremos al Modelador de contenido. Así que hemos estado en la pantalla una vez antes. Echamos un vistazo a los proyectos y testimonios. Podemos ver que estos son modelos de contenido personalizados que se han creado para nosotros como parte de este proyecto. Y puedo hacer clic en cada uno de estos y ver que cada uno de estos modelos tiene su propio conjunto de campos individuales.

Entonces, los proyectos, por ejemplo, tendrían estos campos individuales. Y los proyectos y testimonios se reflejan aquí en la barra lateral. Y luego los campos para cada uno de ellos. Si hago clic en un proyecto y luego hago clic en uno existente o voy a Agregar nuevo, de cualquier manera, veremos todos esos campos reflejados aquí. Entonces, nuestros creadores de contenido verán todos los campos que necesitan para ingresar estos datos. Está bien.

Sin embargo, para nuestro contenido personalizado, necesitamos un nuevo modelo. Así que seguiré adelante y crearé un nuevo modelo haciendo clic en este botón aquí. Entonces llamaré a esta foto. Y para un nombre en plural, solo pondremos una S al final y lo llamaremos fotos. Este identificador de API generado automáticamente, aquí, este ID, estoy de acuerdo. La foto me parece bien. Para la visibilidad de la API, queremos asegurarnos de hacer clic en público, ya que queremos poder consultar estos datos a través de GraphQL. Para nuestro ícono de modelo, tal vez algo como una cámara sería apropiado para las fotos. Y ahora haré clic en Crear.

Así de simple, se ha creado nuestro modelo de contenido de fotos. Entonces, en este punto, dice que elija su primer campo para el modelo de contenido. Y a partir de esta grabación, estos son los tipos de campo admitidos por Atlas Content Modeler. Para las fotos que queremos mostrar en este sitio, usemos un par de estas.

Digamos que le vamos a dar un título a cada una de nuestras fotos. Diré Título y luego lo llamaré Título de la foto como identificador de la API. Y así es como estará disponible en el esquema de GraphQL. Para eso es eso. Y diremos que queremos usar esto como el título de la entrada. Y el texto de una sola línea está bien. Así que adelante, haz clic en Crear.

Para nuestro siguiente campo, digamos que queremos capturar esa imagen para la foto. Así que le daré al plus. Y aquí, crearemos un nuevo campo. Llamaremos a esta una imagen. Y para el tipo, en realidad, necesitaremos seleccionar Medios, ya que será una foto. Así que lo llamaré imagen. Y luego aquí abajo, continuaré y configuraré esto como la imagen destacada para cada publicación. Así que haré clic en eso y lo haremos obligatorio también. Así que siempre sabemos que estará allí. Y luego haga clic en Crear.

Ahí tienes Ahí está nuestro segundo campo. Para el tercero, tengamos una descripción. Así que le daré al plus. Y para este, este será un campo de texto enriquecido. Así que diremos descripción y eso servirá para ese campo. Y luego el último que queremos es para los sujetos. Así que usaremos este campo para capturar lo que se muestra en la foto. Entonces, si es una foto de una cadena montañosa al atardecer, por ejemplo, como será una de nuestras fotos, algunos de los sujetos de la foto podrían ser montañas, estrellas, cielo, cosas así. Solo una lista de cosas que están presentes en la foto.

Habría diferentes formas de almacenar estos datos. Podría crear una taxonomía personalizada, por ejemplo, y luego asignar términos a cada una de esas cosas. Así que cada una de estas fotos podría tener uno o más términos. Esa sería una forma de hacerlo. Sin embargo, digamos que para nuestros propósitos no estamos interesados ​​en poder agrupar fotos en función de una etiqueta como esa o una taxonomía.

En cambio, esta lista es realmente solo para fines de visualización en el sitio. El problema es que si presionamos el signo más aquí, lo convertimos en un campo de texto, bueno, entonces solo obtenemos uno de ellos, ¿verdad? ¿Y si hay más? No sabemos de antemano cuántos de estos sujetos puede tener una foto determinada, ¿verdad? Y ahí es donde la función de campos repetibles de ACM resulta realmente útil. Entonces, veamos cómo se ve eso.

Haré de esto un campo de texto aquí, y lo llamaremos asuntos. Y luego haga que este campo sea repetible. Así que esto es clave. Continuaremos y haremos clic en eso. Y lo mantendremos como un campo de texto de una sola línea y presionaremos Crear. Así que así, nuestro modelo de contenido de fotos aquí ahora se ha creado. Y podemos verlo en la barra lateral.

Entonces, si hago clic aquí en Fotos, veremos que tengo una ficticia que creé con anticipación aquí. Pero si creamos Agregar nuevo, verá que esto refleja: los campos aquí reflejan lo que habíamos agregado en el modelo de contenido. Entonces obtenemos un título. Tenemos la oportunidad de adjuntar una imagen. Tenemos un campo de texto enriquecido para la descripción de la foto y un campo repetible aquí para agregar uno o más temas.

Entonces, veamos qué podemos hacer aquí. Haré clic en Agregar imagen destacada. Y elegiré uno de mi máquina. Vamos a ver. Y una vez que haya terminado de cargarse, le daremos un texto alternativo. Diremos, una flor blanca, así, y listo. Así que ahí está nuestra imagen. Sin embargo, volvamos atrás y pongámosle un título. Diremos flor blanca con bokeh. Así. Para una descripción, diremos que aquí hay una gran foto de unas bonitas flores blancas. Así.

Y ahora para nuestros sujetos, podemos preguntarnos, ¿qué está presente en la foto aquí? Y tal vez podamos, la flor podría ser una. Haga clic en Agregar elemento. Y ese efecto bokeh, con el fondo difuminado, también está ahí. Y el tallo o la rama del árbol, supongo, estaría en la toma, para otro ejemplo. Así que agregaremos algunos de esos aquí. Y si creemos que hemos capturado todo, puede continuar y presionar Publicar. Así que ahí vamos.

Y luego, de vuelta en las fotos, previamente había creado esta. Las montañas son geniales. Debería configurarse así. Entonces obtienes una foto de la cordillera. Y luego aquí hay una gran toma de una cadena montañosa con montañas, estrellas, sombras. Algunos temas que tiene. Eso nos daría al menos algunas publicaciones con las que trabajar en nuestra aplicación de front-end.

Entonces, en este punto, hemos creado nuestro modelo de contenido en el back-end de WordPress para almacenar los datos que necesitamos para estas fotos, y hemos creado dos nuevas publicaciones de fotos para que las usemos para tratar de consumir en nuestra aplicación de front-end. Y luego, es posible que se pregunte, bueno, ¿cómo vamos a extraer estos datos de WordPress para poder usarlos en nuestra aplicación de front-end?

Hay una característica muy interesante que Atlas Content Modeler muestra para que sea muy fácil. Así que regresaré al Modelador de contenido aquí y buscaré nuestro modelo de fotos, y haré clic en el ícono del pequeño punto suspensivo aquí. Y voy a ir a Abrir en Gráfico. Entonces, tan pronto como haga clic aquí, se creará una consulta para mí que incluye este modelo de contenido que creamos, fotos.

Y toma los primeros 10 de esos, y luego incluye este fragmento de GraphQL a continuación que tiene todos los campos que habíamos creado, incluidos los personalizados. Entonces, si notaron, agregamos el título de la foto, teníamos nuestra imagen, teníamos la descripción y luego los temas. Esto es muy útil para ver cómo se ven estos datos en el esquema de GraphQL. Así que adelante, presione este botón para ejecutar esta consulta.

Y puede ver lo que obtendría nuestra aplicación JavaScript de front-end si ejecutara exactamente esta misma consulta de GraphQL. Recuperaría fotos. Y luego dentro de eso habría un objeto llamado matriz, llamado nodos. Y dentro de esa matriz habría objetos que se verían así. Cada una de estas fotos tendría un título, una imagen y luego, más abajo, la descripción y los temas también.

Así que esto es exactamente lo que necesitamos. Así que vamos a hacer uso de varios de estos campos ahora. Así que estamos listos para comenzar, en términos de nuestro back-end de WordPress y la capacidad de almacenar y también exponer estos datos de fotos. Así que ahora veamos cómo podemos usar esto en nuestra aplicación JavaScript de front-end.

Así que volveremos allí. Y creo que un buen punto de partida para esto sería mirar la página Portafolio, que es una lista de proyectos, ¿verdad? Dado que esa es una lista de publicaciones de modelos de contenido personalizado, y las fotos también lo serán, esas dos páginas tienen mucho en común. Así que podemos usar eso como una especie de punto de partida.

Así que haré clic en Portafolio aquí, y solo para recordarnos cómo se ve eso. Y así es como obtenemos esta lista de proyectos de cartera. Así que abramos el código ahora y ensuciémonos un poco las manos. Rastrearemos esta página, que es ese proyecto slash, y veremos cómo se construye.

Entonces, dentro de Source, iré a Pages. Y luego encontraré Project. Ahí está. Y abra el archivo index.js dentro de eso. Desplácese un poco hacia abajo y veremos que se está utilizando este enlace de paginación de nodo de uso. Y este es un enlace de React que proviene de esta ubicación aquí, dentro de la carpeta Hooks. Y dentro de eso, llamamos query.projects.

Y query.projects nos permitirá acceder a datos sobre el tipo de publicación personalizada de nuestros proyectos, también conocido como el modelo de contenido de nuestro proyecto que habíamos creado. Así que llamaremos a query.projects y luego pasaremos algunos campos que queremos procesar con anticipación, para que estén tan pronto como se cargue la página. Así que eso es lo que es esta matriz aquí arriba. Entonces esos campos están allí en la primera carga de la página.

Y luego, una vez que estemos listos para representar el contenido de esta página, haremos esto. Tenemos un componente de SEO, un encabezado y luego un pie de página en la parte inferior. Y luego, la sección principal de la página aquí está dentro de esta etiqueta principal, donde tenemos el encabezado, que es la sección azul que se está extrayendo. Y luego un div contenedor con nuestra lista de proyectos dentro de eso. Y luego también este componente Cargar más, que da como resultado este botón Cargar más en la parte inferior, en el que puedo hacer clic. Y luego eso obtiene más proyectos y los muestra en la interfaz de usuario.

Así es como se construye esa página. Y como dije, me gusta usar esto como un punto de partida para nosotros. Así que sigamos adelante y copiemos este archivo completo, y vamos a imitar esta estructura de archivos aquí. Entonces, dentro de Pages, crearemos Photo. Y luego, dentro de esa carpeta, crearemos un archivo index.js. Está bien. Y en este nuevo archivo, pegaré el contenido. Pero cambiaremos algunas cosas, ya que no estamos interesados ​​en datos de proyectos para esto, queremos nuestros datos de fotos. Así que veamos cómo podemos hacer eso.

Entonces, el nombre de esta constante hace referencia a proyectos. Así que sigamos adelante y cambiemos el nombre de eso como primer paso. Podemos decir campos de pre-paso de nodos de fotos. Así que eso será bueno. Tendremos que proporcionar nuestra propia lista de campos. Tal vez solo dejemos el ID de la base de datos por ahora, y luego agregaremos algunos en un momento.

Más abajo, a ver. Foto pase previo. Oh, el nombre se equivocó. Aquí vamos. Así que ahora vuelven a coincidir. Está bien. En lugar de query.projects entonces, recuerde, queremos query.photos para nuestro tipo de contenido personalizado. Así que continúe y actualice eso para que sean fotos, allí mismo. Desplácese un poco hacia abajo.

Entonces, este componente de proyectos, esto ya no se aplicará, ya que no lo estamos usando. Así que eliminaré eso en este punto y ¿qué tal esto? Solo tendremos... solo H1. Dice Hola, solo para obtener algo de representación en la página aquí. Y tal vez también comentaremos mucho más.

Así que voy a ejecutar una búsqueda de proyecto para ver si hay algo que olvidé. Sí, solo unos pocos comentarios de código y luego este componente aquí que se está extrayendo y que ya no estamos usando. Así que eliminaré ese componente. Y creo que deberíamos ser buenos. Así que no estamos usando algunas de estas cosas en este momento, pero está bien. Lo haremos momentáneamente.

Así que le daré a esto un Guardar, y veremos si podemos obtener esa representación. Así que ahora en nuestra aplicación frontal, debería poder navegar a Foto, así. Y ahí vamos. Así que aquí está nuestra nueva página. Dice hola, y gran parte se ve igual que nuestra página de proyectos de cartera, como el encabezado en la parte superior y el pie de página.

Me doy cuenta de que todavía dice cartera, y probablemente queramos cambiar eso. Así que podemos hacer eso muy brevemente. Así que aquí está la cartera. Diremos fotos. Y luego también en este lugar, cambiaremos eso a fotos. Guárdalo. Aquí vamos. Entonces eso actualizó el encabezado.

Ahora profundicemos en cómo podemos usar esos datos, recuperar los datos de nuestras fotos y mostrar una lista aquí. Entonces, ¿por dónde empezamos con eso? Como vimos en GraphQL, o en el administrador de WordPress aquí, así es como se verá aproximadamente nuestra consulta. Va a tener estos campos. Así que hagamos eso. Así que el título de la foto es el campo personalizado. Pero en realidad, dado que configuramos este campo como el título de la publicación, podríamos simplemente usar el título, ya que ese será: el título de la publicación será el mismo que el campo personalizado con este nombre. Así que podríamos usar eso.

Entonces, en esta matriz, no solo haremos la identificación de la base de datos, sino que también obtendremos el título de nuestras fotos, imágenes, descripción y temas. Así que agreguemos esos también. Imagen, descripción y luego asunto. Está bien. Necesitarás comas al final. Aquí vamos. Así que creo que esos son todos nuestros campos que queremos tener disponibles justo cuando finaliza la página. Entonces eso me parece bien.

Y probemos si realmente podemos obtener alguna representación de datos aquí. Entonces, bajo nuestro Hello H1 que tenemos, hagamos esto. Haremos JSON.stringify y luego pasaremos a ese algo. Así que haremos datos aquí, y veremos si podemos obtener representación de datos en nuestra página.

Así que guardaré eso y volveremos a nuestro front-end. Y ahí está, por supuesto. Así que así es como se ven los datos. Puede ver que lo estamos recuperando con éxito desde nuestro back-end de WordPress. Tenemos esta matriz de nodos, y luego dentro de ella objetos que representan cada una de nuestras fotos individuales y exactamente los datos que habíamos pedido, incluidos cada uno de los valores individuales para nuestro campo de temas repetibles aquí.

Así que esto es genial. Esto es exactamente lo que necesitamos. Hagamos las cosas un poco más limpias, bueno, mucho más limpias, supongo, que simplemente escupir datos en la página de esta manera. En lugar de solo esta etiqueta previa aquí, mapeemos cada uno de nuestros datos y representemos una tarjeta en la página para esto.

Entonces, una cosa que me gusta hacer es que antes de asumir que tenemos publicaciones para mostrar, tenemos que tener en cuenta el caso de que tal vez no haya ninguna, ¿verdad? Entonces, una cosa que me gusta hacer es estar en la parte superior de mis componentes, siempre tengo fotos, algo así. Y luego hago data.nodes.length así. Y haremos un signo de interrogación para el encadenamiento opcional, porque aún no sabemos si los datos existirán.

Y luego convertiremos esto en un booleano como ese. Eso significa que si fallamos en este punto y los datos no están definidos, esto se convertirá en falso. Diremos que no tenemos fotos para renderizar. De lo contrario, si podemos profundizar hasta el final de esta matriz, será cero, si no hay publicaciones, o una o más. Entonces, si convertimos ese número entero en un valor booleano, nos dirá si tenemos fotos o no. Entonces, si es cero, esto será falso. Si es uno o más, havePhotos sería verdadero.

Entonces, con ese conocimiento, podemos tomar algunas decisiones dentro de nuestro componente aquí. Así que vamos a averiguar cómo podemos hacer eso. Así que diré, si tenemos fotos, entonces queremos renderizar una cosa. Diremos, veamos. Queremos hacer data.photos y luego las mapearemos. Entonces, para cada foto, renderizaremos algo.

Así que vamos a devolver algo fácil al principio. Devolveremos el… veamos. Haremos un H2, qué tal, ya que esto va a ser como una de nuestras tarjetas. Y luego diremos photo.title así. Está bien. Así que mapearemos cada una de nuestras fotos. Y para cada uno de ellos, devolveremos un H2 con el título de esa foto. Está bien.

Entonces, todo esto es lo que queremos si realmente tenemos fotos para renderizar. Pero, ¿qué pasa con la alternativa, si no lo hacemos? Así que tendremos nuestra cláusula else aquí, y representemos algo más. ¿Qué tal el párrafo. Y diremos, no hay fotos para mostrar. Así que ahora si lo guardamos, ahí vamos. Así que ahora estamos mostrando los títulos de nuestras publicaciones aquí.

Así que vamos a hacer esta característica un poco más completa aquí. Diremos que queremos devolver algo más. Está bien. Y para cada uno de estos, copiaré solo algunos estilos, algunos estilos en línea que escribí con anticipación aquí, solo para ahorrarnos el tiempo de escribirlos. Así que tendré ese contenedor div. Y luego, dentro de eso, podemos restaurar nuestro H2 que teníamos. Así que pegaré un H2 con el título.

Después del título, ¿qué tal si mostramos la descripción? Podemos hacer eso a continuación. Así que será foto. descripción, así. Pero no podemos renderizarlo solo, como dentro de un contenedor, por ejemplo, así. Si tratamos de hacer esto, no funcionará para nosotros, porque el HTML no se escapará. Entonces, si guardo eso, puede ver que ahora tenemos el HTML escapado que se muestra en la página, que no es lo que queremos.

Entonces, React tiene una utilidad para trabajar con HTML que es segura y no necesita escaparse así. Y eso es usar div y luego peligrosamente SetInnerHTML así. Y puede pasarle un objeto donde una propiedad es HTML de doble subrayado.

Y luego el valor que le pasas es lo que quieres renderizar sin escapar. Entonces, para nosotros, eso sería foto. descripción, así. Y luego este div puede vestirse a sí mismo. Está bien. Así que ahora le daré un ahorro. Veremos qué obtenemos. Fresco. Así que ahora nuestro HTML ya no se escapa. Así que me parece bien.

Así que esto es genial. ¿Qué tal esa imagen destacada? Lo que podríamos hacer es escribir esto desde cero. Podríamos tomar la URL de la imagen destacada y tener una etiqueta de imagen y pasarla como la URL. Y luego el navegador mostraría una imagen y la apuntaría a esa fuente.

Sin embargo, este proyecto, si profundiza en esta base de código de blueprint, en realidad tiene un componente preconstruido exactamente para este propósito llamado imagen destacada. Entonces, para nosotros, eso sería perfecto para que lo usemos. Así que me desplazaré un poco hacia arriba hasta donde estamos importando un montón de componentes diferentes de nuestro directorio de componentes. Y etiquetaré una al final aquí llamada imagen destacada, así. Así que ahora podemos renderizar nuestra imagen destacada donde queramos.

Justo debajo de donde está este div con nuestra descripción de la foto, representaremos nuestra imagen destacada. Y esto requiere un accesorio de imagen. Y lo que necesitamos pasar aquí es el nodo completo para esta imagen. Entonces, para nosotros, eso sería photo.feauredimage.node, así como así. Y creo que eso debería hacer el truco para nuestra imagen. Así que lo guardaré, y efectivamente, aquí vamos. Entonces, una vez que nuestra página se vuelve a cargar aquí, ahora tenemos nuestro título, nuestra descripción y luego se muestra la foto. Y del mismo modo, para nuestra próxima foto también, esa imagen se muestra en la lista.

Así que esto es genial. Estamos haciendo un gran progreso. Lo último fue cuidar nuestro campo repetible para los sujetos presentes en la foto. Entonces, lo que haré es crear un párrafo aquí y cerrarlo. Y luego, dentro de esta etiqueta de párrafo, podemos abrir algunos rizos y hacer nuestra misma foto.sujetos. Pero ahora nos uniremos al final de la unión. Y le diremos [INAUDIBLE] que queremos unirnos con una coma, espacio, así como así. Y le daré una salvación.

Cuando ocurra nuestra recarga en caliente, debería poder desplazarme hacia abajo. Y por supuesto, ahí vamos. Así que se muestran en la lista. Es posible que el usuario no esté seguro de cuáles son. Así que tal vez en nuestra aplicación, podemos volver a aparecer y agregar una etiqueta de algún tipo, una pequeña cosa anterior allí que diga Sujetos tal vez, así. Sujetos flor, bokeh, rama. Y luego nuestra otra foto aquí tiene temas montaña, estrellas, sombras, solo como ejemplo.

Así que haremos una pausa aquí, pero pueden ver lo rápido que pude armar esta página. Supongo que deberíamos deshacernos de nuestro hola, mundo en la parte superior. No necesitamos eso. O hola palabra. Así que quitaré eso. Ahí estamos. Así que pueden ver, como decía, lo rápido que pudimos armar esto.

Al basar nuestro código en la página de lista de cartera, pudimos crear nuestra página de lista de fotos aquí y luego mapear cada una de las fotos individuales y acceder a los campos personalizados de Atlas Content Modeler para ello: el título, descripción, imagen, y luego nuestros campos repetibles para el tema aquí. Así que me encantaría que se sintieran empoderados por esto en sus propios proyectos.

Si desea tomar uno de nuestros planos como esta gran ventaja que puede hacer gran parte de su proyecto por usted, gran parte del trabajo preliminar. Y luego, a partir de ahí, puedes hacer algo similar a lo que hicimos en esta charla. Puede personalizarlo aún más y agregar sus propias personalizaciones y otros modelos de contenido, etc.

Gracias por mirar. Espero que esta charla haya sido realmente útil y le haya dado una buena idea de todas las excelentes características que han aparecido y seguirán apareciendo en el ecosistema de Atlas.

PRESENTADOR: Y eso es un final para DE{CODE} 2022. Espero que lo haya encontrado inspirador y se vaya con más experiencia en WordPress y nuevas conexiones con la comunidad. Esté atento al contenido grabado en el sitio desde el viernes para ponerse al día con cualquier cosa que se haya perdido o ver un video nuevamente.

Quiero agradecer por última vez a nuestros socios patrocinadores: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios y 10Up. Muchas gracias por donar a nuestra recaudación de fondos DE{CODE}. Realmente apreciamos su generosidad.

Ahora, para todos los que han estado interactuando con nosotros en nuestro centro de asistentes y nuestras sesiones, elegiremos a los tres ganadores principales y les informaremos cómo pueden reclamar su premio al final de DE{CODE}. Esperamos verte nuevamente en nuestros futuros eventos, ya sea en persona o virtualmente. Estamos ansiosos por brindarle más información sobre las últimas tendencias de desarrollo de WordPress y cómo puede implementarlas para crear sitios de WordPress más rápido.

Eso es todo de mi parte. Muchas gracias por acompañarnos, y cuídense.