Cómo construir un tema de bloques (resumen de lo publicado en Blogpocket y estado del arte)

En este post resumimos lo publicado hasta ahora en Blogpocket sobre cómo construir un tema de bloques y actualizamos el estado del arte (WordPress 6.2 Dolphy).

Resumen de lo publicado en Blogpocket

• En primer lugar, hay que diferenciar entre temas clásicos y temas de bloques. Si posees activo un tema clásico, deberías considerar convertirlo en un tema de bloques. Y si vas a empezar un proyecto nuevo, no tiene mucho sentido hacerlo con un tema clásico.
• Generadores de temas de bloques. Lo más fácil para crear un tema de bloques es emplear un generador. Aquí se publicó una lista en julio de 2022. De entre todos ellos, me quedaría con el plugin Create Block Theme, ya que -como veremos a continuación- incluye la opción extra de usar localmente fuentes de Google. Aquí hay más información sobre el generador de Carolina Nymark y en este otro post sobre el de Jamie Marsland.

Estado del arte

Desde 2001, he buscado que se pueda crear un sitio web sin código, incluida la personalización del front-end, sin depender de las restricciones impuestas por los desarrolladores de temas. ¡Y por fin hoy es posible con WordPress! Un ejemplo: mi última criatura (Artxtu Formació) hecha solo con bloques nativos y el plugin ACF.

El 29 de marzo de 2023, Anne McCarthy publicó Exploración del programa FSE: Crear un tema de bloques. En ese artículo se describía detalladamente el proceso para crear un tema de bloques.

Con el lanzamiento de WordPress 6.2, se buscaba explorar el Editor del sitio como una herramienta de diseño, pidiéndole a la gente que creara un tema de bloques, sin ningún código, directamente en el editor y usando las herramientas actuales. El objetivo era encontrar brechas en la funcionalidad y obtener comentarios sobre la experiencia de usar el Editor del sitio de esta manera centrada en el diseño, mientras se buscaba expandir la cantidad de temas de bloques.

Resumen del proceso para crear un tema de bloques

De acuerdo a esa propuesta, el proceso para crear un tema de bloques es muy fácil y se podría resumir de la siguiente manera:

• Ten un sitio de prueba usando la última versión de WordPress. Es importante que este no sea un sitio de producción/en vivo. Para ello, es recomendable usar la aplicación Local.
• Instala y activa el plugin Create Block Theme.
• Instala y active Gutenberg 15.7 (o la última versión). Esto es opcional.
• Ve a Apariencia > Crear tema de bloques.
• Elige «Crear tema en blanco» para comenzar completamente desde cero o puedes usar el tema de bloques actualmente activo, eligiendo la opción «Clonar». Puedes partir de cualquier tema; por ejemplo, el Twenty-Twenty Three.
• Completa la información para cualquiera de las opciones. Cuando hayas terminado, selecciona «Generar».
• Dirígete a Apariencia > Temas y activa el tema que acabas de crear.
• Dirígete a Apariencia > Administrar fuentes del tema.
• Desde ahí, puedes agregar una fuente de Google o una fuente local. Esto instalará las fuentes como parte del tema, pero esas fuentes aún deben aplicarse. 
• Una vez agregada, puedes administrar los pesos de fuente. 
• Una vez que hayas terminado, dirígete a Apariencia > Editor y abre Estilos para configurar esas fuentes para usarlas en tu tema en Tipografía. 
• Dirígete a Apariencia > Editor y comienza a personalizar como quieras.
• Cuando hayas terminado de hacer los cambios, ve a Apariencia > Crear tema de bloques.
• Desde allí, elige la opción «Exportar». Esta opción incluirá automáticamente los cambios de usuario para que no tengas que sobrescribirlos primero.

Et voilà. Ahí tendrás un tema nuevo creado por ti desde cero o basado en uno cualquiera.

Crear un tema de bloques a partir de Frost

Frost es el tema que tenemos en Blogpocket y con el que hemos diseñado un front-end brutalista y con el que hemos conseguido que la página home sea más limpia que el 95% de las páginas web probadas en websitecarbon.com. Solamente se produce la cantidad de 0,05g de CO2 cada vez que alguien la visita. Si la página recibiese unas 10.000 visitas al mes durante un año, emitiría la misma cantidad de carbono que absorbe un árbol en ese año.

Además, Frost viene con un completo conjunto de patrones de bloque minimalistas con el fin de ayudarte a diseñar fácilmente las plantillas y páginas de tu sitio web.

Siguiendo el método visto anteriormente, en este boletín enviado a nuestros suscriptores por email, dábamos las pautas para crear un tema de bloques a partir de Frost:

• Para la creación manual de un tema básico, basado en Frost, te remito al artículo de Brian Gardner How (and Why) to Build a Base WordPress Theme. Sin embargo, es muy sencillo porque solo hay que entrar en style.css, function.php y todos los archivos dentro de la carpeta /patterns, cambiando la referencia al nombre del tema; es decir sustituyendo “frost” por “mi-tema” (siendo “mi-tema” el nombre otorgado al nuevo tema).
• Como hemos visto, con el plugin Create Block Theme también lo puedes hacer, ahorrándote los cambios manuales. Simplemente, personaliza el tema y luego elige la opción “Clone Frost”, rellenando los valores del formulario (nombre del tema, autor, etc.).
• Frost ha implementado un generador de temas básicos. Este generador tomará el último código fuente de Frost y reemplazará todas las instancias de las palabras, y otra información del tema para obtener un nuevo tema iniciado listo para usar.

En el siguiente episodio de HECHO CON BLOQUES, te explico cómo crear un tema de bloques a partir de Frost.

Comparte en Mastodon:

Y aún hay más…

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

¡Quiero suscribirme!