Wat kunnen we verwachten vanaf WordPress 5.8 (Deel 2 van 2)

In dit tweede deel van de Gutenberg handleiding serie over wat we kunnen verwachten vanaf WordPress 5.8 gaan we dieper in op Gutenberg Full Site Editor. Dit is een nieuwe manier van aanpassen dat wordt geïntroduceerd in de Gutenberg editor. In deel één van deze Gutenberg handleiding serie hebben we al uitgebreid over de theorie hiervan gesproken. In dit artikel gaan we wat dieper in op hoe dat er dan in de praktijk uitziet.

Gutenberg Full Site Editor is een manier om alles in je website met blokken aan te passen. We hebben al uitgebreid kennis kunnen maken met de Gutenberg blokken in voorgaande WPLounge artikelen. Naast berichten en pagina’s kan nu ook de rest van de site, zoals navigatie, header, footer etc. worden aangepast. Ook kunnen designs worden gemaakt die door de hele site gekoppeld kunnen worden aan pagina’s en berichten. Dit gaat door middel van een template met de Template editor. In de template leg je het design vast voor het betreffende bericht of pagina. Vervolgens kun je deze in elk bericht of pagina als template gebruiken.

De Template editor

De Template editor is te vinden in het Instellingen menu aan de rechterkant (indien nog niet uitgeklapt op het tandwieltje klikken) onder het tabje Pagina. Daar gaan we in dit artikel kennis mee maken. De functies die we gaan bespreken zijn nog niet beschikbaar in de huidige WordPress release. Om deze te kunnen testen, dien je de Gutenberg plugin te installeren. Hiermee komen alle bèta functies zoals de Template editor beschikbaar en andere bèta functies die tot nu toe ontwikkeld of nog in ontwikkeling zijn. Experimentele thema’s van WordPress zelf zijn het TT1 Blocks thema en het Blockbase thema. Het standaard Twenty Twenty-One thema voldoet ook als je meer een ‘overgangsthema’ zoekt waarin oude én nieuwe functies te vinden zijn. We raden je sterk aan om niet in een productie omgeving te gaan testen omdat er nog volop ontwikkeld wordt hierin. Bijvoorbeeld met Installatron kun je eenvoudig een kloon maken van je website om hiermee te testen.

Template edit modus

Nieuwe template aanmaken

Na installeren van de Gutenberg plugin zie je aan de rechterkant in de tab Pagina het kopje Template. Daar kun je kiezen welke template je aan het bericht of pagina koppelt. In het volgende voorbeeld is de Standaard Template gekoppeld. We gaan nu een nieuwe template aanmaken om deze vervolgens te bewerken.

Klik op het linkje Nieuw onder de dropdown met daarin Standaard Template. Er verschijnt nu een popup window waar je een naam kunt geven aan de nieuwe aan te passen template, klik vervolgens op de button Maak:

Je komt nu in de Template (edit) modus. In de bovenbalk verschijnt nu de naam van de template. Als je op de titel klikt klapt er een panel open met het titel veld, een beschrijving en een button om de template te verwijderen:

Met de <- Terug button kun je eventueel weer terug naar de pagina of bericht editor. Aan de rechterkant zie je onder de Template tab de naam van de geselecteerde template, onder de Blok tab verschijnt zo meteen het Site Title blok dat we gaan selecteren:

Aanpassen blok eigenschappen

Onder Blok aan de rechterkant zie je nu inderdaad alle eigenschappen van de Site Title verschijnen die je hier nu ook kunt aanpassen. We passen in de werkbalk het heading level van de title aan naar H2 en aan de rechterkant onder Typografie passen we Uiterlijk aan naar vet. Het ziet er dan zo uit:

Op dezelfde wijze kunnen naar wens de andere eigenschappen van de title worden aangepast in deze template. Die wijzen zichzelf want het zijn vrij basic eigenschappen de we grotendeels al eerder hebben behandeld. Analoog hieraan zijn ook de de andere blokken met min of meer dezelfde eigenschappen aan te passen. Klik op de knop Lijstweergave (drie schijn boven elkaar geplaatste streepjes in de bovenbalk van de editor) en je krijgt aan de linkerkant een overzicht van alle blok elementen op de pagina:

Zoals je ziet wordt de button Lijstweergave zwart zodra hij geselecteerd is. Het blok Post Content is slechts een container zonder eigenschappen en is hier nog leeg. Maken we hier bijvoorbeeld een Paragraaf aan, dan wordt er een Paragraaf blok aangemaakt binnen het Post Content blok. De eigenschappen van de paragraaf kunnen dan weer op dezelfde wijze aangepast worden:

De template is nu klaar dus we klikken op Publiceer om hem te bewaren. We hebben inmiddels aanpassingen op pagina niveau en template niveau gedaan en de template kan eventueel nog aan andere berichten of pagina’s gekoppeld zijn. Daarom krijgen we nu een waarschuwing en een aantal keuze mogelijkheden:

In dit voorbeeld zie je dat we de Post title hebben aangepast op pagina niveau. De andere aanpassingen hebben betrekking op de template ‘Handleiding Gutenberg’. In deze modus kun je dus op beide niveaus tegelijk werken; op pagina of bericht niveau en op template niveau. Bij het opslaan kun je er voor kiezen welke wijzigingen opgeslagen moeten worden.

Gutenberg (Full) Site Editor

Voor het aanpassen van het globale website design introduceert WordPress een nieuwe optie ‘Site Editor’ in de menubalk. Afhankelijk van het bèta thema vind je de knop in de bovenbalk óf in de linker menubalk, zoals hier is te zien in het TT1 Blocks thema:

De Site Editor is een functie die wat dieper gaat dan het ‘normale’ gebruik van WordPress. Onderdelen die in de Site Editor kunnen worden aangepast, konden voorheen alleen maar in de PHP code worden geprogrammeerd. Vandaar dat we dit onderwerp eventueel voor een later tijdstip bewaren.

Conclusie

Met de Gutenberg Full Site Editor zien we dat er geleidelijk aan steeds meer tools beschikbaar komen vanaf WordPress 5.8, waarmee alle niveaus van het website design gemanipuleerd kunnen worden. Design van website delen zoals navigatie, footer, header etc., maar ook van pagina’s en berichten kunnen door middel van templates als een soort mal van de vormgeving worden opgeslagen en hergebruikt.