De Gutenberg-blokken

MEDIA

Image Block
Image

Gebruik het plus [1] icoontje en selecteer het image block om deze in te voegen. In de pop-up selecteer je vervolgens waar je de afbeelding vandaan haalt.

Je kunt de afbeelding groter of kleiner maken m.b.v de blauwe bolletjes of door de afmetingen, percentage of het formaat aan te passen in de block settings [2]. Hier kun je ook een korte beschrijving (alt text) [3] toevoegen of een link invoeren [4].

In de Block Editor [5] heb je de volgende opties, centreren, links of rechts uitlijnen, full-width en wide.

Met de optie "Change Block Type" [6] kun je je image omzetten naar een cover, gallery of file. Scroll naar beneden voor de mogelijkheden binnen deze blokken.

De laatste optie , Media & Text [7] geeft je de mogelijkheid om je afbeelding op diverse manieren met tekst te combineren.

Image

 Je kunt hier een achtergrondkleur onder je tekst zetten. Daarnaast heb je ook de mogelijkheid om te bepalen hoe deze opzet er op je mobiele telefoon door de knop "Stack on Mobile te gebruiken worden de blokken op gelijke grootte onder elkaar uitgelijnd.

* Voor de werking van de color settings zie Tekst Block
** Let op! de opties in Change Block werken alleen met blokken! Het is niet mogelijk om hier een classic blok te gebruiken.

Cover Block
Image

Met het cover block kun je een korte tekst (meestal een kop) in een achtergrondafbeelding weergeven. De achtergrondafbeelding op verschillende manieren bewerkt worden.

Je kunt, net als bij het image block, in de Block Toolbar [1] de afbeelding centreren, links of rechts uitlijnen of een full of wide width gebruiken. Je lettertype, grootte en kleur worden bepaald in de reguliere theme opties maar je kunt hier wel een aantal kleine aanpassingen maken [2] zoals vet, cursief link en doorstrepen. Cover Settings [3] geeft je de mogelijkheid om de afbeelding als vast in te stellen. Dit betekent dat de afbeelding op de achtergrond is vergrendeld en niet wordt verplaatst wanneer de gebruiker de pagina omlaag scrolt. Maar alle andere elementen op de pagina scrollen normaal. Overlay [4] geeft je de mogelijkheid om een kleur over de afbeelding te leggen om bijvoorbeeld tekst beter leesbaar te maken. Hoewel de tekst  De Background Opacity Slider [5] gebruik je om het transparantie percentage in te stellen.

* Voor de werking van de color settings zie tekst block

GALLERY BLOCK
Image

Het Gallery Block is echt een enorme verbetering t.o.v de TinyMCE-editor. Het werkt heel simpel:
Zoek op Gallery of selecteer deze onder Common Blocks. Je kunt nu direct vanaf je computer een of meerdere foto’s in de editor slepen, uploaden of selecteren in de media library [1] en een onderschrift toevoegen. In de sidebar kun je het aantal kolommen aanpassen [2] , de grootte van je foto’s aanpassen aan het formaat van je gallery [3] en linken naar een mediafile of attachment pagina [4]. Wil je later een onderschrift aanpassen of toevoegen klik dan in de foto [5] en gebruik [+] om een extra afbeelding in te voegen.

* De optie "convert to single image" linksboven in de Block Editor splitst de gallery op in image blocks, je kan dit niet meer terugdraaien als je al hebt gesaved.

Audio Block
Image

Het audioblok is voor het uploaden van eigen audiobestanden (meestal .mp3-bestanden) naar je site. Nadat je het audioblok hebt toegevoegd, gebruik je de mediabibliotheek om een (klein, denk aan je laadtijd!) audiobestand te selecteren of te uploaden. Je audio wordt daarna weergeven met een simpele HTML 5 audio speler.

Standaard heb je de volgende mogelijkheden:

  • Spelen
  • Pauze
  • Volume
  • Download

* Wil je audio van bronnen van derden toe tvoegen, gebruik dan het Embed Block.
** Het ontwerp van de audiospeler is afhankelijk van de browser van de gebruiker ..

FILE Block
https://www.brigitvarenkamp.nl/wp-content/uploads/File-Block.jpg

Met het File Block kun je een downloadbaar bestand toevoegen. Het bestand kan dan gedownload worden  m.b.v een button of een link-tekst.

* De kleur en tekst instellingen van de button zijn afhankelijk van de instellingen in je theme.

VIDEO BLOCK
Image

Heb je een server hebt met onbeperkte bandbreedte, of een video-hosting service dan heb je waarschijnlijk wel iets aan het video block. Maar in alle andere gevallen raad ik het je niet echt aan. Video bestanden zijn over het algemeen te groot en te zwaar. Beter is in plaats daarvan een video hosting service van derden te gebruiken, zoals YouTube of Vimeo.

Dus alleen voor degene met onbeperkte bandbreedte ;-). Nadat je het videoblock hebt toegevoegd selecteer of upload je een (klein!) video bestand. [1]
Er zijn een aantal settings die je in kunt stellen [2] zoals autoplay, looping en geluid aan of uit zetten.
De Preload [3] geeft aan wat de browser van je bezoeker moet doen als de pagina met de video erop wordt geladen: auto - inladen, none - niet inladen of metadata - beperkte gegevens over de video laden (metadata).
De Poster Image [4] is het beeld wat gebruikt wordt wanneer de video niet auto start en je eerste beeld niet heel representatief is.
De Video Controls [5] geven de reguliere optiesals Play, Pause, Volume enz. Picture in picture [6] is een pop up waar de video in wordt afgepeeld.

* Als je video's van bronnen van derden wilt insluiten, gebruik je het Embed Block.

Embed Block
Image

Met Embed Blocks kunt je inhoud van derden (video, audio, afbeeldingen, tweets, enz.) invoegen op je WordPress-site. Je kunt dat met een standaard Embed Block maar er zijn ook Embed Blocks voor de meeste populaire services zoals YouTube, Ted Talks, Spotify enz.

Kies het block met de dienst die je wilt laten zien, bijvoorbeeld een wordpress post wat je graag wilt delen. Kopieer de URL van deze post en plak deze in het venster en click Embed.

Verder zijn er nog een aantal standaard mogelijkheden zoals uitlijnen en een onderschrift toevoegen.

Embeds maken het mogelijk om zware bestanden die je site vertragen toch op je website te kunnen laten zien.

Disclaimer

De aanleiding voor deze handleiding is de introductie van de Gutenberg editor in Wordpress. Voor het schrijven van de handleiding is gebruik gemaakt van de engelstalige versie 5.2. Hoewel ik heb geprobeerd een actuele en zo volledig mogelijke handleiding te schrijven kan het zijn dat informatie achterhaald is door de regelmatige updates van het Wordpress Team. Ik kan dan ook niet garanderen dat deze handleiding altijd up-to-date is en kan daar ook niet aansprakelijk voor gesteld worden.

* Het is niet toegestaan de inhoud en/of opmaak te kopiëren, wijzigen of onder je eigen naam aan te bieden.
* Wil je snel een woord opzoeken gebruik dan het Wordpress ABC

Updated 05/01/2019