Para criar plug-ins de bloco para WordPress usando Node.js, siga estas etapas:
1. Instale Node.js e npm:
- Certifique-se de ter o Node.js instalado em sua máquina. Caso contrário, baixe e instale-o no site oficial do Node.js[1][2].
2. Configurar um plug-in de bloco inicial:
- Navegue até o diretório `wp-content/plugins` da sua instalação de desenvolvimento local. Em seguida, execute o comando `npx @wordpress/create-block` para criar um plugin de bloco. Este comando gera todo o código necessário para iniciar um projeto e integra uma configuração de construção JavaScript moderna sem necessidade de configuração[3][4].
3. Configure o plug-in de bloco:
- O comando `create-block` solicita entradas passo a passo. Você também pode usar o modo de início rápido para passar opções específicas diretamente na linha de comando, eliminando a necessidade de prompts interativos[4].
4. Crie e execute o plug-in de bloco:
- Execute `npm start` para iniciar um servidor de desenvolvimento e reconstruir automaticamente o bloco sempre que qualquer alteração no código for detectada. Quando você estiver pronto para implantar seu bloco, use `npm run build` para otimizar seu código e torná-lo pronto para produção[4].
5. Integrar com WordPress:
- Ative o plugin gerado no WordPress. Isso disponibilizará o bloco no Editor[4].
6. Personalizar e ampliar o bloco:
- Modifique o código padrão para personalizar e estender o bloco conforme necessário. Isso envolve o uso de JavaScript moderno (ESNext e JSX) e o aproveitamento do pacote `wp-scripts` para tarefas de construção e linting[4].
Seguindo essas etapas, você pode criar e gerenciar plug-ins de blocos personalizados para WordPress usando Node.js e o pacote `@wordpress/create-block`.
Citações:[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