WordPressin mukana tulevilla Gutenberg-lohkoilla on rajansa – laajenna mahdollisuuksia JavaScriptin tai PHP:n avulla
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:
- WordPress-lisäosat
- Gutenberg-lohkohakemisto
- 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:
- JavaScript-työnkulun konfigurointi JavaScriptin kääntämistä varten
- JavaScript-tiedoston rekisteröinti WordPressille
- 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.
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:
- Lohkon rekisteröinti acf_register_block_type()-funktiolla.
- Uuden kenttäryhmän luominen lohkolle normaaliin tapaan ACF:n asetuksista.
- 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.
Lue myös: Helpompaa sisällöntuotantoa WordPressillä – Gutenberg-editori tänään ja huomenna
