Tämä on yksityiskohtainen opetusohjelmasarja, joka kattaa omien räätälöityjen WordPress Gutenberg -lohkojen luomisen. Se on sinulle, joka olet teeman tai laajennuksen kehittäjä ja olet, kuten minäkin, turhautunut dokumentaation puutteeseen. Suurin osa siitä, mitä olen oppinut kehittäessäni WordPressin uudessa Javascript-maailmassa, on yrityksen ja erehdyksen kautta, tarmokkaasti kokeilemalla ja lukemalla kaikkea, mitä olen käynyt. Ja siksi ajattelin, että voisin koota kaiken tähän mennessä oppimani suureen opetusohjelmaan.
Tässä 10 osassa koostuvan opetusohjelman tarkoituksena on opettaa sinulle, miten voit kirjoittaa omia mukautettuja lohkojasi. Riippumatta siitä, mihin ne on tarkoitettu, alkaen aivan perusasioista ja jatkamalla monimutkaisempia ominaisuuksia. Suosittelen, että kirjoitat kaiken itse sen sijaan, että kopioit + liität koodin. Se on paras tapa oppia! Seuraa sarjaa vaiheista 1–10, kun rakennamme lohkon päälle edetessämme.
Mitä sinun tulee tietää ennen kuin aloitamme
Ennen kuin sukeltaamme portaisiin; vastuuvapauslauseke. On muutamia asioita, jotka sinun pitäisi tietää jo etukäteen siitä, mitä tämä sarja on ja mitä se ei ole.
Ohjelmointikielet
Sinun on tiedettävä Javascript – se on itsestäänselvyys. Sinun ei tarvitse olla asiantuntija, mutta tämä ei ole Javascript-opetusohjelma. Mitä tulee ECMAScriptin Javascript-versioon; voit kirjoittaa ES5:ssä etkä murehdi koodin kääntämisestä Babelin ja muiden kanssa. Tämä sarja on kuitenkin kirjoitettu ES6- ja ESNext-koodilla. Älä huoli – vaihe 1 on omistettu opastamaan sinua määrittämään ESNextissä koodattavaksi valmis kehitysympäristö kaikkine uusineen syntakseineen.
Kuten luultavasti tiedät, Gutenberg perustuu React JS :ään. Tämäkään sarja ei ole React-opetusohjelma, ja siinä oletetaan perustiedot Reactista ja sen toiminnasta. Ei taaskaan tarvitse olla asiantuntija. Koska React on ollut jo jonkin aikaa, siellä on paljon hyviä opetusohjelmia, dokumentaatiota ja resursseja, jotka on tarkoitettu opettamaan sinulle Reactia. Joten suosittelen etsimään nämä ensin.
Tämä sarja keskittyy Javascript-, React- ja JSX-osien oppimiseen, eikä se ole kiinnostunut tyylistä/CSS:stä. Koska lohkosi tavoite voi olla dramaattisesti erilainen, olen päättänyt olla keskittymättä tyyliin ja tarjonnut vain hyvin yksinkertaisen HTML:n. Sinun tehtäväsi on lisätä tyylisi ja tarvittava HTML-tulostus, jotta lohkosi renderöidy juuri sellaisena kuin tarvitset.
Tämän opetusohjelman ikä
Ja lopuksi, harkitse tämän sarjan kirjoitusaikaa. Gutenberg on vielä melko uusi, mutta muuttuu dramaattisesti ja sitä parannetaan.
Jos löydät tämän tulevaisuudessa, jokin koodi saattaa olla vanhentunut tai korvattu paremmilla menetelmillä. Tämä opas on kirjoitettu ja viimeistelty WordPressin versiossa 5.2.3 (vuoden 2019 lopussa).
Mitä opit
Ensimmäisissä osissa keskitymme perusasioihin. Perustimme kehitysympäristön, jossa on käynnissä koodimme käännös. Ja lohkon rekisteröinnin perusteet ja myös tarvittavat PHP-osat. Opimme WordPress Gutenbergin valtavasta komponenttien ja menetelmien kirjastosta.
Jatkossa opimme lisäämään osioita ja asetuksia lohkoomme editorin sivupalkissa (Inspector) sekä muokkaamaan työkalupalkkia. Matkan varrella kosketamme paljon erilaisia syöttötyyppejä ja kuinka käyttää Gutenbergin komponenttia näihin. Ja tietysti opimme tallentamaan, päivittämään ja tulostamaan tallennetut tiedot lohkoomme – ja miten se toimii kulissien takana.
Lopuksi tarkastelemme edistyneempiä asioita, kuten dynaamisia lohkoja ja PHP:n käyttöä lohkotulosteen renderöimiseen. Ja lopuksi viestikyselyjen tekeminen editorin sisällä – jolloin käyttäjä voi valita julkaisun luettelosta renderöitäväksi.
Sisällysluettelo
Alta löydät suorat linkit sarjan jokaiseen osaan.
-
Osa 1: Kehitysympäristön määrittäminen
Tämän opetusohjelmasarjan ensimmäisessä osassa, kuinka luodaan mukautettuja Gutenberg-lohkoja, meidän on määritettävä kehitysympäristömme. Tarvitsemme paikan, johon voimme kirjoittaa koodimme ES6/ESNext-syntakseihin ja kääntää sen liikkeellä ollessamme. -
Osa 2: Lohkon rekisteröiminen
Tässä osassa kirjoitamme Javascriptin mukautetun lohkomme rekisteröimiseksi ja konfiguroimiseksi. Lopuksi rekisteröimme skriptin PHP:llä ja teemme tarvittavan PHP-koodin, jotta WordPress tunnistaa sen uudeksi lohkoksi. -
Osa 3: Rekvisiitta ja WordPress-komponentit
Edellisessä vaiheessa opimme rekisteröimään mukautetun lohkon sekä Javascriptissä että PHP:ssä. Tässä vaiheessa opimme käyttämään WordPressin komponentteja erilaisten kenttien ja asetusten lisäämiseen. -
Osa 4: Attribuutit
Tässä osassa tarkastellaan attribuuttien määrittelyä, niiden arvojen hakemista ja päivittämistä. Attribuuttien avulla voimme hyväksyä syötteen editorista, tallentaa sen ja tulostaa sen haluamallamme tavalla. -
Osa 5: Tarkastajan asetusten lisääminen
Tässä vaiheessa keskitymme siihen, mitä WordPress (ainakin koodissa) kutsuu Inspectoriksi – sivupalkkiin editorin oikealla puolella. Käsittelemme joitain uusia komponentteja, jotka on järkevää sijoittaa sivupalkkiin ja miten niitä käsitellään. -
Osa 6: Työkalurivien lisääminen
Tässä postauksessa opimme lisäämään WordPressin työkalurivejä lohkoomme eli tasausta ja lohkojen tasausta varten. Opimme myös lisäämään omia työkalurivejä omilla painikkeillamme mukautettuja toimintoja varten. -
Osa 7: Omien komponenttien luominen
Toistaiseksi tässä opetusohjelmasarjassa olemme kirjoittaneet kaiken koodinfunktionregisterBlockType().editSe on täysin mahdollista ja usein suositeltavaa määrittää muokkaus erilliseen komponenttiin. Näin voimme hyödyntää toimintoja, kuten komponenttien tila- ja elinkaarimenetelmiä. -
Osa 8: Lohkosi kääntäminen
Tässä osassa keskitymme lohkomme tekstien ja arvojen kääntämiseen. Luomme WP-CLI:n avulla tarvittavat tiedostot, jotta Gutenberg pystyy lataamaan käännöksemme WordPress-kieltä vaihtaessaan. -
Osa 9: Dynaamiset lohkot
Toistaiseksi olemme renderöineet lohkon tulosteen Javascriptissä. Dynaamisen sisällön, kuten viimeaikaisten viestien tai viestien näyttämisen, kanssa saatamme kuitenkin vaatia, että lohkon tulosteet renderöidään PHP:ssä. -
Osa 10: Viestien ja korkeamman asteen komponenttien hakeminen
Viimeisessä osassa opimme käyttämään korkeamman asteen komponentteja ja näin ollen kuinka suorittaa tekstikysely editorin sisällä ja tarjota menetelmä viestien valitsemiseen.