Nesta parte final da s\u00e9rie de tutoriais de blocos personalizados do Gutenberg, aprenderemos como usar componentes de ordem superior para utilizar os componentes do WordPress para realizar consultas para postagens e outras informa\u00e7\u00f5es essenciais do WordPress.<\/p>\n
Na parte anterior, aprendemos sobre blocos din\u00e2micos e acabamos implementando a funcionalidade para digitar um ID de postagem e usar PHP para buscar a postagem dinamicamente e renderiz\u00e1-la no modo frontend e de visualiza\u00e7\u00e3o. Digitar manualmente um ID de postagem n\u00e3o \u00e9 intuitivo ou f\u00e1cil de usar. \u00c9 muito melhor fornecer ao usu\u00e1rio alguma maneira de selecionar ou pesquisar postagens pelo t\u00edtulo da postagem e clicar em algo para escolher uma.<\/p>\n
Uma parte de resolver isso \u00e9 bastante f\u00e1cil; como consultar posts da A outra parte de resolver isso depende um pouco de voc\u00ea; que \u00e9 como apresentar a lista ou escolha em nosso bloco. Como voc\u00ea vai apresentar a lista de posts para escolher? Em um select, lista de checkboxes ou radio buttons? Ou deseja oferecer a possibilidade de pesquisar e, assim, implementar uma solu\u00e7\u00e3o de preenchimento autom\u00e1tico ou uma solu\u00e7\u00e3o de filtro? Voc\u00ea deve permitir a sele\u00e7\u00e3o de v\u00e1rias postagens ou apenas uma? Normalmente, voc\u00ea pode resolver isso usando diferentes componentes do WordPress, mas precisa decidir qual solu\u00e7\u00e3o deseja implementar.<\/p>\n Vamos primeiro aprender um pouco sobre componentes de ordem superior e o m\u00f3dulo de dados do WordPress, antes de vermos como podemos realizar consultas de postagem em nosso bloco.<\/p>\n Ao trabalhar com o React, muitas vezes voc\u00ea precisar\u00e1 passar o estado para os componentes filho ou para cima para um componente pai comum para que todos os outros componentes filho tenham acesso a eles. Uma solu\u00e7\u00e3o para resolver o problema de centralizar o estado de um aplicativo \u00e9 usando o Redux<\/a>. Com o Redux voc\u00ea pode construir lojas \u2013 que s\u00e3o objetos que guardam o estado e as informa\u00e7\u00f5es de uma aplica\u00e7\u00e3o.<\/p>\n O m\u00f3dulo de dados do WordPress<\/a> \u00e9 um hub de diferentes lojas e fornece fun\u00e7\u00f5es para gerenciar dados entre diferentes m\u00f3dulos. Ele \u00e9 constru\u00eddo em cima do Redux \u2013 mas n\u00e3o o confunda com um Redux para WordPress, pois existem algumas diferen\u00e7as. Voc\u00ea pode registrar suas pr\u00f3prias lojas no WordPress, ou talvez mais importante, acessar as lojas registradas do WordPress.<\/p>\n Aqui est\u00e1 uma vis\u00e3o geral das lojas dispon\u00edveis<\/a> no m\u00f3dulo de dados do WordPress (provavelmente mudar\u00e1 com o tempo). Todas as lojas do WordPress est\u00e3o contidas no m\u00f3dulo Core Data<\/a>. Por exemplo, existem lojas que cont\u00eam os dados do editor ( Para acessar os dados das lojas, voc\u00ea precisar\u00e1 usar seletores. O WordPress tem um seletor dentro do Abra o editor Gutenberg no Chrome e abra a ferramenta de depura\u00e7\u00e3o do console. Digitar:<\/p>\n E pressione Enter. Voc\u00ea deve obter um objeto como resposta com todos os seletores (fun\u00e7\u00f5es) que voc\u00ea pode usar. Como exemplos, voc\u00ea encontrar\u00e1 fun\u00e7\u00f5es como Experimente tamb\u00e9m outras lojas que n\u00e3o Isso retorna todas as informa\u00e7\u00f5es sobre todos os blocos atualmente em sua postagem. Voc\u00ea pode brincar com isso no depurador do console do Chrome e tentar chamar algumas fun\u00e7\u00f5es para ver o que voc\u00ea obt\u00e9m em resposta. Alguns requerem par\u00e2metros e outros n\u00e3o.<\/p>\n Para usar seletores e armazenamentos de acesso, precisamos us\u00e1-los em componentes de ordem superior. Componentes de ordem superior s\u00e3o simplesmente um padr\u00e3o de fazer algo no React. Passamos um componente para uma fun\u00e7\u00e3o (ou componente) que pode adicionar algumas props e, em seguida, retornar um novo componente.<\/p>\n Dentro do m\u00f3dulo de dados do WordPress encontramos Isso tem sido muita teoria, ent\u00e3o vamos come\u00e7ar a ver alguns c\u00f3digos e exemplos pr\u00e1ticos.<\/p>\n Para resumir o que foi dito acima, precisamos configurar o componente de ordem superior A fun\u00e7\u00e3o Se voc\u00ea seguiu esta s\u00e9rie de tutoriais da parte anterior, voc\u00ea teria um bloco personalizado que aceita um ID de postagem digitado manualmente em uma entrada de texto. O bloco usa PHP para renderizar dinamicamente o post no frontend (e no modo de visualiza\u00e7\u00e3o). Vamos remover a exig\u00eancia de digitar manualmente o ID do post e substitu\u00ed-lo por algo mais intuitivo. Como mencionado anteriormente, voc\u00ea precisa decidir por si mesmo como apresentar a lista de postagens e a melhor maneira de permitir que o usu\u00e1rio escolha uma postagem. Para simplificar, adicionaremos uma sele\u00e7\u00e3o de todos os t\u00edtulos de postagem para escolher.<\/p>\n Vamos come\u00e7ar a codificar isso. Primeiro precisamos desestruturar o que precisamos do pacote de dados;<\/p>\n Ent\u00e3o usamos Com o c\u00f3digo acima nosso componente, Agora podemos entrar em nosso componente Fique de olho no depurador do seu console. Voc\u00ea pode notar que isso ser\u00e1 registrado duas vezes; first Vamos nos preparar para preencher um select com os posts retornados e para isso usaremos o componente WordPress Se voc\u00ea der uma olhada na resposta do console logado (segunda), voc\u00ea pode ver que obtemos um array de objetos post. Cada postagem cont\u00e9m a maioria das informa\u00e7\u00f5es da postagem, mas para as op\u00e7\u00f5es em uma sele\u00e7\u00e3o, estamos interessados \u200b\u200bapenas no ID da postagem como valor e no t\u00edtulo da postagem como r\u00f3tulo. Ent\u00e3o, vamos percorrer o Observe que precisamos nos referir ao t\u00edtulo do post como Depois disso, simplesmente precisamos adicionar um Definimos o Isso \u00e9 tudo! Se voc\u00ea seguiu o c\u00f3digo da etapa anterior, j\u00e1 deve ter um c\u00f3digo que l\u00ea o ID do post salvo e o exibe!<\/p>\n Claro que eu recomendo que voc\u00ea implemente a lista e escolha de posts de forma diferente de apenas um simples select. Esta n\u00e3o \u00e9 uma solu\u00e7\u00e3o bonita ou f\u00e1cil de usar, especialmente para sites com muitos posts. Falando em quantidade de posts, voc\u00ea percebeu que o seletor getEntityRecords s\u00f3 retorna no m\u00e1ximo os 10 \u00faltimos posts? Esse \u00e9 o comportamento padr\u00e3o de getEntityRecords, mas podemos modificar a consulta post passando um terceiro par\u00e2metro.<\/p>\n Passando um objeto como terceiro par\u00e2metro para getEntityRecords podemos modificar a consulta post. Como mencionado antes, infelizmente, Nota: Esta n\u00e3o \u00e9 uma lista exaustiva e tamb\u00e9m est\u00e1 sujeita a altera\u00e7\u00f5es!<\/p>\n Vamos modificar nossa consulta. Queremos fazer duas coisas; primeiro queremos buscar todos os posts e n\u00e3o apenas os 10 mais recentes. Para fazer isso, fornecemos Voc\u00ea pode pensar; espere, como obtemos o ID do post atual? N\u00e3o se esque\u00e7a de que n\u00f3s, dentro do componente de ordem superior Vamos modificar o A mudan\u00e7a acima \u00e9 bastante auto-explicativa. Geramos um objeto de consulta com as propriedades Esta postagem conclui a s\u00e9rie de tutoriais Como criar blocos personalizados do Gutenberg. A s\u00e9rie foi projetada para passar pelo b\u00e1sico do desenvolvimento de seus pr\u00f3prios blocos personalizados, fornecendo a voc\u00ea um ponto de partida para desenvolver seus pr\u00f3prios blocos e mais complexos. Definitivamente, fique de olho em mais tutoriais relacionados ao Gutenberg aqui<\/a>. Talvez voc\u00ea encontre um tutorial explicando mais especificamente algo que voc\u00ea queria fazer sozinho!<\/p>\nedit<\/code>fun\u00e7\u00e3o do seu bloco. Temos algumas op\u00e7\u00f5es para isso, e a melhor op\u00e7\u00e3o \u00e9 usar alguns dos chamados componentes de ordem superior<\/a> do WordPress. Voc\u00ea tamb\u00e9m pode usar m\u00e9todos do navegador Javascript para executar uma chamada AJAX para a API REST do WordPress usando, por exemplo [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>, ou axios. Na verdade, o WordPress fornece sua pr\u00f3pria vers\u00e3o de fetch<\/code>: apiFetch()<\/code>.<\/p>\nM\u00f3dulo WordPress Core Data e componentes de ordem superior<\/h2>\n
core\/editor<\/code>), avisos (core\/notices<\/code>), dados do bloco (core\/blocks<\/code>), informa\u00e7\u00f5es da viewport (core\/viewport<\/code>) e por \u00faltimo mas n\u00e3o menos importante a pr\u00f3pria loja principal \u2013 core<\/code>.<\/p>\nwp.data<\/code>pacote; [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Voc\u00ea tamb\u00e9m pode manipular as lojas com dispatch<\/code>, mas isso n\u00e3o \u00e9 coberto por esta s\u00e9rie de tutoriais. Voc\u00ea pode realmente facilmente experimentar o seletor para ver o que est\u00e1 dispon\u00edvel nas lojas do WordPress.<\/p>\nTestando o seletor<\/h3>\n
wp.data.select('core')<\/code><\/pre>\ngetMedia<\/code>, getTaxonomy<\/code>, getAuthors<\/code>e assim por diante. O que usaremos para consultar os posts tamb\u00e9m est\u00e1 l\u00e1, mas n\u00e3o tem um nome intuitivo; \u00e9 chamado getEntityRecords<\/code>. No momento algumas dessas fun\u00e7\u00f5es est\u00e3o documentadas<\/a>, mas a maioria n\u00e3o est\u00e1, infelizmente.<\/p>\ncore<\/code>, por exemplo:<\/p>\nwp.data.select('core\/editor').getBlocks()<\/code><\/pre>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>; um componente de ordem superior que pode ser usado para injetar props usando seletores registrados. Em outras palavras; dentro withSelect<\/code>temos acesso ao seletor select()<\/code>e podemos us\u00e1-lo para realizar chamadas. Os resultados do seletor ser\u00e3o props para o componente para o qual passamos withSelect<\/code>. Se voc\u00ea precisar combinar v\u00e1rios componentes de ordem superior, o m\u00f3dulo de dados do WordPress oferece a compose<\/code>fun\u00e7\u00e3o, mas isso est\u00e1 fora do escopo deste tutorial. Usaremos apenas um componente de ordem superior; withSelect<\/code>.<\/p>\nBuscando postagens usando withSelect, select e getEntityRecords<\/h2>\n
withSelect<\/code>para nosso bloco. Dentro disso podemos usar seletores para acessar as lojas do WordPress, que ser\u00e3o props para o componente que passarmos para o withSelect<\/code>. Usaremos a core<\/code>loja e o seletor getEntityRecords<\/code>para consultar as postagens.<\/p>\ngetEntityRecords<\/code>infelizmente n\u00e3o est\u00e1 muito documentada<\/a> no momento. Mas aprendi que podemos passar postType<\/code>como primeiro par\u00e2metro (tipo de entidade) e depois o tipo de postagem como segundo par\u00e2metro (por exemplo, ‘ post<\/code>‘ ou ‘ page<\/code>‘). O terceiro par\u00e2metro \u00e9 opcional e pode ser um objeto com argumentos de consulta. Veremos o terceiro par\u00e2metro mais adiante.<\/p>\nCodificando o
withSelect<\/code><\/h3>\nconst { withSelect, select } = wp.data;<\/code><\/pre>\nwithSelect<\/code>na fun\u00e7\u00e3o do nosso bloco edit<\/code>e passamos nosso componente de edi\u00e7\u00e3o; FirstBlockEdit<\/code>. Dentro withSelect<\/code>desestruturamos select<\/code>como par\u00e2metro e usamos o seletor select()<\/code>para consultar posts com getEntityRecords<\/code>. Retornamos um objeto com uma propriedade que chamamos posts<\/code>que cont\u00e9m o resultado da select()<\/code>chamada.<\/p>\n...\nedit: withSelect(select => {\n return {\n posts: select('core').getEntityRecords('postType', 'post')\n }\n})(FirstBlockEdit),\nsave:() => { return null }\n...<\/code><\/pre>\nFirstBlockEdit<\/code>, agora ter\u00e1 uma nova prop; posts<\/code>. Tudo o que retornarmos dentro do withSelect<\/code>componente de ordem superior estar\u00e1 acess\u00edvel como adere\u00e7os para o componente que passarmos (no par\u00eantese no final).<\/p>\nManipulando as postagens do seletor<\/h3>\n
FirstBlockEdit<\/code>e dar uma olhada no novo arquivo props.posts<\/code>. Como nosso componente \u00e9 um componente baseado em classe, precisamos nos referir a props com this<\/code>. Vamos consol\u00e1-lo dentro da render()<\/code>fun\u00e7\u00e3o em FirstBlockEdit<\/code>:<\/p>\nrender() {\n const { attributes, setAttributes } = this.props;\n console.log(this.props.posts);\n ...\n}<\/code><\/pre>\nnull<\/code>e, algum tempo depois, registra uma s\u00e9rie de postagens. Isso ocorre porque a consulta de postagens \u00e9 feita de forma ass\u00edncrona. Nosso componente \u00e9 renderizado primeiro antes da resposta, momento em que props.posts<\/code>\u00e9 null<\/code>. Assim que obtivermos uma resposta, nosso componente ser\u00e1 renderizado novamente com o prop preenchido. Voc\u00ea deve sempre se lembrar de acomodar este pequeno per\u00edodo de tempo sem dados em seu c\u00f3digo.<\/p>\nAdicionando um select para exibir as postagens<\/h3>\n
SelectControl<\/code>. O componente SelectControl<\/code>aceita um array de escolhas onde cada escolha \u00e9 um objeto com as propriedades value<\/code>e label<\/code>.<\/p>\nposts<\/code>prop e preencher uma vari\u00e1vel de matriz que passaremos para SelectControl<\/code>. N\u00e3o se esque\u00e7a de lidar com o pequeno per\u00edodo de tempo em que o posts<\/code>suporte est\u00e1 null<\/code>. Nesse caso, preencheremos o array choice com uma op\u00e7\u00e3o que tenha o r\u00f3tulo “Loading\u2026".<\/p>\nlet choices = [];\nif (this.props.posts) {\n choices.push({ value: 0, label: __('Select a post', 'awhitepixel') });\n this.props.posts.forEach(post => {\n choices.push({ value: post.id, label: post.title.rendered });\n });\n} else {\n choices.push({ value: 0, label: __('Loading...', 'awhitepixel') })\n}<\/code><\/pre>\npost.title.rendered<\/code>. Voc\u00ea pode procurar por si mesmo no console logado posts<\/code>e ver como as informa\u00e7\u00f5es est\u00e3o estruturadas para cada post.<\/p>\nSelectControl<\/code>onde quisermos. Ele pode estar dentro do pr\u00f3prio bloco (preferencialmente dentro do c\u00f3digo para o modo de edi\u00e7\u00e3o), ou dentro do Inspector.<\/p>\n<SelectControl\n label={__('Selected Post', 'awhitepixel')}\n options={choices}\n value={attributes.selectedPostId}\n onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\nSelectControl<\/code>para se referir ao atributo selectedPostId<\/code>que definimos na etapa anterior. Definimos o valor salvo no prop value<\/code>e tratamos de atualiz\u00e1-lo no onChange<\/code>prop \u2013 assim como fizemos v\u00e1rias vezes antes. Garantimos que um n\u00famero seja armazenado usando parseInt()<\/code>porque selectedPostId<\/code>tem o tipo number<\/code>. E passamos o array de escolhas gerado no prop options<\/code>.<\/p>\nModifique a consulta para getEntityRecords<\/h3>\n
getEntityRecords<\/code>falta a documenta\u00e7\u00e3o para. Mas lendo por toda a web, reuni uma lista de poss\u00edveis argumentos de consulta;<\/p>\n\n
per_page<\/code>: defina como um n\u00famero para limitar o n\u00famero de postagens. Defina como -1<\/code>para buscar o m\u00e1ximo de 100. Padr\u00e3o 10<\/code>.<\/li>\nexclude<\/code>: exclui determinadas postagens da consulta. Defina como um ID de postagem ou uma matriz de n\u00fameros para v\u00e1rios IDs de postagem.<\/li>\nparent_exclude<\/code>: exclui determinadas postagens principais. Defina como um ID de postagem ou uma matriz de v\u00e1rios IDs de postagem.<\/li>\norderby<\/code>: Decida a ordem das postagens. Muito provavelmente voc\u00ea pode usar os mesmos par\u00e2metros que no orderby de WP_Query<\/a>. Pode ser, por exemplo, ‘ menu_order<\/code>‘.<\/li>\norder<\/code>: Ou 'asc'<\/code>ou ‘ desc'<\/code>para ordena\u00e7\u00e3o ascendente ou descendente.<\/li>\nstatus<\/code>: Filtre por status de postagem. Pode ser uma string, uma string com v\u00e1rios status separados por v\u00edrgula ou uma matriz de strings de status. Por exemplo ['publish', 'draft']<\/code>, para consultar posts publicados e redigidos.<\/li>\ncategories<\/code>: Filtre as postagens por determinadas categorias. Forne\u00e7a um ID de categoria ou uma matriz de IDs de categoria. Acredito que isso funcione apenas para categorias de postagem e n\u00e3o para outras taxonomias personalizadas.<\/li>\ntags<\/code>: Filtre as postagens por determinadas tags. Forne\u00e7a um ID de tag ou uma matriz de IDs de tag. Funciona apenas para tags de postagem e n\u00e3o para outras taxonomias personalizadas.<\/li>\nsearch<\/code>: Adicione uma consulta de pesquisa (string).<\/li>\n<\/ul>\n-1<\/code>para per_page<\/code>. Em segundo lugar, queremos excluir a postagem atual da lista de postagens fornecendo o ID da postagem atual para exclude<\/code>. Muitas vezes n\u00e3o faz sentido mostrar um atalho de postagem ou visualiza\u00e7\u00e3o da pr\u00f3pria postagem atual.<\/p>\nwithSelect<\/code>e com o select<\/code>seletor, podemos acessar todos os principais armazenamentos de dados do WordPress. O ID de postagem atual \u00e9 uma coisa natural para armazenar em uma das principais lojas do WordPress. Dentro core\/editor<\/code>encontramos a fun\u00e7\u00e3o getCurrentPostId()<\/code>.<\/p>\nwithSelect<\/code>retorno para algo assim:<\/p>\nedit: withSelect(select => {\n const currentPostId = select('core\/editor').getCurrentPostId();\n const query = {\n per_page: -1,\n exclude: currentPostId\n }\n return {\n posts: select('core').getEntityRecords('postType', 'post', query)\n }\n})(FirstBlockEdit),<\/code><\/pre>\nper_page<\/code>e exclude<\/code>passamos isso como terceiro par\u00e2metro para getEntityRecords()<\/code>. Agora nosso componente props.posts<\/code>dentro do FirstBlockEdit<\/code>componente deve listar todas as postagens, mas excluir a postagem atual.<\/p>\nConclus\u00e3o<\/h2>\n