Käytämme räätälöityjen WordPress-sivustojen pohjana rakentamaamme aloituspakkausta, Aucor Starteria, jonka olemme julkaisseet avoimena lähdekoodina. Tämä pohja kehittyy aktiivisesti WordPressin, asiakkaidemme tarpeiden ja alalla huomattujen muutosten mukana. Tässä kirjoituksessa kerron version 5.0 uudistuksista.

Tuoreen ilmeen ja uudet ominaisuudet voit kurkata Aucor Starterin demosta.

Uusi lähestyminen Gutenbergiin

Lähestyimme aluksi Gutenberg-sisältöeditoria niin, että poistimme käytöstä sen oletustyylit ja rakensimme lohkojen tyylit alusta asti itse. Ajatuksena oli, että näin sivuston toteuttajalla säilyisi täysi kontrolli asetteluista ja tyyleistä. WordPressin päivitykset ovat kuitenkin osoittaneet, että myös vanhojen lohkojen rakenne voi muuttua ajan myötä merkittävästi. Päivityksissä osa vanhoista tyyleistä lakkasi toimimasta tai editoriin ilmestyi uusia asetuksia, jotka eivät ilman sopivia tyylimäärityksiä toimineet.

Siispä tässä versiossa otamme mukaan pohjalle WordPressin tarjoamat oletustyylit Gutenbergille, joita laajennetaan ja yliajetaan tarvittaessa. Tämä varmistaa yhteensopivuuden Gutenbergin isoille muutoksille ja päivityksille myös tulevaisuudessa.

Uutena lohkona WordPressin 5.3-versiossa julkaistu Ryhmä (eng. Group) on nyt mukana. Ryhmän avulla sisällöstä voi koota osioita esimerkiksi erivärisellä taustalla laatikoiksi. Tällä lohkolla voi luoda vaikka erottuvia toimintakehotteita tai rytmittää pitkää sivua.

Pienempiä Gutenbergiin liittyviä hienosäätöjä:

  • Asetimme paremmat oletusleveydet lohkoille (esimerkiksi Youtube-videot ovat oletuksena muuta sisältöä leveämpiä).
  • Siivosimme tarpeettomia asetteluvaihtoehtoja lohkoilta (esimerkiksi koko näytön leveät taulukot).
  • Lohkojen väliset marginaalit ovat nyt yhdenmukaisempia ja pienenevät loogisesti mobiilissa.

Komponentit uusiksi rakennuspalikoiksi

Pinnan alla loimme uuden tavan pilkkoa sivupohjia, elementtejä ja lohkoja pieniin uudelleenkäytettäviin paloihin. WordPressissä on sisäänrakennettuna template part -nimellä kulkeva tekniikka elementtien paloitteluun, mutta tässä on paljon rajoitteita ja haasteita, jos esimerkiksi artikkelikorttia halutaan käyttää jossain kuvalla ja toisessa yhteydessä ilman kuvaa.

Komponenttien avulla voidaan samalle elementille tehdä lukemattomasti erilaisia variaatioita, joiden säädöt voi passata silloin kun komponenttia käytetään. Silloin esimerkiksi hakutulossivu, blogi ja liittyvät kirjoitukset voivat kaikki käyttää pohjalla samaa artikkelikorttia, mutta muuttaa sen tietoja tai näkyviä osioita tarpeensa mukaan.

Ajatus komponenteista ei ole uusi. Mallimme on virtaviivaistettu ratkaisu mukaillen Reactin komponenttien rakennetta. Valmiita ratkaisuja olisivat tarjonneet esimerkiksi koodikirjastot Twig ja Blade, mutta ne veisivät sivustojen rakentamisen kauas WordPressin omista käytännöistä. Lue dokumentaatiosta miten komponentit näkyvät kehittäjille.

Laajempi ja mobiiliystävällisempi valikko

Kun valikossa näytettäviä linkkejä on paljon, kannattaa kävijöitä ohjata visuaalisesti enemmän ja vähemmän tärkeisiin kohtiin. Aloituspakettimme valikko saa tässä versiossa suoraan tuen kaksitasoiselle valikolle, jossa tämä jaottelu on valmiina. Valikkoon saa helposti nyt laajennettua esimerkiksi someikoneita, kielivalintaa tai sivustohakua. Ylimääräisen valikkoalueen saa halutessaan helposti pois.

Teimme mobiilivalikosta hiotumman ja käytettävämmän. Pienemmillä ruuduilla avattu valikko peittää nyt koko ruudun, jolloin huomio ei karkaa valikon ulkopuolelle. Tablettikoossa valikko aukeaa sivupalkkina näytön reunaan, jolloin muu näkymä tummenee. Näin mobiilin ja työpöytäkoneiden välikoolle saadaan luonteva valikko ilman, että pientä mobiilivalikkoa pitää venyttää luonnottoman leveäksi.

Valikkoon tehtiin myös parannuksia saavutettavuuteen:

  • Ruudunlukijalaitteella tai näppäimistöllä navigoidessa fokus ei karkaa avatun mobiilivalikon ulkopuolelle.
  • Valikon seuraava taso avataan nyt erikseen nappulasta eikä se aukea itsestään kuten aikaisemmin.
  • Valikossa on nyt ruudunlukijalaitteille paremmin aria-merkintöjä, joilla ne osaavat paremmin ohjeistaa esimerkiksi milloin valikkokohta on avattu.

Pientä kivaa kehittäjille

Uusi versio sisältää suuren joukon pikkumuutoksia, jotka helpottavat kehittäjien työtä, mikä näkyy nopeampana työskentelynä ja parempana laatuna. Tässä joitain pieniä parannuksia:

  • Gulp ja käytetyt node-paketit on päivitetty uusimpiin versioihin.
  • Javascriptiä voi nyt kirjoittaa modernilla ES6-syntaksilla ja Gutenberg-lohkoja voi määrittää Reactilla kun Babel hoitaa koodin muuntamisen vanhoille selaimille yhteensopivaksi.
  • Lisäsimme jokaiseen Gutenberg-lohkoon tunnisteen lohkon tyypistä, mikä tekee tyylittelystä helpompaa ja vähentää tyylien vuotamista haluttujen elementtien ulkopuolelle.
  • Sivun ensimmäinen ja viimeinen Gutenberg-lohko saavat nyt oman tunnisteensa, mikä helpottaa näiden marginaalien tekemistä.
  • Teimme tyyli- ja skriptitiedostojen organisoinnista loogisempaa hienosäätämällä hakemistorakennetta.
  • Rakensimme oman korjauksen Gutenbergin bugiin, joka näytti leveitä ja koko ruudun levyisiä kuvia liian pienellä suttuisella kuvakoolla.

Aucor Starter on kaikkien käytettävissä

Julkaisimme aloituspakettimme avoimena lähdekoodina ensi kertaa jo vuonna 2017. Avoimen lisenssinsä ansiosta kuka tahansa opiskelijasta omien sivujensa rakentajaan ja kilpaileviin digitoimistoihin saa käyttää ja muokata sitä mielensä mukaan. Myös kehitykseen on osallistunut ulkopuolisia käyttäjiä, jotka ovat raportoineet bugeja ja lähettäneet korjauksia.

Aucor Starterin kehitys jatkuu aktiivisena. Seuraavia kehityskohteita tulevat todennäköisesti olemaan räätälöityjen lohkojen hallinta teeman sisällä ja lohkojen oletusasetusten tarkempi hallinta. Kehitys on avointa ja sitä voi seurata suoraan projektin kehityshaaroista.

Olemme valtavan ylpeitä aloitusteemastamme. Se on niin hyvä, että käytämme sitä juuri sellaisenaan itsekin. Löydät Aucor Starterin Githubista.