De Gutenberg-blokken

TEKST

Text Block
Image

Schrijf je je teksten direct in de Gutenberg editor dan worden de tekst elementen tijdens het schrijven omgezet in blokken. Bij iedere return die je geeft voor een nieuwe alinea wordt een nieuw blok toegevoegd.heading, quote of lijst die je toevoegt wordt een nieuw blok toegevoegd.

Boven het block vindt je de Block editor met daarin de opmaak mogelijkheden voor de tekst:
[1] uitlijning, [2] vet, [3] cursief, [4] links toevoegen en [5] strikethrough

In de Block Sidebar vindt je de specifieke layout instellingen voor het geselecteerde block. Fontsize (lettertype grootte) [6] en Dropcap (Initiaal) [7]

Met Color Settings  bepaal je de tekst - en achtergrondkleur, je kunt hier vooraf gedefinieerde kleuren of een eigen keuze invoeren. Hiervoor selecteer je de custom color picker [8] In de popup die verschijnt kun je de gewenste kleurcode regelen.

Blokken vind ik zelf niet heel prettig werken als je schrijft of je teksten wilt aanpassen. Je kunt wel de blokken (alinea's, headers enz.) verplaatsen maar omdat je steeds een onderdeel van de tekst bewerkt heb je minder overzicht. Een eenvoudige optie is het Classic Block (onder Formatting Elements) [9] gebruiken. Dit blok heeft dezelfde menu opzet als de oude TinyMCE-editor en je kunt er opgemaakte  tekst in schrijven. Een stuk overzichtelijker als je aanpassingen wilt maken.

Als je, net als ik, liever in een andere tekst editor, bijvoorbeeld Google Docs, schrijft, kun je je tekst ook kopieren en plakken. Gutenberg converteert je tekst dan naar blokken behalve natuurlijk als je de Classic Block optie gebruikt.

Tip: kopieer je teksten in de HTML edit mode, zo neem je geen ongewenste code mee.

Headings Block
Image

Headings of kopjes en tussenkopjes maken een tekst beter leesbaar. Je kunt kiezen tussen een aantal formaten waarbij H1 de grootste en H6 de kleinste is
In Text Alignment bepaal je de positie van je heading; gecentreerd, links of rechts uitgelijnd.

(Het lettertype, grootte en kleur worden bepaald in de reguliere theme opties).

List Block
Image
Blok voor het toevoegen van geordende (nummers) of ongeordende (bulletpoints) lijsten. Voor subitems binnen een lijst kun je indent gebruiken. Met outdent maak je er weer een reguliere lijst van.

Table Block
Image

Nieuw is het tabel blok. Dit kan worden gebruikt voor het weergeven van getallen, vergelijkingen of andere gegevens die je op een overzichtelijke manier wilt presenteren.

Er zijn (nog) weinig styling opties. In de Block Editor kun je kiezen tussen regular of stripes [1], de reguliere uitlijning mogelijkheden [2] Je kunt rijen of kolommen toevoegen of verwijderen [3] en er zijn een beperkt aantal text edit mogelijkheden [4]. In de Table Settings [5] kun je voor een vaste of een variabele breedte kiezen.

Maar als je gewoon een simpele tabel nodig hebt met een paar rijen en kolommen dan doet het tabel block precies wat het moet doen.

Button Block
Image

Met het Button Block maak je een knop waarmee je link genereert naar een andere pagina. De tekst [1] en URL [2] van de knop kunnen direct in de editor worden aangepast. Typ je tekst direct in de knop en voeg de URL toe naast de link pictogram.

Je kunt ook vetgedrukt, cursief & doorgestreept [3] gebruiken voor de tekst van de button.

In de Color Settings kun je de kleur van zowel de button [4] als de tekst [5] bepalen. Kies je een kleurcombinatie die in voor Gutenberg als moeilijk leesbaar  wordt gedefinieerd dan krijg je een waarschuwing [6]

* Kijk voor de uitleg over Color settings bij Text Block

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