Tämän postauksen tarkoituksena on auttaa sinua ymmärtämään WordPressin uuden editorin kehittämisen keskeiset käsitteet. Gutenberg. Gutenberg on vielä melko uusi tätä kirjoittaessaan. Ja kuten kaikkien uusien teknologioiden syntymävaiheessa, dokumentaatio ja standardit ovat valitettavasti hieman puutteellisia.
WordPressin dokumentaatiosivustolla on suuri Gutenbergille omistettu osio kehittäjille; nimeltään Gutenbergin toimittajan käsikirja. Se sisältää jo melkoisen määrän tietoa. Mutta se voi olla hieman hämmentävää tai pelottavaa henkilölle, joka on aivan uusi Javascript-pohjaisten tekniikoiden käytössä. PHP-keskeisille kehittäjille, joilla saattaa olla vain Javascriptin/jQueryn perustiedot, WordPressin uudet tekniikat saattavat tuntua pelottavilta. Mutta luota minuun, kun opit keskeiset käsitteet, näet, mitä uusia mahdollisuuksia sinulla on nyt WordPress-kehittäjänä.
Aloitetaan ehdottomista perusasioista. Mitä ohjelmointikieliä ja työkaluja sinun pitäisi käyttää tai opetella kehittääksesi Gutenbergiä parhaiten?
Kieli ja kirjastot, jotka sinun tulee osata
Lyhyt vastaus siihen, mitä kieltä sinun tulee käyttää kehittämiseen Gutenbergiin, on: Javascript. Javascriptin maailmassa on kuitenkin useita käsitteitä, laajennuksia ja työkaluja, joista sinun pitäisi olla tietoinen.
Ensinnäkin kyse on Javascript-versiosta. Javascriptillä on virallinen standardointi; ECMAScript. ECMAScript 5 (usein lyhennettynä ES5 :ksi) ilmestyi noin 10 vuotta sitten, ja se on Javascript-versio, jonka useimmat meistä kehittäjät tuntevat. Sitten meillä on ECMAScript 6 (usein lyhennetty ES6 :ksi), joka julkaistiin vuonna 2015. Jotkut kutsuvat tätä versiota nimellä ES2015. Ja lopuksi on ESNext, joka on dynaaminen nimi, joka kattaa tulevan version ja sisältää ehdotuksia, jotka toivomme sisällytettävän mihin tahansa seuraavaan standardoituun Javascriptin versioon.
Saatat ajatella näin: "Joten kaikki on hyvä ja kaikki, Javascriptin uudemmat versiot tarkoittavat vain enemmän ominaisuuksia. Joten käytän vain uusinta." Mutta on erittäin tärkeä asia, joka sinun on tiedettävä Javascript-versioista, ja se on tämä: Useimmat selaimet ymmärtävät nykyään vain ES5:tä.
Tämä tarkoittaa, että jos haluat kirjoittaa Javascriptin ES6:ssa tai ESNextissä, sinun on määritettävä työkalut, jotka muuttavat koodisi ES5:ksi, jotta selaimet ymmärtävät sen. Mutta ennen kuin alat miettiä ES6:n ja ESNextin oppimisen ohittamista kokonaan, muista, että ES5 on 10 vuotta vanha. Ja se vaatii sinua kirjoittamaan paljon enemmän koodia. Se on myös paljon vähemmän luettava ja monimutkaisempi kuin jos kirjoitat sen ES6:ssa tai ESNextissä.
Lisäksi Gutenbergin konsepteihin kannattaa käyttää myös JSX :ää – Javascriptin syntaksilaajennusta. JSX on myös kieli, jota selaimet eivät voi ymmärtää muuttamatta sitä.
Joten miksi vaivautua ES6:een, ESNextiin tai JSX:ään?
Jos et ole vieläkään vakuuttunut siitä, että ES6/ESNext on ylimääräisen vaiheen arvoinen sen muuntamiseksi, anna minun näyttää sinulle koodivertailu. ES6:lla ja JSX:llä voit kirjoittaa tämän yksinkertaisen kappaleen palauttamiseksi; luokka ja dynaaminen tulos muuttujasta;
Niille teistä, jotka ovat uusia tämän suhteen ja luulette, että olen unohtanut lainaukset – ei, en ole. Tämä on JSX:n yksinkertaisuus. Verrataanpa yllä olevaa siihen, miten kirjoitat ES5- ja WordPressin Javascript-kirjastoilla:
return wp.element.createElement(
'p',
{ className: 'example' },
'Hello, my name is ' + name
);Kaikki yllä oleva koodi vaaditaan ES6:n ja JSX:n toiminnan tulostamiseen yksikössä erittäin helposti luettavalla rivillä! Kuvittele rakentavasi monimutkaisempaa käyttöliittymää tapahtumien ja ehtojen avulla, kun pelkkä kappale vaatii tämän hankalan koodinpätkän.
Oletko vakuuttunut? Hyvä!
Muunnostyökalut ja React JS
Yleisin ja WordPressin käyttämä työkalu ES6/ESNextin muuntamiseen on Babel. Yleensä käytät Babelia Webpackin laajennuksena , joka on työkalu, joka niputtaa ja pienentää Javascript-tiedostosi. Molemmat työkalut käyttävät Node.js :ää, joka antaa sinulle työkaluja Webpack- ja Babel-komentosarjojen suorittamiseen komentorivillä. Jos tämä kuulostaa hämmentävältä, minulla on viesti, joka selittää perusteellisesti, kuinka kaikki nämä työkalut asetetaan Gutenbergin kehittämiseen.
Toinen asia, joka sinun on tiedettävä teknologioista, on se, että Gutenberg perustuu React JS :n päällä olevaan abstraktiokerrokseen. React JS on Facebookin ylläpitämä avoimen lähdekoodin Javascript-kirjasto, joka julkaistiin noin vuonna 2013. Koska React on ollut olemassa jo jonkin aikaa, tästä kirjastosta on runsaasti opetusohjelmia, oppaita ja dokumentaatiota. Reactin virallisella sivustolla on hyvä, yksityiskohtainen opetusohjelma sinulle, joka on uusi Reactin käyttäjä. Sinun ei todellakaan tarvitse olla Reactin asiantuntija kehittääksesi Gutenbergiä, mutta sen komponenttien ja tilojen kanssa toimimisen perusteet auttavat sinua suuresti ymmärtämään Gutenbergiä.
Lopuksi:
- Learning React JS auttaa ymmärtämään kuinka Gutenbergille kehittyä. Varsinkin jos haluat luoda omia mukautettuja lohkoja tai mukauttaa olemassa olevia.
- Voit tehdä käyttämällä vain ES5 Javascriptiä, mutta on ehdottomasti suositeltavaa oppia ES6, ESNext ja JSX.
- Tutustu työkaluihin, joita tarvitaan, jotta voit muuntaa ES6 / ESNext / JSX-koodisi. Nämä työkalut ovat npm, Webpack ja Babel.
Uusi tapa tallentaa viestien sisältöä ja miksi
Yksi Gutenbergin suurimmista eduista on siirtyminen pois kiinteästä HTML:stä postaussisällössä. WordPress, ennen Gutenbergiä, ja useimmat verkkopohjaiset sisällönhallintajärjestelmät tallentavat artikkelien sisällön puhtaalla HTML-kielellä. Tämä ei yleensä ole ongelma yksinkertaisen sisällön (otsikoiden ja kappaleiden) kanssa. Mutta se voi olla suurempi ongelma monimutkaisemman ja dynaamisemman monipuolisen sisällön kanssa.
Kaikki sisällönhallintajärjestelmät, jotka sallivat dynaamisen sisällön artikkelin sisällössä, kohtaavat ongelmia sen tallentamisessa kelvollisena HTML-koodina. Tämä voi olla mikä tahansa kuva, joka viittaa sen tunnukseen järjestelmässä koko URL-osoitteen sijaan. Tai widget, joka näyttää dynaamisesti uusimmat viestit tietyssä kategoriassa. Normaalisti tämä ratkaistaan antamalla mukautettu salaperäinen HTML-koodi, jota ei ole järkevää tulostaa normaalisti. Anna sitten CMS-jäsentimen muuttaa nämä HTML-kappaleet merkityksellisiksi tai dynaamiksi. Tämän haittapuolena on, että jos siirrät sisältösi toiseen sisällönhallintajärjestelmään, seurauksena on usein ruma HTML. Sisältö täytetään jäsentämättömällä HTML-koodilla, joka sinun on siivottava manuaalisesti. Tämä ongelma on se, mitä Gutenberg pyrkii ratkaisemaan.
Gutenbergin kanssa WordPress on päättänyt tallentaa lisää ja dynaamisia tietoja HTML-kommentteina. HTML-kommentit eivät ole koskaan nähtävissä sivuston käyttäjille, ja periaatteessa mikä tahansa on sallittua kommenttilohkossa. HTML-kommentti alkaa <!--ja päättyy -->, ja Gutenberg tallentaa tiedot tietyssä rakenteessa JSON-muodossa. Jokainen Gutenbergin lohko on kääritty alkavaan HTML-kommenttiin ja sen jälkeen päättyvään HTML-kommenttiin.
Viestisisältö tallennetaan uudella tavalla
En mene yksityiskohtiin kommenttilohkojen rakenteesta – löydät yksityiskohtaisen oppaan tästä WordPress Editorin käsikirjasta. Mutta esimerkkinä yksinkertainen kappale Gutenberg-viestin sisällöstä tallennetaan tietokantaan seuraavasti:
Mitä tulee dynaamiseen sisältöön, HTML-koodia ei yleensä tulosteta ollenkaan. Kaikki tiedot, joita WordPress tarvitsee ymmärtääkseen, mitä tämä lohko tekee, löytyy HTML-kommenteista. Näin Gutenberg tallentaa "Viimeisimmät viestit" -lohkon:
Koska kaikki on HTML-kommentteja, viestien siirtäminen toiseen WordPressiin ilman Gutenbergiä tai toista sisällönhallintajärjestelmää varmistaa, ettei rumaa jäsentämätöntä HTML:ää syljetä ulos. Se yksinkertaisesti jätetään huomiotta ja ohitetaan.
Kuten olet luultavasti jo havainnut, kommenttilohkot alkavat lohkon nimellä, jonka etuliitteenä on " wp". Jos mukautettuja asetuksia on, ne tulostetaan nimen jälkeen JSONissa, kuten näet viimeisimmät viestit -lohkon esimerkistä. Gutenberg viittaa näihin ominaisuuksiin, ja tämä käsite on jotain, johon tulet hyvin tutuksi, kun alat oppia kehittämään Gutenbergiä.
Hyödyllinen tietää:
Jos haluat tutustua tarkemmin siihen, miten uusi viestisisältö tallennetaan, voit tarkastella wp_poststietokannassasi olevaa taulukkoa. On toinenkin helpompi tapa kurkistaa tietokannan koko arvoon WordPress-malleista. Käytä silmukan yksittäisessä mallissa yksinkertaisesti " echo get_the_content()". Normaalin " the_content()" käyttäminen tulostaa jäsennetyn viestin sisällön, mutta sisällön arvon toistaminen tulostaa tarkalleen sen, mikä on tallennettu tietokantaan. Voit käyttää Inspect-työkalua tai tarkastella lähdekoodia Chromessa tai Firefoxissa nähdäksesi kommenttilohkot.
Mitä sinä kehittäjänä voit tehdä Gutenbergissä
Sinulla on pari vaihtoehtoa, kuinka voit mukauttaa teemojasi tai laajennuksiasi Gutenbergille. Alla on lueteltu yleisimmät mukautukset, joita todennäköisesti tekisit kehittäjänä.
Laajenna ja mukauta olemassa olevia lohkoja
WordPress Gutenbergin mukana tulee suuri joukko lohkotyyppejä, ja voit laajentaa mitä tahansa näistä. Voit myös poistaa osan niistä tai päättää tietyissä tapauksissa sallia tai poistaa vain osan niistä.
Yleisin tapa laajentaa lohkoa on lisätä mukautettuja lohkotyylejä – jotka ovat lohkon tyylimuunnelmia. Lohkotyylit eivät ole niin yleisiä oletusarvoisessa WordPressissä, mutta niitä on. Katsokaa lainauslohkoa. Gutenberg-editorissa oikeanpuoleisessa sivupalkissa on laatikko nimeltä "Tyylit".
Toinen tapa mukauttaa olemassa olevia lohkoja on käyttää suodattimia. Olet todennäköisesti perehtynyt PHP:tä käyttäviin suodattimiin WordPressissä, mutta Gutenbergissä on nyt Javascript-pohjaisia suodattimia lohkoissa. Voit esimerkiksi lisätä omia mukautettuja attribuutteja (asetuksia) kaikkiin tai tietyntyyppisiin lohkoihin tai suodattaa, kuinka ne tallennetaan tai tulostetaan.
Voit myös muokata lohkoluokkia sekä poistaa tai sallia tiettyjä lohkoja tietyissä tilanteissa. Tai voit esimerkiksi varmistaa, että vain muutama lohkotyyppi on sallittu mukautetulle viestityypille.
Luo omat mukautetut lohkot
Mukautettujen lohkojen luominen on ehkä ensimmäinen ajatus, jonka useimmat WordPress-kehittäjät ajattelevat. WordPressin oletuslohkot voivat mennä pitkälle, mutta jos olet rakentamassa monimutkaisempaa teemaa tai laajennusta, sinulla on todennäköisesti erityistarpeita. Esimerkiksi Gutenbergin avulla luodaan kivan näköinen etusivu, jossa on pikakuvakkeet sisältöön ja dynaamiseen sisältöön. Suurin osa räätälöinnistä on mahdollista käyttämällä CSS-luokkavaihtoehtoa, joka on olemassa kaikille lohkoille. Mutta tämä ei ole erityisen käyttäjäystävällinen.
Omien mukautettujen lohkojen kirjoittaminen on luultavasti vaikeinta muokata teemaa tai laajennusta Gutenbergille. Mutta se voi olla myös palkitsevin! Sen lisäksi, että pystyt luomaan lohkoja, jotka toimivat ja näyttävät juuri sellaisilta kuin haluat niiden näyttävän – se on myös loistava tapa oppia nopeasti uudesta Javascript-pohjaisesta tekniikasta.
Varmista, että teemasi on Gutenberg-valmis
Jos olet WordPress-teeman kehittäjä, sinun tulee olla tietoinen siitä, että Gutenbergin teemasi saattaa vaatia paljon asetuksia, erityisesti muodossa add_theme_support(). WordPressin käsikirjassa on hyvä yleiskatsaus kaikista teematuista, jotka sinun on otettava huomioon tehdäksesi teemastasi Gutenberg-valmis.
Oletusarvoisesti WordPress käsittelee useimmat oletuslohkojen tyylit itse, joten sinun ei tarvitse huolehtia liikaa näiden tyylistä teemassasi. Mutta teeman kehittäjät ovat yleensä nirsompia suunnittelunsa ja tyylinsä suhteen. Joten sinun on todennäköisesti säädettävä tai lisättävä lohkotyyliä. Voit lisätä muokkaustyylejä vain käyttöliittymään, vain editoriin tai molempiin. WordPress Gutenberg -käsikirja tarjoaa yleiskatsauksen editorin tyyleistä ja oletuslohkotyyleistä.
Mukana on myös lohkomallien konsepti, jossa voit ennalta määrittää, mitkä lohkot viesteissä näkyvät. Lohkomalleja voidaan käyttää paikkamerkkinä auttamaan editoria lohkojen täyttämisessä. Mutta sitä voidaan käyttää myös kiinteän lohkojen ja paikkojen määrittämiseen.
Ja lopuksi, käytettävissä on toimintoja, jotka toimivat Gutenberg-jäsentimen kanssa ja kuinka poimia lohkoja viesteistä. Koska kaikki sisältö on tallennettu täydellisillä tiedoilla sisällön tyypistä, voit helposti poimia tiettyjä osia julkaisun sisällöstä. Hyvä esimerkki on viestien ensimmäisen kappaleen purkaminen näytettäväksi otteena. Erittäin hyödyllinen PHP-toiminto tälle konseptille on [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), joka käyttää Gutenbergin jäsentäjää annettuun viestisisältöön ja vastineeksi saat PHP-taulukon, jossa on kaikki estotiedot ja sisältö.
Johtopäätös
Toivottavasti tämä postaus ei ole vain opettanut sinulle jotain Gutenbergin kehittämisestä, vaan myös saanut sinut uteliaaksi ja kiinnostuneeksi oppimaan lisää! PHP-painotteisena WordPress-kehittäjänä, joka alun perin vastusti ajatusta vaihtamisesta Javascript-pohjaiseen tekniikkaan, voin kertoa sinulle, että kun olet ottanut askeleen oppiaksesi "uudesta tavasta", olet iloinen siitä. Gutenberg avaa uusia tapoja räätälöidä, suunnitella ja näyttää WordPress-sisältöä ilman sivunrakennusohjelmia tai teemoja, joissa on raskaita kirjastoja mahdollistaakseen joustavan ja hyvännäköisen viestisisällön. Meidän on vain opittava työskentelemään sen kanssa optimaalisesti!