De blokeditor

Module 4: Inhoud maken · Leestijd: 8 minuten

Leerdoel: Na deze les kun je een pagina opbouwen met blokken en patronen, en weet je hoe concepten, inplannen en revisies werken.

Kernbegrippen: blok, blokinstellingen, werkbalk, lijstweergave, groep, kolommen, patroon, gesynchroniseerd patroon, concept, privé, inplannen, revisies, voorbeeldweergave

Alles is een blok

Sinds WordPress 5.0 (eind 2018) maak je inhoud in de blokeditor (ook wel Gutenberg genoemd, naar het project). Een pagina bestaat uit losse blokken: een kop, een alinea, een afbeelding, een knop, een lijst, een tabel, een ingesloten video. Elk blok heeft zijn eigen instellingen. Je zet blokken onder elkaar, naast elkaar (in kolommen) of in elkaar (in een groep).

Waarom blokken? In de oude editor was een pagina één groot tekstvak. Wilde je twee kolommen of een knop, dan had je een paginabouwer, shortcodes of HTML nodig. Met blokken kan dat in WordPress zelf, en het resultaat is nette HTML die het thema opmaakt.

Achter de schermen bewaart WordPress de blokken als HTML met commentaartekens ervoor en erna:

<!-- wp:heading -->
<h2 class="wp-block-heading">Openingstijden</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We zijn open van dinsdag tot en met zaterdag.</p>
<!-- /wp:paragraph -->

Dat is handig om te weten: de inhoud blijft leesbare HTML, ook als je later van thema wisselt of een blok niet meer bestaat. Je ziet dit als je bij een blok kiest voor "Bewerken als HTML", of in de codebewerker (Ctrl+Shift+Alt+M).

De editor in drie delen

1. Het canvas in het midden: je pagina zoals hij ongeveer wordt.
2. De werkbalk boven een geselecteerd blok: vet, cursief, link, uitlijning, en het blok omzetten naar een ander type (een alinea wordt een lijst, een afbeelding wordt een galerij).
3. De zijbalk rechts met twee tabbladen: Pagina (of Bericht) met instellingen voor de hele pagina, en Blok met instellingen van het geselecteerde blok, zoals kleur, ruimte en lettergrootte.

Twee hulpmiddelen die je werk veel makkelijker maken:

• Lijstweergave (het pictogram met drie streepjes linksboven): de opbouw van je pagina als boom. Daarmee selecteer je precies het blok dat je wilt, ook als het in een groep in een kolom zit.
• Slash-commando's: typ in een lege regel / en de naam van een blok (/kop, /knop, /afb) en druk op Enter.

Opbouwen met groepen en kolommen

Een goede pagina heeft een duidelijke opbouw. Daarvoor gebruik je drie bouwstenen:

• Groep: een kader om een paar blokken, met een eigen achtergrond of ruimte. Bijvoorbeeld een gekleurd blok met een kop, een zin en een knop.
• Kolommen: blokken naast elkaar. Op een telefoon komen ze onder elkaar.
• Rij en Stapel: varianten van een groep die blokken horizontaal of verticaal ordenen.

Gebruik de koppen op de juiste manier: één H1 (de titel van de pagina, die maakt het thema meestal zelf), daaronder H2 voor de hoofdstukken en H3 voor de onderdelen daarbinnen. Kies een kop niet om de lettergrootte; die pas je aan bij de blokinstellingen. Schermlezers en zoekmachines gebruiken de koppen om de pagina te begrijpen (les 9.2).

Patronen: niet steeds opnieuw beginnen

Een patroon is een kant-en-klare groep blokken: een kop met tekst en afbeelding, een prijstabel, drie kolommen met pictogrammen. Je voegt ze in via de invoegknop (het plusje), tabblad Patronen. Je thema levert er vaak een aantal mee, en in de patronenbibliotheek van wordpress.org staan er honderden.

Je kunt ook zelf patronen maken: selecteer een paar blokken, kies in de werkbalk de drie puntjes en Patroon maken. Daarbij kies je of het patroon gesynchroniseerd is:

• Niet gesynchroniseerd: elke keer dat je het invoegt, krijg je een losse kopie. Pas je die aan, dan verandert alleen die kopie. Handig als sjabloon.
• Gesynchroniseerd: overal waar het staat, is het hetzelfde. Pas je het op één plek aan, dan verandert het overal. Handig voor een blok "Contact en openingstijden" dat op tien pagina's staat. (Vroeger heetten deze "herbruikbare blokken".)

Een valkuil: een gesynchroniseerd patroon dat je op één pagina "even" aanpast, verandert ook op alle andere pagina's. Wil je op één plek iets anders, maak dan van die ene kopie een gewone groep (losmaken).

Opslaan, publiceren en inplannen

Een pagina heeft een status:

Gebruik Voorbeeld om de pagina te bekijken zoals een bezoeker hem ziet, ook op mobiel en tablet, voordat je publiceert.

Revisies: terug in de tijd

Elke keer dat je opslaat, bewaart WordPress een revisie: de versie van dat moment. In de zijbalk zie je bij de pagina hoeveel revisies er zijn. Klik erop, dan zie je met een schuif de verschillen tussen twee versies en kun je een oude versie terugzetten.

Revisies zijn je eerste vangnet bij een vergissing ("ik heb per ongeluk de halve pagina weggehaald"). Wel staan ze allemaal in de database. Een site met duizenden revisies wordt groter en soms trager. Je kunt het aantal beperken in wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Les 6.3 gaat over het opruimen van oude revisies.

Waar de editor ophoudt

De blokeditor maakt de inhoud van een pagina. Wat er om de inhoud heen staat (de kop van de site, het menu, de voettekst) hoort bij het thema. Bij een blokthema bewerk je dat in de Site-editor (Weergave > Editor) met dezelfde blokken; bij een klassiek thema in de Customizer en bij Widgets (les 5.1). Gebruik je een paginabouwer zoals Elementor of Divi, dan werk je in dat programma in plaats van de blokeditor; de nadelen daarvan bespreekt les 5.1.

Samenvatting

• Een pagina bestaat uit blokken die je onder, naast en in elkaar zet; WordPress bewaart ze als HTML met commentaartekens.
• De lijstweergave en slash-commando's maken bouwen snel en precies.
• Gebruik koppen voor de opbouw (H2, H3), niet voor de lettergrootte.
• Patronen besparen werk; een gesynchroniseerd patroon verandert overal tegelijk.
• Concept, gepland, privé en revisies geven je controle over wat wanneer zichtbaar is en een weg terug.

Quiz

Opdracht

Opdracht D4.1: Bouw een pagina met blokken. Maak een conceptpagina "Over ons" met: een H2 en een H3, minstens twee alinea's, een afbeelding met alt-tekst, een kolommenblok met twee kolommen, een knop met een link, en een patroon uit de bibliotheek. Maak van één groep een eigen gesynchroniseerd patroon en voeg dat op een tweede conceptpagina in. Pas het daarna op één plek aan en kijk wat er op de andere pagina gebeurt. Zet tot slot een eerdere revisie terug. Vink elke stap af en beschrijf in twee zinnen wanneer je een gesynchroniseerd patroon wel en niet zou gebruiken.

Verder lezen

Voor het werken in WordPress zelf hebben we nog geen eigen artikelen; de officiële documentatie van WordPress is uitgebreid.

• De blokeditor (wordpress.org, Engels): https://wordpress.org/documentation/article/wordpress-block-editor/
• Patronen (wordpress.org, Engels): https://wordpress.org/documentation/article/block-pattern/
• Revisies (wordpress.org, Engels): https://wordpress.org/documentation/article/revisions/