“Vain muutos ja WordPressin editori on pysyvää”, olisi antiikin ajan kreikkalainen filosofi Herakleitos todennut, jos olisi kirjoittanut filosofisia pohdintojaan WordPressillä. WordPressin editori onkin viimeisen 10 vuoden aikana kokenut vain vähäisiä muutoksia, mutta Herakleitos olisi tästä huolimatta ollut lopulta väärässä.
Mistä on kyse?
Joulukuussa 2016 pidetyssä vuotuisessa “State of the Word” -puheessaan Matt Mullenweg (yksi WordPressin perustajista) sanoi, että editorin uudistaminen tulee olemaan yksi vuoden 2017 kehittämiskohteista. Vähän tämän jälkeen projekti sai nimekseen Gutenberg ja ensimmäinen julkinen versio uudesta editorista julkaistiin kesäkuussa 2017. Viime vuoden “State of the Word” -puheessa nähtiin livedemo Gutenberg-editorin käytöstä. Tuolloin Mullenweg arvioi, että Gutenberg yhdistettäisiin WordPressin Coreen huhtikuussa 2018. Uskoisin kuitenkin, että WordPressiä käyttävät ihmiset voivat syödä mämminsä ja pääsiäismunansa rauhassa, sillä jopa alustavaan yhdistymispyyntöön on vielä matkaa. Ehkä jopa vappumunkit ja juhannusmakkaratkin löytävät tiensä suomalaisten mahaan ennen kuin Gutenberg löytää tiensä WordPressin Coreen.
WordPressiä käyttävät ihmiset voivat syödä mämminsä ja pääsiäismunansa rauhassa, sillä jopa alustavaan yhdistymispyyntöön on vielä matkaa.
Kaksi asiaa on kuitenkin varmaa: Gutenberg tulee Coreen ja tullessaan se muuttaa kaiken. Tai no, ei ehkä ihan kaikkea, mutta paljon kuitenkin. En liioittele kovinkaan paljoa todetessani, että Gutenberg on suurin ja näkyvin muutos sisällönsyöttäjälle sitten vuoden 2013 hallinnan käyttöliittymän muuttumisen. Muutos on omasta mielestäni tervetullut, sillä nykyinen WordPressin editori on kohtuullisen kankea eikä kovinkaan mukautumiskykyinen. Lyhytkoodit ovat oikeastaan olleet ainoa tapa lisätä uudenlaista ja monipuolisempaa sisältöä editoriin, mutta niiden intuitiivisuus ja helppokäyttöisyys on kaukana siitä, mitä kunnolliselta WYSIWYG-editorilta voisi odottaa.
Siinä missä nykyisen editorin sisältö käsitellään ja monesti käsitetäänkin vain yhtenä isona massana, Gutenberg siirtää huomion editorin sisältöä pienempään yksikköön – blokkiin. Jokainen otsikko, tekstikappale, kuva ja lainaus tulee olemaan oma blokkinsa. Kehittäjä voi lisätä blokkeja ja täten mahdollistaa esim. yhteystietokortin helpon lisäämisen haluttuun kohtaan sivun sisällössä. Blokit voivat olla myös jaettuja-blokkeja, jolloin niitä voi ripotella pitkin sivustoa ja yhdellä muutoksella blokin sisältö muuttuu kaikkialla.
Omissa toteutuksissamme olemme jo enenevässä määrin pyrkineet noudattamaan blokkimaista ajattelua, joten siirtyminen Gutenbergin blokkifilosofiaan kuulostaa luontevalta askeleelta otettavaksi. Nykyiset blokki-toteutuksemme ovat pitkälti rakennettu käyttäen hyödyksi WordPressin metakenttiä ja Advanced Custom Fields Pro -lisäosaa. Tämä ratkaisutapa on osoittanut parhaaksi mahdolliseksi niistä vaihtoehdoista, mitä on ollut saatavilla. Sisällönsyöttäjän näkökulmasta tilanne kuitenkin saattaa muistuttaa enemmän Forrest Gumpin suklaarasiaa kuin todellista WYSIWYG-kokemusta. Ei ole välttämättä kovin helppoa hahmottaa mihin mikäkin kentän sisältö tulostuu ja millaisessa ulkoasussa. Ainoa vihje lopullisesta ulkoasusta on blokille/kentälle annettu nimi, joka sekään ei aina ole osunut kohdilleen. Gutenberg tulee muuttamaan tämän, sillä 95% todennäköisyydellä hallinnassa näkyvä blokki tulee näyttämään juuri siltä myös frontissa. Jätän mielivaltaisen 5% mahdollisuuden sille, että kehittäjä haluaakin tulla väliin ja muuttaa blokin ulkoasua ja/tai sisältöä siinä vaiheessa, kun blokki tallennetaan kantaan ja/tai tulostetaan sivulle. Gutenberg nimittäin tarjoaa mahdollisuuden myös tähänkin.
Mitä tapahtuu konepellin alla?
Gutenbergin koodi on kirjoitettu Reactilla ja uusien blokkien lisääminen tulee vaatimaan kehittäjältä jonkin verran React-osaamista tai ainakin hyvää Javascriptin luku- ja kirjoitustaitoa. Blokin luomisessa käytetään hyväksi wp.element.createElement -funktiota mikä on abstraktio Reactin createElement-funktiosta. Sivun muokkausnäkymässä blokista luodaan objekti, joka ylläpitää tietoa siitä mikä kunkin kentän arvo kulloinkin on. Tätä voi verrata Reactin komponenttien tilaan (Component State).
Blokille pitää määritellä vähintään kaksi metodia: edit ja save. Edit-metodissa kuvataan, miltä blokki näyttää sivun muokkausnäkymässä. Save-metodissa puolestaan määritellään mitä tietokantaan tallennetaan ja millaisessa muodossa eli sen miltä blokki näyttää frontissa. Blokin sisältö voidaan tallentaa myös metakenttiin. Tällöin blokin ulkoasu määritellään PHP:n puolella vähän samaan tapaan kuin nykyään lyhytkoodien kohdalla ja kenttien arvot haetaan tutulla get_post_meta -funktiolla.
Blokki tallennetaan tietokantaan HTML-elementtinä, jota ympäröi HTML-kommentit tai pelkkänä HTML-kommenttina, jos blokin data tallennetaan metaan. Näiden HTML-kommenttien avulla blokki voidaan muuttaa takaisin Gutenbergillä muokattavaan muotoon. Esimerkki tietokantaan tallennettavan blokin muodosta löytyy WordPressin omasta dokumentaatiosta.
Entä hyödyt ja haasteet?
Gutenberg-projekti on jo nyt käynyt pitkän prosessin ja aiheuttanut paljon kiivasta keskustelua WordPress-yhteisössä. Osa on pelännyt sen tuloa ja kuinka se tullessaan hajottaa kaiken. Osa on kauhistellut sen kiivasta kehitystahtia ja sen kehittäjien suurta hinkua saada se pultattua mahdollisimman nopeasti kiinni WordPressin Coreen. Osa moittii kuinka se siirtää WordPressin takaisin blogi-maailmaan juuri kun se on kovalla työllä saatu nostettua uskottavaksi julkaisujärjestelmäksi myös enterprise-tason sivustoille. Osa on jopa harkinnut Coren jäädyttämistä nykyiseen versioon omilla kopioillaan. Mielipiteitä on varmasti yhtä monia kuin on WP-kehittäjiäkin.
Tunnustettava kuitenkin on, että Gutenberg tulee tarpeeseen. Nykyinen editori on tuulahdus ajasta, jolloin Apple julkaisi ensimmäisen 3G-yhteyttä tukevan puhelimensa ja suomalaisten taskuissa soi vielä Nokia Tune. Tässä mielessä Gutenberg on win-win kaikille, jotka työskentelevät WordPressin parissa. UI-suunnittelijoille se antaa enemmän mahdollisuuksia sivun visuaaliseen ilmeen rakentamiseen. Sisällönsyöttäjät saavat laajemmat mahdollisuudet muokata sisällön lisäksi myös sivun ulkoasua. Kehittäjät puolestaan pystyvät tarjoamaan sisällönsyöttäjille tarkkaan rajoitetun joukon blokkeja ja niiden variaatioita. Tällä kaikella voidaan varmistaa, että sivuston huolella harkittu ulkoasu ei räjähdä käsiin ja kuitenkin tarjota sisällönsyöttäjille riittävästi mahdollisuuksia ulkoasultaan monipuolisen sisällön luomiseen.
Tunnustettava kuitenkin on, että Gutenberg tulee tarpeeseen. Nykyinen editori on tuulahdus ajasta, jolloin Apple julkaisi ensimmäisen 3G-yhteyttä tukevan puhelimensa ja suomalaisten taskuissa soi vielä Nokia Tune.
Suuresta versionumerostaan huolimatta Gutenberg on vielä omaa paikkaansa maailmassa etsivä teini. Sen huomaa vaatimattomasta dokumentaatiosta ja vaihtelevasta yhteensopivuudesta eri lisäosien kanssa. Yhteensopivuus wordpress.orgin suosituimpien lisäosien kanssa on vielä pitkälti selvittämättä. Myös itse Gutenbergin toiminnallisuuden kanssa on tekemistä. Esimerkiksi metakenttiin tallentamisen suhteen tulee ongelmia viimeistään siinä vaiheessa, kun samaa blokkia halutaan käyttää samalla sivulla useaan kertaan.
Näistä haasteista WordPress-yhteisö varmasti tulee selviytymään, mutta selviytyäkseen se tarvitsee vahvaa Javascript osaamista. Ja tässä piileekin suurin Gutenbergin asettama haaste. WordPress-toteutukset ovat tähän mennessä pitkälti tehty PHP, CSS ja HTML -tekniikoilla ja Javascriptin osaaminen on väistämättä jäänyt toissijaiseksi. Näin ei voi Gutenbergin jälkeen enää olla. Artikkelin editointiin liittyvät muutokset ovat vasta ensimmäinen vaihe WordPressin hallinnan modernisoinnissa. Mitä tahansa se tarkoittaakin, Javascriptin osuus ja merkitys tulee kasvamaan sekä Coressa että WordPress-toteutuksissa. Viimeistään siis nyt WordPress-kehittäjän kannattaa sukeltaa syvälle Javascriptiin.