Tämä blogikirjoitussarja kertoo, miten WordPressin uusi Gutenberg-editori muuttaa sisällöntuotannon konseptisuunnittelusta kirjoittamiseen. Toinen osa kurkistaa uuden sisältöeditorin hallintanäkymään.

Gutenbergin aikakaudella WordPress-sivuston sisältö koostuu lohkoista. Näiden lohkojen hallinta tuo muokkausnäkymään uusia haasteita, jotka olisivat olleet vanhalle tekstieditorille ylitsepääsemättömiä. Tästä syystä koko sisältöeditori on rakennettu Gutenbergille uudestaan.

Tämän uudistuksen yhtenä päätavoitteena on ollut se, että oppimalla miten yksi lohko toimii, oppii käyttämään mitä tahansa lohkoa. Lohkot löytyvät siis samasta paikasta ja käyttäytyvät samalla tavalla olivat ne sitten WordPressin omia, lisäosien tuomia tai verkkosivuille räätälöityjä.

Miltä uusi editori sitten näyttää? Kurkataan sisään.

Gutenbergin asettelu näyttää tutulta

WordPressin tekstieditori on monelle tuttu. Otsikko löytyy yläreunasta, tekstimassa keskeltä ja lisätiedot oikeasta sivupalkista. Gutenbergissä nämä kaikki löytyvät pääosin tutuilta paikoiltaan.

Vanha muokkausnäkymä
Uusi muokkausnäkymä

Gutenberg auttaa keskittymään kirjoittamiseen minimalistisella tyylillään. Vaikka hallintanäkymässä on entistä enemmän säädettävää ja valittavaa, tulevat nämä asetukset näkyviin vasta kun niitä tarvitaan. Myös sivupalkin voi halutessaan piilottaa ja tuijottaa tekstiä koko ruudun loisteessa.

Sisältö mukailee Gutenbergissä sivuston omia tyylejä merkittävästi aiempaa laajemmin. Esimerkiksi otsikkotyylit, fontit ja värit saadaan helposti identtisiksi julkisen sivuston kanssa. On siis entistä vähemmän tarvetta hyppiä esikatseluun kurkkimaan miltä sisältö oikeasti näyttää.

Lohkotyyppi valitaan lohkokirjastosta

Gutenbergissä uusien lohkojen lisäys tapahtuu plussaikonista, joita löytyy mm. sisällön lopusta ja yläpalkista. Ikonia klikkaamalla aukeaa lohkokirjasto.

Lohkotyypin voi hakea seuraavilla tavoilla:

  • Käytetyimmät: Gutenberg kerää automaattisesti listaa niistä lohkotyypeistä, joita olet eniten käyttänyt ja tarjoaa niitä ensimmäisenä. Tavallisimmat lohkotyypit ovat siis heti vastassa.
  • HakuVoit kirjoittaa hakukenttään lohkotyypin nimen tai siihen liittyviä sanoja, jolloin saat haluamasi lohkon nopeiten esiin.
  • Kategoriat: Lohkotyyppejä voi myös selata läpi kaikessa rauhassa. Lohkotyypit on kategorisoitu käyttötarkoituksen mukaan omiin ryhmiinsä.

Vinkki: Saat lohkokirjaston näkyviin kirjoittamalla uudelle riville “/”-merkin, minkä jälkeen voit etsiä sopivan lohkotyypin hakusanalla nostamatta sormia näppäimistöltä.

Työkalurivi ilmestyy vain kun sitä tarvitaan

Gutenbergissä vanha ruudun yläreunassa kulkeva työkalupalkki on poissa. Sen tilalla lohkotyyppiin liittyvät työkalut tulevan näkyville kun klikkaa sisällöstä jotain lohkoa. Klikataanpa tekstikappaletta.

Klikkauksen jälkeen tekstilohkon ylle ilmestyy työkalut tekstin tasaukseen, lihavointiin, kursivointiin ja linkkien lisäykseen. Kaikille lohkoille yhteiset työkalut löytyvät “…”-ikonin alta, josta pystyy esimerkiksi poistamaan tai kloonaamaan lohkon sekä lisäämään uusia lohkoja ylä- tai alapuolelle. Lohkon vasempaan reunaan ilmestyy siirtotyökalut, joilla lohkon saa liikutettua haluttuun paikkaan.

Lohkon tyylien hienosäätö

Lohkotyypilllä voi olla monia vaihtoehtoisia tyylejä. Esimerkiksi taulukkolohkolta löytyy vaihtoehtoinen tyyli, jossa joka toinen rivi on korostettu taustavärillä. Mistä tyyliasetukset sitten löytyvät? Klikataan lohkoa.

Kun lohko on valittuna, ilmestyvät tyyleihin liittyvät asetukset tulevat näkyviin sivupalkkiin. Sieltä voidaan klikata päälle vaihtoehtoisia tyylejä, vaihtaa värejä tai fonttikokoja. Lohkotyyppi määrää mitä hienosäätöjä on saatavilla. Yleensä esimerkiksi värien valinta rajoitetaan pariin brändiväriin, jotta sivuston ilme pysyy yhtenäisenä.

Esikatsele ja julkaise

Uuden sivun tai artikkelin julkaisu löytyy tuttuun tapaan sinisestä “Julkaise”-napista. Uudistuksena vahinkoklikkaus ei lähetä keskeneräistä tekstiä maailmalle, vaan Gutenberg pyytää varmistusta ennen uuden sisällön julkaisua. Voit säätää siinä vielä näkyvyysasetuksia tai lisätä unohtuneita avainsanoja.

Gutenberg muuttaa selvästi vanhaa kirjoitusnäkymää, mutta pitää pääosin tutut työkalut tutuissa paikoissaan. Suurimman muutoksen kokee itse sisällön muokkaus, joka siirtyy kauemmas Wordin tapaisesta kirjoitusnäkymästä. Tämä on hyvä muutos, koska Wordin maailma ei palvele kovin hyvin verkkosivujen monipuolista ja erikokoisille ruuduille tehtävää sisältöä.

Jos olet oppinut käyttämään vanhaa WordPressin tekstieditoria, opit helposti käyttämään myös Gutenbergiä. Perusasiat ovat hyvin yksinkertaisia, koska jokainen lohko lisätään täysin samalla tavalla ja niitä pääsee muokkaamaan täysin samalla tavalla.

Seuraavassa osassa kerron miten Gutenberg tuo joustavuutta sivuston ulkoasuun ja rakenteeseen. Mietitään silloin miten Gutenbergia saadaan hyödynnettyä verkkosivuston suunnittelussa. Tutustu sitä ennen myös muihin Gutenberg-kirjoituksiimme.