Distribuindo Seus Blocos: Plugins, Repositório e GitHub

WordPress Extremo: Gutenberg + React + Blocos Customizados

Bloco de Posts com Filtro por Múltiplas Categorias

Filtrando Posts por Categoria no Editor do Bloco

Bloco Dinâmico com Renderização no Servidor

Conectando Blocos com a REST API do WordPress

Componentes Reutilizáveis e Atributos Compostos em Blocos Gutenberg

Ícones, Imagens e Classes Personalizadas no Gutenberg

Cor, Alinhamento e Estilo Dinâmico com Gutenberg + React

Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

Campos Dinâmicos e InspectorControls no Gutenberg: Deixe Seu Bloco Interativo

Criando Blocos Personalizados com Gutenberg e React

Salvando Dados Personalizados no Backend via REST API

Blocos Reutilizáveis com InnerBlocks no Gutenberg

Comunicação entre Blocos com Block Context API no WordPress

Como Criar Blocos Condicionais no Gutenberg com Atributos

Internationalização de Blocos Gutenberg (i18n)

Scripts e Estilos Condicionais: Carregando apenas quando necessário

Uso de Slots e Templates Personalizados

Inserindo Blocos via Código ou Shortcodes

Testes e Validação de Blocos com @wordpress/scripts

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.