En esta página
Rol: Desarrollador frontend (contratista externo)
Tecnologías: Editor de bloques de WordPress (Gutenberg), React, Svelte, Advanced Custom Fields (ACF Pro), API REST de WordPress, CSS moderno y SCSS.
Resumen
Desarrollé un conjunto de bloques personalizados listo para producción para la plataforma de publicación digital de Christianity Today, convirtiendo especificaciones de diseño complejas y detalladas en componentes editoriales flexibles y reutilizables dentro del editor de bloques de WordPress.
El reto
La publicación necesitaba herramientas editoriales modernas para crear reportajes extensos y páginas de destino con una presentación visual elaborada. El objetivo principal era reproducir con precisión las especificaciones del sistema de diseño en Figma y, al mismo tiempo, mantener una experiencia de edición intuitiva, eficiente y resistente a errores de composición en distintos tamaños de pantalla.
La solución
Como contratista externo de frontend, desarrollé bloques personalizados con React, Svelte y ACF Pro, integrados con la API de bloques de WordPress. Establecí una arquitectura modular de estilos y propiedades estrictas de los componentes para aplicar los tokens de diseño —tipografía, espaciado y comportamiento de la rejilla adaptable— directamente en el editor. Esto ofrecía a los creadores de contenido una experiencia WYSIWYG que reflejaba la presentación del sitio sin desviaciones de composición.
Puntos clave
- Fidelidad al diseño: Convertí sistemas de diseño editorial detallados en componentes fluidos y adaptables que reproducían las especificaciones de espaciado y las escalas tipográficas.
- Arquitectura híbrida: Combiné React y componentes ligeros de Svelte con la API de bloques de WordPress para favorecer el rendimiento del editor y generar un marcado frontend limpio y desacoplado.
- Edición de contenido más sencilla: Los equipos editoriales podían componer diseños dinámicos de forma independiente, con controles programáticos para conservar la coherencia de marca y la integridad de la composición.
- Integración con el tema: Construí componentes modulares y desacoplados para integrarse con la arquitectura del tema de WordPress existente y su proceso de despliegue.