Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Creando complementos de bloques para WordPress con Node.js


Creando complementos de bloques para WordPress con Node.js


Para crear complementos de bloques para WordPress usando Node.js, siga estos pasos:

1. Instale Node.js y npm:
- Asegúrese de tener Node.js instalado en su máquina. De lo contrario, descárguelo e instálelo desde el sitio web oficial de Node.js[1][2].

2. Configurar un complemento de bloque inicial:
- Navegue hasta el directorio `wp-content/plugins` de su instalación de desarrollo local. Luego, ejecute el comando `npx @wordpress/create-block` para crear un complemento de bloque. Este comando genera todo el código necesario para iniciar un proyecto e integra una configuración de compilación de JavaScript moderna sin necesidad de configuración[3][4].

3. Configure el complemento de bloqueo:
- El comando `crear-bloque` le solicita entradas paso a paso. También puede utilizar el modo de inicio rápido para pasar opciones específicas directamente en la línea de comando, eliminando la necesidad de indicaciones interactivas[4].

4. Crea y ejecuta el complemento Block:
- Ejecute `npm start` para iniciar un servidor de desarrollo y reconstruir automáticamente el bloque cada vez que se detecte algún cambio en el código. Cuando esté listo para implementar su bloque, use `npm run build` para optimizar su código y prepararlo para producción[4].

5. Integre con WordPress:
- Activar el complemento generado en WordPress. Esto hará que el bloque esté disponible en el Editor[4].

6. Personaliza y amplía el bloque:
- Modifique el código repetitivo para personalizar y ampliar el bloque según sea necesario. Esto implica utilizar JavaScript moderno (ESNext y JSX) y aprovechar el paquete `wp-scripts` para tareas de compilación y linting[4].

Siguiendo estos pasos, puede crear y administrar complementos de bloques personalizados para WordPress usando Node.js y el paquete `@wordpress/create-block`.

Citas:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY