{"id":228578,"date":"2022-10-14T10:34:00","date_gmt":"2022-10-14T07:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228578"},"modified":"2022-11-09T03:06:17","modified_gmt":"2022-11-09T00:06:17","slug":"uma-visao-geral-do-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/uma-visao-geral-do-wordpress-create-block-script\/","title":{"rendered":"Uma vis\u00e3o geral do WordPress Create Block Script"},"content":{"rendered":"\n<p>A equipe oficial do WordPress Editor (Gutenberg) forneceu <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">um pequeno script para voc\u00ea criar um plugin de bloco<\/a> com seu <code>@wordpress\/create-block<\/code>script npm.<\/p>\n<p>Este artigo fornece uma vis\u00e3o geral do WordPress Create Block Script, juntamente com detalhes do que ele produz.<\/p>\n<p><strong>NOTA: Este artigo \u00e9 para uma vers\u00e3o mais antiga do Create Block Script<\/strong><\/p>\n<p>Embora a teoria ainda possa ser aplicada, algumas das informa\u00e7\u00f5es neste artigo podem n\u00e3o ser mais compat\u00edveis com o script de bloco de cria\u00e7\u00e3o mais recente. Voc\u00ea pode <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ver nosso guia de script de cria\u00e7\u00e3o de bloco atualizado aqui<\/a>.<\/p>\n<h2>Executando o script de cria\u00e7\u00e3o de bloco<\/h2>\n<p>A documenta\u00e7\u00e3o oficial fornece alguns par\u00e2metros diferentes para passar para o <code>npm init @wordpress\/block<\/code>comando.<\/p>\n<p>Para minha configura\u00e7\u00e3o, executei-o no modo interativo omitindo os par\u00e2metros. Eu digitei o seguinte comando no meu terminal (enquanto estava <code>cd<\/code>na minha <code>wp-content\/plugins<\/code>pasta):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>O Script me fez algumas perguntas para me ajudar a construir meu bloco.<\/p>\n<p>Querendo criar um bloco inicial para uma ideia de plugin que eu tenho (&#8216;Notas Saud\u00e1veis&#8217;), respondi as perguntas da seguinte forma:<\/p>\n<ul>\n<li>\n<p><strong>O bloco de slug usado para identifica\u00e7\u00e3o (tamb\u00e9m o plugin e o nome da pasta de sa\u00edda):<\/strong> Eu quero que meu bloco seja chamado <code>Wholesome Notes<\/code>, ent\u00e3o eu digitei <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>O namespace interno para o nome do bloco (algo exclusivo para seus produtos):<\/strong> Como deve ser exclusivo para todos os meus produtos que inseri <code>wholesome-code<\/code>, pois esse \u00e9 o nome da minha empresa. Em retrospectiva, isso seria melhor em curto para <code>wc<\/code>ou <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>O t\u00edtulo de exibi\u00e7\u00e3o do seu bloco:<\/strong> digitei o t\u00edtulo do plugin, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>Uma vis\u00e3o geral do WordPress Create Block Script Eu n\u00e3o tinha 100% de certeza do que queria escrever aqui, ent\u00e3o acabei de inserir um texto que pretendo alterar mais tarde.<\/p>\n<\/li>\n<li>\n<p><strong>O dashicon para facilitar a identifica\u00e7\u00e3o do seu bloco (opcional):<\/strong> Trazendo rapidamente o <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">recurso WordPress Dashicons<\/a>, eu escolhi <code>admin-comments<\/code>porque ele tem um \u00edcone de estilo de nota.<\/p>\n<\/li>\n<li>\n<p><strong>O nome da categoria para ajudar os usu\u00e1rios a navegar e descobrir seu bloco (use as teclas de seta):<\/strong> Eu escolhi <code>layout<\/code>, embora para ser honesto esse tipo de bloco provavelmente precisaria de sua pr\u00f3pria categoria. Isso \u00e9 algo que eu posso alterar em uma data posterior.<\/p>\n<\/li>\n<\/ul>\n<p>Corrida<code>npm init @wordpress\/block<\/code><\/p>\n<p>O Script ent\u00e3o foi em frente e instalou todas as depend\u00eancias necess\u00e1rias via npm (neste ponto, ele apenas instala o <code>wp-scripts<\/code>pacote npm como uma depend\u00eancia).<\/p>\n<h2>Inspecionando a Sa\u00edda<\/h2>\n<p>Com os comandos acima, o WordPress Create Block Script fornece a seguinte sa\u00edda:<\/p>\n<ul>\n<li>notas saud\u00e1veis\n<ul>\n<li>construir\n<ul>\n<li>index.asset.php<\/li>\n<li>index.js<\/li>\n<li>index.js.map<\/li>\n<\/ul>\n<\/li>\n<li>node_modules<\/li>\n<li>src\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignore<\/li>\n<li>editor.css<\/li>\n<li>pacote.json<\/li>\n<li>estilo.css<\/li>\n<li>notas-saud\u00e1veis.php<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e80786cc626.png\" alt=\"Uma vis\u00e3o geral do WordPress Create Block Script\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/bloco de sa\u00edda<\/p>\n<p>A seguir est\u00e1 uma divis\u00e3o de cada um desses arquivos e pastas.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>Esta \u00e9 a pasta raiz do plugin, ela tem o mesmo nome que eu digitei para o &#8216;slug&#8217; nas perguntas de configura\u00e7\u00e3o.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>Esta \u00e9 a pasta de compila\u00e7\u00e3o. Ele cont\u00e9m todos os ativos JavaScript e PHP gerados a partir da <code>\/src<\/code>pasta. Eles s\u00e3o enfileirados por meio do <code>wholesome-notes.php<\/code>arquivo do carregador principal.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>Este arquivo PHP \u00e9 gerado automaticamente quando a <code>\/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 <code>wholesome-notes.php<\/code>arquivo do carregador principal.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>Este \u00e9 o principal arquivo JavaScript compilado e \u00e9 enfileirado por meio do <code>wholesome-notes.php<\/code>arquivo principal do carregador.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>Este arquivo \u00e9 gerado apenas quando voc\u00ea est\u00e1 compilando os ativos para o modo de desenvolvimento (IE voc\u00ea executa <code>npm start<\/code>e n\u00e3o <code>npm run 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<p><code>\/node_modules<\/code><\/p>\n<p>Esta \u00e9 a pasta na qual todas as depend\u00eancias de JavaScript do seu plugin est\u00e3o instaladas.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>Esta \u00e9 a pasta que cont\u00e9m todos os recursos n\u00e3o compilados do seu plugin.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>Este \u00e9 o principal arquivo JavaScript n\u00e3o compilado para o seu bloco WordPress Editor (Gutenberg). Inicialmente cont\u00e9m toda a l\u00f3gica do bloco.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>Este arquivo cont\u00e9m predefini\u00e7\u00f5es \u00fateis para seu IDE (Ambiente de Desenvolvimento Integrado), como o Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>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<p><code>\/editor.css<\/code><\/p>\n<p>Os estilos neste arquivo s\u00e3o produzidos apenas no editor, ele \u00e9 enfileirado por meio do <code>wholesome-notes.php<\/code>arquivo do carregador principal.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>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 <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) como base, ent\u00e3o inicialmente as depend\u00eancias carregadas s\u00e3o para aquele pacote.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>Os estilos neste arquivo s\u00e3o produzidos no editor e no front-end do site, eles s\u00e3o enfileirados por meio do <code>wholesome-notes.php<\/code>arquivo do carregador principal.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>Este \u00e9 o arquivo de carregamento principal para o plugin. Seu nome foi definido atrav\u00e9s do &#8216;slug&#8217; que inserimos no script de configura\u00e7\u00e3o inicial. Ele enfileira todos os recursos JavaScript necess\u00e1rios para o plug-in.<\/p>\n<h2>Explorando o plug-in<\/h2>\n<p>Depois de ter criado seu plugin, se voc\u00ea ativ\u00e1-lo e inseri-lo no editor, ele se parecer\u00e1 com as seguintes capturas de tela (front-end e back-end).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"Uma vis\u00e3o geral do WordPress Create Block Script\" \/>Criar script de bloco &#8211; Front-end padr\u00e3o<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"Uma vis\u00e3o geral do WordPress Create Block Script\" \/>Criar script de bloco &#8211; back-end padr\u00e3o<\/p>\n<p>Como voc\u00ea pode ver, o bloco nos fornece algumas sa\u00eddas b\u00e1sicas que podemos facilmente alterar para implementar nosso pr\u00f3prio bloco.<\/p>\n<h3>Bloquear CSS<\/h3>\n<p>Como voc\u00ea pode ver nas capturas de tela, o c\u00f3digo de exemplo <code>editor.css<\/code>implementa uma borda vermelha no editor, enquanto os estilos de exemplos <code>styles.css<\/code>s\u00e3o aplicados tanto ao front-end quanto ao back-end.<\/p>\n<h3>Bloquear JavaScript<\/h3>\n<p>O ponto de entrada para personalizar o bloco rec\u00e9m-criado \u00e9 o <code>\/src\/index.js<\/code>arquivo.<\/p>\n<p>H\u00e1 muita documenta\u00e7\u00e3o embutida neste arquivo, explicando por que certas fun\u00e7\u00f5es est\u00e3o sendo importadas, como <code>registerBlockType<\/code>para o registro do bloco e <code>__<\/code>para o suporte \u00e0 tradu\u00e7\u00e3o de texto i18n.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"Uma vis\u00e3o geral do WordPress Create Block Script\" \/>Criar coment\u00e1rios inline index.js do bloco<\/p>\n<p>Ele tamb\u00e9m fornece algumas sa\u00eddas muito b\u00e1sicas para as fun\u00e7\u00f5es <code>edit<\/code>e <code>save<\/code>que s\u00e3o passadas para o registro do bloco.<\/p>\n<p><strong>Nota:<\/strong> Em vers\u00f5es posteriores do script, eles foram extra\u00eddos em seus pr\u00f3prios arquivos e inclu\u00eddos como m\u00f3dulos neste arquivo.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"Uma vis\u00e3o geral do WordPress Create Block Script\" \/>Criar bloco index.js Editar e salvar<\/p>\n<h2>Construindo o bloco<\/h2>\n<p>De acordo com a <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documenta\u00e7\u00e3o create block npm<\/a>, voc\u00ea pode usar v\u00e1rios comandos em seu terminal (da pasta raiz do seu plugin), para fazer coisas como verificar a qualidade do c\u00f3digo ou atualizar pacotes.<\/p>\n<p>Os principais comandos que voc\u00ea precisar\u00e1 para construir o bloco ser\u00e3o <code>npm start<\/code>compilar seu plugin para desenvolvimento e <code>npm run build<\/code>compilar a vers\u00e3o final.<\/p>\n<p><code>wp-scripts<\/code>(do <code>@wordpress\/scripts<\/code>pacote npm) \u00e9 a principal depend\u00eancia do seu plugin. Essa depend\u00eancia abstrai todas as ferramentas do seu bloco, para que voc\u00ea possa se concentrar apenas na constru\u00e7\u00e3o do JavaScript.<\/p>\n<p>Nos bastidores <code>wp-scripts<\/code>usa <code>webpack<\/code>para compilar todos os seus ativos no <code>\/build\/index.js<\/code>arquivo.<\/p>\n<p>Voc\u00ea pode ler mais sobre <code>wp-scripts<\/code>o <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Block Editor Handbook<\/a> e voc\u00ea pode descobrir mais sobre a configura\u00e7\u00e3o de compila\u00e7\u00e3o do webpack na se\u00e7\u00e3o <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">&#8216;JavaScript Build Setup&#8217; do Handbook.<\/a><\/p>\n<h3>Estendendo a configura\u00e7\u00e3o do webpack Create Block<\/h3>\n<p>A base de c\u00f3digo para o seu bloco pode abranger v\u00e1rios arquivos, ou at\u00e9 mesmo ter v\u00e1rios sub-blocos, ou conter estilos complexos. Em momentos como esses, voc\u00ea pode querer estender a configura\u00e7\u00e3o do webpack que est\u00e1 embutida no <code>wp-scripts<\/code>.<\/p>\n<p>Para obter mais informa\u00e7\u00f5es, consulte meu artigo sobre como <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">estender a <code>wp-scripts<\/code>configura\u00e7\u00e3o do webpack<\/a> ou confira a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se\u00e7\u00e3o Package Scripts do Block Editor Handbook<\/a> para obter orienta\u00e7\u00e3o.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A equipe oficial do WordPress Editor (Gutenberg) forneceu um pequeno script para voc\u00ea criar um plugin de bloco com seu script @wordpress\/create-block npm.<\/p>\n","protected":false},"author":1,"featured_media":224138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,846,867],"tags":[1170],"class_list":["post-228578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228578","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=228578"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228578\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}