buildHeader($componentId); $html .= '
'; $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= '
'; $html .= '
'; $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '
'; $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'posts'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= ''; return $html; } private function buildContentGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Contenido'; $html .= '
'; $imageSize = $this->renderer->getFieldValue($componentId, 'content', 'image_size', 'roi-featured-large'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $lazyLoading = $this->renderer->getFieldValue($componentId, 'content', 'lazy_loading', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= ' Mejora rendimiento cargando imagen cuando es visible'; $html .= '
'; $linkToMedia = $this->renderer->getFieldValue($componentId, 'content', 'link_to_media', false); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= ' Abre la imagen en tamano completo al hacer clic'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Espaciado'; $html .= '
'; $html .= '
'; $marginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_top', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_bottom', '2rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildEffectsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '
'; $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '12px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 8px 24px rgba(0, 0, 0, 0.1)'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $hoverEffect = $this->renderer->getFieldValue($componentId, 'visual_effects', 'hover_effect', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= ' Aplica efecto de escala sutil al pasar el mouse'; $html .= '
'; $html .= '
'; $hoverScale = $this->renderer->getFieldValue($componentId, 'visual_effects', 'hover_scale', '1.02'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } }