{"id":228685,"date":"2022-10-14T10:46:00","date_gmt":"2022-10-14T07:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228685"},"modified":"2022-11-09T03:49:49","modified_gmt":"2022-11-09T00:49:49","slug":"yleiskatsaus-wordpressin-luomislohkokomentosarjasta","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/yleiskatsaus-wordpressin-luomislohkokomentosarjasta\/","title":{"rendered":"Yleiskatsaus WordPressin luomislohkokomentosarjasta"},"content":{"rendered":"\n<p>Virallinen WordPress Editor (Gutenberg) -tiimi on tarjonnut <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sinulle siistin pienen skriptin, jonka avulla voit luoda lohkolaajennuksen<\/a> heid\u00e4n <code>@wordpress\/create-block<\/code>npm-skriptill\u00e4\u00e4n.<\/p>\n<p>T\u00e4m\u00e4 artikkeli antaa yleiskatsauksen WordPressin luomislohkokomentosarjasta sek\u00e4 sen tuottamia tietoja.<\/p>\n<p><strong>HUOMAUTUS: 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<h2>Luo lohkokomentosarjan suorittaminen<\/h2>\n<p>Virallinen dokumentaatio antaa sinulle muutamia erilaisia \u200b\u200bparametreja, jotka siirret\u00e4\u00e4n <code>npm init @wordpress\/block<\/code>komentoon.<\/p>\n<p>Asetuksissani suoritin sen interaktiivisessa tilassa j\u00e4tt\u00e4m\u00e4ll\u00e4 pois parametrit. Kirjoitin seuraavan komennon p\u00e4\u00e4tteeseeni (kun <code>cd<\/code>edin <code>wp-content\/plugins<\/code>kansioon):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>K\u00e4sikirjoitus kysyi minulta muutaman kysymyksen auttaakseen minua rakentamaan lohkoni.<\/p>\n<p>Haluan luoda aloituslohkon plugin-idealle, joka minulla on (&#8217;Wholesome Notes&#8217;), vastasin kysymyksiin seuraavasti:<\/p>\n<ul>\n<li>\n<p><strong>Tunnistamiseen k\u00e4ytetty lohkoslug (my\u00f6s liit\u00e4nn\u00e4inen ja tuloskansion nimi):<\/strong> Haluan, ett\u00e4 lohkoani kutsutaan nimell\u00e4 <code>Wholesome Notes<\/code>, joten kirjoitin <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Lohkon nimen sis\u00e4inen nimiavaruus (jotain ainutlaatuista tuotteillesi):<\/strong> T\u00e4m\u00e4n pit\u00e4isi olla yksil\u00f6llinen kaikille sy\u00f6tt\u00e4milleni tuotteille <code>wholesome-code<\/code>, koska t\u00e4m\u00e4 on yritykseni nimi. J\u00e4lkik\u00e4teen ajateltuna t\u00e4m\u00e4 olisi parempi oikosulussa <code>wc<\/code>tai <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Lohkosi n\u00e4ytt\u00f6otsikko:<\/strong> Kirjoitin laajennuksen otsikon, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>Yleiskatsaus WordPress Create Block Script En ollut 100% varma, mit\u00e4 halusin kirjoittaa t\u00e4nne, joten kirjoitin vain teksti\u00e4, jota aion muuttaa my\u00f6hemmin.<\/p>\n<\/li>\n<li>\n<p><strong>Dashicon, joka helpottaa lohkosi tunnistamista (valinnainen):<\/strong> <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Dashicons -resurssin<\/a> nopeasti esille tuodaessa valitsin sen, <code>admin-comments<\/code>koska siin\u00e4 on muistiinpanotyylikuvake.<\/p>\n<\/li>\n<li>\n<p><strong>Kategorian nimi, joka auttaa k\u00e4ytt\u00e4ji\u00e4 selaamaan ja l\u00f6yt\u00e4m\u00e4\u00e4n lohkosi (k\u00e4yt\u00e4 nuolin\u00e4pp\u00e4imi\u00e4):<\/strong> Valitsin <code>layout<\/code>, vaikka rehellisesti sanottuna t\u00e4m\u00e4ntyyppinen lohko tarvitsee luultavasti oman kategoriansa. Se on asia, jota voin muuttaa my\u00f6hemmin.<\/p>\n<\/li>\n<\/ul>\n<p>Juoksemassa<code>npm init @wordpress\/block<\/code><\/p>\n<p>Komentosarja meni sitten eteenp\u00e4in ja asensi kaikki tarvitsemansa riippuvuudet npm:n kautta (t\u00e4ss\u00e4 vaiheessa se vain asentaa <code>wp-scripts<\/code>npm-paketin riippuvuutena).<\/p>\n<h2>Ulostulon tarkastus<\/h2>\n<p>Yll\u00e4 olevilla komennoilla WordPress Create Block Script antaa sinulle seuraavan tulosteen:<\/p>\n<ul>\n<li>terveellisi\u00e4 muistiinpanoja\n<ul>\n<li>rakentaa\n<ul>\n<li>index.asset.php<\/li>\n<li>index.js<\/li>\n<li>index.js.map<\/li>\n<\/ul>\n<\/li>\n<li>solmu_moduulit<\/li>\n<li>src\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignore<\/li>\n<li>editor.css<\/li>\n<li>package.json<\/li>\n<li>tyyli.css<\/li>\n<li>terveellinen-notes.php<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e80786cc626.png\" alt=\"Yleiskatsaus WordPressin luomislohkokomentosarjasta\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/block output<\/p>\n<p>Seuraavassa on erittely kustakin n\u00e4ist\u00e4 tiedostoista ja kansioista.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>T\u00e4m\u00e4 on laajennuksen juurikansio, sill\u00e4 on sama nimi kuin se, jonka annoin &#8217;slug&#8217;:lle asennuskysymyksiss\u00e4.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>T\u00e4m\u00e4 on koontikansio. Se sis\u00e4lt\u00e4\u00e4 kaikki <code>\/src<\/code>kansiosta luodut JavaScript- ja PHP-resurssit. N\u00e4m\u00e4 asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>T\u00e4m\u00e4 PHP-tiedosto luodaan automaattisesti, kun <code>\/src<\/code>kansio k\u00e4\u00e4nnet\u00e4\u00e4n. Se sis\u00e4lt\u00e4\u00e4 joukon kaikkia laajennuksen k\u00e4ytt\u00e4mi\u00e4 WordPress Editorin (Gutenberg) JavaScript-syvyyksi\u00e4. Se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>T\u00e4m\u00e4 on t\u00e4rkein k\u00e4\u00e4nnetty JavaScript-tiedosto, ja se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>T\u00e4m\u00e4 tiedosto luodaan vain, kun k\u00e4\u00e4nn\u00e4t resursseja kehitystilaa varten (IE k\u00e4yt\u00e4t, <code>npm start<\/code>etk\u00e4 <code>npm run build<\/code>k\u00e4\u00e4nnett\u00e4ess\u00e4si resursseja. Se on hy\u00f6dyllinen tiedosto JavaScript-virheenkorjajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot virheiden sattuessa.<\/p>\n<p><code>\/node_modules<\/code><\/p>\n<p>T\u00e4m\u00e4 on kansio, johon kaikki laajennuksen JavaScript-riippuvuudet on asennettu.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>T\u00e4m\u00e4 on kansio, joka sis\u00e4lt\u00e4\u00e4 kaikki liit\u00e4nn\u00e4isesi k\u00e4\u00e4nt\u00e4m\u00e4tt\u00f6m\u00e4t resurssit.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>T\u00e4m\u00e4 on t\u00e4rkein k\u00e4\u00e4nt\u00e4m\u00e4t\u00f6n JavaScript-tiedosto WordPress Editor (Gutenberg) -lohkollesi. Se sis\u00e4lt\u00e4\u00e4 aluksi kaiken lohkon logiikan.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>T\u00e4m\u00e4 tiedosto sis\u00e4lt\u00e4\u00e4 hy\u00f6dyllisi\u00e4 esiasetuksia IDE:lle (Integrated Development Environment), kuten Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>T\u00e4m\u00e4 tiedosto k\u00e4skee giti\u00e4 ohittamaan tietyt tiedostot, kun sitoudut git-tietovarastoon (kuten GitHubiin).<\/p>\n<p><code>\/editor.css<\/code><\/p>\n<p>T\u00e4m\u00e4n tiedoston tyylit tulostetaan vain editorissa, se asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>T\u00e4m\u00e4 tiedosto sis\u00e4lt\u00e4\u00e4 kaikki laajennuksen npm-riippuvuudet ja komennot, jotka voit suorittaa. Huomaa, ett\u00e4 laajennus k\u00e4ytt\u00e4\u00e4 <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) pohjanaan, joten alun perin ladatut riippuvuudet ovat t\u00e4lle paketille.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>T\u00e4m\u00e4n tiedoston tyylit tulostetaan editorissa ja sivuston etup\u00e4\u00e4ss\u00e4 ne asetetaan jonoon p\u00e4\u00e4lataustiedoston kautta <code>wholesome-notes.php<\/code>.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>T\u00e4m\u00e4 on laajennuksen p\u00e4\u00e4lataustiedosto. Sen nimi asetettiin &quot;slugin&quot; kautta, jonka sy\u00f6timme alkuper\u00e4iseen asennusohjelmaan. Se asettaa jonoon kaikki laajennuksen tarvitsemat JavaScript-omaisuudet.<\/p>\n<h2>Pluginin tutkiminen<\/h2>\n<p>Kun olet luonut laajennuksen, aktivoit sen ja lis\u00e4\u00e4t sen editoriin, se n\u00e4ytt\u00e4\u00e4 seuraavilta kuvakaappauksilta (etuosa ja tausta).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"Yleiskatsaus WordPressin luomislohkokomentosarjasta\" \/>Luo lohkokomentosarja \u2013 oletusk\u00e4ytt\u00f6liittym\u00e4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"Yleiskatsaus WordPressin luomislohkokomentosarjasta\" \/>Luo lohkokomentosarja \u2013 oletustakaosa<\/p>\n<p>Kuten n\u00e4ette, lohko tarjoaa meille perustulosteen, jota voimme helposti muokata toteuttamaan oman lohkomme.<\/p>\n<h3>Est\u00e4 CSS<\/h3>\n<p>Kuten kuvakaappauksista n\u00e4et, esimerkkikoodi <code>editor.css<\/code>sovelluksessa toteuttaa red boarderin editorissa, kun taas esimerkkityylej\u00e4 <code>styles.css<\/code>sovelletaan sek\u00e4 etu- ett\u00e4 taustaj\u00e4rjestelm\u00e4\u00e4n.<\/p>\n<h3>Est\u00e4 JavaScript<\/h3>\n<p>Aloituskohta juuri luodun lohkon mukauttamiseen on <code>\/src\/index.js<\/code>tiedosto.<\/p>\n<p>T\u00e4ss\u00e4 tiedostossa on runsaasti sis\u00e4ist\u00e4 dokumentaatiota, joka selitt\u00e4\u00e4, miksi tiettyj\u00e4 toimintoja tuodaan, kuten <code>registerBlockType<\/code>lohkon rekister\u00f6inti\u00e4 ja <code>__<\/code>i18n-tekstin k\u00e4\u00e4nn\u00f6stukea varten.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"Yleiskatsaus WordPressin luomislohkokomentosarjasta\" \/>Luo Block index.js upotetut kommentit<\/p>\n<p>Se tarjoaa my\u00f6s joitain hyvin perusl\u00e4ht\u00f6j\u00e4 <code>edit<\/code>ja <code>save<\/code>funktioille, jotka siirret\u00e4\u00e4n lohkorekister\u00f6intiin.<\/p>\n<p><strong>Huomautus:<\/strong> Skriptin my\u00f6hemmiss\u00e4 versioissa ne on purettu omiin tiedostoihinsa ja sis\u00e4llytetty moduuleina t\u00e4h\u00e4n tiedostoon.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"Yleiskatsaus WordPressin luomislohkokomentosarjasta\" \/>Luo Block index.js Muokkaa ja tallenna<\/p>\n<h2>Blockin rakentaminen<\/h2>\n<p>Luontilohkon <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">npm-dokumentaation<\/a> mukaan voit k\u00e4ytt\u00e4\u00e4 useita komentoja p\u00e4\u00e4tteess\u00e4si (laajennuksen juurikansiosta) esimerkiksi koodin laadun tarkistamiseen tai pakettien p\u00e4ivitt\u00e4miseen.<\/p>\n<p>T\u00e4rkeimm\u00e4t komennot, joita tarvitset lohkon rakentamiseen, ovat <code>npm start<\/code>laajennuksen k\u00e4\u00e4nt\u00e4minen kehityst\u00e4 varten ja <code>npm run build<\/code>lopullisen version k\u00e4\u00e4nt\u00e4minen.<\/p>\n<p><code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>npm-paketista) on laajennuksen p\u00e4\u00e4asiallinen riippuvuus. T\u00e4m\u00e4 riippuvuus tiivist\u00e4\u00e4 kaikki lohkosi ty\u00f6kalut, joten voit keskitty\u00e4 JavaScriptin rakentamiseen.<\/p>\n<p>Kulissien takana kokoaa kaikki resurssit <code>wp-scripts<\/code>tiedostoon .<code>webpack``\/build\/index.js<\/code><\/p>\n<p>Voit lukea lis\u00e4\u00e4 <code>wp-scripts<\/code>Lohkoeditorin <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00e4sikirjasta<\/a> ja lis\u00e4tietoja verkkopaketin koontim\u00e4\u00e4rityksest\u00e4 <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00e4sikirjan &quot;JavaScript Build Setup&quot; -osiosta.<\/a><\/p>\n<h3>Luo lohkon verkkopaketin asennuksen laajentaminen<\/h3>\n<p>Lohkosi koodikanta voi kattaa useita tiedostoja tai jopa sis\u00e4lt\u00e4\u00e4 useita alilohkoja tai sis\u00e4lt\u00e4\u00e4 monimutkaisia \u200b\u200btyylej\u00e4. T\u00e4llaisina aikoina saatat haluta laajentaa verkkopaketin asetuksia, jotka on sis\u00e4\u00e4nrakennettu <code>wp-scripts<\/code>.<\/p>\n<p>Lis\u00e4tietoja on artikkelissani <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">verkkopaketin m\u00e4\u00e4rityksen<\/a> <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">laajentamisesta<code>wp-scripts<\/code><\/a> tai lohkoeditorin <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00e4sikirjan Package Scripts -osiosta<\/a>.<\/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>Virallinen WordPress Editor (Gutenberg) -tiimi on tarjonnut sinulle siistin pienen skriptin, jonka avulla voit luoda lohkolaajennuksen @wordpress\/create-block npm-skriptill\u00e4.T\u00e4m\u00e4 artikkeli tarjoaa&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,843,864],"tags":[1166],"class_list":["post-228685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228685","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=228685"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228685\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}