{"id":228933,"date":"2022-10-19T13:28:00","date_gmt":"2022-10-19T10:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228933"},"modified":"2022-11-09T04:51:41","modified_gmt":"2022-11-09T01:51:41","slug":"crie-uma-barra-lateral-personalizada-com-o-pluginsidebar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/crie-uma-barra-lateral-personalizada-com-o-pluginsidebar\/","title":{"rendered":"Crie uma barra lateral personalizada com o PluginSidebar"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Demos uma olhada nas barras laterais de <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloco personalizadas, barras laterais<\/a> de bloco de <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">terceiros<\/a> via InspectorControls e como adicionar controles \u00e0 <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral<\/a> de postagem. Neste guia, veremos como colocar nossos controles em sua pr\u00f3pria barra lateral personalizada.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Crie uma barra lateral personalizada com o PluginSidebar\" \/>Nossa barra lateral personalizada<\/p>\n<p>A captura de tela acima mostra o que vamos construir. Na maioria das vezes, vamos apenas alterar um pouco o c\u00f3digo que constru\u00edmos no <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia Post Sidebar<\/a>, portanto, certifique-se de ter conclu\u00eddo esse guia primeiro.<\/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>Seguiu o guia <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Adicionar controles \u00e0 barra lateral de postagem com PluginDocumentSettingPanel<\/a><\/li>\n<\/ul>\n<p>Vamos usar o c\u00f3digo do <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia Post Sidebar<\/a>, portanto, se voc\u00ea n\u00e3o tiver conclu\u00eddo esse guia, fa\u00e7a isso. Est\u00e1 tudo bem, vou esperar.<\/p>\n<p>Abra o <code>\/components\/Sidebar.js<\/code>arquivo que voc\u00ea criou no guia anterior. Vamos substituir a linha que importa o <code>PluginDocumentSettingPanel<\/code>pelo seguinte c\u00f3digo:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>Agora substitua a marca\u00e7\u00e3o <code>&lt;PluginDocumentSettingPanel...<\/code>por <code>&lt;PluginSidebar...<\/code>e trabalho feito! Certo?<\/p>\n<p>Bem, sim e n\u00e3o. Isso nos d\u00e1 uma barra lateral, mas \u00e9 feio! Precisamos de alguns pain\u00e9is para que os controles sejam formatados corretamente.<\/p>\n<p>Al\u00e9m disso, a barra lateral est\u00e1 faltando no menu &#8216;Op\u00e7\u00f5es&#8217;. Para resolver isso, precisamos implementar o <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Edite <code>\/components\/Sidebar.js<\/code>novamente e cole o seguinte c\u00f3digo:<\/p>\n<pre><code>import { Panel, PanelBody, ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { Component, Fragment } 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;Fragment&gt;\n                &lt;PluginSidebarMoreMenuItem target=\"wholesomecode-wholesome-plugin-sidebar\"&gt;\n                { __( 'Display Settings', 'wholesome-plugin') }\n                &lt;\/PluginSidebarMoreMenuItem&gt;\n                &lt;PluginSidebar\n                    name=\"wholesomecode-wholesome-plugin-sidebar\"\n                    title={ __( 'Display Settings', 'wholesome-plugin') }\n                &gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Display Settings', 'wholesome-plugin') }\n                            icon=\"visibility\"\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                                    this.setState( { exampleToggle: value } );\n                                } }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/PluginSidebar&gt;\n            &lt;\/Fragment&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>Isso \u00e9 melhor, n\u00f3s usamos exatamente o mesmo c\u00f3digo do nosso exemplo de barra lateral do post anterior, mas agora parece a parte.<\/p>\n<p>Agora que temos nosso c\u00f3digo no lugar, n\u00e3o se esque\u00e7a de execut\u00e1 <code>npm start<\/code>-lo para compil\u00e1-lo, e agora deve se parecer com o seguinte:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Crie uma barra lateral personalizada com o PluginSidebar\" \/>Nossa barra lateral personalizada em a\u00e7\u00e3o<\/p>\n<p>Como em nosso guia da barra lateral de plugins, alternamos a altern\u00e2ncia de login obrigat\u00f3rio, atualizamos uma postagem desconectada, desligamos novamente e atualizamos a postagem novamente. Quando alternado, n\u00e3o podemos acessar a postagem.<\/p>\n<p>O nome da nossa barra lateral \u00e9 <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Se desejarmos, podemos abrir e fechar automaticamente esta barra lateral de outro lugar no editor. Digamos que temos um bot\u00e3o com uma a\u00e7\u00e3o de clique que faz isso.<\/p>\n<p>O c\u00f3digo para abrir a barra lateral dinamicamente \u00e9 o seguinte:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>Da mesma forma, podemos fechar dinamicamente a barra lateral assim:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<ul>\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>Demos uma olhada nas barras laterais de blocos personalizados, barras laterais de blocos de terceiros via InspectorControls e como adicionar controles \u00e0 barra lateral de postagem. Neste guia vamos ver&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,941,806,846,867],"tags":[1170],"class_list":["post-228933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-gutenberg-8","category-php-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228933","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=228933"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228933\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}