{"id":228619,"date":"2022-10-15T16:12:00","date_gmt":"2022-10-15T13:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228619"},"modified":"2022-11-09T03:18:20","modified_gmt":"2022-11-09T00:18:20","slug":"compilando-sass-para-varios-blocos-com-a-configuracao-do-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/compilando-sass-para-varios-blocos-com-a-configuracao-do-webpack\/","title":{"rendered":"Compilando Sass para v\u00e1rios blocos com a configura\u00e7\u00e3o do webpack"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Este artigo mostra um exemplo de como usar os arquivos Sass que configuramos no artigo <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Estendendo a configura\u00e7\u00e3o do webpack do WordPress Create Block Script<\/a> com v\u00e1rios blocos dentro do mesmo plugin. Se voc\u00ea n\u00e3o leu esse artigo, leia-o primeiro.<\/p>\n<p><strong>Este artigo \u00e9 para uma vers\u00e3o mais antiga do Create Block Script<\/strong><\/p>\n<p>Embora a teoria ainda possa ser aplicada, algumas das informa\u00e7\u00f5es neste artigo podem n\u00e3o ser mais compat\u00edveis com o script de bloco de cria\u00e7\u00e3o mais recente. Voc\u00ea pode <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ver nosso guia de script de cria\u00e7\u00e3o de bloco atualizado aqui<\/a>.<\/p>\n<p>Tamb\u00e9m temos um guia atualizado sobre como <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicionar pontos de entrada adicionais ao webpack<\/a> para que voc\u00ea possa gerar v\u00e1rios arquivos CSS.<\/p>\n<h2>Configurando v\u00e1rios blocos<\/h2>\n<p>Como mencionei no artigo anterior, adicionar as importa\u00e7\u00f5es Sass ao \u00edndice do plugin nos permite definir v\u00e1rios blocos dentro do plugin, cada um com seus pr\u00f3prios <code>editor.scss<\/code>e <code>style.scss<\/code>arquivos.<\/p>\n<p>A configura\u00e7\u00e3o do webpack que configuramos pegar\u00e1 os arquivos <code>editor.scss<\/code>e <code>style.scss<\/code>para cada bloco e os compilar\u00e1 nos arquivos <code>\/editor.css<\/code>e <code>\/style.css<\/code>na raiz do plug-in.<\/p>\n<p>Para experimentar isso, vamos mover os arquivos <code>\/src\/index.js<\/code>e <code>\/src\/scss<\/code>pastas e para <code>\/src\/blocks\/block-one<\/code>, depois copie este bloco para <code>\/src\/blocks\/block-two<\/code>. Por fim, crie um novo arquivo em <code>\/src\/index.js<\/code>.<\/p>\n<p>Agora voc\u00ea deve ter a seguinte estrutura de arquivos:<\/p>\n<ul>\n<li>\n<p><code>\/src<\/code><\/p>\n<ul>\n<li>\n<p><code>\/blocks<\/code><\/p>\n<ul>\n<li>\n<p><code>\/block-one<\/code><\/p>\n<ul>\n<li>\n<p><code>\/scss<\/code><\/p>\n<ul>\n<li><code>\/editor.scss<\/code><\/li>\n<li><code>\/style.scss<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>\/block-two\/<\/code><\/p>\n<ul>\n<li><code>\/scss<\/code>\n<ul>\n<li><code>\/editor.scss<\/code><\/li>\n<li><code>\/style.scss<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Ent\u00e3o vamos fazer algumas pequenas altera\u00e7\u00f5es para <code>\/block-two<\/code>que ele seja registrado como um bloco \u00fanico. Basta alterar a seguinte linha no <code>\/src\/blocks\/block-two\/index.js<\/code>arquivo de:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>para:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>e altere o nome do arquivo de <code>Wholesome Notes<\/code>para <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Alterando o Sass<\/h2>\n<p>In <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>e <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>fa\u00e7a algumas pequenas altera\u00e7\u00f5es, para que reconhe\u00e7amos as altera\u00e7\u00f5es nos arquivos compilados.<\/p>\n<p>Al\u00e9m disso, n\u00e3o vamos esquecer de alterar as classes nesses arquivos para usar o novo namespace <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>Seguem as altera\u00e7\u00f5es que fiz:<\/p>\n<p><code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code><\/p>\n<pre><code>.wp-block-wcltd-wholesome-notes-2 {\n    border: 1px dotted #0f0;\n}\n<\/code><\/pre>\n<p><code>\/src\/blocks\/block-two\/scss\/style.scss<\/code><\/p>\n<pre><code>.wp-block-wcltd-wholesome-notes-2 {\n    background-color: #fff;\n    color: #000;\n    padding: 2px;\n}\n<\/code><\/pre>\n<p>Nada grandioso, apenas mudei algumas cores alteradas.<\/p>\n<h2>Configurando o arquivo de \u00edndice<\/h2>\n<p>Agora vamos editar o arquivo em <code>\/src\/blocks\/index.js<\/code>. S\u00f3 precisamos importar os dois blocos que criamos:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Visualizando os Resultados<\/h2>\n<p>Agora vamos executar <code>npm start<\/code>e visualizar os resultados dos arquivos de sa\u00edda.<\/p>\n<p>O <code>\/editor.css<\/code>arquivo fica assim:<\/p>\n<pre><code>\n.wp-block-wcltd-wholesome-notes {\n  border: 1px dotted #f00; }\n\n.wp-block-wcltd-wholesome-notes-2 {\n  border: 1px dotted #0f0; }\n<\/code><\/pre>\n<p>Veja como o Sass dos <code>editor.scss<\/code>arquivos de cada bloco dentro do plugin foi compilado neste \u00fanico <code>\/editor.css<\/code>arquivo.<\/p>\n<p>Agora vamos ver o <code>\/style.css<\/code>arquivo:<\/p>\n<pre><code>\n.wp-block-wcltd-wholesome-notes {\n  background-color: #000;\n  color: #fff;\n  padding: 2px; }\n\n.wp-block-wcltd-wholesome-notes-2 {\n  background-color: #fff;\n  color: #000;\n  padding: 2px; }\n<\/code><\/pre>\n<p>Voc\u00ea pode ver que os <code>style.scss<\/code>arquivos de cada bloco dentro do plugin foram compilados neste \u00fanico <code>\/style.css<\/code>arquivo.<\/p>\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>Este artigo mostra um exemplo de como usar os arquivos Sass que configuramos no artigo Estendendo a configura\u00e7\u00e3o do webpack do WordPress Create Block Script com v\u00e1rios blocos dentro do mesmo p&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224105,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[722,920,846],"tags":[1170],"class_list":["post-228619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-outro","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228619","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=228619"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}