Hyppää sisältöön

Näin WordPressin Gutenberg-lohkoeditori toimii

Olet saattanut joskus kuulla Gutenbergistä. Mutta mikä se on ja miten se liittyy WordPressiin? Gutenberg on vuonna 2018 julkaistu työkalu sisältöjen luomiseen WordPress-alustalle, jolla voi luoda monimutkaisiakin sivuja erilaisten lohkojen avulla. Sisältöjen muokkaus tapahtuu visuaalisella editorilla, niin sanotulla WYSIWYG-mallilla.

Jaakko Alajoki, 29.03.2023

Katso lyhyt video siitä, miten sisältösivu Gutenbergillä syntyy:

YouTube-videon katsominen edellyttää evästeiden hyväksyntää. Voit katsoa sen myös täällä.

WordPressin oletuksena tarjoamat sisällöntuotantotyökalut olivat pitkään hyvin yksinkertaisia ja sisältöeditori tarjosi melko suppeat mahdollisuudet muotoilla tekstiä. Harva nykypäiväinen verkkosivu kuitenkaan enää koostuu vain yksinkertaisista tekstikappaleista – sisällöt rakentuvat erilaisista kuvista, videoista, otsikoista, listoista, nostoista, karuselleista ja niin edelleen.

Monimutkaisemmat sivut rakennettiin pitkään erilaisten sivupohjien avulla. Sivupohjat ovat kuitenkin melko jähmeitä, koska ne pakottavat sisällön aina tiettyyn muottiin. Paremman sisältöeditorin puutteessa syntyikin monia erilaisia tapoja tuottaa sivupohjia WordPress-sivustolle. Tällaisia ovat esimerkiksi ACF Flexible Content -toimintoon perustuvat teemat, Elementor tai DIVI.

Gutenberg on työkalu, joka on suunniteltu siivoamaan tämä sillisalaatti. Se tarjoaa yhdenmukaistetun tavan monipuolisten sisältöjen luomiseen.

Gutenbergissä kaikki rakehtuu lohkojen varaan. Jokainen asia, jota ruudulla näkee, on lohko. Otsikot ovat lohkoja, napit ovat lohkoja, palstat ovat lohkoja ja leipätekstit ovat lohkoja. Tämä filosofia tuo sisällöntuottajille aikaisempaa enemmän vapauksia rakentaa mieleisiään sivuja.

Oheinen esimerkkinäkymä on rakennettu Gutenbergin sisältöeditorilla lohkoista.

Näkymä koostuu alla olevan kuvan mukaisista lohkoista.

Käytössä on viisi eri lohkoa:

  1. Kansilohko, joka mahdollistaa kuvan näyttämisen sisältöjen taustalla
  2. Palstalohko, jossa käyttöön on otettu kolme saraketta. Kaksi ensimmäistä palstaa ovat tyhjiä. Näin sisältö on saatu asemoitua nätisti vasemmalle
  3. Otsikkolohko
  4. Tekstikappale
  5. Painike

Sisällöntuottajalla on mahdollisuus lisätä, poistaa ja järjestellä lohkoja. Lohkoista voi myös koostaa valmiita uudelleenkäytettäviä ryhmiä, joista käytetään nimeä Pattern. Näin sisällöntuotantotyötä ei tarvitse aina aloittaa alusta, vaan työhön voi käyttää pitkälti valmiita ryhmiä.

Gutenbergissä on mahdollista myös lukita sivujen rakenteita halutuilta käyttäjätasoilta. Tämä mahdollistaa sen, että vain osa ylläpitäjistä pääsee vaikuttamaan sivuston rakenteeseen ja ainoastaan osa voi tuottaa sisältöä. Tämä helpottaa sisällöntuottajien työtä – he voivat keskittyä omaan ydinosaamiseensa, eikä aikaa tarvitse käyttää ulkoasun suunnitteluun.

Meidän tehtävämme on sivustojen toteutusprojekteissa määritellä, suunnitella ja toteuttaa lohkoja, lohkoryhmiä ja sivurakenteita projektin tarpeisiin. WordPressin mukana tulee joukko oletuslohkoja, jotka me tyylittelemme projektiin ja asiakkaan brändiin sopivalla tavalla. Sen lisäksi toteutamme räätälöityjä lohkoja ja yhdistämme kaikki nämä toimivaksi kokonaisuudeksi.

Eri WordPress-toimistot voivat tehdä Gutenberg-toteutuksia monella tavalla. Erityisesti projektikohtaisesti rakennettuja lohkoja voidaan toteuttaa erilaisilla tekniikoilla. Meille on Evermadella aina ollut tärkeää, että ylläpitäjän käyttäjäkokemus on mahdollisimman sujuva ja seuraamme tätä filosofiaa myös lohkojen toteutuksessa. Tämän vuoksi toteutamme niin sanottuja natiiveja Gutenberg-lohkoja. Saatavilla olisi useitakin lisäosia lohkojen toteutukseen (esimerkiksi ACF), mutta niiden tarjoama käyttökokemus ei ole ylläpitäjälle mielestämme tarpeeksi hyvä. Lisäosien avulla ei myös välttämättä pääse hyödyntämään kaikkia Gutenbergin tarjoamia mahdollisuuksia. Meidän Gutenberg-toteutuksemme etuja tullaan käsittelemään myöhemmin erillisessä blogikirjoituksessa.

Mikäli haluaisit tietää lisää Gutenbergistä ja siitä, miten tehokkaasti se toimii sisällöntuotannossa, ota meihin yhteyttä. Kerromme mielellämme lisää!

Haku