{"id":228724,"date":"2022-10-15T15:57:00","date_gmt":"2022-10-15T12:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228724"},"modified":"2022-11-09T04:01:40","modified_gmt":"2022-11-09T01:01:40","slug":"sassin-kaeaentaeminen-useille-lohkoille-verkkopaketin-config-avulla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/sassin-kaeaentaeminen-useille-lohkoille-verkkopaketin-config-avulla\/","title":{"rendered":"Sassin k\u00e4\u00e4nt\u00e4minen useille lohkoille verkkopaketin Config avulla"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>T\u00e4m\u00e4 artikkeli n\u00e4ytt\u00e4\u00e4 esimerkin Sass-tiedostojen k\u00e4yt\u00f6st\u00e4, jotka m\u00e4\u00e4ritimme artikkelissa <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressin Luo Block Script -verkkopaketin kokoonpanon laajentaminen<\/a> useilla lohkoilla saman laajennuksen sis\u00e4ll\u00e4. Jos et ole lukenut t\u00e4t\u00e4 artikkelia, lue se ensin.<\/p>\n<p><strong>T\u00e4m\u00e4 artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota<\/strong><\/p>\n<p>Vaikka teoriaa voidaan edelleen soveltaa, jotkin t\u00e4m\u00e4n artikkelin tiedoista eiv\u00e4t ehk\u00e4 ole en\u00e4\u00e4 yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tarkastella p\u00e4ivitetty\u00e4 Luo Block Script -oppaamme t\u00e4\u00e4lt\u00e4<\/a>.<\/p>\n<p>Meill\u00e4 on my\u00f6s p\u00e4ivitetty opas <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lis\u00e4tulopisteiden lis\u00e4\u00e4misest\u00e4 verkkopakettiin,<\/a> jotta voit luoda useita CSS-tiedostoja.<\/p>\n<h2>Useiden lohkojen m\u00e4\u00e4ritt\u00e4minen<\/h2>\n<p>Kuten mainitsin edellisess\u00e4 artikkelissa, Sass-tuontien lis\u00e4\u00e4minen laajennuksen hakemistoon antaa meille mahdollisuuden m\u00e4\u00e4ritt\u00e4\u00e4 laajennuksen sis\u00e4ll\u00e4 useita lohkoja, joista jokaisella on omat <code>editor.scss<\/code>tiedostonsa <code>style.scss<\/code>.<\/p>\n<p>Asentamamme verkkopaketin konfiguraatio ottaa <code>editor.scss<\/code>ja <code>style.scss<\/code>-tiedostot jokaiselle lohkolle ja kokoaa ne laajennuksen juuressa oleviin <code>\/editor.css<\/code>ja tiedostoihin.<code>\/style.css<\/code><\/p>\n<p>Voit kokeilla t\u00e4t\u00e4 siirt\u00e4m\u00e4ll\u00e4 tiedostot <code>\/src\/index.js<\/code>ja <code>\/src\/scss<\/code>-tiedostot ja kansiot -kansioon ja <code>\/src\/blocks\/block-one<\/code>kopioimalla sitten t\u00e4m\u00e4n lohkon kansioon <code>\/src\/blocks\/block-two<\/code>. Luo lopuksi uusi tiedosto osoitteessa <code>\/src\/index.js<\/code>.<\/p>\n<p>Sinulla pit\u00e4isi nyt olla seuraava tiedostorakenne:<\/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>Sitten tehd\u00e4\u00e4n pieni\u00e4 muutoksia, <code>\/block-two<\/code>jotta se rekister\u00f6id\u00e4\u00e4n yksil\u00f6iv\u00e4ksi lohkoksi. Muuta vain seuraava <code>\/src\/blocks\/block-two\/index.js<\/code>tiedoston rivi:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>vastaanottajalle:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>ja muuta tiedoston nimi nimest\u00e4 <code>Wholesome Notes<\/code>:<code>Wholesome Notes 2<\/code><\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Sassin muuttaminen<\/h2>\n<p>Sis\u00e4\u00e4n <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>ja <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>tee joitain pieni\u00e4 muutoksia, jotta voimme tunnistaa muutokset koottuissa tiedostoissa.<\/p>\n<p>\u00c4l\u00e4 my\u00f6sk\u00e4\u00e4n unohda muuttaa n\u00e4iden tiedostojen luokkia k\u00e4ytt\u00e4m\u00e4\u00e4n uutta nimiavaruutta <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>T\u00e4ss\u00e4 tekem\u00e4ni muutokset:<\/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>Ei mit\u00e4\u00e4n mahtavaa, vaihdoin vain muutaman v\u00e4rin.<\/p>\n<h2>Hakemistotiedoston m\u00e4\u00e4ritt\u00e4minen<\/h2>\n<p>Nyt voidaan muokata tiedostoa osoitteessa <code>\/src\/blocks\/index.js<\/code>. Meid\u00e4n tarvitsee vain tuoda kaksi luomamme lohkoa:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Tulosten katselu<\/h2>\n<p>Suoritetaan nyt <code>npm start<\/code>ja tarkastellaan tulostettujen tiedostojen tuloksia.<\/p>\n<p>Tiedosto <code>\/editor.css<\/code>n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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><code>editor.scss<\/code>Katso, kuinka liit\u00e4nn\u00e4isen kunkin lohkon tiedostojen Sass on k\u00e4\u00e4nnetty t\u00e4h\u00e4n yhteen <code>\/editor.css<\/code>tiedostoon.<\/p>\n<p>Katsotaan nyt <code>\/style.css<\/code>tiedostoa:<\/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>Voit n\u00e4hd\u00e4, ett\u00e4 <code>style.scss<\/code>liit\u00e4nn\u00e4isen jokaisen lohkon tiedostot on k\u00e4\u00e4nnetty t\u00e4h\u00e4n yhteen <code>\/style.css<\/code>tiedostoon.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4m\u00e4 artikkeli n\u00e4ytt\u00e4\u00e4 esimerkin Sass-tiedostojen k\u00e4yt\u00f6st\u00e4, jotka m\u00e4\u00e4ritimme artikkelissa WordPressin Luo Block Script -verkkopaketin kokoonpanon laajentaminen useilla lohkoilla samassa&#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":[719,917,843],"tags":[1166],"class_list":["post-228724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228724"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228724\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}