{"id":233543,"date":"2023-02-16T14:16:00","date_gmt":"2023-02-16T11:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233543"},"modified":"2022-11-11T00:15:52","modified_gmt":"2022-11-10T21:15:52","slug":"kohandatud-gutenbergi-ploki-loomine-1-osa-arenduskeskkonna-seadistamine","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-gutenbergi-ploki-loomine-1-osa-arenduskeskkonna-seadistamine\/","title":{"rendered":"Kohandatud Gutenbergi ploki loomine \u2013 1. osa: arenduskeskkonna seadistamine"},"content":{"rendered":"\n

Selle \u00f5petusseeria esimeses osas, kuidas luua kohandatud Gutenbergi plokke, peame seadistama oma arenduskeskkonna. Vajame kohta, kuhu saaksime oma koodi ES6\/ESNext s\u00fcntaksites kirjutada ja selle liikvel olles kompileerida. Kohandatud Gutenbergi plokke on v\u00f5imalik kirjutada ES5 s\u00fcntaksi abil ilma Webpacki ja Babeli seadistamata. Kuid koodi lugemine ja kirjutamine on t\u00f5eliselt t\u00fclikas. Kui te pole kindel, miks me peame seda k\u00f5ike tegema v\u00f5i mis vahe on, lugege minu postitust, mis seda selgitab<\/a>. V\u00f5in teile garanteerida, et kui tulete tagasi, olete veendunud, et astute selle t\u00e4iendava sammu parema koodi kirjutamiseks.<\/p>\n

Ma eeldan, et teil on juba kohalik WordPress, mis t\u00f6\u00f6tab LAMP-i pinal v\u00f5i sarnasel. Ja et kirjutate kas teemat v\u00f5i pistikprogrammi. Mis puutub minusse, siis panen oma koodi enda v\u00e4lja t\u00f6\u00f6tatud teemasse awp-starter-theme<\/code>, mis asub minu WordPressi teemakaustas. Ma tahan eraldada oma Gutenbergi arenduse k\u00f5igist muudest teemafailidest, nii et loon gutenberg-dev<\/code>oma teema juurkausta sisse alamkataloogi. See on minu projektikaust ja kaust, millele ma \u00fclej\u00e4\u00e4nud \u00f5petuste seerias viitan.<\/p>\n

Olen juba kirjutanud \u00fcksikasjaliku juhendi selle kohta, kuidas Gutenbergi arenduskeskkonda seadistada, nii et vaatan siin kiiresti l\u00e4bi. Kui te pole seda kunagi varem teinud, soovitan lugeda allolevat lingitud postitust, kuna see sisaldab rohkem teavet kui see, mida siit leiate!<\/p>\n

Seadistage projekt veebipaketiga<\/h2>\n

Kasutades terminali (iOS-i terminal v\u00f5i Windows cmd t\u00f6\u00f6tavad h\u00e4sti) navigeerige oma projekti kausta (minu puhul awp-starter-theme\/gutenberg-dev<\/code>). Algatame uue projekti, paludes npm-l genereerida package.json<\/code>\u00fcldise sisuga a.<\/p>\n

Pack.jsoni loomine<\/h3>\n
npm init -y<\/code><\/pre>\n
J\u00e4rgmisena installin WordPressi skriptid, mis aitavad meid selle k\u00e4suga konfigureerimisel palju (mis lisab alamkausta node_modules<\/code>ja package-lock.json<\/code>ka):<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Avage package.json<\/code>oma projekti kaustas olev fail redaktoris ja leidke scripts<\/code>atribuut. Asendame selle kahe skriptiga \u00e4sja installitud WordPressi paketist:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
"Ehitamisskript" kompileerib mu failid. Kuid kuna seda tuleb iga muudatuse tegemisel k\u00e4sitsi k\u00e4ivitada, kasutame arendamise ajal pigem "start" skripti. Seej\u00e4rel k\u00e4ivitab see "vaatamisre\u017eiimi", kus see kuulab mis tahes skriptifailis tehtud muudatustele ja kompileerib need uuesti, kui muudatused salvestate.<\/p>\n
Veebipaketi konfiguratsioon<\/h3>\n
J\u00e4rgmine samm on veebipaketi konfiguratsioonifaili loomine. Teen seda, sest ma ei soovi kasutada vaikeallika ja v\u00e4ljundi failinimesid ja kaustu. Ma tahan ise otsustada, kus mu l\u00e4htefailid asuvad ja kuhu koostatud failid peaksid j\u00f5udma.<\/p>\n
Paigaldatud paketi abil @wordpress\/scripts<\/code>saame p\u00e4rida WordPressi veebipaketi konfiguratsiooni ja t\u00fchistada ainult need osad, mida tahame muuta.<\/p>\n
Looge meie projektikaustas uus fail nimega webpack.config.js<\/code>ja avage see redaktoris. Lisa see sisu:<\/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
See m\u00e4\u00e4rab minu sisestusfaili (praegu vaid \u00fche) entry<\/code>atribuudis, mis asub src<\/code>minu projektikausta alamkaustas nimega block-awhitepixel-myfirstblock.js<\/code>. Ilmselgelt pange oma failid nii, nagu soovite, kuid \u00e4rge unustage muuta nii v\u00f5tit kui ka v\u00e4\u00e4rtust. Kuna output<\/code>atribuudis ma palun veebipaketil kompileerida minu sisestusfailid, mille failinimeks on sisestusv\u00f5ti. Atribuudis path<\/code>palun paigutada k\u00f5ik koostatud failid projekti kaustast \u00fche sammu v\u00f5rra v\u00e4lja teema assets\/js<\/code>kausta. Kohandage failinimesid ja asukohta, et need sobiksid teie projektiga. Kui olete segaduses, vaadake minu \u00fcksikasjalikku juhendit .<\/a><\/p>\n
Looge src\/<\/code>projekti kausta alamkaust ja see on koht, kuhu me paneme k\u00f5ik l\u00e4htefailid. (Reguleerige, kui muutsite entry<\/code>asukohta webpack.config.js<\/code>). Looge siin fail block-awhitepixel-myfirstblock.js<\/code>ja j\u00e4tke see praegu t\u00fchjaks.<\/p>\n
On veel \u00fcks samm \u2013 ja see kehtib meile, kes tahame kasutada ESNexti uusimaid funktsioone. WordPress Babeli vaikekonfiguratsioonil puudub see kahjuks. Ja kuna ma tahan kasutada selliseid funktsioone nagu noolefunktsioonid, pean seadistama ka Babeli.<\/p>\n
Paabeli seadistamine<\/h2>\n
K\u00f5igepealt peame installima m\u00f5ned paketid meie Babeli konfiguratsiooni jaoks, tippides selle k\u00e4su:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
.babelrc<\/code>Kui see on tehtud, looge meie projektikausta uus fail. Siia paneme oma Babeli konfiguratsiooni:<\/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 see ongi meie arenduskeskkonna seadistus!<\/p>\n
Ehitage k\u00e4ske<\/h2>\n
Arendamise ajal peate oma Javascripti failid kompileerima. package.json<\/code>Lisasime kaks skripti just selle jaoks .<\/p>\n
Kui tahame oma Javascripti faile arendada, k\u00e4ivitame terminalis selle:<\/p>\n
npm run build<\/code><\/pre>\n
See k\u00e4sk teostab kompileerimise alati, kui k\u00e4ivitate selle terminalis. Proovige seda ja peaksite n\u00e4gema, et see genereerib faili block-awhitepixel-myfirstblock.js<\/code>(koos \u00fche v\u00f5i kahe muu varafailiga) teie m\u00e4\u00e4ratletud v\u00e4ljundkaustas, mille m\u00e4\u00e4rasite webpack.config.js<\/code>. Minu puhul ilmub see awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
\u00dclaltoodud k\u00e4su kasutamine t\u00f6\u00f6tab h\u00e4sti, kuid seda on t\u00fc\u00fctu korrata iga kord, kui muudate oma failid. T\u00f5en\u00e4oliselt eelistaksite selle k\u00e4su k\u00e4ivitada:<\/p>\n
npm run start<\/code><\/pre>\n
See seab teie terminali vaatamisre\u017eiimi, tuvastab k\u00f5ik Javascripti failidesse salvestatud muudatused ja kompileerib need t\u00f6\u00f6 k\u00e4igus. Iga kord, kui teie failid sisaldavad vigu, saadab terminal veateateid v\u00e4lja. Kellaprotsessi peatamiseks vajutage klahvikombinatsiooni CTRL + C.<\/p>\n
\"Kohandatud<\/a><\/p>\n
V\u00f5rdlusena n\u00e4eb minu projektikaust n\u00fc\u00fcd v\u00e4lja nagu pilt. Eelistan eraldada k\u00f5ik konfiguratsioonifailid ja eriti alamkaust node_modules\/<\/code>(mis sisaldab s\u00f5na otseses m\u00f5ttes k\u00fcmneid tuhandeid faile) \u00fclej\u00e4\u00e4nud teemakoodist. Muudab ignoreerimise reeglite seadistamise lihtsamaks \u2013 n\u00e4iteks SCSS-i kompilaatorid v\u00f5i git ignoreerimine. Oleme juba seadistanud veebipaketi konfiguratsiooni, et kompileerida l\u00f5plikud failid otse awp-starter-theme\/assets\/js\/<\/code>koos teiste minu teema Javascripti failidega.<\/p>\n
Oleme n\u00fc\u00fcd valmis j\u00e4rgmiseks osaks<\/a>, kus alustame oma esimese kohandatud ploki registreerimisega.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Selle \u00f5petuste seeria esimeses osas, kuidas luua kohandatud WordPressi Gutenbergi plokke, \u00f5pime oma arenduskeskkonda seadistama.<\/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":[894,937,937,894,1110,842,812,812,842,863,863],"tags":[1165],"class_list":{"0":"post-233543","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kood","8":"category-gutenberg-4","11":"category-n-a","12":"category-opetused","13":"category-pistikprogrammid","16":"category-wordpress-4","18":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233543"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233543\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}