Recreación de la página de inicio del tema de WordPress para artistas musicales con el editor de bloques

Una de mis actividades favoritas cada semana es leer detenidamente los últimos temas para aterrizar en el directorio de temas de WordPress. A menudo, hay conceptos de diseño intrigantes. Sin embargo, la mayor parte del tiempo, me decepciona saber que los diseños de las páginas de inicio de muchos dependen de las opciones de temas en lugar del editor de bloques.

Si bien el editor tiene varias limitaciones de diseño, los autores de temas tienen mucho espacio para explorar. Tiene suficiente poder para lograr algunos de estos diseños de página de inicio personalizados con mucho menos trabajo de código.

Music Artist fue uno de los últimos temas que me llamó la atención. Me encantó la gran área del héroe y varios elementos del diseño del tema. Después de instalarlo, me di cuenta de que el diseño de la página de inicio se manejaba a través de las opciones del tema. Sin embargo, el autor del tema podría haber construido esta página completamente a partir de bloques y envuelto cada sección o incluso todo el diseño en patrones de bloques.

Todo esto es factible con el editor de bloques.

Para practicar lo que predico, me tomé un par de horas y recreé la demostración de la página de inicio para el tema directamente desde el editor de bloques. No se requiere código. Hubo algunas piezas complicadas, en las que me meteré. Sin embargo, no fue tan difícil de construir y podría haberse hecho más fácil si el tema fuera compatible con el editor de bloques.

El plan era replicar la página personalizada con el tema Music Artist instalado. Sin embargo, la falta de soporte de bloques del tema significó que algunas cosas se rompieron fundamentalmente. En cambio, activé un tema con similitudes de diseño, como fuentes y colores. Como ya sabía que Ariele Lite trabajaba con el editor de bloques, tenía sentido ver si podía construir con él. Resultó ser una base sólida.

La siguiente es una comparación de la página de inicio del tema Music Artist original (primero) y una recreación usando bloques a través del tema Ariele Lite (segundo):

Obviamente, hay diferencias en el espaciado, los colores, la tipografía y otros elementos. Gran parte de esto se debe a las elecciones estilísticas de los diseñadores de temas. Con más tiempo y modificaciones a través de un complemento como Editor Plus, podría haber ajustado esto lo suficiente como para obtener una réplica más cercana. Sin embargo, mi objetivo era mantenerme lo más cerca posible del núcleo de WordPress. Técnicamente, tengo instalada la última versión del complemento Gutenberg, por lo que es posible que haya algunos elementos que aún no lleguen a WordPress.

Para este experimento, utilicé:

• WordPress 5.7 Beta
• Gutenberg 10.1 Beta
• Ariele Lite 1.0.8
• Editor Plus 2.6

Solo necesitaba Editor Plus para hacer un par de ajustes de margen en el bloque de Grupo. Podría haberlo dejado así, pero quería reducir parte del espacio entre las secciones de la página para obtener una recreación más cercana. En el futuro, veremos más controles de espaciado en WordPress, así que lo consideré una compensación justa.

Este experimento es para mostrar a los autores de temas que pueden crear sus diseños personalizados con el sistema de bloques. Eliminar las opciones de temas de la vieja escuela significa mucho menos trabajo de código para los desarrolladores, lo que les permite concentrarse más en el estilo. Los usuarios finales también se benefician de una mayor flexibilidad, como agregar elementos personalizados o eliminar partes que no desean. Eso ni siquiera incluye las opciones de estilo en el nivel de bloque individual.

El propósito secundario es mostrar a los usuarios que pueden crear algunas de estas páginas de inicio sin código. El editor de bloques y un tema completo y listo para bloques pueden llevarlo bastante lejos.

Recreación de la página de inicio del artista musical

Comenzar con una base de Ariele Lite significaba que el diseño estaba encajonado. Sin embargo, el tema tiene una plantilla de página personalizada "Lienzo en blanco" que permite a los usuarios diseñar la página completa.

Había elementos que no podía recrear por completo debido a las limitaciones del editor de bloques. Otras partes fueron problemas u opciones de diseño provenientes del tema.

La siguiente es una descripción general de cómo logré construir cada sección de la página de inicio. Me saltaré partes como agregar colores y cambiar el tamaño de las fuentes mientras me enfoco en los conceptos relacionados con el diseño.

Sección de héroe

El bloque de portada de WordPress sigue siendo uno de mis bloques favoritos. Permite a los usuarios crear secciones de héroes sin mucho trabajo. Tomé la imagen de fondo de la demostración original y la introduje. Había dado el primer paso real en este viaje.

Luego, agregué un bloque de encabezado, ajustando un poco su tamaño. Lo seguí con un bloque Spacer and Social Icons.

Inmediatamente me encontré con dos inconvenientes. La primera fue que WordPress no incluye un ícono social de iTunes. No pude encontrar un problema abierto en el repositorio de Gutenberg para esto. Quizás no sea una característica solicitada con frecuencia. El segundo problema fue que el bloque Iconos sociales no muestra las etiquetas de las redes sociales, por lo que no pude replicar esa parte del diseño.

Sección Discografía

Hay algunas maneras de manejar esta sección. Suponiendo que los álbumes enumerados son un tipo de publicación personalizada, cualquier complemento del que provengan estos álbumes idealmente tendría un bloque personalizado para generarlos. Los usuarios también pueden usar el bloque Últimas publicaciones si se trata de publicaciones de blog o el próximo bloque Consulta.

Para simplificar, decidí agregar un bloque Columnas y soltar tres imágenes vinculadas.

Sección de Medios y Textos

Mi plan para esta sección era usar el bloque central de Medios y texto. Sin embargo, solo es compatible con medios autoalojados. No había forma de insertar un video de YouTube.

En cambio, opté por un bloque Columnas. En la columna de la izquierda, dejé caer una URL de video de YouTube. A la derecha, agregué bloques de encabezado, párrafo y botones.

Sección de Vídeos

Esta fue una sección relativamente simple de recrear. Para el diseño, solo tomó un bloque de encabezado seguido de un bloque de columnas. Luego, tomé un par de enlaces de video de YouTube y pegué las URL en el editor.

Sección Últimas publicaciones

Esta fue la parte del diseño con la que tuve más problemas. WordPress proporciona el bloque Últimas publicaciones, que se puede configurar en una cuadrícula. Sin embargo, Ariele Lite no manejó correctamente las columnas.

Entonces, hice un poco de trampa.

Cambié a un tema basado en bloques que admite la próxima función de edición completa del sitio. Luego, incluí un bloque de consulta para tener más control sobre las columnas de publicaciones. Luego, volví al tema Ariele Lite.

El diseño original podría hacerse con el bloque Últimas publicaciones actual, por lo que no es un problema del editor de bloques.

Sección de barra lateral de pie de página

Técnicamente, la barra lateral del pie de página está fuera del alcance del diseño de la página de inicio. Es una parte del pie de página del tema en todo el sitio. Sin embargo, decidí agregarlo porque ya estaba en racha.

Esta sección requiere el bloque Columnas. A partir de ese momento, se trata de colocar un bloque de encabezado para cada columna. Agregué un bloque de Párrafo, Calendario y Galería para recrear los tres "widgets".

El diseño del bloque Calendario de Ariele Lite funciona mejor en un fondo de color claro. Fue un pequeño punto doloroso que pasé por alto. A largo plazo, WordPress debería proporcionar controles de diseño en los bloques que les faltan.