Este post \u00e9 uma introdu\u00e7\u00e3o r\u00e1pida sobre uma maneira de manter seu c\u00f3digo Gutenberg nos padr\u00f5es atuais usando ganchos React. Veremos como isso \u00e9 ben\u00e9fico, por que devemos faz\u00ea-lo e como.<\/p>\n
Suponho que voc\u00ea j\u00e1 tenha alguma experi\u00eancia trabalhando com blocos ou plugins Gutenberg um pouco mais complexos que consultam postagens, ou buscam e atualizam o meta do post. E assim trabalhando com No in\u00edcio de 2019, o React lan\u00e7ou hooks<\/a> (vers\u00e3o 16.8) \u2013 que permitem usar o estado sem usar uma classe e melhorar outros recursos que fornecem um c\u00f3digo mais leg\u00edvel e reutiliz\u00e1vel. Por exemplo, removendo a necessidade de envolver seu c\u00f3digo em componentes de ordem superior para acessar os registros. E no ver\u00e3o de 2019 o WordPress seguiu<\/a>, lan\u00e7ando ganchos personalizados: Os benef\u00edcios dos ganchos s\u00e3o muitos. O exemplo mais comum \u00e9 permitir usar o estado do componente sem ter que escrever uma classe Javascript ( Vamos pular direto para alguns exemplos e ver como implementar Vamos come\u00e7ar com Para fins de demonstra\u00e7\u00e3o, come\u00e7arei com um exemplo simples. Suponha que eu tenha um componente de bloco onde eu tenha um seletor de postagem em algum lugar. Para preencher as op\u00e7\u00f5es de postagem preciso acessar o registro ‘ Se eu quiser consultar postagens em um bloco, precisaria envolver meu componente em Observe que este exemplo de c\u00f3digo n\u00e3o est\u00e1 completo como um bloco funcional real ou plug-in JS, ele foi removido apenas para mostrar os conceitos principais do Como voc\u00ea pode ver na linha, Como mencionado anteriormente, esse m\u00e9todo funciona muito bem \u2013 e continuar\u00e1 a faz\u00ea-lo. Mas h\u00e1 v\u00e1rias desvantagens com isso. Uma \u00e9 que isso n\u00e3o \u00e9 muito f\u00e1cil de entender. Claro, este foi um exemplo muito simples. \u00c0 primeira vista, no pr\u00f3prio componente, voc\u00ea n\u00e3o tem certeza de onde Vamos faz\u00ea-lo melhor usando ganchos.<\/p>\n Converter um O c\u00f3digo acima fornece exatamente o mesmo resultado que aquele com Nota importante<\/strong>: Agora vamos ver Novamente, para fins de demonstra\u00e7\u00e3o, meus exemplos de c\u00f3digo n\u00e3o s\u00e3o partes funcionais completas de c\u00f3digo \u2013 eles ilustram apenas as partes relacionadas a esses padr\u00f5es. Neste exemplo, suponho que tenho um campo de texto mostrando uma meta de postagem – e desejo atualizar o valor meta da postagem na altera\u00e7\u00e3o.<\/p>\n Como Por exemplo:<\/p>\n Na linha Novamente, podemos ver que o c\u00f3digo n\u00e3o \u00e9 t\u00e3o simples de entender. Voc\u00ea teria que saber procurar o wrapper para descobrir o que o prop ” Mudar Por exemplo:<\/p>\n Na linha Ainda assim, o uso Provavelmente, se voc\u00ea estiver usando Se voc\u00ea precisar usar v\u00e1rios componentes de ordem superior agrupados em seu componente, provavelmente usar\u00e1 outra fun\u00e7\u00e3o do Gutenberg; Vejamos um exemplo mais completo de um componente que busca um meta valor de postagem em um campo de texto e atualiza quando seu valor \u00e9 alterado. Come\u00e7amos com como ter\u00edamos que fazer isso usando Na linha Como voc\u00ea pode ver, o c\u00f3digo necess\u00e1rio fora do nosso componente \u00e9 maior que o pr\u00f3prio componente. N\u00e3o sei quanto a voc\u00ea, mas para mim parece um pouco desconexo. Os desenvolvedores podem come\u00e7ar a ler esse c\u00f3digo de cima, sem ver a parte de baixo, e come\u00e7ar a se perguntar de onde Vejamos como converter\u00edamos o exemplo acima em ganchos.<\/p>\n Qu\u00e3o bonito e leg\u00edvel \u00e9 isso?! Podemos ver imediatamente em nosso componente Observe que na Espero que isso tenha sido informativo e \u00fatil para algu\u00e9m l\u00e1 fora. Ainda n\u00e3o estou familiarizado com os ganchos, mas vendo os benef\u00edcios de us\u00e1-los n\u00e3o vou voltar atr\u00e1s!<\/p>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>e\/ou [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. Estes s\u00e3o componentes de ordem superior no WordPress que permitem que voc\u00ea acesse as lojas do WordPress para buscar ou enviar informa\u00e7\u00f5es que est\u00e3o um pouco fora do bloco "normal" ou da edi\u00e7\u00e3o de posts. Voc\u00ea possivelmente tamb\u00e9m foi for\u00e7ado a usar compose<\/code>para combinar seus componente com v\u00e1rios componentes de ordem superior. Se seu c\u00f3digo estiver usando esses padr\u00f5es, n\u00e3o se preocupe – eles funcionam perfeitamente bem e continuar\u00e3o a funcionar! Mas \u00e0 medida que a tecnologia avan\u00e7a, podemos fazer melhor.<\/p>\n[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>e [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\nuseState<\/code>). Mas, na minha opini\u00e3o, o maior benef\u00edcio \u00e9 a reutiliza\u00e7\u00e3o. Ao remover a necessidade de usar padr\u00f5es como props de renderiza\u00e7\u00e3o e componentes de ordem superior, os componentes podem ser escritos em partes muito mais independentes. Outro benef\u00edcio dos ganchos \u00e9 que eles tornam seu c\u00f3digo mais f\u00e1cil de ler e entender!<\/p>\nuseSelect<\/code>e useDispatch<\/code>ganchos em nosso c\u00f3digo!<\/p>\nImplementa\u00e7\u00e3o
useSelect<\/code><\/h2>\nwithSelect<\/code>e seu gancho correspondente useSelect<\/code>. Eles s\u00e3o usados \u200b\u200bpara obter props derivadas de estado de seletores registrados. Exemplos comuns s\u00e3o acessar os seletores ‘ core<\/code>‘ ou ‘ core\/editor<\/code>‘ para realizar consultas de postagens (getEntityRecords<\/code>), acessar o meta do post (getEditedPostAttribute<\/code>) ou simplesmente obter o tipo de postagem atual ou outras informa\u00e7\u00f5es.<\/p>\ncore<\/code>‘ e realizar uma GetEntityRecords()<\/code>chamada.<\/p>\nManeira antiga usando
withSelect<\/code><\/h3>\nwithSelect<\/code>. Isso \u00e9 comumente feito na export<\/code>declara\u00e7\u00e3o.<\/p>\nwithSelect<\/code>. Se voc\u00ea estiver procurando por exemplos pr\u00e1ticos de c\u00f3digo, tenho outros artigos que abordam isso: por exemplo , como implementar blocos com um post select<\/a>, ou como adicionar post meta ao inspector<\/a>. Esses s\u00e3o escritos com withSelect<\/code>e withDispatch<\/code>, assim como aqueles, e depois volte aqui para aprender como transform\u00e1-los em ganchos.<\/p>\nconst { withSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin = ({ somePosts }) => {\n console.log(\"Posts from withSelect = \", somePosts);\n return(\n <div>\n ...\n <\/div>\n );\n}\n\u00a0\nexport default withSelect( (select) => { \n return {\n somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n };\n}) (AWP_Example_Plugin );<\/code><\/pre>\n#12-16<\/code>eu envolvo meu componente com withSelect<\/code>. Dentro da fun\u00e7\u00e3o withSelect posso acessar a loja que quero, e retorno uma consulta post na prop ” somePosts<\/code>“. Esta prop estar\u00e1 ent\u00e3o dispon\u00edvel dentro do meu AWP_Example_Plugin<\/code>componente (como voc\u00ea pode ver, eu destruo somePosts<\/code>as props em line #3<\/code>).<\/p>\nsomePosts<\/code>vem o suporte ou o que \u00e9. Voc\u00ea teria que saber para procurar a instru\u00e7\u00e3o de exporta\u00e7\u00e3o e ver se h\u00e1 algum wrapper. Tamb\u00e9m se sente um pouco desconexo. Voc\u00ea faz uma grande parte do trabalho importante fora do seu componente, para algo que voc\u00ea realmente deseja dispon\u00edvel dentro do seu componente.<\/p>\nConvertendo em
useSelect<\/code><\/h3>\nwithSelect<\/code>em useSelect<\/code>\u00e9 o mais simples poss\u00edvel. O primeiro passo \u00e9 que podemos definir a vari\u00e1vel somePosts<\/code>dentro do nosso componente, ao inv\u00e9s de fora pela export<\/code>declara\u00e7\u00e3o. O segundo passo \u00e9 mover toda a fun\u00e7\u00e3o que t\u00ednhamos withSelect<\/code>para o useSelect<\/code>. E \u00e9 isso.<\/p>\nconst { useSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin =() => {\n const { somePosts } = useSelect( (select) => { \n return {\n somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n };\n } );\n console.log(\"Posts from useSelect = \", somePosts);\n return(\n <div>\n ...\n <\/div>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\nwithSelect<\/code>. A diferen\u00e7a \u00e9 que o c\u00f3digo agora \u00e9 muito mais compreens\u00edvel! Agora podemos ver muito facilmente que a vari\u00e1vel somePosts<\/code>est\u00e1 armazenando o resultado de uma consulta post, bem dentro do nosso componente.<\/p>\nuseSelect<\/code>aceita um segundo par\u00e2metro; uma s\u00e9rie de depend\u00eancias. As depend\u00eancias s\u00e3o vari\u00e1veis \u200b\u200bque garantem a execu\u00e7\u00e3o apenas useSelect<\/code>quando uma das depend\u00eancias (valores de vari\u00e1vel) for alterada. Este bit \u00e9 mais importante do useDispatch<\/code>que aqui, ent\u00e3o vou explicar este bit mais na useDispatch<\/code>se\u00e7\u00e3o abaixo.<\/p>\nImplementa\u00e7\u00e3o
useDispatch<\/code><\/h2>\nwithDispatch<\/code>e seu gancho correspondente useDispatch<\/code>. Eles s\u00e3o usados \u200b\u200bpara enviar adere\u00e7os para registros. Por exemplo, dizendo ao Gutenberg para atualizar uma meta de postagem via ‘ core\/editor<\/code>‘.<\/p>\nManeira antiga usando
withDispatch<\/code><\/h3>\nwithDispatch<\/code>\u00e9 um componente de ordem superior, eu precisaria envolver meu componente dentro disso. Isso \u00e9 comumente feito na export<\/code>declara\u00e7\u00e3o. Para fazer o campo de texto para o nosso meta-trabalho,<\/p>\nconst { withDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin = ({ setPostMeta }) => { \n return(\n <PluginDocumentSettingPanel title={ __( 'withDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value=\"\"\n onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default withDispatch( (dispatch) => {\n return {\n setPostMeta( newMeta) {\n dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n }\n };\n} )( AWP_Example_Plugin );<\/code><\/pre>\n#20-26<\/code>envolvemos o componente dentro withDispatch<\/code>de, no qual retornamos uma fun\u00e7\u00e3o ” setPostMeta<\/code>" que despacha o post meta (para atualiz\u00e1-lo). Na linha #6<\/code>n\u00f3s desestruturamos a prop para que possamos us\u00e1-la no onChange<\/code>evento do campo de texto na linha #13<\/code>. (Observe que o exemplo acima n\u00e3o seria funcional porque definimos o valor do campo de texto como uma string vazia. Isso \u00e9 apenas para demonstrar como usar\u00edamos o dispatch).<\/p>\nsetPostMeta<\/code>” \u00e9 ou de onde vem. Vamos fazer melhor usando ganchos!<\/p>\nConvertendo em
useDispatch<\/code><\/h3>\nwithDispatch<\/code>para useDispatch<\/code>n\u00e3o \u00e9 t\u00e3o simples quanto converter withSelect<\/code>para useSelect<\/code>. Ainda \u00e9 muito f\u00e1cil embora. H\u00e1 duas coisas para manter em mente. Uma \u00e9 que useDispatch<\/code>leva um nome de loja como primeiro par\u00e2metro. N\u00f3s ent\u00e3o acessar\u00edamos a loja e chamar\u00edamos suas fun\u00e7\u00f5es dispon\u00edveis quando a usarmos (por exemplo, em um onChange<\/code>evento de campo de texto). Em segundo lugar, a matriz de depend\u00eancias do useDispatch<\/code>segundo par\u00e2metro de \u00e9 mais importante do que com useSelect<\/code>. Voc\u00ea pode arriscar que seu c\u00f3digo acabe em um loop eterno se n\u00e3o gerenciar as depend\u00eancias corretamente. Somente quando as vari\u00e1veis \u200b\u200bde depend\u00eancia forem alteradas, o script ser\u00e1 executado novamente useDispatch<\/code>.<\/p>\nconst { useDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin =() => { \n const tmpMetaValue = \"\";\n const { editPost } = useDispatch( 'core\/editor', [ tmpMetaValue ] );\n\u00a0\n return(\n <PluginDocumentSettingPanel title={ __( 'useDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ tmpMetaValue }\n onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n#8<\/code>desestruturamos o que precisamos da loja’ core\/editor<\/code>‘. Estamos interessados \u200b\u200bapenas na editPost<\/code>fun\u00e7\u00e3o que podemos usar para atualizar o post meta. Como segundo par\u00e2metro para useDispatch<\/code>fornecermos depend\u00eancias. Quanto a um exemplo de atualiza\u00e7\u00e3o do post meta, usar o valor do post meta (usando useSelect<\/code>) seria perfeito como depend\u00eancia. Neste exemplo, acabei de defini-lo como uma vari\u00e1vel fict\u00edcia. Olhe mais para baixo para um exemplo mais completo e realista. E ent\u00e3o na linha #16<\/code>do evento do campo de texto onChange<\/code>, chamamos editPost<\/code>para atualizar o meta. Observe a diferen\u00e7a nesta linha com o uso withDispatch<\/code>acima! Como usamos editPost<\/code>diretamente em vez de retornar uma fun\u00e7\u00e3o para atualizar post meta para n\u00f3s (setPostMeta<\/code>), precisamos fornecer um objeto commeta<\/code>como chave e depois um objeto com a meta do post que queremos atualizar. N\u00f3s meio que dividimos o withDispatch<\/code>c\u00f3digo em peda\u00e7os.<\/p>\nuseDispatch<\/code>torna o c\u00f3digo muito mais leg\u00edvel e compreens\u00edvel. N\u00e3o h\u00e1 mais c\u00f3digo adicionado fora do nosso componente que precisamos usar dentro.<\/p>\nUm exemplo mais completo e eliminando a necessidade de
compose<\/code><\/h2>\nwithDispatch<\/code>, precisar\u00e1 withSelect<\/code>desse componente tamb\u00e9m. Nos exemplos para convers\u00e3o useDispatch<\/code>acima, estamos atualizando um valor meta post. Mas para que o campo de texto funcione corretamente (e tamb\u00e9m mostre o valor atual), tamb\u00e9m precisar\u00edamos buscar o valor meta do post.<\/p>\n[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. \u00c9 uma fun\u00e7\u00e3o \u00fatil para combinar v\u00e1rios componentes de ordem superior em um componente de ordem superior que voc\u00ea pode envolver seu componente.<\/p>\nwithSelect<\/code>e withDispatch<\/code>(e, portanto, tamb\u00e9m compose<\/code>).<\/p>\nUsando
withSelect<\/code>, withDispatch<\/code>ecompose<\/code><\/h3>\nconst { __ } = wp.i18n;\nconst { compose } = wp.compose;\nconst { withSelect, withDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = ({ postMeta, setPostMeta }) => {\n return(\n <PluginDocumentSettingPanel title={ __( 'withSelect and withDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ postMeta.example_post_meta }\n onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default compose( [\n withSelect( (select) => { \n return {\n postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n };\n } ),\n withDispatch( (dispatch) => {\n return {\n setPostMeta( newMeta) {\n dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n }\n };\n }) ] )( AWP_Example_Plugin );<\/code><\/pre>\n#21-34<\/code>, compomos withSelect<\/code>e withDispatch<\/code>os envolvemos em torno de nosso componente. postMeta<\/code>from withSelect<\/code>e setPostMeta<\/code>from withDispatch<\/code>est\u00e3o agora dispon\u00edveis em nosso componente como adere\u00e7os. N\u00f3s os desestruturamos na linha #7<\/code>e os usamos em #13<\/code>e #14<\/code>.<\/p>\npostMeta<\/code>e de onde setPostMeta<\/code>v\u00eam \u2013 eles parecem estar magicamente dispon\u00edveis. Para mim isso \u00e9 muito pouco intuitivo.<\/p>\nUsando
useSelect<\/code>euseDispatch<\/code><\/h3>\nconst { __ } = wp.i18n;\nconst { useSelect, useDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = () => {\n const { postMeta } = useSelect( (select) => { \n return {\n postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n };\n } );\n const { editPost } = useDispatch( 'core\/editor', [ postMeta.example_post_meta ] );\n\u00a0\n return(\n <PluginDocumentSettingPanel title={ __( 'useSelect and useDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ postMeta.example_post_meta }\n onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\npostMeta<\/code>de onde \u00e9 obtido e como obtemos acesso ao editPost<\/code>. Nosso componente tamb\u00e9m ficou muito mais f\u00e1cil de reutilizar.<\/p>\nuseDispatch<\/code>linha at #12<\/code>adicionamos o postmeta que estamos atualizando como depend\u00eancia (postMeta.example_post_meta<\/code>). Se voc\u00ea mantivesse v\u00e1rias vari\u00e1veis \u200b\u200bmeta do post atualizadas neste componente, voc\u00ea teria que adicionar cada uma como uma depend\u00eancia para garantir que o dispatch seja executado (na verdade salvando o meta do post) quando o valor de uma delas for alterado.<\/p>\n