CrocoBuilder

Qué es CrocoBuilder y qué problema resuelve

Construir interfaces complejas en WordPress suele implicar elegir entre velocidad de maquetación y calidad del código final: builders visuales que generan marcado inflado, wrappers innecesarios y estilos duplicados entre un panel de "CSS adicional" y los controles del editor. CrocoBuilder es un plugin frontend builder orientado a desarrolladores y agencias que necesitan construir sitios dinámicos sin renunciar a un DOM limpio ni al control real del código. Cada elemento que colocas en el editor equivale a un único nodo DOM, sin capas de marcado ocultas ni sorpresas al inspeccionar el HTML.

Control unificado de estilos y CSS

En lugar de repartir los estilos entre controles visuales y cajas de CSS personalizado separadas, CrocoBuilder centraliza todo en un único panel. La función CSS Sync permite alternar entre controles visuales y código CSS en bruto editando siempre la misma fuente, de modo que no hay desincronización entre lo que ves y lo que se genera. A esto se suma un gestor de variables CSS para definir colores, tipografías y espaciados como propiedades reutilizables en todo el sitio, un gestor de clases que genera nombres de clase reales utilizables fuera del builder (incluido Gutenberg), y un sistema de breakpoints personalizables en lugar de puntos de corte fijos.

Contenido dinámico sin escribir PHP

El Query Builder permite crear consultas personalizadas de WordPress desde la interfaz, filtrando por tipo de contenido, taxonomía, metadatos o relaciones sin tocar código. El Loop Builder construye bucles a partir de cualquier consulta y permite editar visualmente la plantilla de cada elemento repetido. El Theme Builder, por su parte, da control sobre la estructura completa del sitio: cabecera, pie, entradas individuales, archivos y plantillas de producto. A estas herramientas se suman condiciones de visibilidad (por rol de usuario, dispositivo o datos) y condiciones de plantilla para asignar diseños distintos según el tipo de página.

Componentes reutilizables con acceso total al código

CrocoBuilder incorpora un creador de componentes en HTML, CSS y JS, editable manualmente o generado mediante prompts de inteligencia artificial, sin capas de abstracción que oculten el código resultante. Los componentes admiten propiedades configurables (texto, imágenes, colores, repetidores) y slots internos para anidar otros bloques sin romper su estructura. También pueden usarse como Web Components con props fuera del builder, incluido en Gutenberg, funcionando como piezas vivas y no como plantillas estáticas.

Integración con inteligencia artificial bajo supervisión

El asistente de IA puede ensamblar páginas a partir de elementos, componentes, clases y variables existentes siguiendo un prompt, y generar componentes personalizados que luego se pueden refinar manualmente sin perder compatibilidad con el builder. Los cambios generados por IA no se aplican directamente a la base de datos: pasan por un proceso de revisión que permite inspeccionar las diferencias antes de confirmarlos. CrocoBuilder también contempla conexión mediante MCP para que agentes de IA gestionen estructura, consultas, estilos y páginas, además de versionado con GitHub para llevar control de versiones real sobre el trabajo de frontend.

Para quién está pensado

• Desarrolladores WordPress que necesitan un editor visual sin perder acceso al código subyacente.
• Agencias que buscan estandarizar la entrega de proyectos mediante componentes y sistemas de estilos reutilizables.
• Equipos de producto que construyen sitios dinámicos con consultas complejas, plantillas condicionales y contenido repetible.
• Proyectos que ya usan otros plugins del ecosistema Jet y buscan un builder que se integre en ese flujo de trabajo.

Preguntas frecuentes

¿CrocoBuilder sustituye a Gutenberg?

No. Funciona junto a Gutenberg: CrocoBuilder se encarga del renderizado frontend de páginas específicas o plantillas globales a través de las APIs estándar de plantillas de WordPress, mientras el resto del sitio permanece intacto.

¿Los componentes generados por IA se pueden editar manualmente?

Sí. Cada componente es HTML, CSS y JS estándar; puedes editar el código directamente y esas modificaciones manuales no se sobrescriben en actualizaciones posteriores generadas por IA.

¿El estilo y el marcado generados se pueden exportar o migrar?

Sí. Al generar un DOM atómico y clases CSS reales, el marcado y los estilos funcionan fuera del builder y no quedan atados a un formato propietario.

¿La IA puede aplicar cambios directamente sin revisión?

No. Todos los cambios generados por IA pasan por un proceso de verificación previa que permite inspeccionar las diferencias antes de confirmarlos en el sitio.