Aan de slag met de Gutenberg Editor

WordPress is enorm begrip in de webwereld. Waar je vroeger de zogenaamde ‘wysiwyg’ editor (what you see is what you get) had, gebruikt WordPress sinds enkele jaren een nieuwe editor, genaamd Gutenberg. Deze update is daadwerkelijk een ‘what you see is what you get’ editor. Elk element dat je in je cms pagina plaatst zul je op je daadwerkelijke pagina ook (ongeveer) zo terug zien. Deze nieuwe editor bestaat uit blocks. Dit zijn onderdelen die je op je website kan plaatsen. Een koptekst, afbeelding of stukje shortcode zijn voorbeelden van blocks. In dit hoofdstuk gaan we dieper in op de editor, het plaatsen van blocks, het maken en publiceren van je pagina en de instellingen die je kunt doen op verschillende type blocks.

In dit hoofdstuk

Wat is Gutenberg

Gebruikersinterface

Blok plaatsen

Blokinstellingen

Instellingen en vormgeving

Concept en publiceren

Wat is Gutenberg?

Gutenberg is sinds enkele jaren de editor van WordPress. Het maakt gebruikt van blocks. Blocks zijn losse elementen die je aan je (lege) pagina kunt toevoegen. Gutenberg biedt je daardoor de vrijheid om je hele eigen pagina op te zetten. Je bent daarbij niet meer afhankelijk van designs en html templates die van tevoren zijn klaargezet. Wil je een blok tekst nu iets verder op de pagina plaatsen, dan kan dit in slechts enkele muisklikken.

Voordelen van Gutenberg

• Veel meer vrijheid in het beheren en bouwen van je pagina
• Tot in detail de vormgeving van diverse elemten zelf bepalen
• Eenvoudig je eigen templates creëren

Gebruikersinterface

In bovenstaande afbeelding zie je de editor van je pagina.

1. De titel van je pagina plaats je bij ‘Titel toevoegen’. Deze titel vind je in het paginaoverzicht ook terug als je je pagina als concept opslaat of publiceert. Ook komt deze terug in de naam van je browservenster of je Google zoekresultaten. De titel die je hier toevoegt is niet direct zichtbaar op jouw pagina. Deze kun je plaatsen via bijvoorbeeld het blok ‘Koptekst’.
2. Onder de titel begint het canvas van jouw nieuwe pagina. Deze is volledig leeg als je een nieuwe pagina maakt. Alle blocks die je zult plaatsen komen onder de titel te staan. Uiteindelijk is ook de layout van je pagina redelijk zichtbaar in de editor.
3. In de balk aan de rechterkant van de pagina bevinden zich alle opties en instellingen voor jouw nieuwe pagina. Meer over het instellen van je pagina vind je hier.
4. Met de knoppen linksboven kun je opeenvolgend:
   • Plusje: toevoegen van een blok, patroon of gesynchroniseerd blok
   • Pen: kiezen tussen de ‘bewerken’ en ‘selecteren’ optie
   • Pijltjes: laatste wijziging ongedaan maken of toch opnieuw uitvoeren
   • Stepen: openen van je documentoverzicht.
5. Rechtsboven kun je je pagina(concept) opslaan en publiceren. Indien de pagina gepubliceerd is komt er ‘Updaten’ te staan. Het laptop icoon zorgt voor een dropdown waarmee je de weergave van je pagina op verschillende devices kan voorvertonen. Handiger (en realistischer) is de onderste optie ‘ Voorvertoning in nieuwe tab’. Dit zorgt ervoor dat je de daadwerkelijke pagina in een nieuw tabblad te zien krijgt.
   Verder is het mogelijk de zijbalk met instellingen te verbergen of te tonen en zijn er nog enkele andere opties voor de weergave van je pagina in te stellen. Klik maar eens op verschillende opties om te kijken wat er met je editor gebeurd.

Blok plaatsen

Het plaatsen van een blok op je pagina doe je met behulp van het blauwe plusje (linksboven bij Gebruikersinterface), het zwarte plusje (rechts in je canvas) of door een schuine streep te typen met de bloknaam erachter. Hieronder een uitleg van de overige interface elementen.

1. Dit venster verschijnt als je op het zwarte plusje op je pagina klikt om een blok te plaatsen.
2. Je kunt met het zoekvenster zoeken naar de naam van het te plaatsen blok. Je kunt zowel nederlandse als engelse benamingen gebruiken.
3. Een zestal veelgebruikte blokken worden als suggestie getoond.
4. Met de knop ‘Alles bekijken’ wordt het uitgebreide overzicht geopend links in je pagina met álle beschikbare blocks.

Blokinstellingen

Na het plaatsen van je blok kun je deze (na het eventueel vullen met gewenste inhoud) voorzien van diverse instellingen, vormgeving of andere opties.

1. Als je een blok selecteert of plaatst zie je een zwevende menubalk boven dit blok met de specifieke instellingen voor dit blok. Het eerste icoon (los van de rest van de balk) toont de eventuele ‘parent’, het element waarbinnen je je blok hebt geplaatst. Je ziet dit onder andere terug bij punt 3. Vaak heb je hier de mogelijkheid om te kiezen uit de breedte van de weergave, uitlijning van teksten, aanpassingen van type koptekst (h1, h2, h3 enz.), bold, italic of het plaatsen van een link.
2. Via het laatste icoon in het zwevende menu kun je extra mogelijkheden openen, waaronder kopiëren, dupliceren, kopieer stijlen en verwijderen.
3. In je document overzicht zie je hoe je pagina is opgebouwd met alle blokken die je hebt geplaatst. Zoals al genoemd bij punt 1 zie je dat het blok Koptekst (in dit overzicht ‘Blokinstellingen’ genoemd) samen met een Paragraaf staat genest binnen een Omslagafbeelding. Met behulp van je document overzicht behoudt je eenvoudig structuur in je pagina. Klap blokken eventueel dicht om het bouwen iets makkelijker en overzichtelijker te maken.
4. In de balk rechts zie je naast Pagina ook Blok staan. Hier wissel je tussen specifieke instellingen van pagina’s én de instellingen van je geselecteerde blok.
5. Elk blok die je plaatst heeft twee tabjes. Onder het linkertabje staan Instellingen van dit blok (meer functioneel), onder het rechtertabje vind je Vormgevingsopties.

Let op! In sommige (uitklap)menu’s staat een blauw kader (zie Kopiëren in vorige afbeelding). Dit blauwe kader toont niet aan dat dit een huidige status of actief item is, maar geldt enkel als indicatie voor navigatie en selectie met je toetsenbord. Met je pijltjes beweeg je dit blauwe kader naar boven of beneden om vervolgens met enter een optie te kiezen.

Instellingen en vormgeving

Elk blok heeft zijn eigen instelmogelijkheden, zowel functioneel als op het gebied van stijl/vormgeving. Verschillende instelmogelijkheden zijn onderverdeeld in categorieën middels een accordeon. Deze zijn in je balk in- en uit te klappen. Het is per blok verschillend welke instelmogelijkheden zichtbaar zijn, aangezien niet alle instellingen voor elk blok van toepassing zijn.

1. Over het algemeen zijn tekstblokken (Koptekst, Paragraaf, Lijst) voorzien van de instelling Responsive dimensions met daaronder de optie om Fluid font size gebruiken te activeren. Hiermee stel je de mobiele font-size in (bij min font size) en de desktop font-size (max font size). Je bepaalt zelf deze waardes in pixels, tijdens het verschalen zal WordPress zorgen dat grote teksten automatisch mee terugschalen, dus je font-size blijft responsive.
2. Op een heel aantal blokken kun je Vrije positionering toepassen. Hiermee bepaal je, per breakpoint (breedte in pixels van devices), hoeveel pixels een blok gepositioneerd wordt. Met bijvoorbeeld -100 pixels kun je zorgen dat een afbeelding een blok erboven overlapt.
3. Onder Geavanceerd vind je twee opties die interessant zijn. Met HTML anker kun je het blok een naam geven waardoor er een link kan worden gecreëerd. De naam is in kleine letters, waarbij spaties worden omgezet in streepjes. Noem je jouw blok bijvoorbeeld ‘algemene-info’ dan kun je vanaf een andere pagina (of vanaf dezelfde) een link creëren naar deze positie op de pagina door in je link #algemene-info te verwerken.
4. Ook vind je bij geavanceerd Bloknaam, waarmee je letterlijk je blok een eigen naam kan geven. Deze naam komt terug in je pagina opbouw als je het Document overzicht opent. Handig om goed overzicht te bewaren.
5. Bij het tabje voor vormgeving vind je bijna bij elk blok dezelfde opties, waaronder Kleur. Je kunt zowel de tekst als de achtergrond van het blok voorzien van een kleur. Indien de kleur afwijkt van de voorgestelde kleuren kun je in het kleurenvenster op het grote kleurvlak klikken. Hier verschijnt een colorpicker, inclusief de mogelijkheid om een kleurcode te plaatsen.
6. Onder Typografie kun je lettergrootte aanpassen. Je kunt achter het woord typografie op de stippen klikken om het extra menu te openen. Hier zie je een overzicht van alle wijzigingen die je voor typografie kunt inschakelen. Denk daarbij aan lettertype familie, weergave, regelhoogte, letterafstand en meer. Schakel een gewenste optie in om de mogelijkheden te tonen.
7. Bij Afmetingen kun je in totaal vier verschillende opties aanpassen. Je kunt voor padding en marge het schuifje aanpassen voor horizontale, verticale én losse richtingen. Klik voor die laatste optie op het vierkantje achter marge/padding om extra schuifjes te tonen. Daarnaast kun je Blokafstand instellen. Dit is de afstand die wordt toegevoegd tussen alle elementen die zich binnenin dit specifieke blok bevinden, denk daarbij bijvoorbeeld aan de afstand tussen kolommen. Als laatste is bij sommige blokken mogelijk om een minimum hoogte in te stellen. In het invulveld kun je een getal plaatsen en vervolgens kiezen voor een waarde (px, %, em, rem, vw, vh). Is je inhoud meer dan dat de minimum hoogte toelaat, dan ‘groeit’ je blok mee.

Het is mogelijk dat bij maatwerkblokken een iets andere vorm van instellingen is toegepast. Dat is om heel specifiek je eigen blok naar wens in te kunnen richten.

Concept en publiceren

Tijdens het bouwen van je pagina kun je het beste zo nu en dan ‘echt’ testen hoe het eindresultaat is. Tussendoor is het handig je concept op te slaan om deze vervolgens te bekijken in een nieuw tabblad. Op die manier kun je je pagina pas live zetten als deze helemaal klaar is.

1. Om te zorgen dat je niet per ongeluk al je werk wist is het raadzaam om je pagina soms op te slaan. WordPress zelf zorgt er ook voor dat bij een eventuele crash wel zoveel mogelijk van je werk intact blijft. Dit wordt met een notificatie bovenin je pagina aangegeven.
2. Om je werk te bekijken klik je op het laptop icoon. Vervolgens kies je voor Voorvertoning in nieuwe tab. Dit geeft je het meest realistische beeld van jouw pagina. De opties Tablet en Mobiel kun je beter niet toepassen. Het CMS is er niet 100% op ingericht álle elementen responsive te tonen. Het is handiger en realistischer om je nieuwe tabblad te schalen of via ‘Element inspecteren’ op de mobiele weergave in te stellen.
3. Pagina klaar? Publiceren maar! Je pagina kan nu worden gevonden door gebruikers die de juiste url weten. Het is altijd handig om jouw website menu of inhoud van andere pagina’s naar je nieuwe pagina te laten linken.
4. Toon of verberg de instellingenbalk aan de rechterkant.

Publicatie inplannen?

Wil je dat je pagina automatisch vanaf een bepaald tijdstip/datum online komt? Klik op de blauw Publiceren knop en selecteer onder Publiceren: Onmiddellijk dan de gewenste tijd en gewenste datum.