Usando a ferramenta create-block

Olá, e boas-vindas ao Learn WordPress.

Neste tutorial, você aprenderá a usar a ferramenta create-block para criar a estrutura básica de um novo plugin de bloco. Neste vídeo, abordaremos o que é a ferramenta create-block, quais softwares você precisa para usá-la, como criar a estrutura básica de um novo bloco usando o create-block e o código gerado pelo create-block.

O create-block é uma ferramenta oficial de linha de comando desenvolvida por colaboradores do WordPress para criar a estrutura básica ou criar um novo plugin de bloco. Ela gera tudo o que você precisa para começar um novo plugin de bloco e integra uma configuração de compilação moderna sem necessidade de configuração. Você pode saber mais sobre o create-block visitando o manual do Block Editor na página de recursos para desenvolvedores do WordPress, em Guias de referência -> Pacotes -> @wordpress/create-block.

para usar a ferramenta create-block, você precisará de uma instalação local do WordPress, um terminal para executar comandos e o Node.js e o npm. Você pode usar qualquer instalação local do WordPress com a qual esteja familiarizado, como o LocalWP ou o DesktopServer. Se ainda não tiver uma instalação local do WordPress, consulte o tutorial Instalações locais do WordPress para iniciantes em learn.wordpress.org.

Se você estiver usando Mac OS ou qualquer sistema operacional Linux, poderá usar o terminal integrado. Para usuários do Windows, recomendamos instalar e usar o PowerShell, que pode ser encontrado em microsoft.com/powershell.

Por fim, você precisa instalar o Node.js, que também instala o npm. A ferramenta create-block funcionará com qualquer versão estável do Node.js superior à versão 12. No entanto, dependendo dos seus requisitos de desenvolvimento, talvez seja necessário poder alternar rapidamente entre versões do Node.js em diferentes projetos. Felizmente, você pode fazer isso usando o gerenciador de versões do node de código aberto, também conhecido como nvm. Para encontrá-lo, acesse nvm.sh, que direcionará você para a página do GitHub. O grande benefício de usar o nvm é que, se os requisitos de versão mudarem, será muito fácil atualizar sua versão do Node.js usando o nvm. Para os fins deste tutorial, instalaremos a mesma versão necessária para o desenvolvimento do core do Bloco, listada no manual do Block Editor, na página do ambiente de desenvolvimento Começando.

Atualmente, recomenda-se instalar a versão 14 do Node.js. Se você estiver usando macOS ou Linux, poderá abrir o aplicativo de terminal padrão e instalar o nvm executando o script de instalação do npm que você copia da documentação do nvm.

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

Depois que o npm estiver instalado, você precisará fechar o terminal e reabri-lo.

Em seguida, você poderá usar o comando nvm install para instalar as versões do Node.js e do npm necessárias.

nvm install 14

Se estiver usando um computador com Windows, será necessário instalar o gerenciador de pacotes Chocolatey para Windows para instalar o nvm. Primeiro, abra o PowerShell com privilégios administrativos clicando com o botão direito do mouse no item de menu do PowerShell e selecionando Executar como administrador. Em seguida, acesse a documentação de configuração do Chocolatey e role até as instruções de instalação com o PowerShell. Copie as instruções e clique com o botão direito na janela do PowerShell para colá-las.

Depois que o Chocolatey estiver instalado, use o comando a seguir para instalar o nvm:

choco install -y nvm

Depois que o nvm estiver instalado, use o comando nvm install para instalar as versões necessárias do Node.js e do npm;

nvm install 14

Por fim, execute o comando nvm use para usar a versão do Node.js e do npm que você acabou de instalar.

nvm use 14.20.0

Agora você está pronto para usar a ferramenta create-block para criar seu primeiro bloco. No terminal, altere o diretório para o diretório de plugins do conteúdo do WP da sua instalação local do WordPress. No meu caso, ele é:

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

Em seguida, execute o comando create-block e passe um slug de plugin para esse comando. O slug é o nome exclusivo do plugin.

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

Isso criará um novo plugin no diretório wp-learn-todo, instalará os pacotes necessários e criará os arquivos necessários. Você perceberá que não precisamos instalar o pacote create-block. O comando npx nos permite executar o pacote a partir do local em que ele está hospedado na nuvem.

Depois que a estrutura básica do novo plugin for criada, você deverá ter uma nova pasta de plugin na instalação do WordPress com o nome do slug passado ao create-block.

Lá está ele: wp-learn-todo. Vamos analisar os diretórios e arquivos mais importantes desse plugin.

O diretório build é o local onde os arquivos finais de recursos do bloco serão compilados para distribuição. node_modules contém todos os pacotes ou módulos do node necessários para o desenvolvimento. O diretório src, ou diretório de código-fonte, é onde você fará a maior parte da codificação; todo o código do seu bloco fica aqui. O package.json é o arquivo que determina de quais pacotes o seu código precisa. O readme.txt é um arquivo usado pelo repositório de plugins WordPress.org para gerenciar seu plugin. E o arquivo wp-learn-todo.php é o arquivo principal do plugin que informa ao WordPress que este é um plugin.

Se abrirmos o WordPress e formos para o Block Editor, deveremos conseguir adicionar este bloco. Primeiro, precisaremos ativar o bloco, e o learn-todo está ativado. Vamos criar uma nova publicação e adicionar um novo bloco. Aqui está. No momento, ele contém apenas um parágrafo com algum texto.

E assim terminamos este tutorial sobre como usar o create-block. Se você estiver pronto para começar a criar blocos personalizados, confira o tutorial Adicionando suporte a blocos a um plugin existente. Para ver mais tutoriais de desenvolvimento para WordPress, visite learn.wordpress.org.

Boa programação.