WordPressin päätoimisena editorina on vuoden 2018 joulukuusta saakka toiminut Gutenberg-lohkoeditori, joka julkaistiin WordPressin version 5.0 mukana. Uusi editori ei kuitenkaan saanut julkaisun aikana erityisen ruusuista vastaanottoa, sillä editorin päivittynyt käyttöliittymä ei erilaisten ongelmien lisäksi ollut kaikkien mieleen. Editori on sittemmin saanut useita päivityksiä, joiden jälkeen suurimmat julkaisun ajan ongelmat on saatu korjattua.

Päivitysten mukana tulleiden korjauksien ja käyttöliittymän parannuksien lisäksi saatavilla on myös entistä enemmän lohkoja, joiden avulla sivustoille on mahdollista toteuttaa modulaarisia sisältöalueita. Lohkoja on tällä hetkellä käytettävissä kymmeniä erilaisia, mutta ne eivät usein vielä riitä monimutkaisten sivustojen ulkoasun tai toiminnallisuuksien toteutukseen. Tässä tapauksessa sivustoille on mahdollista lisätä uusia lohkoja.

Uusien lohkojen lisäämiseen on muutamia vaihtoehtoja:

  1. WordPress-lisäosat
  2. Gutenberg-lohkohakemisto
  3. Lohkojen toteutus itse

WordPressille tyypilliseen tapaan lohkoja varten löytyy kasapäin erilaisia lisäosia ladattavaksi, mutta ne saattavat pitää sisällään kymmeniä lohkoja, joille ei välttämättä ole sivustolla tarvetta. Tarpeettomien lohkojen asentamiselta voi välttyä hyödyntämällä hiljattain julkaistua Gutenberg-lohkohakemistoa, joka mahdollistaa yksittäisien lohkojen etsimisen ja asentamisen suoraan editorista käsin. Jos sopivaa lohkoa ei löydy saatavilla olevista lisäosista tai lohkohakemistosta, on WordPress-kehittäjille tarjolla myös muutama erilainen tapa uusien lohkojen toteutukseen, jotka sopivat joko modernin JavaScriptin osaajille tai vanhan koulukunnan PHP-kehittäjille.

Lohkon toteutus JavaScriptillä

Valtaosa Gutenberg-editorin koodista ja dokumentaatiosta on toteutettu vähintään JavaScriptin ES6-versiolla, joten modernin JavaScriptin tuntemus on suositeltavaa, jos lähestyt uusien lohkojen toteutusta tällä tavalla. WordPressin kehittäjille suunnattu dokumentaatio Gutenberg-lohkojen toteutuksesta on valitettavasti hieman suppea, joten joudut luultavasti etsimään ratkaisuja monimutkaisten lohkojen toteutuksiin myös muualta internetin syövereistä.

Uusien lohkojen määrittely JavaScriptillä pitää sisällään seuraavat vaiheet:

  1. JavaScript-työnkulun konfigurointi JavaScriptin kääntämistä varten
  2. JavaScript-tiedoston rekisteröinti WordPressille
  3. Uuden lohkon rekisteröinti JavaScriptillä

Nopeuttaaksesi alkuun pääsemistä ja välttyäksesi JavaScript-työnkulun konfiguroinnilta voit hyödyntää WordPressin kehittämää @wordpress/create-block npm-pakettia luodaksesi valmiin pohjan, joka kattaa kaikki edellä mainitut vaiheet yksittäisen lohkon toteutukseen.

Kirjapainon keksijä Johannes Gutenberg on Wordpress Gutenberg lohkojen esikuva

Lohkon toteutus PHP:llä

Monille WordPress-kehittäjille tuttu Advanced Custom Fields -lisäosa tarjoaa hyvän vaihtoehtoisen ratkaisun lohkojen toteutukselle, jos et ole vielä tutustunut modernin JavaScriptin maailmaan. ACF tarjoaa Pro-versiossaan uuden ominaisuuden nimeltä ACF Blocks. ACF Blocks mahdollistaa uusien lohkojen luomisen Gutenberg-editoriin PHP:lla ja se on täysin yhteensopiva kaikkien ACF:n mukana tulevien kenttätyyppien kanssa, mikä nopeuttaa lohkojen toteutusta valtavasti.

ACF on myös pitänyt uusien lohkojen määrittelyn yksinkertaisena:

  1. Lohkon rekisteröinti acf_register_block_type()-funktiolla.
  2. Uuden kenttäryhmän luominen lohkolle normaaliin tapaan ACF:n asetuksista.
  3. Lohkon templaten luonti sivuston käytössä olevaan teemaan tai lisäosaan.

Sivustoilla, joilla on käytössä Timber-lisäosa on myös mahdollista hyödyntää .twig-tiedostoja ACF Blocksien toteutuksessa.

Kummalla tavalla lohkojen toteutusta kannattaisi lähestyä?

Lohkojen toteutus JavaScriptillä voi olla uudelle ja kokeneellekin WordPress-kehittäjälle hidasta aloittaa, sillä opiskeltavaa on paljon. Opiskelua saattaa myös hankaloittaa Gutenberg-editorin suppea dokumentaatio. Opiskelu kuitenkin kannattaa, sillä Gutenberg-editorin hyödyntäminen tulee lisääntymään tulevaisuudessa ja sen ominaisuuksia tullaan laajentamaan pelkkien sivujen ja artikkelien muokkaamisesta myös WordPressin muille alueille.

ACF Blocksia hyödyntämällä on nopeaa päästä vauhtiin uusien lohkojen toteuttamisessa sen yksinkertaisuuden ja kattavan dokumentaation ansiosta. ACF:n mukana tulevat kenttätyypit ovat myös entuudestaan tuttuja monille WordPress-kehittäjille, mikä nopeuttaa uusille lohkoille tarvittavien kenttien rakentamista. ACF Blocksia hyödyntäessä on kuitenkin hyvä tiedostaa, että se on kolmannen osapuolen lisäosa, jonka kanssa saattaa tulla ongelmia tulevaisuudessa WordPressin ja Gutenberg-editorin päivittyessä.

Molemmissa lähestymistavoissa on siis hyvät ja huonot puolensa, mutta on myös tärkeää arvioida sopiva toteutustapa sivustokohtaisesti.

 

P.S. Gutenberg-nimitys tulee saksalaisen Johannes Gutenbergin mukaan, joka tunnetaan kirjapainotekniikan kehittäjänä. Hän yhdisti aikaisemmin olemassa olleet elementit toimivaksi tekniseksi ratkaisuksi.

Lähetä meille viesti

Form first
Form second
Checkboxes

Kun tilaat uutiskirjeemme, saat sen sähköpostiisi 4-6 viikon välein. Jos toivot yhteydenottoa, voimme olla sinuun yhteydessä puhelimitse tai sähköpostitse.
Lomakkeen lähettämällä hyväksyt tietosuojaselosteemme.

Tilaa blogimme sähköpostiisi tai kysy lisää