Script to migrate data from wp_options (roi_theme_settings)
to normalized table wp_roi_theme_component_settings
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Schemas/theme-settings.json with analytics and custom_code groups
- Add ThemeSettingsFormBuilder for Admin Panel UI
- Add ThemeSettingsFieldMapper for AJAX field mapping
- Add ThemeSettingsRenderer for injecting GA/CSS/JS
- Add ThemeSettingsInjector for wp_head/wp_footer hooks
- Register component in AdminDashboardRenderer::getComponents()
- Register FieldMapper in FieldMapperProvider
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This feature was not part of the current development phase.
Deleted files:
- Inc/cta-ab-testing.php (A/B testing implementation)
- Inc/customizer-cta.php (WordPress Customizer settings + Google Analytics)
- TemplateParts/content-cta.php (CTA template part)
- Assets/Js/cta-tracking.js (GA4 tracking script)
Modified files:
- functions.php: Remove require_once for deleted files
- functions-addon.php: Remove CTA loading references
- Inc/enqueue-scripts.php: Remove roi_enqueue_cta_assets() function
Note: CTA components in Admin Panel (CtaBoxSidebar, CtaLetsTalk, CtaPost)
are NOT affected - they are part of the Clean Architecture system.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Namespace corregido de `DI` (mayúsculas) a `Di` (PascalCase)
- Consistencia con PSR-4 y convenciones del proyecto
- Detectado durante revisión del plan de refactorización
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Cambios incluidos:
- Actualización de copy/textos en 7 schemas JSON
- Mejoras en AdminAjaxHandler con mapeos adicionales
- Refactorización de FormBuilders y Renderers
- Correcciones en dashboard admin JS
- Nuevo ContactFormRenderer funcional
NOTA: Este commit sirve como respaldo antes de corregir
inconsistencias de case en namespaces (API→Api, WordPress→Wordpress)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Verificación de entorno XAMPP (PHP 8.0.30, Composer 2.9.1, WP-CLI 2.12.0)
- Configuración de Composer con PSR-4 para 24 namespaces
- Configuración de PHPUnit con 140 tests preparados
- Configuración de PHPCS con WordPress Coding Standards
- Scripts de backup y rollback con mejoras de seguridad
- Estructura de contextos (admin/, public/, shared/)
- Schemas JSON para 11 componentes del sistema
- Código fuente inicial con arquitectura limpia en src/
- Documentación de procedimientos de emergencia
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Configuración de Composer con PSR-4 en _testing-suite/
- Configuración de PHPUnit en _testing-suite/phpunit.xml
- Configuración de PHPCS en _testing-suite/phpcs.xml
- WordPress Test Suite integrado en bootstrap-integration.php
- Scripts de backup automatizado (backup-database.php, backup-files.bat)
- Procedimientos de rollback documentados (RESTORE-PROCEDURE.md)
- Estrategia de Git branching documentada (GIT-BRANCHING-STRATEGY.md)
- .gitignore actualizado para excluir _testing-suite/ y _planeacion/
- Limpieza de estructura anterior de Clean Architecture
- Documentación completa en _planeacion/roi-theme/_MIGRACION-CLEAN-ARCHITECTURE/Fase-00/
Archivos de configuración movidos a _testing-suite/:
- composer.json (PSR-4 autoloading, dev dependencies)
- phpunit.xml (3 suites: Unit, Integration, E2E)
- phpcs.xml (WordPress Coding Standards)
- bootstrap-unit.php y bootstrap-integration.php
Sistema de backup implementado con 4 mejoras críticas:
- Password protegido con --defaults-file
- Verificación de espacio en disco
- Lock files para prevenir ejecuciones concurrentes
- Detección automática de rutas
Procedimientos de rollback documentados:
- Rollback de base de datos (5-10 min)
- Rollback de archivos (10-15 min)
- Rollback de Git (5 min)
- Rollback completo (20-30 min)
Preparación del entorno completa. Listo para comenzar Fase-1.
COMPLETADO: Fase 2 de la migración a Clean Architecture + POO
## DatabaseMigrator
- ✓ Clase DatabaseMigrator con estrategia completa de migración
- ✓ Creación de tablas v2 con nueva estructura (config_group)
- ✓ Migración de datos con transformación automática
- ✓ Validación de integridad de datos migrados
- ✓ Swap seguro de tablas (legacy → _backup, v2 → producción)
- ✓ Rollback automático en caso de error
- ✓ Logging detallado de todas las operaciones
## Transformaciones de BD
- ✓ Nueva columna config_group (visibility, content, styles, general)
- ✓ Renombrado: version → schema_version
- ✓ UNIQUE KEY actualizada: (component_name, config_group, config_key)
- ✓ Nuevos índices: idx_group, idx_schema_version
- ✓ Timestamps con DEFAULT CURRENT_TIMESTAMP
## MigrationCommand (WP-CLI)
- ✓ Comando: wp roi-theme migrate
- ✓ Opción --dry-run para simulación segura
- ✓ Comando: wp roi-theme cleanup-backup
- ✓ Output formateado y detallado
- ✓ Confirmación para operaciones destructivas
- ✓ Estadísticas de migración completas
## Tests de Integración
- ✓ 6 tests de integración implementados
- ✓ Test: Creación de tablas v2
- ✓ Test: Preservación de cantidad de registros
- ✓ Test: Inferencia correcta de grupos
- ✓ Test: Creación de backup
- ✓ Test: Rollback en error
- ✓ Test: Cleanup de backup
## Heurística de Inferencia de Grupos
- enabled, visible_* → visibility
- message_*, cta_*, title_* → content
- *_color, *_height, *_width, *_size, *_font → styles
- Resto → general
## Integración
- ✓ Comando WP-CLI registrado en functions.php
- ✓ Autoloader actualizado
- ✓ Strict types en todos los archivos
- ✓ PHPDoc completo
## Validación
- ✓ Script validate-phase-2.php (26/26 checks pasados)
- ✓ Sintaxis PHP válida en todos los archivos
- ✓ 100% de validaciones exitosas
## Seguridad
- ✓ Backup automático de tablas legacy (_backup)
- ✓ Rollback automático si falla validación
- ✓ Validación de integridad antes de swap
- ✓ Logging completo para auditoría
IMPORTANTE: La migración está lista pero NO ejecutada. Ejecutar con:
1. wp db export backup-antes-migracion.sql
2. wp roi-theme migrate --dry-run
3. wp roi-theme migrate
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Configuración de Composer con PSR-4
- Configuración de PHPUnit
- Configuración de PHPCS
- Scripts de backup y rollback
- Estructura de carpetas inicial
- Documentación de procedimientos
- Agregar remove_submenu_page() para eliminar entrada duplicada
- WordPress crea automáticamente primer submenú con nombre del padre
- Ahora solo aparece submenú 'Theme Options'
- Cambiar menu slug principal a 'apus-theme-menu' (contenedor)
- Menú principal sin callback (solo contenedor del submenú)
- Submenú 'Theme Options' con slug 'apus-theme-settings' (página real)
- Actualizar hook en enqueue_assets a 'apus-theme_page_apus-theme-settings'
- Limpiar logs de debug
Ahora el menú 'Apus Theme' muestra correctamente el submenú desplegable con 'Theme Options'
- Comentar carga de admin/theme-options/theme-options.php
- Comentar carga de admin/theme-options/options-api.php
- El nuevo Admin Panel (admin/init.php) ya se carga en línea 272
- Esto elimina conflicto entre sistema viejo y nuevo
- Comentar add_theme_page() en inc/admin/theme-options.php
- Comentar add_theme_page() en admin/theme-options/theme-options.php
- Estos archivos viejos estaban registrando 'Theme Options' en menú Apariencia
- Ahora solo se usa el nuevo registro en admin/includes/class-admin-menu.php
- Elimina conflicto que mostraba el menú en dos lugares
- Cambiar de 'appearance_page_apus-theme-settings' a 'toplevel_page_apus-theme-settings'
- Necesario para que assets se carguen correctamente en menú de nivel superior
- Sin esto, el CSS/JS no se cargaba en la página de configuración
- Diagrama de arquitectura final implementada
- Estructura de tablas (defaults y components)
- Flujo de datos completo (escritura/lectura)
- Decisión arquitectónica: Opción A (wp_options para personalizaciones)
- Responsabilidades de cada clase
- Estado actual y próximos pasos
- Checklist de verificación
Completa documentación requerida por FASE 6 del plan
- Cambiar de add_theme_page() a add_menu_page()
- Posición 61 (después de Appearance, antes de Plugins)
- Ícono dashicons-admin-generic
- Menú ahora aparece al mismo nivel que Dashboard, Settings, etc.
- NO dentro del menú Apariencia
Completa PASO 2.0 del PLAN-PREPARACION-TEMA-BD.md
- Agregar constante TABLE_DEFAULTS para tabla de valores por defecto
- Modificar get_table_name() para aceptar parámetro table_type
- Actualizar create_tables() para crear ambas tablas con estructura idéntica
- Modificar todos los métodos (get_config, save_config, delete_config, list_components) para aceptar table_type
- Actualizar Settings Manager get_defaults() para leer desde tabla defaults usando DB Manager
- Mantener compatibilidad hacia atrás con valor por defecto 'components'
Arquitectura final:
- wp_apus_theme_components_defaults = Valores por defecto del tema (escritura algoritmo)
- wp_apus_theme_components = Personalizaciones del usuario (escritura admin panel)
- Una sola clase (APUS_DB_Manager) maneja ambas tablas con misma estructura
- Cambiar posición de 59 a 61
- Aclarar que debe estar AL MISMO NIVEL que Settings, Dashboard, etc.
- NO debe estar dentro de Settings ni ningún otro menú
- Agregar tabla de posiciones de menús WordPress
- Posición 61 = entre Appearance (60) y Plugins (65)
- Plan de 6 fases para preparar tema antes de modificar algoritmo
- FASE 1: Análisis de arquitectura actual
- FASE 2: Corregir ubicación del menú admin (nuevo paso agregado)
* Cambiar add_theme_page() a add_menu_page()
* Mover 'Apus Theme Options' a menú propio en sidebar
- FASE 3: Crear Defaults Manager
- FASE 4: Decisión sobre personalizaciones
- FASE 5: Testing y validación
- FASE 6: Documentación
Plan ejecutable paso a paso antes de tocar algoritmo.
- Agregado Top Bar hardcodeado como los demás componentes (navbar, let's talk)
- HTML copiado del template original (líneas 57-80)
- Mantiene el patrón del tema: componentes estáticos en templates
- Top Bar ahora visible nuevamente en el sitio
ERROR CRÍTICO corregido:
- El sitio estaba caído porque init.php intentaba cargar sanitizers eliminados
- Eliminadas líneas 30-36 que cargaban class-topbar-sanitizer.php y otros
- Sitio ahora funcional nuevamente
Ref: admin/init.php línea 33
- Tabla para almacenar valores por defecto de componentes
- Estructura con 8 columnas: id, component_name, config_key, config_value,
data_type, version, created_at, updated_at
- Índices optimizados para búsquedas rápidas
- UNIQUE constraint en (component_name, config_key) para evitar duplicados
- Tabla ejecutada y verificada en base de datos preciosunitarios_wp
Esta tabla será la ÚNICA fuente de verdad para defaults de componentes.
El algoritmo consultará esta tabla en lugar de tener defaults hardcodeados.
Ref: PROBLEMA-DEFAULTS-HARDCODEADOS-ALGORITMO.md (Líneas 418-437)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Eliminados todos los componentes incorrectos y defaults duplicados
preparando el sistema para la implementación correcta con tabla de BD.
ARCHIVOS ELIMINADOS (11 archivos):
- admin/assets/js/component-navbar.js
- admin/assets/css/component-navbar.css
- admin/components/component-top-bar.php
- admin/components/component-navbar.php
- admin/components/component-hero-section.php
- admin/components/component-lets-talk-button.php
- admin/includes/sanitizers/class-topbar-sanitizer.php
- admin/includes/sanitizers/class-navbar-sanitizer.php
- admin/includes/sanitizers/class-herosection-sanitizer.php
- admin/includes/sanitizers/class-letstalkbutton-sanitizer.php
- template-parts/navbar-configurable.php
ARCHIVOS MODIFICADOS (6 archivos):
- admin/includes/class-admin-menu.php: Eliminados enqueues de componentes
- admin/includes/class-settings-manager.php: Limpiados get_defaults() y sanitize_settings()
- admin/includes/class-validator.php: Eliminado validate_top_bar()
- admin/pages/main.php: Reducido de 521 a 37 líneas (93%)
- admin/assets/js/admin-app.js: Reducido de 431 a 219 líneas (49%)
- header.php: Eliminado código de Top Bar (92 líneas)
BASE DE DATOS:
- Eliminada opción 'apus_theme_settings' de wp_options
RESUMEN:
- 11 archivos eliminados
- 6 archivos limpiados
- 1 opción de BD eliminada
- Todos los defaults hardcodeados eliminados
- Sistema preparado para FASE 2 (crear tabla de defaults)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added wp_enqueue_style for 'apus-component-navbar-css'
- Points to admin/assets/css/component-navbar.css
- Dependency: 'apus-admin-panel-css'
- Version: APUS_ADMIN_PANEL_VERSION
This was the critical missing piece causing navbar cards to display
with incorrect Bootstrap default styles instead of custom component styles.
Without this enqueue:
- Cards had padding: 11.2px 32px 16px (Bootstrap default)
- Cards had margin: 20px 0px 16px (Bootstrap default)
- card-body had padding: 24px (Bootstrap default)
With this enqueue applied:
- Cards have padding: 0px (custom)
- Cards have margin: 0px 0px 16px (custom)
- card-body has padding: 16px (custom)
- All styles match Top Bar exactly ✅Resolves#179 (Phase 3: Enable CSS loading)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added initColorPickers() method to handle color picker interactions
- Dynamically updates hex value displays when user changes colors
- Covers all 7 color pickers in navbar configuration
- Event listeners on 'input' event for real-time updates
- Initializes hex displays on component load with uppercase format
Enhances UX by showing live color values to user.
Resolves#179 (Phase 2: JavaScript enhancements)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created component-navbar.css based on component-top-bar.css structure
- Applied #navbarTab selector to match Top Bar design patterns
- Fixed card styles: padding: 0, margin: 0 0 16px, border-radius: 6px
- Fixed card-body padding: 1rem (16px)
- Fixed box-shadow to match Top Bar: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px
- Includes responsive rules and form controls styling
Resolves#179 (Phase 1: Create CSS file)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
JavaScript module that manages navbar component data collection and rendering.
Exposes window.NavbarComponent object with three main methods.
Methods:
- init(): Initializes component (event listeners, etc.)
- collect(): Collects all 38 form fields into structured object
- render(config): Populates form fields from configuration object
Data Structure:
- Flat fields: enabled, position, responsive_breakpoint, etc.
- Nested objects: lets_talk_button, dropdown, custom_styles
Field Coverage:
- Boolean switches: 9 fields
- Color pickers: 7 fields
- Select dropdowns: 7 fields
- Number inputs: 9 fields
- Text inputs: 2 fields
Total: 38 configurable fields
Integration:
- Called by admin-app.js for save/load operations
- Works with Settings Manager for backend persistence
- Supports real-time form validation
File: admin-panel/admin/assets/js/component-navbar.js (160 lines)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix critical bug where navbar configuration was not being saved.
The component-navbar.js file existed but was not being loaded by WordPress,
causing window.NavbarComponent to be undefined and preventing data collection.
Changes:
- Added wp_enqueue_script for component-navbar.js (lines 126-133)
- Updated admin-app.js dependencies to include navbar component (line 139)
Impact: Navbar settings now save correctly to database
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregado cierre de row después del card 1
- Agregado apertura de row para cards 2-4
- Corregida indentación de headers dentro de card-body
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Eliminado </div> duplicado en toggle Desktop
- Agregado cierre correcto para col-md-6 del primer card
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Row 1: Activación + Contenido (col-md-6 cada uno)
- Row 2: Estilos + Vista Previa (col-md-6 cada uno)
- Añadido h-100 para altura uniforme entre cards
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Eliminar row g-4 y col-md-4 que causaban layout horizontal
- Cambiar a divs con mb-4 para espaciado vertical consistente
- Último elemento con mb-0 para evitar espacio extra
- Los 3 toggles ahora se apilan verticalmente como cards
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Funcionalidades JavaScript agregadas:
- Actualización de progress bar junto con contador de caracteres
- Progress bar cambia de color según proximidad al límite:
* Naranja: 0-200 caracteres
* Amarillo: 201-230 caracteres
* Rojo: 231-250 caracteres
- Vista previa en tiempo real del Top Bar (setupLivePreview)
- Actualización automática al modificar cualquier campo:
* Icono y visibilidad
* Texto destacado
* Mensaje principal
* Enlace y visibilidad
* Colores (fondo, texto, destacado)
* Tamaño de fuente
- Renderizado HTML dinámico en tiempo real
- Listeners optimizados con event delegation
La vista previa refleja exactamente cómo se verá en el frontend
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mejoras CSS implementadas:
- Variables CSS con paleta APUs completa (Navy + Orange + Neutrales)
- Clases de utilidad para colores de marca
- Tab header con gradiente sutil y borde lateral naranja
- Section titles con iconos en gradiente
- Cards con hover effects y transiciones suaves
- Toggle containers con fondos y bordes
- Form switches grandes (3rem) con colores personalizados
- Input groups sin bordes intermedios
- Color pickers con hover effects y transform
- Alert personalizado con gradiente naranja
- Animación fadeInUp para vista previa
- Botones de marca Navy y Orange con hover effects
- Progress bar con transiciones suaves
- Badges y typography utilities
- Responsive design para móviles
Todo con transiciones fluidas y sistema de spacing consistente
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mejoras implementadas:
- Header del tab con gradiente y botón de restaurar defaults
- Cards con sombras y bordes sutiles para las secciones
- Section titles con iconos destacados en gradiente naranja
- Toggle containers con fondo gris claro y bordes
- Input groups sin bordes intermedios (merge)
- Color pickers mejorados con preview de código hex
- Progress bar visual para contador de caracteres del mensaje
- Alert personalizado con tip de diseño
- Vista previa interactiva del Top Bar en tiempo real
- Badges para indicadores (Opcional, Requerido)
- Iconografía consistente con Bootstrap Icons
- Espaciado mejorado con sistema g-4
Diseño coherente con paleta APUs (Navy + Orange + Neutrales)
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregar require_once para admin-panel/init.php
- Inicializar módulo del Admin Panel (Phase 1-2: Base Structure)
- Permitir acceso a configuraciones de componentes del tema
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implementar setupCharacterCounter() en AdminPanel
- Agregar listener de evento 'input' para actualizar contador en tiempo real
- Cambiar color del contador según proximidad al límite (230: danger, 200: warning)
- Trigger automático del contador al cargar/renderizar configuración
- Integrar llamada a setupCharacterCounter() en bindEvents()
Basado en: 07-IMPLEMENTACION-ADMIN-JS.md
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Actualizar main.php con diseño completo del Tab Top Bar
- Agregar switches en lugar de checkboxes básicos
- Implementar layout responsive con grid Bootstrap
- Agregar textarea con contador de caracteres para mensaje
- Implementar color pickers para estilos personalizados
- Mejorar accesibilidad con labels y roles ARIA
- Agregar vista previa informativa
Basado en: 05-IMPLEMENTACION-ADMIN-INTERFAZ-TOP-BAR.md
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Dos fixes críticos para el admin panel del tema:
1. **Fix error de nonce en AJAX**
- Cambiar de wp_verify_nonce() a check_ajax_referer()
- check_ajax_referer() es el método recomendado por WordPress para AJAX
- Aplicado en ajax_get_settings() y ajax_save_settings()
- El nonce ahora se valida correctamente
2. **Fix validación de URLs relativas**
- Aceptar URLs relativas que empiezan con / (ej: /catalogo)
- filter_var() con FILTER_VALIDATE_URL rechazaba URLs relativas
- Agregada validación adicional con regex para paths relativos
- Mantiene validación para URLs completas
Archivos modificados:
- admin-panel/includes/class-settings-manager.php
- admin-panel/includes/class-validator.php
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
