buildHeader($componentId); // Layout Group $html .= $this->buildLayoutGroup($componentId); // JavaScript Personalizado (solo 1 card) $html .= $this->buildJsGroup($componentId); return $html; } private function buildLayoutGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Layout y Contenedor'; $html .= '
'; $html .= '
'; // Container Max Width $html .= '
'; $containerWidth = $this->renderer->getFieldValue($componentId, 'layout', 'container_max_width', '1320'); $containerWidthStr = is_string($containerWidth) ? $containerWidth : '1320'; $html .= $this->buildSelect( 'themeSettingsContainerMaxWidth', 'Ancho maximo del contenedor', $containerWidthStr, [ '1140' => '1140px (Bootstrap md)', '1200' => '1200px (Compacto)', '1320' => '1320px (Bootstrap xxl - Default)', '1400' => '1400px (Amplio)', '100%' => '100% (Fluido)' ], 'Valores menores dejan mas espacio para Rail Ads laterales' ); $html .= '
'; // Content Column Width $html .= '
'; $columnWidth = $this->renderer->getFieldValue($componentId, 'layout', 'content_column_width', 'col-lg-9'); $columnWidthStr = is_string($columnWidth) ? $columnWidth : 'col-lg-9'; $html .= $this->buildSelect( 'themeSettingsContentColumnWidth', 'Ancho columna de contenido', $columnWidthStr, [ 'col-lg-8' => '8 columnas (66.67%)', 'col-lg-9' => '9 columnas (75% - Default)', 'col-lg-10' => '10 columnas (83.33%)', 'col-lg-12' => '12 columnas (100% sin sidebar)' ], 'Proporcion de la columna principal vs sidebar' ); $html .= '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Reduce el ancho del contenedor para dar mas espacio a los Rail Ads en pantallas grandes.'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSelect(string $id, string $label, string $value, array $options, string $helpText = ''): string { $html = '
'; $html .= ' '; $html .= ' '; if (!empty($helpText)) { $html .= '
' . esc_html($helpText) . '
'; } $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
renderer->getFieldValue($componentId, 'custom_code', 'custom_js_header', ''); $html .= $this->buildTextareaCode( 'themeSettingsCustomJsHeader', 'JavaScript en Header', $customJsHeader, 'Se inyecta en wp_head. No incluir etiquetas <script>', 5 ); $customJsFooter = $this->renderer->getFieldValue($componentId, 'custom_code', 'custom_js_footer', ''); $html .= $this->buildTextareaCode( 'themeSettingsCustomJsFooter', 'JavaScript en Footer', $customJsFooter, 'Se inyecta en wp_footer. No incluir etiquetas <script>', 5 ); $html .= '
'; $html .= ' '; $html .= ' Advertencia: El codigo JS puede afectar el rendimiento y seguridad del sitio.'; $html .= '
'; $html .= '
'; $html .= ''; return $html; } private function buildTextareaCode(string $id, string $label, mixed $value, string $helpText = '', int $rows = 4): string { $value = $this->normalizeStringValue($value); $html = '
'; $html .= ' '; $html .= ' '; if (!empty($helpText)) { $html .= '
' . $helpText . '
'; } $html .= '
'; return $html; } /** * Normaliza un valor a string para inputs de formulario */ private function normalizeStringValue(mixed $value): string { if ($value === false) { return '0'; } if ($value === true) { return '1'; } return (string) $value; } }