Aloitetaan ehdottomista perusasioista. Mit\u00e4 ohjelmointikieli\u00e4 ja ty\u00f6kaluja sinun pit\u00e4isi k\u00e4ytt\u00e4\u00e4 tai opetella kehitt\u00e4\u00e4ksesi Gutenbergi\u00e4 parhaiten?<\/p>\n
Kieli ja kirjastot, jotka sinun tulee osata<\/h2>\n
Lyhyt vastaus siihen, mit\u00e4 kielt\u00e4 sinun tulee k\u00e4ytt\u00e4\u00e4 kehitt\u00e4miseen Gutenbergiin, on: Javascript. Javascriptin maailmassa on kuitenkin useita k\u00e4sitteit\u00e4, laajennuksia ja ty\u00f6kaluja, joista sinun pit\u00e4isi olla tietoinen.<\/p>\n
Ensinn\u00e4kin kyse on Javascript-versiosta. Javascriptill\u00e4 on virallinen standardointi; ECMAScript. ECMAScript 5 (usein lyhennettyn\u00e4 ES5<\/strong> :ksi) ilmestyi noin 10 vuotta sitten, ja se on Javascript-versio, jonka useimmat meist\u00e4 kehitt\u00e4j\u00e4t tuntevat. Sitten meill\u00e4 on ECMAScript 6 (usein lyhennetty ES6<\/strong> :ksi), joka julkaistiin vuonna 2015. Jotkut kutsuvat t\u00e4t\u00e4 versiota nimell\u00e4 ES2015. Ja lopuksi on ESNext<\/strong>, joka on dynaaminen nimi, joka kattaa tulevan version ja sis\u00e4lt\u00e4\u00e4 ehdotuksia, jotka toivomme sis\u00e4llytett\u00e4v\u00e4n mihin tahansa seuraavaan standardoituun Javascriptin versioon.<\/p>\n Saatat ajatella n\u00e4in: "Joten kaikki on hyv\u00e4 ja kaikki, Javascriptin uudemmat versiot tarkoittavat vain enemm\u00e4n ominaisuuksia. Joten k\u00e4yt\u00e4n vain uusinta." Mutta on eritt\u00e4in t\u00e4rke\u00e4 asia, joka sinun on tiedett\u00e4v\u00e4 Javascript-versioista, ja se on t\u00e4m\u00e4: Useimmat selaimet ymm\u00e4rt\u00e4v\u00e4t nyky\u00e4\u00e4n vain ES5:t\u00e4.<\/p>\n T\u00e4m\u00e4 tarkoittaa, ett\u00e4 jos haluat kirjoittaa Javascriptin ES6:ssa tai ESNextiss\u00e4, sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 ty\u00f6kalut, jotka muuttavat koodisi ES5:ksi, jotta selaimet ymm\u00e4rt\u00e4v\u00e4t sen. Mutta ennen kuin alat mietti\u00e4 ES6:n ja ESNextin oppimisen ohittamista kokonaan, muista, ett\u00e4 ES5 on 10 vuotta vanha. Ja se vaatii sinua kirjoittamaan paljon enemm\u00e4n koodia. Se on my\u00f6s paljon v\u00e4hemm\u00e4n luettava ja monimutkaisempi kuin jos kirjoitat sen ES6:ssa tai ESNextiss\u00e4.<\/p>\n Lis\u00e4ksi Gutenbergin konsepteihin kannattaa k\u00e4ytt\u00e4\u00e4 my\u00f6s JSX<\/strong> :\u00e4\u00e4 \u2013 Javascriptin syntaksilaajennusta. JSX on my\u00f6s kieli, jota selaimet eiv\u00e4t voi ymm\u00e4rt\u00e4\u00e4 muuttamatta sit\u00e4.<\/p>\n Jos et ole viel\u00e4k\u00e4\u00e4n vakuuttunut siit\u00e4, ett\u00e4 ES6\/ESNext on ylim\u00e4\u00e4r\u00e4isen vaiheen arvoinen sen muuntamiseksi, anna minun n\u00e4ytt\u00e4\u00e4 sinulle koodivertailu. ES6:lla ja JSX:ll\u00e4 voit kirjoittaa t\u00e4m\u00e4n yksinkertaisen kappaleen palauttamiseksi; luokka ja dynaaminen tulos muuttujasta;<\/p>\n Niille teist\u00e4, jotka ovat uusia t\u00e4m\u00e4n suhteen ja luulette, ett\u00e4 olen unohtanut lainaukset \u2013 ei, en ole. T\u00e4m\u00e4 on JSX:n yksinkertaisuus. Verrataanpa yll\u00e4 olevaa siihen, miten kirjoitat ES5- ja WordPressin Javascript-kirjastoilla:<\/p>\n Kaikki yll\u00e4 oleva koodi vaaditaan ES6:n ja JSX:n toiminnan tulostamiseen yksik\u00f6ss\u00e4 eritt\u00e4in helposti luettavalla rivill\u00e4! Kuvittele rakentavasi monimutkaisempaa k\u00e4ytt\u00f6liittym\u00e4\u00e4 tapahtumien ja ehtojen avulla, kun pelkk\u00e4 kappale vaatii t\u00e4m\u00e4n hankalan koodinp\u00e4tk\u00e4n.<\/p>\n Oletko vakuuttunut? Hyv\u00e4!<\/p>\n Yleisin ja WordPressin k\u00e4ytt\u00e4m\u00e4 ty\u00f6kalu ES6\/ESNextin muuntamiseen on Babel<\/a>. Yleens\u00e4 k\u00e4yt\u00e4t Babelia Webpackin laajennuksena ,<\/a> joka on ty\u00f6kalu, joka niputtaa ja pienent\u00e4\u00e4 Javascript-tiedostosi. Molemmat ty\u00f6kalut k\u00e4ytt\u00e4v\u00e4t Node.js<\/a> :\u00e4\u00e4, joka antaa sinulle ty\u00f6kaluja Webpack- ja Babel-komentosarjojen suorittamiseen komentorivill\u00e4. Jos t\u00e4m\u00e4 kuulostaa h\u00e4mment\u00e4v\u00e4lt\u00e4, minulla on viesti, joka selitt\u00e4\u00e4 perusteellisesti, kuinka kaikki n\u00e4m\u00e4 ty\u00f6kalut asetetaan Gutenbergin<\/a> kehitt\u00e4miseen.<\/p>\n Toinen asia, joka sinun on tiedett\u00e4v\u00e4 teknologioista, on se, ett\u00e4 Gutenberg perustuu React JS<\/strong> :n p\u00e4\u00e4ll\u00e4 olevaan abstraktiokerrokseen. React JS<\/a> on Facebookin yll\u00e4pit\u00e4m\u00e4 avoimen l\u00e4hdekoodin Javascript-kirjasto, joka julkaistiin noin vuonna 2013. Koska React on ollut olemassa jo jonkin aikaa, t\u00e4st\u00e4 kirjastosta on runsaasti opetusohjelmia, oppaita ja dokumentaatiota. Reactin virallisella sivustolla on hyv\u00e4, yksityiskohtainen opetusohjelma<\/a> sinulle, joka on uusi Reactin k\u00e4ytt\u00e4j\u00e4. Sinun ei todellakaan tarvitse olla Reactin asiantuntija kehitt\u00e4\u00e4ksesi Gutenbergi\u00e4, mutta sen komponenttien ja tilojen kanssa toimimisen perusteet auttavat sinua suuresti ymm\u00e4rt\u00e4m\u00e4\u00e4n Gutenbergi\u00e4.<\/p>\n Yksi Gutenbergin suurimmista eduista on siirtyminen pois kiinte\u00e4st\u00e4 HTML:st\u00e4 postaussis\u00e4ll\u00f6ss\u00e4. WordPress, ennen Gutenbergi\u00e4, ja useimmat verkkopohjaiset sis\u00e4ll\u00f6nhallintaj\u00e4rjestelm\u00e4t tallentavat artikkelien sis\u00e4ll\u00f6n puhtaalla HTML-kielell\u00e4. T\u00e4m\u00e4 ei yleens\u00e4 ole ongelma yksinkertaisen sis\u00e4ll\u00f6n (otsikoiden ja kappaleiden) kanssa. Mutta se voi olla suurempi ongelma monimutkaisemman ja dynaamisemman monipuolisen sis\u00e4ll\u00f6n kanssa.<\/p>\n Kaikki sis\u00e4ll\u00f6nhallintaj\u00e4rjestelm\u00e4t, jotka sallivat dynaamisen sis\u00e4ll\u00f6n artikkelin sis\u00e4ll\u00f6ss\u00e4, kohtaavat ongelmia sen tallentamisessa kelvollisena HTML-koodina. T\u00e4m\u00e4 voi olla mik\u00e4 tahansa kuva, joka viittaa sen tunnukseen j\u00e4rjestelm\u00e4ss\u00e4 koko URL-osoitteen sijaan. Tai widget, joka n\u00e4ytt\u00e4\u00e4 dynaamisesti uusimmat viestit tietyss\u00e4 kategoriassa. Normaalisti t\u00e4m\u00e4 ratkaistaan \u200b\u200bantamalla mukautettu salaper\u00e4inen HTML-koodi, jota ei ole j\u00e4rkev\u00e4\u00e4 tulostaa normaalisti. Anna sitten CMS-j\u00e4sentimen muuttaa n\u00e4m\u00e4 HTML-kappaleet merkityksellisiksi tai dynaamiksi. T\u00e4m\u00e4n haittapuolena on, ett\u00e4 jos siirr\u00e4t sis\u00e4lt\u00f6si toiseen sis\u00e4ll\u00f6nhallintaj\u00e4rjestelm\u00e4\u00e4n, seurauksena on usein ruma HTML. Sis\u00e4lt\u00f6 t\u00e4ytet\u00e4\u00e4n j\u00e4sent\u00e4m\u00e4tt\u00f6m\u00e4ll\u00e4 HTML-koodilla, joka sinun on siivottava manuaalisesti. T\u00e4m\u00e4 ongelma on se, mit\u00e4 Gutenberg pyrkii ratkaisemaan.<\/p>\n Gutenbergin kanssa WordPress on p\u00e4\u00e4tt\u00e4nyt tallentaa lis\u00e4\u00e4 ja dynaamisia tietoja HTML-kommentteina. HTML-kommentit eiv\u00e4t ole koskaan n\u00e4ht\u00e4viss\u00e4 sivuston k\u00e4ytt\u00e4jille, ja periaatteessa mik\u00e4 tahansa on sallittua kommenttilohkossa. HTML-kommentti alkaa En mene yksityiskohtiin kommenttilohkojen rakenteesta \u2013 l\u00f6yd\u00e4t yksityiskohtaisen oppaan<\/a> t\u00e4st\u00e4 WordPress Editorin k\u00e4sikirjasta. Mutta esimerkkin\u00e4 yksinkertainen kappale Gutenberg-viestin sis\u00e4ll\u00f6st\u00e4 tallennetaan tietokantaan seuraavasti:<\/p>\n Mit\u00e4 tulee dynaamiseen sis\u00e4lt\u00f6\u00f6n, HTML-koodia ei yleens\u00e4 tulosteta ollenkaan. Kaikki tiedot, joita WordPress tarvitsee ymm\u00e4rt\u00e4\u00e4kseen, mit\u00e4 t\u00e4m\u00e4 lohko tekee, l\u00f6ytyy HTML-kommenteista. N\u00e4in Gutenberg tallentaa "Viimeisimm\u00e4t viestit" -lohkon:<\/p>\n Koska kaikki on HTML-kommentteja, viestien siirt\u00e4minen toiseen WordPressiin ilman Gutenbergi\u00e4 tai toista sis\u00e4ll\u00f6nhallintaj\u00e4rjestelm\u00e4\u00e4 varmistaa, ettei rumaa j\u00e4sent\u00e4m\u00e4t\u00f6nt\u00e4 HTML:\u00e4\u00e4 syljet\u00e4 ulos. Se yksinkertaisesti j\u00e4tet\u00e4\u00e4n huomiotta ja ohitetaan.<\/p>\n Kuten olet luultavasti jo havainnut, kommenttilohkot alkavat lohkon nimell\u00e4, jonka etuliitteen\u00e4 on " Hy\u00f6dyllinen tiet\u00e4\u00e4:<\/strong> Sinulla on pari vaihtoehtoa, kuinka voit mukauttaa teemojasi tai laajennuksiasi Gutenbergille. Alla on lueteltu yleisimm\u00e4t mukautukset, joita todenn\u00e4k\u00f6isesti tekisit kehitt\u00e4j\u00e4n\u00e4.<\/p>\n WordPress Gutenbergin mukana tulee suuri joukko lohkotyyppej\u00e4, ja voit laajentaa mit\u00e4 tahansa n\u00e4ist\u00e4. Voit my\u00f6s poistaa osan niist\u00e4 tai p\u00e4\u00e4tt\u00e4\u00e4 tietyiss\u00e4 tapauksissa sallia tai poistaa vain osan niist\u00e4.<\/p>\n Yleisin tapa laajentaa lohkoa on lis\u00e4t\u00e4 mukautettuja lohkotyylej\u00e4<\/a> \u2013 jotka ovat lohkon tyylimuunnelmia. Lohkotyylit eiv\u00e4t ole niin yleisi\u00e4 oletusarvoisessa WordPressiss\u00e4, mutta niit\u00e4 on. Katsokaa lainauslohkoa. Gutenberg-editorissa oikeanpuoleisessa sivupalkissa on laatikko nimelt\u00e4 "Tyylit".<\/p>\n Toinen tapa mukauttaa olemassa olevia lohkoja on k\u00e4ytt\u00e4\u00e4 suodattimia. Olet todenn\u00e4k\u00f6isesti perehtynyt PHP:t\u00e4 k\u00e4ytt\u00e4viin suodattimiin WordPressiss\u00e4, mutta Gutenbergiss\u00e4 on nyt Javascript-pohjaisia \u200b\u200bsuodattimia lohkoissa<\/a>. Voit esimerkiksi lis\u00e4t\u00e4 omia mukautettuja attribuutteja (asetuksia) kaikkiin tai tietyntyyppisiin lohkoihin tai suodattaa, kuinka ne tallennetaan tai tulostetaan.<\/p>\n Voit my\u00f6s muokata lohkoluokkia sek\u00e4 poistaa tai sallia tiettyj\u00e4 lohkoja tietyiss\u00e4 tilanteissa. Tai voit esimerkiksi varmistaa, ett\u00e4 vain muutama lohkotyyppi on sallittu mukautetulle viestityypille.<\/p>\n Mukautettujen lohkojen luominen on ehk\u00e4 ensimm\u00e4inen ajatus, jonka useimmat WordPress-kehitt\u00e4j\u00e4t ajattelevat. WordPressin oletuslohkot voivat menn\u00e4 pitk\u00e4lle, mutta jos olet rakentamassa monimutkaisempaa teemaa tai laajennusta, sinulla on todenn\u00e4k\u00f6isesti erityistarpeita. Esimerkiksi Gutenbergin avulla luodaan kivan n\u00e4k\u00f6inen etusivu, jossa on pikakuvakkeet sis\u00e4lt\u00f6\u00f6n ja dynaamiseen sis\u00e4lt\u00f6\u00f6n. Suurin osa r\u00e4\u00e4t\u00e4l\u00f6innist\u00e4 on mahdollista k\u00e4ytt\u00e4m\u00e4ll\u00e4 CSS-luokkavaihtoehtoa, joka on olemassa kaikille lohkoille. Mutta t\u00e4m\u00e4 ei ole erityisen k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen.<\/p>\n Omien mukautettujen lohkojen kirjoittaminen on luultavasti vaikeinta muokata teemaa tai laajennusta Gutenbergille. Mutta se voi olla my\u00f6s palkitsevin! Sen lis\u00e4ksi, ett\u00e4 pystyt luomaan lohkoja, jotka toimivat ja n\u00e4ytt\u00e4v\u00e4t juuri sellaisilta kuin haluat niiden n\u00e4ytt\u00e4v\u00e4n \u2013 se on my\u00f6s loistava tapa oppia nopeasti uudesta Javascript-pohjaisesta tekniikasta.<\/p>\n Jos olet WordPress-teeman kehitt\u00e4j\u00e4, sinun tulee olla tietoinen siit\u00e4, ett\u00e4 Gutenbergin teemasi saattaa vaatia paljon asetuksia, erityisesti muodossa Oletusarvoisesti WordPress k\u00e4sittelee useimmat oletuslohkojen tyylit itse, joten sinun ei tarvitse huolehtia liikaa n\u00e4iden tyylist\u00e4 teemassasi. Mutta teeman kehitt\u00e4j\u00e4t ovat yleens\u00e4 nirsompia suunnittelunsa ja tyylins\u00e4 suhteen. Joten sinun on todenn\u00e4k\u00f6isesti s\u00e4\u00e4dett\u00e4v\u00e4 tai lis\u00e4tt\u00e4v\u00e4 lohkotyyli\u00e4. Voit lis\u00e4t\u00e4 muokkaustyylej\u00e4 vain k\u00e4ytt\u00f6liittym\u00e4\u00e4n, vain editoriin tai molempiin. WordPress Gutenberg -k\u00e4sikirja tarjoaa yleiskatsauksen editorin tyyleist\u00e4<\/a> ja oletuslohkotyyleist\u00e4.<\/p>\nJoten miksi vaivautua ES6:een, ESNextiin tai JSX:\u00e4\u00e4n?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nMuunnosty\u00f6kalut ja React JS<\/h3>\n
![\"WordPressin](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nLopuksi:<\/h3>\n
\n
Uusi tapa tallentaa viestien sis\u00e4lt\u00f6\u00e4 ja miksi<\/h2>\n
<!--<\/code>ja p\u00e4\u00e4ttyy --><\/code>, ja Gutenberg tallentaa tiedot tietyss\u00e4 rakenteessa JSON-muodossa. Jokainen Gutenbergin lohko on k\u00e4\u00e4ritty alkavaan HTML-kommenttiin ja sen j\u00e4lkeen p\u00e4\u00e4ttyv\u00e4\u00e4n HTML-kommenttiin.<\/p>\nViestisis\u00e4lt\u00f6 tallennetaan uudella tavalla<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>". Jos mukautettuja asetuksia on, ne tulostetaan nimen j\u00e4lkeen JSONissa, kuten n\u00e4et viimeisimm\u00e4t viestit -lohkon esimerkist\u00e4. Gutenberg viittaa n\u00e4ihin ominaisuuksiin, ja t\u00e4m\u00e4 k\u00e4site on jotain, johon tulet hyvin tutuksi, kun alat oppia kehitt\u00e4m\u00e4\u00e4n Gutenbergi\u00e4.<\/p>\n
\nJos haluat tutustua tarkemmin siihen, miten uusi viestisis\u00e4lt\u00f6 tallennetaan, voit tarkastella wp_posts<\/code>tietokannassasi olevaa taulukkoa. On toinenkin helpompi tapa kurkistaa tietokannan koko arvoon WordPress-malleista. K\u00e4yt\u00e4 silmukan yksitt\u00e4isess\u00e4 mallissa yksinkertaisesti " echo get_the_content()<\/code>". Normaalin " the_content()<\/code>" k\u00e4ytt\u00e4minen tulostaa j\u00e4sennetyn viestin sis\u00e4ll\u00f6n, mutta sis\u00e4ll\u00f6n arvon toistaminen tulostaa tarkalleen sen, mik\u00e4 on tallennettu tietokantaan. Voit k\u00e4ytt\u00e4\u00e4 Inspect-ty\u00f6kalua tai tarkastella l\u00e4hdekoodia Chromessa tai Firefoxissa n\u00e4hd\u00e4ksesi kommenttilohkot.<\/p>\nMit\u00e4 sin\u00e4 kehitt\u00e4j\u00e4n\u00e4 voit tehd\u00e4 Gutenbergiss\u00e4<\/h2>\n
Laajenna ja mukauta olemassa olevia lohkoja<\/h3>\n
Luo omat mukautetut lohkot<\/h3>\n
Varmista, ett\u00e4 teemasi on Gutenberg-valmis<\/h3>\n
add_theme_support()<\/code>. WordPressin k\u00e4sikirjassa on hyv\u00e4 yleiskatsaus<\/a> kaikista teematuista, jotka sinun on otettava huomioon tehd\u00e4ksesi teemastasi Gutenberg-valmis.<\/p>\n