Gutenberg-editori tuloillaan

Onko sivustosi valmiina muutoksiin?

Mitä uusi editori merkitsee sisällönsyötölle? Käyn tässä artikkelissa läpi, mikä Gutenberg-editori on, ja miten se tulee vaikuttamaan sisällönsyöttöön ja jo tehtyihin sivustoihin.

Milloin Gutenberg-editori on tulossa osaksi WordPressiä?

WordPress-tiimi on tuonut mahdollisuuden ottaa Gutenbergin käyttöön jo tuoreimmassa WP-versiossa (4.9.8). Ohjausnäkymän kautta voit ladata ja ottaa uuden editorin käyttöösi.

Gutenberg mahdollista ottaa käyttöön jo versiossa 4.9.8
Kehotus uuden editorin käyttöönotosta uusimmassa WP-versiossa 4.9.8.

Gutenberg-editori on edelleen kehitysvaiheessa, joten suosittelen varauksella sen käyttöönottoa.

Jos haluat sivustosi toimivan varmuudella myös jatkossa, asenna perinteinen muokkain (classic editor -lisäosa), kunnes teemakehittäjä on varmistanut Gutenberg-yhteensopivuuden.

Osaksi WordPress-ydintä uusi editori on tulossa näillä näkymin versioon 5.0, joka julkaistaan loppuvuoden aikana, ehkäpä jo alkusyksynä.

Otetaan uusi muokkain testiin…

Otin Gutenbergin käyttöön Luuptekin kehitysversiossa testimielessä leikkimiseen.

Uusi editori tuli saman tien näkyviin Sivut ja Artikkelit alle luoduille ”postauksille”. Ns. custom post type -artikkeleille (kuten tämä blogikirjoitus) uusi editori loisti poissaolollaan. Ilmeisesti koodipuolella uusi editori täytyy jotenkin asettaa käyttöön custom post type -artikkeleille.

Uusi muokkain käytössä
Uusi muokkain ”WordPress-sivut” -sivun muokkausnäkymässä.

Yllätyin, koska sivut toimivat edelleen kuten aiemmin, ja kaikki sivulla olevat tiedot ovat muokattavissa. Käytän Advanced Custom Fields -lisäosaa useimmiten, ja kuten kuvasta näkyy, ACF:llä luodut kentät ovat nätisti muokattavissa kuten ennenkin! Tosin… ACF:llä luodut editor-kentät eivät toimi oikein, eikä tekstin muotoilua tai kuvien lisäämistä voi tehdä. Toki voi olla, että tämä on korjattu aivan uusimmassa ACF:n versiossa (itse asiassa viimeistään versio 5.7.1 korjaa tämän ongelman).

Kuten yllä olevasta kuvasta näkee, ovat julkaisu- ja päivitysnapit siirtyneet kiinteästi sivun yläreunaan, ja julkaisun muut asetukset ovat dropdown-tyyppisissä omissa valikoissaan sivun oikeassa reunassa.  Document/Block-valinnalla voi vaihtaa editointia joko koko dokumentin tai muokattavan Gutenberg-”blokin” välillä.

Gutenbergin ”blokit”

Uusi muokkainfiilis koostuu niin sanotuista ”blokeista” (block), joita voi olla esimerkiksi:

  • tekstikappale
  • otsikko
  • nappi (button)
  • lista
  • erilaisia widgetteja
  • erilaisia layout-blokkeja
  • upotuksia ulkoisista kanavista

En käy kaikkia eri vaihtoehtoja läpi, koska niitä on todella paljon. Periaatteessa kaikki nykyisen klassisen muokkaimen tekstieditointityökalut ovat lisätty blokeiksi, ja lisäksi mukaan on tuotu widget-tyyppisiä blokkeja (kuten viimeisimmät julkaisut tai kommentit), erilaisia upotuksia eri some-kanavista, sekä ns. layout-tyyppisiä blokkeja (esim. kaksi vierekkäistä solua tai jonkinlainen separator-elementti).

Jokaista blokkia voi muutella block-valinnan kautta ja esim. nappi-blokkiin voi määritellä helposti napissa olevan tekstin, mahdollisen urlin, sekä tekstin ja taustan värin. Nappi-blokki taitaakin olla ainoa, mistä voisi itselle olla jotain hyötyä uudessa muokkaimessa.

Gutenberg ja ACF

Kuten aiemmin kerroin, tykkään käyttää ACF:ää todella paljon. ACF tarjoaa (ja on tarjonnut jo kauan) saman editointituntuman ns. joustavalla sisältökentällä. Joustavalla sisällöllä voidaan rakentaan ennalta määrättyjä ”blokkeja”, joissa sisällönsyöttäjä voi määritellä kuvat ja tekstit kohdilleen ja raahailla blokkeja haluttuun järjestykseen. Joustavaan sisältöön voidaan rakentaa myös dynaamisia blokkeja, joissa sisältö haetaan automaattisesti sivun muun sisällön perusteella.

Se, miten erilaiset blokit rakennetaan, eroaa tällä hetkellä Gutenbergin ja ACF:n tapauksessa paljon. ACF:llä voin luoda erilaiset blokit muutamassa minuutissa suoraan WP:n ohjausnäkymän kautta, kun taas Gutenbergin tapauksessa uudet blokit täytyisi koodata Javascriptillä ja PHP:lla. Voitte varmaan arvata, kumpi tapa on nopeampi? Aika on rahaa, ja paljon aikaa on liian paljon rahaa…

Nähtäväksi jää, miten ACF integroituu Gutenberg-toiminnallisuuteen tulevaisuudessa. Toiveena olisi saada ACF:n joustavalla sisällöllä luodut blokit osaksi Gutenbergia, jolloin niitä voisi käyttää suoraan Gutenberg-editorissa.

Kritiikki ja loppusanat

Gutenberg on tullut jäädäkseen, siitä ei pääse mihinkään. Veikkaus on, että Gutenberg pysyy valtaosalla käyttäjistä vielä pitkään käyttämättä (asentamalla Classic editor -lisäosan). Itselle henkilökohtaisesti Gutenberg ei tuo mitään uutta – se ainoastaan mahdollisesti sekoittaa jo olemassa olevia sivustoja. Myöskään muita käyttäjiä uusi muokkain ei näytä hirveästi sytyttävän.

Gutenberg arvostelut wordpress.org:ssa
Gutenberg-arvostelut wordpress.org:ssa.

Gutenberg voisi olla oiva pagebuilder-lisäosa sellaisia halajavalle, mutta ammattimaisia WP-sivustoja tekevälle siitä ei ole vielä hyötyä – lähinnä vaaditun liian suuren työmäärän takia verrattuna esim. ACF:n tarjoamaan vaihtoehtoon.

Gutenbergilla luotu sisältö tulostetaan sivupohjassa koodilla the_content(). Esimerkiksi tämän sivun the_content() alkaa kursivoidusta ”Mitä uusi editori merkitsee sisällönsyötölle?…” -tekstistä päättyen ”If it ain’t broken, don’t fix it” -tekstiin. Miten olisin Gutenberg-editorilla lisännyt the_contentin viereen ”Kirjoittanut”- ja ”Avainsana”-elementit? Nykyisillä työkaluilla en mitenkään, vaan vaihtoehtona olisi ollut rakentaa omat blokit vihreälle hero-alueelle, varsinaiselle tekstialueelle sekä dynaamiselle ”Lue lisää” -sisällölle.

Gutenberg sopiikin käyttäjille, joille sivuston ulkonäöllä ei ole hirveästi väliä – voit rakentaa sivusi sen näköiseksi kuin haluat niillä työkaluilla, joita saatavilla on. Lisäksi käytössä olevan teeman täytyy tukea Gutenbergia, jotta teeman tyylikoodit eivät sekoa Gutenbergin käyttämien kanssa. Esim. itse huomasin joidenkin Gutenberg-blokkien näyttävän huonolta nykyisen teeman kanssa.

Jään mielenkiinnolla odottelemaan, miltä Guterbergin tulevaisuus tuo tullessaan.

If it ain’t broken, don’t fix it…

Lue myös

Blogi

6+2 virhettä, miksi saittisi kannattaa koodata uusiksi

Blogi

Luuptek 1v.

Blogi

Mitä meillä maksaa WordPress-sivut?

Blogi

WordPress-kehitys Luuptekissä – käytetyt tekniikat ja työkalut

Blogi

Mikä tämä tällainen Luuptek on?

Ota yhteyttä

Tarvitsetko lisätietoja? Heräsikö kysyttävää?

Tästä eteenpäin!