En este post te explicaré la recreación de la home de Entre Sneakers y Tacones bloques del editor de WordPress (Gutenberg).
Para impacientes, te invito a ver el siguiente vídeo.
¿Qué camino personal he recorrido?
Situemos en contexto este experimento.
Todo empezó en 2012 cuando decidí emprender una optimización de mi web Blogpocket.com. Y, a partir de entonces, he recorrido un camino en el que hay dos momentos clave:
- Aterrizaje en SiteGround (2015). Ahí me di cuenta de algo revelador: Blogpocket.com había mejorado en rendimiento sin que yo hiciese nada. Pero supe algo mucho más importante: las herramientas para optimizar un sitio web de WordPress no debían estar en el back-end sino en el propio hosting. Poco a poco, SiteGround fue perfeccionando su entorno de hospedaje de sitios web de WordPress y, en la actualidad, en la mayoría de los casos, solo es preciso algunos pequeños ajustes con el fin de obtener altos niveles de optimización del rendimiento.
- Lanzamiento del editor de bloques, también conocido como Gutenberg (2018). A finales de 2018 WordPress rompía de manera fulminante con su editor clásico y daba un paso de gigante instaurando el editor de bloques, más conocido por Gutenberg. Pronto percibí que Gutenberg era mucho más que un simple editor de contenidos. Noté en mis propias carnes que uno podía ser más productivo usando el editor de bloques y que el aluvión de colecciones de bloques y nuevos recursos asociados con Gutenberg nos despertaba de una especie de letargo: WordPress volvía a ser divertido 😉
Antes del lanzamiento de Gutenberg, tenía listo un Método para crear de manera eficiente un sitio web optimizado. Los ajustes finales los ejecuté tras leer este artículo maravilloso acerca de la sostenibilidad a la hora de crear páginas web, escrito por Jack Lennox. Su theme Susty era una adaptación moderna de todo el trabajo que había realizado Diego M. Lafuente (@minid) en la década de los 2000.
A finales de 2019 tenía listo el Método Blogpocket, con unas pocas herramientas y un procedimiento concreto, para tener en poco tiempo un sitio web optimizado en rendimiento, seguridad y SEO. También había logrado automatizar el control de cookies con Cookiebot y sabía cómo adaptar los formularios de captación de datos al RGPD.
Junto con el Método Blogpocket, a principios de 2020 lanzé un theme de WordPress, al que denominé Blogpocket Nineteen (por el 19º aniversario de Blogpocket) y la plataforma Lanzatu.blog.
Blogpocket Nineteen y Blogpocket Sustie
Cuando me puse a desarrollar Blogpocket Nineteen no tenía en mente un theme de la vieja escuela. La FSE (Full Site Edition) era, en aquellos días, solo una idea. Pero yo imaginé a un usuario final beneficiándose de una mayor flexibilidad a la hora de personalizar (incluido el diseño) el theme. Lo imaginé creando la página de inicio sin código, utilizando solo Blogpocket Nineteen y el editor de bloques.
Empleé todo el 2020 para ir perfeccionando Blogpocket Nineteen, desarrollar una versión no-Genesis (Blogpocket Sustie), basada precisamente en el Susty de Jack Lennox, y avanzar en la idea de proporcionar al usuario final un «producto» a partir del Método Blogpocket y Blogpocket Nineteen/Sustie. A primeros de marzo veía la luz un prototipo muy elemental de ese «producto»: Sustie Uno, aprovechando las posibilidades de las herramientas Local (antes Local by Flywheel) y Updraft Plus.
Los bloques son la democratización del desarrollo web
Si crees que esta idea es descabellada o que exagero, lee estos artículos:
- Automattic Launches the Blank Canvas WordPress Theme for Building Single-Page Websites. La propuesta de Automattic, en enero de 2021, es la misma que yo hice a finales de 2019 con Blogpocket Nineteen. Ya no es tan raro pensar que un sitio web se puede «rellenar» de contenido y de diseño solo con bloques de Gutenberg.
- Recreating the Music Artist WordPress Themitie Homepage With the Block Editor. Hay ya muchos experimentos como este donde se demuestra que para los desarrolladores de themes sería fantástico crear sus diseños personalizados con el sistema de bloques. Eliminar las opciones de themes, de la manera clásica, significa mucho menos trabajo de código para ellos, lo que les permitiría centrarse más en el estilo. Para los usuarios finales, como ya se apuntó anteriormente, ganarían en flexibilidad agregando elementos personalizados o eliminando partes que no desean. Estos podrían crear algunas de estas páginas de inicio sin código. Como dice Justin Tadlock, el editor de bloques y un theme completo y listo para bloques pueden llevarlo bastante lejos.
El caso de Entre Sneakers y Tacones
Conocí a Vanessa Zablah cuando me pidió que optimizase su sitio web.
Lo primero que pensé fue que merecía la pena, además de la optimización, realizar la recreación de la home de Entre Sneakers y Tacones con bloques, desechando Enfold, el theme con el que estaba implementada su web.
La recreación no sería exacta por motivos de optimización de la usabilidad pero podríamos demostrar lo sencillo y rápido que sería diseñar la página de inicio solo con bloques.
A continuación, el antes y el después:
Merece la pena también destacar el resultado de la optimización, medido con GTmetrix:
El nivel de optimización todavía tiene margen de mejora.
Cómo se ha hecho la recreación de la página de inicio de Entre Sneakers y Tacones
En el vídeo que abre este artículo tienes un resumen.
Pero, a continuación, tienes las claves.
- Blogpocket Nineteen. Es la pieza fundamental. Basada en la Sample de Genesis, se eliminó toda distracción técnica para el usuario final proporcionando un theme sencillo, minimalista y limpio, con el fin de que se pueda personalizar sin código el sitio web, no solo a nivel de contenidos sino también a nivel de diseño de la página home (y del resto de páginas).
- Editor Plus. El plugin de Munir Kamal permite aplicar estilo CSS a cualquier bloque o grupos de bloques, sin saber CSS 🙂 . Posee un pequeño conjunto de bloques que pueden resultar muy útiles. En Entre Sneakers y Tacones sirvió para realizar ajustes de estilo rápidamente.
- Gutenberg Hub. Este recurso va de la mano de Editor Plus y posee un catálogo bastante amplio de plantillas completas y grupos de (patrones) que pueden insertarse dentro del editor con un clic. En Entre Sneakers y Tacones se empleó una de las plantilla completas de «Education» y se modificó agregando y eliminando elementos.
Conclusiones
La recreación de la home de Entre Sneakers y Tacones con bloques se hizo en menos de media hora, una vez que se había migrado la web a una instalación de WordPress nueva y optimizada.
El proceso fue sencillo utilizando solamente Editor Plus, pegando inicialmente una de las plantillas de Gutenberg Hub en un bloque de párrafo vacío de la página de inicio dentro del editor de bloques.
Si te gustó la idea, tienes una web sencilla (blog, landing page, etc.), quieres optimizarla y estás dispuesto a aprender Gutenberg, estoy buscando proyectos para seleccionar y probar mi producto Blogpocket Website Premium de próximo lanzamiento.
Deja una respuesta