Mis on Gutenbergi plokk ja kuidas seda kasutada?

WordPressi sisuhaldussüsteem oli alates WordPressi loomisest kuni 2018. aastani püsinud suhteliselt muutumatu, kasutades toimimiseks TinyMCE editori. Redaktor oli tekstipõhine, pakkudes võimalust tekste sisestada ja vormindada, lisada pilte jm meediat, kuid jäädes siiski väga erinevaks sellest, kuidas veebileht kasutaja jaoks reaalselt välja nägema hakkas.

2018. aastaks olid paljud lihtsamate veebilehtede ehitamiseks mõeldud page builder’id (nt Wix, Weebly, SquareSpace jt) jõudnud aga selliste sisuhaldusviisideni, kus erinevaid lehe elemente oma kohtadele lohistades on võimalik terveid layoute luua, mis võrreldes WordPressi tekstipõhise toimetamisega mõjus väga kaasaegselt ja mugavalt. Ühtlasi oli tekkinud terve hulk pluginaid, mis võimaldasid WordPressile vastavat funktsionaalsust lisada, kuid nendega kaasnesid tavapärased pluginatega seotud ohud: lehe aeglus, probleemid uuendamisega jne.

Ühesõnaga, käes oli aeg, et WordPress ise kaasaegsema sisuredaktori kasutusele võtaks. Selle jaoks loodigi Gutenberg – sisuredaktor, mille abil on samuti võimalik lehed ja postitused erinevaid plokke omavahel kombineerides n-ö kokku laduda.

Gutenbergi plussid ja miinused

Gutenbergi põhilised plussid:

• sisu lisamine on varasemast palju intuitiivsem ja mugavam;
• algajal on lihtsam sisuhaldust õppida;
• haldus näeb välja sarnane lõpliku veebilehega;
• pole vaja kasutada nii palju lühikoode (shortcodes);
• lisandub uusi võimalusi sisu toimetamiseks;
• ei ole vaja kasutada eraldi page builder’i pluginat.

Skeptikud aga tõid välja ka ohud:

• lubatud lihtsuse asemel muutub haldus keerulisemaks, sest võimalusi on rohkem;
• tekivad konfliktid olemasolevate teemade ja pluginatega, mis võib veebilehti ootamatult ära lõhkuda;
• Gutenberg ei ole tehniliselt piisavalt heal tasemel, et see vaikimisi kasutusele võtta ja peaks jääma eraldi pluginaks.

Redwallis oleme me kõigi selliste muutuste poolt, mis võimaldavad veebilehe haldamist kasutajatele mugavamaks muuta ja meie kogemuses on Gutenberg seda igal juhul teinud. Suur osa kaasaegsest WordPressi arendusest, mida me Redwallis praktiseerime, on just erinevate custom Gutenbergi plokkide arendamine ja olemasolevatele plokkidele kujundusele vastavate stiilide loomine, mis pakub meie klientidele maksimaalselt paindlikke võimalusi oma veebilehe sisu haldamisel.

25. jaanuaril 2022 välja tulnud uus WordPressi versioon 5.9 tõi kaasa järgmise faasi projekt Gutenbergis: full site editing, mis võimaldab kasutada plokke kogu veebilehel, mitte ainult lehtedel ja postitustel. See annab haldajale veelgi vabamad käed oma veebilehe välimuse muutmisel ilma koodi puutumata. Uued võimalused töötavad siiski vaid selliste teemade puhul, mis on kogu lehe halduse jaoks kohandatud ning üleüldise mõju ilmnemine võtab ilmselt veel aega.

Gutenbergi plokkide lisamine ja seadistamine

Oma põhiolemuselt on Gutenbergi kasutamine haldajale tõepoolest ülilihtne ja intuitiivne: “+”-märki vajutades ilmub olemasolevate plokkide valik, sealt tuleb valida sobiv plokk, misjärel lisatakse plokk lehele ja küljepaneelile ilmuvad selle ploki seaded.

Halduskeskkonnas lehe sisus “+”-i vajutades pakutakse esmalt populaarsemaid plokke ja lihtsamate lehtede puhul, kus erinevaid sisutüüpe pole palju, võibki sellest piisata. Kuid kasulik on teada, et plokkidel on kindlad tüübid, mis on näha kogu plokkide valikus, valides haldusvaates ülalt vasakult “+”-märgi või vajutades nuppu “Sirvi kõiki”.

Plokitüübid on:

• tekst (nt lõik, pealkiri, nimekiri, tsitaat jm),
• meedia (nt pilt, galerii, video, fail jm),
• disain (nt nupud, tulbad, tühi ruum, eraldaja jm),
• moodulid (Widgets, nt sotsiaalmeedia ikoonid jm),
• teema (nt postituse kuupäev, pealkiri, sisu jm),
• Embeds (nt Youtube’i, Spotify, Twitteri vm teenusepakkujate lehelt sisu lisamine URLi abil).

Kõik siin näidetena üles loetletud plokid on WordPressiga juba vaikimisi kaasas, kuid vastavalt kasutatavale teemale võivad plokid sisaldada erinevaid lisavõimalusi või vastupidi, olla kasutaja jaoks halduskeskkonnast eemaldatud, sest need ei ole mõeldud selles teemas kasutamiseks.

Redwallis lähtume olemasolevate plokkide modifitseerimisel sellest, et kasutajal oleks võimalikult lihtne lehte hallata, seega on kättesaadavad vaid need plokid, mis on vastavalt veebilehe eesmärkidele vajalikud ja on kujundatud teemasse sobivateks. Nii näiteks on igal veebilehel nuppude valikus vaid need nupud, mis disainer on vastava teema jaoks loonud ja WordPressi vaikimisi pakutavad nupustiilid on peidetud, sest need ei pruugi sobida ülejäänud kujundusega.

Lisaks WordPressis juba olemasolevatele plokkidele võivad konkreetsed WordPressi teemad sisaldada spetsiaalselt selle tarbeks arendatud plokke. Meie arendatud teemades on üsna tavapärased näiteks päiseplokid, plokid kontaktide kuvamiseks või plokid, mis võimaldavad kuvada teatud seadete alusel valitud hulka postitusi või lehti. Erilahendusena loodud plokkidega peaks alati kaasas olema arendaja loodud haldusjuhend, mis selgitab konkreetse ploki seadistusvõimalusi.

Plokkide kombineerimine

Gutenbergi abil on võimalik plokke lisada üksteise sisse, mis võimaldab luua erinevaid layoute ka ilma eriplokkide arendamiseta.

Väga kasulik on näiteks tulpade plokk (Columns), mis lisab lehe jaotuse kaheks või kolmeks tulbaks, millel on kindlad laiused (nt 50/50, 33/33/33 vms). Tulpade sisse on võimalik lisada teisi sisuplokke. Nii näiteks on erenewable.com avalehel lisatud plokk Columns (ja valitud 33/33/33 jaotus), mille tulpade sees on pilt, pealkiri ja lõik:

Keerukam näide Balt-Hellin AS-i veebilehelt: plugina abil lisatud Carousel Slider ploki sees on plokk Cover, mille sees on omakorda pealkiri ja nupp:

Kuigi mõlema näite puhul on olemasolevate plokkide stiile vastavalt veebilehe kujundusele koodis kohandatud, st täpselt samasugust tulemust disaineri ja arendaja abita ei saa, ei ole tegemist spetsiaalselt nende lehtede jaoks loodud plokkidega ja samalaadset tulemust võib ka igaüks ise WordPressi pakutavate lahenduste abil saavutada.

Ka spetsiaalselt vastava veebilehe tarbeks arendatud plokid võivad põhineda sellel, missuguseid plokke üksteise sisse lisada, näiteks kontaktiplokk Mapri Ehituse uuelt veebilehelt. Plokki Contacts on võimalik lisada kahte erinevat sisemist plokki, Contact Card või Mission Card:

Ühest küljest pakub plokkide üksteise sisse paigutamise võimalus rohkem vabadust erinevate ülesehitusega lehtede loomiseks, teisalt tekitab üksjagu segadust plokkide lisamisel ja seadistamisel, sest ühtäkki on väga keeruline aru saada, missugune üksteise sisse paigutatud plokkidest parasjagu valitud on.

Väga palju abi on lehe allservas olevast jäljereast (Breadcrumbs), mille abil navigeerimine muudab paljude üksteise sees olevate plokkide seas orienteerumise lihtsamaks. Näide Mapri Ehituse veebilehe kontaktiplokist:

Kokkuvõtteks, iga muudatus tekitab esialgu teatud vastupanu ja nii oli skeptitsism Gutenbergi suhtes selle väljatulemise ajal igati mõistetav. Tänaseks on sellest ajast aga piisavalt möödas ja plokk-redaktor on end igati tõestanud. Arvestada tuleb, et teatud õppimisaeg on vajalik, et osata Gutenbergist viimast võtta, kuid tulemus on seda pingutust väärt. Redwall püüab oma kliente selles osas igati toetada, andes iga veebilehega kaasa detailse haldusjuhendi ja pakkudes vajadusel ka koolitust.