Kuinka rakentaa oma lohko Gutenberg-editoriin?

12.10.2025 | Artikkeleita

Wordpress

Kuinka rakentaa oma lohko Gutenberg-editoriin?Gutenberg-editori on mullistanut tavan, jolla WordPressissä luodaan ja muokataan sisältöä. Lohkopohjainen lähestymistapa mahdollistaa dynaamisen, modulaarisen sisällönrakennuksen, joka on joustava ja käyttäjäystävällinen. Monet kehittäjät kuitenkin karttavat oman Gutenberg-lohkon tekemistä, koska uskovat sen vaativan raskaita JavaScript-kirjastoja kuten Reactia tai Webpackia. Todellisuudessa lohkon voi rakentaa kevyesti, tehokkaasti ja ilman monimutkaisia riippuvuuksia.

Miksi oma Gutenberg-lohko?

Oma lohko antaa täydellisen hallinnan sisällön esitystapaan ja käyttäjäkokemukseen. Sen avulla voidaan luoda toistuvia elementtejä, kuten arvostelukortteja, palvelulistoja tai painikkeita, jotka pysyvät yhdenmukaisina koko sivustolla. Lisäksi omat lohkot voivat parantaa suorituskykyä, koska ne sisältävät vain tarvittavat toiminnot ilman ylimääräisiä koodirakenteita, joita monissa valmiissa lisäosissa on.

Lohkon suunnittelun lähtökohdat

Ennen varsinaista koodausta kannattaa miettiä: mikä ongelma lohko ratkaisee? Onko kyse sisällön muotoilusta, tietojen näyttämisestä vai interaktiivisuudesta? Kun lohkon käyttötarkoitus on selkeä, rakenne pysyy kevyenä ja ylläpidettävänä. Tavoitteena ei ole rakentaa kaikkea kattavaa “superlohkoa”, vaan tarkkaan rajattua työkalua.

Gutenbergin perusarkkitehtuuri

Jokainen lohko koostuu kahdesta pääelementistä:

  1. editor-script – vastaa lohkon hallinnasta ja esikatselusta editorissa.

  2. render-template – määrittää, miltä lohko näyttää sivustolla.

Periaatteessa voit luoda toimivan lohkon pelkällä PHP:llä ja pienellä määrällä JavaScriptiä. WordPress tarjoaa register_block_type() -funktion, jolla lohko voidaan rekisteröidä ilman Build-työkaluja.

Kevyt lähestymistapa – ilman Reactia ja Webpackia

Sen sijaan että loisit täyden JavaScript-kehitysympäristön, voit hyödyntää WordPressin omaa lohkoskriptijärjestelmää. wp.blocks, wp.editor ja wp.element ovat jo valmiina WordPressissä, joten sinun ei tarvitse ladata Reactia tai Babelia erikseen. Tämä tekee kehityksestä huomattavasti kevyempää ja vähentää latausaikoja.

Esimerkiksi lohkon voi rakentaa pelkällä PHP-rekisteröinnillä ja pienellä inline-JavaScriptillä, joka määrittää, miten lohko käyttäytyy Gutenbergissä. Tämä lähestymistapa sopii erityisesti kevyisiin sisältöelementteihin, kuten korostuslaatikoihin, infoteksteihin tai CTA-painikkeisiin.

Hyödyt ilman raskaita kirjastoja

Kun raskaat kirjastot jätetään pois, lohkosta tulee:

  • Nopeampi ladata: vähemmän riippuvuuksia tarkoittaa kevyempää kokonaisuutta.

  • Ylläpidettävämpi: koodi pysyy selkeänä ja helposti muokattavana ilman monimutkaista Build-prosessia.

  • Turvallisempi: vähemmän ulkoisia riippuvuuksia tarkoittaa vähemmän päivitysriskejä.

  • Yhteensopiva: toimii laajasti eri WordPress-versioissa ilman huolta Reactin versioristiriidoista.

Tyylit ja käyttöliittymä

Koska Gutenberg mahdollistaa CSS:n tuomisen suoraan lohkoon, voit määrittää sen ulkoasun helposti ilman ylimääräisiä tyylikirjastoja. Tyylejä voi käyttää sekä editorissa että front-endissä, jolloin käyttäjä näkee heti, miltä sisältö näyttää valmiilla sivulla.

Hyvä käytäntö on hyödyntää BEM-nimeämiskäytäntöä, jolloin lohkojen tyylit pysyvät erillään muusta teemasta. Esimerkiksi luokat kuten .vsm-box__title ja .vsm-box__content tekevät rakenteesta selkeän ja estävät ristiriitoja muiden CSS-tyylien kanssa.

Dynaamiset lohkot ja PHP-renderöinti

Jos haluat, että lohko näyttää esimerkiksi dynaamisia tietoja (kuten viimeisimmät artikkelit tai käyttäjän tiedot), kannattaa hyödyntää PHP-renderöintiä. Tällöin lohko ei ole pelkästään visuaalinen komponentti, vaan pystyy hakemaan ja käsittelemään dataa reaaliaikaisesti WordPressin tietokannasta.

Tämä lähestymistapa tekee lohkosta tehokkaan ja joustavan – se yhdistää Gutenbergin modernin käyttöliittymän ja perinteisen PHP-logiikan edut.

Kehitystyön parhaat käytännöt

  • Pidä lohko yksinkertaisena: jokaisella lohkolla tulisi olla yksi selkeä tehtävä.

  • Hyödynnä WordPressin omia funktioita: ne takaavat yhteensopivuuden myös tulevaisuudessa.

  • Versioi ja dokumentoi: vaikka lohko olisi pieni, hyvä dokumentaatio helpottaa sen käyttöä ja jatkokehitystä.

  • Testaa eri teemoilla: varmista, että lohko toimii myös muissa ympäristöissä kuin omassasi.

Tulevaisuus ja laajennettavuus

Gutenberg kehittyy jatkuvasti, ja lohkoista on tulossa yhä merkittävämpi osa koko WordPress-ekosysteemiä. Tulevaisuudessa sivustot rakentuvat yhä enemmän lohkojen ympärille – ei vain sisältösivut, vaan myös navigaatio, otsikot ja jopa jalustat. Siksi oman lohkon rakentaminen kevyesti on erinomainen tapa varmistaa, että pysyt mukana kehityksessä ilman ylimääräistä kuormaa.

Yksinkertainen, käsin rakennettu Gutenberg-lohko ei ainoastaan paranna suorituskykyä, vaan myös antaa sinulle täydellisen hallinnan sivustosi rakenteeseen ja käyttäjäkokemukseen. Kun vältät raskaita kirjastoja ja keskityt olennaiseen, WordPress pysyy kevyenä, nopeana ja joustavana – aivan kuten sen alun perin oli tarkoitus olla.

Samankaltaisia artikkeleita

WordPressin typografiaopas

WordPressin typografiaopas

Tässä oppaassa käydään läpi, kuinka valita oikeat fontit, miten käyttää niitä WordPressissä tehokkaasti ja miten typografia voi tuk...

23.11.2025
WordPressin joustavuus

WordPressin joustavuus

WordPress on säilyttänyt asemansa maailman suosituimpana sisällönhallintajärjestelmänä jo yli 20 vuoden ajan. Yritykset eri toimialoilt...

20.11.2025
WordPressin kehityssuunta

WordPressin kehityssuunta

WordPress on ollut verkkokehityksen kulmakivi jo vuosikymmeniä, ja sen rooli on muuttunut dramaattisesti ajan myötä. Alun perin blogi...

20.11.2025
WordPressin ekosysteemi vuonna 2026

WordPressin ekosysteemi vuonna 2026

WordPress on laaja ja kehittyvä ekosysteemi, joka kattaa verkkosivujen, verkkokauppojen, sovellusten, integraatioiden ja tekoälypohjai...

20.11.2025
Verkkokauppa WordPressillä

Verkkokauppa WordPressillä

Tässä oppaassa käymme läpi vaiheet, työkalut ja parhaat käytännöt, jotta voit luoda toimivan ja optimoidun verkkokaupan.

20.11.2025