Miten Gutenberg-editori toimii ja miten sitä käytetään?

Opi uuden Gutenberg-muokkaimen toimintaa.

WordPress-version 5.0 mukana saapui uutena ominaisuutena Gutenberg-editori loppuvuonna 2018. Olin aluksi hyvinkin skeptinen muokkaimen tarpeellisuudesta, sillä jo olemassa olevilla työkaluilla halutut asiat pystyi tekemään helpommin ja nopeammin.

Onneksi kehitys on mennyt eteenpäin ja Gutenberg on saanut lisää muokattavuutta ja helpottanut näin ollen kehitystä. Luuptek on ottanut uuden muokkaimen käyttöön kaikkiin asiakasprojekteihinsa kesästä 2019 alkaen (uudistimme myös oman saitin Gutenbergin päälle!)

Tässä artikkelissa käydään läpi Gutenberg-muokkaimen toimintaa; mitä se pitää sisällään ja miten sitä käytetään. Verrattuna WordPressin vanhaan ”perusmuokkaimeen” ero on kuin yöllä ja päivällä.

Uusi sivu koostuu lohkoista (blocks)

Uusi muokkain perustuu niin sanottuihin lohkoihin (itse saatan puhua myös elementeistä). Esimerkiksi tekstikappale tai tekstiotsikko on oma lohkonsa, kuten myös muutkin tekstiasettelut (esim. listat ja lainaukset). Lohkoja voi lisätä sivulle halutun määrän ja laittaa ne haluttuun järjestykseen. Lohkoja pääsee lisäämään uuteen muokkaimeen muokkausnäkymän vasemmasta ylänurkasta olevasta plus ikonista. Lohkot on kategorisoitu ja niitä voi myös hakea tekstihaulla. Kappale-lohko toimii oletuslohkona eli aina kun painat näppäimistöllä enteriä, Gutenberg lisää automaattisesti kappalelohkon.

Navigointi julkaisun (asiakirjan) ja lohkon asetusten välillä

Liikkuminen lohko- ja sivuasetusten välillä käy helposti oikeasta laidasta löytyvän navigoinnin kautta. ”Asiakirja”-valinnalla saat näkyviin vanhasta muokkaimesta tutut valinnat, kuten esim. julkaisuasetukset, artikkelikuvan asetukset ja kategoria-asetukset. Kun jokin lohko on valittu, avautuvat lohkon asetukset automaattisesti. Jossakin lohkoissa on enemmän asetuksia, osassa vain muutama asetus.

Ohessa navigointia lohkon ja asiakirjan asetusten välillä ”kappale”-lohkon kanssa.

Mitä lohkoja löytyy?

WordPress-paketin mukana tulee aina vakiona iso kasa niin sanottuja ”core”-lohkoja – eli lohkoja, jotka määritellään valmiiksi WordPressin ytimessä (coressa). Uudenlaista hyötyä löytyy varsinkin ”Asettelun elementit” -kategorian alta. Ohessa tarkemmin esiteltyinä (omasta mielestäni) hyödylliset lohkot.

Kansi

Alue, johon on mahdollista määrittää taustakuva sekä kuvan päälle tekstit ja/tai painike(et). Taustakuvan korkeutta ja taustakerroksen väriä ja läpinäkyvyyttä voi lisäksi säätää. Tätä lohkoa voidaan käyttää esimerkiksi ”hero”-elementtinä sivun yläosassa. Lohkoon voidaan lisätä helposti ns. parallax-efekti.

Kansilohko

Kansilohkoon voi asetella otsikoita, tekstiä ja painikkeita.

Sarakkeet

Sarakkeet-lohkolla tekstiä ja kuvia voi asemoida palstoihin. Mahdollisuutena on tehdä kahdesta kuuteen saraketta. Harmittavasti sarakkeita on mahdotonta optimoida hyvin toimivaksi responsiiviseksi käyttökokemukseksi, sillä esimerkiksi niin kaksi kuin kuusi saraketta käyttäytyy mobiliinäytöllä samalla tavalla.

Kun sarakkeet-lohko valitaan, pystyy sisällönluoja valitsemaan erilaisista sarakemalleista mieleisensä – esim. kolme yhtä leveää saraketta tai kaksi yhtä leveää ja yksi leveämpi.

Tässä osassa on käytetty sarakkeet-lohkoa ja se on asemoitu kahteen sarakkeeseen.

Tekstikappaleiden alle on luotu sarakkeet-lohko, jossa on kolme saraketta. Jokaiseen sarakkeeseen on asetettu painike.

Sarakkeita on mahdollista poistella ja lisäillä oman mieltymyksen mukaan sarakkeiden luonnin jälkeenkin.

Media ja teksti -lohko

Media ja teksti -lohko on periaatteessa kaksisarakkeinen ”sarakkeet”-lohko, jossa vasemmalle tai oikealle puolelle voi määrittää kuvan, ja toiselle puolelle tekstialueen (tekstipuolelle voi määrittää myös kuvia/sarakkeita/kansia, mutta käytännössä tekstilohkot painikkeiden kera toimivat parhaiten).

Asemointia voi muuttaa helposti nappia painamalla. Lisäksi WordPressin 5.3 versiosta lähtien tekstin ja kuvan paikkaa voi muuttaa pystysuunnassa (ylös, alas, keskelle). Alla olevassa esimerkissä teksti on asemoitu keskelle.

Kuvassessiot

Esimerkiksi näin…

Ryhmä-lohko (WordPress 5.3 lähtien)

Ryhmä-lohko tekee juurikin sen, mitä nimessään lupaa. Eli tässä lohkossa on mahdollisuus määrittää useita eri lohkoja yhden lohkon alle. Aivan superhienoa tässä lohkossa on taustavärin ja leveyden säätömahdollisuudet. Ryhmä-lohkoa voidaan käyttää itsenäisenä, tai sitä voi käyttää esim. sarakkeissa sekä ”media ja teksti” -lohkon sisällä.

Ryhmä-lohkolla pystyy näppärästi luomaan esim. CTA (call to action) -tyyppisen elementin sivulle. Esim. näin:

Haluatko apua Gutenbergin käytössä?

Näiden lohkojen lisäksi WordPressin mukana tulee iso lista muitakin lohkoja. Ne ovat kuitenkin sen verran simppeleitä, että erikseen erittelyille en näe tarvetta.

Säädä lohkon asetuksia työkalurivillä ja ominaisuuksilla

Kun lohko on valittu, sen yläreunaan (tai sivun yläreunaan riippuen asetuksista) ilmestyy työkalurivistö, jossa on mahdollista esimerkiksi:

Työkalurivistö muuttuu sen mukaisesti, mikä lohko on valittuna, ja näyttää automaattisesti lohkoon sopivia työkaluja.

Työkalurivissä oleva kolmen pisteen ikoni avaa lisävalikon, josta löytyvät seuraavat hyödylliset työkalut:

Lohkon ominaisuudet näkyvät sivun oikeassa reunassa, kun lohko on valittuna. Joillakin lohkoilla on enemmän ominaisuuksia kuin toisilla. Esimerkiksi kappale-lohkolla on kirjaisimen koko- ja väriominaisuudet. Painike-lohkolla sen sijaan on värimääritysten lisäksi myös tyyliominaisuudet (suorakulmainen, kevyesti pyöristetty tai kokoleveä painike).

Säädä sisällön leveyttä

Yksi mahtava asia uudessa editorissa on leveyden säätämisen mahdollisuus. Usea eri lohko voidaan asettaa ”normaaliin”, leveään ja kokoleveään malliin.

Normaalileveys on käytössä esim. tekstilohkojen kanssa (esim. otsikko ja kappale). Kuten siis huomaat, tämä kappale ei leviä turhan leveäksi eikä varsinkaan kokoleveäksi (hyvä homma luettavuuden kannalta!).

Leveää ja kokoleveää asettelua on mahdollista käyttää esim. seuraavilla lohkoilla:

Leveä asettelu asettaa sisällön hieman leveämmäksi kuin ”normaali leveys”. Kokoleveä levittää sisällön koko ruudun leveydelle.

Asettelua voidaan muuttaa helposti työkalurivin kautta, kun lohko on valittuna.

Käytä lohkoja uudelleen näppärästi

Yksi Gutenbergin käyttäjäystävällisistä toiminnoista on uudelleen käytettävät lohkot.

Lohko sisältöineen voidaan asettaa uudelleenkäytettäväksi lohkoksi. Tämän jälkeen uudelleenkäytettävä lohko löytyy halutulla nimellä lohkolistasta. Näppärää varsinkin, jos haluat käyttää tiettyä elementtiä monella eri sivulla!

Uudelleenkäytettävä lohko voidaan lohkon sijoituksen jälkeen purkaa takaisin tavalliseksi lohkoksi, jolloin uudelleen käytettävää lohkoa pystyy käyttämään ”muokattavana lohkopohjana”. Uudelleenkäytettävää lohkoa voi myös muokata, jolloin muutokset siirtyvät automaattisesti kaikkialle, missä alkuperäinen uudelleen käytettävä lohko on käytössä.

Tuliko valittua väärä lohko? Ei hätää! Poista, muuta tai siirrä.

Kuten jo aiemmin mainitsin, oletuslohkoksi määräytyy aina kappale. Lohkoa voi kuitenkin muuttaa muuntamistyökalun avulla. Esim. kappaleesta saa helposti otsikon tai lainauksen, ”Media ja teksti” -lohkon voi muuntaa pelkäksi kuvaksi. Vaihtoehdot per lohko ovat näkyvillä muuntamistyökalussa.

Jos lohko on laitettu väärään paikkaan, sen voi siirtää helposti oikeaan paikkaan lohkon vieressä näkyvillä nuolinäppäimillä.

Lohkon pystyy poistamaan valitsemalla ”Poista lohko” kolmen pisteen valikon kautta.

Käytä lohkonavigointia hankalissa kohdissa

Sisäkkäisten (sarakkeet ja ryhmät) lohkojen kanssa toimimisessa voi olla hankala hahmottaa, mikä lohko juuri sillä hetkellä on valittuna. Esimerkiksi sarakkeet-lohkon kanssa toimimisessa on välillä hankalaa valita ”Sarakkeet”-päälohko (jossa pääset muuttamaan sarakkeiden asetuksia).

Lohkonavigoinnin avulla saat helposti valittua oikean lohkon (tai sisäisen lohkon) käyttöön.

Luo uusia lohkoja

Uusien lohkojen luonnissa vain mielikuvitus, oma osaaminen ja/tai lompakon paksuus on rajana. Esimerkiksi tämä koko sivusto on rakennettu pääsääntöisesti omin käsin tehdyillä räätälöidyillä lohkoilla.

Omat lohkot nikkaroi helpoimmin ACF-lisäosalla tai Reactia hallitseva koodari Create Guten Blockilla. Luuptekissa on käytössä molemmat työkalut, ja oikea työkalu valitaan riippuen projektin haasteista.

Jos tarvitset apua uusien lohkojen luonnissa, laita viestiä yhteystietojen kautta!

Loppusanat

Gutenberg julkaistiin suhteellisen keskeneräisen oloisena, mutta nyt noin vuosi myöhemmin asiat ovat onneksi paremmin. Editorista on hyötyä sivun rakennuksessa ja käytössä niin devaajan kuin loppukäyttäjänkin näkökulmasta.

Toki vanhaan editoriin tottuneella uuden editorin haltuunotto on varmasti jonkinlainen ponnistus oman osaamisen kehittämisessä. Tässä kirjoituksessa käytiin läpi Gutenbergin perustoiminnallisuuksia sekä hieman edistyksellisempiä toimintoja, jotka ovat omiaan uuden editorin käyttöönotolle.

Jos olet tämän artikkelin lukemisen jälkeen edelleen hukassa Gutenberg-editorin kanssa, niin ota yhteyttä ja järjestetään asiassa koulutus.

Katso video näppärästä etusivun luonnista!

Ohessa muutaman minuutin pituinen video, jossa rakennetaan kuvitteelliselle pitsaravintolalle etusivu Gutenbergillä.

Demossa teemana on Luuptekin oma startteri teema, joten värit ja fontit asettuvat sitä kautta. Värit ja fontit ovat helposti räätälöitävissä juuri sinun yrityksellesi. Rakennettaisiinko jotain vastaavaa?

Lisää samasta aiheesta

Nuoli-ikoni

Miten säädän sisältöalueen tyhjää tilaa (lopussa ja alussa)?

Opi säätämään sisältöalueen tyhjää tilaa sivun alussa ja lopussa.

Miten teen ankkurilinkin Gutenberg-editorilla?

Opi ankkurilinkin tekeminen käyttämällä Gutenberg-editoria.

Vinkkejä Gutenberg-editorin käyttöön, joita et ehkä tiennyt

Tästä artikkelista löytyy vinkkejä Gutenberg-editorin käyttöön, kun perusosaaminen on hallussa.