{"id":233531,"date":"2023-02-16T13:45:00","date_gmt":"2023-02-16T10:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233531"},"modified":"2022-11-11T00:11:59","modified_gmt":"2022-11-10T21:11:59","slug":"luo-mukautettu-gutenberg-lohko-osa-1-kehitysympaeristoen-maeaerittaeminen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-1-kehitysympaeristoen-maeaerittaeminen\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko – Osa 1: Kehitysymp\u00e4rist\u00f6n m\u00e4\u00e4ritt\u00e4minen"},"content":{"rendered":"\n

T\u00e4m\u00e4n opetussarjan ensimm\u00e4isess\u00e4 osassa, kuinka luodaan mukautettuja Gutenberg-lohkoja, meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 kehitysymp\u00e4rist\u00f6mme. Tarvitsemme paikan, johon voimme kirjoittaa koodimme ES6\/ESNext-syntakseihin ja k\u00e4\u00e4nt\u00e4\u00e4 sen liikkeell\u00e4 ollessamme. On mahdollista kirjoittaa mukautettuja Gutenberg-lohkoja k\u00e4ytt\u00e4m\u00e4ll\u00e4 ES5-syntaksia ilman Webpackin ja Babelin m\u00e4\u00e4ritt\u00e4mist\u00e4. Mutta koodin lukeminen ja kirjoittaminen on todella hankalaa. Jos et ole varma, miksi meid\u00e4n on teht\u00e4v\u00e4 t\u00e4m\u00e4 kaikki tai mik\u00e4 ero on, lue t\u00e4t\u00e4 selitt\u00e4v\u00e4 viestini<\/a>. Voin taata, ett\u00e4 kun palaat takaisin, olet vakuuttunut ottamaan t\u00e4m\u00e4n ylim\u00e4\u00e4r\u00e4isen askeleen kirjoittaaksesi paremman koodin.<\/p>\n

Oletan, ett\u00e4 sinulla on jo paikallinen WordPress, joka toimii LAMP-pinossa tai vastaavassa. Ja ett\u00e4 kirjoitat joko teemaa tai laajennusta. Mit\u00e4 tulee minuun, laitan koodini kehitt\u00e4m\u00e4\u00e4ni teemaan awp-starter-theme<\/code>, joka sijaitsee WordPress-teemakansiossani. Haluan erottaa Gutenberg-kehitykseni kaikista muista teematiedostoista, joten luon alihakemiston gutenberg-dev<\/code>teemani juurikansioon. Se on projektikansioni ja kansio, johon viittaan opetusohjelmasarjan loppuosassa.<\/p>\n

Olen jo kirjoittanut yksityiskohtaisen oppaan kehitysymp\u00e4rist\u00f6n m\u00e4\u00e4ritt\u00e4misest\u00e4 Gutenbergille, joten k\u00e4yn t\u00e4ss\u00e4 nopeasti l\u00e4pi vaiheet. Jos et ole koskaan tehnyt t\u00e4t\u00e4 ennen, suosittelen lukemaan linkitetyn viestin alla, koska se sis\u00e4lt\u00e4\u00e4 enemm\u00e4n tietoa kuin mit\u00e4 l\u00f6yd\u00e4t t\u00e4\u00e4lt\u00e4!<\/p>\n

M\u00e4\u00e4rit\u00e4 projekti webpackilla<\/h2>\n

K\u00e4yt\u00e4 p\u00e4\u00e4tett\u00e4 (iOS-p\u00e4\u00e4te tai Windows cmd toimivat molemmat hyvin) navigoi projektikansioosi (minun tapauksessani awp-starter-theme\/gutenberg-dev<\/code>). Aloitamme uuden projektin pyyt\u00e4m\u00e4ll\u00e4 npm:\u00e4\u00e4 luomaan package.json<\/code>yleisen sis\u00e4ll\u00f6n.<\/p>\n

Luodaan pakettia.json<\/h3>\n
npm init -y<\/code><\/pre>\n
Seuraavaksi asensen WordPressin skriptej\u00e4, jotka auttavat meit\u00e4 paljon m\u00e4\u00e4rityksess\u00e4 t\u00e4ll\u00e4 komennolla (joka lis\u00e4\u00e4 alikansion node_modules<\/code>ja package-lock.json<\/code>my\u00f6s):<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Avaa package.json<\/code>projektikansiossasi oleva tiedosto editorissa ja etsi scripts<\/code>ominaisuus. Korvaamme sen kahdella skriptill\u00e4 juuri asentamastamme WordPress-paketista:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
"Build"-skripti kokoaa tiedostoni. Mutta koska se on ajettava manuaalisesti joka kerta kun muutos tehd\u00e4\u00e4n, k\u00e4yt\u00e4mme mieluummin "aloitus"-skripti\u00e4 kun kehit\u00e4mme. Se k\u00e4ynnist\u00e4\u00e4 sitten "katselutilan", jossa se kuuntelee mihin tahansa komentosarjatiedostoosi tehtyihin muutoksiin ja k\u00e4\u00e4nt\u00e4\u00e4 ne uudelleen aina, kun tallennat muutokset.<\/p>\n
Verkkopaketin konfigurointi<\/h3>\n
Seuraava vaihe on verkkopaketin m\u00e4\u00e4ritystiedoston luominen. Teen t\u00e4m\u00e4n, koska en halua k\u00e4ytt\u00e4\u00e4 oletusl\u00e4hdett\u00e4 ja tulosteen tiedostonimi\u00e4 ja kansioita. Haluan itse p\u00e4\u00e4tt\u00e4\u00e4, miss\u00e4 l\u00e4hdetiedostoni ovat ja mihin k\u00e4\u00e4nnetyt tiedostot p\u00e4\u00e4tyv\u00e4t.<\/p>\n
Asentamamme paketin avulla @wordpress\/scripts<\/code>voimme peri\u00e4 WordPressin verkkopaketin konfiguraation ja ohittaa vain ne osat, joita haluamme muuttaa.<\/p>\n
Luo projektikansioomme uusi tiedosto nimelt\u00e4 webpack.config.js<\/code>ja avaa se editorissa. Lis\u00e4\u00e4 t\u00e4m\u00e4 sis\u00e4lt\u00f6:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
T\u00e4m\u00e4 m\u00e4\u00e4ritt\u00e4\u00e4 sy\u00f6tt\u00f6tiedostoni (t\u00e4ll\u00e4 hetkell\u00e4 vain yhden) entry<\/code>omaisuuteen, joka sijaitsee src<\/code>projektikansioni alikansiossa nimelt\u00e4 block-awhitepixel-myfirstblock.js<\/code>. Nime\u00e4 tiedostosi luonnollisesti haluamallasi tavalla, mutta muista muuttaa sek\u00e4 avain ett\u00e4 arvo. Koska output<\/code>kiinteist\u00f6ss\u00e4 pyyd\u00e4n webpackia kokoamaan sy\u00f6tt\u00f6tiedostoni sy\u00f6tt\u00f6avaimella tiedostonimen\u00e4. Kiinteist\u00f6ss\u00e4 path<\/code>pyyd\u00e4n sijoittamaan kaikki k\u00e4\u00e4nnetyt tiedostot yhden askeleen p\u00e4\u00e4h\u00e4n projektikansiostani teeman assets\/js<\/code>kansioon. S\u00e4\u00e4d\u00e4 tiedostonimet ja sijainti projektiisi sopivaksi. Katso yksityiskohtainen opas<\/a>, jos olet h\u00e4mmentynyt.<\/p>\n
Luo src\/<\/code>projektikansioon alikansio, johon laitamme kaikki l\u00e4hdetiedostot. (S\u00e4\u00e4d\u00e4, jos vaihdoit entry<\/code>sijaintia kohdassa webpack.config.js<\/code>). Luo tiedosto block-awhitepixel-myfirstblock.js<\/code>t\u00e4h\u00e4n ja j\u00e4t\u00e4 se toistaiseksi tyhj\u00e4ksi.<\/p>\n
On viel\u00e4 yksi vaihe \u2013 ja t\u00e4m\u00e4 koskee meit\u00e4, jotka haluamme k\u00e4ytt\u00e4\u00e4 ESNextin uusimpia ominaisuuksia. WordPress Babel -oletuskokoonpanosta puuttuu t\u00e4m\u00e4 valitettavasti. Ja koska haluan k\u00e4ytt\u00e4\u00e4 toimintoja, kuten nuolitoimintoja, minun on m\u00e4\u00e4ritett\u00e4v\u00e4 my\u00f6s Babel.<\/p>\n
Asetetaan Babelia<\/h2>\n
Ensin meid\u00e4n on asennettava joitain paketteja Babel-kokoonpanollemme kirjoittamalla t\u00e4m\u00e4 komento:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Kun t\u00e4m\u00e4 on tehty, luo uusi tiedosto .babelrc<\/code>projektikansioomme. T\u00e4ss\u00e4 laitamme Babel-kokoonpanomme:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
Ja siin\u00e4 kaikki kehitysymp\u00e4rist\u00f6mme asetuksissa!<\/p>\n
Rakenna komentoja<\/h2>\n
Koko kehitt\u00e4misen aikana sinun on k\u00e4\u00e4nnett\u00e4v\u00e4 Javascript-tiedostosi. Lis\u00e4simme package.json<\/code>kaksi skripti\u00e4 juuri t\u00e4t\u00e4 varten.<\/p>\n
Aina kun haluamme kehitt\u00e4\u00e4 Javascript-tiedostojamme, suoritamme t\u00e4m\u00e4n terminaalissa:<\/p>\n
npm run build<\/code><\/pre>\n
T\u00e4m\u00e4 komento suorittaa k\u00e4\u00e4nn\u00f6ksen aina, kun suoritat t\u00e4m\u00e4n terminaalissa. Kokeile, ja sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 se luo tiedoston block-awhitepixel-myfirstblock.js<\/code>(yhdess\u00e4 yhden tai kahden muun "resurssitiedoston" kanssa) m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4si tulostuskansioon, jonka m\u00e4\u00e4ritit kohdassa webpack.config.js<\/code>. Minun tapauksessani se n\u00e4kyy awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
Yll\u00e4 olevan komennon k\u00e4ytt\u00e4minen toimii hyvin, mutta se on \u00e4rsytt\u00e4v\u00e4\u00e4 toistaa aina, kun teet muutoksia tiedostoihisi. Luultavasti mieluummin suoritat t\u00e4m\u00e4n komennon:<\/p>\n
npm run start<\/code><\/pre>\n
T\u00e4m\u00e4 asettaa p\u00e4\u00e4telaitteen "katselutilaan", havaitsee kaikki Javascript-tiedostoihisi tallennetut muutokset ja k\u00e4\u00e4nt\u00e4\u00e4 ne samalla kun menet. Aina kun tiedostosi sis\u00e4lt\u00e4v\u00e4t virheit\u00e4, p\u00e4\u00e4te l\u00e4hett\u00e4\u00e4 virheilmoitukset ulos. Paina CTRL + C pys\u00e4ytt\u00e4\u00e4ksesi kelloprosessin.<\/p>\n
\"Luo<\/a><\/p>\n
Viitteen\u00e4 projektikansioni n\u00e4ytt\u00e4\u00e4 nyt samalta kuin kuva. Erotan mieluummin kaikki konfigurointitiedostot ja erityisesti alikansion node_modules\/<\/code>(joka sis\u00e4lt\u00e4\u00e4 kirjaimellisesti kymmeni\u00e4 tuhansia tiedostoja) muusta teemakoodistani. Helpottaa ohituss\u00e4\u00e4nt\u00f6jen m\u00e4\u00e4ritt\u00e4mist\u00e4 \u2013 esimerkiksi SCSS-k\u00e4\u00e4nt\u00e4j\u00e4t tai git ignore. Olemme jo m\u00e4\u00e4ritt\u00e4neet verkkopaketin konfiguraation kokoamaan lopulliset tiedostot suoraan awp-starter-theme\/assets\/js\/<\/code>muiden Javascript-tiedostojen kanssa teemalleni.<\/p>\n
Olemme nyt valmiita seuraavaan osaan<\/a>, jossa aloitamme rekister\u00f6im\u00e4ll\u00e4 ensimm\u00e4isen mukautetun lohkomme.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4n opetussarjan ensimm\u00e4isess\u00e4 osassa, jossa kerrotaan, kuinka luoda mukautettuja WordPress Gutenberg -lohkoja, opimme m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n kehitysymp\u00e4rist\u00f6mme.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,938,938,895,813,1110,843,813,843,864,864],"tags":[1166],"class_list":{"0":"post-233531","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-gutenberg-5","11":"category-laajennuksia","12":"category-n-a","13":"category-opetusohjelmia","16":"category-wordpress-5","18":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233531","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=233531"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233531\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}