Distribuindo Seus Blocos: Plugins, Repositório e GitHub

Fala, dev! 👋

Parabéns por chegar até aqui! Depois de construir blocos avançados com React, APIs, slots, renderização condicional e validação… chegou a hora de colocar tudo no mundo. ✈️

Neste último post da série, você vai aprender como empacotar e distribuir seus blocos personalizados como um plugin WordPress completo, seja para uso próprio, para clientes ou para publicação no GitHub ou no repositório oficial do WordPress.org.

📦 Estrutura final recomendada

meu-plugin-blocos/
├── blocks/
│   └── meu-bloco/
│       ├── block.json
│       ├── edit.js
│       ├── save.js
│       └── style.css
├── dist/
│   ├── meu-bloco.js
│   └── meu-bloco.css
├── plugin.php
├── readme.txt
├── package.json
└── .gitignore

🔧 1. Criando um plugin real

Crie um arquivo plugin.php na raiz:

<?php
/**
 * Plugin Name: Blocos WP24Horas
 * Description: Conjunto de blocos Gutenberg criados com React e @wordpress/scripts.
 * Version: 1.0.0
 * Author: Asllan Maciel
 * Text Domain: wp24h
 */

if ( ! defined( 'ABSPATH' ) ) exit;

require_once plugin_dir_path(__FILE__) . 'includes/init.php';

Crie um loader no init.php que registre todos os blocos dinamicamente (como já fizemos nos posts anteriores com o Init).

🔄 2. Gerando os assets para produção

No package.json, certifique-se de ter o comando:

"scripts": {
  "build": "wp-scripts build"
}

Então, gere os arquivos minificados com:

npm run build

🚀 3. Publicando no GitHub

1. Crie o repositório com nome claro: wp24h-custom-blocks
2. Inclua readme.md com instruções de instalação
3. Use .gitignore para excluir node_modules, .git, .vscode, vendor/ etc.

git init
git remote add origin https://github.com/usuario/meu-plugin.git
git add .
git commit -m "Primeira versão dos blocos"
git push -u origin main

🌍 4. Publicando no WordPress.org (opcional)

1. Crie o readme.txt com formato padrão: https://wordpress.org/plugins/developers/
2. Valide o plugin com: wp plugin validate ./meu-plugin
3. Siga o processo de envio: https://wordpress.org/plugins/developers/add/

📦 5. Distribuindo como ZIP

Você pode simplesmente zipar a pasta com:

• plugin.php
• includes/
• dist/
• blocks/
• readme.txt

E instalar como qualquer plugin via Painel > Plugins > Adicionar novo > Enviar plugin.

🧠 Boas práticas finais

• Documente os blocos com exemplos no readme.md
• Use block.json completo (com keywords, example, textdomain)
• Marque versões no GitHub (git tag)
• Faça build antes de cada release (npm run build)

🧪 Resultado

Você terá um plugin profissional, distribuível e reutilizável com seus blocos, podendo instalar em qualquer projeto, ou até enviar para clientes e colaboradores com confiança.