Gutenberg on Steroids – Näin lisäsin tehoa Gutenberg-editointiin
Käyttöliittymä WordPressTällä hetkellä, kun kirjoitan tätä artikkelia, Gutenberg on ”hieman kömpelö”, mutta silti erittäin toimiva editori sivujen rakentamiseen. Tai oikeastaan Gutenberg ei itsessään ole kömpelö, jos sen päälle kehittää omia lohkoja (tai hyödyntää lisäosia), jotka tekevät sivujen luomisesta ja päivittämisestä erittäin helppoa. Mutta se siitä – hypätään asiaan!
Vapaa-ajan projekti
Otin vapaa-ajan projektikseni kehittää omiin tarpeisiin lisäosan, joka sisältää monia eri natiiveja Gutenberg-lohkoja. Aluksi tein muutamat lohkot valmiin leiskan pohjalta. Sitten aloin miettiä, että onhan se hieman kömpelöä tehdä natiivi Gutenberg-lohko vain yhtä tarkoitusta varten (kyseessä oli elementti, jossa oli taustaväri, hieman pyöristetyt reunat, kustomoitu ikoni-lohko ja muutama tekstikappale).
Tämän jälkeen aloin miettimään, että eikös tähän toimisi ihan nykyinen ja core-elementti ”Ryhmä”, mutta sellainen jota pystyisi tuunaamaan siten miten haluaa? Tästä innostuneena aloin sitten tuumailemaan, että kyllähän tuollaisen saa tehtyä, mutta en halunnut lisätä tyylejä inline-tyylisesti eli suoraan HTML-rakenteeseen. Tämä olisi johtanut siihen, että jos samaa lohkoa käytetään monta kertaa, HTML-tiedosto kasvaisi turhaan kaikkien inline-tyylien takia. Ratkaisuksi osoittautui (yllätys, yllätys) erillinen CSS-tiedosto, johon tyylit pitäisi saada talteen.
Tässä vasta ongelma: miten saada juuri ne tyylit, jotka olen asettanut tietylle lohkolle, erilliseen CSS-tiedostoon? Noh, ei auttanut kuin googlata ja pohtia ratkaisua. Lopulta sain idean: luodaan PHP-funktio, joka generoi erillisen CSS-tiedoston aina, kun sivu ladataan. Tähän funktioon tein sitten seuraavat ominaisuudet:
- Luodaan tiedostopolku, joka sisältää kyseisen sivun ID:n
- Käydään kyseisen sivun sisältö läpi ja katsotaan sisältääkö se minun kustomoitua lohkoa
- Katsotaan onko kyseisen lohkon attribuutteihin lisätty ”uniikkia” tunnistetta.
- Katsotaan onko kyseiselle lohkolle lisätty kustomoituja tyylejä
- Mikäli kolme edellistä oli tosi, luodaan tyylitiedosto
- Lisätään tyylitiedostoon kustomoidut tyylit ja luodaan tiedosto
- Tarvittaessa poistetaan tiedosto, jos kustomoitua lohkoa tai tyylejä ei ole asetettu
Tuossa siis lyhkäisyydessään mitä tein. Tämän jälkeen tein ankaraa testaamista, koska huomasin, että uudelleenkäytettävät lohkot toivat hieman ongelmia toimivuuteen, mutta lopulta muutamien bugikorjauksien jälkeen sain lohkosta toimivan. Nyt ensimmäistä kertaa olen tätä lohkoa käyttänyt tällä sivustolla etusivun rakentamiseen ja homma näyttää toimivan!
Esimerkki lohkosta
No oliko tässä mitään järkeä?
Oliko tässä ratkaisussa lopulta mitään järkeä? Mielestäni kyllä. Nyt ei tarvitse luoda erillistä CSS-tiedostoa, johon on etukäteen määritelty erilaisia tyylejä, joita sitten linkiteltäisiin käyttäjän valintoihin editorissa.
Ratkaisussani käyttäjä voi täysin kustomoida tyylinsä ja CSS-tiedosto rakentuu sen mukaan, mitä kustomointeja käyttäjä on tehnyt editorissa. Erillisiä valmiita CSS-luokkia ei siis tarvitse luoda etukäteen, vaan ne muodostuvat käyttäjän valintojen perusteella. Lisäksi käyttäjän valintojen pohjalta luodaan myös tyylit pienemmille ruuduille. Käyttäjä voi itse määrittää media-queryjen katkaisukohdat (breakpointit), eli milloin mikäkin tyyli otetaan käyttöön. Alkuun on asetettu valmiit breakpointit, mutta ne ovat tarvittaessa muokattavissa.
Miltä tämä sinusta kuulosti? Onko tämä toimiva ratkaisu?
Kerro minulle miten sinä mahdollisesti olet tehnyt Gutenberg-editoimisesta helpompaa ”ei-tekniselle” ihmiselle. Tai, vaikka miten sinä hyödynnät Gutenbergiä sivujen tekemisessä? Käytätkö valmiita lisäosia saadaksesi lisämuokattavuutta lohkoihin vai väännätkö Reactilla tarpeisiisi tarvittavat lohkot. Heitä kommentilla!
Näyttää siltä, että sinulla on mahdollisuus olla ensimmäinen kommentoija! Jäikö jotain kysyttävää artikkelista tai haluatko antaa palautetta? Jätä kommentti ja aloita kekustelu.
Kommentit