{"id":233923,"date":"2023-02-24T13:34:00","date_gmt":"2023-02-24T10:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233923"},"modified":"2022-11-11T13:12:09","modified_gmt":"2022-11-11T10:12:09","slug":"criar-bloco-personalizado-do-gutenberg-parte-3-aderecos-e-componentes-do-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/criar-bloco-personalizado-do-gutenberg-parte-3-aderecos-e-componentes-do-wordpress\/","title":{"rendered":"Criar bloco personalizado do Gutenberg – Parte 3: adere\u00e7os e componentes do WordPress"},"content":{"rendered":"\n

A etapa anterior<\/a> desta s\u00e9rie de tutoriais passou por como registrar um bloco personalizado, 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

Para utilizar os componentes do WordPress em nosso bloco, precisamos primeiro conhecer os adere\u00e7os.<\/p>\n

Adere\u00e7os<\/h2>\n

Props \u00e9 um recurso importante no React e \u00e9 basicamente uma maneira de passar vari\u00e1veis \u200b\u200bou fun\u00e7\u00f5es para outros componentes. Se voc\u00ea n\u00e3o est\u00e1 familiarizado com os adere\u00e7os do React, voc\u00ea pode ler o tutorial oficial do React<\/a> sobre isso.<\/p>\n

O WordPress fornece alguns adere\u00e7os para as fun\u00e7\u00f5es edit<\/code>e em. Dentro dessas props temos acesso a coisas cr\u00edticas, como atributos e um m\u00e9todo para atualizar nossos atributos. Veremos os atributos em detalhes na pr\u00f3xima etapa<\/a>! save``registerBlockType()<\/code><\/a><\/p>\n

At\u00e9 agora, em nosso bloco, escrevemos a fun\u00e7\u00e3o for edit<\/code>e save<\/code>assim:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Voc\u00ea deve se acostumar a adicionar o par\u00e2metro props<\/code>a edit<\/code>and save<\/code>, assim:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Agora voc\u00ea tem acesso total \u00e0 vari\u00e1vel props<\/code>e tudo que ela cont\u00e9m de dentro edit<\/code>e save<\/code>. Se voc\u00ea estiver curioso, pode adicionar um console.log(props);<\/code>na edit<\/code>fun\u00e7\u00e3o antes da return<\/code>instru\u00e7\u00e3o. Voc\u00ea deve ver quais adere\u00e7os est\u00e3o dispon\u00edveis no depurador do console.<\/p>\n
Usando os componentes do WordPress<\/h2>\n
Como mencionado anteriormente, temos acesso a uma enorme biblioteca de componentes e fun\u00e7\u00f5es \u00fateis dentro do pacote global wp<\/code>. Voc\u00ea encontrar\u00e1 componentes prontos para uso para qualquer tipo de componente relacionado a entrada que voc\u00ea possa imaginar. Os exemplos incluem entradas de texto, entradas de rich text, menus suspensos, altern\u00e2ncia, caixas de sele\u00e7\u00e3o, bot\u00f5es em estilos diferentes, carregador de m\u00eddia e seletores de cores. Existem tamb\u00e9m fun\u00e7\u00f5es e componentes para funcionalidades mais avan\u00e7adas. Como consultar o WordPress por conte\u00fado (postagens, categorias, etc.) com fun\u00e7\u00f5es integradas ou buscar com a API REST.<\/p>\n
\u00c9 mais f\u00e1cil e recomendado usar os componentes de interface do usu\u00e1rio do WordPress. Isso \u00e9 para garantir que o design e a funcionalidade sejam o mais simplificados poss\u00edvel para n\u00e3o confundir ou incomodar os usu\u00e1rios.<\/p>\n
Mas, infelizmente, no momento em que escrevo isso, a documenta\u00e7\u00e3o de Gutenberg \u00e9 muito escassa. Eu encontrei a melhor maneira de aprender sobre o que existe dentro do wp<\/code>pacote e como os componentes funcionam, na verdade, olhando em seu reposit\u00f3rio oficial do Github do Gutenberg<\/a>. Alguns dos pacotes (pastas) t\u00eam um texto leia-me que oferece um pouco de documenta\u00e7\u00e3o. D\u00ea uma olhada no leia-me para um bot\u00e3o<\/a> ou a altern\u00e2ncia<\/a>, por exemplo.<\/p>\n
O reposit\u00f3rio do Github deve corresponder ao que est\u00e1 dentro do wp<\/code>pacote (dependendo de qual vers\u00e3o voc\u00ea possui e de qual branch voc\u00ea est\u00e1 procurando no Github). Isso significa que cada pasta que voc\u00ea v\u00ea no diret\u00f3rio raiz packages<\/code>do Github reside no wp<\/code>pacote global. Como exemplo, lembre-se de que a fun\u00e7\u00e3o que usamos na etapa anterior, registerBlockType()<\/code>, estava dentro wp.blocks<\/code>de, o que significa que voc\u00ea encontrar\u00e1 o c\u00f3digo-fonte dessa fun\u00e7\u00e3o exportado dentro de packages\/blocks\/<\/code>.<\/p>\n
Como desenvolvi v\u00e1rios blocos personalizados do Gutenberg e pesquisei bastante no reposit\u00f3rio do Github, descobri que existem alguns pacotes que cont\u00eam a funcionalidade mais comum usada para criar blocos personalizados. Vou inclu\u00ed-los abaixo.<\/p>\n
Para uma vis\u00e3o mais completa dos componentes dispon\u00edveis, recomendo baixar meu eBook gratuito cobrindo os componentes dispon\u00edveis em Gutenberg! Ele cont\u00e9m os componentes mais comuns e \u00fateis com documenta\u00e7\u00e3o sobre props e exemplos de c\u00f3digo:<\/p>\n
Uma vis\u00e3o geral r\u00e1pida dos pacotes mais comuns que voc\u00ea usar\u00e1 para blocos<\/h3>\n
Obviamente h\u00e1 muito mais dispon\u00edvel, mas o abaixo \u00e9 o mais comum para o desenvolvimento de blocos. Usaremos a maioria, se n\u00e3o todos, nesta s\u00e9rie de tutoriais. Sempre que voc\u00ea quiser usar um componente, voc\u00ea precisa saber em qual pacote ele est\u00e1.<\/p>\n
wp.components<\/h4>\n
Voc\u00ea encontrar\u00e1 a maioria dos componentes de entrada da interface do usu\u00e1rio dentro do wp.components<\/code>. Exemplos s\u00e3o diferentes entradas de texto, sele\u00e7\u00e3o, caixas de sele\u00e7\u00e3o, bot\u00f5es de op\u00e7\u00e3o, componentes arrast\u00e1veis, bot\u00f5es, seletor de cores, seletor de data e assim por diante. Voc\u00ea tamb\u00e9m encontrar\u00e1 componentes de interface do usu\u00e1rio que podem ser usados \u200b\u200bpara a barra de ferramentas do bloco e o conte\u00fado da barra lateral de configura\u00e7\u00f5es (chamadas InspectorControls) no editor.<\/p>\n
Confira as pastas no reposit\u00f3rio do Github<\/a>.<\/p>\n
wp.blockEditor e wp.editor<\/h4>\n
Nesses dois pacotes, voc\u00ea encontrar\u00e1 componentes \u00fateis para rich text, manipula\u00e7\u00e3o de imagens\/carregador de m\u00eddia e componentes para adicionar barras de ferramentas ou pain\u00e9is personalizados do Inspetor (barra lateral).<\/p>\n
No final desta s\u00e9rie, veremos a constru\u00e7\u00e3o de blocos din\u00e2micos nos quais usaremos PHP para renderizar a sa\u00edda do bloco e, para isso, usaremos um componente de wp.editor<\/code>.<\/p>\n
Pelo que entendi, a maioria dos componentes come\u00e7ou nos wp.editor<\/code>primeiros dias de Gutenberg, mas especialmente ap\u00f3s o WordPress 5.3, muitos deles foram movidos para o wp.blockEditor<\/code>. Se voc\u00ea usar um componente em wp.editor<\/code>que o WordPress planeja migrar para wp.blockEditor<\/code>ele, n\u00e3o falhar\u00e1 a partir de agora, mas no depurador do console, voc\u00ea receber\u00e1 avisos de que ele foi preterido e que voc\u00ea deve mudar para wp.blockEditor<\/code>quando puder. E reversivelmente, se voc\u00ea estiver seguindo esta s\u00e9rie com uma vers\u00e3o mais antiga do WordPress por algum motivo, poder\u00e1 encontrar erros ao chamar componentes que wp.blockEditor<\/code>ainda n\u00e3o foram movidos.<\/p>\n
\"Criar<\/a><\/p>\n
wp.element<\/h4>\n
Dentro wp.element<\/code>voc\u00ea encontrar\u00e1 componentes que correspondem aos componentes React. Por exemplo Component<\/code>(que corresponde a React.Component<\/code>) e Fragment<\/code>( React.Fragment<\/code>). N\u00f3s os usaremos quando come\u00e7armos a dividir nosso c\u00f3digo em componentes separados.<\/p>\n
wp.i18n<\/h4>\n
Como o nome indica, o wp.i18n<\/code>pacote cont\u00e9m fun\u00e7\u00f5es para lidar com a tradu\u00e7\u00e3o. Ele cont\u00e9m as mesmas fun\u00e7\u00f5es de tradu\u00e7\u00e3o que conhecemos no PHP; por exemplo __()<\/code>e _e()<\/code>. Veremos isso em detalhes em <<<>>>> quando aprendermos como traduzir nosso bloco.<\/p>\n
wp.data<\/h4>\n
O wp.data<\/code>pacote \u00e9 para consultar o WordPress para dados fora do editor. Existem componentes para despachar mensagens withSelect<\/code>e select<\/code>que usaremos posteriormente nesta s\u00e9rie para consultar postagens dentro de nosso bloco.<\/p>\n
wp.compose<\/h4>\n
O pacote anterior e wp.compose<\/code>s\u00e3o para constru\u00e7\u00e3o de blocos mais avan\u00e7ada. Dentro deste pacote, encontraremos componentes e fun\u00e7\u00f5es para criar os chamados componentes de ordem superior. Componentes de ordem superior<\/a> \u00e9 uma t\u00e9cnica de padr\u00e3o no React para reutilizar componentes e l\u00f3gica, e usaremos isso em combina\u00e7\u00e3o com wp.data<\/code>para consultar postagens.<\/p>\n
Chega de conversa \u2013 como voc\u00ea usa alguns desses componentes na pr\u00e1tica?<\/h2>\n
Como mencionado anteriormente; para usar os componentes do WordPress voc\u00ea precisa saber onde eles est\u00e3o. Espero que minha vis\u00e3o geral acima combinada com o reposit\u00f3rio do Github<\/a> d\u00ea uma ideia de onde obt\u00ea-los.<\/p>\n
N\u00e3o se esque\u00e7a de que voc\u00ea sempre pode adicionar qualquer tag HTML normal, como div, span, t\u00edtulos e assim por diante. Apenas lembre-se de seguir as diretrizes do React<\/a> em atributos. Por exemplo class<\/code>, \u00e9 uma palavra-chave reservada no React (para criar componentes baseados em classe), portanto, se voc\u00ea deseja adicionar uma classe a um elemento HTML, precisa usar className<\/code>.<\/p>\n
Nota: Durante o desenvolvimento, n\u00e3o se esque\u00e7a de iniciar npm run start<\/code>a compila\u00e7\u00e3o do seu c\u00f3digo.<\/p>\n
Como um exemplo simples, vamos experimentar alguns componentes para ver como eles se parecem. N\u00f3s os desestruturamos de seus pacotes correspondentes e os utilizamos em nossa edit<\/code>fun\u00e7\u00e3o.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
Isso, por exemplo, resultar\u00e1 em nosso bloco assim no editor.<\/p>\n
\"Criar<\/a><\/p>\n
Voc\u00ea notar\u00e1 que receber\u00e1 mensagens de erro no Console ao digit\u00e1-las e que n\u00e3o salvar\u00e1 o que voc\u00ea digitar ao atualizar a postagem (e atualizar). Isso ocorre porque nos faltam props nos componentes que s\u00e3o a conex\u00e3o com os atributos, onde todos os dados do nosso bloco s\u00e3o armazenados. As props s\u00e3o respons\u00e1veis \u200b\u200bpor passar os valores salvos e fun\u00e7\u00f5es respons\u00e1veis \u200b\u200bpor atualizar nossos atributos quando algo \u00e9 alterado em nossas entradas. Isso \u00e9 o que faremos na pr\u00f3xima etapa, onde finalmente come\u00e7aremos a escrever algum c\u00f3digo de verdade.<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Na etapa anterior, registramos um bloco personalizado do Gutenberg. Nesta etapa, aprenderemos como usar os componentes do WordPress para adicionar diferentes configura\u00e7\u00f5es de tipo.<\/p>\n","protected":false},"author":1,"featured_media":151761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,941,941,1110,816,816,846,846,867,867],"tags":[1170],"class_list":["post-233923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-gutenberg-8","category-n-a","category-plug-ins","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233923","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=233923"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}