Modernizing Website Development with the WordPress Block Editor
Loading...
URL
Journal Title
Journal ISSN
Volume Title
Perustieteiden korkeakoulu |
Master's thesis
Unless otherwise stated, all rights belong to the author. You may download, display and print this publication for Your own personal use. Commercial use is prohibited.
Authors
Date
2022-07-29
Department
Major/Subject
Computer Science
Mcode
SCI3042
Degree programme
Master’s Programme in Computer, Communication and Information Sciences
Language
en
Pages
67
Series
Abstract
Content Management Systems such as WordPress have evolved drastically since the beginning of the century, taking advantage of new web technologies to implement groundbreaking features. With the Gutenberg project, WordPress is trying to revolutionize the way websites are built and maintained. Moving to a more visual editing experience for entire websites is a massive undertaking that warrants closer inspection. WordPress requires a lot of customization to implement a custom solution, resulting in a large amount of time required from developers. More widespread use of no-code solutions like Gutenberg would let users modify their custom-developed websites without knowledge of the underlying code. This thesis conducts a case study on a customized WordPress theme called Agenda Design System (ADS), developed by Agenda Helsinki. The aim is to evaluate the feasibility of specific components of ADS, which is developed according to the Gutenberg design principles. The focus is on core visual components, such as the website navigation menu as well as the header and footer areas. The amount of coding knowledge required to manipulate these complex website elements is evaluated and compared to what would be possible by using new Gutenberg blocks. The results of the case study show that ADS is capable of creating headers and footers with the required background knowledge. However, they use a custom implementation, which could be migrated to a Gutenberg-native architecture by utilizing header and footer blocks. Additionally, the customizability of the existing navigation menu implementation relies heavily on WordPress, PHP, and ADS know-how to make simple changes that a customer might ask for. As it turns out, Gutenberg blocks abstract away much of the complexity, creating a smoother learning curve for a new WordPress developer. ADS proves versatile enough to incorporate them, paving the way for a future where web developers can focus less on trivial matters, such as the visual layout of a web page. New developers are able to jump right in to implementing custom features without having to learn the intricacies of WordPress, PHP, and ADS first.Sisällönhallintajärjestelmät kuten WordPress ovat kehittyneet huomattavasti vuosituhannen vaihteesta saakka hyödyntämällä viimeisimpiä web-teknologioita uraauurtavien ominaisuuksien aikaansaamiseksi. Gutenberg-projektin myötä WordPressin tavoitteena on mullistaa tapa, jolla web-sivustoja rakennetaan ja ylläpidetään. Visuaalisempaan muokkauskokemukseen siirtyminen kokonaisten web-sivustojen osalta on massiivinen hanke, joka vaatii tarkempaa tarkastelua. WordPress vaatii paljon kustomointia yksilöllisten ratkaisujen toteuttamiseksi, mikä vaatii web-kehittäjiltä paljon aikaa. Gutenberg-projektin kaltaisten laaja-alaisempien no-code-tyyppisten ratkaisujen käyttö antaisi loppukäyttäjille valtuudet muokata heidän omia kustomoituja web-sivustojaan ilman ymmärrystä niitä pyörittävästä koodista. Tämä diplomityö tutkii kustomoitua WordPress-teemaa nimeltä Agenda Design System (ADS), jonka on kehittänyt Agenda Helsinki. Tavoitteena on arvioida keskeisten ADS:n komponenttien käyttökelpoisuutta. Keskeisiä komponentteja ovat esimerkiksi navigaatiovalikko sekä sivuston ylä- ja alatunnisteet. Diplomityössä arvioidaan komponenttien vaatimia ohjelmointitaitoja, ja saatua tulosta verrataan uusien Gutenberg-lohkojen mahdollistamaan lopputulokseen. Tutkimustyön tulokset osoittavat, että ADS kykenee nykyisellään luomaan sivuston ylä- ja alatunnisteita vaadituilla esitiedoilla. Nykyinen ratkaisu on kuitenkin toteutettu kustomoidulla tavalla, jonka voisi toteuttaa Gutenberg-projektille natiivilla tavalla käyttämällä ylä- ja alatunnistelohkoja. Lisähuomiona nykyisenkaltainen navigaatiovalikko nojaa vahvasti WordPress-, PHP- ja ADS-osaamiseen yksinkertaisten muutosten tekemiseksi. Lopputuloksena voidaan todeta, että Gutenberg-lohkot abstrahoivat suurimman monimutkaisuuden pois mahdollistaen uudelle WordPress-kehittäjälle tasaisemman oppimiskäyrän ADS:n maailmaan. ADS osoittautuu tarpeeksi joustavaksi uusien lohkojen sisäistämiseksi, mikä tarkoittaa tulevaisuutta, jossa web-kehittäjät voivat keskittyä triviaaleihin asioihin nykyistä vähemmän. Uudet kehittäjät pystyvät toteuttamaan kustomoituja ratkaisuja paljon aikaisemmassa vaiheessa ilman, että he joutuvat opettelemaan WordPressin, PHP:n ja ADS:n perusteet ensin.Description
Supervisor
Vuorimaa, PetriThesis advisor
Vuorimaa, PetriKeywords
Gutenberg, WordPress, block editor, PHP, no code, visual editor