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 .= '
'; // ============================================= // Checkboxes de visibilidad por tipo de página // Grupo especial: _page_visibility // ============================================= $html .= '
'; $html .= '

'; $html .= ' '; $html .= ' Mostrar en tipos de pagina'; $html .= '

'; $showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', false); $showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true); $showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true); $showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false); $showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('featuredImageVisibilityHome', 'Home', 'bi-house', $showOnHome); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('featuredImageVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('featuredImageVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('featuredImageVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('featuredImageVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch); $html .= '
'; $html .= '
'; $html .= '
'; $html .= ''; return $html; } private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $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; } }