{"id":234011,"date":"2023-02-27T13:25:00","date_gmt":"2023-02-27T10:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234011"},"modified":"2022-11-11T13:50:51","modified_gmt":"2022-11-11T10:50:51","slug":"criar-bloco-personalizado-do-gutenberg-parte-4-atributos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/criar-bloco-personalizado-do-gutenberg-parte-4-atributos\/","title":{"rendered":"Criar bloco personalizado do Gutenberg – Parte 4: atributos"},"content":{"rendered":"\n

Nesta 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. Na etapa anterior<\/a>, analisamos os componentes do WordPress, onde encontr\u00e1-los e como implement\u00e1-los. Neste post vamos adicionar adere\u00e7os para fazer a conex\u00e3o com os atributos \u2013 os dados salvos.<\/p>\n

Definindo atributos<\/h2>\n

Os atributos s\u00e3o adicionados como objetos em uma matriz \u00e0 attributes<\/code>propriedade em registerBlockType()<\/code>. A chave de cada atributo \u00e9 o nome do atributo e voc\u00ea deve ter a propriedade type<\/code>no m\u00ednimo.<\/p>\n

A type<\/code>propriedade pode ser qualquer uma das seguintes; null<\/code>, boolean<\/code>, object<\/code>, array<\/code>, number<\/code>, string<\/code>ou integer<\/code>.<\/p>\n

Opcionalmente, voc\u00ea pode fornecer a propriedade default<\/code>para definir o valor inicial de seu atributo. Se voc\u00ea n\u00e3o fornecer um padr\u00e3o, o atributo padr\u00e3o ser\u00e1 null<\/code>.<\/p>\n

Outra propriedade de atributo \u00e9 source<\/code>que funciona em conjunto com a selector<\/code>propriedade, mas essas s\u00e3o coisas complicadas que veremos em detalhes mais abaixo.<\/p>\n

Por exemplo, definir dois atributos; exampleText<\/code>como string e postIds<\/code>como array, ficaria assim:<\/p>\n

const { registerBlockType } = wp.blocks;\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        },\n        postIds: {\n            type: 'array'\n            default: []\n        }\n    },\n    edit: (props) => { \n    ...<\/code><\/pre>\n
Qualquer coisa que voc\u00ea precise salvar para o seu bloco (entrada do usu\u00e1rio\/editor) requer um atributo<\/strong>. Cabe a voc\u00ea como estruturar seus dados, definindo atributos separados para cada um ou agrupando-os em um objeto. Ser\u00e1 apenas uma diferen\u00e7a em como voc\u00ea busca seus dados e como voc\u00ea os atualiza.<\/p>\n
Obtendo valores de atributo<\/h2>\n
Os atributos est\u00e3o dispon\u00edveis como adere\u00e7os para seus blocos edit<\/code>e save<\/code>fun\u00e7\u00f5es. Se voc\u00ea seguiu esta s\u00e9rie do passo anterior<\/a>, lembre-se que atualizamos as fun\u00e7\u00f5es para passar props como par\u00e2metro.<\/p>\n
\u00c9 comum desestruturar<\/strong> atributos de adere\u00e7os, j\u00e1 que voc\u00ea normalmente se refere a eles com frequ\u00eancia. Por exemplo, a sa\u00edda de um atributo chamado exampleText<\/code>ficaria assim:<\/p>\n
edit: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n},<\/code><\/pre>\n
Atualizando valores de atributo<\/h2>\n
Para atualizar atributos temos um m\u00e9todo dispon\u00edvel em props, chamado setAttributes()<\/code>. Esta fun\u00e7\u00e3o aceita um objeto onde voc\u00ea pode adicionar qualquer atributo que deseja atualizar. Voc\u00ea pode atualizar apenas um atributo, mais ou todos de uma vez. Se voc\u00ea tiver v\u00e1rios atributos definidos e chamar setAttributes()<\/code>para atualizar apenas um deles, os outros n\u00e3o ser\u00e3o tocados.<\/p>\n
Se voc\u00ea tem experi\u00eancia com React, provavelmente reconhecer\u00e1 imediatamente semelhan\u00e7as entre setAttributes()<\/code>e setState()<\/code>. Eles funcionam exatamente da mesma forma, mas a diferen\u00e7a \u00e9 que o estado no React \u00e9 apenas algo armazenado localmente naquele componente, e os atributos s\u00e3o realmente salvos como dados fora do componente.<\/p>\n
Para atualizar um atributo, voc\u00ea normalmente destruiria a fun\u00e7\u00e3o de props e a chamaria assim: Abaixo, atualizamos o exampleText<\/code>atributo para ser "Hi".<\/p>\n
const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n
Naturalmente voc\u00ea executaria a setAttributes()<\/code>partir de alguma a\u00e7\u00e3o. Um exemplo comum \u00e9 dentro do onChange<\/code>prop em algum tipo de campo de entrada que \u00e9 usado para armazenar o valor do exampleText<\/code>atributo.<\/p>\n
Certifique-se de salvar os atributos no tipo que voc\u00ea definiu no atributo. Voc\u00ea n\u00e3o ter\u00e1 sorte tentando salvar objetos em um atributo de string, por exemplo.<\/p>\n
Vamos experimentar na pr\u00e1tica! Inicie npm run start<\/code>se ainda n\u00e3o o fez.<\/p>\n
Exibindo um atributo em uma entrada de texto personalizada e atualizando o valor do atributo<\/h2>\n
Na etapa anterior adicionamos alguns componentes em edit<\/code>, por exemplo, uma entrada de texto, mas nada foi armazenado. Vamos adicionar um atributo e uma entrada de texto para ele em nosso bloco. N\u00f3s dois nos certificaremos de que a entrada de texto mostre o valor atual e, sempre que a entrada for alterada, atualizaremos o atributo.<\/p>\n
Adicionando a entrada de texto e sua onChange<\/code>prop<\/h3>\n
const { registerBlockType } = wp.blocks;\nconst { TextControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <TextControl \n                    value={attributes.exampleText}\n                    onChange={(newtext) => setAttributes({ exampleText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    save:() => { \n        return <div>:)<\/div> \n    }\n});<\/code><\/pre>\n
Desestruturamos attributes<\/code>e setAttributes<\/code>a partir de props<\/code>como usaremos ambos. Em seguida, usamos um componente do pacote TextControl<\/code>do WordPress. wp.components<\/code>Passamos dois adere\u00e7os para ele; value<\/code>ir\u00e1 definir o valor da entrada (tanto inicialmente quanto enquanto digitamos) e uma a\u00e7\u00e3o no evento da entrada onChange<\/code>.<\/p>\n
Em value<\/code>definimos o valor do nosso atributo; attributes.exampleText<\/code>. No onChange<\/code>caso de executarmos uma fun\u00e7\u00e3o, passando o valor digitado de nossa entrada como par\u00e2metro, newtext<\/code>(o valor de entrada \u00e9 uma prop que \u00e9 retornada do componente). Nessa fun\u00e7\u00e3o chamamos setAttributes()<\/code>e atualizamos o atributo exampleText<\/code>para o que foi digitado na entrada.<\/p>\n
Isso \u00e9 React b\u00e1sico \u2013 al\u00e9m do fato de trabalharmos com atributos e n\u00e3o com estado. Se o acima o confundiu, recomendo ver um tutorial r\u00e1pido no React, pois provavelmente explicar\u00e1 dessa maneira melhor do que eu!<\/p>\n
Atualize seu editor e veja como o bloco funciona! Voc\u00ea deve obter uma entrada de texto padr\u00e3o para digitar as coisas, e ela ser\u00e1 salva sempre que voc\u00ea clicar em Salvar\/Atualizar na p\u00f3s-edi\u00e7\u00e3o.<\/p>\n
O resultado no frontend e no banco de dados<\/h3>\n
Se voc\u00ea visualizar sua postagem no frontend, ela ainda deve ecoar uma div com “:)" porque \u00e9 isso que ainda temos em nossa save<\/code>fun\u00e7\u00e3o. Mas algo aconteceu nos bastidores! O bloco de coment\u00e1rios do nosso bloco agora cont\u00e9m o valor do nosso atributo em JSON.<\/p>\n
\"Criar<\/a><\/p>\n
Voc\u00ea n\u00e3o pode ver os blocos de coment\u00e1rios em um modelo que faz uma the_content()<\/code>chamada normal. Para ver os blocos de coment\u00e1rios, voc\u00ea tem duas op\u00e7\u00f5es. Ou olhe na post_content<\/code>tabela de banco de dados de postagens. Ou adicione echo get_the_content()<\/code>o modelo e veja-o na ferramenta Inspecionar\/depurar.<\/p>\n
Obviamente, temos acesso aos atributos save<\/code>tamb\u00e9m, a partir de adere\u00e7os.<\/p>\n
Exibindo o valor da entrada emsave<\/code><\/h3>\n
Vamos exibir o valor do atributo dentro de uma div em nossa save<\/code>fun\u00e7\u00e3o:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n}<\/code><\/pre>\n
Nota: Depois de fazer essa altera\u00e7\u00e3o, voc\u00ea receber\u00e1 um bloco quebrado na postagem \u00e0 qual j\u00e1 adicionou esse bloco. Isso acontece porque o editor encontra uma sa\u00edda diferente da save<\/code>que definimos agora. Remova o bloco e adicione-o novamente. Digite algo em sua entrada de texto, atualize a postagem e visualize-a no frontend.<\/p>\n
E esta \u00e9 a ess\u00eancia disso, na verdade. Voc\u00ea decide quais atributos voc\u00ea precisa para salvar o que deseja em seu bloco. Em edit<\/code>voc\u00ea renderizar\u00e1 formas para o usu\u00e1rio inserir, cuidando para que os valores atuais sejam exibidos e os atualize sempre que forem alterados. E em save<\/code>voc\u00ea extrai os atributos salvos e renderiza a sa\u00edda como quiser.<\/p>\n
Abordaremos muito mais componentes e atributos diferentes \u00e0 medida que avan\u00e7amos nesta s\u00e9rie de tutoriais. Mas vamos ver um outro componente neste post para ver do que source<\/code>se trata a propriedade do atributo.<\/p>\n
RichText e a propriedade de atributosource<\/code><\/h2>\n
O componente do WordPress RichText<\/code>oferece uma \u00e1rea de texto “sem bordas” com suporte para formata\u00e7\u00e3o de texto. Voc\u00ea pode preferir usar isso em vez de uma entrada de texto padr\u00e3o (feia?) ou \u00e1rea de texto. Mas lembre-se de que isso RichText<\/code>deve ser tratado de forma um pouco diferente, pois h\u00e1 v\u00e1rios adere\u00e7os que voc\u00ea precisa conhecer, e h\u00e1 uma diferen\u00e7a em como obtemos o valor em nossa save<\/code>fun\u00e7\u00e3o.<\/p>\n
Adicionando um RichText<\/code>componente<\/h3>\n
A forma mais simples RichText<\/code>\u00e9 implement\u00e1-lo como voc\u00ea faria com uma entrada de texto:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    attributes: {\n        myRichText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <RichText \n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    ...<\/code><\/pre>\n
N\u00f3s desestruturamos o RichText<\/code>componente do wp.blockEditor<\/code>pacote, mas fora isso o que foi dito acima \u00e9 id\u00eantico ao que fizemos com a entrada de texto padr\u00e3o.<\/p>\n
Manipulando save<\/code>comRichText<\/code><\/h3>\n
Por\u00e9m na save<\/code>fun\u00e7\u00e3o voc\u00ea precisa usar o RichText<\/code>componente novamente para obter o valor do atributo. Chamamos RichText.Content<\/code>e configuramos o prop value<\/code>para nosso atributo:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Isso produzir\u00e1 o que foi digitado no RichText<\/code>editor diretamente sem qualquer HTML envolvido.<\/p>\n
Quando voc\u00ea trabalha com RichText<\/code>voc\u00ea provavelmente deseja controlar o wrapper HTML em torno do texto, por exemplo a <p><\/code>ou a <h2><\/code>, tanto no frontend quanto no editor. Para isso podemos usar um prop chamado tagName<\/code>.<\/p>\n
O componente RichText<\/code>permite v\u00e1rios outros adere\u00e7os tamb\u00e9m. Voc\u00ea pode definir um texto de espa\u00e7o reservado que est\u00e1 sendo mostrado (desbotado) quando est\u00e1 vazio com o placeholder<\/code>prop. O componente tamb\u00e9m permite controlar quais op\u00e7\u00f5es de formata\u00e7\u00e3o o campo permite (quais bot\u00f5es ele mostra na barra de ferramentas).<\/p>\n
RichText<\/code>comtagName<\/code><\/h3>\n
Com a prop tagName<\/code>voc\u00ea pode predefinir em qual tag HTML sua sa\u00edda ser\u00e1 encapsulada. Quando voc\u00ea usar tagName<\/code>voc\u00ea deve usar a mesma tagName<\/code>prop e valor em ambos edit<\/code>e save<\/code>.<\/p>\n
Digamos que voc\u00ea queira colocar seu valor de atributo em um <h2><\/code>, que no editor for\u00e7ar\u00e1 qualquer entrada a ser um h2. Em edit<\/code>voc\u00ea pode fazer:<\/p>\n
<RichText \n    tagName=\"h2\"\n    placeholder=\"Write your heading here\"\n    value={attributes.myRichText}\n    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n\/><\/code><\/pre>\n
E em save<\/code>:<\/p>\n
<RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/><\/code><\/pre>\n
O acima agora produzir\u00e1 o que foi digitado na RichText<\/code>\u00e1rea dentro de uma <h2><\/code>tag.<\/p>\n
Usandosource<\/code><\/h3>\n
Obviamente, voc\u00ea pode combinar v\u00e1rios richtext para um bloco, por exemplo, um para o t\u00edtulo e outro para um par\u00e1grafo. Apenas lembre-se de que cada um precisar\u00e1 de seu pr\u00f3prio atributo. Por exemplo:<\/p>\n
attributes: {\n    myRichHeading: {\n        type: 'string'\n    },\n    myRichText: {\n        type: 'string'\n    }\n},\nedit: (props) => { \n    const { attributes, setAttributes } = props;\n    return (<div>\n            <RichText \n                tagName=\"h2\"\n                placeholder=\"Write your heading here\"\n                value={attributes.myRichHeading}\n                onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n            \/>\n            <RichText\n                tagName=\"p\"\n                placeholder=\"Write your paragraph here\"\n                value={attributes.myRichText}\n                onChange={(newtext) => setAttributes({ myRichText: newtext })}\n            \/>\n        <\/div>\n    );\n},\nsave: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                tagName=\"h2\"\n                value={attributes.myRichHeading}\n            \/>\n            <RichText.Content \n                tagName=\"p\"\n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
No entanto, agora voc\u00ea come\u00e7ar\u00e1 a encontrar alguns problemas. Mesmo que voc\u00ea possa fazer a formata\u00e7\u00e3o de texto no editor, nada (ou parte) da sua formata\u00e7\u00e3o n\u00e3o ser\u00e1 salvo. Quando voc\u00ea visualizar o post no frontend, ele simplesmente sair\u00e1 como h2<\/code>e um p<\/code>, sem nenhuma formata\u00e7\u00e3o que voc\u00ea tenha feito (it\u00e1lico, negrito, link). Nem mesmo o bloco de coment\u00e1rios do seu bloco cont\u00e9m a formata\u00e7\u00e3o. Esta \u00e9 a coisa complicada com RichText<\/code>. Para resolver isso precisamos trabalhar com a propriedade do atributo source<\/code>.<\/p>\n
A source<\/code>propriedade que permite ao WordPress extrair e interpretar o conte\u00fado diretamente do conte\u00fado do post. Se um atributo n\u00e3o tiver um source<\/code>conjunto, ele ser\u00e1 salvo e extra\u00eddo do bloco de coment\u00e1rios HTML.<\/p>\n
Ao trabalhar com RichText<\/code>, geralmente definimos source<\/code>como html<\/code>, que usa a biblioteca do WordPress para analisar a marca\u00e7\u00e3o HTML. A propriedade source<\/code>funciona em conjunto com outra propriedade de atributo; selector<\/code>que define de qual tag HTML ele deve extrair.<\/p>\n
Como exemplo, definimos source<\/code>como html<\/code>em nosso par\u00e1grafo RichText<\/code>e definimos selector<\/code>como p<\/code>(caso contr\u00e1rio, o padr\u00e3o \u00e9 a raiz do bloco do bloco).<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n
Agora nosso segundo RichText<\/code>deve salvar com sucesso toda a sua formata\u00e7\u00e3o de texto. Voc\u00ea tamb\u00e9m notar\u00e1 que o bloco de coment\u00e1rios agora exibe apenas o myRichHeading<\/code>atributo em JSON. O atributo myRichText<\/code>desapareceu completamente do bloco de coment\u00e1rios. Isso ocorre porque com source<\/code>o WordPress agora analisa o conte\u00fado da postagem em vez do bloco de coment\u00e1rios para o valor do atributo.<\/p>\n
\"Criar<\/a><\/p>\n
Para ser perfeitamente honesto, n\u00e3o trabalhei muito com o source<\/code>atributo e recomendo evit\u00e1-lo se puder. A documenta\u00e7\u00e3o do WordPress explica um pouco mais sobre a fonte e os atributos<\/a> que voc\u00ea deseja verificar por si mesmo.<\/p>\n
Neste post aprendemos o b\u00e1sico sobre atributos; como defini-los, atualiz\u00e1-los e gerar seus valores. Nas pr\u00f3ximas etapas, veremos mais componentes diferentes e como adicionar configura\u00e7\u00f5es fora do pr\u00f3prio conte\u00fado do bloco; na barra de ferramentas e na barra lateral do editor (chamada Inspetor).<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Nesta li\u00e7\u00e3o de bloco do Gutenberg para iniciantes, veremos como definir atributos, buscar seus valores e atualiz\u00e1-los.<\/p>\n","protected":false},"author":1,"featured_media":151358,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[941,941,1110,816,816,846,846,867,867],"tags":[1170],"class_list":["post-234011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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\/234011","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=234011"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/234011\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=234011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=234011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=234011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}