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.

Figma naar WordPress FSE theme

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.

Custom Post Types