{"id":70848,"date":"2025-01-20T05:27:30","date_gmt":"2025-01-20T08:27:30","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=70848&#038;preview=true&#038;preview_id=70848"},"modified":"2025-01-24T04:33:40","modified_gmt":"2025-01-24T07:33:40","slug":"plugin-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/","title":{"rendered":"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos"},"content":{"rendered":"<p>Ao longo dos anos, examinamos o Gutenberg de diferentes perspectivas. Avaliamos as <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">funcionalidades do editor<\/a>, fizemos compara\u00e7\u00f5es com <a href=\"https:\/\/kinsta.com\/pt\/blog\/gutenberg-vs-elementor\/\">outros construtores de p\u00e1ginas<\/a> e desenvolvemos blocos personalizados, tanto\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\" data-darkreader-inline-bgcolor>est\u00e1ticos<\/a> quanto <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\" data-darkreader-inline-bgcolor>din\u00e2micos<\/a>, entre <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\">outras iniciativas<\/a>.<\/p>\n<p>Com as vers\u00f5es mais recentes do WordPress, novos recursos e ferramentas permitem que voc\u00ea crie layouts complexos com mais facilidade, enriquecendo e aprimorando a funcionalidade do editor de blocos sem a necessidade de criar blocos personalizados.<\/p>\n<p>Gra\u00e7as \u00e0 introdu\u00e7\u00e3o dos <a href=\"https:\/\/kinsta.com\/pt\/blog\/padroes-de-bloco-wordpress\/\">padr\u00f5es de blocos<\/a> e de ferramentas para desenvolvedores, como a <a href=\"https:\/\/kinsta.com\/pt\/blog\/api-de-vinculacao-de-blocos\/\">API de Vincula\u00e7\u00e3o de Blocos (API Block Bindings)<\/a>, existem menos casos de uso para blocos personalizados. Agora, \u00e9 poss\u00edvel criar estruturas de blocos complexas, injetar valores de metadados no conte\u00fado e automatizar boa parte do fluxo de trabalho sem sair da interface do editor. Em resumo, hoje o WordPress permite criar sites complexos com muito menos esfor\u00e7o.<\/p>\n<p>Adicionar controles e ferramentas personalizadas ao editor pode ajudar a tornar o processo de cria\u00e7\u00e3o de conte\u00fado mais fluido. Por exemplo, pode ser necess\u00e1rio adicionar um painel \u00e0 barra lateral de artigos para incluir funcionalidades ou criar uma barra lateral personalizada para gerenciar m\u00faltiplos campos de metadados.<\/p>\n<p>Vamos come\u00e7ar!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Como criar um plugin de editor de blocos sem criar um bloco personalizado<\/h2>\n<p>O WordPress fornece uma <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">ferramenta de linha de comando<\/a> conveniente que permite que voc\u00ea instale um ambiente de desenvolvimento Node.js local com todos os arquivos e depend\u00eancias necess\u00e1rios para criar um bloco personalizado. Basta digitar <code>npx @wordpress\/create-block<\/code> na ferramenta de linha de comando, aguardar alguns segundos e voc\u00ea estar\u00e1 pronto.<\/p>\n<p>No entanto, criar a estrutura de um bloco personalizado n\u00e3o \u00e9 necess\u00e1rio quando voc\u00ea s\u00f3 precisa adicionar uma barra lateral ou um painel de configura\u00e7\u00f5es simples. Nesse caso, \u00e9 necess\u00e1rio criar um plugin Gutenberg.<\/p>\n<p>O WordPress n\u00e3o oferece uma ferramenta para automatizar o processo de cria\u00e7\u00e3o de um plugin para o Gutenberg, ent\u00e3o ser\u00e1 preciso faz\u00ea-lo manualmente. Mas n\u00e3o se preocupe. O processo \u00e9 relativamente simples, e vamos gui\u00e1-lo. Estes s\u00e3o os passos a seguir:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Baixe e instale um ambiente de desenvolvimento local<\/h3>\n<p><strong>Voc\u00ea deve come\u00e7ar pelo princ\u00edpio:<\/strong> Embora voc\u00ea possa desenvolver seu plugin Gutenberg em um ambiente remoto, pode ser mais conveniente instalar um site WordPress de desenvolvimento localmente. Voc\u00ea pode usar qualquer ambiente baseado em PHP e MySQL. Entre as v\u00e1rias alternativas dispon\u00edveis, recomendamos o <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/caracteristicas\/\">DevKinsta<\/a>. Ele \u00e9 gratuito, completo, f\u00e1cil de usar e 100% compat\u00edvel com a hospedagem da Kinsta.<\/p>\n<h3>2. Baixe e instale o Node.js e o npm<\/h3>\n<p>Baixe o Node.js em <a href=\"https:\/\/nodejs.org\/\">nodejs.org<\/a> e instale em seu computador. Isso tamb\u00e9m instalar\u00e1 o npm, o gerenciador de pacotes do Node.<\/p>\n<p>Depois disso, abra a sua ferramenta de linha de comando e execute os comandos <code>node -v<\/code> e <code>npm -v<\/code>. Isso exibir\u00e1 as vers\u00f5es instaladas do Node.js e do npm.<\/p>\n<figure id=\"attachment_190001\" aria-describedby=\"caption-attachment-190001\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190001 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/node-v.png\" alt=\"Verifique vers\u00f5es do Node e npm.\" width=\"1302\" height=\"308\"><figcaption id=\"caption-attachment-190001\" class=\"wp-caption-text\">Verifique vers\u00f5es do Node e npm.<\/figcaption><\/figure>\n<h3>3. Crie a pasta do seu plugin<\/h3>\n<p>Crie uma nova pasta em <code>wp-content\/plugins<\/code> e renomeie-a para <code>my-sidebar-plugin<\/code> ou algo semelhante. Lembre-se de que esse nome deve refletir o nome do seu plugin.<\/p>\n<p>Abra o terminal, navegue at\u00e9 a pasta do plugin e inicialize um projeto npm com o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Isso criar\u00e1 um arquivo <code>package.json<\/code> b\u00e1sico.<\/p>\n<figure id=\"attachment_190003\" aria-describedby=\"caption-attachment-190003\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190003 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/npm-init-y.png\" alt=\"Criar um arquivo package.json b\u00e1sico.\" width=\"1302\" height=\"886\"><figcaption id=\"caption-attachment-190003\" class=\"wp-caption-text\">Criando um arquivo package.json b\u00e1sico.<\/figcaption><\/figure>\n<h3>4. Instale as depend\u00eancias<\/h3>\n<p>Em sua ferramenta de linha de comando, digite o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<ul>\n<li><code>@wordpress\/plugins<\/code> instala o <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">m\u00f3dulo <code>plugins<\/code> para WordPress<\/a>.<\/li>\n<li><code>@wordpress\/scripts<\/code> instala uma cole\u00e7\u00e3o de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener noreferrer\">scripts reutiliz\u00e1veis<\/a> para o desenvolvimento no WordPress.<\/li>\n<\/ul>\n<p>Ap\u00f3s a instala\u00e7\u00e3o, uma nova pasta <code>node_modules<\/code>\u00a0ser\u00e1 adicionada ao projeto.<\/p>\n<p>Agora, abra o arquivo <code>package.json<\/code> e atualize os <code>scripts<\/code> conforme mostrado abaixo:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"my-sidebar-plugin\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.14.0\",\n\t\t\"@wordpress\/scripts\": \"^30.7.0\"\n\t}\n}<\/code><\/pre>\n<p>Agora voc\u00ea pode verificar a pasta do plugin:<\/p>\n<figure id=\"attachment_190006\" aria-describedby=\"caption-attachment-190006\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190006 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/package-json.png\" alt=\"O projeto do plugin no Visual Studio Code.\" width=\"1862\" height=\"998\"><figcaption id=\"caption-attachment-190006\" class=\"wp-caption-text\">O projeto do plugin no Visual Studio Code.<\/figcaption><\/figure>\n<h3>5. Crie os arquivos do plugin<\/h3>\n<p>No diret\u00f3rio do plugin, crie um novo arquivo <code>.php<\/code> e d\u00ea a ele o mesmo nome da pasta. Em nosso exemplo, ele \u00e9 <code>my-sidebar-plugin.php<\/code>.<\/p>\n<p>Abra o arquivo e cole o seguinte c\u00f3digo para registrar o plugin no servidor:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: My Sidebar Plugin\n *\/\n\nfunction my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Em seguida, crie uma pasta <code>src<\/code> no diret\u00f3rio do seu plugin. Nessa pasta, crie um novo arquivo <code>index.js<\/code> com o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">import { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/edit-post';\n\nconst MyPluginSidebar = () =&gt; (\n\t&lt;PluginSidebar\n\t\tname=\"my-sidebar-plugin\"\n\t\ttitle=\"My Sidebar Plugin\"\n\t&gt;\n\t\t&lt;div&gt;\n\t\t\tHello my friends!\n\t\t&lt;\/div&gt;\n\t&lt;\/PluginSidebar&gt;\n);\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<h3>6. Compile o c\u00f3digo<\/h3>\n<p>Agora, s\u00f3 falta compilar o projeto. No terminal, execute o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Isso cria uma pasta <code>build<\/code> com os arquivos compactados do projeto.<\/p>\n<figure id=\"attachment_190008\" aria-describedby=\"caption-attachment-190008\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190008 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/plugin-project-vsc.png\" alt=\"A pasta do projeto do plugin no VSC.\" width=\"2120\" height=\"998\"><figcaption id=\"caption-attachment-190008\" class=\"wp-caption-text\">A pasta do projeto do plugin no VSC.<\/figcaption><\/figure>\n<p>Quando terminar, navegue at\u00e9 a tela <strong>Plugins<\/strong> no painel do WordPress e ative o plugin. Crie um novo artigo ou p\u00e1gina e clique no \u00edcone do plugin no canto superior direito para exibir sua barra lateral personalizada.<\/p>\n<figure id=\"attachment_190010\" aria-describedby=\"caption-attachment-190010\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190010 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/gutenberg-custom-sidebar.png\" alt=\"Uma barra lateral personalizada no editor de artigos.\" width=\"1976\" height=\"552\"><figcaption id=\"caption-attachment-190010\" class=\"wp-caption-text\">Uma barra lateral personalizada no editor de artigos.<\/figcaption><\/figure>\n<h3>7. Desenvolvimento e build<\/h3>\n<p>Colocamos o arquivo <code>index.js<\/code> na pasta <code>src<\/code>. O uso da pasta <code>src<\/code> \u00e9 uma conven\u00e7\u00e3o comum no desenvolvimento de plugins e temas do WordPress, o que facilita o entendimento do c\u00f3digo por outros desenvolvedores.<\/p>\n<p>Ao colocar o c\u00f3digo JS na pasta <code>src<\/code>, voc\u00ea pode usar o comando <code>npm start<\/code> ou <code>npm run start<\/code> para iniciar um ambiente de desenvolvimento que monitora os scripts e recompila automaticamente o c\u00f3digo quando necess\u00e1rio. Quando voc\u00ea terminar o desenvolvimento, o comando <code>npm build<\/code> ou <code>npm run build<\/code> compilar\u00e1 o c\u00f3digo JavaScript na pasta <code>build<\/code>, que conter\u00e1 o c\u00f3digo otimizado para produ\u00e7\u00e3o.<\/p>\n<p>Agora, vamos colocar em pr\u00e1tica o que aprendemos e modificar o plugin que criamos na se\u00e7\u00e3o anterior para adicionar um novo painel \u00e0 barra lateral do editor de artigos para gerenciar os campos personalizados.<\/p>\n<h2>Como criar uma barra lateral adicional para gerenciar campos de metadados de artigos<\/h2>\n<p>Nosso objetivo \u00e9 criar uma barra lateral personalizada que contenha um painel com um \u00fanico campo de texto para adicionar e editar campos de metadados personalizados.<\/p>\n<p>Antes de prosseguir, vale mencionar que seria poss\u00edvel utilizar uma meta box personalizada para alcan\u00e7ar o mesmo objetivo. Com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-7\/#meta-boxes-in-the-post-editor\">WordPress 6.7, as meta boxes foram aprimoradas<\/a> e agora s\u00e3o totalmente compat\u00edveis com o editor de blocos. Diante disso, voc\u00ea pode se perguntar por que gerenciar campos de metadados a partir de uma barra lateral personalizada em vez de uma meta box.<\/p>\n<p>A resposta \u00e9 que uma barra lateral permite aproveitar componentes integrados do WordPress, facilitando a cria\u00e7\u00e3o de interfaces mais amig\u00e1veis e com controles avan\u00e7ados, que tamb\u00e9m ser\u00e3o familiares para os usu\u00e1rios.<\/p>\n<p>Dito isso, aqui est\u00e1 o processo para criar uma barra lateral personalizada que permita gerenciar campos personalizados diretamente no editor.<\/p>\n<h3><code>my-sidebar-plugin.php<\/code><\/h3>\n<h4>Etapa 1: Registrar o metadado do artigo<\/h4>\n<p>Primeiro, voc\u00ea precisa registrar o campo de metadados. Adicione o seguinte c\u00f3digo ao arquivo principal do plugin:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_meta() {\n\tregister_post_meta(\n\t\t'post',\n\t\t'meta_fields_book_title', \n\t\tarray(\n\t\t\t'show_in_rest' =&gt; true,\n\t\t\t'type' =&gt; 'string',\n\t\t\t'single' =&gt; true,\n\t\t\t'sanitize_callback' =&gt; 'sanitize_text_field',\n\t\t\t'label' =&gt; __( 'Book title', 'my-sidebar-plugin' ),\n\t\t\t'auth_callback' =&gt; function() { \n\t\t\t\treturn current_user_can( 'edit_posts' );\n\t\t\t}\n\t\t)\n\t);\n}\nadd_action( 'init', 'my_sidebar_plugin_register_meta' );<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>register_post_meta<\/code> aceita tr\u00eas argumentos:<\/p>\n<ul>\n<li>O tipo de artigo:\u00a0Define para qual tipo de artigo a chave de metadados ser\u00e1 registrada. Caso seja definida como uma string vazia (<code>\"\"<\/code>), a chave ser\u00e1 registrada para todos os tipos de artigos existentes.<\/li>\n<li>A chave de metadados a ser registrada: Observe que n\u00e3o estamos usando um underscore (<code>_<\/code>) no in\u00edcio do nome da chave. Prefixar a chave com um underscore ocultar\u00e1 o campo personalizado, o que pode ser desejado em uma meta box. No entanto, ocultar o campo impede que ele seja usado pela API de Vincula\u00e7\u00e3o de Blocos no conte\u00fado do artigo.<\/li>\n<li>Um array de argumentos: \u00c9 necess\u00e1rio definir <code>show_in_rest<\/code> como <code>true<\/code>. Isso exp\u00f5e o campo de metadados \u00e0 API REST, permitindo vincul\u00e1-lo aos atributos de bloco. Para os outros atributos, consulte a <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">documenta\u00e7\u00e3o da fun\u00e7\u00e3o<\/a>.<\/li>\n<\/ul>\n<h4>Etapa 2: Registrar uma meta box<\/h4>\n<p>Para garantir a compatibilidade retroativa do seu plugin, voc\u00ea precisa registrar uma meta box personalizada. Isso permite que os usu\u00e1rios gerenciem campos personalizados mesmo no editor cl\u00e1ssico. Adicione o seguinte c\u00f3digo ao arquivo PHP do seu plugin:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register meta box\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n * \n *\/\nfunction my_sidebar_plugin_register_meta_box(){\n\tadd_meta_box(\n\t\t'book_meta_box', \/\/ Unique ID\n\t\t__( 'Book details' ), \/\/ Box title\n\t\t'my_sidebar_plugin_meta_box_callback', \/\/ Content callback\n\t\tarray( 'post' ), \/\/ Post types\n\t\t'advanced', \/\/ context\n\t\t'default', \/\/ priority\n\t\tarray('__back_compat_meta_box' =&gt; true) \/\/ hide the meta box in Gutenberg\n\t );\n}\nadd_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );<\/code><\/pre>\n<p>Agora declare o callback que cria o formul\u00e1rio:<\/p>\n<pre><code class=\"language-php\">\/**\n * Build meta box form\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_nonce_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_meta_box_callback( $post ){\n\twp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );\n\t$title = get_post_meta( $post-&gt;ID, 'meta_fields_book_title', true );\n\t?&gt;\n\t&lt;div class=\"inside\"&gt;\n\t\t&lt;p&gt;&lt;strong&gt;&lt;?php echo __( 'Book title', 'my-sidebar-plugin' ); ?&gt;&lt;\/strong&gt;&lt;\/p&gt;\n\t\t&lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t&lt;\/div&gt;\n\t&lt;?php\n}<\/code><\/pre>\n<p>Em seguida, escreva a fun\u00e7\u00e3o para salvar seus metadados no banco de dados:<\/p>\n<pre><code class=\"language-php\">\/**\n * Save metadata\n * \n * @link https:\/\/developer.wordpress.org\/reference\/functions\/wp_verify_nonce\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/current_user_can\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_text_field\/\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/\n * \n *\/\nfunction my_sidebar_plugin_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\n\tupdate_post_meta( $post_id, 'meta_fields_book_title', $title );\n}\nadd_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );<\/code><\/pre>\n<p>N\u00e3o vamos nos aprofundar nesse c\u00f3digo, pois ele est\u00e1 al\u00e9m do escopo deste artigo. No entanto, voc\u00ea pode encontrar todas as informa\u00e7\u00f5es necess\u00e1rias seguindo os links nos cabe\u00e7alhos das fun\u00e7\u00f5es.<\/p>\n<p>Por \u00faltimo, precisamos adicionar o arquivo <code>index.js<\/code> do plugin na fila de scripts do WordPress:<\/p>\n<pre><code class=\"language-php\">function my_sidebar_plugin_register_script() {\n\twp_enqueue_script(\n\t\t'my_sidebar_plugin_script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );<\/code><\/pre>\n<p>Isso \u00e9 tudo para o arquivo PHP. Em seguida, precisamos escrever o c\u00f3digo JS.<\/p>\n<h3><code>index.js<\/code><\/h3>\n<p>O arquivo <code>index.js<\/code> est\u00e1 localizado na pasta <code>src<\/code>, onde voc\u00ea armazena os arquivos JS durante a fase de desenvolvimento.<\/p>\n<p>Abra o\u00a0<code>index.js<\/code> e adicione as seguintes <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">declara\u00e7\u00f5es <code>import<\/code><\/a>:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginSidebar } from '@wordpress\/editor';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Voc\u00ea precisa desses recursos para criar a barra lateral com os controles necess\u00e1rios.<\/p>\n<p>Em seguida, voc\u00ea precisa criar o componente da barra lateral:<\/p>\n<pre><code class=\"language-js\">const MyPluginSidebar = () =&gt; {\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginSidebar\n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ticon=\"book\"\n\t\t\t\ttitle=\"My plugin sidebar\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/PluginSidebar&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>registerPlugin<\/code> registra o plugin e renderiza o componente chamado <code>MyPluginSidebar<\/code>.<\/p>\n<p>A fun\u00e7\u00e3o <code>MyPluginSidebar<\/code> declara algumas constantes e retorna o c\u00f3digo JSX do componente.<\/p>\n<ul>\n<li><code>useSelect<\/code> \u00e9 um hook personalizado para recuperar propriedades de seletores registrados. Utilizamos para obter o tipo de artigo atual. Consulte tamb\u00e9m <a href=\"https:\/\/developer.wordpress.org\" target=\"_new\" rel=\"noopener\">este artigo do WordPress Developer Blog<\/a>.<\/li>\n<li><code>useEntityProp<\/code> retorna um array de campos de metadados e uma fun\u00e7\u00e3o setter para definir novos valores de metadados. Consulte tamb\u00e9m a <a href=\"https:\/\/developer.wordpress.org\" target=\"_new\" rel=\"noopener\">refer\u00eancia on-line<\/a>.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> \u00e9 um manipulador de eventos que salva o valor do campo de metadados <code>bookTitle<\/code>.<\/li>\n<\/ul>\n<p>Utilizamos alguns componentes integrados para construir a barra lateral:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> permite adicionar itens \u00e0 barra de ferramentas das telas do editor de artigo ou site. (Consulte a <a href=\"https:\/\/developer.wordpress.org\" target=\"_new\" rel=\"noopener\">refer\u00eancia do componente<\/a>.)<\/li>\n<li><code>PanelBody<\/code> cria um cont\u00eainer colaps\u00e1vel que pode ser aberto ou fechado. (Consulte a <a href=\"https:\/\/developer.wordpress.org\" target=\"_new\" rel=\"noopener\">refer\u00eancia do componente<\/a>.)<\/li>\n<li><code>PanelRow<\/code> \u00e9 um cont\u00eainer gen\u00e9rico para linhas dentro de um <code>PanelBody<\/code>. (Consulte a <a href=\"https:\/\/developer.wordpress.org\" target=\"_new\" rel=\"noopener\">refer\u00eancia do componente<\/a>.)<\/li>\n<li><code>TextControl<\/code> \u00e9 um campo de entrada de linha \u00fanica que pode ser usado para entrada de texto livre. (Consulte a <a href=\"https:\/\/developer.wordpress.org\" target=\"_new\" rel=\"noopener\">refer\u00eancia do componente<\/a>.)<\/li>\n<\/ul>\n<p>Agora, execute o comando <code>npm run build<\/code>, ative o plugin e crie um novo artigo. Um novo \u00edcone de livro deve aparecer na barra lateral superior. Clicando nesse \u00edcone, a barra lateral do plugin ser\u00e1 exibida.<\/p>\n<figure id=\"attachment_190019\" aria-describedby=\"caption-attachment-190019\" style=\"width: 1976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190019 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/plugin-sidebar.png\" alt=\"Uma barra lateral personalizada com um campo meta.\" width=\"1976\" height=\"558\"><figcaption id=\"caption-attachment-190019\" class=\"wp-caption-text\">Uma barra lateral personalizada com um campo meta.<\/figcaption><\/figure>\n<p>E se voc\u00ea n\u00e3o precisar de uma nova barra lateral, mas quiser exibir seu campo personalizado na barra lateral integrada do editor de artigos? Basta substituir <code>PluginSidebar<\/code> por <code>PluginDocumentSettingPanel<\/code>. Aqui est\u00e1 o novo c\u00f3digo do arquivo <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl } from '@wordpress\/components';\n\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\n\nconst MyPluginSidebar = () =&gt; {\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\n\tconst bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';\n\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, meta_fields_book_title: newValue } );\n\t};\n\n\tif ( postType === 'post' ) {\n\t\treturn (\n\t\t\t&lt;PluginDocumentSettingPanel \n\t\t\t\tname=\"my-sidebar-plugin\"\n\t\t\t\ttitle=\"Book details\" \n\t\t\t\tclassName=\"my-sidebar-plugin\"\n\t\t\t&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;TextControl \n\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\tlabel={ __( \"Book title\" ) }\n\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t\t);\n\t}\n};\n\nregisterPlugin( 'my-sidebar-plugin', {\n\trender: MyPluginSidebar,\n} );<\/code><\/pre>\n<p>A imagem a seguir mostra o resultado.<\/p>\n<figure id=\"attachment_190023\" aria-describedby=\"caption-attachment-190023\" style=\"width: 1914px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190023 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/default-sidebar-panel.png\" alt=\"Um painel de configura\u00e7\u00f5es personalizadas na barra lateral do artigo.\" width=\"1914\" height=\"1418\"><figcaption id=\"caption-attachment-190023\" class=\"wp-caption-text\">Um painel de configura\u00e7\u00f5es personalizadas na barra lateral do artigo.<\/figcaption><\/figure>\n<h2>Caso de uso: Uma substitui\u00e7\u00e3o de padr\u00e3o de bloco para automatizar seu fluxo de trabalho<\/h2>\n<p>Agora voc\u00ea pode adicionar um valor ao campo personalizado, e ele estar\u00e1 dispon\u00edvel por meio da API de Vincula\u00e7\u00e3o de Blocos para uso com atributos de bloco. Por exemplo, voc\u00ea pode adicionar um bloco de par\u00e1grafo ao seu conte\u00fado e vincular o campo personalizado ao atributo <code>content<\/code> do par\u00e1grafo.<\/p>\n<figure id=\"attachment_190026\" aria-describedby=\"caption-attachment-190026\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190026 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/block-attributes.png\" alt=\"Vinculando campos de metadados aos atributos do bloco.\" width=\"1912\" height=\"1420\"><figcaption id=\"caption-attachment-190026\" class=\"wp-caption-text\">Vinculando campos de metadados aos atributos do bloco.<\/figcaption><\/figure>\n<p>Voc\u00ea pode alterar o valor do seu campo personalizado, e essas altera\u00e7\u00f5es ser\u00e3o aplicadas automaticamente ao conte\u00fado do seu par\u00e1grafo.<\/p>\n<p>Se voc\u00ea est\u00e1 se perguntando se h\u00e1 mais possibilidades com campos personalizados e a API de Vincula\u00e7\u00e3o de Blocos, a resposta \u00e9 sim! Os padr\u00f5es de bloco e a API de Vincula\u00e7\u00e3o de Blocos permitem automatizar todo o processo de cria\u00e7\u00e3o de conte\u00fado.<\/p>\n<p>Para come\u00e7ar, crie um padr\u00e3o com pelo menos um cabe\u00e7alho ou par\u00e1grafo. Neste exemplo, criamos um padr\u00e3o de bloco com um bloco de colunas, uma imagem, um cabe\u00e7alho e alguns blocos de linha, incluindo dois par\u00e1grafos cada.<\/p>\n<figure id=\"attachment_190040\" aria-describedby=\"caption-attachment-190040\" style=\"width: 2116px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190040 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/building-a-pattern.png\" alt=\"Um bloco de colunas com uma imagem, um cabe\u00e7alho e duas linhas.\" width=\"2116\" height=\"1076\"><figcaption id=\"caption-attachment-190040\" class=\"wp-caption-text\">Um bloco de colunas com uma imagem, um cabe\u00e7alho e duas linhas.<\/figcaption><\/figure>\n<p>Quando voc\u00ea estiver satisfeito com seu layout, selecione os elementos de agrupamento e crie um padr\u00e3o sincronizado.<\/p>\n<figure id=\"attachment_190035\" aria-describedby=\"caption-attachment-190035\" style=\"width: 1334px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190035 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/create-pattern.png\" alt=\"Criar padr\u00e3o.\" width=\"1334\" height=\"1184\"><figcaption id=\"caption-attachment-190035\" class=\"wp-caption-text\">Criar padr\u00e3o.<\/figcaption><\/figure>\n<p>Adicione um nome e uma categoria para o padr\u00e3o de bloco e certifique-se de sincroniz\u00e1-lo.<\/p>\n<figure id=\"attachment_190041\" aria-describedby=\"caption-attachment-190041\" style=\"width: 1386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190041 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/add-new-pattern.png\" alt=\"Adicionar novo padr\u00e3o\" width=\"1386\" height=\"994\"><figcaption id=\"caption-attachment-190041\" class=\"wp-caption-text\">Adicionar novo padr\u00e3o.<\/figcaption><\/figure>\n<p>Se voc\u00ea criou o padr\u00e3o no editor de artigos, selecione-o e clique em <strong>Editar original<\/strong> na barra de ferramentas do bloco. Voc\u00ea tamb\u00e9m pode navegar at\u00e9 a se\u00e7\u00e3o <strong>Padr\u00f5es<\/strong> do editor de sites e encontrar o padr\u00e3o em <strong>Meus padr\u00f5es<\/strong> ou na categoria definida anteriormente.<\/p>\n<p>Abra o Editor de C\u00f3digo e localize o bloco que deseja vincular ao seu campo personalizado. No delimitador do bloco, adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-json\">&lt;!-- wp:heading {\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"core\/post-meta\",\n\t\t\t\t\"args\":{\n\t\t\t\t\t\"key\":\"meta_fields_book_title\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n} --&gt;<\/code><\/pre>\n<figure id=\"attachment_190042\" aria-describedby=\"caption-attachment-190042\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190042 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/block-pattern-in-code-editor.png\" alt=\"O padr\u00e3o de bloco no Editor de c\u00f3digo.\" width=\"1594\" height=\"1258\"><figcaption id=\"caption-attachment-190042\" class=\"wp-caption-text\">O padr\u00e3o de bloco no Editor de c\u00f3digo.<\/figcaption><\/figure>\n<p>Salve o padr\u00e3o e crie um novo artigo. Adicione o padr\u00e3o ao seu conte\u00fado e defina um valor para o campo personalizado. Voc\u00ea ver\u00e1 que o valor ser\u00e1 aplicado automaticamente ao padr\u00e3o.<\/p>\n<figure id=\"attachment_190044\" aria-describedby=\"caption-attachment-190044\" style=\"width: 2120px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-190044 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/01\/bound-blocks-in-a-synced-block-pattern.png\" alt=\"Um cabe\u00e7alho vinculado em um padr\u00e3o sincronizado\" width=\"2120\" height=\"1226\"><figcaption id=\"caption-attachment-190044\" class=\"wp-caption-text\">Um cabe\u00e7alho vinculado a um padr\u00e3o sincronizado.<\/figcaption><\/figure>\n<p>Agora, voc\u00ea pode explorar mais este plugin. Gra\u00e7as aos campos personalizados e \u00e0 API de Vincula\u00e7\u00e3o de Blocos, \u00e9 poss\u00edvel adicionar mais campos e controles para preencher seus layouts automaticamente.<\/p>\n<h2>Resumo<\/h2>\n<p>O desenvolvimento de um bloco personalizado pode ser um desafio. Mas ser\u00e1 que voc\u00ea precisa criar um bloco quando pode fazer mais com um padr\u00e3o de bloco?<\/p>\n<p>Com os avan\u00e7os nos padr\u00f5es de blocos e a introdu\u00e7\u00e3o de recursos avan\u00e7ados para desenvolvedores, como a API de Vincula\u00e7\u00e3o de Blocos (API Block Bindings), n\u00e3o \u00e9 mais necess\u00e1rio criar blocos personalizados para criar sites sofisticados e funcionais. Um simples plugin e um padr\u00e3o de bloco podem automatizar com efici\u00eancia uma parte significativa do seu fluxo de trabalho.<\/p>\n<p>Este tutorial demonstrou como adicionar funcionalidades ao editor de artigos do WordPress por meio de um plugin. No entanto, o que abordamos neste artigo \u00e9 apenas uma introdu\u00e7\u00e3o ao que voc\u00ea pode realizar com os recursos robustos que o WordPress oferece atualmente.<\/p>\n<p>Voc\u00ea j\u00e1 explorou esses recursos e adicionou funcionalidades ao editor do WordPress? Se sim, sinta-se \u00e0 vontade para compartilhar suas experi\u00eancias e ideias na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ao longo dos anos, examinamos o Gutenberg de diferentes perspectivas. Avaliamos as funcionalidades do editor, fizemos compara\u00e7\u00f5es com outros construtores de p\u00e1ginas e desenvolvemos blocos personalizados, &#8230;<\/p>\n","protected":false},"author":36,"featured_media":70849,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1010],"class_list":["post-70848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-dicas-de-tecnologia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos<\/title>\n<meta name=\"description\" content=\"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos\" \/>\n<meta property=\"og:description\" content=\"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-20T08:27:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T07:33:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos\",\"datePublished\":\"2025-01-20T08:27:30+00:00\",\"dateModified\":\"2025-01-24T07:33:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\"},\"wordCount\":2350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\",\"name\":\"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"datePublished\":\"2025-01-20T08:27:30+00:00\",\"dateModified\":\"2025-01-24T07:33:40+00:00\",\"description\":\"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos","description":"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos","og_description":"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.","og_url":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-01-20T08:27:30+00:00","article_modified_time":"2025-01-24T07:33:40+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos","datePublished":"2025-01-20T08:27:30+00:00","dateModified":"2025-01-24T07:33:40+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/"},"wordCount":2350,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/","url":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/","name":"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","datePublished":"2025-01-20T08:27:30+00:00","dateModified":"2025-01-24T07:33:40+00:00","description":"Aprenda a criar layouts complexos de forma mais f\u00e1cil, desenvolvendo um plugin Gutenberg para aprimorar as funcionalidades do editor de blocos.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/01\/how-to-build-a-gutenberg-plugin-to-add-functionality-to-the-block-editor.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Criar um Plugin Gutenberg para Adicionar Funcionalidades ao Editor de Blocos"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=70848"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70848\/revisions"}],"predecessor-version":[{"id":70919,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70848\/revisions\/70919"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70848\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/70849"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=70848"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=70848"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=70848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}