{"id":228997,"date":"2022-10-15T15:37:00","date_gmt":"2022-10-15T12:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228997"},"modified":"2022-11-09T05:07:11","modified_gmt":"2022-11-09T02:07:11","slug":"compilazione-di-sass-per-blocchi-multipli-con-il-webpack-config","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/compilazione-di-sass-per-blocchi-multipli-con-il-webpack-config\/","title":{"rendered":"Compilazione di Sass per blocchi multipli con il webpack Config"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Questo articolo mostra un esempio di come utilizzare i file Sass che abbiamo configurato nell&#8217;articolo <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Estendere la configurazione del webpack di WordPress Create Block Script<\/a> con pi\u00f9 blocchi all&#8217;interno dello stesso plugin. Se non hai letto quell&#8217;articolo, per favore leggilo prima.<\/p>\n<p><strong>Questo articolo \u00e8 per una versione precedente di Crea script di blocco<\/strong><\/p>\n<p>Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere pi\u00f9 compatibili con l&#8217;ultimo script create block. \u00c8 possibile <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui<\/a>.<\/p>\n<p>Abbiamo anche una guida aggiornata <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sull&#8217;aggiunta di punti di ingresso aggiuntivi al webpack in<\/a> modo da poter generare pi\u00f9 file CSS.<\/p>\n<h2>Configurazione di pi\u00f9 blocchi<\/h2>\n<p>Come ho accennato nell&#8217;articolo precedente, l&#8217;aggiunta delle importazioni Sass all&#8217;indice del plugin ci permette di definire pi\u00f9 blocchi all&#8217;interno del plugin, ognuno con i propri <code>editor.scss<\/code>e <code>style.scss<\/code>file.<\/p>\n<p>La configurazione del webpack che abbiamo impostato prender\u00e0 i file <code>editor.scss<\/code>e <code>style.scss<\/code>per ogni blocco e lo compiler\u00e0 nei file <code>\/editor.css<\/code>e <code>\/style.css<\/code>nella radice del plugin.<\/p>\n<p>Per provarlo, spostiamo i file <code>\/src\/index.js<\/code>e e le <code>\/src\/scss<\/code>cartelle in <code>\/src\/blocks\/block-one<\/code>, quindi copiamo questo blocco in <code>\/src\/blocks\/block-two<\/code>. Infine crea un nuovo file in <code>\/src\/index.js<\/code>.<\/p>\n<p>Ora dovresti avere la seguente struttura di file:<\/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>Quindi apportiamo alcune modifiche minori in <code>\/block-two<\/code>modo che sia registrato come blocco univoco. Modifica semplicemente la seguente riga nel <code>\/src\/blocks\/block-two\/index.js<\/code>file da:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>a:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>e cambia il nome del file da <code>Wholesome Notes<\/code>a <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Alterare il Sass<\/h2>\n<p>In <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>e <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>apportare alcune modifiche minori, in modo da riconoscere le modifiche nei file compilati.<\/p>\n<p>Inoltre, non dimentichiamo di modificare le classi in quei file per utilizzare il nuovo spazio dei nomi <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>Ecco le modifiche che ho apportato:<\/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>Niente di grandioso, ho solo cambiato alcuni colori cambiati.<\/p>\n<h2>Configurazione del file indice<\/h2>\n<p>Ora modifichiamo il file in <code>\/src\/blocks\/index.js<\/code>. Non ci resta che importare i due blocchi che abbiamo creato:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Visualizzazione dei risultati<\/h2>\n<p>Ora eseguiamo <code>npm start<\/code>e vediamo i risultati dei file prodotti.<\/p>\n<p>Il <code>\/editor.css<\/code>file si presenta cos\u00ec:<\/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>Guarda come i Sass dai <code>editor.scss<\/code>file di ogni blocco all&#8217;interno del plugin sono stati compilati in questo singolo <code>\/editor.css<\/code>file.<\/p>\n<p>Ora diamo un&#8217;occhiata al <code>\/style.css<\/code>file:<\/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>Puoi vedere che i <code>style.scss<\/code>file di ogni blocco all&#8217;interno del plugin sono stati compilati in questo singolo <code>\/style.css<\/code>file.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Questo articolo mostra un esempio di come utilizzare i file Sass che abbiamo configurato nell&#8217;articolo Estendere la configurazione del webpack WordPress Create Block Script con pi\u00f9 blocchi all&#8217;interno dello stesso 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":[918,720,844],"tags":[1168],"class_list":["post-228997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=228997"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228997\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}