fix(CLS): move APU table row classes from JS to PHP server-side
PROBLEM: - apu-tables-auto-class.js was adding CSS classes to table rows after DOMContentLoaded - This DOM manipulation caused CLS of 0.692 in Lab Data (PageSpeed Insights) - body.wp-singular was the main culprit with 0.692 CLS contribution SOLUTION: - Added roi_add_apu_row_classes() function in Inc/apu-tables.php - This applies the same logic server-side during the_content filter - Classes (section-header, subtotal-row, total-row) are now in HTML from first render - Disabled the JS script in Inc/enqueue-scripts.php This should significantly reduce Lab Data CLS (target: < 0.1) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -18,6 +18,10 @@ if (!defined('ABSPATH')) {
|
||||
* Detecta tablas con el atributo data-apu y las envuelve
|
||||
* con la clase .analisis para aplicar estilos específicos.
|
||||
*
|
||||
* TAMBIÉN agrega clases a filas especiales (section-header, subtotal-row, total-row)
|
||||
* del lado del servidor para PREVENIR CLS. Anteriormente esto se hacía con JS
|
||||
* en apu-tables-auto-class.js, lo cual causaba CLS de 0.692 en Lab Data.
|
||||
*
|
||||
* @param string $content El contenido del post
|
||||
* @return string El contenido procesado
|
||||
*/
|
||||
@@ -43,10 +47,116 @@ function roi_process_apu_tables($content) {
|
||||
return '<div class="analisis">' . $table . '</div>';
|
||||
}, $content);
|
||||
|
||||
// Procesar TODAS las tablas APU (dentro de .analisis o .desglose) para agregar clases a filas
|
||||
// Esto reemplaza la lógica de apu-tables-auto-class.js para prevenir CLS
|
||||
$content = roi_add_apu_row_classes($content);
|
||||
|
||||
return $content;
|
||||
}
|
||||
add_filter('the_content', 'roi_process_apu_tables', 20);
|
||||
|
||||
/**
|
||||
* Agrega clases CSS a filas especiales de tablas APU del lado del servidor
|
||||
*
|
||||
* IMPORTANTE: Esta función reemplaza apu-tables-auto-class.js para PREVENIR CLS.
|
||||
* La manipulación del DOM con JS después de DOMContentLoaded causa Layout Shift.
|
||||
*
|
||||
* Detecta y clasifica:
|
||||
* - section-header: Material, Mano de Obra, Herramienta, Equipo
|
||||
* - subtotal-row: Filas que empiezan con "Suma de" o "Subtotal"
|
||||
* - total-row: Costo Directo, Total
|
||||
*
|
||||
* @param string $content HTML del contenido
|
||||
* @return string HTML con clases agregadas a filas
|
||||
*/
|
||||
function roi_add_apu_row_classes($content) {
|
||||
// Solo procesar si hay tablas APU
|
||||
if (strpos($content, 'class="analisis"') === false && strpos($content, 'class="desglose"') === false) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
// Patrones para detectar tipos de fila (basado en contenido de segunda celda)
|
||||
$section_headers = [
|
||||
'Material',
|
||||
'Mano de Obra',
|
||||
'Herramienta',
|
||||
'Equipo',
|
||||
'MATERIAL',
|
||||
'MANO DE OBRA',
|
||||
'HERRAMIENTA',
|
||||
'EQUIPO',
|
||||
];
|
||||
|
||||
$total_patterns = [
|
||||
'Costo Directo',
|
||||
'COSTO DIRECTO',
|
||||
'Costo directo',
|
||||
'Total',
|
||||
'TOTAL',
|
||||
];
|
||||
|
||||
// Procesar filas <tr> dentro de <tbody>
|
||||
// Patrón: capturar <tr> con sus atributos y contenido
|
||||
$content = preg_replace_callback(
|
||||
'/<tr([^>]*)>(.*?)<\/tr>/is',
|
||||
function($matches) use ($section_headers, $total_patterns) {
|
||||
$tr_attrs = $matches[1];
|
||||
$tr_content = $matches[2];
|
||||
|
||||
// Si ya tiene clase especial, no modificar
|
||||
if (preg_match('/class\s*=\s*["\'][^"\']*(?:section-header|subtotal-row|total-row)/', $tr_attrs)) {
|
||||
return $matches[0];
|
||||
}
|
||||
|
||||
// Extraer texto de la segunda celda
|
||||
if (!preg_match('/<td[^>]*>.*?<\/td>\s*<td[^>]*>(.*?)<\/td>/is', $tr_content, $cell_match)) {
|
||||
return $matches[0]; // No hay segunda celda
|
||||
}
|
||||
|
||||
$cell_text = trim(strip_tags($cell_match[1]));
|
||||
|
||||
// Determinar clase a agregar
|
||||
$class_to_add = '';
|
||||
|
||||
// Verificar section-header
|
||||
if (in_array($cell_text, $section_headers, true)) {
|
||||
$class_to_add = 'section-header';
|
||||
}
|
||||
// Verificar subtotal-row
|
||||
elseif (stripos($cell_text, 'suma de ') === 0 || stripos($cell_text, 'subtotal ') === 0) {
|
||||
$class_to_add = 'subtotal-row';
|
||||
}
|
||||
// Verificar total-row
|
||||
elseif (in_array($cell_text, $total_patterns, true)) {
|
||||
$class_to_add = 'total-row';
|
||||
}
|
||||
|
||||
// Si no hay clase que agregar, retornar sin modificar
|
||||
if (empty($class_to_add)) {
|
||||
return $matches[0];
|
||||
}
|
||||
|
||||
// Agregar clase al <tr>
|
||||
if (preg_match('/class\s*=\s*["\']([^"\']*)["\']/', $tr_attrs)) {
|
||||
// Ya tiene atributo class, agregar a las clases existentes
|
||||
$tr_attrs = preg_replace(
|
||||
'/class\s*=\s*["\']([^"\']*)["\']/',
|
||||
'class="$1 ' . $class_to_add . '"',
|
||||
$tr_attrs
|
||||
);
|
||||
} else {
|
||||
// No tiene class, agregar el atributo
|
||||
$tr_attrs = ' class="' . $class_to_add . '"' . $tr_attrs;
|
||||
}
|
||||
|
||||
return '<tr' . $tr_attrs . '>' . $tr_content . '</tr>';
|
||||
},
|
||||
$content
|
||||
);
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shortcode: [apu_table]
|
||||
* Permite envolver tablas manualmente con la clase .analisis
|
||||
|
||||
Reference in New Issue
Block a user