Felizmente, a equipe de desenvolvimento do WordPress tem um npm script útil para você criar um plug-in de bloco que cria um bloco inicial para que você possa começar a usar rapidamente.

Por padrão, o tipo de plugin WordPress que isso cria é um ‘bloco’, mas também nos dá um bom ponto de partida para outros tipos de plugins Gutenberg.

Pré-requisitos

O nó deve estar instalado em sua máquina para que você possa usar o npmcomando (que significa Node Package Manager)
Instalação do WordPress
Editor de código
Acesso ao Terminal

Crie seu Plugin

Depois de instalar o node em sua máquina, você deve ter acesso ao npmcomando em seu terminal.

Abra seu terminal e certifique-se de ter cd‘d (Changed Directory) na pasta de plugins em sua instalação do WordPress (por exemplo cd wp-content/plugins, ).

Uma vez lá, execute o seguinte comando:

npm init @wordpress/block

Isso fará o download de tudo o que o script precisa para iniciar a compilação. Quando terminar, o script fará uma série de perguntas necessárias para configurar seu plugin.

Usando o Terminal para Executar o Script de Criação

Perguntas de configuração

O script fará as seguintes perguntas, aqui estão minhas respostas de exemplo:

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 Plugin, então eu digitei wholesome-plugin.
O namespace interno para o nome do bloco (algo exclusivo para seus produtos) — Como isso deve ser exclusivo para todos os meus produtos que inseri wholesomecode, pois esse é o nome da minha empresa.
O título de exibição do seu bloco — digitei o título do plugin, Wholesome Plugin.
A breve descrição do seu bloco (opcional) — digitei ” An example plugin to demonstrate the create-block-script“.
O dashicon para facilitar a identificação do seu bloco (opcional) — Trazendo rapidamente o recurso WordPress Dashicons, escolhi admin-pluginspor ter um ícone de plugin. Lembre-se de omitir dashicon- do prefixo dashicon ao fazer isso.
O nome da categoria para ajudar os usuários a navegar e descobrir seu bloco (use as teclas de seta) — eu escolhi design. Embora uma categoria personalizada provavelmente seja mais adequada.
O nome do autor do plugin (opcional). Vários autores podem ser listados usando vírgulas — digitei wholesomecode.
O nome abreviado da licença do plugin (opcional) — pressionei enter para aceitar a GPL v2.0 ou posterior.
Um link para o texto completo da licença (opcional) — pressionei enter para inserir o URL da licença GPL v2.0.
O número da versão atual do plugin — pressionei enter para inserir 0.1.0.

Perguntas de configuração de script

O script terminará de ser executado.

O que acabou de acontecer?

Algumas coisas acontecem enquanto o script está em execução, são elas:

Ele cria a pasta do plugin,
Ele gera todos os arquivos de plug-in (consulte explorando o plug-in para obter detalhes sobre o que eles fazem )
Ele instala as dependências necessárias, incluindo o @wordpress/scriptspacote (isso faz o trabalho pesado em termos de construção do plugin)
Ele compila o código
Ele gera uma lista de comandos que você pode usar

Comandos de compilação

Vamos explorar isso mais na seção Explorando o plugin.

Usando o plug-in

Antes de poder usar o plugin, você precisará ativá-lo. Você pode fazer isso escolhendo Pluginsno menu de administração do WordPress e selecionando activatesob o nome do plugin.

Ative o plug-in

Agora você precisa editar um post no WordPress e inserir o plugin usando o editor Gutenberg.

Inserindo o bloco em um post

Note que o plugin não faz muito por padrão, ele apenas cria um Bloco. No entanto, ele fornece uma estrutura para você usar para criar seu próprio plug-in.

Visualizando o bloco no front-end

Por padrão, o bloco se parece com isso no front-end. Observe que ele tem uma aparência um pouco diferente, isso é deliberado para que você possa se familiarizar com o CSS na frente e no back-end do WordPress.

O bloco no front-end

Explorando o plug-in

Todo o propósito do Create Block Script é que você crie seu próprio plugin. Vamos explorar os arquivos que ele gerou com mais detalhes:

Arquivos gerados

wholesome-plugin— Esta é a pasta raiz do plugin, 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-plugin.phparquivo do carregador principal.

**/build/index.css**— Este é o arquivo CSS do editor e é enfileirado por meio do wholesome-plugin.phparquivo principal do carregador.

**/build/index.js**— Este é o arquivo JavaScript compilado principal e é enfileirado por meio do wholesome-plugin.phparquivo principal do carregador.

**/build/style-index.css**— Este é o arquivo CSS de front-end e é enfileirado por meio do wholesome-plugin.phparquivo do carregador principal.

**/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 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 ativos não compilados do seu plugin.
**/src/edit.js**— Esta é a função de edição do bloco e controla como o bloco é exibido no editor de blocos quando está no modo de edição.
**/src/editor.scss**— Este é o SCSS não compilado para o editor, ele será compilado em /build/index.css.
**/src/index.js**— Este é o principal arquivo JavaScript não compilado para o seu bloco WordPress Editor (Gutenberg). Ele registra o bloco e contém as configurações padrão.
**/src/save.js**— Esta é a função salvar do bloco e controla a marcação do bloco quando ele é salvo.
**/src/style.scss**— Este é o SCSS não compilado para o front-end, ele será compilado em /build/style-index.css.
**/.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 através do wholesome-notes.phparquivo do carregador principal.
**/block.json**— Este arquivo define o plugin para que possa ser descoberto pela biblioteca de blocos do WordPress. Se você fizer alterações no plug-in, certifique-se de que esse arquivo seja atualizado. Nas versões mais recentes do script NPM, esse arquivo é usado em vez de /src/index.jsregistrar seu bloco.
**/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.
**/readme.txt**— Este arquivo é um arquivo leia-me do repositório de plugins do WordPress, que é necessário se você quiser que o bloco seja listado no repositório de plugins.
**/wholesome-plugin.php**— Este é o arquivo de carregamento principal do 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 os comandos de compilação

Antes de podermos executar nossos comandos de compilação, precisamos ter certeza de que estamos na pasta do plugin. Neste exemplo, executaríamos cd wholesome-pluginno terminal para alterar o diretório para nossa pasta de plugins.

Podemos então executar os seguintes comandos:

**npm start**— Inicia a compilação para desenvolvimento. Se você fizer uma alteração no plug-in, deverá fazer isso para que as alterações sejam exibidas (provavelmente você também precisará atualizar seu navegador).
**npm run build**— Constrói o código para produção. Faça isso se estiver criando uma versão de lançamento do plug-in.
**npm run format:js**— Formata automaticamente os arquivos JavaScript, usando as melhores práticas.
**npm run lint:css**— Lints (procura erros em) arquivos CSS.
**npm run lint:js**— Lints (procura erros em) arquivos JavaScript.
**npm run packages-update**— Atualiza os pacotes do WordPress para a versão mais recente.

Usaremos um ou mais deles ao modificar o plugin.

Modificando o plug-in

Vamos começar tornando nosso bloco editável.

Adicionar atributos a`/src/index.js`

Abra /src/index.jsno seu editor e adicione o seguinte dentro da registerBlockTypefunção, em apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Isso nos dará um lugar para armazenar os dados em nosso plugin chamado blockTextacessível através da attributespropriedade (prop). Observe que demos a ele um padrão do texto original gerado pelo script de plugin de criação.

Adicionar RichText a`/src/edit.js`

Abra /src/edit.jsno seu editor e substitua a importação pelo useBlockPropsseguinte:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Isso nos permitirá usar o componente RichText em nosso método de renderização de edição.

Em seguida, altere toda a função Editar para o seguinte:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Isso define o valor do RichTextcomponente para ser o mesmo que aquele armazenado no blockTextatributo, e a onChangepropriedade define o blockTextatributo para o que já foi inserido no RichTextcomponente.

Saída dos atributos em`/src/save.js`

Abra /src/save.jsem seu editor e substitua a savefunção pelo seguinte:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Isso simplesmente exibe o valor de blockTextno parágrafo.

Compilando o Plugin

Abra o terminal, verifique se você está no diretório raiz do seu plugin e execute o seguinte comando:

O script irá compilar. Se você tiver algum erro, o terminal deve informá-lo sobre o que são.

Construindo o plug-in

Inserindo o Plugin

Certifique-se de ter atualizado sua postagem. A versão anterior do bloco agora pode estar quebrada, tudo bem, basta excluí-lo e inserir um novo.

Insira o bloco usando o símbolo de mais no canto superior esquerdo do editor e, quando inserido, clique em seu texto. Você deve. agora ser capaz de editar o texto.

Inserindo o Bloco Editável

Visualizando o plug-in

Salve o post e visualize-o no front-end do site, o texto que você alterou deve ser exibido em vez do texto original.

Bloco editável no front-end do site

Se você quiser que seus blocos apareçam em uma categoria de bloco personalizada, basta adicionar o seguinte código à raiz do seu plugin (neste caso wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Isso registrará uma categoria de bloco personalizada em seu insersor de bloco.

Então tudo que você precisa fazer é ajustar o categoryargumento da registerBlockTypefunção /src/index.jspara se referir à sua categoria de bloco e recompilar:


category: 'wholesome-blocks',

Agora, quando você inserir seu bloco, você o encontrará em sua categoria de bloco recém-criada:

Categoria de bloco personalizada no Block Inserter

Dê uma olhada no uso do PHP para renderizar seu bloco com blocos dinâmicos
Veja como usar meta campos de postagem como atributos em seu bloco
Adicione uma barra lateral de bloco com InspectorControls
Estenda seu plug-in adicionando pontos de entrada adicionais ao arquivo webpack.config

Fonte de gravação: wholesomecode.ltd