{"id":228738,"date":"2022-10-16T09:41:00","date_gmt":"2022-10-16T06:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228738"},"modified":"2022-11-09T04:05:41","modified_gmt":"2022-11-09T01:05:41","slug":"crie-meta-boxes-personalizadas-usando-o-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/crie-meta-boxes-personalizadas-usando-o-wordpress-block-editor-gutenberg\/","title":{"rendered":"Crie Meta Boxes personalizadas usando o WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>A primeira pergunta que voc\u00ea pode ter \u00e9 &#8220;por que eu precisaria criar meta caixas personalizadas com o Block Editor (Gutenberg)?&quot;, voc\u00ea ainda pode implementar meta caixas com PHP e adicionar controles ao bloco, post ou at\u00e9 mesmo uma barra lateral personalizada em Gutemberg.<\/p>\n<p>Existem algumas raz\u00f5es pelas quais voc\u00ea pode querer fazer isso, incluindo:<\/p>\n<ul>\n<li>Alguns blocos t\u00eam configura\u00e7\u00f5es complexas, e visualizar uma meta box no modo de edi\u00e7\u00e3o pode facilitar o uso para um cliente<\/li>\n<li>Porque voc\u00ea pode querer alterar um determinado aspecto de layout da postagem, como o cabe\u00e7alho. Voc\u00ea pode ocultar o campo de t\u00edtulo da postagem e substitu\u00ed-lo por uma caixa meta personalizada na parte superior da p\u00e1gina e poder controlar toda a meta da postagem relacionada a ela<\/li>\n<li>Porque voc\u00ea pode usar <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modelos de bloco<\/a> para colocar as meta caixas personalizadas onde quiser, para que elas fa\u00e7am mais sentido no contexto<\/li>\n<li>Porque voc\u00ea pode aplicar esse aprendizado a outros aspectos do desenvolvimento do editor de blocos (Gutenberg)<\/li>\n<\/ul>\n<p>Neste guia, vamos expandir o que j\u00e1 constru\u00edmos em nosso <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia Post Meta Fields<\/a>. Voc\u00ea pode usar atributos de bloco, no entanto, devido \u00e0 natureza das meta-caixas, usaremos meta campos de postagem neste guia.<\/p>\n<h2>Pr\u00e9-requisitos<\/h2>\n<ul>\n<li>Familiarize-se com a <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cria\u00e7\u00e3o de plugins para WordPress Gutenberg<\/a><\/li>\n<li>Familiarize-se <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">com blocos din\u00e2micos e renderiza\u00e7\u00e3o do lado do servidor<\/a><\/li>\n<li>Familiarize-se com o uso <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de meta campos de postagem no WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<p>Como estamos seguindo o <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia Post Meta Fields<\/a>, j\u00e1 teremos usado <code>register_meta<\/code>para criar nosso meta campo post, garantindo que configuramos <code>show_in_rest<\/code>como true e tamb\u00e9m configuramos a fonte do atributo JavaScript para <code>meta<\/code>e definimos a meta-chave.<\/p>\n<p>Tudo o que resta \u00e9 implementar a interface.<\/p>\n<p>Edite o <code>\/src\/edit.js<\/code>arquivo, substituindo a <code>@wordpress\/components<\/code>importa\u00e7\u00e3o pelo seguinte:<\/p>\n<pre><code>import { Panel, PanelBody, TextControl } from '@wordpress\/components';\n<\/code><\/pre>\n<p>Em seguida, substitua o bloco de c\u00f3digo Editar pelo seguinte:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const { blockText } = attributes;\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n                    &lt;TextControl\n                        label={ __( 'Example Meta', 'wholesome-plugin') }\n                        help={ __( 'This is an example meta field.', 'wholesome-plugin') }\n                        onChange={ (blockText) =&gt; setAttributes( { blockText }) }\n                          value={ blockText }\n                    \/&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Agora temos a <code>Panel<\/code>, a <code>PanelBody<\/code>e a <code>TextControl<\/code>. Observe que adicionei o <code>admin-plugins<\/code>par\u00e2metro ao \u00edcone do <code>PanelBody<\/code>para mant\u00ea-lo consistente com o \u00edcone do plug-in.<\/p>\n<h3>Aplicar os estilos<\/h3>\n<p>Substitua o SCSS <code>\/src\/editor.scss<\/code>pelo seguinte:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    p {\n        all: unset;\n    }\n}\n<\/code><\/pre>\n<p>Se voc\u00ea estiver usando uma Custom Meta Box criada em Gutenberg, eu recomendaria coloc\u00e1-la com um <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">template de bloco<\/a>, por\u00e9m voc\u00ea pode inseri-la da maneira normal assim:<\/p>\n<p>Usando uma caixa meta personalizada do Gutenberg<\/p>\n<p>Depois de criar sua meta box, n\u00e3o h\u00e1 limite para o que voc\u00ea pode adicionar a ela. Toda a biblioteca de componentes do WordPress Gutenberg React est\u00e1 dispon\u00edvel para voc\u00ea, juntamente com uma vasta biblioteca de componentes externos do React (<a href=\"https:\/\/wholesomecode.ltd\/blog\/select2-as-inspectorcontrol-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">veja meu artigo sobre como adicionar select2 ao seu projeto<\/a> ).<\/p>\n<p>O exemplo a seguir \u00e9 a ponta do iceberg do que voc\u00ea pode alcan\u00e7ar:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169030-61e7fb6b454ff.png\" alt=\"Crie Meta Boxes personalizadas usando o WordPress Block Editor (Gutenberg)\" \/>Caixa Meta Personalizada com Campos Meta Adicionais<\/p>\n<p>Para construir isso, aqui est\u00e1 o c\u00f3digo que voc\u00ea precisa:<\/p>\n<h3>Registre seus campos meta de postagem em PHP<\/h3>\n<p>Abra o arquivo PHP raiz do plugin (neste caso <code>wholesome-plugin.php<\/code>) e atualize o <code>register_meta<\/code>que adicionamos no guia anterior com o seguinte:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_select',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_3',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_toggle',\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<h3>Atualizar os atributos JavaScript<\/h3>\n<p>Abra <code>\/src\/index.js<\/code>e substitua os atributos que adicionamos no guia anterior pelo seguinte:<\/p>\n<pre><code>attributes: {\n    exampleSelect: {\n        meta: '_wholesomecode_wholesome_plugin_example_select',\n        source: 'meta',\n    },\n    exampleText: {\n        meta: '_wholesomecode_wholesome_plugin_example_text',\n        source: 'meta',\n    },\n    exampleText2: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_2',\n        source: 'meta',\n    },\n    exampleText3: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_3',\n        source: 'meta',\n    },\n    exampleToggle: {\n        meta: '_wholesomecode_wholesome_plugin_example_toggle',\n        source: 'meta',\n    },\n},\n<\/code><\/pre>\n<h3>Importar os componentes<\/h3>\n<p>Edite o <code>\/src\/edit.js<\/code>arquivo, substituindo a <code>@wordpress\/components<\/code>importa\u00e7\u00e3o pelo seguinte:<\/p>\n<pre><code>import {\n    Panel,\n    PanelBody,\n    PanelRow,\n    SelectControl,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n<\/code><\/pre>\n<h3>Atualize o m\u00e9todo de edi\u00e7\u00e3o<\/h3>\n<p>Continue a editar o <code>\/src\/edit.js<\/code>arquivo, substituindo <code>Edit<\/code>o bloco de c\u00f3digo pelo seguinte:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const {\n        exampleSelect,\n        exampleText,\n        exampleText2,\n        exampleText3,\n        exampleToggle,\n    } = attributes;\n\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n\n                        &lt;SelectControl\n                            help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                            label={ __( 'Example Select','wholesome-plugin') }\n                            onChange={ (exampleSelect) =&gt; setAttributes( { exampleSelect }) }\n                            options={ [\n                                {\n                                    label: __( 'Please Select...', 'wholesome-plugin' ),\n                                    value: '',\n                                },\n                                {\n                                    label: __( 'Option 1', 'wholesome-plugin' ),\n                                    value: 'option-1',\n                                },\n                                {\n                                    label: __( 'Option 2', 'wholesome-plugin' ),\n                                    value: 'option-2',\n                                },\n                            ] }\n                            value={ exampleSelect }\n                        \/&gt;\n\n                        &lt;TextControl\n                            help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                            label={ __( 'Example Text', 'wholesome-plugin') }\n                            onChange={ (exampleText) =&gt; setAttributes( { exampleText }) }\n                            value={ exampleText }\n                        \/&gt;\n\n                    &lt;PanelRow&gt;\n                        &lt;TextControl\n                            help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 2', 'wholesome-plugin') }\n                            onChange={ (exampleText2) =&gt; setAttributes( { exampleText2 }) }\n                            value={ exampleText2 }\n                        \/&gt;\n                        &lt;TextControl\n                            help={ __( 'This control is inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 3', 'wholesome-plugin') }\n                            onChange={ (exampleText3) =&gt; setAttributes( { exampleText3 }) }\n                            value={ exampleText3 }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n\n                        &lt;ToggleControl\n                            checked={ exampleToggle }\n                            help={ __( 'An example toggle.', 'wholesome-plugin') }\n                            label={ __( 'Example Toggle', 'wholesome-plugin') }\n                            onChange={ (exampleToggle) =&gt; setAttributes( { exampleToggle }) }\n                        \/&gt;\n\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<h3>Adicionar algum SCSS<\/h3>\n<p>Por fim, abra o <code>\/src\/editor.scss<\/code>arquivo e substitua seu conte\u00fado pelo seguinte:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    .components-base-control {\n        margin-bottom: 1rem;\n\n        select {\n            height: 2rem;\n            min-height: 2rem;\n        }\n    }\n\n    p {\n        all: unset;\n    }\n}\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\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uso de configura\u00e7\u00f5es para armazenar dados na tabela de op\u00e7\u00f5es em 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>A primeira pergunta que voc\u00ea pode ter \u00e9 \u201cpor que eu precisaria criar meta caixas personalizadas com o Block Editor (Gutenberg)?\u201d, voc\u00ea ainda pode implementar meta caixas com PHP e adicionar controle &#8230;<\/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,722,941,920,846,867],"tags":[1170],"class_list":["post-228738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-gutenberg-8","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228738","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=228738"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228738\/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=228738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}