Deze nieuwe versie van WordPress 5.8 bevat enkele grote vernieuwingen.

Met de belangrijkste vernieuwingen in deze update zet WordPress stappen richting “full site editing”.
Met full site editing wordt bedoeld dat je alle vormgevings-elementen van de website als blokken kan aanpassen. Dus ook de header, het menu, de sidebars en footer. Maar zover is het nog niet. In kleine stapjes gaan we daar wel naar toe.

Laten we in de nieuwe WordPress 5.8 duiken!

1. De template editor – eerste stap naar Full Site Editing

Met de template editor kan je nieuwe templates (=nieuwe layouts) maken met de kracht van de blokkeneditor. Dit moet je wel bewust en handmatig aanzetten!

De nieuwe template editor is de eerste stap naar Full Site Editing (FSE). Met full site editing wordt bedoeld dat je alle vormgevings-elementen van de website als blokken kan aanpassen. Dus ook de header, het menu, de sidebars en footer. WordPress doet dat via de Gutenberg blokken editor. De bedoeling is dat het aanpassen van de header, sidebar of footer een zelfde ervaring is als werken met de blokken op een pagina.

Werken met blokken in widgetgebieden geeft je meer opmaak mogelijkheden, meer controle over het design van je website. Natuurlijk kan je nog steeds met de (bestande) thema’s werken. Nieuwe thema’s kunnen van de nieuwe mogelijkheden gebruik gaan maken.

De template editor is dus de eerste stap waarmee je de template met blokken kan aanpassen en opslaan om daarna op pagina’s of blogs te gebruiken. Dit vergroot de flexibiliteit van het thema enorm, maar vraagt wel meer kennis van de designer of website eigenaar.

WordPress 5.8 Page template

Als je en nieuwe template wil toevoegen opent de template editor, daarmee kan je de blokken plaatsen met behulp van de Gutenberg editor. Er zijn daarvoor enkele nieuwe blokken toegevoegd:

  • Site Logo blok
  • Site Tagline blok
  • Site Titel blok
  • Query Loop (meer uitleg hieronder)
  • Bericht titel
  • Bericht inhoud
  • Bericht datum
  • Bericht samenvatting
  • Bericht uitgelichte afbeelding
  • Bericht categorieen
  • Bericht Tags
  • Login/out
  • Pagina lijst

Let op.
De nieuwe template editor is standaard uitgeschakeld, maar je kunt he al aanzetten door deze code aan het bestand functions.php toe te voegen.

add_theme_support( 'block-templates' );

Eenmaal aangezet kan je de editor gebruiken om via Bericht of Pagina een nieuwe template op te slaan.

2. Gutenberg blokken in plaats van widgets

Een volgende stap op weg naar Full Site Editing is het gebruik van de Gutenberg blokken als widgets. Vanaf deze versie 5.8 geen widgets meer, maar blokken om de sidebars mee te vullen.

Hierdoor heb je nog meer ontwerp mogelijkheden in header, sidebar en footer. Bovendien is de ervaring het zelfde als het werken met blokken op pagina’s en berichten.

Je kunt voortaan elk mogelijk blok toevoegen aan een widgetgebied via Weergave >> Customizer.
Pas elk blok naar jouw wensen aan met de beschikbare instellingen.

Bekijk een voorbeeld in deze video

Je kunt ook de blokken toevoegen via Weergave >> Widgets. Dit scherm is nieuw vormgegeven om aan te sluiten bij de beleving van het werken met blokken op pagina’s en berichten.

WordPress 5.8 Widgets screen

Wil je nog geen afscheid nemen van de oude manier van werken?
Dat kan! Hier zijn twee oplossingen voor bedacht.

1. De plugin Classic Widgets zet het Widget scherm weer terug naar hoe het vroeger was.
2. Je kunt ook gebruik maken van het blok “Legacy Widget block” waarmee je de oude widgets in de nieuwe blokken structuur kunt zetten.

3. WordPress kan vanaf nu ook met WebP afbeeldingen werken

WebP afbeeldingen worden sterken gecomprimeerd en zijn daardoor 25% tot 34% kleiner dan vergelijkbare PNG of JPEG afbeeldingen. Vanaf deze versie kan je dus ook met WebP afbeeldingen in WordPress werken op een manier die je gewend bent met andere afbeeldingsformaten te werken. Deze video laat je dat zien.

4. Nieuwe mogelijkheden in de Gutenberg editor

Naast een aantall technische verbeteringen zijn dit de meest belangrijke en zichtbare veranderingen in de Gutenberg Editor.

Selecteer het “moederblok” bij geneste blokken

Een tekst en afbeelding in een kolommen-blok is een voorbeeld van geneste blokken. Het gaat dus om blokken in andere blokken. Gutenberg laat je nu door middel van een duidelijke knop het moederblok slecteren.
Een klik op deze knop en je krijgt de instelligen van het moederblok te zien.

Gutenberg nested block selector

Nieuw block: Query Loop

Met het blok Query Loop kan je een dynamische lijst van berichten laten zien. Welke berichten dat zijn en hoe die getoond worden kan je dan via de instellingen bepalen. Bijvoorbeeld een lijst van berichten gebaseerd op categorieën,, auteur, trefwoord of ander criterium. Voorbeeld in onderstaande video.

Nieuwe weergave blokken zoeken via “Lijst weergave”

WordPress 5.8 komt met een nieuwe manier om door de lijst met blokken te zoeken. De lijstweergave toont blokken in hiërarchie met elkaar.

WordPress 5.8 Gutenberg list view

Suggesties voor blockpatronen

Als je bezig bent een pagina te ontwerpen wil je snel resultaat. Blokpatronen zijn kant enn klare samenhangende blokken die dat voor je doen. Als je in WordPress 5.8 blokken zoekt krijg je ook suggesties voor blokpatronen te zien.
Binnenkort komt hier ook een verbinding met de online catalogus met WordPress blokpatronen via WordPress.org/Patterns.

Gutenberg patterns

Duotone kleureffecten voor afbeelingen en media blokken

Hou je van kleuren? Vanaf nu kan je duotone filters toepassen op afbeeldingen en media blokken.
Er zitten een paar standaard instellingen in, maar laat gerust jouw eigen creativiteit de loop! In de video hoe het werkt.

Overige vernieuwingen in de blokkeneditor

  • Meer kleur opties om te kiezen bij tekst, achtergrond en link-kleuren.
  • Nieuwe opties om de padding (afstand tot rand) bij kolommen in te stellen.
  • Nieuwe achtergrond verloop instellingen bij tabellen.