npm<\/code> script \u00fatil para voc\u00ea criar um plug-in de bloco<\/a> que cria um bloco inicial para que voc\u00ea possa come\u00e7ar a usar rapidamente.<\/p>\nPor padr\u00e3o, o tipo de plugin WordPress que isso cria \u00e9 um ‘bloco’, mas tamb\u00e9m nos d\u00e1 um bom ponto de partida para outros tipos de plugins Gutenberg.<\/p>\n
Pr\u00e9-requisitos<\/h2>\n\n- O n\u00f3 deve estar instalado em sua m\u00e1quina<\/a> para que voc\u00ea possa usar o
npm<\/code>comando (que significa Node Package Manager)<\/li>\n- Instala\u00e7\u00e3o do WordPress<\/li>\n
- Editor de c\u00f3digo<\/li>\n
- Acesso ao Terminal<\/li>\n<\/ul>\n
Crie seu Plugin<\/h2>\n
Depois de instalar o node em sua m\u00e1quina, voc\u00ea deve ter acesso ao npm<\/code>comando em seu terminal.<\/p>\nAbra seu terminal e certifique-se de ter cd<\/code>‘d (Changed Directory) na pasta de plugins em sua instala\u00e7\u00e3o do WordPress (por exemplo cd wp-content\/plugins<\/code>, ).<\/p>\nUma vez l\u00e1, execute o seguinte comando:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nIsso far\u00e1 o download de tudo o que o script precisa para iniciar a compila\u00e7\u00e3o. Quando terminar, o script far\u00e1 uma s\u00e9rie de perguntas necess\u00e1rias para configurar seu plugin.<\/p>\n
Usando o Terminal para Executar o Script de Cria\u00e7\u00e3o<\/p>\n
Perguntas de configura\u00e7\u00e3o<\/h3>\n
O script far\u00e1 as seguintes perguntas, aqui est\u00e3o minhas respostas de exemplo:<\/p>\n
\n- \n
O bloco de slug usado para identifica\u00e7\u00e3o (tamb\u00e9m o plugin e o nome da pasta de sa\u00edda)<\/strong> \u2014 eu quero que meu bloco seja chamado Wholesome Plugin<\/code>, ent\u00e3o eu digitei wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
O namespace interno para o nome do bloco (algo exclusivo para seus produtos)<\/strong> \u2014 Como isso deve ser exclusivo para todos os meus produtos que inseri wholesomecode<\/code>, pois esse \u00e9 o nome da minha empresa.<\/p>\n<\/li>\n- \n
O t\u00edtulo de exibi\u00e7\u00e3o do seu bloco<\/strong> \u2014 digitei o t\u00edtulo do plugin, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
A breve descri\u00e7\u00e3o do seu bloco (opcional)<\/strong> \u2014 digitei ” An example plugin to demonstrate the create-block-script<\/code>“.<\/p>\n<\/li>\n- \n
O dashicon para facilitar a identifica\u00e7\u00e3o do seu bloco (opcional)<\/strong> \u2014 Trazendo rapidamente o recurso WordPress Dashicons<\/a>, escolhi admin-plugins<\/code>por ter um \u00edcone de plugin. Lembre-se de omitir dashicon- do prefixo dashicon ao fazer isso.<\/p>\n<\/li>\n- \n
O nome da categoria para ajudar os usu\u00e1rios a navegar e descobrir seu bloco (use as teclas de seta)<\/strong> \u2014 eu escolhi design<\/code>. Embora uma categoria personalizada provavelmente seja mais adequada.<\/p>\n<\/li>\n- \n
O nome do autor do plugin (opcional). V\u00e1rios autores podem ser listados usando v\u00edrgulas<\/strong> \u2014 digitei wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
O nome abreviado da licen\u00e7a do plugin (opcional)<\/strong> \u2014 pressionei enter para aceitar a GPL v2.0 ou posterior.<\/p>\n<\/li>\n- \n
Um link para o texto completo da licen\u00e7a (opcional)<\/strong> \u2014 pressionei enter para inserir o URL da licen\u00e7a GPL v2.0.<\/p>\n<\/li>\n- \n
O n\u00famero da vers\u00e3o atual do plugin<\/strong> \u2014 pressionei enter para inserir 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Perguntas de configura\u00e7\u00e3o de script<\/p>\n
O script terminar\u00e1 de ser executado.<\/p>\n
O que acabou de acontecer?<\/h3>\n
Algumas coisas acontecem enquanto o script est\u00e1 em execu\u00e7\u00e3o, s\u00e3o elas:<\/p>\n
\n- Ele cria a pasta do plugin,<\/li>\n
- Ele gera todos os arquivos de plug-in (consulte explorando o plug-in para obter detalhes sobre o que eles fazem<\/a> )<\/li>\n
- Ele instala as depend\u00eancias necess\u00e1rias, incluindo o
@wordpress\/scripts<\/code>pacote (isso faz o trabalho pesado em termos de constru\u00e7\u00e3o do plugin)<\/li>\n- Ele compila o c\u00f3digo<\/li>\n
- Ele gera uma lista de comandos que voc\u00ea pode usar<\/li>\n<\/ul>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Comandos de compila\u00e7\u00e3o<\/p>\n
Vamos explorar isso mais na se\u00e7\u00e3o Explorando o plugin<\/a>.<\/p>\nUsando o plug-in<\/h2>\n
Antes de poder usar o plugin, voc\u00ea precisar\u00e1 ativ\u00e1-lo. Voc\u00ea pode fazer isso escolhendo Plugins<\/code>no menu de administra\u00e7\u00e3o do WordPress e selecionando activate<\/code>sob o nome do plugin.<\/p>\n![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Ative o plug-in<\/p>\n
Agora voc\u00ea precisa editar um post no WordPress e inserir o plugin usando o editor Gutenberg.<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Inserindo o bloco em um post<\/p>\n
Note que o plugin n\u00e3o faz muito por padr\u00e3o, ele apenas cria um Bloco. No entanto, ele fornece uma estrutura para voc\u00ea usar para criar seu pr\u00f3prio plug-in.<\/p>\n
Visualizando o bloco no front-end<\/h3>\n
Por padr\u00e3o, o bloco se parece com isso no front-end. Observe que ele tem uma apar\u00eancia um pouco diferente, isso \u00e9 deliberado para que voc\u00ea possa se familiarizar com o CSS na frente e no back-end do WordPress.<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
O bloco no front-end<\/p>\n
Explorando o plug-in<\/h2>\n
Todo o prop\u00f3sito do Create Block Script \u00e9 que voc\u00ea crie seu pr\u00f3prio plugin. Vamos explorar os arquivos que ele gerou com mais detalhes:<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Arquivos gerados<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 Esta \u00e9 a pasta raiz do plugin, tem o mesmo nome que eu digitei para o ‘slug’ nas perguntas de configura\u00e7\u00e3o.<\/p>\n**\/build**<\/code>\u2014 Esta \u00e9 a pasta de compila\u00e7\u00e3o. Ele cont\u00e9m todos os ativos JavaScript e PHP gerados a partir da \/src<\/code>pasta. Eles s\u00e3o enfileirados por meio do wholesome-notes.php<\/code>arquivo do carregador principal.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 Este arquivo PHP \u00e9 gerado automaticamente quando a \/src<\/code>pasta \u00e9 compilada. Ele cont\u00e9m uma matriz de todas as dec\u00eancias JavaScript do WordPress Editor (Gutenberg) usadas pelo seu plugin. Ele \u00e9 enfileirado por meio do wholesome-plugin.php<\/code>arquivo do carregador principal.<\/p>\n**\/build\/index.css**<\/code>\u2014 Este \u00e9 o arquivo CSS do editor e \u00e9 enfileirado por meio do wholesome-plugin.php<\/code>arquivo principal do carregador.<\/p>\n**\/build\/index.js**<\/code>\u2014 Este \u00e9 o arquivo JavaScript compilado principal e \u00e9 enfileirado por meio do wholesome-plugin.php<\/code>arquivo principal do carregador.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 Este \u00e9 o arquivo CSS de front-end e \u00e9 enfileirado por meio do wholesome-plugin.php<\/code>arquivo do carregador principal.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 Este arquivo \u00e9 gerado apenas quando voc\u00ea est\u00e1 compilando os ativos para o modo de desenvolvimento (IE voc\u00ea executa npm start<\/code>e n\u00e3o npm build<\/code>quando voc\u00ea est\u00e1 compilando seus ativos. \u00c9 um arquivo \u00fatil para depuradores JavaScript para ajudar a identificar nomes de arquivos e n\u00fameros de linha se ocorrerem erros.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 Esta \u00e9 a pasta na qual todas as depend\u00eancias de JavaScript do seu plugin est\u00e3o instaladas.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 Esta \u00e9 a pasta que cont\u00e9m todos os ativos n\u00e3o compilados do seu plugin.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 Esta \u00e9 a fun\u00e7\u00e3o de edi\u00e7\u00e3o do bloco e controla como o bloco \u00e9 exibido no editor de blocos quando est\u00e1 no modo de edi\u00e7\u00e3o.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 Este \u00e9 o SCSS n\u00e3o compilado para o editor, ele ser\u00e1 compilado em \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 Este \u00e9 o principal arquivo JavaScript n\u00e3o compilado para o seu bloco WordPress Editor (Gutenberg). Ele registra o bloco e cont\u00e9m as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 Esta \u00e9 a fun\u00e7\u00e3o salvar do bloco e controla a marca\u00e7\u00e3o do bloco quando ele \u00e9 salvo.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 Este \u00e9 o SCSS n\u00e3o compilado para o front-end, ele ser\u00e1 compilado em \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 Este arquivo cont\u00e9m predefini\u00e7\u00f5es \u00fateis para seu IDE (Ambiente de Desenvolvimento Integrado), como o Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 Este arquivo diz ao git para ignorar certos arquivos quando voc\u00ea est\u00e1 submetendo a um reposit\u00f3rio git (como o GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Os estilos neste arquivo s\u00e3o produzidos apenas no editor, ele \u00e9 enfileirado atrav\u00e9s do wholesome-notes.php<\/code>arquivo do carregador principal.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 Este arquivo define o plugin para que possa ser descoberto pela biblioteca de blocos do WordPress. Se voc\u00ea fizer altera\u00e7\u00f5es no plug-in, certifique-se de que esse arquivo seja atualizado. Nas vers\u00f5es mais recentes do script NPM, esse arquivo \u00e9 usado em vez de \/src\/index.js<\/code>registrar seu bloco.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 Este arquivo cont\u00e9m todas as depend\u00eancias do npm para o plugin e os comandos que voc\u00ea pode executar. Note que o plugin utiliza wp-scripts<\/code>( @wordpress\/scripts<\/code>) como base, ent\u00e3o inicialmente as depend\u00eancias carregadas s\u00e3o para aquele pacote.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 Este arquivo \u00e9 um arquivo leia-me do reposit\u00f3rio de plugins do WordPress, que \u00e9 necess\u00e1rio se voc\u00ea quiser que o bloco seja listado no reposit\u00f3rio de plugins.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 Este \u00e9 o arquivo de carregamento principal do plugin. Seu nome foi definido atrav\u00e9s do ‘slug’ que inserimos no script de configura\u00e7\u00e3o inicial. Ele enfileira todos os recursos JavaScript necess\u00e1rios para o plug-in.<\/p>\n<\/li>\n<\/ul>\nExplorando os comandos de compila\u00e7\u00e3o<\/h3>\n
Antes de podermos executar nossos comandos de compila\u00e7\u00e3o, precisamos ter certeza de que estamos na pasta do plugin. Neste exemplo, executar\u00edamos cd wholesome-plugin<\/code>no terminal para alterar o diret\u00f3rio para nossa pasta de plugins.<\/p>\nPodemos ent\u00e3o executar os seguintes comandos:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 Inicia a compila\u00e7\u00e3o para desenvolvimento. Se voc\u00ea fizer uma altera\u00e7\u00e3o no plug-in, dever\u00e1 fazer isso para que as altera\u00e7\u00f5es sejam exibidas (provavelmente voc\u00ea tamb\u00e9m precisar\u00e1 atualizar seu navegador).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Constr\u00f3i o c\u00f3digo para produ\u00e7\u00e3o. Fa\u00e7a isso se estiver criando uma vers\u00e3o de lan\u00e7amento do plug-in.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Formata automaticamente os arquivos JavaScript, usando as melhores pr\u00e1ticas.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (procura erros em) arquivos CSS.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (procura erros em) arquivos JavaScript.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>\u2014 Atualiza os pacotes do WordPress para a vers\u00e3o mais recente.<\/p>\n<\/li>\n<\/ul>\nUsaremos um ou mais deles ao modificar o plugin.<\/p>\n
Modificando o plug-in<\/h2>\n
Vamos come\u00e7ar tornando nosso bloco edit\u00e1vel.<\/p>\n
Adicionar atributos a\/src\/index.js<\/code><\/h3>\nAbra \/src\/index.js<\/code>no seu editor e adicione o seguinte dentro da registerBlockType<\/code>fun\u00e7\u00e3o, em apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nIsso nos dar\u00e1 um lugar para armazenar os dados em nosso plugin chamado blockText<\/code>acess\u00edvel atrav\u00e9s da attributes<\/code>propriedade (prop). Observe que demos a ele um padr\u00e3o do texto original gerado pelo script de plugin de cria\u00e7\u00e3o.<\/p>\nAdicionar RichText a\/src\/edit.js<\/code><\/h3>\nAbra \/src\/edit.js<\/code>no seu editor e substitua a importa\u00e7\u00e3o pelo useBlockProps<\/code>seguinte:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nIsso nos permitir\u00e1 usar o componente RichText em nosso m\u00e9todo de renderiza\u00e7\u00e3o de edi\u00e7\u00e3o.<\/p>\n
Em seguida, altere toda a fun\u00e7\u00e3o Editar para o seguinte:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nIsso define o valor do RichText<\/code>componente para ser o mesmo que aquele armazenado no blockText<\/code>atributo, e a onChange<\/code>propriedade define o blockText<\/code>atributo para o que j\u00e1 foi inserido no RichText<\/code>componente.<\/p>\nSa\u00edda dos atributos em\/src\/save.js<\/code><\/h3>\nAbra \/src\/save.js<\/code>em seu editor e substitua a save<\/code>fun\u00e7\u00e3o pelo seguinte:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nIsso simplesmente exibe o valor de blockText<\/code>no par\u00e1grafo.<\/p>\nCompilando o Plugin<\/h3>\n
Abra o terminal, verifique se voc\u00ea est\u00e1 no diret\u00f3rio raiz do seu plugin e execute o seguinte comando:<\/p>\n
O script ir\u00e1 compilar. Se voc\u00ea tiver algum erro, o terminal deve inform\u00e1-lo sobre o que s\u00e3o.<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Construindo o plug-in<\/p>\n
Inserindo o Plugin<\/h3>\n
Certifique-se de ter atualizado sua postagem. A vers\u00e3o anterior do bloco agora pode estar quebrada, tudo bem, basta exclu\u00ed-lo e inserir um novo.<\/p>\n
Insira o bloco usando o s\u00edmbolo de mais no canto superior esquerdo do editor e, quando inserido, clique em seu texto. Voc\u00ea deve. agora ser capaz de editar o texto.<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Inserindo o Bloco Edit\u00e1vel<\/p>\n
Visualizando o plug-in<\/h3>\n
Salve o post e visualize-o no front-end do site, o texto que voc\u00ea alterou deve ser exibido em vez do texto original.<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Bloco edit\u00e1vel no front-end do site<\/p>\n
Se voc\u00ea quiser que seus blocos apare\u00e7am em uma categoria de bloco personalizada, basta adicionar o seguinte c\u00f3digo \u00e0 raiz do seu plugin (neste caso wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nIsso registrar\u00e1 uma categoria de bloco personalizada em seu insersor de bloco.<\/p>\n
Ent\u00e3o tudo que voc\u00ea precisa fazer \u00e9 ajustar o category<\/code>argumento da registerBlockType<\/code>fun\u00e7\u00e3o \/src\/index.js<\/code>para se referir \u00e0 sua categoria de bloco e recompilar:<\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nAgora, quando voc\u00ea inserir seu bloco, voc\u00ea o encontrar\u00e1 em sua categoria de bloco rec\u00e9m-criada:<\/p>\n
![\"Criando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Categoria de bloco personalizada no Block Inserter<\/p>\n
\n- D\u00ea uma olhada no uso do PHP para renderizar seu bloco com blocos din\u00e2micos<\/a><\/li>\n
- Veja como usar meta campos de postagem como atributos em seu bloco<\/a><\/li>\n
- Adicione uma barra lateral de bloco com InspectorControls<\/a><\/li>\n
- Estenda seu plug-in adicionando pontos de entrada adicionais ao arquivo webpack.config<\/a><\/li>\n<\/ul>\n