T\u00e4m\u00e4 on yksityiskohtainen opetusohjelmasarja, joka kattaa omien r\u00e4\u00e4t\u00e4l\u00f6ityjen WordPress Gutenberg -lohkojen luomisen. Se on sinulle, joka olet teeman tai laajennuksen kehitt\u00e4j\u00e4 ja olet, kuten min\u00e4kin, turhautunut dokumentaation puutteeseen. Suurin osa siit\u00e4, mit\u00e4 olen oppinut kehitt\u00e4ess\u00e4ni WordPressin uudessa Javascript-maailmassa, on yrityksen ja erehdyksen kautta, tarmokkaasti kokeilemalla ja lukemalla kaikkea, mit\u00e4 olen k\u00e4ynyt. Ja siksi ajattelin, ett\u00e4 voisin koota kaiken t\u00e4h\u00e4n menness\u00e4 oppimani suureen opetusohjelmaan.<\/p>\n
T\u00e4ss\u00e4 10 osassa koostuvan opetusohjelman tarkoituksena on opettaa sinulle, miten voit kirjoittaa omia mukautettuja lohkojasi. Riippumatta siit\u00e4, mihin ne on tarkoitettu, alkaen aivan perusasioista ja jatkamalla monimutkaisempia ominaisuuksia. Suosittelen, ett\u00e4 kirjoitat kaiken itse sen sijaan, ett\u00e4 kopioit + liit\u00e4t koodin. Se on paras tapa oppia! Seuraa sarjaa vaiheista 1\u201310, kun rakennamme lohkon p\u00e4\u00e4lle edetess\u00e4mme.<\/p>\n
Ennen kuin sukeltaamme portaisiin; vastuuvapauslauseke. On muutamia asioita, jotka sinun pit\u00e4isi tiet\u00e4\u00e4 jo etuk\u00e4teen siit\u00e4, mit\u00e4 t\u00e4m\u00e4 sarja on ja mit\u00e4 se ei ole.<\/p>\n
Sinun on tiedett\u00e4v\u00e4 Javascript \u2013 se on itsest\u00e4\u00e4nselvyys. Sinun ei tarvitse olla asiantuntija, mutta t\u00e4m\u00e4 ei ole Javascript-opetusohjelma. Mit\u00e4 tulee ECMAScriptin Javascript-versioon; voit kirjoittaa ES5:ss\u00e4 etk\u00e4 murehdi koodin k\u00e4\u00e4nt\u00e4misest\u00e4 Babelin ja muiden kanssa. T\u00e4m\u00e4 sarja on kuitenkin kirjoitettu ES6- ja ESNext-koodilla. \u00c4l\u00e4 huoli \u2013 vaihe 1 on omistettu opastamaan sinua m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n ESNextiss\u00e4 koodattavaksi valmis kehitysymp\u00e4rist\u00f6 kaikkine uusineen syntakseineen.<\/p>\n
Kuten luultavasti tied\u00e4t, Gutenberg perustuu React JS<\/a> :\u00e4\u00e4n. T\u00e4m\u00e4k\u00e4\u00e4n sarja ei ole React-opetusohjelma, ja siin\u00e4 oletetaan perustiedot Reactista ja sen toiminnasta. Ei taaskaan tarvitse olla asiantuntija. Koska React on ollut jo jonkin aikaa, siell\u00e4 on paljon hyvi\u00e4 opetusohjelmia, dokumentaatiota ja resursseja, jotka on tarkoitettu opettamaan sinulle Reactia. Joten suosittelen etsim\u00e4\u00e4n n\u00e4m\u00e4 ensin.<\/p>\n T\u00e4m\u00e4 sarja keskittyy Javascript-, React- ja JSX-osien oppimiseen, eik\u00e4 se ole kiinnostunut tyylist\u00e4\/CSS:st\u00e4. Koska lohkosi tavoite voi olla dramaattisesti erilainen, olen p\u00e4\u00e4tt\u00e4nyt olla keskittym\u00e4tt\u00e4 tyyliin ja tarjonnut vain hyvin yksinkertaisen HTML:n. Sinun teht\u00e4v\u00e4si on lis\u00e4t\u00e4 tyylisi ja tarvittava HTML-tulostus, jotta lohkosi render\u00f6idy juuri sellaisena kuin tarvitset.<\/p>\n Ja lopuksi, harkitse t\u00e4m\u00e4n sarjan kirjoitusaikaa. Gutenberg on viel\u00e4 melko uusi, mutta muuttuu dramaattisesti ja sit\u00e4 parannetaan.<\/p>\n Jos l\u00f6yd\u00e4t t\u00e4m\u00e4n tulevaisuudessa, jokin koodi saattaa olla vanhentunut tai korvattu paremmilla menetelmill\u00e4. T\u00e4m\u00e4 opas on kirjoitettu ja viimeistelty WordPressin versiossa 5.2.3 (vuoden 2019 lopussa).<\/p>\n Ensimm\u00e4isiss\u00e4 osissa keskitymme perusasioihin. Perustimme kehitysymp\u00e4rist\u00f6n, jossa on k\u00e4ynniss\u00e4 koodimme k\u00e4\u00e4nn\u00f6s. Ja lohkon rekister\u00f6innin perusteet ja my\u00f6s tarvittavat PHP-osat. Opimme WordPress Gutenbergin valtavasta komponenttien ja menetelmien kirjastosta.<\/p>\n Jatkossa opimme lis\u00e4\u00e4m\u00e4\u00e4n osioita ja asetuksia lohkoomme editorin sivupalkissa (Inspector) sek\u00e4 muokkaamaan ty\u00f6kalupalkkia. Matkan varrella kosketamme paljon erilaisia \u200b\u200bsy\u00f6tt\u00f6tyyppej\u00e4 ja kuinka k\u00e4ytt\u00e4\u00e4 Gutenbergin komponenttia n\u00e4ihin. Ja tietysti opimme tallentamaan, p\u00e4ivitt\u00e4m\u00e4\u00e4n ja tulostamaan tallennetut tiedot lohkoomme \u2013 ja miten se toimii kulissien takana.<\/p>\n Lopuksi tarkastelemme edistyneempi\u00e4 asioita, kuten dynaamisia lohkoja ja PHP:n k\u00e4ytt\u00f6\u00e4 lohkotulosteen render\u00f6imiseen. Ja lopuksi viestikyselyjen tekeminen editorin sis\u00e4ll\u00e4 \u2013 jolloin k\u00e4ytt\u00e4j\u00e4 voi valita julkaisun luettelosta render\u00f6it\u00e4v\u00e4ksi.<\/p>\n Alta l\u00f6yd\u00e4t suorat linkit sarjan jokaiseen osaan.<\/p>\n Osa 1: Kehitysymp\u00e4rist\u00f6n m\u00e4\u00e4ritt\u00e4minen<\/a><\/strong> Osa 2: Lohkon rekister\u00f6iminen<\/a> Osa 3: Rekvisiitta ja WordPress-komponentit<\/a><\/strong> Osa 4: Attribuutit<\/a><\/strong> Osa 5: Tarkastajan asetusten lis\u00e4\u00e4minen<\/a><\/strong> Osa 6: Ty\u00f6kalurivien lis\u00e4\u00e4minen<\/a><\/strong> Osa 7: Omien komponenttien luominen<\/a><\/strong> Osa 8: Lohkosi k\u00e4\u00e4nt\u00e4minen<\/a><\/strong>T\u00e4m\u00e4n opetusohjelman ik\u00e4<\/h3>\n
Mit\u00e4 opit<\/h2>\n
Sis\u00e4llysluettelo<\/h3>\n
\n
\nT\u00e4m\u00e4n opetusohjelmasarjan 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.<\/p>\n<\/li>\n
\nT\u00e4ss\u00e4 osassa kirjoitamme Javascriptin mukautetun lohkomme rekister\u00f6imiseksi ja konfiguroimiseksi. Lopuksi rekister\u00f6imme skriptin PHP:ll\u00e4 ja teemme tarvittavan PHP-koodin, jotta WordPress tunnistaa sen uudeksi lohkoksi.<\/p>\n<\/li>\n
\nEdellisess\u00e4 vaiheessa opimme rekister\u00f6im\u00e4\u00e4n mukautetun lohkon sek\u00e4 Javascriptiss\u00e4 ett\u00e4 PHP:ss\u00e4. T\u00e4ss\u00e4 vaiheessa opimme k\u00e4ytt\u00e4m\u00e4\u00e4n WordPressin komponentteja erilaisten kenttien ja asetusten lis\u00e4\u00e4miseen.<\/p>\n<\/li>\n
\nT\u00e4ss\u00e4 osassa tarkastellaan attribuuttien m\u00e4\u00e4rittely\u00e4, niiden arvojen hakemista ja p\u00e4ivitt\u00e4mist\u00e4. Attribuuttien avulla voimme hyv\u00e4ksy\u00e4 sy\u00f6tteen editorista, tallentaa sen ja tulostaa sen haluamallamme tavalla.<\/p>\n<\/li>\n
\nT\u00e4ss\u00e4 vaiheessa keskitymme siihen, mit\u00e4 WordPress (ainakin koodissa) kutsuu Inspectoriksi \u2013 sivupalkkiin editorin oikealla puolella. K\u00e4sittelemme joitain uusia komponentteja, jotka on j\u00e4rkev\u00e4\u00e4 sijoittaa sivupalkkiin ja miten niit\u00e4 k\u00e4sitell\u00e4\u00e4n.<\/p>\n<\/li>\n
\nT\u00e4ss\u00e4 postauksessa opimme lis\u00e4\u00e4m\u00e4\u00e4n WordPressin ty\u00f6kalurivej\u00e4 lohkoomme eli tasausta ja lohkojen tasausta varten. Opimme my\u00f6s lis\u00e4\u00e4m\u00e4\u00e4n omia ty\u00f6kalurivej\u00e4 omilla painikkeillamme mukautettuja toimintoja varten.<\/p>\n<\/li>\n
\nToistaiseksi t\u00e4ss\u00e4 opetusohjelmasarjassa olemme kirjoittaneet kaiken koodinfunktionregisterBlockType()<\/code>. edit<\/code>Se on t\u00e4ysin mahdollista ja usein suositeltavaa m\u00e4\u00e4ritt\u00e4\u00e4 muokkaus erilliseen komponenttiin. N\u00e4in voimme hy\u00f6dynt\u00e4\u00e4 toimintoja, kuten komponenttien tila- ja elinkaarimenetelmi\u00e4.<\/p>\n<\/li>\n
\nT\u00e4ss\u00e4 osassa keskitymme lohkomme tekstien ja arvojen k\u00e4\u00e4nt\u00e4miseen. Luomme WP-CLI:n avulla tarvittavat tiedostot, jotta Gutenberg pystyy lataamaan k\u00e4\u00e4nn\u00f6ksemme WordPress-kielt\u00e4 vaihtaessaan.<\/p>\n<\/li>\n