From e1923b630d61568143abbd18552ba2ec37888df5 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Mon, 1 Dec 2025 16:43:12 -0600
Subject: [PATCH] refactor(theme-settings): remove CSS card, CSS now managed by
 CustomCSSManager
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove custom_css field from schema (v1.4.0 → v1.5.0)
- Remove buildCssGroup() from FormBuilder
- Remove renderCustomCSS() from Renderer
- Update layout: single JS card instead of 2-column layout
- Update descriptions to reference CustomCSSManager (TIPO 3)

CSS personalizado ahora se gestiona exclusivamente desde el
componente CustomCSSManager, eliminando duplicidad funcional.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Ui/ThemeSettingsFormBuilder.php           | 51 +++----------------
 .../Ui/ThemeSettingsRenderer.php              | 36 ++-----------
 Schemas/theme-settings.json                   | 13 ++---
 3 files changed, 13 insertions(+), 87 deletions(-)

diff --git a/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php b/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
index 61724e03..ebae7591 100644
--- a/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
+++ b/Admin/ThemeSettings/Infrastructure/Ui/ThemeSettingsFormBuilder.php
@@ -9,9 +9,10 @@ use ROITheme\Admin\Infrastructure\Ui\AdminDashboardRenderer;
  * FormBuilder para Theme Settings
  *
  * RESPONSABILIDAD: Generar formulario de configuraciones globales del tema
- * (codigo personalizado - CSS y JavaScript)
+ * (JavaScript personalizado)
  *
- * NOTA: Analytics y AdSense se gestionan desde el componente adsense-placement
+ * NOTA: CSS personalizado se gestiona desde CustomCSSManager (TIPO 3)
+ * Analytics y AdSense se gestionan desde el componente adsense-placement
  *
  * @package ROITheme\Admin\ThemeSettings\Infrastructure\Ui
  */
@@ -27,22 +28,11 @@ final class ThemeSettingsFormBuilder
 
         $html .= $this->buildHeader($componentId);
 
-        // Layout Group (nueva seccion)
+        // Layout Group
         $html .= $this->buildLayoutGroup($componentId);
 
-        $html .= '<div class="row g-3">';
-
-        // Columna izquierda - CSS
-        $html .= '<div class="col-lg-6">';
-        $html .= $this->buildCssGroup($componentId);
-        $html .= '</div>';
-
-        // Columna derecha - JavaScript
-        $html .= '<div class="col-lg-6">';
+        // JavaScript Personalizado (solo 1 card)
         $html .= $this->buildJsGroup($componentId);
-        $html .= '</div>';
-
-        $html .= '</div>';
 
         return $html;
     }
@@ -139,7 +129,7 @@ final class ThemeSettingsFormBuilder
         $html .= '                Configuraciones Globales del Tema';
         $html .= '            </h3>';
         $html .= '            <p class="mb-0 small" style="opacity: 0.85;">';
-        $html .= '                Codigo Personalizado (CSS y JavaScript)';
+        $html .= '                Layout y JavaScript Personalizado';
         $html .= '            </p>';
         $html .= '        </div>';
         $html .= '        <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="theme-settings">';
@@ -152,35 +142,6 @@ final class ThemeSettingsFormBuilder
         return $html;
     }
 
-    private function buildCssGroup(string $componentId): string
-    {
-        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
-        $html .= '    <div class="card-body">';
-        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
-        $html .= '            <i class="bi bi-filetype-css me-2" style="color: #FF8600;"></i>';
-        $html .= '            CSS Personalizado';
-        $html .= '        </h5>';
-
-        $customCss = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_css', '');
-        $html .= $this->buildTextareaCode(
-            'themeSettingsCustomCss',
-            'Estilos CSS',
-            $customCss,
-            'Se inyecta en wp_head. No incluir etiquetas &lt;style&gt;',
-            10
-        );
-
-        $html .= '        <div class="alert alert-info small mb-0 mt-2">';
-        $html .= '            <i class="bi bi-info-circle me-1"></i>';
-        $html .= '            El CSS se carga despues de los estilos del tema.';
-        $html .= '        </div>';
-
-        $html .= '    </div>';
-        $html .= '</div>';
-
-        return $html;
-    }
-
     private function buildJsGroup(string $componentId): string
     {
         $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
diff --git a/Public/ThemeSettings/Infrastructure/Ui/ThemeSettingsRenderer.php b/Public/ThemeSettings/Infrastructure/Ui/ThemeSettingsRenderer.php
index e12528ba..91e78d86 100644
--- a/Public/ThemeSettings/Infrastructure/Ui/ThemeSettingsRenderer.php
+++ b/Public/ThemeSettings/Infrastructure/Ui/ThemeSettingsRenderer.php
@@ -13,11 +13,11 @@ use ROITheme\Shared\Domain\Entities\Component;
  * A diferencia de otros componentes, no renderiza HTML visual
  * sino que genera codigo para inyectar en wp_head y wp_footer.
  *
- * NOTA: Este es un componente especial que solo maneja codigo personalizado.
+ * NOTA: CSS personalizado se gestiona desde CustomCSSManager (TIPO 3).
  * Analytics y AdSense se gestionan desde el componente adsense-placement.
  *
  * Responsabilidades:
- * - Generar CSS personalizado
+ * - Generar Layout CSS (container width)
  * - Generar JavaScript para header
  * - Generar JavaScript para footer
  *
@@ -51,9 +51,10 @@ final class ThemeSettingsRenderer implements RendererInterface
      *
      * Incluye:
      * - Layout CSS (container width)
-     * - Custom CSS (si configurado)
      * - Custom JS Header (si configurado)
      *
+     * NOTA: CSS personalizado se gestiona desde CustomCSSManager (TIPO 3)
+     *
      * @param array $data Datos del componente desde BD
      * @return string Contenido para wp_head
      */
@@ -67,12 +68,6 @@ final class ThemeSettingsRenderer implements RendererInterface
             $output .= $layoutOutput . "\n";
         }
 
-        // Custom CSS
-        $cssOutput = $this->renderCustomCSS($data);
-        if (!empty($cssOutput)) {
-            $output .= $cssOutput . "\n";
-        }
-
         // Custom JS Header
         $jsHeaderOutput = $this->renderCustomJSHeader($data);
         if (!empty($jsHeaderOutput)) {
@@ -149,29 +144,6 @@ final class ThemeSettingsRenderer implements RendererInterface
         return $this->renderCustomJSFooter($data);
     }
 
-    /**
-     * Genera el CSS personalizado
-     *
-     * @param array $data Datos del componente
-     * @return string Bloque style o vacio si no hay CSS
-     */
-    private function renderCustomCSS(array $data): string
-    {
-        $css = trim($data['custom_code']['custom_css'] ?? '');
-
-        if (empty($css)) {
-            return '';
-        }
-
-        return sprintf(
-            '<!-- Custom CSS (ROI Theme) -->
-<style id="roi-theme-custom-css">
-%s
-</style>',
-            $css // No escapar CSS - usuario avanzado responsable
-        );
-    }
-
     /**
      * Genera el JavaScript personalizado para header
      *
diff --git a/Schemas/theme-settings.json b/Schemas/theme-settings.json
index b89daa28..fe915f21 100644
--- a/Schemas/theme-settings.json
+++ b/Schemas/theme-settings.json
@@ -1,7 +1,7 @@
 {
   "component_name": "theme-settings",
-  "version": "1.4.0",
-  "description": "Configuraciones globales del tema: layout y codigo personalizado",
+  "version": "1.5.0",
+  "description": "Configuraciones globales del tema: layout y JavaScript personalizado",
   "groups": {
     "layout": {
       "label": "Layout y Contenedor",
@@ -37,16 +37,9 @@
       }
     },
     "custom_code": {
-      "label": "Codigo Personalizado",
+      "label": "JavaScript Personalizado",
       "priority": 10,
       "fields": {
-        "custom_css": {
-          "type": "textarea",
-          "label": "CSS Personalizado",
-          "default": "",
-          "editable": true,
-          "description": "CSS personalizado que se inyecta en wp_head. No incluir etiquetas <style>"
-        },
         "custom_js_header": {
           "type": "textarea",
           "label": "JavaScript en Header",