Componente PostList

La versión 3.2 del UX fomo Design system está disponible y desde este momento puedes empezar a diseñar con el componente Lista de posts.

Pero antes de hablar del componente debes saber que hemos reorganizado las páginas del archivo para mejorar la accesibilidad de todos los assets.

Ahora tenemos tres bloques: Foundations, Parts y Sections.

Dentro de Sections, creamos una página llamada PostList, que incluye los componentes _PostExcerpt y PostList.

Componente Lista de posts

El componente con la lista de artículos consta de 2 partes.

_PostExcerpt

Este componente tiene un guion bajo «_» delante del nombre para ocultarlo y que solo pueda ser usado por el componente PostList.

Si en el futuro lo incluimos en otro componente o pattern lo haremos visible y lo moveremos a una nueva página llamada PostExcerpt.

PostList

Este es el componente principal y en su interior encontrarás:

Un texto encabezado que podrás mostrar, ocultar y editar su contenido desde el panel de propiedades del componente.

Incluye tres instancias del componente _PostExcerpt, que muestra un thumbnail (que se puede mostrar u ocultar), el título del post y un extracto de su contenido.

También se puede mostrar u ocultar una instancia de un nuevo componente llamado Badge.

Esta de lista de artículos tiene 3 variantes: desktop, tablet y mobile.

Componente Badge

Este distintivo o badge es el segundo componente del que hablábamos al inicio del post.

En esta versión sólo cuenta con una propiedad de texto llamada label para editar su contenido.

Cómo usar un bloque de posts en tus diseños

El componente PostList es muy versátil y puede integrarse en muchos proyectos de diseño, te dejamos algunos ejemplos reales de cómo puedes utilizarlo.

Blogs y Sitios Web de Noticias

Utiliza el PostList para mostrar los últimos artículos publicados en tu blog o sitio web de noticias. Configura los thumbnails y extractos para atraer a los lectores y destacar el contenido más relevante.

Dashboards de SaaS

En el dashboard de una aplicación SaaS lo podrás implementar para mantener a los usuarios informados sobre las últimas actualizaciones o novedades del producto.

Portfolios y páginas personales

Muestra tus proyectos más recientes o artículos de tu blog en la página principal de tu portafolio. Esto no solo demuestra tus trabajos más recientes, sino que también mantiene tu sitio actualizado (los usuarios y Google lo agradecerán).

Este es el uso concreto que le vamos a dar dentro del proyecto WordPress for UX.

Aplicaciones para móviles y tablets

En aplicaciones móviles, puedes usar el componente PostList para mostrar noticias, actualizaciones, o contenido destacado.

La flexibilidad del componente permite una fácil adaptación a diferentes tamaños de pantalla y modos de visualización.

Estos son solo algunos ejemplos de cómo el PostList puede mejorar la funcionalidad y apariencia de tus proyectos.

Ahora puedes dar el próximo paso, duplica el UX fomo Design system y empieza a diseñar en Figma.

Compartido bajo licencia Creative Commons 4.0

Como siempre, estaremos muy atentos a tus comentarios y sugerencias para seguir avanzando con nuestro design system.

Muchas gracias.