Achtergrond informatie
Zonder WordPress Full Site Editing bepaald het theme hoe je blog, website of shop eruit ziet en ingedeeld is. En afhankelijk van hoeveel extra functionaliteit de maker van het theme heeft ingebouwd kunnen details aangepast worden. Als dat niet voldoende is, dan kan je zelf met behulp van PHP details laten aanpassen, of je huurt een ontwikkelaar in.
Met Full Site Editing heb je veel meer mogelijkheden om je theme volledig aan te passen. Een FSE theme bestaat uit verschillende templates. Elke template is opgebouwd uit elementen (Gutenberg blocken). Je kan je de stijl van Gutenberg blocken aanpassen en je kan blokken verplaatsen, verwijderen en toevoegen.
Figma is een cloud-based design tool. Het is gemaakt om gelijktijdig samen te werken. Figma is webbased. Je kan als team websites en user interfaces designen vanuit je browser. Voor Windows en Apple is er een desktop app.
Project goal
Het Figma design moet omgezet worden naar een WordPressFull Site Editing (FSE) theme. Het portaal zal gegevens uit verschillende bronnen krijgen zoals Exact. De klant heeft verschillende API’s die deze gegevens voor de ingelogde gebruiker kunnen ophalen.Voor het koppelen van deze API’s zullen custom Gutenberg blocks in React.js worden ontwikkeld. Ook zijn WordPress Custom Posts nodig. De informatie uit de Custom Post Types worden ook door Gutenberg blocken getoond.
De WordPress Gutenberg FSE theme moet zowel in de verschillende browsers als op mobiel goed getoond worden.
Oplossing
De WordPress Gutenberg FSE theme bevat een plugin met verschillende custom Gutenberg blocken en verschillende Custom Post Types. Voor de eerste versie worden de gegevens opgeslagen in Custom Post Types. In latere versies wordt dit vervangen door de verschillende API’s
Custom Gutenberg blocken
De custom Gutenberg blocken zijn met React.js en PHP gemaakt. React.js wordt gebruikt om de de WorPress admin editor het block te tonen. PHP wordt gebruikt om in de frontend dynamische data te tonen. Iedere ingelogde klant ziet alleen gegevens die aan zijn of haar bedrijf gekoppeld is.
- Team informatie
Voor iedere klant is er een team met specialisten beschikbaar. In dit block wordt voor de ingelogde klant het team getoond. - Slider met download of link
Informatie in de slider kan klant specifiek zijn, of voor alle klanten. Elke slide kan gekoppeld worden aan een PDF document of aan een link. - Beschikbare portalen
Alle portalen waar de ingelogde klant recht op heeft om te gebruiken worden hier getoond.
Custom Post Types
- Klanten en team
De Custom Post Type waarbij klanten en medewerkers (team) gekoppeld worden is in de eerste versie een Custom Post Type. Deze is zo ontwikkeld dat in de volgende versie de API gebruikt kan worden om de gegevens uit Exact in te lezen. - Slider
Omdat te downloaden bestanden niet in de upload folder mogen, worden deze bestanden buiten de root van de website opgeslagen. Elke slide kan aan een klant of aan alle klanten gekoppeld worden. - Portals
Portals kunnen hier beheert worden. De ingelogde gebruiker ziet alleen de portals waar hij/ zij namens de organisatie toegang toe heeft.