Gutenberg-editori

WordPressin lohkoeditori

WordPressin omaa lohkoeditoria ei tarvitse erikseen asentaa vaan se asentuu automaattisesti WordPressin asentamisen yhteydessä ja on integroitu julkaisujärjestelmään. Lohkoeditori perustuu WordPressin mukaan modulaariseen block-järjestelmään eli sisältö rakennetaan sivulle lohkoittain. Periaate on tuttu useasta muusta lohkoeditorista. Tutustutaan hieman WordPressin lohkoeditorin toimintaan.

Käyttöliittymä

Gutenbergin käyttöliittymä koostuu seuraavista elementeistä:

1. Elementit: Elementtien ja lohkojen lisäämislohko.
2. Sivun näkymä: Näkymä näyttää miltä sivu näyttää. Sivun sisältö tehdään elementtien paneelista löytyvien elementtien avulla.
3. Asetukset: Asetuksien paneelin toiminnot muuttuvat sivun näkymässä aktiivisena olevan elementin mukaan. Voit siis klikata sivun näkymässä jotain sivulle asetettua elementtiä ja sen asetukset ilmestyvät Asetukset-paneeliin.
4. Yläpalkki oikea: Oikealla puolella yläpalkkia on painikkeet, joiden avulla voidaan asettaa sivun tila luonnokseksi tai julkaistuksi, avata sivu esikatseltavaksi selaimen uudessa välilehdessä, päivittää (tallentaa) sivu, avata ja piilottaa Asetukset-palkki (3.). Yläpalkin aivan oikeassa laidassa on kolme pistettä, josta voidaan avata Gutenberg-editorin asetukset ja muuttaa niitä.
5. Yläpalkki vasen: Yläpalkista voidaan mm. avata ja sulkea elementit-palkki (1.), poistua sivun muokkauksesta ohjauspaneeliin, vaihtaa kirjoitusmoodista järjestelymoodiin, peruuta-ja tee uudelleen -toiminnot sekä sivun rakennenäkymän avaamispainike.

Elementtien paneeli

Gutenberg käyttää samoja periaatteita, kuin useat olemassa olevat lohkoeditorit (esim. Elementor). Elementtien lisääminen tapahtuu yksinkertaisesti vetämällä ja pudottamalla elementti lohkon sivulle haluttuun kohtaan. Kun elementti on paikoillaan ja aktiivisena, sen asetuksia voidaan muokata Asetukset-paneelissa (3).

Elementtien paneeli avataan yläpalkin vasemmassa laidassa olevien toimintopainikkeiden ”+”-merkillä varustetusta painikkeesta. Elementit on jaoteltu paneelissa kategorioilla, jotka auttavat löytämään halutun sisällön luomiseen sopivan elementin. Perusversiossa kategorioita on seuraavanlaisia:

• Text: Tekstin lisäämiseen liittyvät elementit
• Media: Elementtejä mediasisällön, kuten kuvat, videot, galleriat jne., lisäämiseen.
• Design: Sisällön asetteluun sivulla liittyvät elementit, kuten lohkot eli rivit, sarakkeet jne.
• Widgets: Vimpain-elementtien lisääminen sisältöön. Vimpaimet ovat toimintoja, kuten hakutoiminto, artikkelien listaukset, viimeisimmät artikkelit lista jne.
• Theme: Sivuston teeman toiminnot, joihin kuuluvat sivun otsake, navigointi, otsikot, ote sivun sisältötektistä.
• Embeds: Elementit, joiden avulla voidaan upottaa sisältöä erilaisista ulkoisista palveluista, kuten Youtube-videon upottaminen.

Mikä ihmeen lohko?

Terminä lohko Gutenberg-editorissa viittaa yksittäiseen yksikköön tai elementtiin, jota käytetään lisäämään, muokkaamaan ja järjestämään erilaisia sisältötyyppejä sivulle tai artikkeliin. Lohkot muodostavat perustan Gutenbergin lohkopohjaisessa verkkosivun muokkausjärjestelmälle. Kaikki lohkoelementit ja sivun asetteluun liittyvät elementit on koottu Gutenberg-editorissa Design-kategorian alle.

Tarkemmin lohkoelementeistä

Gutenberg-editorissa sivujen ja artikkeleiden luomiseen ja muokkaamiseen, termit Row, Columns ja Group viittaavat erilaisiin elementteihin, joita käytetään sisällön rakenteen ja järjestelyn luomiseen sivulla tai artikkelissa. Elementit ovat olennainen osa WordPressissä käytettävissä lohkoeditoreissa ja näin on myös Gutenbergissa.

Seuraavassa ”pähkinänkuoressa” tarkemmin mitä termit tarkoittavat puhuttaessa Gutenberg-editorista:

• Row: Rivi on vaakasuuntainen säiliö, joka pitää sisällään yhden tai useampia sarakkeita. Sitä käytetään sisällön ryhmittämiseen ja järjestämiseen vaakasuunnassa. Jokainen rivi voi sisältää erilaisia lohkoja, kuten tekstiä, kuvia, videoita jne. Rivejä käytetään usein sivujen osioiden luomiseen ja ne tarjoavat rakenteellisen vaakasuoran kehyksen elementeille.
• Columns: Sarakkeisto on pystysuuntainen säiliö rivin sisällä. Sarakkeita käytetään sisällön jakamiseen vaakasuunnassa ja luomaan ruudukkomainen rakenne. Sarakkeet auttavat hallitsemaan erilaisten sisältöelementtien asettelua ja suuntausta rivin sisällä. Esimerkiksi voit käyttää sarakkeita kahden sarakkeen asettelun luomiseen, jossa toisessa sarakkeessa on tekstiä ja toisessa kuvia.
• Group: Ryhmä on tapa yhdistää useita lohkoja yhteen, jotta ne voidaan käsitellä yhtenä kokonaisuutena. Tämä voi olla hyödyllistä tyylien, suuntausten tai välien soveltamiseksi lohkokokoelmaan kokonaisuutena. Ryhmät mahdollistavat liittyvän sisällön tehokkaamman hallinnan ja mahdollistavat koko lohkokokoelman muokkaamisen kerralla.
• Stack: Pino toimii tietynlaisten asettelu- ja muotoiluvaihtoehtojen tarjoajana. Pino-elementin avulla voit asettaa useita lohkoja tai sisältöelementtejä päällekkäin tai allekkain pystysuunnassa, mikä antaa sinulle mahdollisuuden luoda monipuolisia asetteluja. Voit käyttää Stack-elementtiä esimerkiksi tekstien, kuvien ja muiden lohkojen yhdistämiseen pystysuuntaiseen järjestykseen.

Yhteenvetona voidaan todeta, että edellä mainittuja elementtejä käyttämällä pyritään luomaan responsiiviset kehykset sisällön näyttämiseen sivulla. Rivit, sarakkeet ja ryhmät toimivat yhdessä luoden dynaamisia ja responsiivisia asetteluja sivuilla ja -artikkeleissa.

Design

Katsotaan tarkemmin Design-kategorian elementtejä ja mitä niillä voidaan toteuttaa.

• Buttons: Luo painike sivulle.
• Columns: Toiminnolla lisätään useaan sarakkeeseen (column) jaettu elementti. Jokaiseen sarakkeeseen voidaan lisätä omaa sisältöä.
• Group: Ryhmälohkoa käytetään ryhmittelemään lohkojoukkoa säilön sisällä. Se kietoo siis sisälleen useamman, tavallisesti, Row- tai Column-lohkon. Sen voidaan ajatella olevan kuin äitielementti, joka sisältää lapsielementtejä.
• Row: Rivielementti eli lohko, jonka sisään voidaan luoda sisältöä horisontaalisti vaakasuoraan. Rivi voidaan myös jakaa useaan osaan.
• Stack: Pino-elementti, joka on vastaava kuin Row mutta sillä luodaan lohkoja vertikaalisti pystysuunnassa
• More: Lisätietoa-elementtiä käytetään jakamaan pitkä sisältö eri näkymiin. Kun lisäät More-elementin sisältöön, se luo ”Lue lisää” -linkin (tai vastaavan tekstin) sivun muokkausnäkymässä. Kun sivu julkaistaan ja kävijät näkevät sen ”Lue lisää” -linkkinä.
  Tämä on hyödyllistä tilanteissa, joissa haluat näyttää lyhyen kuvauksen tai esikatselun sisällöstä etusivulla tai sivun yleisnäkymässä, ja antaa sitten lukijoille mahdollisuuden lukea koko sisältö napsauttamalla ”Lue lisää”-linkkiä.
• Page Break: Sivunvaihtoelementtiä käytetään sivun tai artikkelin sisällön jakamiseen useisiin osiin niin, että ne näytetään erillisinä sivuina tai näkymän vaihtumisina. Toiminto voi olla hyödyllistä pitkien sisältöjen, kuten artikkelien tai oppaiden, hallinnassa ja lukijan navigoinnin helpottamiseksi. Kun lukija vierittää sivua alaspäin, hän voi nähdä, että sisältö jatkuu uudella ”sivulla” tai näkymällä.
• Separator:Jakoviiva-elementti luo sisältöön jakoviivan elementtien väliin.
• Spacer: Tyhjä tila -elementillä voidaan luoda sisältöelementtien väliin tyhjää tilaa.

Text-kategorian elementit

Text-kategorian toiminnoista (elementit) kaikki liittyvät jollain tapaa tekstisisällön tuottamiseen sivulle. Käytetyin elementeistä on luonnollisesti elementti Paragraph, joka on työkalu tavallisen leipätekstin tuottamiseen. Heading-elementillä sen sijaan asetetaan sisältöön otsikko.

Elementeistä hyödyllinen on myös Classic. jonka avulla voit asettaa WordPressin vanhasta Classic Editorista tutun tekstieditorin sivulle. Editorilla voidaan siis lisätä sivulle sekä otsikoita että leipätekstiä ja kaikkia mitä vanhassa Classic Editorissakin oli. Elementistä voidaan avata sisältö myös html-muokkaustilaan, jossa voidaan asettaa haluttaessa CSS-koodaamalla sisällölle muotoiluja.

Text-kategorian elementit:

• Paragraph: Tekstikappaleen lisääminen sivun sisältöön. (HTML: p)
• Heading: Lisää otsikkoelementti sivun sisältöön. (HTML: H1 H2 H3 H4 H5 H6)
• List: Voit lisätä sivun tekstisisältöön numeroidun tai numeroimattoman listan. (HTML: ul li ol li)
• Quote: Lisää visuaalisesti lainauksen/referaatin näköinen tekstielementti sisältöön. (HTML: blockquote cite)
• Classic: Lisää erilaisia elementtejä sivun sisältöön WordPress classic editorin tekstilaatikon avulla.
• Code: Lisää koodielementti sivulle. Elementin tekstisisällön teksti on ulkomuodoltaan ohjelmakoodin esittämiseen käytettävällä monospace-tyylistä fonttia. Html-merkintänä code on tyypiltään inline-elementti eli toimii tekstikappaleen sisällä ilman että muodostuu pakotettua rivinvaihtoa. (HTML: code)
• Details: Elementillä voidaan lisätä teksti, jota klikkaamalla avautuu tekstin alapuolelle jokin piiloitettu tekstisisältö. (HTML: details summary)
• Preformatted: Toimii samaan tapaan, kuin code-elementti mutta käyttäytyy samaan tapaan kuin tekstikappale omana sisältöelementtinään. Pakotettu rivinvaihto muodostuu elementin molemmille puolille. (HTML: pre)
• Pullquote: Toimii samaan tapaan kuin Quote mutta on hieman erilailla muotoiltu. (HTML: blockquote cite)
• Table: Lisää sivun sisältöön taulukkomuotoista sisältöä. (HTML: table th tr td)
• Verse: Elementin teksti muotoillaan samaan tapaan kuin preformatted-elementissä. Elementtiä käytetään esittämään sisältöä, kuten runoja, musiikkikappaleiden sanoja tai muuta vastaavaa muotoilua vaativia tekstejä.(HTML: pre)
• Footnote: Footnote on alaviite, joka voidaan lisätä Gutenbergissa joko tällä elementillä tai suoraan elementtiin elementti aktiivisena.(HTML: pre)

Media-kategorian elementit

Media-elementeillä voidaan lisätä sivulle kuvia, videoita ja ääntä sekä muuta mediasisältöä.

Media-kategorian elementit:

• Image: Voit lisätä sivulle yksittäisen kuvan ja asettaa sille kuvaan liittyvät asetukset. (HTML: img src)
• Gallery: Lisää kuvagalleria, joka sisältää useita kuvia kuvagalleriamuodossa.
• Audio: Lisää sivun sisältöön äänitiedosto (audio), joka näkyy sivulla palkkina, jossa on pley-painike ja aikajana.(HTML: audio)
• Cover: Cover-elementillä voidaan esittää sivun sisällössä laatikko, jossa on taustakuva tai -väri ja sen päälle voidaan asettaa tekstiä. Tavallisesti tekstinä voimii otsikko tai jokin muu lyhyt teksti.
• File: Lisää sisältöön elementti, joka sisältää jonkin tiedoston lataamispainikkeen ja kuvaustekstin tiedostosta.
• Media&Text: Toiminnolla voidaan lisätä laatikkomainen elementti, joka sisältää kuvan ja tekstisisällön aseteltuna vierekkäin. Toiminto on siis samantapainen kuin Cover, mutta teksti ei ole kuvan päällä vaan erillään kuvasta. Teksti voi olla elementissä myös pidempi sisältöteksti.
• Video: Nimensä mukaisesti elementillä voidaan lisätä videosisältö esitettäväksi sivulla. Video voi olla ulkoinen linkitys esimerkiksi Youtubesta tai paikallisesti omassa palvelintilassa oleva videotiedosto. Videot esitetään kuitenkin tavallisesti linkittämällä ne esimerkikiksi omalta Youtube-sivulta.(HTML: video)

Widgets-kategorian elementit

Widget on englanninkielinen termi WordPressissä, jonka suomenkielisenä vastineena käytetään sanaa vimpain. Vimpaimet ovat erillisissä asetuksissa asetettuja sisältökokonaisuuksia, joita voidaan tuoda sivulla (tavallisesti) sivun sivupalkkiin sivun oikeassa tai vasemmassa laidassa. Näitä erillisiä elementtejä voidaan tuoda myös sivun sisältöosaan Gutenberg-editorin Widgets-toiminnoilla.

Widgets-kategorian elementit:

• Archives: WordPress ”kategorioi” kirjoitetut artikkelit julkaisupäivän mukaisesti ja Archives-toiminnolla voidaan tuoda sivun sisältöön tekstilistana ajallisen linkkilistan hakemistoksi kaikista sivuston artikkeleista.
• Categories list: Näytä sivulla asettamasi artikkelikategoriat (taksonomia)
• Custom HTML: Tällä elementillä voit luoda sisältöä käyttämällä HTML-merkkauskieltä. Elementissä voidaan käyttää myös luokka- ja ID-määritteitä, joten voit luoda täysin räätälöityjä elementtejä HTML:n ja CSS-muotoilujen avulla.
• Latest Comments: Viimeisimmät kommentit, joita selaajat ovat kirjoittaneet artikkeleihin.
• Latest Posts: Näytä linkkilista viimeisimmistä julkaistuista artikkeleista sivustolla. Voit myös määrittää kuinka monta viimeisintä artikkelia elementissä näytetään.
• Page List: Listaa kaikki sivuston sivut linkkilistana.
• RSS: Esitä sivun sisällössä RSS-syötteitä, joissa on otsikko ja muutama rivi tekstiä. Syötteessä on tavallisesti linkki, jota klikkaamalla pääsee lukemaan koko uutisen.
• Search: Aseta sivun sisältöön Etsi-toiminto.
• Shortcode: Esimerkiksi lisäosat saattavat käyttää lyhytkoodeja, joilla lisätään lisäosan tuottamaa sisältöä sivun sisältöön. Esim. kuvaslider-lisäosa tuottaa koodinpätkän. Lisäämällä koodinpätkän sivulle Shortcode-elementillä, kuvaslider näkyy sivun sisällössä. Shortcode on tavallisesti muodossa [lyhyt koodi]
• Social Icons: Lisää sivulle Sosiaalisen median (SOME) ikonit. Ikonit lisätään niistä somealustoista, jotka linkität sivustollesi.
• Tag Cloud: Avainsanapilvi tarkoittaa kokoelman sivuston artikkeleita varten asetetuista avainsanoista. Sivun taksonomiassa voidaan asettaa artikkeleihin kategorioita ja avainsanoja, joilla ryhmitellä artikkeleita aiheiden mukaisesti.