git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cls): Server-side device visibility + aspect-ratio for featured-image

Browse Source 
- functions-addon.php: Validacion centralizada con wp_is_mobile()
  Componentes con show_on_mobile=false NO se renderizan en mobile
  Previene CLS de elementos ocultos con CSS

- FeaturedImageRenderer: Agrega aspect-ratio 16/9 para reservar espacio
  Imagen usa object-fit:cover con position:absolute
  Metodo generateCSS() ahora publico para CriticalCSSService

- CriticalCSSService: Agrega featured-image a CRITICAL_RENDERERS
  CSS se inyecta en <head> antes de que cargue contenido

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-01 10:43:22 -06:00
parent ee28baafd8
commit c0172467b3
3 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
functions-addon.php
View File

@@ -194,7 +194,46 @@ function roi_render_component(string $componentName): string {
// Crear Value Objects requeridos
$name = new \ROITheme\Shared\Domain\ValueObjects\ComponentName($componentName);
$configuration = new \ROITheme\Shared\Domain\ValueObjects\ComponentConfiguration($data);
$visibility = \ROITheme\Shared\Domain\ValueObjects\ComponentVisibility::allDevices(); // Default: visible en todas partes
// =====================================================================
// VALIDACIÓN DE VISIBILIDAD POR DISPOSITIVO (Previene CLS)
// =====================================================================
// Si el componente no debe mostrarse en el dispositivo actual,
// NO renderizar nada. Esto evita CLS causado por elementos que
// se renderizan y luego se ocultan con CSS.
// =====================================================================
// Leer configuración de visibilidad desde BD
$isEnabled = ($data['visibility']['is_enabled'] ?? true) === true;
$showOnDesktop = ($data['visibility']['show_on_desktop'] ?? true) === true;
$showOnMobile = ($data['visibility']['show_on_mobile'] ?? true) === true;
// Si no está habilitado, no renderizar
if (!$isEnabled) {
return '';
}
// Detectar dispositivo actual y validar visibilidad
// wp_is_mobile() detecta móviles y tablets via User-Agent
$isMobileDevice = wp_is_mobile();
if ($isMobileDevice && !$showOnMobile) {
// Dispositivo móvil pero show_on_mobile = false → NO renderizar
return '';
}
if (!$isMobileDevice && !$showOnDesktop) {
// Dispositivo desktop pero show_on_desktop = false → NO renderizar
return '';
}
// Crear ComponentVisibility con datos reales de BD
$visibility = new \ROITheme\Shared\Domain\ValueObjects\ComponentVisibility(
enabled: $isEnabled,
visibleDesktop: $showOnDesktop,
visibleTablet: $showOnMobile, // tablet tratado como mobile
visibleMobile: $showOnMobile
);
// Crear instancia del componente
$component = new \ROITheme\Shared\Domain\Entities\Component(