Cómo creamos el sitio web utilizando el editor de bloques

Si no lo ha notado, el aspecto de nuestro sitio ha cambiado ligeramente. Remodelamos nuestro sitio web, actualizando las fuentes, estilos, paleta de colores … pasando desde aquí:



NELI Software Página principal 2016-2018. En esto:



La página principal Nelio Software (2019). Pero lo más interesante de estos cambios no es la forma en que se ve, decidimos reconstruir nuestro sitio web desde cero, para que pueda convertirse en un sitio completamente basado. Hoy me gustaría explicar cómo obtenemos de una página personalizada basada en plantillas de página a otro tema totalmente personalizado que se basa en los bloques de WordPress para cualquier cosa.
Desde donde venimos de cuando lanzamos el contenido de Nelio hace tres años, decidimos reorganizar completamente todos los sitios web y centralizar nuestra presencia en línea bajo un solo dominio y marca: Neliosoftware.com. Lógicamente, una de las tareas que hicimos fue contactar a Silo Creativo para ayudarnos a diseñar la imagen de nuestro nuevo sitio web. Aquí puedes ver una de las primeras propuestas que hicieron:

El primer boceto del diseño del contenido del blog Nelio propuesto por Silo Creativo. Cuando dimos la aprobación de ese diseño inicial y siguiendo nuestras solicitudes, Ricardo y Veronica se pusieron a trabajar y han implementado un tema personalizado con todas las plantillas necesarias para las diferentes partes de nuestro sitio: la página principal, blog, publicaciones, ayuda de página, … Diseñaron todo y cada diseño se implementó en una plantilla de página. Tenía una página rápida, que era difícil de editar.
Y luego llegó Gutenberg. Comprender el contenido de nuestro sitio web El nuevo editor de WordPress, Gutenberg Block, es un cambio de paradigma para crear contenido en una WordPress. Hasta ahora, las páginas estaban creando un proceso agotador y hostil para los usuarios, a menos que use un generador de páginas. Pero a Gutenberg se le ocurrió una promesa debajo de su brazo: la creación de contenido visualmente atractivo en WordPress debería estar disponible para cualquier persona. Y queríamos probar esta declaración y ver si realmente podríamos crear un sitio web hermoso basado solo en Gutenberg. Si vio la web antes, sabrá que tiene un diseño simple y elegante, incluidos elementos como:
Páginas con una imagen presentada que tomó la primera flexión
Bloques con texto e imágenes descriptivos y/o video
Formularios de contacto
Páginas legales
Mesas de precio
Testimonios de nuestros usuarios
Listados con funciones
Página de contenido de Nelio en la que combinamos texto y video. Nada demasiado fantasía, pero interesante. ¿Podríamos crear todo esto en Gutenberg? Así es como pensé y lo intenté. Eso es lo que hice y encontré. Nuestro nuevo tema Lo primero que hicimos para diseñar el nuevo sitio web fue crear un tema desde cero. Para esto, decidimos comenzar con el bien conocido tema de inicio “subrayado”. Es un tema súper básico que viene con las plantillas mínimas y necesarias para tener un tema funcional de WordPress y está bien documentado y bien organizado.

Creación del tema del software Nelio para 2019 utilizando el tema inicial “subrayado”. Adaptación de presentaciones Cada tema de WordPress tiene un conjunto de páginas que son comunes a todas las instalaciones de WordPress e independientemente del contenido que genera en su sitio. Por ejemplo, la página de blog en la que aparecen las últimas publicaciones, la aparición de una sola publicación , Error Página 404, resultados de búsqueda, etc. Entonces, el primer paso para crear nuestro tema usando bloques de WordPress es adaptar las presentaciones a nuestro propio estilo, para que estos “genéricos” tengan la apariencia y el sentimiento que queremos. Y eso es lo que hice. Si miras la captura de pantalla anterior, ¡verás que descargué el tema con _Sassif! La opción activada, de modo que el tema se descarga con estilos SASS, se organiza en varios archivos y lo hace extremadamente fácil de editar. Nos llevaron unas horas de escritura CSS y algunas personalizaciones de PHP en funciones.php, pero logramos obtener el tema correctamente:

Captura del blog con nuestro tema 2019. WordPress bloquea como bloques de construcción una vez que tenemos un tema inicial con el que nos sentimos cómodos (en nuestro caso, el tema que creamos por subrayado, pero en su caso podría ser un tema que encontró WordPress.org, un tema premium que ha comprado hace un tiempo, o incluso un tema personalizado), es el momento de organizar todas nuestras páginas usando los bloques de WordPress.
Entonces, sin ninguna otra extensiones, echemos un vistazo a todos los “desafíos” que enfrentamos en esta etapa y cómo implementamos todo usando los bloques de WordPress. Bloques predeterminados Los bloques que incluye WordPress de forma predeterminada son poco limitados: párrafos, imágenes, galerías … nada demasiado elegante, todos parecen más centrados en crear publicaciones de blog que en la apariencia de la página. Pero está bien. Está bien porque, para empezar, hay muchas páginas en un sitio web que parece publicaciones de blog. Por ejemplo, las páginas con información legal o una política de privacidad y cookies están más cerca de una publicación de blog de lo que hubiera pensado al principio. Pero está bien porque podemos construir páginas hermosas con componentes extremadamente simples. Por ejemplo, podemos combinar texto y videos. Esto es algo que podemos lograr fácilmente con los medios y los bloques de texto:

Combinar texto e imágenes en Gutengerg es muy simple. Muy cerca, ¿verdad? Combinar bloques implícitos bloques simples puede ser extremadamente potente cuando se combina. Por ejemplo, considere la siguiente captura de pantalla donde tenemos una lista de características:

Ejemplo de conjunto de funcionalidades en nuestro sitio. ¿Cómo se acercaría este enfoque? Bueno, si lo miras con cuidado y lógica, ¿verás que cada característica es una combinación de una imagen y algún texto (¿sonidos conocidos?). Luego verá que claramente tenemos tres columnas, así que … ¿qué sucede si combinamos bloques de medios y texto con un bloque de columnas?
Combinamos un bloque de columnas con múltiples funcionalidades en cada columna. No está mal, ¡estamos lo suficientemente cerca! Cuando combina bloques, debe ser inteligente. El uso de un solo bloque de columnas significa que es posible que las características no estén correctamente alineadas horizontalmente, porque cada columna se organiza independientemente de la otra. Para resolver este problema, debe ser un poco astuto: en lugar de agregar un solo bloque con múltiples características en cada columna, creando más columnas para garantizar que solo haya una característica en cada columna: si desea alinear los elementos de una columna Bloque Horizontalmente, la única solución es crear un nuevo bloque de columna para cada fila. ¡Culo! Ahora tenemos tres columnas de características con líneas correctamente alineadas. Bloques predeterminados con esteroides Hay casos en los que los bloques implícitos están lo suficientemente cerca de lo que queremos, pero no se ven correctos. Si enfrentamos un problema visual, es muy probable que podamos resolverlo usando CSS, y la mejor parte es que Gutenberg funciona extremadamente bien con las clases de CSS. Por ejemplo, si queremos que nuestros bloques de imagen tengan una sombra (opcional), podemos crear una clase CSS simple que agrega la sombra de la imagen y luego aplique esa clase usando la sección avanzada del bloque de imágenes:

Sombreado de imágenes en Gutenberg usando una clase CSS. El problema con esta solución es que mezclamos la interfaz con el usuario con los detalles de implementación (el nombre de una clase CSS). ¿Por qué demonios sé que hay una clase llamada Shadow que agrega una sombra a una imagen? Bueno, también tiene una solución simple. La interfaz de programación del editor de bloques de WordPress expone una función llamada RegisterBStyle, como sugieren los nombres de bloque de registro. Algo tan simple como: RegistroBlockStyle (‘Core/Image’, {nombre: ‘Image-with-shadow’, etiqueta: __ (‘shadow’, ‘nelio’),}); Nos permite grabar un nuevo estilo para el bloque de imágenes (núcleo/imagen) llamado Shadow que, cuando se aplica, da como resultado el bloque de imágenes con el estilo de estilo HAS-With-Shadow: Bloque en Gettenberg. Finalmente, los bloques personalizados, para aquellos casos en que ningún bloque predeterminado lo corta, puede crear su propio bloque (o usar un tercer bloque ya existente). Hemos implementado esta solución en varios casos: en las tablas de precios Neli Content y Nelio A/B Prueba, el mapa que aparece en nuestra página de contacto (que se ha mostrado en profundidad en nuestra publicación sobre cómo crear un bloque) y el Los resultados en términos de uso son impresionantes:

Tabla de precios con un bloque personalizado de Gutenberg. Si no sabe o desea crear sus propios bloques, le dejo algunos complementos que incluyen bloques adicionales para muchas cosas:

Fantasma

Bloques atómicos

Coblocks

Bloques de Kadence

Nuestra experiencia hace unos meses decidimos que tenemos que renovar un poco nuestro sitio web e implementarlo usando Gutenberg.Nuestro objetivo era el doble: por un lado, queríamos actualizar un poco el sitio y darle un aire más fresco.Por otro lado, queríamos obtener más información sobre Gutenberg, tanto a nivel de usuario como a nivel de desarrollador.Finalmente, logramos migrar toda la web a Gutenberg y el resultado fue un éxito absoluto.También lo alentamos a que lo haga, y si tiene alguna pregunta, no dude en dejarlas en los comentarios.Por cierto, la publicación de hoy se inspiró en el discurso que tuve en WordCamp Lisboa 2019. Aquí tienes mis diapositivas: Imagen presentada por Samuel Zeller en Unsplash.