[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. Esta fun\u00e7\u00e3o permite que voc\u00ea adicione uma meta box com seu conte\u00fado personalizado na parte inferior ou lateral ao editar uma postagem. Este m\u00e9todo ainda funciona, tamb\u00e9m no editor Gutenberg!<\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\")
<\/a><\/p>\nNo entanto, parece um pouco estranho em compara\u00e7\u00e3o com o resto do conte\u00fado da barra lateral do Gutenberg. E para n\u00e3o mencionar, voc\u00ea precisaria escrever manualmente o c\u00f3digo de entrada (caixa de sele\u00e7\u00e3o, entradas de texto etc.) com PHP e tamb\u00e9m escrever c\u00f3digo adicional para salv\u00e1-los quando a postagem for atualizada. E se voc\u00ea quisesse que suas configura\u00e7\u00f5es de meta de postagem fossem din\u00e2micas (digamos que voc\u00ea quisesse ocultar um campo, a menos que algum outro campo fosse ativado), ent\u00e3o voc\u00ea teria que enfileirar manualmente um script e sim, voc\u00ea adivinhou, manipular manualmente a l\u00f3gica din\u00e2mica de esconder e mostrar. Tudo isso agora est\u00e1 desatualizado e facilitado com o novo editor Gutenberg baseado em Javascript. Podemos facilmente fazer algo assim:<\/p>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\")
<\/a><\/p>\nO processo<\/h2>\n
O processo \u00e9 como se segue:<\/p>\n
\n- Registramos cada meta-chave de postagem personalizada que queremos adicionar no PHP usando
[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>e definimos como dispon\u00edvel na API REST do WP. Este \u00e9 um passo necess\u00e1rio para disponibilizar a meta do post no editor Gutenberg.<\/li>\n- Criamos um arquivo Javascript e o enfileiramos especificamente para o editor (somente).<\/li>\n
- Dentro do arquivo Javascript n\u00f3s registramos um plugin
[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>dizendo para ele renderizar nosso componente.<\/li>\n- Dentro desse componente podemos produzir o que precisarmos. Podemos usar os componentes internos do WordPress para renderizar facilmente diferentes tipos de configura\u00e7\u00f5es. E usando o pacote de dados do WordPress, podemos buscar e atualizar os meta-valores do post imediatamente \u00e0 medida que eles s\u00e3o alterados.<\/li>\n<\/ul>\n
Vamos direto ao assunto, come\u00e7ando com a parte do PHP; registrando a meta do post.<\/p>\n
Registrando meta de postagem<\/h2>\n
Para cada meta de postagem que voc\u00ea deseja adicionar \u00e0 barra lateral do Gutenberg, voc\u00ea precisar\u00e1 se registrar usando [register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. Isso \u00e9 necess\u00e1rio para disponibiliz\u00e1-los atrav\u00e9s da WP REST API (que Gutenberg usa) e, portanto, dispon\u00edveis em nosso Javascript.<\/p>\nNo arquivo do seu tema functions.php<\/code>ou em algum outro arquivo PHP ativo, adicione uma fun\u00e7\u00e3o ligada ao init<\/code>gancho ‘ ‘. Dentro da fun\u00e7\u00e3o, voc\u00ea repete a register_post_meta()<\/code>para cada meta de postagem personalizada que deseja adicionar. A fun\u00e7\u00e3o recebe tr\u00eas argumentos; O primeiro par\u00e2metro \u00e9 o tipo de postagem para o qual voc\u00ea deseja registrar o meta (definido como string vazia para todos os tipos de postagem). O segundo par\u00e2metro \u00e9 o nome da meta-chave para sua meta. E o terceiro \u00e9 uma s\u00e9rie de configura\u00e7\u00f5es. \u00c9 aqui que definimos que essa meta deve ser acess\u00edvel na WP REST API definindo ‘ show_in_rest<\/code>‘ como true.<\/p>\nPor exemplo, digamos que eu queira adicionar uma ativa\u00e7\u00e3o\/desativa\u00e7\u00e3o e uma entrada de texto na barra lateral do editor. Isso significa que eu chamo register_post_meta()<\/code>de um tipo de valor booleano e de string, respectivamente. Eu tamb\u00e9m quero limitar esses post meta para postar apenas tipo ‘post’. Isso seria algo como:<\/p>\nadd_action( 'init', function() {\n register_post_meta( 'post', '_my_custom_bool', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'boolean',\n ] );\n\u00a0\n register_post_meta( 'post', '_my_custom_text', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'string',\n ] );\n} );<\/code><\/pre>\nAgora eu tenho uma meta-chave post _my_custom_bool<\/code>e _my_custom_text<\/code>pronta e dispon\u00edvel em Gutenberg. Eu recomendo que voc\u00ea os renomeie para algo que fa\u00e7a sentido para voc\u00ea.<\/p>\nRegistrando nosso plugin Javascript<\/h2>\n
Para nossa pr\u00f3xima etapa, adicionaremos um arquivo Javascript e nos certificaremos de enfileirar usando PHP.<\/p>\n
Tenha em mente que eu escrevo o c\u00f3digo Javascript na sintaxe ES6. Isso significa que eu configurei uma configura\u00e7\u00e3o webpack\/Babel para compilar meu arquivo em um arquivo Javascript leg\u00edvel separado para o navegador.<\/p>\n
Eu tenho um guia sobre como configurar isso se voc\u00ea n\u00e3o tiver certeza de como isso funciona:<\/p>\n
Precisamos ter certeza de que o WordPress carrega nosso script no editor. Fazemos isso conectando uma fun\u00e7\u00e3o enqueue_block_editor_assets<\/code>e chamando [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>:<\/p>\nadd_action( 'enqueue_block_editor_assets', function() {\n wp_enqueue_script(\n 'awp-custom-meta-plugin', \n get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n [ 'wp-edit-post' ],\n false,\n false\n );\n} );<\/code><\/pre>\nSuponho que voc\u00ea esteja familiarizado com como enfileirar scripts e seja capaz de substituir os valores pelos seus pr\u00f3prios. Como segundo par\u00e2metro, forne\u00e7o o caminho para o arquivo de compila\u00e7\u00e3o (n\u00e3o o arquivo de origem). Para garantir que nosso script n\u00e3o seja carregado muito cedo, defino ‘ wp-edit-post<\/code>‘ como uma depend\u00eancia. Esse \u00e9 o pacote que precisamos para lidar com o post meta.<\/p>\nAgora vamos passar para a parte Javascript.<\/p>\n
Primeiro precisamos chamar [registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>e passar nosso componente para renderizar o painel na barra lateral do Documento Gutenberg. Essa fun\u00e7\u00e3o est\u00e1 dispon\u00edvel no wp.plugins<\/code>pacote, ent\u00e3o eu a destruo no topo. Gosto de manter meus arquivos organizados, ent\u00e3o crio outro arquivo; “awp-custom-postmeta-fields.js" para conter o componente renderizado e import\u00e1-lo.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n render() {\n return(<AWP_Custom_Plugin \/>);\n }\n} );<\/code><\/pre>\nEscrevendo nosso componente<\/h2>\n
Vamos come\u00e7ar a criar um componente b\u00e1sico que n\u00e3o faz nada al\u00e9m de apenas sentar no lugar correto, ent\u00e3o vamos tirar isso do caminho primeiro. Para renderizar um componente na barra lateral Documento do Gutenberg, usamos o [PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>componente. Podemos definir atributos como a title<\/code>e. E o que estiver dentro ser\u00e1 renderizado na barra lateral do Documento. Por enquanto, estou apenas enviando algum texto "Ol\u00e1".icon``className<\/code><\/p>\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() => {\n return(\n <PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\">\n <PanelRow>\n Hello there.\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\nCom o c\u00f3digo acima (compilado), obtemos isso:<\/p>\n