{"id":233562,"date":"2023-02-16T14:07:00","date_gmt":"2023-02-16T11:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233562"},"modified":"2022-11-11T00:21:38","modified_gmt":"2022-11-10T21:21:38","slug":"criar-bloco-personalizado-do-gutenberg-parte-1-configurando-o-ambiente-de-desenvolvimento","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/criar-bloco-personalizado-do-gutenberg-parte-1-configurando-o-ambiente-de-desenvolvimento\/","title":{"rendered":"Criar bloco personalizado do Gutenberg – Parte 1: Configurando o ambiente de desenvolvimento"},"content":{"rendered":"\n

Na primeira parte desta s\u00e9rie de tutoriais sobre como criar blocos personalizados do Gutenberg, precisamos configurar nosso ambiente de desenvolvimento. Precisamos de um lugar onde possamos escrever nosso c\u00f3digo em sintaxes ES6\/ESNext e compil\u00e1-lo em qualquer lugar. \u00c9 poss\u00edvel escrever blocos personalizados do Gutenberg usando a sintaxe ES5 sem configurar o Webpack e o Babel. Mas o c\u00f3digo ser\u00e1 realmente complicado de ler e escrever. Se voc\u00ea n\u00e3o tiver certeza de por que precisamos fazer tudo isso, ou qual \u00e9 a diferen\u00e7a, leia meu post explicando isso<\/a>. Posso garantir que, quando voc\u00ea voltar, ser\u00e1 convencido a dar esse passo extra para escrever um c\u00f3digo melhor.<\/p>\n

Suponho que voc\u00ea j\u00e1 tenha um WordPress local rodando em uma pilha LAMP ou similar. E que voc\u00ea est\u00e1 escrevendo um tema ou um plugin. Quanto a mim, estou colocando meu c\u00f3digo em um tema que desenvolvi, awp-starter-theme<\/code>, localizado na minha pasta de temas do WordPress. Eu quero separar meu desenvolvimento do Gutenberg de todos os outros arquivos de tema, ent\u00e3o eu crio um subdiret\u00f3rio gutenberg-dev<\/code>dentro da minha pasta raiz do tema. Essa ser\u00e1 a pasta do meu projeto e a pasta \u00e0 qual me referirei para o restante da s\u00e9rie de tutoriais.<\/p>\n

Eu j\u00e1 escrevi um guia detalhado sobre como configurar um ambiente de desenvolvimento para o Gutenberg, ent\u00e3o vou passar rapidamente pelos passos aqui. Se voc\u00ea nunca fez isso antes, recomendo a leitura do post do link abaixo, pois cont\u00e9m mais informa\u00e7\u00f5es do que voc\u00ea encontrar\u00e1 aqui!<\/p>\n

Configurar o projeto com webpack<\/h2>\n

Usando o terminal (terminal iOS ou Windows cmd ambos funcionam bem), navegue at\u00e9 a pasta do seu projeto (no meu caso awp-starter-theme\/gutenberg-dev<\/code>). Iniciamos um novo projeto pedindo ao npm para gerar um package.json<\/code>com conte\u00fado gen\u00e9rico.<\/p>\n

Criando pacote.json<\/h3>\n
npm init -y<\/code><\/pre>\n
Em seguida, instalarei os scripts do WordPress que nos ajudar\u00e3o muito na configura\u00e7\u00e3o com este comando (que adicionar\u00e1 a subpasta node_modules<\/code>e package-lock.json<\/code>tamb\u00e9m):<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Abra o package.json<\/code>arquivo na pasta do seu projeto em um editor e encontre a scripts<\/code>propriedade. N\u00f3s o substitu\u00edmos por dois scripts do pacote WordPress que acabamos de instalar:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
O script “build" compilar\u00e1 meus arquivos. Mas como ele deve ser executado manualmente toda vez que uma altera\u00e7\u00e3o for feita, usaremos o script “start” enquanto desenvolvemos. Ele ent\u00e3o iniciar\u00e1 um “modo de observa\u00e7\u00e3o” onde ele escuta \u00e0s altera\u00e7\u00f5es feitas em qualquer um de seus arquivos de script e os recompila sempre que voc\u00ea salva as altera\u00e7\u00f5es.<\/p>\n
Configura\u00e7\u00e3o do Webpack<\/h3>\n
A pr\u00f3xima etapa \u00e9 criar um arquivo de configura\u00e7\u00e3o do webpack. Fa\u00e7o isso porque n\u00e3o quero usar as pastas e nomes de arquivos de origem e sa\u00edda padr\u00e3o. Quero decidir por mim mesmo onde est\u00e3o meus arquivos de origem e onde os arquivos compilados devem terminar.<\/p>\n
Com a ajuda do @wordpress\/scripts<\/code>pacote que instalamos, podemos herdar a configura\u00e7\u00e3o do webpack do WordPress e substituir apenas as partes que queremos alterar.<\/p>\n
Em nossa pasta de projeto, crie um novo arquivo chamado webpack.config.js<\/code>e abra-o em um editor. Adicione este conte\u00fado:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
O que isso faz \u00e9 definir meu arquivo de entrada (atualmente apenas um) na entry<\/code>propriedade, localizada em uma subpasta src<\/code>na pasta do meu projeto, chamada block-awhitepixel-myfirstblock.js<\/code>. Obviamente, nomeie seus arquivos como quiser, mas lembre-se de alterar a chave e o valor. Porque na output<\/code>propriedade estou pedindo ao webpack para compilar meus arquivos de entrada com a chave de entrada como nome do arquivo. Na path<\/code>propriedade pe\u00e7o para colocar todos os arquivos compilados um passo fora da pasta do meu projeto, e dentro da assets\/js<\/code>pasta do tema. Ajuste os nomes dos arquivos e o local para se adequar ao seu projeto. Consulte o meu guia detalhado<\/a> se estiver confuso.<\/p>\n
Crie uma subpasta src\/<\/code>na pasta do projeto e \u00e9 aqui que colocaremos todos os arquivos de origem. (Ajuste se voc\u00ea alterou o entry<\/code>local em webpack.config.js<\/code>). Crie um arquivo block-awhitepixel-myfirstblock.js<\/code>aqui e deixe-o vazio por enquanto.<\/p>\n
H\u00e1 mais um passo \u2013 e isso vale para n\u00f3s que queremos usar os recursos mais recentes do ESNext. Infelizmente, a configura\u00e7\u00e3o padr\u00e3o do WordPress Babel est\u00e1 ausente. E porque eu quero usar funcionalidades como fun\u00e7\u00f5es de seta, preciso configurar o Babel tamb\u00e9m.<\/p>\n
Configurando o Babel<\/h2>\n
Primeiro precisamos instalar alguns pacotes para nossa configura\u00e7\u00e3o do Babel digitando este comando:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Feito isso, crie um novo arquivo .babelrc<\/code>na pasta do nosso projeto. Aqui \u00e9 onde colocaremos nossa configura\u00e7\u00e3o do Babel:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
E \u00e9 isso para a configura\u00e7\u00e3o do nosso ambiente de desenvolvimento!<\/p>\n
Comandos de compila\u00e7\u00e3o<\/h2>\n
Durante todo o desenvolvimento, voc\u00ea precisar\u00e1 compilar seus arquivos Javascript. Em nosso package.json<\/code>adicionamos dois scripts apenas para isso.<\/p>\n
Sempre que queremos desenvolver em nossos arquivos Javascript, executamos isso no terminal:<\/p>\n
npm run build<\/code><\/pre>\n
Este comando executar\u00e1 a compila\u00e7\u00e3o sempre que voc\u00ea executar isso no terminal. Experimente e voc\u00ea deve ver que ele gera o arquivo block-awhitepixel-myfirstblock.js<\/code>(junto com um ou dois outros arquivos “asset”) em sua pasta de sa\u00edda definida que voc\u00ea definiu em webpack.config.js<\/code>. No meu caso aparece em awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
Usar o comando acima funciona bem, mas \u00e9 irritante repetir toda vez que voc\u00ea faz altera\u00e7\u00f5es em seus arquivos. Voc\u00ea provavelmente preferiria executar este comando:<\/p>\n
npm run start<\/code><\/pre>\n
Isso definir\u00e1 seu terminal no “modo de observa\u00e7\u00e3o”, detectando quaisquer altera\u00e7\u00f5es salvas em seus arquivos Javascript e compilando-os \u00e0 medida que avan\u00e7a. Sempre que seus arquivos contiverem erros, o terminal emitir\u00e1 as mensagens de erro. Pressione CTRL + C para parar o processo de observa\u00e7\u00e3o.<\/p>\n
\"Criar<\/a><\/p>\n
Como refer\u00eancia, minha pasta do projeto agora se parece com a imagem. Prefiro separar todos os arquivos de configura\u00e7\u00e3o e especialmente a subpasta node_modules\/<\/code>(que cont\u00e9m literalmente dezenas de milhares de arquivos) do restante do c\u00f3digo do meu tema. Facilita a configura\u00e7\u00e3o de regras para ignorar \u2013 por exemplo, compiladores SCSS ou git ignore. J\u00e1 configuramos a configura\u00e7\u00e3o do webpack para compilar os arquivos finais diretamente awp-starter-theme\/assets\/js\/<\/code>junto com outros arquivos Javascript para o meu tema.<\/p>\n
Agora estamos prontos para a pr\u00f3xima parte<\/a>, onde come\u00e7aremos registrando nosso primeiro bloco personalizado.<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Na primeira parte desta s\u00e9rie de tutoriais sobre como criar blocos personalizados do WordPress Gutenberg, aprendemos como configurar nosso ambiente de desenvolvimento.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,941,941,1110,816,816,846,846,867,867],"tags":[1170],"class_list":{"0":"post-233562","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codigo-2","9":"category-gutenberg-8","11":"category-n-a","12":"category-plug-ins","14":"category-tutoriais","16":"category-wordpress-8","18":"tag-affiai-pt-pt"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233562"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233562\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}