Actualización 3.0.1 de GeneratePress

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:

Vista de escritorio de GeneratePress 3.0

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.

Otras actualizaciones de GeneratePress

GeneratePress

GP Premium

Últimas entradas en el blog de Elemendas

mezcla-perfecta-para-mendas-blog

📩 Aquí tienes la mezcla perfecta que estabas buscando

Después de 74 newsletter tenemos “calado” al menda medio.
Os encanta que hablemos de velocidad (WPO moderna de esa), diseño, optimización y negocio.
Hoy solo nos falta la pizca de pasta… pero tenemos el resto de ingredientes listos para ti.
¡Al lío!

Leer más >>
chupate-esa-efecto-lock-in-elementor-blog

📩 !Chúpate esa, efecto Lock-in!

Perdón por lo del asunto, menda.
Pero te tengo que decir que el plugin de esta semana me ha reventado la cabeza 🤯🤯porque puede llevarse de un plumazo el efecto “lock-in” que muchas veces achacan a Elementor.

Leer más >>