Wat is een blok in Wordpress? | Cow on Roof Studio

Wordpress blokken zijn de bouwstenen waarmee je je pagina, (nieuws)bericht of blogpost samenstelt in de Wordpress blok editor. Ieder element op je pagina is een blok.

Media of tekst elementen zoals een paragraaf, een video, een foto of een kop zijn blokken. Maar ook voor widgets, zoals een 'zoeken' functionaliteit en embeds, embedded TikTok bijvoorbeeld, heeft de Wordpress blok editor blokken. Verder maken ontwerp blokken, zoals het kolommen blok en het knoppen blok, het makkelijk om de pagina indeling te maken die je voor ogen hebt.

Met deze blokken is het eenvoudig om de multimediale website pagina's te maken die je bezoeker tegenwoordig verwacht.

Alle blokken hebben verschillende opmaak mogelijkheden en blok instellingen. Zo kan je makkelijk de blokken aan jouw voorkeuren aanpassen.

Verder kan je eenvoudig een blok naar een andere plek op je pagina verplaatsen. Blokken die je vaker op verschillende pagina's of berichten gebruikt, kan je opslaan als herbruikbaar blok.

Wat is de Wordpress blok editor?

De Gutenberg editor, of blok editor, is een compleet andere manier van werken in de Wordpress editor. De ontwikkelaars hadden als doel om Wordpress voor de (nieuwe) gebruikers eenvoudiger te maken. Waar je in de oude editor (nu de klassieke editor) in een online text editor je (tussen)koppen, teksten, afbeeldingen en links toevoegde, bouw je in de blok editor je bericht of pagina op in tekst blokken, media blokken, opmaak blokken enzovoort. Deze blokken mix-n-match je, schuif je heen en weer, tot je tevreden bent over de indeling en het ontwerp van je pagina. Het voordeel van de blokken is dat je in de editor zélf al een een behoorlijk goed idee hebt, hoe je pagina of bericht er op je site uit zal zien.

In 2017 zijn de betrokken Wordpress ontwikkelaars begonnen met de nieuwe blok editor. De eerste release van de Gutenberg editor kwam met de introductie van Wordpress 5.0 in december 2018. Sindsdien heeft de blok editor er steeds meer blokken bij gekregen.
Ook hebben de blokken zelf steeds meer mogelijkheden gekregen. Naast blokken voor berichten en pagina's is er een beta versie voor site brede blokken. Hiermee heb je controle over elementen op je website die op iedere pagina terugkomen, zoals je site navigatie, logo, en footer. Met de blok editor kan je zonder ook maar een letter code te schrijven, je hele website zo maken zoals je voor ogen hebt.

De klassieke editor (classic editor) vs de blok editor (Gutenberg editor)

De klassieke editor van Wordpress maakte gebruik van TinyMCE, een open-source online rich-text editor. Met deze WYSIWYG (What You See Is What You Get) HTML editor kon je teksten opmaken zoals je gewend bent in desktop programma's zoals Microsoft Word . Je kon afbeeldingen toevoegen, tekst van kleur veranderen, dik of cursief drukken, links toevoegen, enzovoort.

Met de klassieke editor was het moeilijk om aan een pagina multimediale elementen als social media embeds, contactformulieren, foto collages, video's etc toe te voegen. Om de pagina er vervolgens goed uit te laten zien, was een nog grotere uitdaging. Hier was wel vraag naar, kijk maar naar de enorme populariteit van pagebuilders zoals Elementor.

De blok editor (Gutenberg editor) kan je zien als het antwoord op die wens van veel gebruikers. Waar de klassieke editor op de achtergrond eenvoudige HTML tags als <p>, <h1>, <img>, <i> aan je inhoud toevoegde, voegt de Gutenberg editor specifieke blok code en extra HTML tags aan je inhoud toe waardoor de layout mogelijkheden veel, en ik bedoel heel veel groter zijn. De lijst van blokken wordt steeds langer en de dingen die je met ieder blok kan, wordt steeds groter.

Mis je de klassieke editor?

Mocht je toch moeite met de nieuwe Wordpress blok editor hebben, niet getreurd. Een van de blokken is het classic blok.

Dit blok geeft je je oude en vertrouwde klassieke editor als blok én de mogelijkheid om de inhoud van het classic blok met 1 druk op de knop om te zetten naar de juiste blok elementen van de blok editor.

De titels in je klassieke blok worden koptekst blokken, je paragrafen, paragraaf blokken en je afbeeldingen worden afbeelding blokken. Wil je de hele klassieke editor terug? Dan kan je de Classic Editor plugin installeren.

Hoe maak je blokken in WordPress?

login je wordpress dashboard
ga naar pagina's (pages) of berichten (posts)
kies nieuwe pagina of nieuw bericht of klik de titel van de pagina of het bericht waar je blokken aan toe wil voegen
Je hebt 3 manieren om een blok toe te voegen:
1. klik het blauwe vierkant met witte plus links boven naast het Wordpress logo
2. klik het zwarte vierkant met witte plus rechts in je editor
3. klik in je editor en begin met typen of selecteer een blok van de popup lijst, bijvoorbeeld Koptekst.
Voeg je tekst, lijst, afbeelding etc toe. Pas eventueel de instellingen aan

Hieronder vind je een overzicht met alle blokken in de Gutenberg Editor en links naar pagina's met een korte uitleg en stappen om het blok toe te voegen.

Wat zijn de verschillende soorten blokken in de blok editor?

De Wordpress blok editor heeft een enorme lijst aan blokken. Deze blokken zijn ingedeeld in 6 categorieën: tekst, media, ontwerp, thema, widgets en insluitingen (embeds).