Acaba de salir la versión 3.0.1 de GeneratePress, y gracias a eso nos hemos enterado de que la 3.0.0 ya no es una beta. Vamos a ver qué trae GeneratePress. Prepárate una bebida y algo de picar, que hay para rato…
GeneratePress 3.0, es una actualización mayor. Con ella llega un nuevo diseño del tema, uso de flexbox, nueva funcionalidad de los temas y, en general, es más ligero, rápido y flexible que nunca.
Nuevo y fresco aspecto
El aspecto de instalación por defecto se ha mantenido bien durante los últimos 6 años, pero ya tocaba una actualización del diseño.
Así luce el nuevo diseño:
Este nuevo estilo es el típico diseño de sitios web en estos días. Es mucho más limpio, y el encabezado ocupa menos espacio en el escritorio y el móvil. Se mantiene la compatibilidad con las versiones anteriores. Pero si prefieres el diseño clásico sigue siendo 100% realizable y a solo unos pocos clics de distancia.
Rejilla Flexbox
El sistema de rejilla basado en floats ha estado vigente durante mucho tiempo. La cuestión era cómo eliminar ese peso extra del tema sin afectar negativamente a los usuarios.
El proceso comenzó implementando SCSS para construir todo el CSS para el tema. Esto permitió dividir el CSS en partes, y luego compilarlas en hojas de estilo completas. El resultado fueron dos hojas de estilo principales separadas en el tema:
main.css (versión flexbox)
style.css (versión heredada)
Esto se configura con una simple opción en el Personalizador que permite cambiar entre los floats y flexbox.
Los sitios web existentes establecerán automáticamente el css heredado como el sistema por defecto para mantener la compatibilidad hacia atrás. Los nuevos sitios web se ajustarán por defecto a flexbox, ya que es mucho mejor.
Esta actualización considera obsoleta la versión heredada. Se pueden cambiar los sitios existentes para usar la versión flexbox, pero es muy recomendable usar una copia de pruebas para que cualquier problema pueda ser abordado antes de poner en marcha el cambio.
Ventajas de Flexbox
- Reducción significativa en el CSS
- HTML más limpio y ligero eliminando clases auxiliaros
- Más fácil de personalizar con un simple CSS
A continuación podemos ver de cerca cómo este y otros cambios mejoran el rendimiento de los temas.
Rendimiento
Menos peticiones y un 55% de ahorro en el CSS principal
Hojas de estilo de los componentes
Para simplificar la hoja de estilo principal, se han movido algunos componentes a sus propias hojas de estilo, y se cargan solo si son necesarias.
Por ejemplo, ¿por qué debería tu sitio cargar CSS para los comentarios si no estás usando comentarios? Así que ahora, los comentarios CSS se cargan por separado sólo en las paginas/posts que los necesitan.
Lo mismo ocurre con todos los CSS de tu barra superior, barra de pie de página y widgets de pie de página. Por lo tanto, sólo tiene sentido cargar el CSS para ellos si están en uso.
Dividir el CSS de esta manera implica más peticiones en la red. Sin embargo, son más pequeñas, lo cual es mejor para los servidores que corren HTTP/2.0, o pueden ser simplemente combinados/minimizados usando tus plugins de optimización y caché favoritos.
CSS dinámico
El CSS dinámico ha sido parte de GeneratePress durante mucho tiempo, y simplemente escribe CSS en línea cuando es necesario. Este CSS es para elementos de temas opcionales y sólo existe si están activados. Eso incluye CSS para la búsqueda de navegación, el botón de volver al principio y las opciones de Dropdown – Click.
Si eres usuario de GP Premium 1.11, tienes la opción de mantenerlo en línea o escribirlo en un archivo CSS externo.
CSS principal
Con la opción de flexbox habilitada, GeneratePress carga una sola hoja de estilo main.css.
Comparemos:
GeneratePress 2.4
unsemantic-grid.min.css – 12.3kb
style.min.css – 26.2kb
mobile.min.css – 3.7kb
Total: 3 peticiones HTTP 42.2kb
GeneratePress 3.0
main.min.css – 18.9kb
Total: 1 Solicitudes HTTP 19.8kb
Eso es un ahorro del 55% en una instalación por defecto de GeneratePress.
Actualizar las hojas de estilo RTL
Los sitios RTL se benefician ahora de una nueva hoja de estilo minificada rtl.min.css. Además de ser más eficiente, corrige muchos problemas de estilo en la hoja de estilo heredada.
Tamaño de la caja:
Con Flexbox activado, todos los tamaños de caja se ajustarán al borde de la caja. La diferencia notable será el ancho más exacto del contenedor donde el relleno se mantiene en el interior. Esto resolverá los problemas de tamaño en los que los desarrolladores de plugins optan por dejar esto fuera de su código.
Javascript
Ahora los archivos a11y.min.js y menu.min.js se han combinado en un solo archivo principal.min.js. Esto se aplica tanto a las versiones Float como Flexbox del tema.
Iconos SVG ahora por defecto
GeneratePress tiene iconos SVG hace tiempo pero manteniendo los iconos de fuentes como predeterminados. Desde la versión 3.0, los iconos SVG son ahora los predeterminados para las instalaciones de nuevos temas.
Puedes ver más detalles de esta actualización en inglés en la web de GeneratePress. Eso sí, prepárate para tragarte el tono grandilocuente y autocomplaciente del amigo Tom Usborne.
