INHOUDSOPGAVE

Inleiding
Wat is Gutenberg?
Waarom moet er een nieuwe editor komen?
Hoe werkt Gutenberg?
Blokken bouwen in Gutenberg
Instellingen van Gutenberg gebruiken
Document instellingen
Blok instellingen
Meer instellingen
Standaard Toolbar


Gutenberg voor WordPress video

Update 26 oktober 2018
Ik heb een video van ruim 13 minuten voor jullie opgenomen om op die manier beter te kunnen laten zien hoe Gutenberg eruit ziet en hoe het werkt. 

Inleiding

Gutenberg is de naam van de nieuwe editor voor WordPress. Op het moment maakt WordPress gebruik van de zogenaamde What You See Is What You Get editor, we gebruiken vaker de afkorting WYSIWYG editor.

Zo’n editor kun je zien als een tekstverwerker. Het geeft WordPress gebruikers de mogelijkheid om teksten te schrijven, wijzigen en verwijderen maar bijvoorbeeld ook om deze teksten op te maken, hyperlinks, afbeeldingen en video’s toe te voegen.

Al jaren maakt WordPress gebruik van de onderstaande WYSIWYG editor. Mocht je ooit eerder in WordPress een bericht of pagina hebben gemaakt dan komt hij je vast bekend voor.

De What You See Is What You Get editor die voor veel WordPress gebruikers vertrouwd is

Ergens in 2018 zal WordPress 5.0 beschikbaar komen als update. Deze update zal onder andere de nieuwe editor Gutenberg met zich mee brengen.

De manier waarop berichten en pagina’s opgebouwd kunnen worden zullen dan volledig veranderen.

Wat is Gutenberg?

De nieuwe editor van WordPress is vernoemd naar Johannes Gutenberg. Deze Duitse uitvinder heeft een enorme impact gehad op de manier waarop boeken – en ander drukwerk – rond 1400 sneller en goedkoper gemaakt konden worden.

Voor de uitvinding van Gutenberg was het namelijk zo dat pagina’s als complete stempel werden gedrukt. Wanneer er een spelfout in een bladzijde bleek te zitten moest er dus een compleet nieuwe stempel gemaakt worden om vervolgens complete pagina’s opnieuw te drukken.

De uitvinding van Johannes Gutenberg maakte het mogelijk om stempels te maken van enkele karakters. Op die manier hoefde je van elk karakter maar één keer een stempel te maken en was het veel gemakkelijker om eventuele fouten te corrigeren.

Waarom moet er een nieuwe editor voor WordPress komen?

In principe is er, naar mijn mening, ook niets mis met de huidige WYSIWY-editor.

In de harde kern van de gebruikers van WordPress zie ik allerlei verschillende meningen voorbij komen.

Sommige zijn laaiend enthousiast en kunnen niet wachten om alle nieuwe functies uit te proberen, andere daarentegen vragen zich af waarom het überhaupt nodig is dat er een nieuwe editor komt.

Edwin Toonen schrijft in het artikel What is Gutenberg? iets dat naar mijn mening heel goed uitlegt waarom Gutenberg een goede en logische stap is voor WordPress:

“People find it hard to accept change when they don’t see why it’s necessary to change something that was working ok. Well, in this case, it’s relatively easy to understand: to get ready for the future, WordPress needs to adapt. Gutenberg introduces concepts and technologies that help make WordPress future proof.”

Edwin Toonen

WordPress wil hun positie, als absolute marktleider op het gebied van CMS, behouden en versterken en blijft daarom verbeteringen doorvoeren. Een van deze verbeteringen is het nog gebruiksvriendelijker maken van het systeem.

Door vanaf WordPress 5.0 met Gutenberg te gaan werken kunnen nog meer gebruikers, ook zonder technische kennis, gemakkelijk en snel pagina’s en berichten opmaken.

Hoe werkt Gutenberg?

Het grote voordeel van Gutenberg is de gebruiksvriendelijkheid.
Gebruikers van WordPress die jaren ervaring hebben met de WYSIWYG zullen vast wel even moeten wennen aan de totaal nieuwe manier van teksten schrijven, opmaken, en afbeeldingen toevoegen.

Met Gutenberg gaat zelfs het gebruik van eventuele extra functionaliteiten als shortcodes en snippets via de editor en hier hoef je dus niet meer voor in de code te duiken.

Blokken bouwen in WordPress met Gutenberg

Overal waar er over Gutenberg gesproken word, wordt er gesproken over blokken.

De editor is namelijk geheel ontwikkeld om met behulp van blokken gemakkelijk een layout te maken.

Door op een + icoon te klikken komt er een menu tevoorschijn. Dit menu heeft als het ware vier tabbladen:

  1. Voorgesteld
  2. Blokken
  3. Insluitingen
  4. Gedeeld
Klik op het + icoon en kies vervolgens een element

De categorie voorgesteld bevat standaard de volgende elementen:

  • Paragraaf
  • Kop
  • Afbeelding
  • Lijst
  • Galerij
  • Citaat
  • Audio
  • Omslagafbeelding
  • Subtitel

De categorie Blokken bevat standaard meerdere categorieën:

  1. Algemene blokken (hier staan alle elementen in die ook standaard bij voorgesteld staan)
  2. Opmaak
  3. Layout elementen
  4. Widgets

De categorie Insluitingen heeft standaard de volgende elementen:

  • Insluiten
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • WordPress
  • Soundcloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • CollegeHumor
  • DailyMotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv

De elementen van de categorie Insluitingen maken het bijvoorbeeld mogelijk om de URL van een tweet te kopiëren in het element Twitter.

In dit voorbeeld heb ik een tweet van @culturedcode ingesloten

De categorie Gedeeld is standaard leeg. Het is binnen Gutenberg namelijk mogelijk om een blok om te zetten naar een zogenaamd gedeeld blok.

Zodra je een blok hebt omgezet naar een gedeeld blok komt dit blok beschikbaar onder de categorie Gedeeld.

Op deze manier maakt Gutenberg het makkelijk om gemakkelijk en snel gebruik te maken van een vaste layout, opmaak of standaard tekst.

Instellingen van Gutenberg gebruiken

Nieuw is het tandwiel-icoon rechts bovenaan het scherm. Wanneer je hierop klikt verschijnt er een balk aan de rechterzijde van je scherm.

Deze balk heeft twee tabbladen, Document en Blok. Logischerwijs kun je op het tabblad Document instellingen met betrekking tot het gehele document wijzigen en op het tabblad Blok enkel met betrekking tot het geselecteerde blok.

Gutenberg Instellingen Document

Op het tabblad Document heb je de volgende 7 mogelijkheden:

Status en zichtbaarheid


Zichtbaarheid
Hier kun je aangeven of het artikel of de pagina openbaar zichtbaar moet worden, privé (enkel voor administrators en editors) of dat het artikel of de pagina beschermd moet worden met een wachtwoord.

Publiceer
Hier kun je, indien gewenst, een datum in de toekomst kiezen om het artikel of de pagina in te plannen.

Stel het is vandaag 3 november 2018 en je kiest voor de datum 10 november 2018, dan zal het artikel of de pagina op 10 november 2018 gepubliceerd worden. Je kunt hierbij zelfs de gewenste tijd invoeren.

Berichtformaat
Afhankelijk van het thema dat je gebruikt is het mogelijk dat elk soort artikel een eigen sjabloon heeft.

Bij berichtformaat kun je bijvoorbeeld kiezen uit standaard, video, audio en galerij. Zo kan het dus zijn dat wanneer je standaard kiest, de pagina er anders uit zal komen te zien dan wanneer je voor video, audio of galerij kiest.

Maak vast aan de voorpagina
Voor het gebruik van Gutenberg werd deze functie Sticky genoemd. Door de schakelaar bij Maak vast aan de voorpagina aan te zetten zorg je ervoor dat dit specifieke artikel bovenaan blijft staan.

Stel dus dat je na dit artikel nog andere, nieuwere, artikelen publiceert dan nog zal dit artikel bovenaan blijven staan.

Auteur
Wanneer je meerdere gebruikersprofielen op je WordPress website hebt staan en je momenteel bent ingelogd als beheerder, heb je de mogelijkheid om een andere auteur te kiezen voor de betreffende pagina of het artikel.

Je klikt simpelweg op de huidige naam en kiest de gewenste gebruiker. Het artikel zal nu als het ware geschreven zijn door deze auteur.

Verplaats naar prullenbak
Deze ‘functie’ die expres in het rood is aangegeven is natuurlijk heel erg vanzelfsprekend. Met een klik op deze zin verplaats je de betreffende pagina of het betreffende artikel naar de prullenbak.

Categorieën
In het onderdeel categorieën heb je de mogelijkheid om een bestaande categorie aan te vinken, zodat het artikel in deze categorie geplaatst zal worden.

Eventueel kun je ook op Nieuwe categorie toevoegen klikken om in het scherm direct een nieuwe categorie aan te maken en het artikel daar aan toe te voegen.

Tags
In dit veld kun je tags kwijt die betrekking hebben op het artikel dat je zojuist hebt geschreven.

Uitgelichte afbeelding
Net als voor het gebruik van Gutenberg kun je jouw pagina’s en artikelen voorzien van uitgelichte afbeeldingen.

Hiervoor klik je simpelweg op Uitgelichte afbeelding kiezen waarna je met behulp van een pop-up venster een afbeelding uit je mediabibliotheek kunt kiezen of eventueel een nieuwe afbeelding kunt uploaden.

Samenvatting
In het vak bij Samenvatting kun je een samenvatting van de betreffende pagina of het betreffende artikel kwijt.

Afhankelijk van het thema dat je gebruikt zal deze samenvatting te zien zijn op bijvoorbeeld de archiefpagina van je blog.

Discussie
Wanneer je geen reacties, ping- of trackbacks wilt toestaan kun je onder Discussie de schakelaars uitzetten. Standaard staan deze schakelaars wel aan.

Uitgebreide instellingen
Op het moment van schrijven gebruik ik de plugin van Gutenberg versie 2.7.0. In deze versie van de plugin staan er geen verdere instellingen onder Uitgebreide instellingen.

Zelf denk ik dat hier eventuele instellingen van add-ons voor Gutenberg terecht zullen komen.

Gutenberg Instellingen Blok

De instellingen voor het tabblad Blok zijn afhankelijk van het blok dat je op dat moment geselecteerd hebt.

Heb je geen blok geselecteerd en klik je op Blok dan krijg je de melding ‘Geen blok geselecteerd’.

Wanneer je het eerste blok Paragraaf selecteert krijg je in eerste instantie de bevestiging van het blok dat je hebt geselecteerd en daaronder heb je meerdere opmaak mogelijkheden voor de tekst in het Paragraaf blok.

Zo kun je onder Tekstinstellingen de grootte van de tekst wijzigen. Onder Achtergrondkleur kun je, logischerwijs, de achtergrondkleur wijzigen.

Tekstkleur geeft je de mogelijkheid om de kleur van de tekst te veranderen en uitlijning blok geeft je de mogelijkheid om de tekst van het Paragraaf blok links of rechts uit te lijnen of te centreren.

Onder Geavanceerd heb je de mogelijkheid om een blok een CSS klasse mee te geven zodat je het blok eventueel nog kunt bewerken met CSS.

De mogelijkheid om een CSS klasse mee te geven heb je overigens bij elk blok.

Meer

Naast het tandwiel icoon, dat naar de Instellingen leidt, vind je drie bolletjes boven elkaar, dit leidt naar het menu Meer.

Hier zie je onder Editor de keuze tussen een Visuele editor en een Code editor. Standaard staat de Visuele Editor ingeschakeld.

Je kunt dit vergelijken met de tabbladen in de WYSIWYG editor, Visueel en Tekst.

De Visuele Editor laat direct zien hoe je tekst er straks op de voorkant van je website uitziet terwijl je met de Code Editor makkelijker met code als HTML kunt werken.

Onder Instellingen kun je ervoor kiezen de toolbar aan de bovenkant vast te maken. De toolbar die ze hier bedoelen heeft de volgende mogelijkheden:

  • Teksten omzetten
  • Links uitlijnen
  • Centreren
  • Rechts uitlijnen
  • Tekst vet drukken
  • Tekst cursiveren
  • Tekst doorhalen
  • Link toevoegen
De toolbar om sneller en gemakkelijker de opmaak van blokken en teksten te wijzigen

Onder Gereedschappen kun je kiezen voor Kopieer alle inhoud. Op die manier kun je bijvoorbeeld alle content, die je tot nu toe op deze pagina of in dit bericht hebt gemaakt, gemakkelijk kopiëren naar een andere pagina of een ander bericht.

Standaard toolbar

Onder Meer en vervolgens Instellingen kun je dus een extra toolbar vastzetten. Standaard heb je de volgende mogelijkheden op de toolbar:

  • Blok toevoegen
  • Ongedaan maken
  • Opnieuw
  • Woorden, koppen, paragrafen en blokken tellen
  • Bewaar concept
  • Voorbeeld
  • Publiceer

Gutenberg proberen

Gutenberg is al een tijdje beschikbaar als gratis WordPress plugin. Je kunt de plugin vinden in de WordPress Plugin Directory in de backend van je website.

Je gaat naar Plugins kiest voor Nieuwe plugin en zoekt vervolgens naar Gutenberg.

Je kunt de plugin nu installeren en activeren zoals je ook met andere WordPress plugins zou doen. Vervolgens kun je de plugin direct gebruiken voor je pagina’s en berichten.

Voor je dit gaat doen wil ik je adviseren om een volledige backup te maken van je WordPress website.

De Gutenberg plugin is namelijk nog steeds in Beta. Dat wil zeggen dat de plugin nog niet 100% naar behoren functioneert. 

Mocht je het niet aandurven om Gutenberg op je website te installeren en te gebruiken dan kun je ook naar https://testgutenberg.com om daar wat te experimenteren met de nieuwe editor.

Groeien als ondernemer?

Ontvang wekelijks een e-mail voor een betere business

Je gegevens zijn veilig en zullen nooit met derde partijen worden gedeeld.