{"id":233697,"date":"2023-02-20T15:58:00","date_gmt":"2023-02-20T12:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233697"},"modified":"2023-02-24T18:28:55","modified_gmt":"2023-02-24T15:28:55","slug":"adicione-uma-barra-lateral-do-inspetor-personalizado-no-wordpress-gutenberg-com-o-post-meta","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicione-uma-barra-lateral-do-inspetor-personalizado-no-wordpress-gutenberg-com-o-post-meta\/","title":{"rendered":"Adicione uma barra lateral do inspetor personalizado no WordPress Gutenberg com o Post Meta"},"content":{"rendered":"\n

Neste tutorial, veremos como adicionar uma barra lateral personalizada ao Inspetor (barra lateral direita) no WordPress Gutenberg. Dentro vamos implementar um campo conectado a um post meta. Tudo \u00e9 implementado com Javascript, dentro do editor Gutenberg, e \u00e9 uma alternativa para adicionar metaboxes da maneira tradicional.<\/p>\n

\"Adicione<\/a><\/p>\n

Aten\u00e7\u00e3o!<\/h3>\n

Este \u00e9 um tutorial sobre como criar sua pr\u00f3pria barra lateral personalizada. Mas se voc\u00ea estiver interessado em apenas adicionar meta\/configura\u00e7\u00f5es \u00e0 barra lateral padr\u00e3o do Inspetor (guia "Documento"), tenho um tutorial exatamente para isso:<\/p>\n

O que vamos criar<\/h2>\n

O WordPress Gutenberg permite que os desenvolvedores criem barras laterais personalizadas usando a cria\u00e7\u00e3o do chamado plug-in Javascript. (N\u00e3o confundir com plugins tradicionais do WordPress). Usando um plugin Javascript podemos criar uma nova barra lateral, e tamb\u00e9m plugar no menu “Ferramentas e Op\u00e7\u00f5es".<\/p>\n

Adicionaremos um novo item de menu em “Ferramentas” que abrir\u00e1 nossa barra lateral personalizada. O conte\u00fado da barra lateral depende inteiramente de voc\u00ea, mas vou passar por alguns exemplos, incluindo como conectar um metacampo de postagem dentro dele.<\/p>\n

\"Adicione<\/a><\/p>\n

Configurando seu Javascript<\/h2>\n

Para este tutorial, escreverei ES6\/ESNext Javascript com JSX, o que significa que precisamos configurar um compilador. Se voc\u00ea quiser acompanhar e n\u00e3o escrever Javascript ES5, voc\u00ea precisar\u00e1 configurar um ambiente de desenvolvimento que compila seu Javascript \u00e0 medida que avan\u00e7a. Se voc\u00ea n\u00e3o estiver familiarizado com isso, siga meu post explicando como configurar isso<\/a> e depois volte aqui.<\/p>\n

Eu configurei meu webpack.config.js<\/code>para compilar meu arquivo Javascript de origem no arquivo \/assets\/js\/sidebar-plugin.js<\/code>. Este arquivo compilado \u00e9 o que precisamos para enfileirar no editor Gutenberg. Enquanto escrevo este c\u00f3digo, iniciei o compilador de tempo de execu\u00e7\u00e3o que recompila o Javascript toda vez que salvo altera\u00e7\u00f5es no c\u00f3digo-fonte (npm run start<\/code>). Tudo isso \u00e9 explicado em profundidade no tutorial mencionado anteriormente.<\/p>\n

Estou escrevendo isso em um tema, mas funciona da mesma forma em um plugin. Apenas lembre-se de ajustar os caminhos ao adicionar o script ao editor.<\/p>\n

Adicionando o script ao editor<\/h2>\n

Para adicionar nosso script ao editor Gutenberg, precisamos escrever um pouco de PHP. Se voc\u00ea estiver em um tema, functions.php<\/code>\u00e9 um bom lugar para come\u00e7ar, ou em algum lugar em seus arquivos de plugin. Observe que precisamos adicionar o script compilado final, n\u00e3o o c\u00f3digo-fonte. No meu exemplo, o Javascript compilado est\u00e1 localizado na pasta do meu tema \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\n

Criamos uma fun\u00e7\u00e3o ligada ao enqueue_block_editor_assets<\/code>. No interior fazemos o habitual [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Como depend\u00eancias ao script adicionamos duas; wp-plugins<\/code>, e wp-edit-post<\/code>. Esses dois pacotes devem ser carregados antes do nosso script, pois usamos fun\u00e7\u00f5es deles.<\/p>\n

add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\n
Como enfileiramos o script no gancho enqueue_block_editor_assets<\/code>, nosso script s\u00f3 ser\u00e1 carregado quando o editor Gutenberg estiver ativo. Excelente! Agora tudo est\u00e1 pronto para escrever nosso plugin Javascript.<\/p>\n
Registrar um plug-in Javascript<\/h2>\n
O primeiro passo \u00e9 registrar um plugin. Fazemos isso com a [registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>fun\u00e7\u00e3o em wp.plugins de dentro do wp.plugins<\/code>pacote.<\/p>\n
Como par\u00e2metro para o registerPlugin, fornecemos um nome (certifique-se de que \u00e9 \u00fanico) e um objeto com configura\u00e7\u00f5es. No m\u00ednimo, voc\u00ea precisa fornecer um componente para a propriedade de renderiza\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode adicionar opcionalmente um \u00edcone dos dashicons do WordPress<\/a>. Lembre-se de que, se voc\u00ea n\u00e3o especificar um \u00edcone, ele retornar\u00e1 ao \u00edcone do plug-in. Para fins de demonstra\u00e7\u00e3o, estou usando o 'carrot'<\/code>\u00edcone.<\/p>\n
Quanto ao componente, come\u00e7amos definindo um componente b\u00e1sico que retorna um div simples com algum texto aleat\u00f3rio nele. E antes de todo o c\u00f3digo desestruturamos as fun\u00e7\u00f5es dos pacotes que queremos usar.<\/p>\n
const { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <div>Hey!<\/div>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Se nada acontecer (nem mesmo erros) quando voc\u00ea atualizar o Gutenberg, estamos prontos. N\u00e3o vemos nosso componente porque n\u00e3o dissemos ao WordPress onde renderiz\u00e1-lo. O pr\u00f3ximo passo \u00e9 se conectar ao menu personalizado da barra lateral e aos componentes do menu de ferramentas para renderizar nossas coisas.<\/p>\n
Registrar uma barra lateral personalizada<\/h2>\n
Mas primeiro uma explica\u00e7\u00e3o de como Gutenberg lida com barras laterais personalizadas e por que precisamos fazer o que faremos. Quando registramos com sucesso uma barra lateral personalizada, uma coisa acontecer\u00e1 automaticamente inicialmente. O Gutenberg adicionar\u00e1 um atalho \u00e0 nossa barra lateral na barra de ferramentas superior, ao lado do menu Ferramentas. Isso acontece porque nossa barra lateral fica automaticamente “fixada”.<\/p>\n
\"Adicione<\/a><\/p>\n
O problema de apenas adicionar uma barra lateral personalizada \u00e9 que qualquer usu\u00e1rio pode “desafixar” esse atalho. Quando eles fazem isso, n\u00e3o h\u00e1 ponto de acesso para abrir a barra lateral novamente! \u00c9 por isso que precisamos tamb\u00e9m adicionar um item de menu ao menu Ferramentas.<\/p>\n
O registro de uma barra lateral personalizada \u00e9 feito com o componente PluginSidebar<\/code>do wp.editPost<\/code>pacote. Adicionar um item de menu ao menu Ferramentas \u00e9 feito com o componente apropriadamente nomeado PluginSidebarMoreMenuItem<\/code>(tamb\u00e9m no wp.editPost<\/code>pacote).<\/p>\n
Para o PluginSidebar<\/code>componente, precisamos fornecer alguns adere\u00e7os. Voc\u00ea deve fornecer no m\u00ednimo name<\/code>e title<\/code>. O prop title<\/code>\u00e9 autoexplicativo, esse \u00e9 o nome que aparecer\u00e1 no topo da barra lateral. No prop name<\/code>fornecer uma lesma \u00fanica. Quando voc\u00ea adiciona o item de menu, voc\u00ea precisa se referir a este slug.<\/p>\n
Adicionar um PluginSidebarMoreMenuItem<\/code>componente (menu de ferramentas) requer no m\u00ednimo um prop; target<\/code>. Aqui voc\u00ea fornece o mesmo nome que voc\u00ea deu na name<\/code>prop da barra lateral. Como conte\u00fado do componente voc\u00ea escreve o texto que ser\u00e1 exibido como item de menu. Normalmente, isso seria o mesmo que o da barra lateral title<\/code>.<\/p>\n
Como o React requer um \u00fanico n\u00f3 de encapsulamento em torno do retorno do componente, encapsulamos tudo dentro de um Fragment<\/code>componente (do wp.element<\/code>pacote). Tamb\u00e9m estou envolvendo minhas strings __()<\/code>do wp.i18n<\/code>pacote para permitir a tradu\u00e7\u00e3o.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <Fragment>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >Hello there.<\/PluginSidebar>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Com o c\u00f3digo acima, teremos as seguintes duas (provavelmente tr\u00eas) coisas acontecendo. Voc\u00ea receber\u00e1 um atalho de \u00edcone de cenoura na barra de ferramentas (se ainda n\u00e3o o liberou). Clicar nele abrir\u00e1 a barra lateral. Voc\u00ea tamb\u00e9m ter\u00e1 um novo item de menu na barra lateral do Menu Ferramentas, sob o t\u00edtulo “Plugins”.<\/p>\n
\"Adicione<\/a><\/p>\n
Adicionando conte\u00fado \u00e0 barra lateral<\/h2>\n
O conte\u00fado real da barra lateral depende inteiramente de voc\u00ea. Voc\u00ea s\u00f3 precisa adicionar HTML ou componentes dentro do PluginSidebar<\/code>componente com o que quiser (no lugar do texto “Hello there.”).<\/p>\n
Voc\u00ea pode notar que o conte\u00fado da barra lateral est\u00e1 sem preenchimento. Isso \u00e9 intencional porque a ideia \u00e9 que voc\u00ea crie pain\u00e9is dentro dessa barra lateral. Pain\u00e9is s\u00e3o as se\u00e7\u00f5es recolh\u00edveis na barra lateral normal do Gutenberg. Esses s\u00e3o componentes que voc\u00ea pode adicionar facilmente dentro de sua barra lateral personalizada. Voc\u00ea pode adicionar quantos pain\u00e9is quiser e eles s\u00e3o \u00f3timos para agrupar coisas diferentes.<\/p>\n
Adicionando pain\u00e9is em nossa barra lateral<\/h3>\n
Vamos ver rapidamente como podemos adicionar pain\u00e9is \u00e0 nossa barra lateral. Se voc\u00ea criou seus pr\u00f3prios tipos de blocos personalizados, talvez esteja familiarizado com esses componentes. Usamos PanelBody<\/code>e opcionalmente PanelRow<\/code>do wp.components<\/code>pacote.<\/p>\n
Para um PanelBody<\/code>componente, voc\u00ea fornece no m\u00ednimo o prop title<\/code>. Voc\u00ea pode opcionalmente fornecer true ou false para o initialOpen<\/code>prop para decidir se o painel deve ser expandido como padr\u00e3o ou n\u00e3o. Como conte\u00fado dentro do componente \u00e9 tudo dentro do painel.<\/p>\n
Dentro de um PanelBody<\/code>voc\u00ea pode opcionalmente usar PanelRow<\/code>componentes. Eles n\u00e3o s\u00e3o realmente necess\u00e1rios, mas podem ajud\u00e1-lo a obter um bom estilo para o conte\u00fado do seu painel.<\/p>\n
Por exemplo, vamos adicionar dois pain\u00e9is \u00e0 nossa barra lateral personalizada.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        Put any component or content here.\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Com este c\u00f3digo, nossa barra lateral personalizada come\u00e7a a realmente parecer que pertence ao Gutenberg!<\/p>\n
\"Adicione<\/a><\/p>\n
Adicionando meta campos de postagem \u00e0 barra lateral personalizada<\/h2>\n
Agora estamos realmente entrando no cerne das coisas \u00fateis para uma barra lateral personalizada; adicionando configura\u00e7\u00f5es e armazenando seus valores. Mas primeiro precisamos entender como.<\/p>\n
\u00c9 muito f\u00e1cil adicionar campos de configura\u00e7\u00e3o (entradas, caixas de sele\u00e7\u00e3o, campos de altern\u00e2ncia, etc) na barra lateral usando os componentes prontos para uso nos pacotes do WordPress. No entanto, precisamos considerar como armazenar os valores. A op\u00e7\u00e3o \u00f3bvia \u00e9 armazen\u00e1-los como post meta. Mas conectar uma configura\u00e7\u00e3o a um meta campo de postagem requer algum c\u00f3digo extra. Mais especificamente, precisamos usar os chamados componentes<\/a> de ordem superior para buscar e atualizar o post meta dentro do Javascript. Tamb\u00e9m precisamos registrar cada meta post usando PHP e disponibiliz\u00e1-los para a API REST.<\/p>\n
Para encerrar este tutorial, demonstrarei como adicionar um post meta com chave awp_my_custom_meta<\/code>que deve ser armazenada como true ou false. Na barra lateral, ele ser\u00e1 exibido como um campo de altern\u00e2ncia (um componente verdadeiro\/falso).<\/p>\n
Registrar meta de postagem para API REST<\/h3>\n
O primeiro passo para adicionar post meta em nosso arquivo Javascript \u00e9 registr\u00e1-los e defini-los como acess\u00edveis na API REST. Para fazer isso, voltamos ao PHP novamente.<\/p>\n
Dentro de uma fun\u00e7\u00e3o ligada \u00e0 init<\/code>a\u00e7\u00e3o usamos a [register_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_meta\/)()<\/code>fun\u00e7\u00e3o. Como par\u00e2metros, precisamos definir o tipo de objeto como ‘ post<\/code>‘ porque o estamos usando como meta de postagem (n\u00e3o exclui, por exemplo, tipo de postagem de p\u00e1gina). Fornecemos a meta-chave e, em seguida, uma matriz de argumentos. A coisa cr\u00edtica a adicionar na matriz de argumentos \u00e9 definir ‘ show_in_rest<\/code>‘ como true<\/code>. Post meta \u00e9 comumente usado como ‘ single<\/code>‘ (pense em como voc\u00ea usa get_post_meta()<\/code>). Tamb\u00e9m definimos o type<\/code>. Quanto ao nosso caso, definimos como ‘ boolean<\/code>‘.<\/p>\n
add_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Com este c\u00f3digo o awp_my_custom_meta<\/code>campo ” post meta \u00e9 acess\u00edvel a partir do Gutenberg. Voc\u00ea precisa repetir a register_meta()<\/code>meta para cada postagem que deseja adicionar em sua barra lateral.<\/p>\n
Agora vamos voltar ao nosso Javascript.<\/p>\n
Adicionando uma configura\u00e7\u00e3o \u00e0 nossa barra lateral<\/h3>\n
Vamos come\u00e7ar com a parte f\u00e1cil: Adicionando a entrada \u00e0 nossa barra lateral. Mais tarde, adicionaremos mais c\u00f3digo para realmente conectar o campo de configura\u00e7\u00e3o para postar meta. Devido \u00e0 maneira como precisamos fazer isso, definimos um novo componente separado para nossa configura\u00e7\u00e3o. Portanto, dentro do painel que voc\u00ea deseja adicionar suas configura\u00e7\u00f5es, basta chamar esse novo componente.<\/p>\n
Vamos chamar o componente CustomSidebarMetaComponent<\/code>(voc\u00ea pode cham\u00e1-lo de algo relevante para o seu projeto). Dentro deste componente queremos renderizar um campo de altern\u00e2ncia. Para fazer isso, usamos o ToggleControl<\/code>componente do wp.components<\/code>pacote. Como adere\u00e7os para o ToggleControl, fornecemos uma etiqueta de ajuste no title<\/code>prop. Um ToggleControl tamb\u00e9m precisa dos adere\u00e7os onChange<\/code>para atualizar o valor e checked<\/code>para o valor atual. Vamos omitir esses dois por enquanto at\u00e9 a pr\u00f3xima etapa.<\/p>\n
...\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\n\u00a0\nconst CustomSidebarMetaComponent = () => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...       \n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMetaComponent \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Com o c\u00f3digo acima, voc\u00ea deve obter um campo de altern\u00e2ncia na barra lateral. Est\u00e1 desmarcado e nada acontece quando voc\u00ea clica nele. Esse \u00e9 o pr\u00f3ximo passo: conect\u00e1-lo ao nosso post meta.<\/p>\n
Acessando meta de postagem com withSelect e withDispatch<\/h3>\n
Para acessar e atualizar um meta valor de postagem, precisamos usar componentes de ordem superior (HOC) para acessar a vers\u00e3o das lojas do WordPress (semelhante ao Redux). O WordPress nos fornece alguns HOC \u00fateis com fun\u00e7\u00f5es que podemos usar no wp.data<\/code>pacote.<\/p>\n
O componente de ordem superior [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>\u00e9 fornecer ao nosso componente adere\u00e7os que s\u00e3o, no nosso caso, buscados no post meta. Usamos isso para obter o valor do nosso post meta. Dentro withSelect<\/code>podemos usar select('core\/editor').getEditedPostAttribute('meta')<\/code>para buscar o meta do post atual.<\/p>\n
Por outro lado, [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withDispatch)<\/code>\u00e9 um componente de ordem superior que pode realizar a\u00e7\u00f5es. No nosso caso, queremos atualizar a meta do post quando a configura\u00e7\u00e3o do campo correspondente for alterada em nossa barra lateral. Dentro deste componente usamos dispatch('core\/editor').editPost()<\/code>para informar o WordPress para despachar uma a\u00e7\u00e3o. Dentro do objeto que fornecemos, informamos ao WordPress que \u00e9 meta que queremos atualizar.<\/p>\n
Finalmente, precisamos combinar withSelect<\/code>e withDispatch<\/code>com nosso componente que trata o metacampo post (CustomSidebarMetaComponent<\/code>). Para fazer isso, usamos o WordPress’ compose<\/code>do wp.compose<\/code>pacote. A ideia \u00e9 isso withSelect<\/code>e fornecer adere\u00e7os ao withDispatch<\/code>nosso componente. fornece o valor do post meta como prop e fornece uma fun\u00e7\u00e3o que podemos chamar para atualizar o valor como prop. Definimos esses adere\u00e7os para nosso ToggleField e, correspondentemente.CustomSidebarMetaComponent``withSelect``withDispatch``checked``onChange<\/code><\/p>\n
Isso \u00e9 muita explica\u00e7\u00e3o. Vejamos o c\u00f3digo real:<\/p>\n
...\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...\n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMeta \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Vamos come\u00e7ar no in\u00edcio. Que est\u00e1 no fundo. Na linha #36<\/code>, alteramos o componente que renderizamos em nossa barra lateral para o componente com o qual criamos compose<\/code>(na linha #15<\/code>). O CustomSidebarMeta<\/code>componente combinar\u00e1 os componentes withSelect<\/code>e withDispatch<\/code>e retornar\u00e1 o CustomSidebarMetaComponent<\/code>.<\/p>\n
O CustomSidebarMetaComponent<\/code>ter\u00e1 acesso ao customPostMetaValue<\/code>prop do withSelect<\/code>, e o setCustomPostMeta<\/code>prop deste withDispatch<\/code>dois que usamos para o checked<\/code>e onChange<\/code>props no ToggleField<\/code>.<\/p>\n
Observe que, em linha #5<\/code>, adicionamos props<\/code>par\u00e2metros aos componentes para tornar os adere\u00e7os acess\u00edveis no componente.<\/p>\n
Conclus\u00e3o e palavras finais<\/h2>\n
Espero que este tutorial tenha sido de alguma utilidade para voc\u00ea. Isto \u00e9 o que eu consegui compreender sobre o tema durante muita tentativa e erro. N\u00e3o h\u00e1 quase nenhuma documenta\u00e7\u00e3o sobre este t\u00f3pico por a\u00ed ainda. Ainda estou lutando com isso, especialmente quando se trata de lidar eficientemente com v\u00e1rios meta-posts. Se eu conseguir aprender alguns bons truques, atualizarei este tutorial com certeza!<\/p>\n
Espero que, seguindo este tutorial, voc\u00ea tenha um c\u00f3digo que adicione com sucesso uma nova barra lateral personalizada ao editor WordPress Gutenberg e, esperan\u00e7osamente, com algum conte\u00fado e configura\u00e7\u00f5es significativos. Aqui est\u00e1 o c\u00f3digo final para a barra lateral personalizada com o meta campo de postagem.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                icon='carrot'\n            >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        <CustomSidebarMeta \/>\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});\n\u00a0\nadd_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Um tutorial sobre como adicionar uma barra lateral personalizada ao Inspetor no WordPress Gutenberg. Dentro vamos implementar um campo conectado a um post meta.<\/p>\n","protected":false},"author":1,"featured_media":223619,"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-233697","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\/233697","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=233697"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}