{"id":228902,"date":"2022-10-19T12:51:00","date_gmt":"2022-10-19T09:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228902"},"modified":"2022-11-09T04:43:59","modified_gmt":"2022-11-09T01:43:59","slug":"adicionar-controles-a-barra-lateral-do-bloco-principal-e-de-terceiros-com-filtros-e-componentes-de-ordem-superior","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionar-controles-a-barra-lateral-do-bloco-principal-e-de-terceiros-com-filtros-e-componentes-de-ordem-superior\/","title":{"rendered":"Adicionar controles \u00e0 barra lateral do bloco principal e de terceiros com filtros e componentes de ordem superior"},"content":{"rendered":"\n<p>Em nosso \u00faltimo guia, analisamos a <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adi\u00e7\u00e3o <code>InspectorControls<\/code>de nossos blocos personalizados<\/a> para permitir o uso de controles na barra lateral do bloco. Neste guia, vamos nos basear nisso e adicionar um controle de altern\u00e2ncia \u00e0 barra lateral do bloco de todos os nossos blocos, incluindo qualquer bloco principal e de terceiros que estivermos usando.<\/p>\n<p>Neste guia, vamos criar a funcionalidade &#8216;draft block&#8217; apresentada no meu <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plugin Wholesome Publishing<\/a>.<\/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>Seguiu o guia <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Adicionar uma barra lateral ao seu bloco WordPress personalizado com InspectorControls<\/a><\/li>\n<\/ul>\n<h2>Preparando-se para este guia<\/h2>\n<p>Se voc\u00ea seguiu o <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia Adicionar uma barra lateral<\/a>, \u00f3timo. Mas agora vou ter que pedir que voc\u00ea desfa\u00e7a as altera\u00e7\u00f5es feitas na etapa 4 desse guia (o Draft Block Toggle), porque vamos extrapolar essa funcionalidade e aplic\u00e1-la a todos os nossos blocos.<\/p>\n<p>Se voc\u00ea n\u00e3o seguiu esse guia, certifique-se de segui-lo at\u00e9 a etapa 4 primeiro, pois este guia segue diretamente daquele.<\/p>\n<h2>Criar componentes de ordem superior<\/h2>\n<p>Componentes de ordem superior (HoC) s\u00e3o usados \u200b\u200bno React para envolver um componente existente e passar funcionalidade ou props para esse componente. Eles s\u00e3o chamados de HoCs porque s\u00e3o inseridos no DOM antes do componente existente, ou voc\u00ea poderia dizer em uma &#8216;Ordem Superior&#8217;.<\/p>\n<p>Vamos criar dois novos HoCs, ent\u00e3o crie uma nova pasta no seu plugin chamada <code>components<\/code>e crie os dois arquivos a seguir:<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>withInspectorControls<\/h3>\n<p>Abra <code>\/components\/withInspectorControls.js<\/code>e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code>import { InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, ToggleControl } from '@wordpress\/components';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment }    from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default createHigherOrderComponent( (BlockEdit) =&gt; {\n     return (props) =&gt; {\n        const {\n            attributes: {\n                isBlockDraft,\n            },\n            setAttributes,\n        } = props;\n\n        return (&lt;Fragment&gt;\n                &lt;BlockEdit { ...props } \/&gt;\n                &lt;InspectorControls&gt;\n                    &lt;PanelBody\n                        title={ __( 'Block Display Settings', 'wholesome-plugin') }\n                        icon=\"visibility\"\n                        initialOpen={ false }\n                    &gt;\n                        &lt;ToggleControl\n                            label={ __( 'Set Block as Draft', 'wholesome-plugin') }\n                            checked={ isBlockDraft }\n                            onChange={ (isBlockDraft) =&gt; setAttributes( { isBlockDraft }) }\n                            help={ __( 'If the block is set to draft it will not show on the front end.',\n                                'wholesome-plugin') }\n                        \/&gt;\n                    &lt;\/PanelBody&gt;\n                &lt;\/InspectorControls&gt;\n            &lt;\/Fragment&gt;\n        );\n    };\n }, 'withInspectorControls' );\n<\/code><\/pre>\n<p>Voc\u00ea pode reconhecer esse c\u00f3digo na etapa 4 do <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Guia da barra lateral<\/a>. \u00c9 praticamente o mesmo c\u00f3digo, exceto que o envolvemos em <code>createHigherOrderComponent<\/code>.<\/p>\n<p>O <code>createHigherOrderComponent<\/code>que nos permite acessar <code>BlockEdit<\/code>esta \u00e9 a fun\u00e7\u00e3o de edi\u00e7\u00e3o original do bloco que este componente ir\u00e1 envolver. Descobriremos como isso \u00e9 transmitido quando criarmos os filtros em breve.<\/p>\n<h3>withIsBlockDraft<\/h3>\n<p>Abra <code>\/components\/withIsBlockDraft.js<\/code>e cole o seguinte c\u00f3digo:<\/p>\n<pre><code>import { createHigherOrderComponent } from '@wordpress\/compose';\n\nexport default createHigherOrderComponent( (BlockListBlock) =&gt; {\n     return (props) =&gt; {\n         const { attributes } = props;\n         const { isBlockDraft } = attributes;\n\n         return &lt;BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } \/&gt;;\n     };\n }, 'withIsBlockDraft' );\n<\/code><\/pre>\n<p>Isso <code>createHigherOrderComponent<\/code>nos permite acessar o <code>BlockListBlock<\/code>que nos permite passar atributos para o wrapper do bloco do editor. Estamos usando-o aqui para definir uma classe &#8216;draft-block&#8217; para o wrapper se a altern\u00e2ncia Draft Block foi definida. Isso recria o que adicionamos anteriormente ao m\u00e9todo de edi\u00e7\u00e3o na etapa 4 do <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Guia da barra lateral<\/a>.<\/p>\n<p>Novamente, precisamos configurar um filtro para <code>BlockListBlock<\/code>que seja passado para este controle.<\/p>\n<h2>Configure os filtros<\/h2>\n<p>No topo do <code>\/src\/index.js<\/code>arquivo adicione o seguinte:<\/p>\n<pre><code>import { addFilter } from '@wordpress\/hooks';\n\nimport withIsBlockDraft from '.\/components\/withIsBlockDraft';\nimport withInspectorControls from '.\/components\/withInspectorControls';\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<h3>Filtre os atributos<\/h3>\n<p>No mesmo arquivo adicione o seguinte c\u00f3digo:<\/p>\n<pre><code>addFilter(\n    'blocks.registerBlockType',\n    'wholesome-plugin\/block-draft-attributes', (settings) =&gt; {\n        const { attributes } = settings;\n        return {\n            ...settings,\n            attributes: {\n                ...attributes,\n                isBlockDraft: {\n                    default: false,\n                    type: 'boolean',\n                },\n            },\n        };\n    }\n);\n<\/code><\/pre>\n<p>Este filtro adiciona atributos adicionais a todos os blocos na compila\u00e7\u00e3o. Em teoria, poder\u00edamos filtrar isso apenas para determinados blocos, mas n\u00e3o o faremos para o nosso exemplo.<\/p>\n<p>Se quis\u00e9ssemos limitar esse filtro a determinados blocos, poder\u00edamos fazer assim:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Filtre o InspectorControls<\/h3>\n<p>Adicione o seguinte c\u00f3digo ao <code>\/src\/index.js<\/code>arquivo:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>Aqui filtramos <code>BlockEdit<\/code>para que passe isso para o nosso HoC que criamos anteriormente.<\/p>\n<p>Se quis\u00e9ssemos limitar esse filtro a determinados blocos, far\u00edamos o seguinte <strong>dentro do HoC<\/strong> :<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Filtre o BlockListBlock<\/h3>\n<p>Finalmente vamos adicionar o filtro para o nosso <code>BlockListBlock<\/code>:<\/p>\n<pre><code>addFilter(\n    'editor.BlockListBlock',\n    'wholesome-plugin\/block-draft-class',\n    withIsBlockDraft\n);\n<\/code><\/pre>\n<p>Novamente, se voc\u00ea quiser restringir este bloco, voc\u00ea pode fazer isso dentro do HoC.<\/p>\n<h2>Adicione o PHP e SCSS<\/h2>\n<p>Adicione o seguinte para <code>\/editor.scss<\/code>deixar nosso banner de rascunho bonito (isso pode ser feito muito melhor, mas este \u00e9 apenas um exemplo).<\/p>\n<pre><code>.editor-styles-wrapper {\n    .draft-block {\n\n        border-bottom: 1px dotted #cfcfcf;\n        border-left: 1px solid #cfcfcf;\n        border-right: 1px solid #cfcfcf;\n        margin-top: 3em;\n\n        &amp;::before {\n            background: #cfcfcf;\n            background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);\n            background-size: 8.49px 8.49px;\n            border-left: 1px solid #cfcfcf;\n            border-right: 1px solid #cfcfcf;\n            border-top: 1px solid #cfcfcf;\n            color: black;\n            content: 'Draft Block';\n            display: block;\n            font-family: monospace;\n            font-size: 1rem;\n            left: 0;\n            padding-left: 5px;\n            position: absolute;\n            top: -27px;\n            width: 100%;\n        }\n\n        opacity: .4;\n\n        &amp;.is-selected {\n            opacity: .8;\n        }\n    }\n}\n<\/code><\/pre>\n<p>Adicione o seguinte ao arquivo raiz do plugin (no nosso caso <code>wholesome-plugin.php<\/code>).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {\n\n    if (is_admin()) {\n        return $pre_render;\n    }\n\n    if (isset( $block['attrs']) &amp;&amp;\n        isset( $block['attrs']['isBlockDraft']) &amp;&amp;\n        $block['attrs']['isBlockDraft']) {\n        return false;\n    }\n\n    return $pre_render;\n}\nadd_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );\n<\/code><\/pre>\n<p>Isso interromper\u00e1 a sa\u00edda dos blocos de rascunho no frontend.<\/p>\n<h2>Vendo isso em a\u00e7\u00e3o<\/h2>\n<p>Lembre-se de compilar <code>npm start<\/code>e agora podemos definir qualquer tipo de bloco para um bloco de rascunho:<\/p>\n<p>Configurando e desarmando blocos de rascunho<\/p>\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><\/li>\n<li>Experimente <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicionar controles \u00e0 barra lateral do post<\/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>Em nosso \u00faltimo guia, vimos como adicionar InspectorControls aos nossos blocos personalizados para nos permitir usar controles na barra lateral do bloco. Neste guia, vamos desenvolver isso e adicionar &#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,941,785],"tags":[1170],"class_list":["post-228902","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-gutenberg-8","category-software-livre","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228902","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=228902"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228902\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}