{"id":228913,"date":"2022-10-19T11:01:00","date_gmt":"2022-10-19T08:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228913"},"modified":"2022-11-09T04:46:28","modified_gmt":"2022-11-09T01:46:28","slug":"adicionar-controles-a-barra-lateral-de-postagem-com-plugindocumentsettingpanel","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionar-controles-a-barra-lateral-de-postagem-com-plugindocumentsettingpanel\/","title":{"rendered":"Adicionar controles \u00e0 barra lateral de postagem com PluginDocumentSettingPanel"},"content":{"rendered":"\n<p>At\u00e9 agora, demos uma olhada na barra lateral do bloco, <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicionando <code>InspectorControls<\/code>aos nossos blocos personalizados<\/a> e <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicionando controles \u00e0 barra lateral do bloco principal e de terceiros com filtros e componentes de ordem superior<\/a>. Neste guia, veremos como adicionar controles \u00e0 barra lateral do post.<\/p>\n<p>Exibir configura\u00e7\u00f5es na barra lateral de postagem<\/p>\n<p>Neste guia, vamos criar um controle de &#8216;Configura\u00e7\u00f5es de exibi\u00e7\u00e3o&#8217; que permitir\u00e1 apenas que usu\u00e1rios logados visualizem a postagem quando alternados.<\/p>\n<h2>Pr\u00e9-requisitos<\/h2>\n<ul>\n<li>Ter seguido o guia <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Criando um Plugin para o Editor de Blocos do WordPress (Gutenberg)<\/a><\/li>\n<li>Leia os guias anteriores da barra lateral (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral para um bloco personalizado<\/a> e <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral para um bloco existente<\/a> )<\/li>\n<li>Leia o guia <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Using Post Meta Fields to Store Attributes in the WordPress Block Editor (Gutenberg)<\/a><\/li>\n<\/ul>\n<h2>Registrando o Post Meta em PHP<\/h2>\n<p>Por favor, complete as etapas no <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia de cria\u00e7\u00e3o de plug<\/a> -ins para nos fornecer nosso plug-in inicial, expandiremos isso em nosso guia.<\/p>\n<p>Depois de fazer isso, vamos configurar a meta de postagem que precisamos para nosso controle de altern\u00e2ncia de permiss\u00f5es. Abra o arquivo raiz do plugin (no nosso caso <code>wholesome-plugin.php<\/code>) e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_require_login',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; false,\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'boolean',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Se voc\u00ea deu uma olhada no <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia de meta campos de postagem<\/a>, isso deve parecer um pouco familiar. Tudo o que ele faz \u00e9 permitir que nossa meta de postagem seja acessada de dentro do editor de blocos (Gutenberg).<\/p>\n<p>Em seu plugin crie uma nova pasta chamada <code>components<\/code>e crie o seguinte arquivo <code>\/components\/Sidebar.js<\/code>. Nesse arquivo cole o seguinte c\u00f3digo:<\/p>\n<pre><code>import { ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { Component } from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default class Sidebar extends Component { \n    render() {\n        const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\n        const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n\n        return (&lt;PluginDocumentSettingPanel\n            name=\"wholesomecode-wholesome-plugin-sidebar\"\n            title={ __( 'Display Settings', 'wholesome-plugin') }\n            &gt;\n            &lt;ToggleControl\n              checked={ exampleToggle }\n              help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }\n              label={ __( 'Require Login', 'wholesome-plugin') }\n              onChange={ (value) =&gt; {\n                dispatch( 'core\/editor' ).editPost( {\n                  meta: {\n                    '_wholesomecode_wholesome_plugin_require_login': value,\n                  },\n                } );\n              } }\n              \/&gt;\n          &lt;\/PluginDocumentSettingPanel&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>O <code>ToggleControl<\/code>que vimos antes em nossos guias de barra lateral anteriores, mas o painel que estamos usando \u00e9 um pouco novo. Usamos <code>PluginDocumentSettingPanel<\/code>para identificar que esse controle deve aparecer na barra lateral do post.<\/p>\n<p>Observe tamb\u00e9m que, em vez de extrair atributos, obtemos nossos metadados com o seguinte c\u00f3digo:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>e salvamos atrav\u00e9s do nosso <code>onChange<\/code>m\u00e9todo usando este c\u00f3digo:<\/p>\n<pre><code>onChange={ (value) =&gt; {\n  dispatch( 'core\/editor' ).editPost( {\n    meta: {\n      '_wholesomecode_wholesome_plugin_require_login': value,\n    },\n  } );\n} }\n<\/code><\/pre>\n<p>Isso atualiza a meta da postagem atual. Na verdade, ele n\u00e3o ser\u00e1 salvo at\u00e9 que salvemos nossa postagem, ent\u00e3o toda a economia \u00e9 tratada por n\u00f3s.<\/p>\n<p>H\u00e1 uma \u00faltima coisa que precisamos fazer com nossa barra lateral de postagem, e \u00e9 registr\u00e1-la. No topo do <code>\/src\/index.js<\/code>arquivo adicione o seguinte:<\/p>\n<pre><code>import { registerPlugin } from '@wordpress\/plugins';\nimport render from '.\/components\/Sidebar';\n\nregisterPlugin(\n    'wholesomecode-wholesome-plugin-sidebar',\n    {\n        icon: 'visibility',\n        render,\n    }\n);\n<\/code><\/pre>\n<p>Realmente devemos pensar em alterar a estrutura do nosso plugin para que o c\u00f3digo que registra o bloco seja importado de outro arquivo, mas por simplicidade usaremos o mesmo arquivo.<\/p>\n<p>Aqui usamos <code>registerPlugin<\/code>para registrar a barra lateral. Passamos o componente Sidebar que criamos como o m\u00e9todo &#8216;render&#8217;, junto com um \u00edcone.<\/p>\n<h2>Adicione a l\u00f3gica Ocultar se desconectado<\/h2>\n<p>Mais uma vez, abra o arquivo raiz do plugin (no nosso caso <code>wholesome-plugin.php<\/code>) e insira o seguinte c\u00f3digo. Existem maneiras muito melhores de fazer isso, mas estou mantendo-o curto para fins de exemplo:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_require_login() {\n    global $post, $wp_query;\n\n    if (is_admin() ||! is_singular() ||! $post) {\n        return;\n    }\n\n    if (is_user_logged_in()) {\n        return;\n    }\n\n    $login_required = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_require_login', true );\n\n    if (! $login_required) {\n        return;\n    }\n\n    $wp_query-&gt;set_404();\n    status_header( 401 );\n}\nadd_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );\n<\/code><\/pre>\n<p>Este c\u00f3digo simplesmente retorna nosso modelo 404 e um status de 401 (N\u00e3o autorizado) se o Alternar estiver definido como verdadeiro.<\/p>\n<p>Vamos dar uma olhada nos controles da barra lateral do post em a\u00e7\u00e3o.<\/p>\n<p>Controlando permiss\u00f5es atrav\u00e9s da barra lateral de postagem<\/p>\n<p>Neste exemplo, alternamos o switch para true, visualizamos nossa p\u00e1gina em uma nova janela do navegador (desconectada) e ap\u00f3s uma atualiza\u00e7\u00e3o vemos que ela retorna a p\u00e1gina 404, alternamos para false, refresh e voil\u00e0, a postagem fica vis\u00edvel novamente. Magia de Gutemberg!<\/p>\n<ul>\n<li>D\u00ea uma olhada na cria\u00e7\u00e3o de uma <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral personalizada independente<\/a><\/li>\n<li>D\u00ea uma olhada na cria\u00e7\u00e3o <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de blocos filho aninhados com o <code>InnerBlocks<\/code>componente<\/a><\/li>\n<li>D\u00ea uma olhada no <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uso de meta campos post em blocos Gutenberg<\/a> (se voc\u00ea ainda n\u00e3o o fez) e <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">caixas meta personalizadas guiadas por componentes Gutenberg<\/a><\/li>\n<li>D\u00ea uma olhada na <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cria\u00e7\u00e3o de uma p\u00e1gina de configura\u00e7\u00f5es com os componentes do Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>At\u00e9 agora, demos uma olhada na barra lateral do bloco adicionando InspectorControls aos nossos blocos personalizados e adicionando controles \u00e0 barra lateral do bloco principal e de terceiros com filtros e &#8230;<\/p>\n","protected":false},"author":1,"featured_media":221243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,941,920,867],"tags":[1170],"class_list":["post-228913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-gutenberg-8","category-outro","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228913","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=228913"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228913\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}