Kolme, neljä vuotta sitten alkoi tuntumaan, että WordPress on minun osaltani pelattu läpi. Olin saavuttanut pisteen, jossa tunsin WordPressin teknisen puolen kuin omat taskuni. Ja sitä mitä en tiennyt, tiesin kuitenkin mistä ja miten etsiä tietoa. Olin kuin seppä kuuman ahjon äärellä. WordPress oli käsissäni kuuma rauta ja sain sen taipumaan juuri sellaisiin muotoihin ja tarkoituksiin kuin halusin.

Sitten tuli Gutenberg, sivustoeditori ja lohkoteemat. Yhtäkkiä tuttu WordPress-maailma muuttui ja edessäni oli aivan uudenlainen maailma uusine sääntöineen ja mahdollisuuksineen. Rautaseppä oli tuotu lasinpuhaltamoon. Gutenberg toi mukanaan uusia teknologioita, työkaluja ja lähestymistapoja. Oli Reactia, Reduxia, lohkomalleja, lohkotyylejä, lohkovariaatioita, globaaleja tyylejä, sivupohjia ja tietysti lohkoja. Hetken kirosin kohtaloani, mutta sitten innostuin.

Lohkot tarjoavat seuraavan tason uudelleenkäytettävyyttä

Suurin innostumiseni syy on tietysti lohkot. WordPressin sanaston mukaan lohkot ovat “abstrakti termi, jolla viitataan itsenäisiin kokonaisuuksiin, jotka yhteen koottuina muodostavat verkkosivun sisällön tai ulkoasun”. Ottamatta vielä edes kantaa WordPressin omaan implementaatioon, näen lohkoperusteisen ajattelun yhtenä viime vuosikymmenten merkittävimpänä edistysaskeleena web-kehityksessä. Eikä WordPressin implementaatio lohkoajattelusta ole suinkaan ensimmäinen. Vastaavanlaista ajattelua on nähtävissä niin tyylien kirjoittamiseen käytetyssä BEM-mallissa kuin Reactin komponenteissa. Meillä Valullakin tehtiin “lohkoja” jo ennen Gutenbergin lohkoja. Esimerkiksi ACF:n Flexible Content -kenttätyypin avulla rakennettiin modulaarisia sisältöelementtejä, joita pystyi käyttämään Gutenbergin lohkojen tapaan kohtuullisen joustavasti. 

Gutenberg nosti lohkoajattelun kuitenkin uudelle tasolle. Aiemmat ACF-pohjaiset lähestymistavat olivat kehittäjäkeskeisiä, mutta Gutenberg tuo modulaarisuuden suoraan käyttäjän ulottuville. Modulaarisia sisältöelementtejä (lohkomalleja) voidaan rakentaa suoraan editorissa pinoamalla lohkoja ja/tai laittamalla niitä sisäkkäin. Tämä on tarkoittanut myös sitä, että WordPressin Ydin vaikuttaa yhä enemmän sivuston esittävään kerrokseen eli frontendiin. Muutos on merkittävä, sillä aiemmin tämä oli teknisen toimittajan pelikenttää. Esittävä kerros saattoi olla melkein millainen vain, koska ei ollut mitään selkeää standardia tapaa tehdä WordPress-sivuston esittävä kerros. Nyt kuitenkin on, sillä lohkot ja lohkoteeman design-järjestelmä on nimenomaan tarkoitettu sivuston esittävän kerroksen rakennuspalikoiksi.

WordPressin lohkot yhdistettynä lohkoteemasta tulevaan design-järjestelmään ja siihen, että lohkoja voi pinota päällekkäin ja sisäkkäin, ovat toistaiseksi paras näkemäni yritys saavuttaa web-kehittämisen ikuinen Graalin malja: komponenttien uudelleenkäytettävyys. Mikään aiemmin näkemistäni tai kehittämistäni ratkaisuista ei ole ollut lähelläkään sitä uudelleenkäytettävyyden tasoa kuin mitä WordPressin lohkot parhaimmillaan ovat.

Mikään aiemmin näkemistäni tai kehittämistäni ratkaisuista ei ole ollut lähelläkään sitä uudelleenkäytettävyyden tasoa kuin mitä WordPressin lohkot parhaimmillaan ovat.

Block Bindings API on lohkojen puuttuva palanen

Lohkot ovat viime vuosina vieneet markkinoita ACF:ltä ja muilta metakentiin pohjautuvilta ratkaisuilta. Hatusta heitettynä voisin sanoa, että noin 80 prosenttia siitä datasta, joka aiemmin esimerkiksi meillä Valulla on tallennettu metakenttiin, on siirtynyt nyt lohkoihin. Tämä muutos on pienentänyt tietokannan kokoa ja siten parantanut sivuston suorituskykyä.

Lohkoissa on kuitenkin yksi heikkous: niiden sisältö määräytyy täysin sen mukaan, mitä niihin syötetään. Metakentillä on edelleen oma paikkansa tietyissä rakenteellisen datan käyttötapauksissa. Lisäksi on paljon tilanteita, joissa dataa halutaan hakea jostain ulkoisesta palvelusta tai jonkun tietyn ehdollisen logiikan mukaan. Näissä tapauksissa on turhauttavaa koodata räätälöity lohko, koska WordPressin vakiolohkot vastaisivat muuten täysin tarpeeseen.

Block Bindings API tehtiin ratkaisemaan tämä ongelma. Sen avulla lohkon attribuutti (kuten sisältö) on mahdollista sitoa johonkin muuhun lähteeseen kuin itse lohkoon. Esimerkiksi Teksti-lohko voi näyttää tietyn metakentän sisällön ja tuota arvoa voi myös suoraan muokata lohkossa samaan tapaan kuin muutakin tekstisisältöä. Metakentän lisäksi WordPressiin voi rekisteröidä myös räätälöityjä lähteitä, jolloin lohkon sisältö voi tulla käytännössä mistä tahansa, mutta lohko näyttää ja käyttäytyy silti samalla tavalla kuin muutkin Teksti-lohkot. Näin ollen projektikohtaisen räätälöidyn koodin määrä vähenee ja sitä kautta myös uudelleenkäytettävyys paranee entisestään.

WordPress Playground – tulevaisuuden kehitysympäristö?

WordPress on tunnettu nopeasta, vain viiden minuutin asennusprosessistaan. Mutta jotta tähän vaiheeseen on mahdollista päästä, on tehtävä ensin ehkä noin viiden tunnin työ, jotta palvelin saadaan valmiiksi WordPressille. Tämä hankaloittaa merkittävästi sekä sivuston kehitysprosessia että automaattisten testien tekemistä ja ajamista.

WordPress Playground on tilapäinen, täysin selaimessa toimiva WordPress-asennus, joka pyörii WebAssemblyn päällä ilman PHP-palvelinta. Haluatko kokeilla, miltä natiivi WordPress -kokemus tuntuu? Nyt se onnistuu vaivatta yhdellä hiiren klikkauksella! Samoin minkä tahansa wordpress.orgissa olevan lisäosan testaus onnistuu yhdellä hiiren klikkauksella. Etkö usko? Kokeile vaikkapa Findkit-lisäosaa ikiomassa WordPress-asennuksessasi.

WordPress Playground on kehittynyt valtavasti viime vuosina. Uusimpien päivitysten myötä se tukee nyt esimerkiksi WP-CLIta ja multisitea. Playgroundin avulla WordPressin saa pyörimään sekä VS Code editorissa että Node-ympäristössä. Blueprinttien avulla on helppo luoda oma versio WordPress-asennuksesta haluttuine lisäosineen ja sisältöineen. Tämä avaa täysin uusia mahdollisuuksia kehittäjille ja voi helpottaa esimerkiksi sivuston testausprosessia huomattavasti.

Uskon tulevaisuuteen, jossa WordPress ei ole vain alusta, johon sivusto rakennetaan, vaan WordPress on myös työkalu, jolla sivusto rakennetaan.

WordPress Playground voi tulevaisuudessa korvata kehittäjän kehitysympäristön kokonaan tai osittain. Uskon tulevaisuuteen, jossa WordPress ei ole vain alusta, johon sivusto rakennetaan, vaan WordPress on myös työkalu, jolla sivusto rakennetaan. Jo nyt olen nähnyt mielenkiintoisia kokeiluja, joissa WordPress Playground toimii lohkomallien kehitysympäristönä. Lohkomalli rakennetaan visuaalisesti WordPress Playgroundissa ja kun se on valmis, siitä voidaan tehdä pull request GitHubiin suoraan WordPressissä.

Kuvittele maailma, jossa kehittäjän työpäivä ei alakaan vagrant up -komennolla. Ei enää minuuttien odottelua, kun virtuaalipalvelin käynnistyy, ei tuntien taistelua SSH-avainten kanssa, eikä koko korttitalon hajoamista käyttöjärjestelmän päivityksen myötä. Kuvittele maailma, jossa uusi kehittäjä pääsisi ensimmäisenä työpäivänään suoraan itse asiaan? Sen sijaan, että hänen täytyisi sokkona ajaa terminaalissa komentoja, joista ei ehkä ole koskaan kuullutkaan, hän voisi aloittaa suoraan sivuston kehittämisen parissa. WordPress Playgroundin myötä tämä tulevaisuus on lähellä – ja se on todella innostavaa!

WordPressin tulevaisuus innostaa!

Tiedätkö, mikä tämän on tehnyt mahdolliseksi? Gutenberg ja lohkot. Perinteisellä WordPress-tekemisellä ei olisi koskaan ollut mahdollista saavuttaa niitä innovaatioita mitä nyt on WordPressin ekosysteemissä saavutettu. Gutenbergin kehittäminen on vaatinut taitoja, joita WordPress-yhteisössä ei aiemmin juuri ole ollut. WordPress oli aiemmin pelkästään PHP-sovellus, nyt entistä enemmän myös React-sovellus. Ja uskon, että React avasi portit muuhunkin modernimpaan JavaScript ja web-kehittämiseen. Auringonlaskun teknologiat, kuten Grunt ja JSHint, on vaihdettu nykyaikaisiin työkaluihin, kuten Webpackiin, Prettieriin ja ESLintiin. Väitän, että tämä kehitysloikka yhdistettynä tekoälyn merkittävään tulemiseen on ollut suurin syy siihen, miksi näemme nyt WordPress Playgroundin kaltaisia innovaatioita.

WordPress on jo nyt modernisoitunut valtavasti verrattuna siihen aikaan, kun aloitin WordPress sivustojen parissa työskentelyn lähes yhdeksän vuotta sitten. Tämä kehitys näkyy, ei ainoastaan lohkoissa, vaan koko ekosysteemissä, mikä on syntynyt lohkojen ympärille. Uudenlaisen ajattelutavan lisäksi on syntynyt myös uudenlaisia tapoja tehdä ja rakentaa WordPress sivustoja (aiemmin mainitsemani Block Bindings APIn lisäksi esim. Interactivity API ja HTML API). Ja uskon, että tämä on vasta alkua. Uudenlainen ajattelu synnyttää väkisinkin uudenlaisia asioita. Lohkot toimivat myös erittäin hyvin yhteen tekoälyn kanssa (toisin kuin aiemmat toimittajan omiin ratkaisuihin pohjautuneet toteutukset), joten näen WordPressin tulevaisuuden kirkkaana ja innostavana. WordPressin suunta on kohti modernimpaa tekemistä, ja se on hyvä asia kaikille.