De onderdelen van Gutenberg

Instellingen

In Gutenberg heb je verschillende instellingsmogelijkheden. Met het tandwiel en het ‘kebab’menu rechtsboven in de editor stel je een aantal basiszaken in. Zoals:

  • Weergeven/verbergen van de zijbalk
  • Hoe je de website wilt bekijken:
    • bovenste toolbar, spotlightmodus of afleidingsvrije modus
  • visuele of code editor gebruiken
  • kopiĆ«ren van inhoud
  • beheren van herbruikbare blokken
  • blokken activeren/deactiveren
  • handige toetscombinaties

Blokken

Standaard opent Gutenberg met een paragraafblok. Je kunt het bloktype veranderen in een lijst of een kop.

Vanuit een leeg blok kun je zoeken naar andere blokken door ‘forward slash’ (/) te typen. Via het plusteken linksboven in de editor of boven een bestaand blok kun je een blok zoeken en toevoegen.

In tegenstelling tot in de klassieke editor, maak je in Gutenberg per onderdeel een nieuw blok aan. Een foto, een lijst, een kop, een video: allemaal losse blokken.

Navigatie

Met de pijltjes links van een blok kun je het blok naar boven en naar beneden verplaatsen. Door de muis ingedrukt te houden kun je links van het blok met het handje het blok verplaatsen middels ‘drag & drop’

De zijbalk

De zijbalk rechts heeft twee menu’s:

Document

Het documentmenu bevat alle oude functies van de ‘oude’ zijbalk. Je vindt hier de volgende elementen terug:

  • publiceren en inplannen
  • revisies
  • permalink
  • uitgelichte afbeelding
  • pagina-attributen
  • categorieĆ«n en tags

Blok

De inhoud van het blokmenu is afhankelijk van het type blok dat je hebt gekozen.

Oefening
Maak een aantal verschillende blokken aan en onderzoek en gebruik hierbij de functies die verschijnen in het blokmenu in de zijbalk.

Bewaren en hergebruiken van blokken en groepen blokken

Met Gutenberg kun je blokken of groepen van blokken opslaan en hergebruiken in andere berichten of pagina’s. Dit kan handig zijn voor inhoud die op meerdere plekken terugkomt. Denk bijvoorbeeld aan een auteursblok of testimonialsblok.

Indien je de inhoud van een herbruikbaar blok op de ene plek wijzigt, verandert de inhoud op de plekken waar je het blok hebt hergebruikt automatisch mee.

Toegankelijkheid

Gutenberg heeft een paar functionaliteiten ingebouwd waarmee je kunt controleren of de structuur en het kleurcontrast van je website aan de eisen voldoen.

Bekijk de richtlijnen voor de toegankelijkheid van webcontent (WCAG) 2.0

Vormgeving en custom css

Binnen Gutenberg kun je in een blok een aantal zaken inline aanpassen, zoals:

  • de lettergrootte;
  • de tekstkleur
  • de achtergrondkleur

Daarnaast kun je via het blokmenu in de zijbalk via het onderdeel ‘Geavanceerd’ een extra CSS klasse toevoegen. Deze kun je vervolgens via de ‘Customizer’ of een aparate stylesheet vormgeven met behulp van CSS.

Oefening
Maak een herbruikbaar blok aan en gebruik dit opnieuw in een ander bericht. Wijzig vervolgens de inhoud van het herbruikbare blok en controleer of de inhoud op alle plekken is veranderd.
Kun je ook een herbruikbaar blok wijzigen zonder dat de blokken op andere plaatsen wijzigen?