Uso de la herramienta create-block

Hola y bienvenido a Learn WordPress.

En este tutorial, aprenderás a usar la herramienta create-block para crear la estructura básica de un nuevo plugin de bloque. En este video, veremos qué es la herramienta create-block, qué software necesitas para usar create-block, cómo crear la estructura básica de un nuevo bloque usando create-block y el código generado por create-block.

Create-block es una herramienta oficial de línea de comandos desarrollada por colaboradores de WordPress para crear la estructura básica o crear un nuevo plugin de bloque. Genera todo lo que necesitas para comenzar un nuevo plugin de bloque e integra una configuración de compilación moderna sin necesidad de configuración. Puedes leer más sobre create-block visitando el manual del Editor de bloques en la página de recursos para desarrolladores de WordPress, en Guías de referencia -> Paquetes -> @wordpress/create-block.

Para usar la herramienta create-block, necesitarás una instalación local de WordPress, un terminal para ejecutar comandos y Node.js y npm. Puedes usar cualquier instalación local de WordPress con la que te sientas cómodo, como LocalWP o DesktopServer. Si todavía no tienes una instalación local de WordPress, consulta el tutorial Instalaciones locales de WordPress para principiantes en learn.wordpress.org.

Si usas Mac OS o cualquier sistema operativo Linux, puedes utilizar el terminal integrado. Para los usuarios de Windows, recomendamos instalar y usar PowerShell, que puedes encontrar visitando microsoft.com/powershell.

Por último, necesitas instalar Node.js, que también instala npm. La herramienta create-block funcionará con cualquier versión estable de Node.js superior a la versión 12. Sin embargo, dependiendo de tus requisitos de desarrollo, es posible que necesites poder cambiar rápidamente entre versiones de Node.js en distintos proyectos. Afortunadamente, puedes hacerlo usando el administrador de versiones de Node de código abierto, también conocido como nvm. Para encontrarlo, puedes visitar nvm.sh, que te dirigirá a la página de GitHub. Lo mejor de usar nvm es que, si cambian tus requisitos de versión, es muy fácil actualizar tu versión de Node.js mediante nvm. Para los fines de este tutorial, instalaremos la misma versión necesaria para el desarrollo del núcleo de bloques, que aparece en el manual del Editor de bloques, en la página del entorno de desarrollo de Primeros pasos.

Actualmente, se recomienda instalar Node.js versión 14. Si usas macOS o Linux, puedes abrir la aplicación de terminal predeterminada e instalar nvm ejecutando el script de instalación de npm que copiarás de la documentación de nvm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Una vez instalado npm, debes cerrar el terminal y volver a abrirlo.

Después, puedes usar el comando nvm install para instalar las versiones de Node.js y npm que necesitas.

nvm install 14

Si utilizas un equipo con Windows, tendrás que instalar el administrador de paquetes Chocolatey para Windows para instalar nvm. Primero, abre PowerShell con privilegios administrativos haciendo clic derecho en el elemento del menú PowerShell y seleccionando Ejecutar como administrador. Después, visita la documentación de configuración de Chocolatey y desplázate hasta las instrucciones de instalación con PowerShell. Copia las instrucciones y haz clic derecho en la ventana de PowerShell para pegarlas.

Una vez instalado Chocolatey, usa el siguiente comando para instalar nvm:

choco install -y nvm

Una vez instalado nvm, usa el comando nvm install para instalar las versiones necesarias de Node.js y npm;

nvm install 14

Por último, ejecuta el comando nvm use para usar la versión de Node.js y npm que acabas de instalar.

nvm use 14.20.0

Ahora estás listo para usar la herramienta create-block y crear tu primer bloque. En el terminal, cambia el directorio al directorio de plugins de contenido de WP de tu instalación local de WordPress. En mi caso, es:

cd development/websites/wordpress/wp-content/plugins

Después, ejecuta el comando create-block y pásale un slug de plugin. El slug es el nombre único del plugin.

npx @wordpress/create-block wp-learn-todo

Esto creará un nuevo plugin en el directorio wp-learn-todo, instalará los paquetes necesarios y creará los archivos requeridos. Observa que no tuvimos que instalar el paquete create-block. El comando npx nos permite ejecutar el paquete desde donde está alojado en la nube.

Una vez creada la estructura básica del nuevo plugin, deberías tener una nueva carpeta de plugin en tu instalación de WordPress con el nombre del slug que pasaste a create-block.

Ahí está, wp-learn-todo. Veamos los directorios y archivos más importantes de este plugin.

El directorio build es la ubicación donde se compilarán los archivos de recursos finales del bloque para su distribución. node_modules contiene los paquetes o módulos de Node que necesitas para el desarrollo. El directorio src o de origen es donde realizarás la mayor parte de tu programación; todo el código de tu bloque se encuentra aquí. package.json es el archivo que determina qué paquetes necesita tu código. readme.txt es un archivo que utiliza el repositorio de plugins de WordPress.org para administrar tu plugin. Y el archivo wp-learn-todo.php es el archivo principal del plugin que informa a WordPress de que se trata de un plugin.

Si abrimos WordPress y vamos al Editor de bloques, deberíamos poder añadir este bloque. Primero tendremos que activar el bloque, y learn-todo está activado. Vamos a crear una nueva entrada y añadir un nuevo bloque. Ahí está. De momento, solo contiene un párrafo con algo de texto.

Y con esto terminamos este tutorial sobre el uso de create-block. Si estás listo para comenzar a crear bloques personalizados, consulta el tutorial Añadir compatibilidad con bloques a un plugin existente. Para ver más tutoriales para desarrolladores de WordPress, visita learn.wordpress.org.

Feliz programación.