La gente que curra en el equipo del #core-editor de WordPress cada vez nos pone más fácil crear un bloque nuevo. Gracias a los paquetes de npm tenemos en un momentillo el esqueleto básico para crear un bloque tal y como nos lo muestran aquí. Con el sistema que se instala desde aquí la versión necesaria es la 8.0 de WordPress, pero la sencillez en el código que se genera para encolar los archivos de los bloques es alucinante (antes se creaban una tira de funciones que no veas 😁). El árbol de archivos que se crea al instalar un bloque con npm create-block es como este (al menos cuando estoy escribiendo esto):
En el archivo my-custom-block.php es donde registramos nuestro bloque con:
Con este código ya se encola todos los archivos que necesitamos para crear el bloque que están en la carpeta src (carpeta sobre la que trabajar). En el archivo block.json tienes que cubrir los datos necesarios para registrar el bloque (nombre, descripción, categoría, etc). Todos estos archivos (incluido el block.json) se pasan a la carpeta build ya compilados de forma automática con el comando npm start (para desarrollo) o con el comando npm run build.
Pero ¿qué pasa si quieres añadir dos bloques en el mismo plugin? Posiblemente haya otros métodos más profesionales o mejores. Yo aquí os voy a mostrar el que yo usé para crear dos bloques. La arquitectura de la carpeta src la cambié a la siguiente:
Básicamente lo que hice fue meter en dos carpetas una copia de los archivos que nos crea el npm create-block con los nombres de los bloques que voy a crear. En el block.json de cada carpeta, tienes que meter los datos del bloque y el name (que es el identificador de cada bloque) que debe ser único. Para registrar los dos bloques lo hice con la siguiente función:
El cómo se crea cada uno de los bloques queda para otro día 😁.
Y listo!! ¿Alguna duda o aclaración? No dudes en hacer un comentario con ella 😉