Esta \u00e9 uma s\u00e9rie de tutoriais detalhados sobre como criar seus pr\u00f3prios blocos personalizados do WordPress Gutenberg. \u00c9 para voc\u00ea que \u00e9 desenvolvedor de temas ou plugins e est\u00e1, assim como eu, frustrado com a falta de documenta\u00e7\u00e3o. A maior parte do que aprendi quando se trata de desenvolver no novo mundo Javascript do WordPress \u00e9 por tentativa e erro, experimentando vigorosamente e lendo tudo relacionado que encontrei. E ent\u00e3o pensei que poderia reunir tudo o que aprendi at\u00e9 agora em um grande tutorial.<\/p>\n
Atrav\u00e9s de 10 partes este tutorial tem como objetivo ensin\u00e1-lo a escrever seus pr\u00f3prios blocos personalizados. N\u00e3o importa para que servem, come\u00e7ando no b\u00e1sico e trabalhando em recursos mais complexos. Eu recomendo que voc\u00ea escreva tudo sozinho em vez de copiar e colar o c\u00f3digo. Essa \u00e9 a melhor maneira de aprender! Siga a s\u00e9rie da etapa 1 a 10, pois construiremos no topo do bloco \u00e0 medida que avan\u00e7amos.<\/p>\n
Antes de mergulharmos nas etapas; uma ren\u00fancia. H\u00e1 algumas coisas que voc\u00ea j\u00e1 deve saber de antem\u00e3o sobre o que esta s\u00e9rie \u00e9 e o que n\u00e3o \u00e9.<\/p>\n
Voc\u00ea precisa saber Javascript \u2013 isso \u00e9 um dado adquirido. N\u00e3o h\u00e1 necessidade de ser um especialista, mas este n\u00e3o \u00e9 um tutorial de Javascript. Quanto \u00e0 vers\u00e3o Javascript ECMAScript; voc\u00ea pode escrever em ES5 e n\u00e3o se preocupar em compilar seu c\u00f3digo com Babel e outras coisas. No entanto, esta s\u00e9rie \u00e9 escrita com c\u00f3digo ES6 e ESNext. N\u00e3o se preocupe \u2013 a etapa 1 \u00e9 dedicada a gui\u00e1-lo na configura\u00e7\u00e3o de um ambiente de desenvolvimento pronto para codificar no ESNext com todas as suas novas sintaxes.<\/p>\n
Como voc\u00ea provavelmente sabe, o Gutenberg \u00e9 baseado no React JS<\/a>. Esta s\u00e9rie tamb\u00e9m n\u00e3o \u00e9 um tutorial do React, e pressup\u00f5e o conhecimento b\u00e1sico do React e como ele funciona. Novamente, n\u00e3o h\u00e1 necessidade de ser um especialista. Como o React j\u00e1 existe h\u00e1 algum tempo, existem muitos bons tutoriais, documenta\u00e7\u00e3o e recursos dedicados a ensinar o React. Ent\u00e3o, eu recomendo pesquisar estes primeiro.<\/p>\n Esta s\u00e9rie \u00e9 focada em aprender as partes Javascript, React e JSX e n\u00e3o se preocupa com estilo \/ CSS. Como o objetivo do seu bloco pode ser drasticamente diferente, optei por n\u00e3o focar no estilo e fornecer apenas HTML muito b\u00e1sico. Cabe a voc\u00ea adicionar seu estilo e a sa\u00edda HTML necess\u00e1ria para fazer seu bloco renderizar exatamente como voc\u00ea precisa.<\/p>\n E, finalmente, considere a \u00e9poca em que esta s\u00e9rie foi escrita. Gutenberg ainda \u00e9 muito novo, mas est\u00e1 mudando drasticamente e sendo aprimorado.<\/p>\n Se voc\u00ea encontrar isso em um futuro distante, algum c\u00f3digo pode ser preterido ou substitu\u00eddo por m\u00e9todos melhores. Este guia foi escrito e finalizado no WordPress vers\u00e3o 5.2.3 (final do ano de 2019).<\/p>\n Nas primeiras partes nos concentramos no b\u00e1sico. Configuramos um ambiente de desenvolvimento com a compila\u00e7\u00e3o em execu\u00e7\u00e3o do nosso c\u00f3digo. E o b\u00e1sico de como registrar um bloco e as partes PHP necess\u00e1rias dele tamb\u00e9m. Aprenderemos sobre a enorme biblioteca de componentes e m\u00e9todos dispon\u00edveis para n\u00f3s no WordPress Gutenberg.<\/p>\n Continuando, aprenderemos como adicionar se\u00e7\u00f5es e configura\u00e7\u00f5es para nosso bloco na barra lateral do editor (Inspetor), bem como personalizar a barra de ferramentas. Ao longo do caminho, abordaremos muitos tipos de entrada diferentes e como usar o componente de Gutenberg para eles. E \u00e9 claro que aprenderemos como salvar, atualizar e enviar as informa\u00e7\u00f5es salvas para o nosso bloco \u2013 e como isso funciona nos bastidores.<\/p>\n No final, veremos coisas mais avan\u00e7adas, como blocos din\u00e2micos e como usar o PHP para renderizar a sa\u00edda do bloco. E, finalmente, como fazer consultas de postagem dentro do editor \u2013 permitindo que o usu\u00e1rio selecione uma postagem de uma lista para renderiza\u00e7\u00e3o.<\/p>\n Abaixo voc\u00ea encontrar\u00e1 links diretos para cada parte da s\u00e9rie.<\/p>\n Parte 1: Configurando o Ambiente de Desenvolvimento<\/a><\/strong> Parte 2: Registrando um Bloco<\/a> Parte 3: Props e Componentes do WordPress<\/a><\/strong> Parte 4: Atributos<\/a><\/strong> Parte 5: Adicionando Configura\u00e7\u00f5es do Inspetor<\/a><\/strong> Parte 6: Adicionando Barras de Ferramentas<\/a><\/strong> Parte 7: Criando seus pr\u00f3prios componentes<\/a><\/strong> Parte 8: Tradu\u00e7\u00e3o do seu Bloco<\/a><\/strong>A idade deste tutorial<\/h3>\n
O que voc\u00ea vai aprender<\/h2>\n
\u00cdndice<\/h3>\n
\n
\nNa 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.<\/p>\n<\/li>\n
\nNesta parte vamos escrever Javascript para registrar e configurar nosso bloco personalizado. Ao final vamos registrar o script com PHP e fazer o c\u00f3digo PHP necess\u00e1rio para que o WordPress o reconhe\u00e7a como um novo bloco.<\/p>\n<\/li>\n
\nNo passo anterior aprendemos como registrar um bloco customizado, tanto em Javascript quanto em PHP. Nesta etapa, aprenderemos como usar os componentes do WordPress para adicionar diferentes tipos de campos e configura\u00e7\u00f5es.<\/p>\n<\/li>\n
\nNesta parte veremos como definir atributos, buscar seus valores e atualiz\u00e1-los. Com os atributos, podemos aceitar a entrada do editor, salv\u00e1-la e produzi-la da maneira que escolhermos.<\/p>\n<\/li>\n
\nNesta etapa, focaremos no que o WordPress (pelo menos em c\u00f3digo) chama de Inspetor \u2013 a barra lateral do lado direito do editor. Abordaremos alguns novos componentes que fazem sentido colocar na barra lateral e como lidar com eles.<\/p>\n<\/li>\n
\nNeste post vamos aprender como adicionar as barras de ferramentas do WordPress ao nosso bloco, ou seja, para alinhamento e alinhamento de blocos. Tamb\u00e9m aprenderemos a adicionar nossas pr\u00f3prias barras de ferramentas com nossos pr\u00f3prios bot\u00f5es para fazer a\u00e7\u00f5es personalizadas.<\/p>\n<\/li>\n
\nAt\u00e9 agora, nesta s\u00e9rie de tutoriais, escrevemos todo o c\u00f3digo dentroregisterBlockType()<\/code>daedit<\/code>fun\u00e7\u00e3o do. \u00c9 totalmente poss\u00edvel e geralmente recomendado atribuir a edi\u00e7\u00e3o a um componente separado. Ao fazer isso, podemos utilizar funcionalidades como o estado do componente e os m\u00e9todos do ciclo de vida.<\/p>\n<\/li>\n
\nNesta parte vamos focar em como traduzir os textos e valores do nosso bloco. Usamos o WP-CLI para gerar os arquivos necess\u00e1rios para que o Gutenberg possa carregar nossas tradu\u00e7\u00f5es ao alternar o idioma do WordPress.<\/p>\n<\/li>\n