A principios de 2020, en Blogpocket desarrollamos y lanzamos Blogpocket Nineteen, un theme de WordPress basado en Genesis Sample, junto con un sitio web -a modo de plataforma de aprendizaje- para crear y diseñar una web solo con bloques, denominado Lanzatu.blog.
Si nuestro gran objetivo es demostrarte que tú mism@ puedes crear una web de WordPress sin código, profesional y optimizada, el editor de bloques Gutenberg nos abre un mundo de posibilidades; un fabuloso mundo 🙂
Eso significa ahorrar esfuerzo y ser más eficientes.
Me gusta decir que Gutenberg no es un editor más, sino todo un compositor de contenido. Gutenberg es una herramienta potente con la que de manera sencilla y sin complicaciones vas a poder crear no solo tus contenidos habituales (posts, páginas, etc.) sino también -en un futuro no muy lejano- tus propios themes.
El plugin Gutenberg (que va por delante, a nivel de desarrollo, de la versión incluida en el core de WordPress) ya contempla la función de edición del sitio (FSE, por sus siglas en inglés). Te recomiendo este curso de FSE y seguir tanto el Noticiero Bloguero como la sección FSE News para estar al día de todo lo que se cuece alrededor del nuevo WordPress.
Blogpocket Twenty es un tema de bloques que pusimos en marcha en Blogpocket, con el objetivo de explorar la FSE y para proporcionar a nuestros seguidores un recurso sencillo de aprendizaje. De esa manera se podría:
- Entender la estructura de los nuevos temas de bloques.
- Aprender el funcionamiento de la nueva función Edición del SItio (beta).
Pero, a finales de 2019 (con una versión oficial de WordPress que no incluía todavía la función de edición del sitio FSE), nos dimos cuenta de que era muy sencillo facilitar a nuestros seguidores un mecanismo sencillo con dos metas claras:
- Aprender Gutenberg con un tema simple y una demo a modo de curso no solo del editor de bloques sino de la personalización de temas clásicos de WordPress (pero ya con el editor de bloques presente y operativo).
- Disponer de una plantilla que permitiese partir de un «folio en blanco» para diseñar y componer la home, y el resto de páginas, a tu gusto (y sin código).
Antes de entrar de lleno en dicho mecanismo (un tema y un add-on), déjame que comente un poco acerca de la estructura de las páginas de un sitio web de WordPress.
¿Cuál es la estructura de las páginas de un sitio de WordPress?
Fíjate que, básicamente, cualquier página de un tema de WordPress (y si me apuras, de cualquier plataforma) no es más que -de arriba a abajo- una cabecera (un logo más un menú), un cuerpo de elementos (normalmente, una rejilla compuesta de bloques) y un pie que se configura habitualmente en WordPress mediante unas cuantas áreas de widgets.
Tradicionalmente, a través del dashboard de WordPress, con Apariencia > Personalizar y Apariencia > Widgets, se ha podido personalizar la cabecera y las áreas de widgets previstas en el tema activo.
Normalmente, también es posible estructurar el cuerpo de las páginas añadiendo un sidebar que, si está previsto en el tema, se puede personalizar mediante áreas de widgets.
¿Qué es lo que uno no podía tocar en un tema clásico de WordPress (era pre-Gutenberg)? el cuerpo de las páginas, naturalmente. Sobre todo, en la home. O, al menos, a nuestro gusto. Porque si es verdad que, dependiendo de los temas y de los conocimientos que tuvieses de programación php y de las funciones de WordPress, lógicamente, es posible hacer cualquier cosa. Y también contábamos con compositores visuales (Elementos, Divi, etc.) y, por supuesto, sistemas como Genesis Framework.
Pero, en general, uno debía de conformarse con lo que ofreciese el tema a nivel de personalización para cambiar «la rejilla» del cuerpo de la home.
La era post-Gutenberg
Pero Gutenberg es un nuevo paradigma. Ya disfrutamos de la posibilidad de componer contenidos y ¡temas! desde el dashboard de WordPress, todo ello solo con bloques y la función de edición del sitio.
Eso supone un avance grandioso porque cualquiera, fácilmente y sin necesidad de emplear herramientas complejas, tiene en sus manos la posibilidad de diseñar contenidos y temas.
En enero de 2020, aunque todavía no existía en el core de WordPress la función de edición del sitio, en Blogpocket desarrollamos un juguete, que simulaba todo eso, y que fue, inicialmente, mi forma de celebrar el 19º aniversario de Blogpocket (cumplido el 25 de enero de 2020).
El «truco» del tema Blogpocket Nineteen consistió inicialmente en alterar un poco el código de los temas Genesis Sample y el Susty de Jack Lenox para que el cuerpo de la home se presentara inicialmente en blanco y solo se tuviese que entrar en la página y editarla con Gutenberg al gusto. Lo importante no es el tema que se obtuvo en sí, sino el concepto en el que está basado y su propósito didáctico para enseñar las posibilidades de los bloques de Gutenberg.
En enero de 2020 la idea era un pequeño paso para el hombre pero un gran paso para la humanidad 😉 Hoy, ya tenemos posibilidad de explorar esta idea con otros recursos:
- Uno importante es Genesis Block Theme, explicado en este vídeo, aunque está más orientado a desarrolladores y no a usuarios finales como es el caso de Blogpocket Nineteen y Lanzatu.blog.
- Seedlet es el theme de Automattic para explorar la idea.
Y para más información acerca del concepto de creación de una web de WordPress en dos pasos que hay detrás de todo esto, te invito a leer Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos.
Temas Sustie y Nineteen (detalles y descarga)
Blogpocket Sustie
La versión para todos los públicos, Blogpocket Sustie, está basada en el theme plenamente CO2 friendly de Jack Lenox, denominado Susty.
Las características son muy similares a las de la versión Genesis:
- Ligera, minimalista y ecológica, orientada a Gutenberg.
- Estilo y «look and feel» basado en Susty.
- Menú BOOTSTRAP NAVWALKER (predeterminado) o JACK LENNOX (opcional).
- Folio en blanco en la home para que la diseñes con Gutenberg a tu gusto.
- Un widget de bienvenida opcional en la página del blog y un widget de bienvenida opcional en los posts individuales.
- Área de widgets «After Entry» en la página individual de los posts.
- De 1 a 4 widgets opcionales en el footer de todas las páginas excepto en la home.
- Capacidad para crear un microblog instalando el plugin Blogpocket-Nineteen-Microblog (opcional) y añadir icono identificativo del formato de post (opcional) instalando el plugin Blogpocket-Nineteen-Post-Format-Image.
- Área personalizable con bloques de Gutenberg en un escritorio despejado.
- 13 patrones de bloques listos para usar.
- Instrucciones en CSS personalizado para cambiar el color de branding de los enlaces.
Toda la información la encontrarás del mismo modo aquí.
Blogpocket Nineteen, el add-on para Genesis Sample
Blogpocket Nineteen fue un tema de Genesis Framework, basado en Genesis Sample, pero ahora es un add-on con el fin de independizar las funciones de este con la evolución del plugin Genesis Sample. Aplicando el add-on sobre Genesis Sample obtendrás un tema clásico resultante con las siguientes características:
- Ligero, minimalista y ecológico, orientado a Gutenberg.
- Estilo y «look and feel» basado en Genesis Sample.
- Folio en blanco en la home para que la diseñes con Gutenberg a tu gusto.
- Menú de navegación primario con capacidad para resaltar sus opciones con dos formatos (el predeterminado en Sample, “menu-highlight”; y otro especialmente elaborado para Blogpocket Nineteen: “higlight”).
- Áreas de bienvenida opcionales en la página del blog, entradas y categorías.
- Área de widgets «After Entry» en la página individual de los posts.
- Escritorio limpio que incorpora un área personalizable con bloques de Gutenberg.
- Widgets opcionales en el footer de todas las páginas excepto en la home.
- Capacidad para crear un microblog.
- Capacidad para aplicar un estilo de grilla en la página del blog y en las de archivos.
- Capacidad para eliminar categorías de la página del blog.
- Menú principal y menú secundario debajo del logo.
- 13 patrones de bloques incorporados y listos para usar.
Toda la información, instrucciones y descarga del add-on a continuación:
Descarga el software gratuito de Genesis:
Colección de bloques, layouts y patrones de Genesis:
Paquete de plugins adicionales para ayudarte a crear el front-end de tu sitio web de WordPress, basado en Genesis:
- Editor Plus. Colección de bloques, CSS sin saber CSS.
- Reusable Blocks Extended. Para reutilizar bloques y llevar bloques de Gutenberg a las áreas de widgets del tema.
- Fullwidth Page Templates. Para romper la restricción de ancho de contenido impuesto por el tema.
El front-end de un sitio bajo este entorno puede construirse solo con bloques nativos de WordPress, aplicarle layouts y secciones de Genesis Blocks u otra colección de bloques compatible (pruébese Coblocks, Stackable, Editor Plus, etc.) o cualquier otra combinación de diseño basado en bloques de Gutenberg.
El add-on se compone de una serie de carpetas y archivos que hay que añadir dentro del directorio «wp-content/themes/genesis-sample» y la instalación del plugin «Blogpocket configuración».
Descarga el add-on aquí.
Instrucciones de setup aquí.
¿Cómo se hizo Blogpocket Nineteen?
Para desarrollar el tema Blogpocket Nineteen se utilizó el plugin Genesis KitDev.
Este plugin permite generar un child theme de Genesis basado en el Sample, incluyendo opciones para configurar el diseño (CSS) y el archivo functions.php.
Se crearon los archivos php del tema y el código en functions.php con el fin de proporcionar las funcionalidades persiguiendo eliminar cualquier necesidad de configuración para el usuario final. El objetivo era facilitar a cualquiera un tema con una página en blanco en la home que se pudiese «rellenar» solo con bloques de Gutenberg. Y siempre con la sencillez como norte y huyendo de cualquier complicación técnica.
Sin embargo, la evolución de Genesis Sample obliga a estar actualizando Blogpocket Nineteen en paralelo. Para simplificarlo, se creó un add-on que es independiente de la evolución de Genesis Sample y por lo tanto ya no es preciso emplear Genesis KitDev. Se instala la última versión de Genesis Sample y se añaden los archivos del add-on. Para actualizar el add-on se sobreescriben los archivos. Cuando se actualize Genesis Sample, habrá que reescribir otra vez los archivos del add-on por si acaso.
La versión 7.0 del add-on es beta y consiste en una serie de carpetas y archivos que hay que añadir dentro del directorio del tema Genesis Sample.
Acerca del menú «no-menú» de Blogpocket Sustie
En su artículo Delivering WordPress in 7KB, Jack Lennox (autor del Susty, en el que está basado Blogpocket Sustie) explica por qué desarrolló un theme con un menú de ese estilo tan particular que yo llamo «no-menú» 😉
Cómo agregar bloques de Gutenberg en un escritorio de WordPress despejado
Blogpocket Sustie y el add-on Blogpocket Nineteen llevan integrado un escritorio de WordPress despejado y un área de widgets, denominada «Dashboard», preparada para rellenarse con bloques de Gutenberg mediante el widget «Reusable Block» del plugin Reusable Block Extended.
Eso permite agregar bloques de Gutenberg en el escritorio, despejado de toda distracción, usando el área personalizada, tal como se muestra en la siguiente imagen.
Si tu tema es otro, hemos desarrollado el plugin Custom Area On A Clean Dashboard (descárgalo aquí) para que puedas explorar esta función en tu web. Es una versión beta y experimental por lo que te recomiendo que la testees en un entorno de pruebas. ¡Aunque plenamente funcional y operativa! 🙂
Más información: Cómo agregar bloques de Gutenberg al escritorio de WordPress.
Conclusiones
Creo que Gutenberg es lo mejor que le ha sucedido al mundo del blogging en muchos años.
El propósito del tema Blogpocket Sustie, es meramente didáctico y académico, aunque es plenamente funcional para que puedas tener tu sitio Web Premium ligero perfectamente.
Si eres escéptico, te da pereza, estás atascado y tienes dudas o inquietudes acerca de Gutenberg, en Blogpocket estamos para ayudarte. Escríbeme o deja tu comentario.
Deja una respuesta