Tämä blogikirjoitussarja kertoo, miten WordPressin uusi Gutenberg-editori muuttaa sisällöntuotannon konseptisuunnittelusta kirjoittamiseen. Ensimmäinen osa koskettaa editorin pienintä osaa, lohkoa.

Kun puhutaan Gutenbergista, ei voi välttyä puhumasta lohkoista (eng. block), jotka ovat uudenlaisen sisällön rakennuspalikoita. Gutenbergissä kaikki sisältö rakennetaan lohkoista ja lopputuloksena sisältö on pitkä jono erilaisia lohkoja. Kaikki tekstin osaset väliotsikosta kuvitukseen ovat siis pohjimmiltaan lohkoja.

Siirtymä vanhasta Word-dokumenttia muistuttavasta tekstieditorista Gutenbergiin on siis suuri harppaus. Tämä kirjoitus kertoo, millaisiin asioihin lohkoissa pystyy vaikuttamaan ja millaista sisältöä lohkoilla voi luoda. Älä murehdi vielä hallintapuolesta, sillä kurkistetaan muokkausnäkymään kunnolla vasta ensi kerralla.

Kohdistetaan katse siis itse lohkoon.

Lohkotyyppi määrää lohkon mahdollisuudet

Sisällön esittämiseen on valittavana joukko lohkotyyppejä. Lohkotyyppi sisältää yleensä sekä hallittavaa sisältöä yhdessä tai useammassa kentässä sekä säätöjä asetteluun, tyyleihin ja lisätietoihin. Millaisia lohkotyyppejä sitten on valittavana?

Kappale on tavallisin lohkotyyppi. Se on se tavallinen tekstikappale, jossa voi olla esimerkiksi lihavoitua tekstiä ja linkkejä. Jokainen tekstikappale on oma lohkonsa eli peräkkäiset kappaleet ovat omia lohkojaan.

Kuva on toinen yleinen lohkotyyppi. Siinä on jo selkeästi kaksi tietokenttää täytettävänä: itse kuvan valinta sekä kuvatekstin kirjoittaminen.

Muita tavallisia valmiita lohkotyyppejä ovat esimerkiksi:

  • Otsikko
  • Lainaus
  • Galleria
  • Taulukko
  • Painike

Lohkotyyppejä saa lisättyä valikoimaan lisäosilla ja sivustolle on mahdollista räätälöidä omia lohkotyyppejä. Näin saataville voi tulla esimerkiksi lomake, yhteystietokortti tai liittyvät kirjoitukset. Vastaavasti tarpeettomia lohkotyyppejä voidaan poistaa valikoimasta.

Lohkon sisältöjä on montaa sorttia

Tektimuotoinen sisältö on helpoin. Esimerkiksi painikkeeseen valitaan linkki sekä kirjoitetaan nappulateksti tai lainaukseen katkelma ja sitaatti. Kaikki sisältö elää siis suoraan tällaisessa lohkossa.

Monissa lohkotyypeissä sisältö hallitaan suoraan lohkosta. Esimerkiksi lainaus kirjoitetaan suoraan lohkoon.

Tuonnit, kuten henkilökortit, tuotenostot tai lomakkeet luodaan jossain muualla, mutta sopivalla lohkolla voidaan valita näistä sopiva(t) näkyviin. Itse lohkossa poimitaan esimerkiksi halutut yhteyshenkilöt, mutta titteliä ja henkilön kuvaa muokataan erillään omassa yhteystiedot-sisältötyypissään.

Suomen maakuvabrändin sisältöpankissa, Finland Toolboxissa, ladattavia materiaaleja voi upottaa omalla lohkolla sisällön joukkoon.

Jotkut lohkotyypit käyttävät sisältönään muita lohkoja (eng. inner blocks). Esimerkiksi sarakkeet-lohkolla sisältöä voi jakaa palstoihin ja näiden palstojen sisällöksi voi valita erilaisia lohkotyyppejä. Palsta voi sisältää vaikka otsikoita, tekstikappaleita, listoja, kuvia tai nappuloita. Lohkotyyppi voi itse rajoittaa valittavia lohkotyyppejä – esimerkiksi palstajaon sisään ei ole luontevaa laittaa uutta palstajakoa.

Palstajako on tähän asti vaatinut monenlaista kikkailua, mutta Gutenbergin myötä siihen on vihdoin oikea ratkaisu.

Lohko voi myös olla sisällötön, jolloin sillä ei ole mitään sisältökenttiä. Tällainen lohkotyyppi on esimerkiksi erotin, joka jakaa sisältöä viivalla. Vastaavasti artikkeliin voitaisiin merkitä vaikkapa mainospaikat bannerilohkolla, joiden kohdalla näytettäisiin mainosbannereita.

Lohkon sisältö voi tietysti olla myös sekotelma näitä. Esimerkiksi sivustolle tehty “Lue myös” -lohko voisi sisältää erikseen kirjoitettavan otsikon, mutta myös vapaasti valittavia artikkeleita.

Lohkoa voi asetella ja venyttää

Lohkotyyppi määrää tavat, jolla lohkoa voi asetella. Esimerkiksi kuvalle onnistuu seuraavat asettelut:

  • Ei tasausta: Kuva on oman rivinsä alussa.
  • Tasaus vasemmalle tai oikealla: Kuva on vasemmassa tai oikeassa reunassa ja teksti kulkee tiiviisti toisella puolella.
  • Keskitys: Kuva on sisältöalueen keskellä.
  • Leveä: Kuva on hiukan normaalia sisältöaluetta leveämpi.
  • Kokoleveä: Kuva on koko näytön levyinen.

Kuvien lisäksi erilaisia asetteluja voi tehdä esimerkiksi painikkeille, videoupotuksille, kuvagallerioille, sarakkeille ja taulukoille. Lohkotyyppi määrää jälleen mitä vaihtoehtoja asettelulle löytyy.

Lohkolla voi olla monta tyyliä

Saman lohkotyypin sisältöä voi olla tarvetta esittää hiukan eri muodoissa. Esimerkiksi tärkeä lainaus voidaan joskus haluta näyttää jättimäisen suurena tai vähemmän tärkeä nappula ilman taustaväriä. Ratkaisuksi tähän lohkotyyppi voi tarjota vaihtoehtoisia tyylejä.

Erinäköisiin nappuloihin ei tarvita omia lohkotyyppejä. Saman painikkeen vaihtoehtoiset tyylit hoitavat homman.

Vaihtoehtoisen tyylin muutokset eivät siis rajoitu pelkkään väriin. Ainoa rajoitus on käytännössä sisältö, jota vaihtoehtoinen tyyli ei voi muuttaa. Tyylien kautta voidaan rakentaa esimerkiksi seuraavia poikkeuksellisia esitystapoja:

  • Tekstikappaleesta tulee suurempikokoinen ingressi.
  • Kuva rajataan ympyräksi tai sille lisätään varjo.
  • Listamerkki vaihdetaan pallosta nuoleksi.
  • Taulukossa joka toinen rivi saa taustavärin.

Lohkotyypit pystyvät tarjoamaan kokonaisten tyylivaihtoehtojen lisäksi esimerkiksi värivalitsimia ja fonttikoon säätöä. Näitä oletustyylejä ja säätimiä voidaan poistaa tai toisaalta lisätä uusia vaihtoehtoisia tyylejä. Yleensä tarpeettomia valintoja kannattaakin piilottaa, jotta ilme pysyy yhtenäisenä.

Entä ne lohkoketjut?

Block-termin suomennokselle mietittiin WordPress-yhteisössä muutamia vaihtoehtoja. Esillä olivat muun muassa blokki, elementti, osio, palikka ja lohko. Suomennokseksi valittiin lopulta lohko, joka ei sisällä piilomerkityksiä Fröbelin Palikoista tai 60-luvun elementtitaloista – ja se on lyhyt.

Mahdollinen sekaannus voi kuitenkin tulla lohkoketjuihin (eng. blockchain), joka on teknologia esimerkiksi kryptovaluuttojen, kuten Bitcoinin, taustalla. Gutenbergin lohkoilla ei ole mitään tekemistä näiden kanssa. Emme vain keksineet WordPress-yhteisössä parempaakaan käännöstä.

Seuraavassa osassa kurkistetaan Gutenbergin kirjoitusnäkymään ja miten se eroaa perinteisestä WordPressin tekstieditorista. Tutustu sitä ennen myös muihin Gutenberg-kirjoituksiimme.