{"id":233856,"date":"2023-02-24T18:30:00","date_gmt":"2023-02-24T15:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233856"},"modified":"2022-11-11T12:50:08","modified_gmt":"2022-11-11T09:50:08","slug":"taeielik-juhend-gutenbergi-arenduskeskkonna-seadistamiseks","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/taeielik-juhend-gutenbergi-arenduskeskkonna-seadistamiseks\/","title":{"rendered":"T\u00e4ielik juhend Gutenbergi arenduskeskkonna seadistamiseks"},"content":{"rendered":"\n<p>See juhend on m\u00f5eldud teile, kes soovite kirjutada Gutenbergi koodi ES6, ESNexti ja JSX s\u00fcntaksiga ning peate seadistama veebipaketi ja babeli, et muuta need failideks, mida saate kasutada Gutenbergi redaktoris. Vaatame, mida peate tegema, miks ja kuidas saame kasutada ja laiendada WordPressi vaikeseadeid ning kohandada neid vastavalt meie vajadustele.<\/p>\n<p>Kui olete npm, webpcak ja Babeli kontseptsioonides t\u00e4iesti uus, peaksite lugema j\u00e4rgmist jaotist, mille eesm\u00e4rk on selgitada nende t\u00f6\u00f6riistade t\u00f6\u00f6p\u00f5him\u00f5tteid ja nende kasutamist. Kui aga olete seda varem teinud ja olete protsessiga tuttav, v\u00f5ib-olla Reactiga arendades, minge edasi j\u00e4rgmise jaotise juurde, kus me tegelikult asjad paika paneme.<\/p>\n<h2>Algajatele: npm, webpack ja babel<\/h2>\n<p>Kui te pole kindel, miks peame Gutenbergi jaoks Javascripti kirjutamiseks seda k\u00f5ike tegema, soovitan teil <a href=\"https:\/\/awhitepixel.com\/blog\/the-basics-of-developing-for-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lugeda minu postitust<\/a>, mis uurib Gutenbergi jaoks arendamise p\u00f5hit\u00f5desid \u2013 kus ma selgitan Javascripti versioonide erinevust ja miks see vaeva v\u00e4\u00e4rt on.<\/p>\n<p>Kui te pole seda kunagi varem teinud, peate esmalt installima <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Node.js<\/a> oma arvutisse. Kl\u00f5psake linki, laadige see alla ja installige. Node.js sisaldab t\u00f6\u00f6riista, mida kasutame enamiku konfiguratsioonide seadistamiseks. See t\u00f6\u00f6riist on <code>npm<\/code>, mis v\u00f5imaldab installida Javascripti teeke ja k\u00e4ivitada skripte k\u00e4surea \/ terminali kaudu. Soovi korral v\u00f5ite ka kasutada <code>yarn<\/code>, kuid selle juhendi jaoks kasutame <code>npm<\/code>.<\/p>\n<h3>npm<\/h3>\n<p>Selles juhendis ei k\u00e4sitleta \u00fcksikasjalikult k\u00f5iki asju, mida saate teha <code>npm<\/code>, kuid see selgitab selle p\u00f5hikontseptsiooni ja asju, mis on meie eesm\u00e4rkide jaoks olulised. Kasutame <code>npm<\/code>kahe asja jaoks; meie projekti vajalike teekide installimiseks ja Javascripti failide koostamiseks (kompileerimiseks) k\u00e4skude k\u00e4ivitamiseks.<\/p>\n<p><code>npm<\/code>Saate installida mis tahes avaliku avatud l\u00e4htekoodiga Javascripti pakette. Kui peaksime arendama Reactiga (v\u00e4ljaspool WordPressi), peaksime installima Reacti teegid ja veebipaketi teegid. WordPress pakub tervet valikut teeke (peamiselt Gutenbergi jaoks), mida saate installida, kuid meid huvitab tegelikult ainult \u00fcks: <code>@wordpress\/scripts<\/code>\u2013 mis aitab meil konfigureerimist lihtsustada.<\/p>\n<p>Teegi installimisel <code>npm<\/code>loob alamkausta &quot; <code>node_modules<\/code>&quot;, kuhu on salvestatud installitud teegid. Te ei pea kunagi sellesse kausta sisestama ega siin midagi muutma, kuid pidage meeles, et see kaust sisaldab h\u00f5lpsasti (s\u00f5na otseses m\u00f5ttes!) k\u00fcmneid tuhandeid See on kaust, mida te ei tohiks kunagi siduda gitiga ega kaasata valmis teemasse v\u00f5i pistikprogrammi. Teeke on vaja ainult arendamise ajal.<\/p>\n<p>Kui teie keskkond on seadistatud, saate seda kasutada failis <code>npm<\/code>m\u00e4\u00e4ratletud skriptide k\u00e4itamiseks. <code>package.json<\/code>Olenevalt projektist on teil tavaliselt v\u00e4hemalt kaks skripti; \u00fcks skriptide koostamiseks ja teine \u200b\u200bvaatamisre\u017eiimi k\u00e4ivitamiseks. Vaatamisre\u017eiimis <code>npm<\/code>k\u00e4ivitab terminalis protsess, mis ootab ja kuulab suvalises failis tehtud muudatusi ning kompileerib need k\u00e4itamisajal alati, kui vajutate nuppu Salvesta. V\u00f5ib-olla olete selle kontseptsiooniga tuttav, kui olete varem kasutanud SCSS-i v\u00f5i LESS-i kompilaatorprogramme. Palju t\u00f5husam on k\u00e4ivitada taustal j\u00e4lgimisskript, mis kompileerub uuesti iga kord, kui salvestate, selle asemel, et minna terminali ja k\u00e4ivitada p\u00e4rast iga muudatust build k\u00e4sk.<\/p>\n<h3>veebipakk ja paabel<\/h3>\n<p>Selle saate Gutenbergi jaoks arendades ilma veebipakke v\u00f5i Babeli konfiguratsiooni tegemata. Kuna me kasutame WordPressi teeke, tegelevad nad sellega meie eest. Sellel on aga \u00fcks puudus \u2013 nii l\u00e4hte- kui ka v\u00e4ljundfailide jaoks on vaikimisi kindel asukoht ja failinimi. Kogu teie Javascripti arendus tuleb kirjutada \u00fchte faili, <code>project-folder\/src\/index.js<\/code>ja j\u00e4rg j\u00f5uab alati faili <code>project-folder\/build\/index.js<\/code>. Kui see teile sobib, v\u00f5ite kogu veebipaketi seadistamise osa vahele j\u00e4tta. Kui aga arendate mitme Gutenbergi funktsiooniga (kohandatud plokid, filtrid jne) teemat v\u00f5i pistikprogrammi, v\u00f5iksite v\u00e4hemalt soovida teistsugust v\u00e4ljundfaili nime ja asukohta, samuti mitme faili lubamist.<\/p>\n<p>Kui kasutate seadistamiseks WordPressi paketti (<code>@wordpress\/scripts<\/code>), on Babel juba seadistatud. Kuid peaksite teadma, et WordPressi pakett ei pruugi sisaldada pistikprogramme, mida v\u00f5iksite kasutada. N\u00e4iteks on olemas pakett, mis v\u00f5imaldab kasutada uusi nn noolefunktsioone (<code>myFunction = (param) =&gt; { }<\/code>) funktsioonide m\u00e4\u00e4ratlemiseks ilma sidumiseta <code>this<\/code>. Kui soovite kindlasti neid ESNexti funktsioone kasutada, peate WordPressi vaikeseadete kasutamise asemel Babeli ise konfigureerima. Ma k\u00e4sitlen allpool, kuidas.<\/p>\n<h3>Protsess<\/h3>\n<p>Veebipaketiga arendamise protsess, kui k\u00f5ik on seadistatud ja installitud, on navigeerida terminalis oma projekti kausta ja k\u00e4ivitada vaatamisskript. See j\u00e4\u00e4b avatuks ja kuulab teie JS-failides tehtud muudatusi. Iga kord, kui vajutate Javascripti failides nuppu Salvesta, v\u00e4ljastab terminal (loodetavasti) teabe, et see on faili edukalt uuesti kompileerinud. Kui kompileerimisel oli vigu, kuvatakse need terminalis. Vaatamisprotsessi peatamiseks vajutage klahvikombinatsiooni CTRL + C.<\/p>\n<h2>Keskkonna seadistamine<\/h2>\n<p>Eeldan, et teil on juba kohalik WordPress, mis t\u00f6\u00f6tab m\u00f5nes LAMP-i virnas (n\u00e4iteks WampServer, XAMPP, Docker v\u00f5i sarnased programmid) ja teil on Javascripti kodeerimiseks valmis pistikprogramm v\u00f5i teema.<\/p>\n<p>Soovitan luua Javascripti arendamiseks p\u00fchendatud alamkausta, kuna teil v\u00f5ib olla mitu konfiguratsioonifaili ja kausta. See muudab failide ja kaustade (n\u00e4iteks <code>node_modules\/<\/code>) eraldamise lihtsamaks, mida te ei soovi lisada git commit-i v\u00f5i l\u00f5plikesse ehitustesse. Kuid on t\u00e4iesti hea kasutada oma p\u00f5hiteema v\u00f5i pistikprogrammi kausta Javascripti arendamiseks projektikaustana.<\/p>\n<p>Navigeerige terminalis (Mac OS-i terminal v\u00f5i Windowsi k\u00e4suviip t\u00f6\u00f6tavad h\u00e4sti) oma projektikausta. Mis puudutab seda \u00f5petust, siis eeldan, et oleme teemas ja oleme <code>gutenberg-dev\/<\/code>oma projektikaustaks loonud t\u00fchja alamkausta.<\/p>\n<p>Esimene samm on npm-projekti l\u00e4htestamine \u2013 mis p\u00f5him\u00f5tteliselt k\u00e4seb lihtsalt faili <code>npm<\/code>genereerida. <code>package.json<\/code>See <code>package.json<\/code>fail annab <code>npm<\/code>teada, milliseid pakette on vaja ja millised skriptid on t\u00f6\u00f6tamiseks saadaval. Sisestage see terminali;<\/p>\n<pre><code>npm init -y<\/code><\/pre>\n<p>See loob <code>package.json<\/code>teie projektikaustas vaikesisuga faili.<\/p>\n<p>J\u00e4rgmisena installime WordPressi paketi, mis aitab meil v\u00e4hendada konfiguratsiooni hulka, mida peame tegema. K\u00e4ivitage see k\u00e4sk:<\/p>\n<pre><code>npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n<p>M\u00e4rgis <code>--save-dev<\/code>teavitab <code>npm<\/code>, et antud teegid on vajalikud ainult arenduseks, ning <code>--save-exact<\/code>tagab, et <code>npm<\/code>installitakse ainult \u00fcks versioon, uusim.<\/p>\n<p>Avage <code>package.json<\/code>fail oma redaktoris. (<code>npm<\/code>on ka <code>package-lock.json<\/code>pakettide installimisel genereerinud a, v\u00f5id seda faili lihtsalt ignoreerida, selles <code>package.json<\/code>teete muudatusi). See peaks olema t\u00e4idetud vaikekonfiguratsiooniga ja v\u00f5ite m\u00e4rgata, et paketi installimine, mille me varem tegime, lisas <code>@wordpress\/scripts<\/code>teatud versiooni kirje <code>devDependencies<\/code>. Kui installite rohkem pakette, <code>npm<\/code>v\u00e4rskendatakse <code>package.json<\/code>iga paketi kirjetega. K\u00f5ik, mille p\u00e4rast peame selles failis muretsema, on <code>scripts<\/code>atribuut, mis on m\u00f5eldud skriptide (k\u00e4skude) jaoks, mida saate <code>npm<\/code>k\u00e4ivitamiseks kasutada. V\u00e4rskendage skriptide atribuuti sellesse (saate vaiketesti eemaldada):<\/p>\n<pre><code>\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n<p>See koodil\u00f5ik \u00fctleb <code>npm<\/code>, et meil on kaks skripti, mida saame selles projektikaustas k\u00e4ivitada; &quot;Ehita&quot; ja &quot;Alusta&quot;. K\u00e4ivitame skripti k\u00e4suga <code>npm run &lt;scriptname&gt;<\/code>, mis <code>npm<\/code>otsib sisse <code>package.json<\/code>ja t\u00e4idab selle v\u00e4\u00e4rtusena m\u00e4\u00e4ratletud k\u00e4su. Kasutame <code>wp-scripts<\/code>\u00e4sja installitud paketiga kaasas olnud t\u00f6\u00f6riista, et kas \u00fcks kord oma Javascripti kompileerida (<code>\"build\"<\/code>) v\u00f5i k\u00e4ivitada vaatamis-\/kuulamisre\u017eiim, et kompileerida muudatuste salvestamisel (<code>\"start\"<\/code>).<\/p>\n<p>See v\u00f5imaldab meil kasutada ka WordPressi veebipaketti ja Babeli konfiguratsiooni, nii et me ei pea seda ise tegema.<\/p>\n<p>Looge oma projektikaustas alamkaust nimega <code>src\/<\/code>. Looge selle kausta sees <code>index.js<\/code>fail.<\/p>\n<p>Kui olete veebipaketi vaikeseadetega korras, olete n\u00fc\u00fcd valmis! Kirjutage oma ES6 ja JSX kood sisse ja paluge <code>index.js<\/code>need <code>npm<\/code>kompileerida, k\u00e4ivitades kas ehitusk\u00e4skluse:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>v\u00f5i k\u00e4ivitage terminalis j\u00e4lgimisprotsess, mis kuulab selle k\u00e4suga tehtud muudatusi (vaatamisprotsessi peatamiseks kasutage CTRL+C):<\/p>\n<pre><code>npm run start<\/code><\/pre>\n<p>Kummagi neist k\u00e4ivitamine loob <code>build\/<\/code>teie projekti kataloogis alamkausta koos kompileeritud tulemusega <code>build\/index.js<\/code>.<\/p>\n<p><strong>See on k\u00f5ik k\u00f5ige elementaarsema keskkonna seadistuse jaoks! Olete n\u00fc\u00fcd valmis kirjutama ES6 Javascripti Gutenbergi jaoks!<\/strong><\/p>\n<p>Kui soovite muuta oma l\u00e4hte- v\u00f5i v\u00e4ljundfailide asukohta ja failinimesid, lugege edasi.<\/p>\n<h3>L\u00e4hte- ja v\u00e4ljundfailinimede ja -teede seadistamine<\/h3>\n<p>Kui te, nagu mina, ei ole rahul vaikefailinime ja -struktuuriga \u2013 eriti v\u00e4ljundfaili(de) puhul, peate uurima veebipaketi konfigureerimist. Tavaliselt, n\u00e4iteks kui arendate Reacti jaoks v\u00e4ljaspool WordPressi, peaksite Babeli pistikprogrammiga seadistama t\u00e4ieliku veebipaketi konfiguratsiooni. \u00d5nneks hoolitseb WordPress selle eest meie eest ja v\u00f5imaldab meil laiendada WordPressi enda veebipaketi konfiguratsiooni ja kohandada ainult neid osi, mida soovime muuta.<\/p>\n<p>Looge oma projekti kaustas (sama kaustaga <code>package.json<\/code>) fail nimega <code>webpack.config.js<\/code>ja avage see oma redaktoris. Kirjutage sellesse faili j\u00e4rgmine tekst:<\/p>\n<pre><code>const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-mynamespace-myblock': '.\/src\/block-mynamespace-myblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js\/gutenberg'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n<p>Esimene asi, mida me teeme <code>@wordpress\/scripts<\/code>, on veebipaketi konfiguratsiooni toomine muutujasse <code>defaultConfig<\/code>. <code>module.exports<\/code>Veebipaketi konfiguratsioonis rakendame esimese asjana k\u00f5ike <code>defaultConfig<\/code>, kasutades levitusoperaatorit (<code>...<\/code>). Need kaks osa tagavad, et laiendaksime WordPressi veebipaketi konfiguratsiooni, kaasates k\u00f5ik selle sees olevad asjad. Peale leviku operaatorit saame kohandada v\u00f5i lisada mis tahes omadusi, mida soovime muuta; meie puhul allika asukoht ja v\u00e4ljundi asukoht.<\/p>\n<p>Atribuut <code>entry<\/code>m\u00e4\u00e4rab l\u00e4htefailid, mis on vaikimisi <code>.\/src\/index.js<\/code>. Iga <code>entry<\/code>atribuudi kirje on v\u00f5tme+v\u00e4\u00e4rtuse paar, millest veebipakett kompileerib (ja vaatab). \u00dclaltoodud n\u00e4ites olen defineerinud &#8216; <code>block-mynamespace-myblock<\/code>&#8216;, mis asub <code>src\/block-mynamespace-myblock.js<\/code>\u00fche sisenemispunktina. Siin saate lisada nii palju v\u00f5tme+v\u00e4\u00e4rtuse paare iga l\u00e4htefaili jaoks, mida soovite kompileerida.<\/p>\n<p>Vara <code>output<\/code>otsustab koostatud failide asukoha. Siin <code>path<\/code>saate m\u00e4\u00e4rata k\u00f5igi kompileeritud failide sihtkausta. Kasutan teeabi, et saaksin oma konfiguratsioonis kataloogides \u00f5igesti liikuda. \u00dclaltoodud n\u00e4ites \u00fctlen veebipaketile, et k\u00f5ik kompileeritud failid peaksid j\u00f5udma minu <code>theme-folder\/assets\/js\/gutenberg\/<\/code>kausta. Oluline on kasutada <code>..\/<\/code>kataloogipuust \u00fcles, projekti kaustast v\u00e4lja ja teise kausta, kus ma tahan, et k\u00f5ik mu teema Javascripti failid oleksid. Kohandage rada nii, et see sobiks teie projekti struktuuriga.<\/p>\n<p>Teiseks \u00fctlen veebipaketile, et k\u00f5ik failinimed tuleks nimetada neile vastavate v\u00f5tmenimedena <code>entry<\/code>. See veebipaketi konfiguratsioon kompileerib mu <code>theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>faili <code>theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Kui ma peaksin lisama v\u00f5ti+v\u00e4\u00e4rtuse paarina teise l\u00e4htefaili <code>entry<\/code>, kompileeritaks see samasse kausta, mille failinimeks on v\u00f5ti.<\/p>\n<p>Tehke oma <code>webpack.config.js<\/code>failis soovitud muudatused ja salvestage. <code>npm<\/code>Failide loomiseks nende uutes asukohtades k\u00e4ivitage uuesti mis tahes ehitamisk\u00e4sk.<\/p>\n<p><strong>See on k\u00f5ik! Olete n\u00fc\u00fcd laiendanud WordPressi veebipaketi konfiguratsiooni ja saate n\u00fc\u00fcd m\u00e4\u00e4rata, kuhu teie allika- ja v\u00e4ljundfailid peaksid minema.<\/strong><\/p>\n<p>Siiski tahan sellesse juhendisse lisada veel \u00fche n\u00e4pun\u00e4ite. WordPressi Babeli vaikekonfiguratsioonis v\u00f5ivad ESNexti teatud uute funktsioonide jaoks puududa teatud Babeli pistikprogrammid. N\u00e4iteks \u00fclaltoodud vaikeseadete ja WordPressi vaikeseadetega ei saa te oma koodis noolefunktsioone kasutada. Kui see on teile oluline, lugege edasi.<\/p>\n<h3>Lisage Babeliga uusimate ESNexti s\u00fcntaksite tugi<\/h3>\n<p>Selle WordPressi Babeli vaikeseadeldise kirjutamise seisuga puudub \u201eeksperimentaalsete s\u00fcntaksite&quot; tugi, mis sisaldab n\u00e4iteks noolefunktsioone. Selle toe lisamiseks peate esitama oma Babeli konfiguratsioonifaili ja siiani pole ma leidnud v\u00f5imalust WordPressi Babeli konfiguratsiooni laiendamiseks, nagu tegime \u00fclaltoodud veebipaketi konfiguratsiooniga. Seega peame uuesti m\u00e4\u00e4ratlema Babeli eelseaded ja lisama pistikprogrammi &quot;eksperimentaalsed s\u00fcntaksid&quot;. Kuid \u00e4rge muretsege, see on v\u00e4ga v\u00e4ike fail.<\/p>\n<p>Esimene samm on m\u00f5ne Babeli eelseadete jaoks vajalike pakettide installimine \u2013 peame installima samad, mis on m\u00e4\u00e4ratletud WordPressi Babeli konfiguratsioonis. K\u00e4ivitage see k\u00e4sk installimiseks <code>@babel\/preset-env<\/code>ja <code>@babel\/preset-react<\/code>, samuti meid huvitava paketi jaoks; <code>@babel\/plugin-proposal-class-properties<\/code>:<\/p>\n<pre><code>npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n<p>Teine samm on Babeli konfiguratsioonifaili lisamine. Looge oma projektikaustas fail nimega <code>.babelrc<\/code>(faililaiendita).<\/p>\n<p>M\u00e4rkus Windowsi jaoks: kui istute Windowsi masinas, ei ole teil lubatud ilma faililaiendita faile luua. Selle \u00fcmber liikumiseks saate selle faili luua terminali\/k\u00e4suriba abil. K\u00e4ivitage see k\u00e4sk:<\/p>\n<pre><code>echo hi &gt; .babelrc<\/code><\/pre>\n<p><code>.babelrc<\/code>See k\u00e4sk v\u00e4ljastab praeguses kaustas olevasse faili &quot;hi&quot;. N\u00fc\u00fcd saate selle faili oma redaktoris avada, eemaldada &quot;tere&quot; ja lisada allpool tegelik sisu.<\/p>\n<p>Sa <code>.babelrc<\/code>peaksid v\u00e4lja n\u00e4gema umbes selline:<\/p>\n<pre><code>{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n<p>M\u00e4\u00e4ratleme samad eelseaded, mida teete tavaliselt Reacti projektis, ja samad, mida WordPress teeb. See, mida me lisame, on <code>plugins<\/code>vara. Massiivi sisse <code>plugins<\/code>lisame <code>@babel\/plugin-proposal-class-properties<\/code>Babeli pistikprogrammi, mis on vajalik eksperimentaalsete s\u00fcntaksite (nt noolefunktsioonide) jaoks.<\/p>\n<h2>J\u00e4reldus<\/h2>\n<p>Pidage meeles, et WordPress v\u00f5ib oma konfiguratsiooni igal ajal muuta, eriti t\u00f5en\u00e4oline on see, et Gutenberg on \u00fcsna uus. Kuna me laiendame WordPressi konfiguratsiooni, v\u00f5ib juhtuda, et \u00fchel hetkel peame oma konfiguratsiooni uuesti v\u00e4rskendama, et see vastaks meie vajadustele. V\u00f5ib-olla otsustab WordPress lisada eksperimentaalsete s\u00fcntaksite toe, et me ei peaks kogu Babeli konfiguratsiooni tegema.<\/p>\n<p>See pole kaugeltki ammendav juhend Webpacki ja Babeli seadistamisel, vaid paljude katsetamise ja asjade v\u00e4ljam\u00f5tlemise tulemus. Loodan, et see on aidanud teil \u00f5ppida oma Gutenbergi arenduskeskkonda seadistama ja muutnud selle piisavalt lihtsaks, nii et see ei ole nii suur takistus ES6, ESNexti, JSX-i ja k\u00f5ige selle arendamiseks kasuliku \u00f5ppimise alustamisel. Gutenberg!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See on t\u00e4ielik juhend npm, veebipaketi ja babeli seadistamiseks, et kirjutada ES6, ESNext ja JSX s\u00fcntaksiga Gutenbergi koodi.<\/p>\n","protected":false},"author":1,"featured_media":151834,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[937,937,833,916,916,1110,842,812,812,833,842,863,863],"tags":[1165],"class_list":["post-233856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-4","category-juhend-algajatele","category-muud","category-n-a","category-opetused","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233856","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=233856"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233856\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}