Vaihdoit teemaa ja tuttu editori muuttui vieraaksi lohkokankaaksi? Jokainen, joka avasi Gutenbergin ensimmäistä kertaa, kokee tämän jäätymisen. Tutut painikkeet katosivat, metabox-kentät siirtyivät, ja yksinkertaisen artikkelin luominen vie kaksinkertaisen ajan.

Mutta tässä on totuus: WordPressin lohkoeditori on nopein tapa asetella sisältöä ilman koodia. Käytännössä olemme havainneet, että muutaman tunnin lohkojen kanssa työskentelyn jälkeen et halua palata klassiseen editoriin. Ja jos tunnet pikanäppäimet ja muutaman niksin, Gutenberg alkaa toimia nopeammin kuin mikään sivunrakentaja.

Tästä oppaasta löydät kattavan erittelyn lohkoeditorista: ensikäynnistyksestä pikanäppäimiin. Ei teoriaa teorian vuoksi, vain konkreettisia vaiheita, jotka voit toistaa omalla sivustollasi.

💡 Pikakatsaus:

• Avaa editori: Artikkelit → Lisää uusi, ja päädyt Gutenbergin lohkokäyttöliittymään
• Lisää sisältöä lohkoilla: jokainen kappale, otsikko, kuva tai painike on erillinen siirrettävä lohko
• Lisää lohkoja "+"-kuvakkeen tai /-näppäimen kautta, kirjoita vain tarvitsemasi lohkon nimi
• Määritä lohkot sivupalkin kautta: muotoilu- ja tyyliasetukset vaihtuvat valitun lohkotyypin mukaan
• Opettele pikanäppäimet: Shift + Alt + H (Windows) avaa lunttilapun, jossa on kaikki pikanäppäimet

Mikä Gutenberg-editori on

Gutenberg on lohkomuotoinen sisältöeditori, joka on sisäänrakennettu WordPress-ytimeen versiosta 5.0 alkaen. Toisin kuin klassinen TinyMCE-editori, jossa koko artikkeli oli yksi tekstikenttä, Gutenberg pilkkoo sisällön itsenäisiksi lohkoiksi: kappaleiksi, otsikoiksi, kuviksi, gallerioiksi, painikkeiksi, sarakkeiksi ja kymmeniksi muiksi elementeiksi.

Jokainen lohko on siirrettävissä, määritettävissä ja tyyliteltävissä muista riippumatta. Lopputulos näkyy välittömästi: tämä on visuaalinen editori, ei tekstikenttä, jossa on "Esikatsele"-painike.

Vuonna 2026 Gutenberg on kehittynyt kiistanalaisesta uutuudesta täysiveriseksi sivunrakentajaksi. Full Site Editingin (FSE) myötä lohkoeditori on laajentunut artikkeleiden ja sivujen ulkopuolelle. Nyt voit muokata sen kautta ylätunnisteita, alatunnisteita, artikkelipohjia ja arkistoja. Klassinen editori on yhä saatavilla erillisenä lisäosana, mutta WordPress lopetti sen virallisen tuen jo vuonna 2022. Tietoturvapäivityksiä julkaistaan edelleen, mutta uusia ominaisuuksia ei enää lisätä.

Jos olet tosissasi WordPressin kanssa työskentelyn suhteen, Gutenberg ei ole vaihtoehto vaan päätyökalu. Sen opettelu kannattaa jo pelkän nopeuden vuoksi: kun siihen tottuu, artikkelit valmistuvat 2-3 kertaa nopeammin kuin klassisessa editorissa metabox-kenttäkasoineen.

Käyttöliittymä: ensikäynnistys

Avaa editori siirtymällä kohtaan Artikkelit → Lisää uusi (tai Sivut → Lisää uusi sivujen tapauksessa). WordPress lataa Gutenbergin tervetuloruudun ja tyhjän otsikkokentän kera.

Oikealla on sivupalkki, jossa on kaksi välilehteä: Artikkeli (tai Sivu) ja Lohko. Artikkeli-välilehti sisältää yleiset asetukset: permalinkin, kategoriat, avainsanat, artikkelikuvan, tiivistelmän ja julkaisutilan. Lohko-välilehti näyttää valitun lohkon asetukset.

Huomaa, että permalink-kenttä on käytettävissä heti, ilman erillistä otsikon klikkausta. Tämä säästää muutaman sekunnin jokaisessa artikkelissa.

Tekstilohkojen kanssa työskentely

Artikkelin otsikko

Editorin ensimmäinen lohko on otsikko. Kirjoita tekstiä, ja siitä tulee automaattisesti artikkelin H1. Otsikon vieressä on Muokkaa-painike, joka avaa permalinkin muokkauksen suoraan lohkossa.

Paina Enter, ja otsikon alle ilmestyy uusi kappalelohko. Gutenberg säilyttää klassisen editorin tutun näppäimistönavigoinnin: Enter luo uuden lohkon, Backspace yhdistää edelliseen.

Kappaleet ja muotoilutyökalurivi

Oletusarvoinen uusi lohko on Kappale. Mutta ennen kuin kirjoitat tekstiä, Gutenberg näyttää vaihtoehdot: lohkon voi muuttaa otsikoksi, kuvaksi, galleriaksi, kansikuvaksi ja kymmeniksi muiksi tyypeiksi.

Kun olet kirjoittanut tekstiä, muotoilutyökalurivi tulee näkyviin:

Työkalurivin avulla voit:

• Muuttaa kappaleen lainaukseksi, otsikoksi, listaksi, koodiksi tai esimuotoilluksi tekstiksi
• Käyttää lihavointia, kursivointia, yliviivausta ja alleviivausta
• Tasata tekstin vasemmalle, oikealle, keskelle tai molempiin reunoihin
• Lisätä linkin, jossa on mahdollisuus avata se uudessa välilehdessä
• Lisätä rivinsisäisen kuvan suoraan riville
• Kopioida, siirtää tai poistaa lohkon
• Muokata lohkoa HTML-muodossa
• Tallentaa lohkon uudelleenkäytettäviin lohkoihin

Sivupalkin Lohko-välilehdeltä löydät lisäasetukset: fonttikoon, anfangin, tausta- ja tekstivärin, täytteen ja mukautetun CSS-luokan. Värit voi asettaa mihin tahansa; paletti ei rajoitu teeman esiasetuksiin.

Kuvien lisääminen

Kuvia voi lisätä kolmella tavalla: "+"-kuvakkeen → Kuva-välilehden kautta, raahaamalla tiedoston työpöydältä suoraan editoriin tai käyttämällä /image-näppäinkomentoa kappaleen sisällä.

Klikkaa mitä tahansa "+"-kuvaketta, valitse Kuva-välilehti, ja esiin tulee lohko, jossa on kolme lähdettä: lataa tietokoneelta, valitse mediakirjastosta tai liitä URL-osoitteella.

Lohkon valitseminen lisäysvalikon kautta on visuaalisin tapa, varsinkin aluksi. Kun siihen tottuu, siirtyy käyttämään /image-komentoa, mutta visuaalinen valikko on aina käytettävissä.

Kuvan lisäämisen jälkeen sivupalkki tarjoaa: alt-tekstin (kriittinen hakukoneoptimoinnille ja saavutettavuudelle), koon, kuvasuhteen ja tyylit (pyöristys, duotone, varjostukset ja reunukset).

Tavallinen mediatiedostovalintaikkuna on tuttu klassisesta editorista; täällä voit asettaa otsikon ja kuvauksen. Mutta pääasetukset on nyt keskitetty Lohko-sivupalkkiin.

Käytännössä suosittelemme aina täyttämään alt-tekstin: se auttaa sekä hakukoneita että ruudunlukijoiden käyttäjiä. Kuvauksen tulisi olla täsmällinen, 4-8 sanaa, ja sisältää osion avainsana.

Ladattavat tiedostot

Tiedosto-lohkolla voit liittää PDF:n, ZIP-paketin, kuvan tai minkä tahansa muun tiedoston lukijoiden ladattavaksi.

Lataa tiedosto tai valitse se mediakirjastosta; Gutenberg luo latauspainikkeen automaattisesti.

Painikkeen teksti ja tiedostonimi ovat muokattavissa. Voit lisätä CSS-luokan mukautettua tyylittelyä varten. Painike avautuu oletuksena uuteen välilehteen.

Lainaukset ja huomiolaatikot

Lainaus-lohko lisää tyylitellyn sitaatin. Toisin kuin tavallinen kappale, lainaus on visuaalisesti korostettu; teema soveltaa siihen erityistä muotoilua.

Lainaus-lohkon sivupalkissa voit määrittää taustavärin, fontin ja täytteen. Lainaus voi näyttää osalta brändi-ilmettäsi sen sijaan, että se olisi vain tavallinen harmaa laatikko.

Lainaus hyväksyy saman tekstin kuin kappalekin, mutta erottuu visuaalisesti. Tavallisen Lainauksen lisäksi tarjolla on Korostettu lainaus (suurempi huomioelementti) ja Runo (lohko runoutta varten, joka säilyttää välilyönnit ja rivinvaihdot).

Videon ja ulkoisen sisällön upottaminen

Gutenberg tukee sisällön upottamista yli 30 alustalta: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare ja monet muut. Prosessi on kaikissa sama: lisää Upotus-lohko, valitse alusta, liitä URL-osoite ja napsauta Upota.

Liitä URL-osoite, napsauta Upota, ja se on siinä. Gutenberg hakee automaattisesti esikatselun, otsikon ja videon pikkukuvan YouTubesta.

Video näkyy suoraan editorissa; voit katsoa esikatselun poistumatta hallintapaneelista. YouTubelle on saatavilla asetuksia: voit piilottaa säätimet, ottaa automaattisen toiston käyttöön tai asettaa aloitusajan.

Painikkeet ja toimintakehotukset

Painikkeet-lohko luo yhden tai useamman painikkeen riviin. Täydellinen toimintakehotuksiin: "Lataa", "Rekisteröidy", "Siirry WordPress.orgiin".

Kirjoita teksti, liitä URL-osoite ja määritä tyyli: täyttö, ääriviiva, kulmien pyöristys, koko. Painikkeet mukautuvat automaattisesti mobiiliin; kapeilla näytöillä ne venyvät koko leveydelle.

Gutenberg tarkistaa painikkeen tekstin ja taustan välisen kontrastin: jos väriyhdistelmä on lukukelvoton, editori näyttää varoituksen. Pieni yksityiskohta, mutta se säästää aikaa saavutettavuustarkistuksissa.

Sarakkeet ja ruudukot

Sarakkeet-lohko luo 2-6 sarakkeen ruudukon. Voit lisätä jokaiseen sarakkeeseen minkä tahansa muun lohkon: kappaleen, kuvan, painikkeen tai lainauksen.

Oletuksena luodaan kaksi saraketta, mutta voit muuttaa niiden määrää ja leveyttä lohkon asetuksista.

Mobiililaitteilla sarakkeet pinoutuvat automaattisesti pystysuunnassa; sisältö ei hajoa ja pysyy luettavana. Tämä vaati ennen CSS-media queryitä, mutta nyt se toimii suoraan ilman säätöä.

Media ja teksti: kuva tekstin rinnalla

Media ja teksti -lohko on yksi hyödyllisimmistä asettelun kannalta: kuva tai video vasemmalla (tai oikealla), teksti ja painike oikealla (tai vasemmalla).

Lataa kuva, lisää teksti ja valinnaisesti painike. Puolet voi vaihtaa keskenään yhdellä napsautuksella.

Ja tältä se näyttää loppukäyttäjälle:

Se näyttää ammattimaiselta ja syntyy minuutissa. Tällaiseen asetteluun ei tarvita sivunrakentajaa.

Kolmannen osapuolen lohkot: lisäosat laajentavat Gutenbergia

Monet lisäosat tuovat omia lohkojaan Gutenbergiin. WooCommerce on näkyvin esimerkki: lisäosan asentamisen jälkeen editoriin ilmestyy lohkoja tuotteiden, ostoskorien, suodattimien ja tuoteryhmien lisäämiseen.

Jetpack lisää lohkoja lomakkeille, tilauksille ja some-kuvakkeille. Yoast SEO upottaa luettavuusanalyysin ja SEO-vinkit suoraan editorin sivupalkkiin. Contact Form 7 tarjoaa yhteydenottolomakelohkon.

Periaate on kaikissa sama: asenna lisäosa, niin lohkot ilmestyvät lisäysvalikkoon. Mitään koodia ei tarvita.

Pikanäppäimet ja vinkit

Hyödyllisin Gutenberg-vinkki on /-näppäin. Kun olet missä tahansa kappaleessa, kirjoita / ja ala kirjoittaa lohkon nimeä. Editori näyttää täsmäävät vaihtoehdot; valitse nuolinäppäimillä ja paina Enter.

Esimerkiksi: /image → kuvalohko, /heading → otsikko, /table → taulukko, /column → sarakkeet. Viikon käytön jälkeen tämä temppu nopeuttaa työskentelyä merkittävästi.

Täydellinen lista pikanäppäimistä: Shift + Alt + H (Windows) tai Opt + Ctrl + H (Mac). Tämä avaa lunttilapun, jossa on kaikki pikanäppäimet lohkojen siirtelystä muokkaustilojen vaihtamiseen.

Muutama muu tekniikka, joita käytämme käytännössä:

• Ctrl + Shift + D: kopioi valittu lohko
• Ctrl + Alt + T: lisää uusi lohko nykyisen eteen
• Ctrl + Alt + Y: lisää uusi lohko nykyisen jälkeen
• Klikkaa yläpalkin i-kuvaketta: näyttää dokumentin rakenteen (otsikot, sanamäärän, kappaleet)
• Listanäkymä (kolmen viivan kuvake vasemmassa yläkulmassa): selaa kaikkia artikkelin lohkoja puurakenteena, kätevä pitkissä artikkeleissa

Ja lopuksi: "Päivitys epäonnistui" -virhe johtuu yleensä epävakaasta internetyhteydestä, ei editorin ongelmasta. Tarkista yhteytesi ja yritä tallentaa uudelleen.

Video: Gutenberg vartissa

Haluatko nähdä kaiken toiminnassa? Tämä lyhyt WPBeginnerin video näyttää artikkelin luomisen koko kaaren Gutenbergissa, ensimmäisestä lohkosta julkaisuun:

⁉️🤔 Usein kysytyt kysymykset

Täytyykö Gutenberg asentaa erikseen?

Ei, lohkoeditori on ollut sisäänrakennettuna WordPressin ytimeen versiosta 5.0 (julkaistu joulukuussa 2018) lähtien. Jos sinulla on tuore WordPress-versio, Gutenberg on jo käytössä. Erillinen Gutenberg-lisäosa on olemassa vain niille, jotka haluavat testata uusia lohkoja ennen kuin ne sisällytetään ytimeen.

Voinko palata klassiseen editoriin?

Kyllä, asenna ilmainen Classic Editor -lisäosa. Se poistaa Gutenbergin kokonaan käytöstä ja palauttaa tutun TinyMCE:n. Mutta huomioi: WordPress lopetti klassisen editorin virallisen tuen vuonna 2022. Nykyiset WordPress-versiot (6.x vuonna 2026) toimivat yhä Classic Editorin kanssa, mutta uudet ominaisuudet (Full Site Editing, Block Themes, Patterns) ovat saatavilla vain Gutenbergissa.

Miten Gutenberg eroaa Elementorista tai Divistä?

Gutenberg on sisäänrakennettu WordPress-sisältöeditori: ilmainen ja ilman ulkoisia riippuvuuksia. Elementor ja Divi ovat kaupallisia sivunrakentajia, joissa on laajemmat suunnitteluominaisuudet: popupit, sliderit, markkinointi-integraatiot. Tyypilliselle blogille tai yrityssivustolle Gutenberg kattaa tärkeimmät asettelutehtävät. Jos ansaitset rahaa sivustollasi (verkkokauppa, laskeutumissivut, funnelit), sivunrakentaja tarjoaa enemmän joustavuutta. Hyvä uutinen: Gutenberg ja sivunrakentajat toimivat samanaikaisesti. Voit rakentaa sivuja Elementorilla ja hallita artikkeleita lohkoeditorissa.

Entä jos lohkot menevät päällekkäin tai hajoavat mobiilissa?

Yleensä ongelma on teemassa, ei Gutenbergissa. Tarkista: (1) tukeeko aktiivinen teemasi lohkoeditoria (Block Themes takaavat oikean asettelun); (2) ohittaako mukautettu CSS lohkojen täytteet ja leveyden. Vaihda testiksi vakio Twenty Twenty-Four -teemaan; jos lohkot näkyvät oikein, ongelma on teemassasi.

Miten lisään lohkon, jota ei ole oletusvalikoimassa?

Kaksi vaihtoehtoa: (1) etsi lisäosa, joka lisää tarvitsemasi lohkon (esimerkiksi Otter Blocks tai Spectra tarjoavat kymmeniä lisälohkoja), tai (2) luo mukautettu lohko Advanced Custom Fieldsin (ACF) kautta, mikä on helpompaa kuin lohkon kirjoittaminen Reactilla. Useimpiin tehtäviin lisäosat riittävät: asenna ja käytä.

Toimiiko Gutenberg mukautettujen sisältötyyppien (CPT) kanssa?

Kyllä, täysin. Kun rekisteröit CPT:n, määritä 'show_in_rest' => true ja 'supports' => array('editor'), niin lohkoeditori käynnistyy automaattisesti. Olemassa oleville CPT:ille, joissa ei ole REST API -tukea, on sovitinlisäosia, mutta on parempi päivittää sisältötyypin rekisteröinti.

Kumpi valita: Gutenberg vai sivunrakentaja

Gutenberg on kehittynyt kokeellisesta "ominaisuudesta" kypsäksi editoriksi, joka pyörittää miljoonia sivustoja. Sisällöntuottajille tämä tarkoittaa suoraa tuottavuushyötyä: visuaalinen asettelu, välitön esikatselu ja pikanäppäimet säästävät 30-60 minuuttia jokaisessa artikkelissa verrattuna klassiseen editoriin ja shortcode-lisäosiin.

Jos pyörität blogia, uutissivustoa tai yritysportaalia, Gutenberg kattaa tärkeimmät tehtävät. Ilmainen, ilman ulkoista koodia ja ilman ylimääräistä palvelinkuormaa.

Jos rakennat monimutkaisia laskeutumissivuja, verkkokauppaa mukautetuilla asetteluilla tai markkinointifunneleita, tutustu sivunrakentajiin. Päivittäiseen sisältötyöhön käynnistä Gutenberg, kirjoita /heading ja ala vain kirjoittaa.