Welkom bij de Gutenberg editor

Het doel van deze nieuwe editor is het eenvoudig en plezierig maken om rijke inhoud aan WordPress toe te voegen. Dit hele bericht bestaat uit stukjes inhoud – het lijkt wat op LEGO-stenen – die je kunt bewegen en waarmee je kunt werken. Beweeg je cursor rond en je ziet dat de verschillende blokken oplichten met contouren en pijlen. Druk op de pijlen om blokken snel te verplaatsen zonder bang te hoeven zijn dingen te verliezen tijdens kopieer- en plakwerk.

Wat je nu leest is een tekstblok, het eenvoudigste blok van allemaal. Het tekstblok heeft haar eigen besturing zodat je het overal in het bericht kunt zetten…

… zoals deze, die rechts is uitgelijnd.

Koppen zijn ook afzonderlijke blokken, wat helpt bij de opzet en organisatie van je inhoud.

Een foto is duizend woorden waard

Het zorgvuldig omgaan met afbeeldingen en media is een belangrijk punt van de nieuwe editor. Hopelijk vind je aspecten als het toevoegen van bijschriften of het over de volle breedte laten zien van je foto’s veel eenvoudiger en robuuster dan voorheen.

Probeer het citaat te selecteren en te verwijderen of te bewerken, je hoeft niet bang te zijn dat je per ongeluk de afbeelding of andere tekst selecteert en de presentatie ruïneert.

Het Invoeger gereedschap

Stel je voor dat alles wat WordPress kan doen snel en op dezelfde plaats in de interface beschikbaar is. Je hoeft geen HTML-tags of classes uit te zoeken, of ingewikkelde shortcode-regels te onthouden. Dat is het idee achter de invoeger: de knop (+) die rond de editor wordt weergegeven, waarmee je door alle beschikbare inhoudsblokken kunt bladeren en ze aan je bericht kunt toevoegen. Plugins en thema’s kunnen hun eigen blokken registreren, waardoor allerlei mogelijkheden beschikbaar komen voor bewerken en publiceren.

Probeer het eens uit. Je zal erachter komen dat WordPress al dingen in je berichten kan zetten die je niet eens wist. Hierbij een korte lijst van wat je daar op dit moment kunt vinden:

• Tekst & koppen
• Afbeeldingen & videos
• Galerijen
• Insluitingen, zoals YouTube, tweets of andere WordPress berichten.
• Indelingsblokken zoals knoppen, schermbrede afbeeldingen, afscheidingen, enz.
• En lijsten zoals deze, uiteraard 🙂

Visueel bewerken

Een groot voordeel van blokken is, dat je ze op hun plaats kunt bewerken en de inhoud direct kunt manipuleren. In plaats van velden te hebben voor het bewerken van dingen zoals de bron van een citaat of de tekst van een knop, kun je de inhoud direct wijzigen. Probeer het volgende citaat eens te bewerken:

De editor biedt een nieuwe bouwervaring voor pagina’s en berichten, die het maken van berichten met opmaak eenvoudig maakt, en gebruikt “blokken” om zonder problemen te maken waar tot nog toe shortcodes, aangepaste HTML, of “mystery meat” insluitingen voor nodig zijn.

Matt Mullenweg, 2017

De informatie die overeenkomt met de bron van het citaat is een apart tekstveld, zoals bijschriften onder afbeeldingen, zodat de structuur van het citaat is beschermd, zelfs wanneer je de bron selecteert, aanpast of verwijdert. Je kunt het altijd weer eenvoudig terugzetten.

Blokken kunnen alles zijn wat je wilt. Zo kun je bijvoorbeeld een subtiel citaat toevoegen in de opbouw van je tekst, of misschien wil je wel een groot opgemaakt citaat laten zien. Al deze mogelijkheden zijn beschikbaar in de invoeger.

Je kunt het aantal kolommen in je galerijen veranderen door een schuif in de blokinspecteur in de zijbalk te bewegen.

Media-rijk

Door de nieuwe brede en volledige breedte uitlijningen met galerijen te combineren, kun je heel snel een media-rijke indeling maken.

Zeker, de afbeelding over de gehele breedte kan nogal groot worden. Maar soms is de afbeelding het waard.

Hierboven staat een galerij met maar twee afbeeldingen. Het is een eenvoudiger manier om visueel aantrekkelijke indelingen te maken, zonder met floats te hoeven werken. Je kunt de galerij ook eenvoudig omzetten naar de individuele afbeeldingen met de blokomzetter.

Elk blok kan gebruik maken van deze uitlijningen. Het insluitingsblok heeft deze ook en is standaard al responsive:

Je kunt elk blok maken dat je wilt, statisch of dynamisch, decoratief of gewoontjes. Dit is bijvoorbeeld een pull-quote blok:

Wil je meer weten over het bouwen van extra blokken, of ben je geïnteresseerd om te helpen met het project, ga dan naar de GitHub repository.

Bedankt voor het testen van Gutenberg!

👋