Nova versão do create-block WordPress 4.0

Começo de 2021 gravei um vídeo sobre pacote node de criação de blocos Gutenberg o create-block WordPress ou @wordpress/create-block. De lá para cá já foram 2 grandes atualizações, pois quando gravei o vídeo o create-block WordPress estava na sua versão 2.0.

Agora vou cronologicamente adicionar as principais mudanças:

• 2.1.0 – Adicione uma maneira de fornecer um valor padrão no modelo para attributes e supports aos campos Block API
• 2.2.0 – Adicionar nova categoria de tema(theme) para selecionar o tipo de bloco.
• 2.4.0 – Bloco estruturado com o modelo esnext agora é registrado em block.json com o auxiliar register_block_type
• 2.5.0 – A inclusão de suporte para o campo de nova versão no arquivo de metadados block.json
• 2.6.0 – Inclusão de diretórios locais de passagem para --template e a propriedade slugPascalCase à lista de variáveis que podem ser usadas em templates.
• 2.7.0 – Adição da definição $schema ao arquivo block.json gerado.
• 2.8.0 – Integrado um novo comando plugin-zip para criar um arquivo zip para um plugin WordPress.
  • Inclusão a suporte para manipulação de modelos de bloco com o campo blockTemplatesPath na configuração de modelo externo.
  • Inclusão de um novo campo folderName para definir o local para o arquivo block.json e outros arquivos de bloco opcionais gerados a partir de modelos de bloco incluídos na pasta definida com a configuração blockTemplatesPath.
• 2.9.0 – Introduza a propriedade customScripts para permitir que os modelos definam scripts adicionais
• 3.0.0 – Foram adicionados prompts de CLI para três campos de cabeçalho de plug-in adicionais: Plugin URI, Domain Path, and Update URI
• 3.1.0 – Foi adicionado a variável de modelo npmDevDependencies para permitir a definição de devDependencies como parte de um modelo
• 3.3.0 – Lê o nome do bloco do arquivo block.json em arquivos JavaScript
• 4.0.0 – Adição do sinalizador --no-plugin para permitir o scaffolding de um bloco em um plug-in existente.
  • Introdução do sinalizador --variant para permitir a seleção de uma variante conforme definido no modelo.

Opções do create-block WordPress

O Script create-block WordPress possui uma série de opções que podemos personalizar o nosso projeto. Eu listarei as principais opções que temos.

--version : Você pode conferir qual a versão que você está utilizando

--template: Você pode escolher os formatos static ou es5

 npx @wordpress/create-block --template es5Code language: CSS (css)

--no-plugin: caso não queira criar uma estrutura de plugin

npx @wordpress/create-block --no-pluginCode language: CSS (css)

--namespace: o prefixo para o seu bloco

--title: o título que será exibido para o seu bloco

--short-description: uma descrição curta para o seu bloco

--category: categoria do seu bloco

--wp-scripts: integração com plugin scripts

--wp-env: habilita a integração com o pacote @wordpress/env, para usar esse recurso você precisa ter o Docker instalado no seu ambiente de desenvolvimento. Um vez que o Docker está configurado você só precisa rodar o comando para inicializar o seu ambiente local.

npm run env start

--variant: definir se o seu bloco é uma variante de um bloco nativo do WordPress. Por padrão, os blocos usam o modo estático que contém o método save que produz HTML para armazenar no banco de dados e usar no front-end. Se você preferir controle sobre a saída do bloco, você pode usar, se o template suportar, a variante de bloco dinâmico onde save é ignorado e o bloco é renderizado no front-end com a implementação PHP render_callback. Esta opção pode ser passada com o comando CLI:

npx @wordpress/create-block --variant dynamicCode language: CSS (css)

Comandos disponíveis com create-block WordPress

Para utilizar os comandos do create-block WordPress precisamos utilizar o template static para ter acesso aos comandos via terminal. Você não precisa instalar ou configurar ferramentas como webpack, Babel ou ESLint. Eles são pré-configurados e ocultos para que você possa se concentrar na codificação.

npm start

Para iniciar o projeto com create-block WordPress.

npm run build

Roda o código para produção.

npm run format

Formata todos os arquivos do projeto.

npm run lint:jsCode language: CSS (css)

Faz a verificação dos arquivos do projeto.

npm run plugin-zip

Cria um arquivo ZIP com o projeto em formato de plugin.

npm run packages-update

Atualiza os pacotes do WordPress.

Esses são os comandos disponíveis para o projeto que utilizam o template static⁣, além disso, podemos instalar outras dependências. Anteriormente eu gravei um vídeo sobre o @wordPress/create-block onde você pode conferir aqui:

Gostou desse conteúdo sobre create-block WordPress, confira mais posts relacionados:

• API de Blocos Gutenberg versão 2
• Internacionalização com blocos Gutenberg
• Como criar um bloco Gutenberg