WordPress: Crear un nuevo tema de bloques con Create Block Theme

Create Block Theme es el plugin oficial de WordPress para la creación y exportación de «Temas de Bloques» (Block Themes). Tecnología de WP soportada desde la versión 5.9.

Lo primero que debemos hacer, es instalarlo.

En WP nos vamos al menu Plugins -> Añadir plugin -> Los buscamos con «Create Block Theme» -> Y finalmente lo instalamos.

Nuestro siguiente paso es Crear el Tema de Bloques y para ello vamos al menú Apariencia -> Creare Block Theme

De las opciones disponibles, elegimos «Crear un nuevo tema en blanco». El resto de las opciones nos permiten trabajar/crear temas a partir del tema activo, en este caso «Twenty Twenty-five».

En la ventana que aparece llenamos la siguiente información:

Nombre del Tema: «Example Theme» (El único campo obligatorio)

El resto de las opciones son opcionales, pero puedes ingresar la información que desees, estos datos se pueden modificar más adelante.

Presionamos el boton [Crear y activar un tema en blanco] y listo, nuestro tema de bloques esta creado y activado.

Obviamnete el tema creado es extremadamente básico. El siguiente paso es mejorar ese aspecto, pero es algo que veremos en futuros artículos. Por ahora nos limitamos a revisar que archivos componen el tema.

Nos dirigimos a wp-content -> themes -> example-theme y los archivos que tenemos son:

example-theme/
└── parts/
│   ├── footer.html
│   └── header.html
└── templates/
│      ├── index.html  
├── readme.txt
├── screenshot.png
├── style.css
└── theme.json

Donde:

• parts: Carpeta que contiene los archivos HTML que componen nuestra Theme. Inicialmente solo tenemos al header.html y footer.html. Podemos añadir otras partes como el sidebar.html, pero eso es algo que veremos en futuros post.
• templates: Son los «tipos de página» que tendrá nuestro Theme segun las necesidades que tengamos, por ejemplo home.html, page.html, search.html, etc. Por defecto solo contamos con index.html.
• readme.txt: Este archivo contiene o tendra que contener información relativa a nuestro Theme, como su información general, versión del theme, compatibilidad con diferentes versiones de wp, plugins que utiliza, etc. Tambien se debe registrar los cambios que sufra en el transcurso de su vida.
• screenshot.png: Es la imagen en miniatura de nuestro theme.
• style.css: este es el archivo que contiene el CSS de nuestro Theme (o al menos, lo era en los temas clásicos). Ya no se utiliza mucho, pero sigue siendo importante. Si lo abres veras que no esta vacio, contiene información muy importante sobre el tema, como su nombre, descripción, etc.
• theme.json: Este es uno de los archivos más importantes, contiene informacion en formato JSON (JavaScript Object Notation). Es en este archivo donde WP guarda la información del Theme. Puedes abrirlo, pero no lo edites aún ya que el theme podria dejar de funcionar por falta de tan solo una coma «,».

Si no te atreves a abrirlo, debajo te dejo el contenido:

{
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json",
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
		"spacing": {
			"units": [ "%", "px", "em", "rem", "vh", "vw" ]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				}
			]
		},
		"useRootPaddingAwareAlignments": true
	},
	"templateParts": [
		{
			"area": "header",
			"name": "header"
		},
		{
			"area": "footer",
			"name": "footer"
		}
	],
	"version": 3
}

Por el momento es todo.

Enjoy!!!