Uusi päivä, uusi editori: WordPress Gutenberg

Kirjoittaja: Joona Mäkinen 27.03.2019

Joulukuussa 2018 uusi Gutenberg-editori julkaistiin oletusarvoisena editorina WordPress.org versiossa 5.0. Vanhan editorin saa oletusarvoiseksi vuoteeen 2020 asti liitännäisin (Classic Editor ja voimakkaammin vanhaa kokemusta puskeva Classic Editor Addon).

Moni verkossa valittaa WordPress-tiimin “yhtäkkisestä” päätöksestä siirtyä tähän editoriin, jolle oli annettu ainakin vuosi varoitusaikaa. Elokuussa 2018 WordPress-yhteisö julkaisi editorista virallisen liitännäisen, jonka pystyi asentamaan jokaiselle WordPress-sivustolle. Editorin nimi tulee painokoneen keksijästä, Johannes Gutenberg.

Nimen mukaisesti editorin pääinspiraationa on luoda sanomalehtimäinen ja visuaalinen sivujen ja julkaisujen muokkain.

Kuva 1: Gutenberg-editori

Olemassaolevia WordPress-sivuja päivittäessämme huolehdimme käyttökokemuksen muuttumattomuudesta, joten liitännäiset Classic Editor ja Classic Editor Addon asennetaan oletusarvoisesti. Mutta rohkeille uutta kokeileville on tarjolla nyt uusi seikkailu, Gutenberg Compatible!

Kuva 2: Editorin blokkien lisäysdialogi

Gutenbergin sisältö toimii “blokkeina”. Ensimmäinen mielikuvasi legopalikoista on siis melko oikea. Näitä blokkeja sijoitellaan editorissa ristikkoon (grid) tai allekkain, muodostaen lopullista sivua vastaavaan lookin jo suoraan editoriin.

Gutenbergiä julkaistessa sitä kehittävä yhteisö huolehti taaksepäinsopivuudesta huolellisesti. Kun päivityksen jälkeen kopioi tekstisisällön suoraan uuteen editoriin, jaetaan vanhat leipätekstit kappaleittain paragraph-blokeihin, kuvat kuvablokkeihin, listat listablokkeihin jne.

Sisältö ja luodut teemat eivät siis automaattisesti muutu “täysin Gutenbergiksi”, mutta siihen päästään pienellä päivitystyöllä. Teeman tiedostot laitetaan tulostamaan oikeaan paikkaan alkuperäistä the_content() eli WordPressin oletuseditorin sisältöä. Lisäksi teeman huolehditaan tulostavan blokit ja sisältö responsiivisessa ristikossa (grid), jota myös editori tukee.

Gutenberg developereille

Editori tuo mukanaan javascript-toiminnon wp.editor.registerBlockType(), joka mahdollistaa blokkien lisäämisen editorin suorituksen aikana. Gutenberg tallentaa puhtaasti HTML-dataa omilla metatiedoilla sivun sisältöalueelle (the_content()) tietokantaan, joka eroaa hieman vanhanaikaisesta ACF (Advanced Custom Fields) kenttien syötöstä.

Myös ACF on hypännyt osittain Gutenberg-junaan lisäämällä acf_register_block() funktion liitännäisen nyt-betaversiossa 5.8, joka kutsuu omatoimisesti samaa registerBlockType() mutta säätää syöttökentiksi ja tallenteeksi acf-kentät ja niiden täytetyn datan.

Gutenberg omassa käytössä

Tämäkin artikkeli toimii myös uuden editorin arviointina, sillä sivustomme teeman Gutenberg-tukea on tweakattu hieman. Loin aikaisemmin tänä vuonna oman liitännäisen, joka lisää editoriin blokkien ääriviivat. Tällä helpottui käyttö merkittävästi. Kolmannen osapuolen liitännäinen Kadence Blocks paransi myös ristikon (grid) käyttöä mahdollistamalla erikokoiset kolumnit, joka kumma kyllä ei ole vielä osa editorin sisäänrakennettua Columns-blokkia.

Kuva 3: Gutenberg-editorin oma tweak käyttäen create-guten-block pohjaa

Mitä tarvitsen Gutenbergiin?

Johdan artikkelillani siihen, että käyttöönotto ei siis vaadi paljoa. Funktionaalisesta näkökulmasta lopullisen sivun sisältö tulee kuin ennen, vain sen ulkoasu pitää tarkistaa. Jos koet tarvetta tai kiinnostusta tälle, klikkaa Yhteystiedot -sivua yläoikealla ja katsotaan yhdessä 🙂

Avainsanat: , , ,

Joona Mäkinen on Agendan uusin koodaajalisäys. Innovatiivinen joka alan taitaja, jolle haaste kun haaste on ajalla ja tahdonvoimalla päihitettävissä.

Lue seuraava blogikirjoitus:

Muotoilun bisnesarvo – konkreettisia keinoja kasvuun

Kirjoittaja: Anssi Kokkonen 04.02.2019