El curso de Gutenberg «Cómo crear un sitio web pre-FSE» es una revisión de las ideas en las que se basa el desarrollo de una página web utilizando exclusivamente el editor de bloques y antes del lanzamiento de la función de edición completa del sitio (FSE). El editor de bloques de WordPress, también conocido con el nombre de Gutenberg, es un nuevo paradigma en la creación y diseño de sitios web.
Este curso de Gutenberg está orientado a usuarios finales y creadores de contenidos; y consta de las siguientes lecciones:
- Introducción. Cómo convertir a Gutenberg en un generador de webs.
- El editor de bloques. Las claves del funcionamiento de Gutenberg.
- Componentes básicos. Sustie, patrones de bloques y plugins requeridos.
- Editor Plus. Funcionamiento básico de este plugin.
- Gutenberg Hub y Blocksy. Recursos recomendados.
- Ejercicio práctico. Creación de páginas de destino rápidas basadas en bloques.
1. Introducción
A finales de 2018, con el lanzamiento del editor de bloques en la versión 5.0 de WordPress, me di cuenta de que -en realidad- el problema de diseñar una web se reducía a lo que se podía hacer en la página de inicio (home). En la mayoría de los temas, existentes en aquél momento, se impedía el libre acceso a la página home y, de poder hacerlo, el editor clásico no era precisamente la herramienta ideal. Con la llegada del editor de bloques, el diseño de todas las páginas era fácil y estaba al alcance de cualquiera, incluida la home.
Pero todavía había algunas ubicaciones (el sidebar, footers u otras áreas de widgets predeterminadas por el desarrollador del tema) a las que no se podía añadir bloques de Gutenberg. Pronto descubrí que algunos plugins añadían un widget que permitía llevar bloques reutilizables a las áreas de widgets del tema.
Luego llegó Munir Kamal y su Gutenberg Hub, habilitando Editor Plus, un plugin para aplicar estilos CSS a los bloques del editor… ¡sin saber CSS!.
Ya teníamos casi todas las piezas para armar un sitio web. Solo quedaba resolver un pequeño problema: evitar la restricción, impuesta en el tema, relacionada con el ancho de los contenidos establecido por defecto en las páginas. Afortunadamente, también existen plugins para solucionar eso.
En resumen, en esta primera lección del curso de Gutenberg pre-FSE:
- Tema que nos permita entrar en la home libremente para rellenarla con bloques. En Blogpocket, se desarrolló Sustie y Nineteen (Genesis Framework) con este propósito. Pero Blocksy es una alternativa mucho más completa.
- Editor Plus. Plugin para aplicar CSS a los bloques en lenguaje de alto nivel.
- Reusable Blocks Extended. Plugin para llevar bloques a las áreas de widgets.
- Fullwidth Page Templates. Plugin para deshacer la restricción de ancho de contenido en las páginas.
2. El editor de bloques
El editor de bloques de WordPress (Gutenberg) es un nuevo paradigma en la creación de contenidos (posts, páginas, etc.) pero también en la creación y diseño de un sitio web.
Si aprendes a componer diseños con bloques del editor tendrás el poder de crear tus propios temas para tu web. Lo podrás hacer tú mismo sin ayuda de terceros y, además, sin código.
En esta segunda lección del curso de Gutenberg pre-FSE se dan las claves acerca del funcionamiento del editor de bloques, herramienta fundamental para crear y diseñar un sitio web solo con bloques de Gutenberg.
3. Componentes básicos
La idea fundamental de la creación de una web con Gutenberg es poder diseñar la página home (y el resto de páginas) solo con bloques.
El primer paso es poder entrar a una página home vacía y rellenarla con diseños hechos con bloques. Cualquier theme orientado a bloques debería permitir esto. Por ejemplo, en Blopopcket Sustie se puede hacer.
El segundo es llegar también a todas las áreas de widgets establecidas en el theme para, si se requiere, añadir bloques. Para este fin se instala el plugin Reusable Blocks Extended. Los bloques reutilizables no solo ahorran trabajo y favorecen el trabajo colaborativo sino que son un recurso muy útil con ese propósito de llevar bloques a todos los espacios de tu web.
Además, necesitamos mecanismos para romper las restricciones impuestas por el theme a los anchos de contenidos. Para ello, tenemos el plugin Fullwidth Page Templates.
Y, por último, no olvidaremos las colecciones de bloques que añaden bloques a la lista nativa de WordPress. Por ejemplo, Ultimate Addons for Gutenberg te servirá para generar diseños en la página del blog.
Todos esos componentes básicos se ven en esta lección.
4. Editor Plus
Una vez que tengas diseños hechos con bloques del editor de WordPress, en cualquier ubicación de tu sitio web (home, páginas, posts y áreas de widgets), les puedes aplicar estilos CSS sin necesidad de saber código CSS.
Eso es posible gracias a un plugin denominado Editor Plus que, además, es muy fácil de configurar.
Editor Plus posee además una perla escondida y es que trabaja de la mano con Gutenberg Hub, recurso que proporciona secciones y plantillas completas, muy útiles si estás iniciándote en la creación y diseño de páginas web por ti mism@. Solamente tienes que copiar con un clic el diseño y pegarlo en cualquier bloque de párrafo vacío. Esta es una fantástica manera de «rellenar» la página de inicio (home) vacía… y ya tienes casi todo el trabajo de personalización de tu sitio web hecho 🙂
5. Hutenberg Hub & Blocksy
Pero un theme como Sustie presenta algunas limitaciones en el diseño. Por ejemplo, tenemos que usar el plugin Google Fonts Typography para cambiar la tipografía y no podemos alterar sin código la paleta de colores. Tampoco podemos modificar el diseño de la cabecera ni el footer general.
En la lección 5 se propone un theme alternativo que no solo está orientado a bloques sino que proporciona una amplia serie de opciones para personalizar el diseño desde Apariencia > Personalizar.
Para que hagas el ejercicio de crear una landing page o un sitio web más completo con un clic, se explica cómo utilizar el recurso Gutenberg Hub que trabaja de la mano del plugin Editor Plus.
6. Ejercicio práctico
Un ejercicio práctico con el que aprenderás a crear landing page hechas con diseños de bloques.
Deja una respuesta