{"id":228883,"date":"2022-10-18T16:39:00","date_gmt":"2022-10-18T13:39:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228883"},"modified":"2022-11-09T04:38:34","modified_gmt":"2022-11-09T01:38:34","slug":"adicionar-pontos-de-entrada-ao-script-de-bloco-de-criacao-do-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionar-pontos-de-entrada-ao-script-de-bloco-de-criacao-do-wordpress\/","title":{"rendered":"Adicionar pontos de entrada ao script de bloco de cria\u00e7\u00e3o do WordPress"},"content":{"rendered":"\n<p>Quando voc\u00ea cria um bloco pela primeira vez com o script de cria\u00e7\u00e3o de bloco do WordPress, <code>npm init @wordpress\/block<\/code>ele fornece um ponto de entrada para <code>\/src\/index.js<\/code>, que voc\u00ea pode usar para compilar todos os seus ativos e estilos baseados em bloco.<\/p>\n<p>\u00c0s vezes, voc\u00ea deseja adicionar outros pontos de entrada, por exemplo, voc\u00ea pode querer usar os blocos do WordPress Block Editor (Gutenberg) em outro lugar no editor, por exemplo, <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">em uma p\u00e1gina de configura\u00e7\u00f5es<\/a> ou no personalizador.<\/p>\n<p>Este guia ajuda voc\u00ea a estender o WordPress Create Block Script <code>webpack.config<\/code>para que voc\u00ea possa adicionar esses pontos de entrada adicionais.<\/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 com o script create block<\/a><\/li>\n<\/ul>\n<h2>Crie seus arquivos<\/h2>\n<p>Seguindo o <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia create block script<\/a>, vamos criar alguns arquivos em nossa solu\u00e7\u00e3o:<\/p>\n<h3>Crio<code>\/src\/admin.js<\/code><\/h3>\n<p>Este arquivo ser\u00e1 o principal ponto de entrada para qualquer React que desejemos adicionar \u00e0 tela de administra\u00e7\u00e3o do WordPress (por exemplo, se quisermos <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">construir uma p\u00e1gina de op\u00e7\u00f5es para controlar nossas configura\u00e7\u00f5es com Gutenberg Components<\/a>.<\/p>\n<p>Crie o arquivo <code>\/src\/admin.js<\/code>e cole o seguinte c\u00f3digo:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Ainda n\u00e3o estamos fazendo nada neste arquivo, que ser\u00e1 assunto de guias posteriores. Por enquanto estamos apenas colocando algum c\u00f3digo para que possamos testar a sa\u00edda.<\/p>\n<p>No entanto, importa o <code>\/src\/admin.scss<\/code>arquivo, que ser\u00e1 compilado para conter todo o nosso CSS personalizado para o administrador do WordPress.<\/p>\n<h3>Crio<code>\/src\/admin.scss<\/code><\/h3>\n<p>Crie o arquivo <code>\/src\/admin.scss<\/code>e adicione alguns SCSS de teste:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>Novamente, esse c\u00f3digo n\u00e3o serve para nada al\u00e9m de testar se o SCSS \u00e9 compilado.<\/p>\n<h3>Crio<code>\/webpack.config.js<\/code><\/h3>\n<p>Crie um arquivo na raiz do seu plugin chamado <code>webpack.config.js<\/code>vamos cobrir o que colocar neste arquivo em breve.<\/p>\n<h2>Edite o arquivo PHP raiz do plug-in<\/h2>\n<p>Se voc\u00ea estiver seguindo o guia anterior, esse plugin ser\u00e1 chamado de <code>wholesome-plugin.php<\/code>.<\/p>\n<p>Neste arquivo queremos registrar os scripts para a \u00e1rea de administra\u00e7\u00e3o, que ser\u00e3o gerados pela configura\u00e7\u00e3o do nosso webpack. Adicione a seguinte fun\u00e7\u00e3o ao final desse arquivo:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_register_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<p>N\u00f3s copiamos praticamente o c\u00f3digo do bloco de enfileiramento anterior, mas o tornamos relevante para nossos arquivos de sa\u00edda esperados de <code>\/build\/admin.js<\/code>e <code>\/build\/admin.css<\/code>. Observe que tamb\u00e9m estamos carregando o <code>\/build\/admin.asset.php<\/code>arquivo especialmente gerado, que adicionar\u00e1 automaticamente todas as depend\u00eancias do editor de blocos do WordPress (Gutenberg) para nosso script de administra\u00e7\u00e3o.<\/p>\n<h2>Edite o<code>webPack.config<\/code><\/h2>\n<p>No passo 2 criamos o arquivo <code>webpack.config.js<\/code>, neste arquivo adicione o seguinte c\u00f3digo:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Este c\u00f3digo importa o arquivo <code>webpack.config<\/code>de <code>@wordpress\/scripts<\/code>. Este \u00e9 o c\u00f3digo que \u00e9 executado sempre que voc\u00ea executa <code>npm start<\/code>sua solu\u00e7\u00e3o.<\/p>\n<p>Tudo o que estamos fazendo \u00e9 pegar essa configura\u00e7\u00e3o e adicionar outro ponto de entrada, com a linha <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>O resto do c\u00f3digo est\u00e1 apenas dizendo ao webpack para usar as configura\u00e7\u00f5es que j\u00e1 est\u00e3o em vigor (por exemplo <code>...defautConfig<\/code>,, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Compilar o c\u00f3digo<\/h2>\n<p>Compile seu plugin com o <code>npm start<\/code>comando e vamos ver o que acontece:<\/p>\n<p>Compilando o c\u00f3digo com o novo ponto de entrada<\/p>\n<p>O script agora gera alguns novos arquivos para n\u00f3s:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 Este arquivo PHP \u00e9 gerado automaticamente quando a <code>\/src<\/code>pasta \u00e9 compilada. Ele cont\u00e9m uma matriz de todas as dec\u00eancias JavaScript do Editor do WordPress (Gutenberg) usadas pelo seu novo ponto de entrada. Ele \u00e9 enfileirado por meio do <code>wholesome-plugin.php<\/code>arquivo do carregador principal por meio da fun\u00e7\u00e3o adicional que implementamos.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 Este \u00e9 o arquivo CSS do administrador e \u00e9 enfileirado por meio do <code>wholesome-plugin.php<\/code>arquivo do carregador principal por meio da fun\u00e7\u00e3o adicional que implementamos.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 Este \u00e9 o arquivo JavaScript compilado principal e \u00e9 enfileirado por meio do <code>wholesome-plugin.php<\/code>arquivo do carregador principal por meio da fun\u00e7\u00e3o adicional que implementamos.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 Este arquivo \u00e9 gerado apenas quando voc\u00ea est\u00e1 compilando os ativos para o modo de desenvolvimento (IE voc\u00ea executa <code>npm start<\/code>e n\u00e3o <code>npm build<\/code>quando voc\u00ea est\u00e1 compilando seus ativos. \u00c9 um arquivo \u00fatil para depuradores para ajudar a identificar nomes de arquivos e n\u00fameros de linha no CSS se ocorrerem erros.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 Este arquivo \u00e9 gerado apenas quando voc\u00ea est\u00e1 compilando os ativos para o modo de desenvolvimento (IE voc\u00ea executa <code>npm start<\/code>e n\u00e3o <code>npm build<\/code>quando voc\u00ea est\u00e1 compilando seus ativos. \u00c9 um arquivo \u00fatil para depuradores JavaScript para ajudar a identificar nomes de arquivos e n\u00fameros de linha se ocorrerem erros.<\/p>\n<\/li>\n<li>\n<p>Veja 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 post em blocos Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Veja como usar <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">op\u00e7\u00f5es e configura\u00e7\u00f5es em blocos Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Veja como criar <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">meta caixas personalizadas em Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Veja como criar uma <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de op\u00e7\u00f5es e configura\u00e7\u00f5es usando componentes do Gutenberg<\/a><\/p>\n<\/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>Quando voc\u00ea cria um bloco pela primeira vez com o script de cria\u00e7\u00e3o de bloco do WordPress usando npm init @wordpress\/block, ele fornece um ponto de entrada para \/src\/index.js, que voc\u00ea pode usar para comp&#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,753,722,920,785,846],"tags":[1170],"class_list":["post-228883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-codigo-aberto","category-desenvolvedor","category-outro","category-software-livre","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228883","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=228883"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228883\/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=228883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}