WordCamp Varsovia 2022, la vuelta a los encuentros presenciales (crónica y presentación)

WordCamp Varsovia 2022 fue un evento especial en todos los sentidos. Tras más de dos años de pausa por la pandemia, los webinars y las videollamadas interminables por fin dejaron paso a los apretones de manos, a las charlas de pasillo con un café y al intercambio directo de ideas de ingeniería en el mundo real.

La energía de los cientos de asistentes reunidos en Varsovia fue extraordinaria. Se notaba cuánto necesitaba la comunidad WordPress, tanto los veteranos que llevan más de una década construyendo el ecosistema como los nuevos profesionales, el contacto físico y la oportunidad de contrastar su conocimiento con la práctica del mercado.

Si te interesa la arquitectura moderna de temas de bloques o buscas apoyo en una implantación avanzada de sitios corporativos, consulta nuestra oferta como desarrollador WordPress en WPPoland.

#1. Container Queries y theme.json en temas de WordPress

Tuve el gran placer de dar una charla en la frontera entre la ingeniería frontend y el diseño de interfaces, centrada en las herramientas que están redefiniendo la creación de temas para el editor de bloques Gutenberg.

El vídeo de mi intervención está disponible en YouTube (la charla empieza en el minuto 1:38:55):

#Cómo usar CSS Grid, container queries y theme.json

EWOLUCJA UKŁADÓW W MOTYWACH WORDPRESSA:
+-------------------------------------------------------------+
| Era Legacy (2010-2018):                                      |
| Floaty, clearfixy, 12-kolumnowe siatki Bootstrapa, !important|
+-------------------------------------------------------------+
                              v
+-------------------------------------------------------------+
| Era Flexbox & CSS Grid (2018-2022):                          |
| Dwuwymiarowe siatki grid-template-areas, auto-fit, minmax() |
+-------------------------------------------------------------+
                              v
+-------------------------------------------------------------+
| Nowoczesna Era Komponentowa (2022+):                         |
| Container Queries (@container), theme.json i CSS Variables   |
+-------------------------------------------------------------+

1. Flexbox y CSS Grid son la base, no un experimento: en los proyectos profesionales ya no hay ninguna justificación técnica para usar floats o bibliotecas CSS pesadas que generan miles de clases auxiliares innecesarias. El CSS Grid bidimensional moderno permite resolver cualquier maquetación editorial con apenas unas pocas declaraciones, lo que reduce drásticamente el tamaño de la hoja de estilos y acelera el análisis del árbol DOM.

/* Tradycyjny układ oparty na floatach i clearfix (przestarzały wzorzec) */
.legacy-archive-grid::after {
  content: "";
  display: table;
  clear: both;
}
.legacy-archive-card {
  float: left;
  width: 33.333%;
  padding: 15px;
  box-sizing: border-box;
}

/* Nowoczesny, responsywny CSS Grid bez konieczności definiowania reguł @media */
.modern-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--wp--preset--spacing--40, 2rem);
  align-items: stretch;
}

2. El cambio radical de las Container Queries (@container): las consultas @media tradicionales solo miden el ancho de toda la ventana del navegador (el viewport). En el ecosistema modular de bloques de Gutenberg, un componente (por ejemplo, una tarjeta de artículo con miniatura y extracto) puede colocarse en una columna lateral estrecha (sidebar), en una rejilla de tres columnas en la portada o como banner a pantalla completa. Las Container Queries permiten que los bloques adapten su maquetación según el ancho de su contenedor padre directo, no según la pantalla del usuario.

/* Rejestracja kontenera kontekstowego dla bloku */
.wp-block-custom-card-wrapper {
  container-type: inline-size;
  container-name: post-card-container;
}

/* Domyślny układ pionowy dla wąskich przestrzeni (np. sidebar) */
.wp-block-custom-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Po przekroczeniu 520px szerokości kontenera układ przełącza się w poziom */
@container post-card-container (min-width: 520px) {
  .wp-block-custom-card {
    flex-direction: row;
    align-items: center;
  }
  .wp-block-custom-card__image {
    width: 38%;
    flex-shrink: 0;
  }
  .wp-block-custom-card__body {
    width: 62%;
  }
}

3. El archivo theme.json como única fuente de verdad: con la llegada de Full Site Editing (FSE), el papel de los enormes archivos style.css se ha desmontado. El archivo declarativo theme.json estandariza los tokens de diseño: paletas de colores, tipografía fluida (fluid typography), márgenes y rellenos. El motor de WordPress genera automáticamente a partir de ellos variables CSS (--wp--preset--*), lo que garantiza una coherencia visual total entre el panel de edición y el aspecto final del sitio.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "name": "Medium",
          "size": "clamp(1.125rem, 1rem + 0.5vw, 1.35rem)",
          "slug": "medium"
        },
        {
          "name": "Large",
          "size": "clamp(1.5rem, 1.25rem + 1vw, 2.25rem)",
          "slug": "large"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        { "name": "Small", "size": "1rem", "slug": "30" },
        { "name": "Medium", "size": "2rem", "slug": "40" },
        { "name": "Large", "size": "3.5rem", "slug": "50" }
      ]
    }
  }
}

#2. Page builders o Gutenberg y seguridad de plugins

La conferencia fue un excelente barómetro de la dirección en la que evoluciona el mercado de WordPress, tanto en Polonia como a nivel internacional:

#¿Por qué las agencias abandonan los page builders?

En las conversaciones de pasillo con representantes de las principales agencias polacas quedó clara la retirada de los editores visuales pesados (como Elementor, WPBakery o Divi) en los proyectos de nivel enterprise. Los requisitos de Google sobre las métricas Core Web Vitals (sobre todo LCP, FID/INP y CLS) han hecho que optimizar sitios basados en builders monolíticos deje de ser rentable. El estándar pasa a ser el desarrollo de bloques de Gutenberg a medida (React/JS nativo) y de temas de bloques basados en código limpio.

#Seguridad de la cadena de suministro y auditorías de plugins

Una de las presentaciones más comentadas trató sobre las vulnerabilidades del ecosistema open source. Se analizó el creciente riesgo de los ataques a la cadena de suministro (supply chain), en los que actores que inyectan código malicioso se hacen con plugins abandonados del repositorio oficial. Entre los ingenieros se impone como estándar el bloqueo estricto de la edición directa de archivos en producción (DISALLOW_FILE_MODS), el análisis automático de dependencias con herramientas de CI/CD y la verificación de las sumas de comprobación de los archivos de WordPress con WP-CLI:

# Weryfikacja integralności rdzenia WordPressa oraz wtyczek w procesie CI/CD
wp core verify-checksums
wp plugin verify-checksums --all

#3. WooCommerce lento y el autoload en la tabla wp_options

El contacto directo con los ingenieros de los proveedores de alojamiento y de plataformas en la nube puso sobre la mesa los retos de producción reales a los que se enfrentan los sitios polacos:

Las conversaciones en los stands de alojamiento dejaron claro que el principal cuello de botella del rendimiento de las grandes tiendas WooCommerce no es la potencia del procesador, sino el crecimiento descontrolado de la tabla wp_options (sobre todo de las opciones con la marca autoload = yes) y la falta de separación entre las consultas de lectura y de escritura en la base de datos. Para identificar rápidamente los registros problemáticos basta con una sencilla consulta SQL de diagnóstico:

-- Identyfikacja najcięższych opcji ładowanych automatycznie przy każdym żądaniu HTTP
SELECT option_name, length(option_value) AS byte_size
FROM wp_options
WHERE autoload = 'yes'
ORDER BY byte_size DESC
LIMIT 15;

#4. Networking en WordCamp después de la pandemia

Dos años de reuniones exclusivamente a través de pantallas provocaron en el sector IT un fenómeno generalizado de “Zoom fatigue”. WordCamp Varsovia demostró que la dinámica de las conversaciones cara a cara es imposible de reproducir en los canales de mensajería:

#¿Cómo forman consorcios los especialistas en WordPress?

En los pasillos me encontré con especialistas con los que llevaba años colaborando en proyectos comerciales, pero a los que nunca había estrechado la mano. Las conversaciones en las mesas dieron lugar a consorcios informales de ejecución: gracias a ellos, equipos de desarrollo pequeños y especializados pueden presentarse juntos a licitaciones para construir portales corporativos, combinando competencias en backend avanzado, auditorías de accesibilidad WCAG y diseño UX.

#Tarifas y contratos SLA en el sector WordPress

En conversaciones directas y confidenciales, los ingenieros comparten de buen grado sus tarifas reales, sus problemas para cobrar y sus métodos para redactar contratos de servicio (SLA). Este tipo de conocimiento del sector no se encuentra en publicaciones oficiales en internet ni en guías.

#5. Cómo pasar de un tema clásico a un tema de bloques

Una de las preguntas más frecuentes después de mi charla fue: ¿cómo migrar con seguridad un sitio en funcionamiento con muchos años de historia a una arquitectura de bloques sin caídas y sin perder las posiciones conseguidas en el buscador? En las consultas de pasillo elaboramos entre todos un modelo de implantación probado:

1. Auditoría y extracción de design tokens: en lugar de reescribir todo el código desde cero, el primer paso es inventariar los colores, la tipografía y los espaciados fijos de las hojas CSS existentes. Todos esos valores se trasladan al archivo theme.json, lo que unifica de inmediato las variables en todo el sistema.
2. Modelo de implantación híbrido (Hybrid Theme): no hace falta implantar de golpe el Full Site Editing completo. WordPress permite mantener la cabecera y el pie de página clásicos en PHP mientras el contenido principal de entradas y páginas se construye con bloques y contenedores modernos.
3. Sustituir los shortcodes por bloques dinámicos a medida: los viejos códigos cortos (shortcodes) generan deuda técnica y dificultan la vista previa en el editor. Convertirlos en bloques nativos de Gutenberg (por ejemplo, con register_block_type y plantillas de renderizado) mejora drásticamente la comodidad del equipo editorial.
4. Verificación del rendimiento y pruebas de regresión: antes del cambio definitivo en producción hay que hacer pruebas de Core Web Vitals en un entorno de staging, vigilando las métricas LCP y CLS con herramientas como Lighthouse CI.

#6. Resumen

WordCamp Varsovia 2022 fue un hito en la reconstrucción de la comunidad tecnológica polaca en torno a WordPress. La combinación de charlas sólidas sobre CSS moderno y arquitectura de bloques con un networking intenso dio un fuerte impulso a todo el ecosistema.

Para un ingeniero, asistir a conferencias técnicas no es solo una oportunidad de poner a prueba su oficio, sino sobre todo la base de relaciones profesionales duraderas que deciden el éxito de los proyectos durante años.

Si estás planificando modernizar la infraestructura de tu sitio, migrar a un tema de bloques compatible con Core Web Vitals o necesitas apoyo experto en arquitectura, consulta nuestros servicios de desarrollo avanzado de WordPress.