WPLounge
Gutenberg Site Editor
Home » WordPress Gutenberg » De Gutenberg Site Editor (bèta)

De Gutenberg Site Editor (bèta)

Als vervolg op het Full Site Editor verhaal uit deel 1 en deel 2 over wat we kunnen verwachten vanaf WordPress versie 5.8 gaan we in dit artikel de Gutenberg Site Editor behandelen. Dit is een functie die op dit moment nog in bèta is waardoor het nog niet in de huidige WordPress versie (5.7) zit. Om dit ook zelf te kunnen testen moeten eerst de Gutenberg bèta plugin en het TT1 Blocks (bèta) Thema worden geïnstalleerd.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Naast de Gutenberg Site Editor bestaat Full Site Editen ook nog uit Navigatie en Widget onderdelen en Globale Stijlen. De Navigatie en Globale stijlen zijn reeds te vinden in de Site Editor. De Globale Stijlen zijn alle styling elementen voor zowel alles in je site als per blok type. Navigatie zullen we wat verder op inzoomen en zien we op dit moment ook al terug als bèta in het menu van de Gutenberg plugin en Globale stijlen is te vinden in het Optiesmenu (drie puntjes in de bovenbalk) van de Gutenberg editor.

Site editor openen

Dashboard Gutenberg Site Editor
Als bèta optie in het menu van het WP-admin gedeelte

De Site Editor is op verschillende manieren te vinden. In de modus Site bekijken kom je er via de link Bewerk site in de bovenbalk.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.
site editor bewerk site in site bekijken modus
Als menu optie in het top-menu aan de voorkant

In beide gevallen kom je terecht in het scherm zoals hieronder te zien is:

Index template

Gutenberg site editor index template dropdown
In de Site editor zie je midden bovenin een dropdown met de huidige template
Site editor index template
  • De template waar je standaard in komt als je Site Editor (bèta) selecteert is de index. De index is eigenlijk een soort van standaard systeem template, de moeder van alle templates. Als er op welk niveau dan ook geen template aanwezig is dan wordt deze gebruikt.

List view

Site editor List view blokken
De List View geeft een goed overzicht van alle blokken op de pagina

Het selecteren van de blokken op de pagina geeft vaak nauwelijks inzicht in waar precies geklikt moet worden voor welk blok. Aan de rechterkant kun je onder de Blok tab zien welke je hebt geselecteerd. Ook zie je daar de eigenschappen van het blok en kun je ze eventueel aanpassen. In het voorbeeld hierboven zie je dat we de Header van de site kunnen aanpassen door het Header element in de List view aan te klikken. Je hebt ook een mooi overzicht van alle sub-elementen die in de Header staan.

Header blok

Site editor Header blok eigenschappen
  • Onder de Blok tab (helaas nog niet vertaald in het voorbeeld) kun je de eigenschappen van de header voor de hele site aanpassen. Op dezelfde wijze kunnen de afzonderlijke sub-elementen van de Header worden geselecteerd en aangepast. Bij veel opties staat een toelichting over de werking van de instelling. Een ander belangrijk blok in de Header is het Navigatie blok.
Site editor Lijst weergave Navigatie blok

Navigatie blok

  • De verschillende eigenschappen van het Navigatie blok. Hier kunnen de design eigenschappen worden aangepast. In Gutenberg is er een Navigatie (bèta) functie in ontwikkeling om het Menu zelf aan te passen. De bèta versie is reeds te zien in de Gutenberg plugin. We gaan in het volgende voorbeeld even bekijken hoe dat eruit ziet.
Site editor Navigatie blok eigenschappen

Navigatie menu

Gutenberg plugin Navigatie functie menu aanpassen
De Navigatie (bèta functie) in de Gutenberg plugin voor het Menu
Gutenberg navigatie menu item Page link aanpassen
De nieuwe manier om een menu item aan te passen

Voor het toevoegen van een menu item: klik op het zwarte blokje met een plusje erin:

gutenberg aanmaken Page link menu navigatie button
Het toevoegen van een menu item

We voegen bijvoorbeeld een Page link toe aan het menu. Als je Page link selecteert krijg je dit scherm om een pagina te selecteren:

gutenberg aanmaken Page link menu navigatie

Nadat er een pagina link geselecteerd is kunnen op dezelfde wijze als hiervoor besproken aan de rechterkant eventueel eigenschappen van de Page link worden aangepast.

Vervolgens kun je de wijzigingen opslaan met de button Opslaan. Met de button Van menu wisselen kan gewisseld worden naar een ander menu of kan met de button Maak een nieuw menu een nieuw menu worden aangemaakt.

Gutenberg site editor opslaan maak nieuw menu
Opslaan of nieuw menu aanmaken

Moment opname

Zo hebben we al een aardig overzicht van de nieuwe functies die ons te wachten staan met de Gutenberg Site Editor. Wel moet gezegd worden dat dit de stand van de techniek is op moment van schrijven van dit artikel. De vraag is dan altijd nog óf en wanneer het in de WordPress core opgenomen gaat worden en in welke vorm. Waar nog getest wordt komen er altijd nog correcties en wijzigingen.

Andere site templates

We hebben het één en ander laten zien voor de index template. Op dezelfde wijze kunnen andere templates worden aangepast, zoals bijvoorbeeld de 404 pagina template. Deze krijgen bezoekers te zien als een pagina niet gevonden kan worden. Bij de meeste websites is dit een pagina die door een webdeveloper moet worden aangemaakt en/of aangepast. Met de Gutenberg Site editor is dat straks niet meer nodig. Tot slot laten we daarom nog even zien hoe te navigeren naar de WordPress site templates.

Er zijn twee manieren om te navigeren naar de templates;

template dropdown button browse all templates
  1. Via de eerder aangestipte dropdown in het midden van het top menu met de naam van de template, index in ons voorbeeld. Als je deze selecteert, kun je via de button Browse all templates een browse panel openen waarin genavigeerd kan worden binnen de templates structuur.
  2. Via het WordPress logo in de linker bovenhoek als je in de Site Editor bent of als je al in de template navigator bent (om hem weer dicht te klappen):
Gutenberg template navigator
  • Het W(ordPress) logo fungeert hier als button om het zwarte zijpaneel in en uit te klappen.
  • Met de terug knop < Thema navigeer je naar de op thema niveau aanwezige templates. Hier kun je dus de templates aanpassen van het thema dat op dat moment is geactiveerd.
  • Onderaan navigeer je met de knop General templates naar de algemene templates. Dit zijn templates die de WordPress template hiërarchie conventies volgen. Op basis van hun naamgeving worden ze door WordPress geselecteerd als layout. Dat is een nogal technisch verhaal dat buiten het bestek van dit artikel valt.

Conclusie

We hebben een inkijkje gegeven in de manier van werken en enige voorbeelden gegeven van hoe in het Gutenberg tijdperk straks gewerkt zal gaan worden bij het bouwen van een WordPress website. Aangezien dit artikel verre van volledig is kan er uiteraard nog veel meer over gezegd en geschreven worden. Gelukkig is er ook al heel veel informatie over te vinden op het internet voor wie er meer over wil weten. Met dit artikel zijn we met name in de laatste paragraaf iets dieper in de techniek gegaan. Hiermee willen we ook aangeven dat dankzij de Gutenberg ontwikkelingen het steeds toegankelijker wordt om aanpassingen te doen die voorheen alleen door webdevelopers konden worden gedaan.

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

Reageer