Gutenberg editori, Karhu Helsinki
Karhulla on asiaa

Helpompaa si­säl­lön­tuo­tan­toa WordPres­sil­lä – Gutenberg-editori tänään ja huomenna

Petri Länsimaa 17

WordPressin oletuseditori Gutenberg on helpottanut WordPress-sivujen sisällöntuotantoa jo lähes neljän vuoden ajan ja kehittynyt sinä aikana merkittävästi.

Mitä uutta Gutenberg-editor on tuonut?

Verrattuna perinteisiin tapoihin luoda sisältöä WordPress-sivuille, Gutenberg-editorin avulla sisällöntuottajan ei tarvitse enää syöttää sisältöä lukuisiin irrallisiin kenttiin tietämättä, miltä sivu kokonaisuudessaan tulee näyttämään. Gutenberg-editorissa sisältö koostuu lohkoista, joista sisällöntuottaja voi valita tarvitsemansa haluamallaan tavalla ja haluamassaan järjestyksessä. Lohkot tuovat sisällöntuottajalle suuren vapauden, kun kunkin sivun sisältö voidaan koosta halutuista osista, eikä sisällönsyötössä olla sidottuja kiinteärakenteiseen sivupohjaan. Hyvin toteutettuna sisältö Gutenberg-editorissa näyttää samalta kuin sisältö julkaistulla sivulla. Sisällöntuottajalla on siis valmis esikatselunäkymä sivusta koko työstön ajan. Parhaimmillaan Gutenberg-editori onkin sisällöntuottajalle korvaamaton työkalu.

Hyvin toteutettuna sisältö Gutenberg-editorissa näyttää samalta kuin sisältö julkaistulla sivulla.

Piirroskuva karhu

Classic editorin tuki päättyy

Kun Gutenberg-editori julkaistiin lähes neljä vuotta sitten, oli muutos suuri, eivätkä kaikki olleet valmiita muutokseen. Samaan aikaan julkaistiinkin Classic editor -niminen lisäosa, jonka avulla Gutenberg-editori voidaan kytkeä pois käytöstä ja käyttää sivustolla perinteistä WYSIWYG-editoria. Classic editor -lisäosan tuen oli tarkoitus päättyä vuoden 2022 lopussa, mutta tuki jatkuu ainakin vuoteen 2024. Näin syksyllä 2022 on enää vaikea nähdä kovin montaa hyvää syytä siihen, miksi millään sivustolla käytettäisiin Classic editoria Gutenbergin sijasta.

Gutenberg-editor tänään

Vajaassa neljässä vuodessa on Gutenberg-editorissa tapahtunut paljon kehitystä. Syksyllä 2022 Gutenberg-editori on vakaa, tarjoaa paljon valmiita lohkoja ja on laajennettavissa yksilöllisillä lohkoilla.

Gutenberg-editorista löytyy valmiina lohkot yleisimmille sisällöntuotannon tarpeille, kuten esimerkiksi: otsikko, kappale, lista, taulukko, kuva, palsta ja painike. Valmiiden lohkojen määrä Gutenberg-editorissa on niin suuri, että usein monet valmiit lohkot rajataan pois käytöstä, koska niille ei ole sivustolla tarvetta.

Gutenberg-editoria voidaan laajentaa vastaamaan erilaisia tarpeita. Valmiita lohkoja voidaan laajentaa tarpeiden mukaan. Yleisimpiä valmiiden lohkojen laajennoksia ovat esimerkiksi erilaiset painike- ja tekstityylit. Usein sivustolle tehdään tarvittava määrä yksilöllisiä lohkoja. Tällainen yksilöllinen lohko voi olla esimerkiksi pääkuva-alue, nosto ajankohtaisiin artikkeleihin tai Call to action -painike. Esimerkiksi Karhun sivustolla on tehty oma lohko uutiskirjeen tilaamiselle:

Esimerkkejä uudistuksista

  • Group-lohko, joka mahdollistaa lohkojen ryhmittelyn helposti ja kokonaisen lohkoryhmän siirtämisen sivulla eri kohtaan tai lisäämisen uudelleenkäytettäväksi lohkoksi, jolloin samaa sisältöä voidaan uudelleenkäyttää muilla sivuilla
  • Mahdollisuus määrittää tietylle sisältötyypille omaa oletussisältöä
    • Esimerkiksi uutiselle voidaan asettaa oletuksena tietynlainen pääkuvalohko ja ingressiteksti
  • Block pattern: valmiit mallit mahdollistavat usein yhdessä käytettävien lohkojen lisäämisen sivulle kerralla ja tietyssä järjestyksessä
  • InnerBlocks on ominaisuus, joka ei suoraan näy sisällöntuottajalle, vaan on kehittäjälle hyödyllinen: se mahdollistaa jo olemassa olevien lohkojen hyödyntämisen uuden lohkon sisällä
    • Esim. pääkuvalohkoon voidaan lisätä otsikko- ja kappalelohkot ja näin hyödyntää niitä osana uutta lohkoa
    • Jos tulevaisuudessa tulisi tarve lisätä pääkuvalohkoon esim. painike, voidaan suoraan hyödyntää jo olemassa olevaa painikelohkoa
    • Tämä on nopeaa ja kustannustehokasta, kun kehittäjän ei tarvitse lisätä ensin uusia kenttiä painiketta varten ja tehdä näkymään lisäystä painikkeelle ja sen tyyleille
  • Koko sivuston ja lohkojen yleiset asetukset ovat saaneet keskitetyn hallinnan, kun teemaan tuli mahdolliseksi lisätä teeman asetukset yhdessä JSON-tiedostossa
    • Näin esimerkiksi eri lohkojen väripaletteihin saadaan helposti vain brändivärit ja vaikkapa painikkeille voidaan asettaa erillinen, rajatumpi väripaletti
  • Suurin uudistus WordPressissä sitten Gutenberg-editorin julkistuksen on Full site editing, jossa koko sivustoa, myös header- ja footer-osioita, hallitaan Gutenberg-editorilla
Herra Gutenberg pohtimassa lohkojen järjestystä Karhu Helsingin blogikuvassa

WordPress Full Site Editing

Full Site Editing lisää WordPress-ylläpitoon Site editor -osion. Site editor tuo ensimmäistä kertaa vakioidun tavan ylläpitää esim. header- ja footer-osioita WordPressissä. Aiemmin WordPress-sivustoilla header- ja footer-osioiden ylläpitoon ei ole ollut selkeää vakioitua tapaa. Usein header- ja footer-osioiden ylläpito onkin hajautettu useampaan eri paikkaan, joita ovat voineet olla esim. sivustomuokkain, vimpaimet, erillinen asetussivu ja valikot-osio. Esimerkiksi logoa on voinut muokata sivuston muokkaimesta, eri valikoita valikot-osiosta ja tekstejä asetussivulta. Site editor mahdollistaa nyt erilaisten osioiden hallinnan Gutenberg-editorin avulla. Sivustolla, jossa Site editor on käytössä, ei ylläpitäjän tarvitse enää muistella, mistä esimerkiksi muutetaan footerin tekstiä ja linkkejä, vaan kaikki on keskitetty yhteen paikkaan ja muokattavissa samaan tapaan lohkoina kuin sivujen muukin sisältö.

Full site editing ei helpota vain header- ja footer-osioiden hallintaa: sivustolle voidaan asettaa muitakin osioita, kuten esimerkiksi alert-osio header- ja sisältö-osioiden väliin. Alert-osiossa voidaan esimerkiksi näyttää tarvittaessa kriittisiä viestejä kaikilla sivuston sivuilla.

Full site editing julkaistiin WordPress 5.9 päivityksen mukana tammikuussa 2022. Se hakee vielä muotoaan ja tulee kehittymään edelleen. Täysin valmiista ominaisuudesta ei voida Full site editingin kanssa vielä puhua, ja esimerkiksi versiohistoriaa ei eri osioihin tehdyistä muutoksista ole vielä tätä kirjoitettaessa käytössä. Full site editing kuitenkin yhdenmukaistaa koko sivuston ylläpitoa ja kehitystä, sekä tuo Gutenberg-editorin parhaat ominaisuudet myös eri osioiden muokkaukseen. Full site editing tulee varmasti saamaan toimintaa parantavia päivityksiä seuraavien WordPress-päivitysten yhteydessä.

Gutenberg-editor huomenna

Gutenberg-editor ja Full site editing päivittyvät jatkuvasti ja tulevat vielä saamaan uusia ominaisuuksia. Full site editingin jälkeen seuraava suurempi uudistus Gutenberg-editoriin tulee olemaan Collaboration-tila.

Yksi rajoitus on WordPressissä sisältöjä syötettäessä aina ollut se, että vain yksi käyttäjä voi kerrallaan muokata sisältöä. Tähän on hyvät perusteet, sillä tapa, jolla sisällöt avataan muokattavaksi ja tallennetaan, ei vielä tue useamman käyttäjän yhtäaikaisia muutoksia ja viimeisin tallennettu muutos ylikirjoittaa kaikki aiemmat muutokset. Tähän on kuitenkin tulossa muutos, ja Gutenberg-editoriin on rakenteilla Collaboration-tila, jossa useampi käyttäjä voi muokata samaa sisältöä samaan aikaan. Aikataulua Collaboration-tilan lisäyksestä osaksi Gutenberg-editoria ei ole vielä tiedossa; voi olla, että saamme odottaa tätä ominaisuutta pidempään kuin haluaisimme. Varmaa kuitenkin on, että Collaboration-tila tulee taas helpottamaan sisällönsyöttäjien arkea.

Gutenberg-editorilla on iso merkitys

Gutenberg-editor on saanut nimensä kirjapainon keksijänä tunnetun Johannes Gutenbergin mukaan. Editorin nimeämisessä oli ajatuksena, että tämä editori tulee mullistamaan sisällönsyötön verkkoon samalla tavalla, kuin kirjapainon keksiminen mullisti kirjoitetun tekstin levittämisen. Jääköön jokaisen itsensä harkittavaksi onko Gutenberg-editor kirjapainon keksimisen kaltainen mullistus. Toisaalta, onko sillä edes merkitystä, kumpi on ollut suurempi mullistus, kirjapaino vai editori? Joka tapauksessa Gutenberg-editor on erinomainen työkalu sisällönsyöttäjille ja se kehittyy jatkuvasti. Varmaa myös on, että Gutenberg-editorilla tuotettu sisältö on ensimmäisen neljän vuoden aikana saavuttanut valtavasti suuremman lukijakunnan kuin se, minkä kirjapaino aikanaan tavoitti. Onhan WordPress maailman suosituin julkaisujärjestelmä yli 64 %:n osuudella kaikista julkaisujärjestelmällä toteutetuista verkkosivuista ja yli 40 %:n osuudella kaikista verkossa olevista sivustoista. Lue lisää julkaisujärjestelmien markkinaosuuksista.

WordPress Karhu Helsingissä

Me Karhu Helsingissä haluamme tehdä sivustoista helppoja ja miellyttäviä käyttää, sekä tarjota asiakkaillemme parhaat mahdolliset työkalut sisällöntuotantoon. Lisäksi Huolenpitomme auttaa, jos tarvitset apua sivustosi kanssa.

Tarkennus 10.11.2022: Classic editorin tuen päättymisestä kertovaa osiota tarkennettu tuoreemman tiedon perusteella.

Tykkäsitkö tästä jutusta?

13
2
1
1
Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
Jaa juttu somessa
Tällä viikolla näitä luettiin eniten
  1. Terminaalimultiplekseri tmux – ystävä, johon voi luottaa
  2. Miten projektin hinnoittelumalli vaikuttaa suunnittelun joustavuuteen?
  3. 9 tärkeintä Google Analytics -mittaria
Viime aikoina eniten reaktioita herättivät
Ota yhteyttä
Tilaa uutiskirje