Gutenberg: WordPressin lohkoeditori sisällöntuottajan työkaluna

Gutenberg on WordPressin lohkoeditori, jolla sivut kootaan valmiista lohkoista. Hyvin rakennettuna se tekee sivun päivittämisestä viestintätiimille arkista ja turvallista.

Lyhyesti

  • Gutenberg on WordPressin lohkoeditori, joka tuli oletuseditoriksi WordPress 5.0:ssa joulukuussa 2018.
  • Sivu kootaan lohkoista: otsikko, teksti, kuva, painike tai sivustolle räätälöity lohko.
  • Hyvin suunnitellut lohkot rajaavat valinnat niin, että sivu pysyy brändin mukaisena ja saavutettavana, vaikka tekijä vaihtuu.
  • Natiivilohkot toimivat suoraan WordPressin omalla tekniikalla. ACF-lohkot riippuvat lisäosasta ja muuttuvat WordPress 7.1:ssä.
  • redandblue tekee uudet lohkot natiiveina Gutenberg-lohkoina, ei ACF:llä.

Gutenberg on WordPressin sisältöeditori, jossa jokainen sivun osa on oma lohkonsa. Kappale, kuva, lainaus, taulukko ja painike ovat kukin lohkoja, joita voi lisätä, siirtää ja muokata erikseen.

Ennen Gutenbergiä WordPressissä oli yksi iso tekstikenttä, jonka ulkoasu näkyi vasta esikatselussa. Monimutkaisemmat rakenteet tehtiin lyhytkoodeilla tai erillisillä kentillä. Lohkoeditori korvasi tämän mallin WordPress 5.0:ssa vuonna 2018.

Nimi Gutenberg oli alun perin kehitysprojektin nimi. Arkikielessä sillä tarkoitetaan nykyään koko WordPressin lohkoeditoria.

Mikä on Gutenberg?

Miltä lohkoeditori näyttää viestintäpäällikön arjessa?

Hyvin rakennetussa Gutenbergissä uuden sivun tekeminen on kokoamista, ei koodaamista. Valitset sivupohjan, lisäät lohkot ja kirjoitat sisällön suoraan siihen kohtaan, jossa se näkyy.

Käytännössä tämä tarkoittaa esimerkiksi:

  • Uutisen julkaiseminen vie muutaman minuutin, eikä siihen tarvita kehittäjää.
  • Kampanjasivun voi koota valmiista osista: nosto, tekstiosio, yhteystietolohko ja painike.
  • Editorinäkymä vastaa valmista sivua, joten yllätyksiä julkaisun jälkeen on vähemmän.
  • Toistuvat osat, kuten yhteystiedot tai CTA-laatikko, voi tallentaa uudelleenkäytettäväksi.

Tärkeintä on rajaus. Jos editorissa on sata väriä ja kymmenen fonttia, sivut alkavat näyttää erilaisilta. Kun lohkot on suunniteltu sivuston tarpeisiin, valinnat ovat valmiiksi oikeita.

Suomen Metsäsäätiön verkkosivusto mobiilinäkymässä, toteutus redandblue
Kannettava tietokone, jonka näytöllä näkyy Aikakausmedian Koululehtikone-palvelun etusivu

Räätälöity lohko on sivustoa varten tehty lohko, joka ratkaisee toistuvan sisältötarpeen. Se voi olla esimerkiksi henkilöesittely, tapahtumalista, UKK-haitari tai hinnoittelutaulukko.

Räätälöidyllä lohkolla on kolme hyötyä:

  • Yhtenäisyys. Ulkoasu on suunniteltu kerran, ja se toistuu samanlaisena joka sivulla.
  • Helppous. Sisällöntuottaja täyttää vain kentät. Asettelusta ja tyyleistä huolehtii lohko.
  • Laatu. Otsikkotasot, kontrastit ja alt-tekstit voidaan rakentaa lohkoon valmiiksi. Tästä lisää sivulla WordPress-sivuston saavutettavuus.

Lohkoja ei kannata tehdä jokaiseen tarpeeseen. Usein WordPressin omat lohkot ja hyvin määritellyt tyylit riittävät. Räätälöinti kannattaa, kun sama sisältötyyppi toistuu usein tai sen rakenne on tärkeä.

Mitä räätälöidyt Gutenberg-lohkot ovat?

Natiivilohkot vai ACF-lohkot?

Natiivilohkot ovat kestävämpi valinta, koska ne käyttävät WordPressin omaa lohkotekniikkaa eivätkä riipu yksittäisestä lisäosasta. ACF-lohkot (Advanced Custom Fields) ovat lisäosan avulla tehtyjä lohkoja, joita käytettiin paljon lohkoeditorin alkuvuosina.

Eroja käytännössä:

  • Muokkaus. Natiivilohkossa sisältöä muokataan suoraan sivulla. ACF-lohkossa kentät ovat usein erillisessä paneelissa.
  • Riippuvuus. ACF-lohko toimii niin kauan kuin lisäosa pysyy yhteensopivana WordPressin kanssa. Natiivilohko kehittyy WordPressin mukana.
  • Siirrettävyys. Natiivilohkojen sisältö on tallennettu WordPressin omaan muotoon, joten se on helpompi siirtää ja jatkokehittää.

ACF on ollut aikanaan järkevä valinta, ja sillä tehdyt sivustot toimivat edelleen. Uusissa projekteissa suosittelemme kuitenkin natiivilohkoja. Jos pohdit, sopiiko WordPress ylipäätään tarpeeseesi, katso WordPressin vertailu muihin julkaisujärjestelmiin.

Mitä WordPress 7.1 muuttaa?

WordPress 7.1:ssä artikkelieditori näytetään aina iframe-kehyksessä. Hyöty on se, että editori näyttää sisällön samoilla tyyleillä kuin julkinen sivu.

ACF-lohkoille muutos tarkoittaa, että kentät eivät enää avaudu sisältöalueelle vaan sivupalkkiin tai erilliseen muokkausikkunaan. Julkinen sivu pysyy ennallaan, mutta sisällöntuottajan työtapa muuttuu. Olemme kirjoittaneet aiheesta tarkemmin uutisessa miksi WordPress 7.1 muuttaa ACF-lohkojen sisällönsyöttöä.

Aikakausmedian Koululehtikone kannettavalla tietokoneella, toteutus redandblue

Lohkoeditorin helppous ratkeaa määrittelyssä, ei vasta toteutuksessa. Kun sisällöntuottajien tarpeet on kuultu ennen lohkojen suunnittelua, editori tukee arkea eikä toimi sitä vastaan.

Käy nämä läpi ennen toteutusta:

  • Sisältötyypit. Mitä julkaisette viikoittain, mitä harvemmin? Uutiset, tapahtumat, henkilöt ja palvelukuvaukset tarvitsevat usein omat pohjansa.
  • Käyttäjäroolit. Kuka saa julkaista, kuka vain luonnostella? WordPressin roolit ja lohkojen lukitus rajaavat, mitä kukin voi muuttaa.
  • Sivupohjat. Valmiiksi koottu pohja, jossa lohkot ovat oikeassa järjestyksessä, nopeuttaa uuden sivun tekemistä ja pitää rakenteen yhtenäisenä.
  • Tyylivalinnat. Mitkä värit, taustat ja asettelut ovat sallittuja? Mitä vähemmän vaihtoehtoja, sitä yhtenäisempi sivusto.
  • Tuleva kehitys. Mitä lohkoja tarvitaan ehkä vuoden päästä? Kun lohkokirjasto on johdonmukainen, uuden lohkon lisääminen on pieni työ.

Hyvä nyrkkisääntö on testata editoria oikealla sisällöllä jo toteutuksen aikana. Viestintätiimin palaute ensimmäisistä sivuista kertoo nopeasti, mikä toimii ja mikä vaatii vielä hiomista.

Mitä lohkoeditorista kannattaa sopia ennen toteutusta?

Näin teemme

Näin redandblue tekee sen

Rakennamme uudet sivustot Webmaster-pohjateemalle, jonka lohkokirjasto on tehty natiiveina Gutenberg-lohkoina. Uusissa projekteissa emme käytä ACF:ää.

Määrittelyssä selvitämme, mitä sisältöjä viestintätiimi julkaisee viikoittain. Sen perusteella päätämme, mitkä lohkot tulevat valmiista kirjastosta ja mitkä räätälöidään. Käyttöönotossa koulutamme editorin käytön ja tuemme ensimmäisissä sisällönsyötöissä.

Jos sivustollasi on vanhoja ACF-lohkoja, voimme päivittää ne toimimaan WordPress 7.1:n kanssa ja siirtää niitä vähitellen natiiveiksi. Tämä kuuluu WordPress-sivuston jatkokehitykseen. Uuden sivuston kokonaisuus on kuvattu sivulla WordPress-verkkosivut, ja WordPressin perusteet löydät WordPress-oppaasta.

Tutustu WordPress-verkkosivuihin
Kuusamo Hirsitalojen verkkopalvelu mobiilinäkymässä, toteutus redandblue
Gutenberg

Asiakkaidemme projekteja

Katso kaikki työt
Katso kaikki työt

Usein kysyttyä Gutenbergistä

Kyllä. Gutenberg oli kehitysprojektin nimi, ja nykyään sillä tarkoitetaan WordPressin lohkoeditoria yleisesti.

Voi. Sisällöntuottaja kokoaa sivut lohkoista ja kirjoittaa tekstin suoraan editoriin. Koodia tarvitaan vain uusien lohkotyyppien tekemiseen.

Yleensä kannattaa, koska WordPressin kehitys keskittyy lohkoeditoriin. Siirtymä on hyvä tehdä suunnitellusti, esimerkiksi sivustouudistuksen tai jatkokehityksen yhteydessä.

Ei välttämättä. Lyhyellä aikavälillä ACF-lohkot päivitetään toimimaan uuden editorin kanssa. Siirtymä natiivilohkoihin voidaan tehdä vaiheittain.

Riski on pieni, kun lohkot ja tyylit on rajattu sivuston tarpeisiin. Lisäksi WordPress tallentaa sivusta versiohistorian, josta aiemman version voi palauttaa.

Webmaster Podcast

Miltä näyttää tulevaisuuden verkkosivut ja WordPress?

Monikanavaista keskustelua verkosta ja sen liepeiltä. Kaikesta hyvin hoidettuun, kauniiseen ja toimivaan verkkoon liittyvästä. Kuuntele ja tilaa kanavamme, ja pysyt kärryillä siitä millaisia ovat tulevaisuuden verkkosivut.

Webmaster Podcast

Kerro, mitä julkaisette arjessa, niin suunnitellaan lohkot sen mukaan. Tutustu WordPress-verkkosivuihin

Haluatko editorin, jota tiimisi oikeasti käyttää?

Gutenberg

Kysy lisää – me vastaamme

redandbluen toinen perustaja, vanhempi suunnittelija ja asiakkuusjohtaja Petteri Laamo

Petteri Laamo

Senior designer, Client director, Co-Founder
Puhelin 040 194 4421
Sähköposti petteri@redandblue.fi

Yhteydenottolomake

Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
Nimi(Pakollinen)
Rekisteriselosteen hyväksyntä(Pakollinen)