Uma visão geral do WordPress Create Block Script

A equipe oficial do WordPress Editor (Gutenberg) forneceu um pequeno script para você criar um plugin de bloco com seu @wordpress/create-blockscript npm.

Este artigo fornece uma visão geral do WordPress Create Block Script, juntamente com detalhes do que ele produz.

NOTA: Este artigo é para uma versão mais antiga do Create Block Script

Embora a teoria ainda possa ser aplicada, algumas das informações neste artigo podem não ser mais compatíveis com o script de bloco de criação mais recente. Você pode ver nosso guia de script de criação de bloco atualizado aqui.

Executando o script de criação de bloco

A documentação oficial fornece alguns parâmetros diferentes para passar para o npm init @wordpress/blockcomando.

Para minha configuração, executei-o no modo interativo omitindo os parâmetros. Eu digitei o seguinte comando no meu terminal (enquanto estava cdna minha wp-content/pluginspasta):

npm init @wordpress/block

O Script me fez algumas perguntas para me ajudar a construir meu bloco.

Querendo criar um bloco inicial para uma ideia de plugin que eu tenho (‘Notas Saudáveis’), respondi as perguntas da seguinte forma:

• O bloco de slug usado para identificação (também o plugin e o nome da pasta de saída): Eu quero que meu bloco seja chamado Wholesome Notes, então eu digitei wholesome-notes.

• O namespace interno para o nome do bloco (algo exclusivo para seus produtos): Como deve ser exclusivo para todos os meus produtos que inseri wholesome-code, pois esse é o nome da minha empresa. Em retrospectiva, isso seria melhor em curto para wcou wcltd.

• O título de exibição do seu bloco: digitei o título do plugin, Wholesome Notes.

• Uma visão geral do WordPress Create Block Script Eu não tinha 100% de certeza do que queria escrever aqui, então acabei de inserir um texto que pretendo alterar mais tarde.

• O dashicon para facilitar a identificação do seu bloco (opcional): Trazendo rapidamente o recurso WordPress Dashicons, eu escolhi admin-commentsporque ele tem um ícone de estilo de nota.

• O nome da categoria para ajudar os usuários a navegar e descobrir seu bloco (use as teclas de seta): Eu escolhi layout, embora para ser honesto esse tipo de bloco provavelmente precisaria de sua própria categoria. Isso é algo que eu posso alterar em uma data posterior.

Corridanpm init @wordpress/block

O Script então foi em frente e instalou todas as dependências necessárias via npm (neste ponto, ele apenas instala o wp-scriptspacote npm como uma dependência).

Inspecionando a Saída

Com os comandos acima, o WordPress Create Block Script fornece a seguinte saída:

• notas saudáveis
  • construir
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • editor.css
  • pacote.json
  • estilo.css
  • notas-saudáveis.php

@wordpress /bloco de saída

A seguir está uma divisão de cada um desses arquivos e pastas.

wholesome-notes

Esta é a pasta raiz do plugin, ela tem o mesmo nome que eu digitei para o ‘slug’ nas perguntas de configuração.

/build

Esta é a pasta de compilação. Ele contém todos os ativos JavaScript e PHP gerados a partir da /srcpasta. Eles são enfileirados por meio do wholesome-notes.phparquivo do carregador principal.

/build/index.assets.php

Este arquivo PHP é gerado automaticamente quando a /srcpasta é compilada. Ele contém uma matriz de todas as decências JavaScript do WordPress Editor (Gutenberg) usadas pelo seu plugin. Ele é enfileirado por meio do wholesome-notes.phparquivo do carregador principal.

/build/index.js

Este é o principal arquivo JavaScript compilado e é enfileirado por meio do wholesome-notes.phparquivo principal do carregador.

/build/index.js.map

Este arquivo é gerado apenas quando você está compilando os ativos para o modo de desenvolvimento (IE você executa npm starte não npm run buildquando você está compilando seus ativos. É um arquivo útil para depuradores JavaScript para ajudar a identificar nomes de arquivos e números de linha se ocorrerem erros.

/node_modules

Esta é a pasta na qual todas as dependências de JavaScript do seu plugin estão instaladas.

/src

Esta é a pasta que contém todos os recursos não compilados do seu plugin.

/src/index.js

Este é o principal arquivo JavaScript não compilado para o seu bloco WordPress Editor (Gutenberg). Inicialmente contém toda a lógica do bloco.

/.editorconfig

Este arquivo contém predefinições úteis para seu IDE (Ambiente de Desenvolvimento Integrado), como o Visual Studio Code.

/.gitignore

Este arquivo diz ao git para ignorar certos arquivos quando você está submetendo a um repositório git (como o GitHub).

/editor.css

Os estilos neste arquivo são produzidos apenas no editor, ele é enfileirado por meio do wholesome-notes.phparquivo do carregador principal.

/package.json

Este arquivo contém todas as dependências do npm para o plugin e os comandos que você pode executar. Note que o plugin utiliza wp-scripts( @wordpress/scripts) como base, então inicialmente as dependências carregadas são para aquele pacote.

/style.css

Os estilos neste arquivo são produzidos no editor e no front-end do site, eles são enfileirados por meio do wholesome-notes.phparquivo do carregador principal.

/wholesome-notes.php

Este é o arquivo de carregamento principal para o plugin. Seu nome foi definido através do ‘slug’ que inserimos no script de configuração inicial. Ele enfileira todos os recursos JavaScript necessários para o plug-in.

Explorando o plug-in

Depois de ter criado seu plugin, se você ativá-lo e inseri-lo no editor, ele se parecerá com as seguintes capturas de tela (front-end e back-end).

Criar script de bloco – Front-end padrão

Criar script de bloco – back-end padrão

Como você pode ver, o bloco nos fornece algumas saídas básicas que podemos facilmente alterar para implementar nosso próprio bloco.

Bloquear CSS

Como você pode ver nas capturas de tela, o código de exemplo editor.cssimplementa uma borda vermelha no editor, enquanto os estilos de exemplos styles.csssão aplicados tanto ao front-end quanto ao back-end.

Bloquear JavaScript

O ponto de entrada para personalizar o bloco recém-criado é o /src/index.jsarquivo.

Há muita documentação embutida neste arquivo, explicando por que certas funções estão sendo importadas, como registerBlockTypepara o registro do bloco e __para o suporte à tradução de texto i18n.

Criar comentários inline index.js do bloco

Ele também fornece algumas saídas muito básicas para as funções edite saveque são passadas para o registro do bloco.

Nota: Em versões posteriores do script, eles foram extraídos em seus próprios arquivos e incluídos como módulos neste arquivo.

Criar bloco index.js Editar e salvar

Construindo o bloco

De acordo com a documentação create block npm, você pode usar vários comandos em seu terminal (da pasta raiz do seu plugin), para fazer coisas como verificar a qualidade do código ou atualizar pacotes.

Os principais comandos que você precisará para construir o bloco serão npm startcompilar seu plugin para desenvolvimento e npm run buildcompilar a versão final.

wp-scripts(do @wordpress/scriptspacote npm) é a principal dependência do seu plugin. Essa dependência abstrai todas as ferramentas do seu bloco, para que você possa se concentrar apenas na construção do JavaScript.

Nos bastidores wp-scriptsusa webpackpara compilar todos os seus ativos no /build/index.jsarquivo.

Você pode ler mais sobre wp-scriptso Block Editor Handbook e você pode descobrir mais sobre a configuração de compilação do webpack na seção ‘JavaScript Build Setup’ do Handbook.

Estendendo a configuração do webpack Create Block

A base de código para o seu bloco pode abranger vários arquivos, ou até mesmo ter vários sub-blocos, ou conter estilos complexos. Em momentos como esses, você pode querer estender a configuração do webpack que está embutida no wp-scripts.

Para obter mais informações, consulte meu artigo sobre como estender a wp-scriptsconfiguração do webpack ou confira a seção Package Scripts do Block Editor Handbook para obter orientação.