Desarrollar proyectos WordPress con bloques Gutenberg y arquitectura modular
Nuestra receta para un código escalable, mantenible… y pensado para el negocio
TL;DR: Partimos de una instalación limpia de WordPress, añadimos ACF Pro, definimos una plantilla casi vacía y levantamos un core MVC propio. Cada bloque Gutenberg vive en su carpeta, con sus campos y estilos empaquetados con Webpack. El resultado: un sitio que crece de forma ordenada, se despliega con un simple
git pushy pone al equipo de marketing a crear páginas sin depender de desarrollo.
1. El punto de partida: cero lastre, máxima libertad
Uno de los errores más comunes en proyectos WordPress a medida es empezar con una plantilla demasiado compleja, sobrecargada de estilos, plugins y configuraciones que luego son difíciles de controlar. Nuestro enfoque es justo el contrario.
- Comenzamos con una instalación limpia de WordPress.
- Instalamos Advanced Custom Fields (ACF) Pro, que nos permite crear bloques personalizados desde código, sin depender del backend ni de la base de datos.
- Creamos una plantilla propia que contiene únicamente lo imprescindible:
style.csscon los metadatos del tema y unfunctions.phpque solo carga nuestro sistema modular.
Esta base mínima nos da el control total sobre el comportamiento y la evolución del proyecto.
2. «Functions» y «Style»: menos es más
Dos de los archivos más problemáticos en desarrollos WordPress son functions.php y style.css. Es habitual encontrar proyectos donde estos ficheros concentran cientos o miles de líneas de código, lo que complica el mantenimiento y propicia errores.
Nuestro enfoque busca la especialización y la simplicidad:
functions.php
- Contiene: una sola línea que carga
core/autoload.php - No contiene: hooks, lógica de negocio, queries, etc.
style.css
- Contiene: los metadatos de la plantilla
- No contiene: estilos globales
Queremos que cada archivo cumpla una sola función. Si hay que escribir lógica o estilos, debe hacerse en el archivo específico correspondiente al bloque o funcionalidad concreta.
3. Un core MVC a medida: orden, claridad y evolución
En el corazón del sistema está nuestra carpeta core/, que organiza el proyecto bajo una estructura similar al patrón Modelo-Vista-Controlador (MVC). No seguimos este patrón de forma dogmática, sino adaptado a las características de WordPress.
Estructura general:
core/
├─ controllers/ ← Gestionan las peticiones (AJAX, hooks...)
├─ services/ ← Ejecutan la lógica de negocio
├─ repositories/ ← Acceso a base de datos o APIs externas
├─ helpers/ ← Funciones auxiliares reutilizables
└─ configuration/ ← Setup de WP, scripts, post types, opciones...Ejemplo real:
- Una petición AJAX de formulario llega a un controlador.
- El controlador invoca un servicio que valida los datos y toma decisiones.
- El servicio llama al repositorio que guarda los datos en base de datos y los envía a un CRM.
Este enfoque permite escalar sin dolor. Cada nuevo caso de uso se traduce en un nuevo servicio y, si hace falta, un nuevo repositorio. Nada más.
4. Bloques Gutenberg 100 % personalizados: diseño y control
Una de las claves del éxito en este tipo de proyectos es la creación de bloques Gutenberg personalizados. Cada bloque es un componente completamente modular, desarrollado a medida y con una estructura fija que facilita el trabajo en equipo:
blocks/
└─ featured-product/
├─ block.json ← Metainformación del bloque
├─ fields.json ← Campos del bloque (vía ACF JSON)
├─ block.php ← Lógica de renderizado
├─ block.scss ← Estilos locales del bloque
└─ template-parts/ ← Fragmentos de plantilla reutilizablesBeneficios para el cliente final:
- Flexibilidad total sin conocimientos técnicos: el equipo de contenidos puede crear landings completas arrastrando bloques.
- Consistencia visual: todos los bloques siguen las guías de estilo de la marca.
- Velocidad de publicación: no hace falta contactar con desarrollo para lanzar una campaña nueva.
5. Comunicación entre bloques: eventos, no dependencias
Un punto técnico especialmente elegante del proyecto fue la gestión de interacciones entre bloques mediante eventos JavaScript. Así mantenemos el principio de independencia entre componentes.
Ejemplo:
- El bloque «formulario» lanza un evento
lead:storedcuando un usuario se registra. - Los bloques «mensaje de gracias» o «spinners de carga» escuchan ese evento y actúan en consecuencia.
Esto permite que cualquier parte de la interfaz reaccione sin acoplamientos ni llamadas cruzadas entre bloques. Una arquitectura mucho más limpia y predecible.
6. Pensado para equipos de marketing
Este tipo de estructura no solo ayuda a los desarrolladores, sino también a los equipos de marketing que gestionan el contenido del sitio. Está especialmente pensada para facilitar su trabajo, minimizar errores y acelerar los tiempos de publicación:
- Edición visual sin errores: los bloques están diseñados para que el contenido no rompa la estructura.
- Opciones personalizadas: cada bloque expone solo las configuraciones necesarias (colores, imagen, número de columnas…).
- Documentación interna: cada bloque incluye comentarios y ejemplos que explican su uso.
- Bloques 100% a medida: no utilizamos bloques genéricos de WordPress. Cada uno ha sido desarrollado pensando en las necesidades concretas del cliente.
- Configuración en segundos: añadir un bloque, configurarlo visualmente y dejarlo listo puede hacerse en menos de 30 segundos.
- Estructura prediseñada: el contenido ya tiene un diseño definido. El editor solo tiene que rellenar los textos y elegir opciones, sin preocuparse del aspecto final.
- Múltiples estilos preconfigurados: un mismo bloque puede tener diferentes variantes visuales, seleccionables con un solo clic.
- Formularios dinámicos arrastrando campos: crear un formulario completo es tan sencillo como elegir los campos deseados, y el sistema se encarga de todo lo demás.
- Integración automática con CRM: cada lead generado por los formularios se envía directamente al sistema de gestión del cliente, sin pasos intermedios.
En otras palabras, conseguimos un sistema en el que el contenido puede crecer sin depender del departamento técnico, garantizando al mismo tiempo la consistencia visual y la eficacia operativa.
7. Despliegue continuo y multientorno
Para muchos de nuestros clientes, una de las preocupaciones clave es que las mejoras que se hacen en desarrollo lleguen a producción de forma segura, rápida y sin errores.
- Toda la configuración se guarda en archivos JSON.
- Los entornos de desarrollo, pre y producción comparten el mismo código.
- El despliegue consiste en un
git pully una limpieza de caché. Nada más.
En algunos proyectos hemos trabajado con múltiples dominios que comparten código y solo cambian su apariencia visual mediante carpetas de perfilado. Es un sistema altamente reutilizable y muy eficiente a largo plazo.
8. Empaquetado con Webpack: rendimiento desde el primer segundo
Cada bloque Gutenberg incluye su propio fichero SCSS y JS. En lugar de cargar decenas de scripts por separado, utilizamos Webpack para:
- Minimizar y unificar los archivos por bloque.
- Optimizar los tiempos de carga y el rendimiento general.
- Evitar conflictos y garantizar el aislamiento de cada componente.
Esto se traduce en mejores métricas Core Web Vitals y una experiencia de usuario fluida desde el primer segundo.
9. Conclusión: desarrollo profesional, resultados visibles
Nuestro enfoque combina lo mejor de dos mundos:
- Las ventajas técnicas de una arquitectura modular, escalable y bien pensada.
- El impacto directo en negocio de un sistema que permite crear páginas, lanzar campañas y modificar contenido en cuestión de minutos.
Ya seas un responsable de marketing, un CTO o un director de proyecto, este tipo de estructura te garantiza:
- Menos errores.
- Más velocidad.
- Más control sobre la evolución del proyecto.
¿Hablamos?
Si te interesa este enfoque y estás buscando una empresa que no solo programe en WordPress, sino que piense en el largo plazo de tu web, ponte en contacto con nosotros.
Desarrollamos proyectos técnicamente sólidos, con una base de código clara y mantenible, y con la flexibilidad que tu equipo de contenidos necesita para crecer.
Deja una respuesta