{"id":39117,"date":"2021-07-22T14:41:45","date_gmt":"2021-07-22T12:41:45","guid":{"rendered":"https:\/\/kinqsta.com\/?p=98590"},"modified":"2023-05-23T10:27:20","modified_gmt":"2023-05-23T08:27:20","slug":"wordpress-5-8","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/","title":{"rendered":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)"},"content":{"rendered":"<p>WordPress 5.8 &#8220;Tatum&#8221; <a href=\"https:\/\/wordpress.org\/news\/2021\/07\/tatum\/\">is gearriveerd<\/a> en het is een gedenkwaardige release<\/p>\n<p>Naast een groot aantal nieuwe features, verbeteringen en bugfixes, introduceert WP 5.8 een nieuwe manier voor websites bouwen door middel van de eerste features die vallen onder het grotere project dat ze <strong>Full Site Editing<\/strong> noemen.<\/p>\n<p>Behalve full-site editing biedt WordPress 5.8 ook allerlei andere kleinere veranderingen en verbeteringen op verschillende gebieden in de <a href=\"https:\/\/kinqsta.com\/nl\/wordpress-marktaandeel\/\">CMS<\/a>.<\/p>\n<p>WordPress gebruikers die de Gutenberg plugin nog niet gebruiken zullen ook in \u00e9\u00e9n keer alle features en verbeteringen van negen Gutenberg versies ontvangen (voor details over elke release, zie Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/05\/whats-new-in-gutenberg-9-9-5-february\/\">9.9<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/17\/whats-new-in-gutenberg-10-0-february\/\">10.0<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">10.1<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">10.2<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">10.4<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">10.5<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">10.6<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">10.7<\/a>).<\/p>\n<p>Een belangrijke nieuwe feature voor gebruikers die veel bezig zijn met de prestaties van hun website is ondersteuning voor het WebP format.<\/p>\n<p>Developers zullen ook blij zijn dat IE11 niet langer op de lijst met ondersteunde browsers staat \u00e9n met de nieuwe blockconfiguratie en het stylingmechanisme dat gebaseerd is op <strong>theme.json<\/strong>, het verbeterde block-registratiesysteem op basis van <strong>block.json<\/strong> en de verschillende API verbeteringen in deze tweede <a href=\"https:\/\/kinqsta.com\/nl\/blog\/huidige-wordpress-versie\/\">WordPress release<\/a> in 2021.<\/p>\n<p>Lees dus lekker door voor een vrij lange lijst met features en verbeteringen, die de weg vrijmaken voor krachtigere site-building tools die verwacht worden in de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24551\">komende maanden<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Er zijn heel veel veranderingen in WordPress 5.8. Om onverwachte conflicten met je thema en plugins te voorkomen, raden we je aan om eerst een <a href=\"https:\/\/kinqsta.com\/nl\/docs\/wordpress-hosting\/wordpress-backups\/#wordpress-backup\">backup van je website<\/a> te maken en de nieuwe versie eerst te testen in een <a href=\"https:\/\/kinqsta.com\/nl\/docs\/wordpress-hosting\/testomgeving\/\">testomgeving<\/a> voordat je alles doorzet naar je live site.<\/p>\n<\/aside>\n\n\n<h2>Full Site Editing features in WordPress 5.8<\/h2>\n<p>Het idee achter Full Site Editing is dat je een aantal tools en features krijgt waarmee WordPress gebruikers een <a href=\"https:\/\/wordpress.org\/news\/2021\/06\/gutenberg-highlights\/\">complete website kunnen bouwen via blocks<\/a>. Met Full Site Editing komen allerlei blocks beschikbaar waarmee je verschillende onderdelen op de pagina kan maken, van <a href=\"https:\/\/kinqsta.com\/nl\/blog\/plugins-wordpress-menu\/\">navigatiemenu&#8217;s<\/a> tot branding, widgets, templates en nog veel meer.<\/p>\n<p>WordPress 5.8 introduceert verschillende features die onder Full Site Editing (FSE) vallen, maar verwacht geen volledig uitgeruste visuele site-bouwomgeving te zien. Er wordt nog hard gewerkt aan FSE, en de release van WordPress 5.8 is meer een soort publieke beta-fase. Volgens de woorden van <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/08\/full-site-editing-scope-for-wp5-8\/\">Josepha Haden Chomphosy<\/a>:<\/p>\n<blockquote><p><em>Full site editing is een verzameling van projecten die samen een grote verandering betekenen, veel te veel voor \u00e9\u00e9n enkele release. Het belangrijkste om hierbij te weten is dat we het niet verpakken als de complete, standaard ervaring voor alle gebruikers. E\u00e9n van de belangrijkste opmerkingen die we uit het Phase One proces kregen was dat er niet genoeg tijd was voor al onze partners (bureau&#8217;s, thema-ontwikkelaars, plugindevelopers, sitebouwers) om zich voor te bereiden op de veranderingen.<\/em><\/p>\n<p><em>Om daar rekening mee te houden, zal dit veranderingsproces geen aan\/uit verandering zijn. Het idee is nu dat er nog niet per se een volledige en perfecte gebruikerservaring is, maar dat er met WordPress 5.8 meer een soort publieke beta ontstaat.<\/em><\/p><\/blockquote>\n<p>WordPress 5.8 introduceert dus geen perfecte en volledige FSE ervaring. In plaats daarvan zullen we steeds meer nieuwe features en verbeteringen te zien krijgen, die meteen bij versie 5.8 beginnen. We hoeven daarom ook niet te verwachten dat WordPress 5.8 meteen een dramatische verandering zal zijn van hoe we gewend zijn om websites te bouwen.<\/p>\n<p>Op het moment van schrijven moeten beheerders en admins nog specifiek voor FSE kiezen door een block-thema te installeren, zoals <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\">Twenty-Twenty One Blocks<\/a>\u00a0(de <a href=\"https:\/\/kinqsta.com\/nl\/blog\/twenty-twenty-one-thema\/#the-twenty-twentyone-blocks-experiment\">block-based versie<\/a> van Twenty-Twenty One), en de Gutenberg plugin activeren.<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=a1Sf7PxfmLQ\"><\/kinsta-video><\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/full-site-editing\/\">Full Site Editing<\/a> is in feite een verzameling sub-projecten, zoals de Site Editor, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Global Styles<\/a>, Query block, Navigation block, Templates, block-thema&#8217;s, en meer. Wat het dichtst bij Full Site Editing komt binnen WordPress 5.8 is de <strong>Template Editing Mode<\/strong> en bijbehorende <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#theme-blocks\">Theme Blocks<\/a> die daarin beschikbaar zijn, zoals we later nog uitgebreid aan bod laten komen.<\/p>\n<p>Tijd om in een aantal <strong>FSE features te duiken die samengevoegd zijn met de WordPress-core in WordPress 5.8<\/strong>.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Template Editing Mode<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/introducing-the-template-editor-in-wordpress-5-8\/\">Template Editing Mode<\/a> biedt een manier om templates voor artikelen en pagina&#8217;s te maken door middel van blocks. Dit is een handige manier om de complexiteit rond het bouwen van website te verminderen, waardoor gebruikers diverse bewerkingsfuncties van buiten de site-editor interface kunnen gebruiken, terwijl ze alvast wennen aan het werken met blocks. Dit is daarnaast ideaal voor gebruikers die geen block-based thema&#8217;s gebruiken, maar wel ge\u00efnteresseerd zijn in een makkelijke manier om templates te maken en te bewerken via de block editor UI.<\/p>\n<p>Het bewerken van thema&#8217;s was nog nooit zo makkelijk in WordPress. Je hebt nu geen <a href=\"https:\/\/kinqsta.com\/nl\/blog\/child-thema-wordpress\/\">child-thema<\/a> mee nodig om je eigen templates te maken. In WordPress 5.8 is het bewerken van templates niet beperkt tot blockthema&#8217;s, <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">maar ook te gebruiken met klassieke thema&#8217;s<\/a>, ook al moet je het zelf activeren als je ook klassieke thema&#8217;s wil bewerken (opt-in).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>&#8220;Template editing&#8221; kan gebruikt worden in klassieke thema&#8217;s met daarin een theme.json bestand of het ondersteunen van <code>'block-templates'<\/code>. Het kan niet worden uitgeschakeld voor blockthema&#8217;s.<\/p>\n<\/aside>\n\n<figure id=\"attachment_98643\" aria-describedby=\"caption-attachment-98643\" style=\"width: 2873px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98643 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-the-template-editor.jpg\" alt=\"De template-editor.\" width=\"2873\" height=\"1385\"><figcaption id=\"caption-attachment-98643\" class=\"wp-caption-text\">De template-editor.<\/figcaption><\/figure>\n<p>Om een nieuw template te maken, moet je alleen de Template Editing Mode inschakelen in de <strong>Settings<\/strong> zijbalk. Er is nu een nieuw <strong>Template<\/strong> paneel beschikbaar waarmee gebruikers de gewenste bewerkingsmodus kunnen kiezen (zie ook de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">Gutenberg 10.5<\/a> release notes).<\/p>\n<figure id=\"attachment_98639\" aria-describedby=\"caption-attachment-98639\" style=\"width: 1676px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98639 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/template-panel.jpg\" alt=\"Template paneel in de Block-editor zijbalk\" width=\"1676\" height=\"942\"><figcaption id=\"caption-attachment-98639\" class=\"wp-caption-text\">Template paneel in de Block-editor zijbalk<\/figcaption><\/figure>\n<p>Vanaf het <strong>Template<\/strong> paneel, kan je een nieuw template maken of bewerken.<\/p>\n<figure id=\"attachment_98595\" aria-describedby=\"caption-attachment-98595\" style=\"width: 1674px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98595 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/create-custom-template.jpg\" alt=\"Instellen van een naam voor de template.\" width=\"1674\" height=\"938\"><figcaption id=\"caption-attachment-98595\" class=\"wp-caption-text\">Instellen van een naam voor de template.<\/figcaption><\/figure>\n<p>Om een nieuw template te maken, klik je op <strong>New<\/strong>. Je voert een templatenaam in en klikt op <strong>Create<\/strong>, en klaar is Kees.<\/p>\n<figure id=\"attachment_98638\" aria-describedby=\"caption-attachment-98638\" style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98638 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode.jpg\" alt=\"Template Editing Mode in WordPress 5.8.\" width=\"2876\" height=\"1314\"><figcaption id=\"caption-attachment-98638\" class=\"wp-caption-text\">Template Editing Mode in WordPress 5.8.<\/figcaption><\/figure>\n<p>In de Template Editing Mode kan je templates bouwen met alle beschikbare blocks, waaronder FSE blocks zoals Site Title, Site Tagline, Login\/out, en allerlei anderen.<\/p>\n<p>Zodra je tevreden bent met je template, kan je teruggaan naar de Post Editing mode en de template los opslaan van de content, zoals hieronder te zien:<\/p>\n<figure id=\"attachment_98631\" aria-describedby=\"caption-attachment-98631\" style=\"width: 2076px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98631 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/save-template.jpg\" alt=\"De optie Save Template.\" width=\"2076\" height=\"994\"><figcaption id=\"caption-attachment-98631\" class=\"wp-caption-text\">De optie Save Template.<\/figcaption><\/figure>\n<p>Templates worden opgeslagen in je <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-database\/\">WordPress database<\/a> als custom post type, genaamd <code>wp_template<\/code>. Dit zorgt ervoor dat je templates kan bewerken via de editor-interface, maar maakt het ook makkelijk om ze te exporteren of importeren. Zo kan je templates op verschillende websites gebruiken (dit is momenteel alleen beschikbaar als je de Gutenberg plugin activeert).<\/p>\n<figure id=\"attachment_98605\" aria-describedby=\"caption-attachment-98605\" style=\"width: 1566px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98605 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/export-templates.png\" alt=\"Exporteren van Templates en Template Parts.\" width=\"1566\" height=\"1116\"><figcaption id=\"caption-attachment-98605\" class=\"wp-caption-text\">Exporteren van Templates en Template Parts.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Let op dat wanneer je een block template gebruikt voor een pagina of artikel, het gewone PHP template niet meer gebruikt zal worden voor die pagina. Alleen het block template wordt dan nog gebruikt.<\/p>\n<\/aside>\n\n<p>Template Editing Mode is nog een beetje buggy op het moment van schrijven, zoals ook gemeld in deze <a href=\"https:\/\/make.wordpress.org\/test\/2021\/05\/26\/fse-program-testing-call-7-polished-portfolios\/\">call for testing<\/a> en <a href=\"https:\/\/wptavern.com\/fse-outreach-7-building-a-portfolio-in-the-upcoming-template-editing-mode\">dit experiment van Justin Tadlock<\/a>.<\/p>\n<figure id=\"attachment_98637\" aria-describedby=\"caption-attachment-98637\" style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98637 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode-issue.jpg\" alt=\"Full-width probleem met uitlijnen in Twenty Twenty-One klassiek thema.\" width=\"2314\" height=\"916\"><figcaption id=\"caption-attachment-98637\" class=\"wp-caption-text\">Full-width probleem met uitlijnen in Twenty Twenty-One klassiek thema.<\/figcaption><\/figure>\n<p>Het vergt dus nog een beetje geduld tot de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Template%20Editing%20Mode\">grotere problemen<\/a> zijn opgelost voordat we echt kunnen zeggen hoe Template Editing Mode de look en feel van je websites zal veranderen.<\/p>\n<p>In ieder geval zullen gebruikers geen developer meer hoeven te worden om volledige controle te hebben over het uiterlijk van hun websites.<\/p>\n<figure id=\"attachment_99183\" aria-describedby=\"caption-attachment-99183\" style=\"width: 2316px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99183 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/cover-block-in-template-editing-mode.jpg\" alt=\"De full-width uitlijning is verbeterd.\" width=\"2316\" height=\"1130\"><figcaption id=\"caption-attachment-99183\" class=\"wp-caption-text\">De full-width uitlijning is verbeterd.<\/figcaption><\/figure>\n<p>Template Editing Mode was aanvankelijk\u00a0<a class=\"c-link\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\" data-sk=\"tooltip_parent\">beschikbaar voor zowel block thema&#8217;s als klassieke thema&#8217;s<\/a>. Na een diepe discussie in het kanaal 5.8 leads, werd besloten om de template editor opt-in te maken voor klassieke thema&#8217;s en opt-out voor block thema&#8217;s (zie ook pull #<a class=\"c-link\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32858\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32858\" data-sk=\"tooltip_parent\">32858<\/a>).<\/p>\n<p>Volgens <a class=\"c-link\" href=\"https:\/\/make.wordpress.org\/themes\/2021\/07\/08\/summary-theme-features-in-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/make.wordpress.org\/themes\/2021\/07\/08\/summary-theme-features-in-wordpress-5-8\/\" data-sk=\"tooltip_parent\">Carolina Nymark<\/a>:<\/p>\n<blockquote><p>Aanvankelijk was het bewerken van templates voor alle thema&#8217;s ingeschakeld. Thema-ontwikkelaars maakten zich zorgen dat ze niet al hun bestaande klassieke thema&#8217;s konden updaten om deze nieuwe functie te ondersteunen. Met een late wijziging hebben het releaseteam en het redactieteam ervoor gekozen om het wijzigen van templates op opt-in te zetten voor klassieke thema&#8217;s.<\/p><\/blockquote>\n<p>Om het voor klassieke thema&#8217;s in te schakelen, moeten ontwikkelaars nu zlf thema-ondersteuning toevoegen:<\/p>\n<pre><span style=\"color: #993300\"><code class=\"language-php\">add_theme_support( 'block-templates' );<\/code><\/span><\/pre>\n<p>Klassieke thema&#8217;s die gebruikmaken van\u00a0<i data-stringify-type=\"italic\">theme.json<\/i>\u00a0kunnen zich afmelden door de thema-ondersteuning te verwijderen:<\/p>\n<pre><code class=\"language-php\">remove_theme_support(  'block-templates' );<\/code><\/pre>\n<p>Voor meer details over de Template Editing Mode in WordPress 5.8 en een aantal handige voorbeelden, kan je deze video van Anne McCarty eens bekijken:<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=Z571V_jlD-o\"><\/kinsta-video><\/p>\n<h3>Theme Blocks<\/h3>\n<p>Zoals eerder gezien is Full Site Editing niet \u00e9\u00e9n enkele feature, maar een complete verzameling van features die verder gaan dan alleen de site editor. <a href=\"#bookmark=id.gjdgxs\">Template Editing Mode<\/a> is daar dus alleen een voorbeeld van. Naast Template Editing biedt WordPress 5.8 ook allerlei <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/20\/full-site-editing-go-no-go-next-steps\/\">theme blocks<\/a> die dynamisch informatie kunnen weergeven uit de database. Sommige van deze blocks kunnen ook buiten een FSE context gebruikt worden (zie probleem #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">28744<\/a>).<\/p>\n<figure id=\"attachment_98606\" aria-describedby=\"caption-attachment-98606\" style=\"width: 1124px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98606 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/fse-blocks.jpg\" alt=\"Full Site Editor blocks beschikbaar buiten FSE contexts sinds WordPress 5.8.\" width=\"1124\" height=\"1798\"><figcaption id=\"caption-attachment-98606\" class=\"wp-caption-text\">Full Site Editor blocks beschikbaar buiten FSE contexts sinds WordPress 5.8.<\/figcaption><\/figure>\n<p><strong>Theme Blocks brengen de functionaliteit van template tags naar klassieke thema&#8217;s<\/strong>, en je kan ze op dezelfde manier gebruiken als gewone blocks. Zo kan je bijvoorbeeld artikel tags toevoegen aan de uitgelichte afbeeldingen van je artikel, in de content van een artikel of in een template. Om een idee te krijgen van het enorme aantal theme blocks die aan de kern zijn toegevoegd in WordPress 5.8, typ je <strong>\/post<\/strong> in de block placeholder:<\/p>\n<figure id=\"attachment_98619\" aria-describedby=\"caption-attachment-98619\" style=\"width: 662px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98619 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/post-related-blocks.png\" alt=\"Voorgestelde theme blocks.\" width=\"662\" height=\"864\"><figcaption id=\"caption-attachment-98619\" class=\"wp-caption-text\">Voorgestelde theme blocks.<\/figcaption><\/figure>\n<p>Een handig theme block dat beschikbaar is in WordPress 5.8 is het <strong>Login\/out<\/strong> block, waarmee je links voor inloggen en uitloggen krijgt. Je kan ook een inlogformulier laten zien in plaats van een link. Site admins kunnen ook de redirect wijzigen (zie PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29766\">29766<\/a>).<\/p>\n<figure id=\"attachment_98612\" aria-describedby=\"caption-attachment-98612\" style=\"width: 1948px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98612 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/login-out-block.jpg\" alt=\"Login\/out block instellingen in de block editor.\" width=\"1948\" height=\"770\"><figcaption id=\"caption-attachment-98612\" class=\"wp-caption-text\">Login\/out block instellingen in de block editor.<\/figcaption><\/figure>\n<p>Voor meer informatie over FSE blocks, kan je &#8220;Enabling Full Site Editor blocks in classic themes&#8221; <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">op Github lezen<\/a>.<\/p>\n<h3>De Query Loop Block<\/h3>\n<p>Hoe vaak heb je niet gehad dat je graag een aangepaste lijst van artikelen of <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-custom-post-types\/\">custom berichttypen<\/a> wou laten zien? Denk aan producten, evenementen, of vastgoed&#8230; Je kan daar natuurlijk allerlei plugins voor gebruiken, maar om goede, op maat gemaakte queries te maken heb je vaak een developer nodig die overweg kan met de <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\">WordPress Loop<\/a>.<\/p>\n<p>Door de introductie van de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">Query Loop block<\/a> in de WordPress core kunnen admins en beheerders lijsten van artikelen en custom artikeltypen maken zonder complexe code of <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\">het inhuren van een developer<\/a>, in ieder geval voor de meeste standaard toepassingen.<\/p>\n<p>Wat doet de Query Loop Block precies?<\/p>\n<p>In het kort komt het erop neer dat het een WordPress Loop is, maar binnen de visuele context van de block editor.<\/p>\n<p>De Query Loop block voert een query uit op de WordPress database op basis van de instellingen van de gebruiker, &#8220;loopt&#8221; door elk opgehaald artikel, en geeft de gevraagde data weer.<\/p>\n<p>Na <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">intensieve ontwikkeling<\/a> heeft deze block de huidige structuur gekregen, en bestaat nu uit <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32283\">twee geneste blocks<\/a>: de <strong>Query<\/strong> en <strong>Post Template<\/strong> blocks.<\/p>\n<figure id=\"attachment_99071\" aria-describedby=\"caption-attachment-99071\" style=\"width: 2126px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99071 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/query-loop-list-view.jpg\" alt=\"List View van een Query Loop block.\" width=\"2126\" height=\"1124\"><figcaption id=\"caption-attachment-99071\" class=\"wp-caption-text\">List View van een Query Loop block.<\/figcaption><\/figure>\n<p>Als geavanceerde feature heeft een Query Loop block wel wat configuratie nodig.<\/p>\n<p>Allereerst moet je kiezen tussen verschillende <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-5\/#block-patterns\">blockpatronen<\/a>, in de Carousel en Grid view. Na je keuze klik je op <strong>Choose<\/strong>, en de Query Loop block maakt de gevraagde lijst van artikelen.<\/p>\n<figure id=\"attachment_98623\" aria-describedby=\"caption-attachment-98623\" style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98623 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/query-block-grid-view.jpg\" alt=\"Query Loop block patronen in Grid view.\" width=\"1262\" height=\"1374\"><figcaption id=\"caption-attachment-98623\" class=\"wp-caption-text\">Query Loop block patronen in Grid view.<\/figcaption><\/figure>\n<p>Als je klikt op <strong>Start blank<\/strong>, zie je een lijst met vier kernvariaties van blocks: <strong>Title &#038; Date<\/strong>;\u00a0<strong>Title &#038; Excerpt<\/strong>;\u00a0<strong>Title, Date &#038; Excerpt<\/strong>; en <strong>Image, Date &#038; Title<\/strong> (zie ook <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">Aanbieden van patronen bij Block setup<\/a>).<\/p>\n<figure id=\"attachment_99068\" aria-describedby=\"caption-attachment-99068\" style=\"width: 1238px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99068 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/query-loop-variations-1.png\" alt=\"Query Loop block variaties.\" width=\"1238\" height=\"662\"><figcaption id=\"caption-attachment-99068\" class=\"wp-caption-text\">Query Loop block variaties.<\/figcaption><\/figure>\n<p>Na je keuze zal het selecteren van de Query Loop block een instellingenbalk tonen, waar je de daadwerkelijke query kan samenstellen. Je kan de query gebruiken uit de <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wat-is-een-url\/\">URL<\/a> of de argumenten aanpassen, zoals het type artikelen in de lijst, de volgorde van weergave, en of er sticky artikelen zijn.<\/p>\n<p>Je kan ook verschillende filters gebruiken, categorie\u00ebn kiezen, auteurs en keywords.<\/p>\n<figure id=\"attachment_98625\" aria-describedby=\"caption-attachment-98625\" style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98625 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/query-block.jpg\" alt=\"De Query Loop block met een instellingenbalk.\" width=\"2876\" height=\"1380\"><figcaption id=\"caption-attachment-98625\" class=\"wp-caption-text\">De Query Loop block met een instellingenbalk.<\/figcaption><\/figure>\n<p>Daarnaast is er een knop voor <strong>Display settings<\/strong> in de toolbar van de block met meer instellingen voor het aantal items per pagina, de offset, en het maximale aantal pagina&#8217;s.<\/p>\n<figure id=\"attachment_98622\" aria-describedby=\"caption-attachment-98622\" style=\"width: 1252px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98622 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/query-block-display-settings.jpg\" alt=\"Weergave-instellingen van de Query Loop block.\" width=\"1252\" height=\"1152\"><figcaption id=\"caption-attachment-98622\" class=\"wp-caption-text\">Weergave-instellingen van de Query Loop block.<\/figcaption><\/figure>\n<p>De Query Loop block is zonder meer een krachtige tool, waarmee je een erg nauwkeurige lijst van artikelen en custom artikeltypen kan tonen.<\/p>\n<p>Maar als je de <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/\">WP_Query<\/a> class parameters langsloopt, is het duidelijk dat je via code nog veel mogelijkheden hebt dan via de Query Loop block.<\/p>\n<p>Desalniettemin is het een handige en flexibele tool voor allerlei gevallen, en we zien vast nog meer verbeteringen in de nabije toekomst.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De Query Loop en Post Template blocks hebben de afgelopen weken regelmatig nieuwe namen gekregen. De uiteindelijke naam staat vast sinds <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">Gutenberg 10.9<\/a>.<\/p>\n<\/aside>\n\n<h3>Persistent List View in de Post Editor<\/h3>\n<p>Een andere Full Site Editing feature die doorgetrokken is naar de Post Editor is de <strong>Persistent List View<\/strong>. Voor WordPress 5.8 (en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">Gutenberg 10.7<\/a>), werd de List View weergegeven in een popover. Zodra je de muis buiten de popover bewoog, verdween de lijst.<\/p>\n<p>De Site Editor daarentegen laat de List view zien in de zijbalk, inclusief de gehele hi\u00ebrarchie van de block.<\/p>\n<p>Met WordPress 5.8 wordt de List View weergegeven in de zijbalk van de Post Editor, waardoor gebruikers sneller de hele hi\u00ebrarchie van de block af kunnen gaan.<\/p>\n<figure id=\"attachment_98618\" aria-describedby=\"caption-attachment-98618\" style=\"width: 698px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98618 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/persistent-list-view.png\" alt=\"De List View zijbalk in WordPress 5.8.\" width=\"698\" height=\"1182\"><figcaption id=\"caption-attachment-98618\" class=\"wp-caption-text\">De List View zijbalk in WordPress 5.8.<\/figcaption><\/figure>\n<p>Door op een item in de List View te klikken wordt het item gemarkeerd, en gaat de focus meteen naar het bijbehorende block in de Post Editor. Daarnaast, als je hovert boven de items in de List view, worden zoals het item als het bijbehorende block in de Post Editor gemarkeerd.<\/p>\n<figure id=\"attachment_99304\" aria-describedby=\"caption-attachment-99304\" style=\"width: 2158px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99304 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-enhancement-1.jpg\" alt=\"Hoveren boven items in de List View.\" width=\"2158\" height=\"1184\"><figcaption id=\"caption-attachment-99304\" class=\"wp-caption-text\">Hoveren boven items in de List View.<\/figcaption><\/figure>\n<p>Als laatste wordt het toevoegen van een anker aan een block ook getoond in het item op de List view.<\/p>\n<figure id=\"attachment_99303\" aria-describedby=\"caption-attachment-99303\" style=\"width: 2496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99303 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-anchor-2.jpg\" alt=\"Toevoegen van een anker aan blocks in WordPress 5.8.\" width=\"2496\" height=\"1156\"><figcaption id=\"caption-attachment-99303\" class=\"wp-caption-text\">Toevoegen van een anker aan blocks in WordPress 5.8.<\/figcaption><\/figure>\n<p>Met al deze verbeteringen in de List view wordt het navigeren in complexe documenten een stuk makkelijker.<\/p>\n<h2>Block-Based Widgets Editor en Block Widgets in de Customizer<\/h2>\n<p>De <strong>block-based widgets editor<\/strong> is een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/projects\/27\">breed project<\/a> dat de interface van de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">block editor naar klassieke themawidgets<\/a> moet overbrengen.<\/p>\n<p>De nieuwe widget editor biedt allerlei voordelen voor de grote meerderheid van de gebruikers die nog altijd de klassieke thema&#8217;s gebruiken. Tegelijkertijd biedt het een prettige introductie voor de block interface, voordat het de algemene standaard wordt voor alle <a href=\"https:\/\/kinqsta.com\/nl\/blog\/gebruikersrollen-wordpress\/\">WordPress gebruikers<\/a>.<\/p>\n<figure id=\"attachment_98656\" aria-describedby=\"caption-attachment-98656\" style=\"width: 2150px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98656 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/block-widgets.jpg\" alt=\"Block widgets popup.\" width=\"2150\" height=\"1254\"><figcaption id=\"caption-attachment-98656\" class=\"wp-caption-text\">Block widgets popup.<\/figcaption><\/figure>\n<p>Zoals <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">Anne McCarty aangeeft<\/a> bieden block-based widgets diverse voordelen, waaronder:<\/p>\n<ul>\n<li>Je kan <strong>layouts in zijbalken<\/strong>, headers en footers maken, door middel van kolommen, scheidingstekens, spacers en andere ontwerpblocks.<\/li>\n<li>Widgets bieden nu standaard ondersteuning voor <strong>rich text editing<\/strong>, zonder dat gebruikers eigen code moeten toevoegen of een externe HTML editor moeten gebruiken via een plugin.<\/li>\n<li>Veel widgets die shortcodes gebruiken zijn nu <strong>beschikbaar als blocks<\/strong>, wat het ontwerpen veel makkelijker maakt.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">Andrei Draganescu<\/a> benadrukt ook de voordelen die je krijgt door widgets te bewerken via een block-based interface:<\/p>\n<blockquote><p>Het voornaamste voordeel van de verbetering in de functionaliteit van widgets is dat blocks de mogelijkheid hebben om widgets direct te bewerken via de bekende block interacties, die je ook gebruikt bij het bewerken van een pagina of artikel op je website. Door blocks te kunnen gebruiken krijg je allerlei nieuwe creatieve mogelijkheden, van code-loze mini layouts tot het gebruik van de enorme bibliotheek met blocks uit de core of van derden om content te maken.<\/p><\/blockquote>\n<p>Je hoeft je geen zorgen te maken dat je widgets opeens stoppen te werken door WordPress 5.8, aangezien <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">de community hard gewerkt heeft<\/a> om <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/07\/whats-next-in-gutenberg-may-2021\/\">achterwaartse compatibiliteit<\/a> te bieden, zodat &#8220;bestaande widgets en externe widgets zullen blijven werken, en naast de blocks gebruikt kunnen worden&#8221; (zie ook <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">Block-based widgets editor in WordPress 5.8<\/a>).<\/p>\n<p>Maar nogmaals, test altijd op problemen met compatibiliteit door eerst een nieuwe versie in een <a href=\"https:\/\/kinqsta.com\/nl\/docs\/wordpress-hosting\/testomgeving\/\">testomgeving<\/a> uit te proberen, voordat je meteen je live website update.<\/p>\n<p>Voor iedereen die nog niet de block-based widget editor wil gebruiken, kan je nog altijd op drie manieren teruggaan naar het klassieke <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-widgets\/\">widgets<\/a> scherm:<\/p>\n<ol>\n<li>Je kan de <a href=\"https:\/\/wordpress.org\/plugins\/classic-widgets\/\">offici\u00eble Classic Widgets plugin<\/a> installeren, die de oude interface herstelt. De plugin zal &#8220;worden ondersteund en onderhouden tot tenminste 2022, of zo lang als nodig&#8221;.<\/li>\n<li>Thema developers kunnen de block-based widget editor uitzetten door de ondersteuning voor een thema te stoppen, op de gebruikelijke manier:\n<pre><code class=\"language-php\">remove_theme_support( 'widgets-block-editor' );<\/code><\/pre>\n<\/li>\n<li>Je kan ook een nieuw <code>use_widgets_block_editor<\/code> filter gebruiken:\n<pre><code class=\"language-php\">add_filter( 'use_widgets_block_editor', '__return_false' );<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>Lees ook over het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/opting-out\/\">herstellen van de klassieke widgets editor<\/a> in het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/overview\/\">Widget Block Editor overzicht<\/a>.<\/p>\n<h3>Block Widgets naar de Customizer<\/h3>\n<p>Als onderdeel van hetzelfde project, brengt WordPress 5.8<strong> block widgets naar de Customizer<\/strong>.<\/p>\n<figure id=\"attachment_98642\" aria-describedby=\"caption-attachment-98642\" style=\"width: 598px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98642 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-block-widgets.jpg\" alt=\"Block widgets in de customizer.\" width=\"598\" height=\"1398\"><figcaption id=\"caption-attachment-98642\" class=\"wp-caption-text\">Block widgets in de customizer.<\/figcaption><\/figure>\n<p>Block-based widgets toevoegen via de customizer is vrij eenvoudig. Je kan de <strong>customize widget inserter<\/strong> starten door op het plusje rechtsboven bij de widgets te klikken.<\/p>\n<figure id=\"attachment_98596\" aria-describedby=\"caption-attachment-98596\" style=\"width: 1706px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98596 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-inserter.jpg\" alt=\"De customize widgets inserter.\" width=\"1706\" height=\"1298\"><figcaption id=\"caption-attachment-98596\" class=\"wp-caption-text\">De customize widgets inserter.<\/figcaption><\/figure>\n<p>Je kan ook de <strong>quick inserter<\/strong> starten onderaan in het widgets-scherm, zoals hieronder te zien.<\/p>\n<figure id=\"attachment_98597\" aria-describedby=\"caption-attachment-98597\" style=\"width: 1212px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98597 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-quick-inserter.jpg\" alt=\"De customize widgets quick inserter.\" width=\"1212\" height=\"886\"><figcaption id=\"caption-attachment-98597\" class=\"wp-caption-text\">De customize widgets quick inserter.<\/figcaption><\/figure>\n<p>Op het moment van schrijven had de nieuwe widget editing interface nog allerlei <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Widgets%20Customizer\">verbeteringen en bugfixes<\/a> nodig, maar vervolgens zullen de mogelijkheden voor customization nagenoeg onbeperkt zijn.<\/p>\n<p>Vanaf WordPress 5.8 heb je in feite de mogelijkheden van de <a href=\"https:\/\/kinqsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">block editor<\/a> binnen de customizer, en kan je dus in hoge mate aangepaste zijbalken maken zonder al te veel gedoe.<\/p>\n<figure id=\"attachment_98632\" aria-describedby=\"caption-attachment-98632\" style=\"width: 924px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98632 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/show-more-settings.jpg\" alt=\"Meer instellingen.\" width=\"924\" height=\"1066\"><figcaption id=\"caption-attachment-98632\" class=\"wp-caption-text\">Meer instellingen.<\/figcaption><\/figure>\n<p>De <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">block-based widgets editor dev-note<\/a> biedt een uitgebreid overzicht van de block-based widgets editor, met voorbeelden en resources voor developers.<\/p>\n<h2>Block Editor features en verbeteringen<\/h2>\n<p>Naast de eerste FSE implementaties, biedt WordPress 5.8 ook allerlei nieuwe features en verbeteringen voor verschillende delen van de block editor, wat het bewerken van je website aanzienlijk prettiger maakt.<\/p>\n<p>Deze veranderingen zijn onder meer:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"9\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Verbeteringen in de Media &#038; Text block<\/h3>\n<p>Het omzetten van een block naar een <strong>columns<\/strong> block is al een poosje mogelijk. Maar alle blocks gingen meteen over naar een columns block met \u00e9\u00e9n kolom. Dat kon nogal onhandig zijn bij een <strong>media &#038; text<\/strong> block, waarbij \u00e9\u00e9n kolom nooit erg mooi wordt.<\/p>\n<figure id=\"attachment_98614\" aria-describedby=\"caption-attachment-98614\" style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98614 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-transforms.jpg\" alt=\"Media &#038; text block omzetting en stijlen.\" width=\"2314\" height=\"1110\"><figcaption id=\"caption-attachment-98614\" class=\"wp-caption-text\">Media &#038; text block omzetting en stijlen.<\/figcaption><\/figure>\n<p>Vanaf WordPress 5.8 (en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">Gutenberg 10.2<\/a>) zal het veranderen van een <strong>media &#038; text<\/strong> block naar een <strong>columns<\/strong> block automatisch twee kolommen aanmaken: \u00e9\u00e9n voor de afbeeldingen en \u00e9\u00e9n voor de tekst.<\/p>\n<figure id=\"attachment_98613\" aria-describedby=\"caption-attachment-98613\" style=\"width: 2018px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98613 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-to-two-columns.jpg\" alt=\"Twee kolommen voor media en tekst.\" width=\"2018\" height=\"652\"><figcaption id=\"caption-attachment-98613\" class=\"wp-caption-text\">Twee kolommen voor media en tekst.<\/figcaption><\/figure>\n<h3>Verbeteringen voor reusable blocks<\/h3>\n<p>Reusable blocks maken het mogelijk om een block of aantal blocks op te slaan en ze in een ander artikel of pagina weer te gebruiken. Dit is vooral erg handig voor gebruikers die regelmatig dezelfde block of groep blocks gebruiken in verschillende artikelen of pagina&#8217;s.<\/p>\n<figure id=\"attachment_98628\" aria-describedby=\"caption-attachment-98628\" style=\"width: 1290px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98628 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-modal.jpg\" alt=\"Een modal voor de reusable blocks aanmaakflow.\" width=\"1290\" height=\"964\"><figcaption id=\"caption-attachment-98628\" class=\"wp-caption-text\">Een modal voor de reusable blocks aanmaakflow.<\/figcaption><\/figure>\n<p>Door WordPress 5.8 zijn reusable blocks veel overzichtelijker, waardoor je ze makkelijker kan gebruiken.v<\/p>\n<figure id=\"attachment_98630\" aria-describedby=\"caption-attachment-98630\" style=\"width: 2084px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98630 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/reusable-block.jpg\" alt=\"Een reusable block in WordPress 5.8.\" width=\"2084\" height=\"724\"><figcaption id=\"caption-attachment-98630\" class=\"wp-caption-text\">Een reusable block in WordPress 5.8.<\/figcaption><\/figure>\n<p>Een korte lijst van verbeteringen voor reusable blocks vanaf WordPress 5.8:<\/p>\n<ul>\n<li>Bij het maken van een reusable block, kan je nu een naam toewijzen aan het block.<\/li>\n<li>De naam wordt gebruikt in de toolbar, lijst voor navigatie, en in de breadcrumbs.<\/li>\n<li>Wanneer je een sub-block selecteert, worden reusable blocks gemarkeerd. Dit maakt het gebruik aanzienlijk makkelijker, omdat je eenvoudig de hoofd-block en bijbehorende content kan vinden.<\/li>\n<li>Het is nu mogelijk om de naam van een block aan te passen via de zijbalk inspector.<\/li>\n<\/ul>\n<figure id=\"attachment_98629\" aria-describedby=\"caption-attachment-98629\" style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98629 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-outlines.jpg\" alt=\"Reusable block markering.\" width=\"1262\" height=\"658\"><figcaption id=\"caption-attachment-98629\" class=\"wp-caption-text\">Reusable block markering.<\/figcaption><\/figure>\n<h3>Genormaliseerde toolbar voor Image blocks<\/h3>\n<p>De toolbars van diverse blocks zijn gereorganiseerd om een <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">consistente User Interface tussen blocks<\/a> te bieden, wat de user experience aanzienlijk verbetert. De instellingen in toolbars worden nu gegroepeerd op de volgorde &#8220;meta, block-level, inline&#8221;.<\/p>\n<figure id=\"attachment_98607\" aria-describedby=\"caption-attachment-98607\" style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98607 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/heading-block-toolbar.png\" alt=\"Heading block toolbar.\" width=\"950\" height=\"294\"><figcaption id=\"caption-attachment-98607\" class=\"wp-caption-text\">Heading block toolbar.<\/figcaption><\/figure>\n<p>Sinds <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">Gutenberg 10.1<\/a> en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">Gutenberg 10.3<\/a>, zijn een hoop toolbars genormaliseerd. Dit zijn onder meer de blocks <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29205\">image<\/a>, button, buttons, list, heading, paragraph, quote, audio, file, media &#038; text, video, en nog een aantal.<\/p>\n<p>Volgens <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/25983\">Matias Ventura<\/a>:<\/p>\n<blockquote><p>De semantische groeperingen in de toolbar, meta, block level, inline, zouden ook visueel te zien moeten zijn met randen. Op dit moment hebben aparte instellingen in het block verschillende representaties, waaronder gevallen zoals Navigation waarbij elk individueel element randen heeft.<\/p><\/blockquote>\n<figure id=\"attachment_98610\" aria-describedby=\"caption-attachment-98610\" style=\"width: 953px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98610 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar.png\" alt=\"Genormaliseerde toolbar voor Image blocks\" width=\"953\" height=\"280\"><figcaption id=\"caption-attachment-98610\" class=\"wp-caption-text\">Genormaliseerde toolbar voor Image blocks<\/figcaption><\/figure>\n<p>Sinds WordPress 5.8 groepeert de block toolbar <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/designers\/block-design\/#group-block-toolbar-controls-with-related-items\">instellingen in segmenten<\/a>, die omgeven zijn door randen. Daarnaast:<\/p>\n<ul>\n<li>Het <strong>Meta<\/strong> segment bevat block-type instellingen, zoals de block switcher, de drag handle en de mover-instelling.<\/li>\n<li>Het <strong>Block level<\/strong> segment bevat specifieke tools voor het block, die de hele content bepalen, zoals de uitlijning in een paragraph block of links in een image block.<\/li>\n<li>Het <strong>Inline level\/Other<\/strong> segment bevat inline transformatie tools, zoals inline formatting binnen een text block.<\/li>\n<li>Het <strong>More<\/strong> menu bevat overige tools.<\/li>\n<\/ul>\n<p>De onderstaande afbeelding vergelijkt de Image block toolbar in WordPress 5.7 en 5.8:<\/p>\n<figure id=\"attachment_98608\" aria-describedby=\"caption-attachment-98608\" style=\"width: 902px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98608 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar-before-after.png\" alt=\"Image block toolbar in WordPress 5.7 vs WordPress 5.8.\" width=\"902\" height=\"466\"><figcaption id=\"caption-attachment-98608\" class=\"wp-caption-text\">Image block toolbar in WordPress 5.7 vs WordPress 5.8.<\/figcaption><\/figure>\n<h3>Verbeteringen van de top toolbar<\/h3>\n<p>Wanneer je de top toolbar mode inschakelde bij vorige WordPress versies, werden de top toolbar en block toolbar naast elkaar getoond, zoals hier te zien:<\/p>\n<figure id=\"attachment_98644\" aria-describedby=\"caption-attachment-98644\" style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98644 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/wordpress-57-top-toolbar.jpg\" alt=\"De top toolbar op brede schermen in WordPress 5.7.\" width=\"2880\" height=\"1332\"><figcaption id=\"caption-attachment-98644\" class=\"wp-caption-text\">De top toolbar op brede schermen in WordPress 5.7.<\/figcaption><\/figure>\n<p>Bij WordPress 5.8 zorgt het inschakelen van de top toolbar ervoor dat de block toolbar vastgemaakt wordt aan de bovenkant van de editor, direct onder de top toolbar. Dit wordt onafhankelijk van de breedte van de browser gedaan, en zou aanzienlijke verbeteringen voor de user experience moeten bieden.<\/p>\n<figure id=\"attachment_98645\" aria-describedby=\"caption-attachment-98645\" style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98645 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/wordpress-58-top-toolbar.jpg\" alt=\"De top toolbar op brede schermen in WordPress 5.7.\" width=\"2880\" height=\"1324\"><figcaption id=\"caption-attachment-98645\" class=\"wp-caption-text\">De top toolbar op brede schermen in WordPress 5.7.<\/figcaption><\/figure>\n<p>Deze verbetering heeft ook gevolgen voor developers, aangezien het de toolbar API&#8217;s samenvoegt onder het <code>&lt;BlockTools \/&gt;<\/code> component (zie PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31134\">31134<\/a>).<\/p>\n<h3>Embedded PDF&#8217;s<\/h3>\n<p>Wanneer een PDF bestand wordt toegevoegd aan het document via een file block, biedt een nieuwe schakelaar in de zijbalk je de keuze om een <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">embedded PDF versie<\/a> in\/uit te schakelen (zie PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30857\">30857<\/a>).<\/p>\n<figure id=\"attachment_98604\" aria-describedby=\"caption-attachment-98604\" style=\"width: 2080px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98604 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/embedded-pdf.jpg\" alt=\"Een embedded PDF in WordPress 5.8.\" width=\"2080\" height=\"1054\"><figcaption id=\"caption-attachment-98604\" class=\"wp-caption-text\">Een embedded PDF in WordPress 5.8.<\/figcaption><\/figure>\n<p>Je kan het bestand direct naar de editor slepen of het selecteren in de bibliotheek. Het is ook mogelijk om handmatig de hoogte van de PDF viewer aan te passen, of daarvoor de instellingen in de zijbalk te gebruiken.<\/p>\n<p>Alle grote browsers ondersteunen de PDF viewer, <a href=\"https:\/\/caniuse.com\/pdf-viewer\">behalve mobiele browsers<\/a>.<\/p>\n<h3>Duotone Block ondersteuning<\/h3>\n<p>E\u00e9n van de meest interessante features die aan de WordPress core is toegevoegd in WordPress 5.8 is de duotone filter, die we voor het eerst zagen in <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">Gutenberg 10.6<\/a>.<\/p>\n<figure id=\"attachment_98601\" aria-describedby=\"caption-attachment-98601\" style=\"width: 1256px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98601 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/duotone-image.jpg\" alt=\"De nieuwe duotone design tool in een image block.\" width=\"1256\" height=\"1186\"><figcaption id=\"caption-attachment-98601\" class=\"wp-caption-text\">De nieuwe duotone design tool in een image block.<\/figcaption><\/figure>\n<p>Beschikbaar als <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26752\">&#8220;block support&#8221; feature<\/a> is het duotone filter standaard ingeschakeld in <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26751\">image<\/a> en cover blocks. In het cover block werkt het echt niet bij <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/31662\">vaste achtergronden<\/a>.<\/p>\n<figure id=\"attachment_98602\" aria-describedby=\"caption-attachment-98602\" style=\"width: 1268px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98602 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/duotone-picker.jpg\" alt=\"De nieuwe duotone picker in WordPress 5.8.\" width=\"1268\" height=\"998\"><figcaption id=\"caption-attachment-98602\" class=\"wp-caption-text\">De nieuwe duotone picker in WordPress 5.8.<\/figcaption><\/figure>\n<p>Image en cover block toolbars tonen nu een instelling <strong>Apply duotone filter<\/strong>, waarbij je een duotone picker te zien krijgt met allerlei keuzes.<\/p>\n<p>Twee sub-instellingen bieden keuzes qua schaduwen en highlighting. Dit effect wordt toegepast met een <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/filters.html\">SVG filter<\/a> dat verborgen zit in inline styles en toegepast wordt via een specifieke class naam.<\/p>\n<figure id=\"attachment_98603\" aria-describedby=\"caption-attachment-98603\" style=\"width: 2142px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98603 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/duotone-source-code.jpg\" alt=\"Inspecteren van de duotone SVG filter in Chrome DevTools.\" width=\"2142\" height=\"1038\"><figcaption id=\"caption-attachment-98603\" class=\"wp-caption-text\">Inspecteren van de duotone SVG filter in Chrome DevTools.<\/figcaption><\/figure>\n<p>De nieuwe tool komt tegelijk met een nieuwe eigenschap, <code>color.__experimentalDuotone<\/code>, waarmee developers de duotone filter kunnen toevoegen aan blocks of onderdelen van block in hun <strong>block.json<\/strong> bestand (daarover meer in <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color\">color object reference<\/a>):<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\t__experimentalDuotone: '&gt; .duotone-img, &gt; .duotone-video',\n\t\tbackground: false,\n\t\ttext: false\n\t}\n}<\/code><\/pre>\n<p>Wanneer een block ondersteuning biedt voor <code>color.__experimentalDuotone<\/code>, kan een <code>style<\/code> attribuut gebruikt worden voor <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color-__experimentalduotone\">custom standaardkleuren<\/a>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tduotone: [\n\t\t\t\t\t'#FFF',\n\t\t\t\t\t'#000\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Hieronder zie je dezelfde afbeelding met twee verschillende duotone effecten:<\/p>\n<figure id=\"attachment_98599\" aria-describedby=\"caption-attachment-98599\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98599 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-blue.jpg\" alt=\"Duotone kleurenfilter op een afbeelding.\" width=\"1250\" height=\"850\"><figcaption id=\"caption-attachment-98599\" class=\"wp-caption-text\">Duotone kleurenfilter op een afbeelding.<\/figcaption><\/figure>\n<figure id=\"attachment_98600\" aria-describedby=\"caption-attachment-98600\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98600 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-yellow.jpg\" alt=\" Een andere duotone kleurenfilter op dezelfde afbeelding.\" width=\"1250\" height=\"850\"><figcaption id=\"caption-attachment-98600\" class=\"wp-caption-text\">Een andere duotone kleurenfilter op dezelfde afbeelding.<\/figcaption><\/figure>\n<p>Developers kunnen duotone <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">presets<\/a> defini\u00ebren in het bestand <strong>theme.json<\/strong> (meer in <a href=\"#bookmark=id.30j0zll\">het onderstaande stuk<\/a>), zoals te zien in dit stukje code:<\/p>\n<pre><code class=\"language-javascript\">{\n\"version\": 1,\n\"settings\": {\n\t\"color\": {\n\t\t\"duotone\": [\n\t\t\t{\n\t\t\t\t\"colors\": [ \"#000\", \"#7f7f7f\" ],\n\t\t\t\t\"slug\": \"black-and-white\",\n\t\t\t\t\"name\": \"dark-grayscale\"\n\t\t\t}\n\t\t],\n\t...<\/code><\/pre>\n<p>Je kan meer lezen over duotone filters in het <a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\">Kleuren van je afbeeldingen met duotone filters<\/a>.<\/p>\n<h3>Table Block kleuren en randen<\/h3>\n<p>WordPress 5.8 brengt ook een aantal <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">verbeteringen voor het Table block<\/a>, waaronder meer controle over de <a href=\"https:\/\/kinqsta.com\/nl\/blog\/website-kleurenschema\/\">achtergrond- en voorgrondkleuren<\/a> van de tabel.<\/p>\n<figure id=\"attachment_98636\" aria-describedby=\"caption-attachment-98636\" style=\"width: 1618px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98636 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/table-block-color-settings.jpg\" alt=\"Verbeterde kleurinstellingen voor de Table block.\" width=\"1618\" height=\"1144\"><figcaption id=\"caption-attachment-98636\" class=\"wp-caption-text\">Verbeterde kleurinstellingen voor de Table block.<\/figcaption><\/figure>\n<p>Een andere toevoeging aan de Table block is <strong>ondersteuning voor de border block<\/strong>, waardoor je de kleur, stijl en dikte van randen kan instellen.<\/p>\n<p>Wanneer het actieve thema de nieuwe feature ondersteunt, biedt een nieuw paneel met <strong>instellingen voor randen<\/strong> die nieuwe instellingen voor aanpassingen.<\/p>\n<figure id=\"attachment_98672\" aria-describedby=\"caption-attachment-98672\" style=\"width: 1984px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98672 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/border-block-support.jpg\" alt=\"Border block instellingen in WordPress 5.8 en TT1 Blocks.\" width=\"1984\" height=\"1224\"><figcaption id=\"caption-attachment-98672\" class=\"wp-caption-text\">Border block instellingen in WordPress 5.8 en TT1 Blocks.<\/figcaption><\/figure>\n<p>Developers kunnen <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31265\">ondersteuning voor border blocks<\/a> bieden in hun thema&#8217;s door de volgende code toe te voegen aan het <strong>theme.json<\/strong> bestand:<\/p>\n<pre><code class=\"language-javascript\">\"border\": {\n\t\"customColor\": true,\n\t\"customStyle\": true,\n\t\"customWidth\": true\n}<\/code><\/pre>\n<h3>Verbeteringen van de Block Inserter<\/h3>\n<p>In WordPress 5.8, is de block inserter verbeterd met <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">diverse aanpassingen<\/a> (PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26938\">26938<\/a> en #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21080#issuecomment-649231549\">21080<\/a>):<\/p>\n<figure id=\"attachment_98593\" aria-describedby=\"caption-attachment-98593\" style=\"width: 1354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98593 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/block-inserter-keyboard-navigation.jpg\" alt=\"Door op de pijltjes te drukken verschuift de focus op de rij.\" width=\"1354\" height=\"840\"><figcaption id=\"caption-attachment-98593\" class=\"wp-caption-text\">Door op de pijltjes te drukken verschuift de focus op de rij.<\/figcaption><\/figure>\n<p><strong>1. Tweedimensionale toetsenbordnavigatie in de block inserter. <\/strong>We kunnen nu dus makkelijker en beter navigeren tussen blocks.<\/p>\n<ul>\n<li>Door op pijl omhoog (\u2191) en pijl omlaag (\u2193) te drukken, verschuift de focus een rij naar boven of beneden.<\/li>\n<li>Door op <strong>Tab<\/strong> en <strong>Shift + Tab<\/strong> te drukken kan je meteen naar de zoekbalk gaan, de tab-lijst of het eerste item in elke categorie.<\/li>\n<\/ul>\n<p><strong>2. Een nieuwe &#8220;Theme&#8221; categorie voor onderdelen en variaties voor templates <\/strong>verschijnt nu in de inserter in Full Site Editing (zie PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30020\">30020<\/a>).<\/p>\n<p><strong>3. Meerdere woorden in de autocomplete phrase matcher <\/strong>zijn nu toegestaan (zie PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29939\">29939<\/a>).<\/p>\n<h3>Overige verbeteringen in de Block Editor<\/h3>\n<p>WordPress 5.8 biedt nog allerlei andere kleinere en kleine verbeteringen die het noemen waard zijn. Zo zouden we de volgende verbeteringen willen benoemen:<\/p>\n<h4>Ondersteunen voor afbeeldingen verslepen in Cover blocks<\/h4>\n<p>Je kan nu afbeeldingen vanaf je computer verslepen om de achtergrond van een cover block te wijzigen (zie Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a> en PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29813\">29813<\/a>).<\/p>\n<figure id=\"attachment_98598\" aria-describedby=\"caption-attachment-98598\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98598 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/drag-and-drop-cover-background-image.gif\" alt=\"Verslepen van achtergrondafbeeldingen in het cover block.\" width=\"558\" height=\"338\"><figcaption id=\"caption-attachment-98598\" class=\"wp-caption-text\">Verslepen van achtergrondafbeeldingen in het cover block.<\/figcaption><\/figure>\n<h4>Verbeterde gebruikersinterface bij publicatie<\/h4>\n<p>Sinds WordPress 5.8 toont de UI bij publicatie het icoon en de titel van de site om duidelijk te maken waar je de artikelen of pagina&#8217;s naartoe publiceert (<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">Gutenberg 10.4<\/a>).<\/p>\n<figure id=\"attachment_98620\" aria-describedby=\"caption-attachment-98620\" style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98620 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-57.png\" alt=\"UI voor publicatie in WordPress 5.7.\" width=\"562\" height=\"730\"><figcaption id=\"caption-attachment-98620\" class=\"wp-caption-text\">UI voor publicatie in WordPress 5.7.<\/figcaption><\/figure>\n<figure id=\"attachment_98621\" aria-describedby=\"caption-attachment-98621\" style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98621 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-58.png\" alt=\"UI voor publicatie in WordPress 5.8.\" width=\"562\" height=\"730\"><figcaption id=\"caption-attachment-98621\" class=\"wp-caption-text\">UI voor publicatie in WordPress 5.8.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30231\">Deze vebetering<\/a> is ideaal als je in full-screen modus zit of op een mobiel apparaat.<\/p>\n<h2>Block instellingen en stijlen met theme.json<\/h2>\n<p>Bij WordPress 5.8, is <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">het <strong>theme.json<\/strong> bestand<\/a> een centraal punt voor configuratie geworden, wat een nieuwe manier biedt voor themadevelopers om de editor instellingen en stijlen te customizen.<\/p>\n<p>Via het <strong>theme.json<\/strong> bestand kunnen thema&#8217;s custom presets of ondersteuning voor nieuwe features bieden, zoals duotone en randen bij tabellen (zoals bij <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Algemene instellingen en stijlen<\/a>).<\/p>\n<p>Volgens <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">Andr\u00e9 Maneiro<\/a>:<\/p>\n<blockquote><p>Het nieuwe mechanisme moet alle vorige calls naar <code>add_theme_support<\/code> overnemen en consolideren, die eerst nodig waren voor de editor.<\/p><\/blockquote>\n<p>Je kan voortaan een algemene custom duotone preset instellen met de volgende code:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [ \"#000\", \"#0FF\" ],\n\t\t\t\t\t\"slug\": \"black-cyan\",\n\t\t\t\t\t\"name\": \"Black Cyan\"\n\t\t\t\t}\n\t\t\t],<\/code><\/pre>\n<p>Hiermee worden alle standaard presets overschreven, en zie je nog maar \u00e9\u00e9n duotone optie:<\/p>\n<figure id=\"attachment_99016\" aria-describedby=\"caption-attachment-99016\" style=\"width: 1264px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99016 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/custom-duotone-preset.jpg\" alt=\"Custom duotone preset in theme.json.\" width=\"1264\" height=\"802\"><figcaption id=\"caption-attachment-99016\" class=\"wp-caption-text\">Custom duotone preset in theme.json.<\/figcaption><\/figure>\n<p>Dit nieuwe mechanisme biedt een manier om instellingen zowel algemene als per-block te bepalen. Zo kan je bijvoorbeeld een custom 12px lettertypegrootte algemeen beschikbaar maken door de volgende preset toe te voegen aan je <strong>theme.json<\/strong> bestand:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"customLineHeight\": true,\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t},\n\t\t\t\t{...}<\/code><\/pre>\n<p>Hierdoor wordt een nieuwe grootte voor lettertypen beschikbaar die gebruikers bij <em>alle<\/em> tekst in hun content kunnen toepassen.<\/p>\n<figure id=\"attachment_99017\" aria-describedby=\"caption-attachment-99017\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99017 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/extra-extra-small-font-size-settings.png\" alt=\"Een algemeen gedefinieerd custom fontgrootte in theme.json.\" width=\"560\" height=\"754\"><figcaption id=\"caption-attachment-99017\" class=\"wp-caption-text\">Een algemeen gedefinieerd custom fontgrootte in theme.json.<\/figcaption><\/figure>\n<p>Wil je alleen de paragraph block aanpassen, dan is je code net wat anders:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSizes\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-small\",\n\t\t\t\t\t\t\t\"size\": \"16px\",\n\t\t\t\t\t\t\t\"name\": \"Extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"small\",\n\t\t\t\t\t\t\t\"size\": \"18px\",\n\t\t\t\t\t\t\t\"name\": \"Small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"normal\",\n\t\t\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\t\t\"name\": \"Normal\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"large\",\n\t\t\t\t\t\t\t\"size\": \"24px\",\n\t\t\t\t\t\t\t\"name\": \"Large\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>En klaar alweer. Je hebt nu een nieuwe grootte voor lettertypen toegevoegd aan het paragraph block.<\/p>\n<figure id=\"attachment_99018\" aria-describedby=\"caption-attachment-99018\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99018 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/paragraph-block-custom-settings.png\" alt=\"Een paragraph block met custom presets voor groottes.\" width=\"558\" height=\"1216\"><figcaption id=\"caption-attachment-99018\" class=\"wp-caption-text\">Een paragraph block met custom presets voor groottes.<\/figcaption><\/figure>\n<p>Core blocks zijn ook aangepast om het nieuwe mechanisme te kunnen volgen, terwijl externe blocks het nieuwe mechanisme kunnen volgen via de React <code>useSetting<\/code> hook (lees meer over deze optie in de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">dev-note<\/a> en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-editor\/#useSetting\">API documentatie<\/a>):<\/p>\n<pre><code class=\"language-javascript\">const isEnabled = useSetting( 'spacing.margin' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De instellingen uit <strong>theme.json<\/strong> staan boven instellingen die bepaald worden via <code>add_theme_support<\/code>.<\/p>\n<\/aside>\n\n<p>Het nieuwe mechanisme via het <strong>theme.json<\/strong> bestand is niet alleen van toepassing op instellingen voor blocks. Vanaf WordPress 5.8 is het zelfs niet langer nodig om editor styles te maken en in de rij te plaatsen. Je kan gewoon presets defini\u00ebren in het <strong>theme.json<\/strong> bestand en de engine zal automatisch classes aanmaken en in de rij plaatsen voor zowel de editor als de frontend.<\/p>\n<p>De engine zal ook de corresponderende <a href=\"https:\/\/kinqsta.com\/nl\/blog\/twenty-twenty-one-thema\/#styles-and-css-custom-properties\">CSS Custom Properties<\/a> genereren.<\/p>\n<p>In het vorige voorbeeld hadden we vijf <code>fontSizes<\/code> presets aangemaakt voor het paragraph block. Voor die presets zullen automatisch de volgende CSS Custom Properties aangemaakt worden:<\/p>\n<pre><code class=\"language-css\">p {\n\t--wp--preset--font-size--extra-extra-small: 12px;\n\t--wp--preset--font-size--extra-small: 16px;\n\t--wp--preset--font-size--small: 18px;\n\t--wp--preset--font-size--normal: 20px;\n\t--wp--preset--font-size--large: 24px;\n}<\/code><\/pre>\n<p>Nadat je de grootte voor lettertypen in de alinea hebt ingesteld via het <strong>theme.json<\/strong> bestand, zal het corresponderende p element de <code>has-{preset-slug}-{preset-category}<\/code> class krijgen.<\/p>\n<p>Dat betekent dat een alinea die de grootte <code>extra-extra-small<\/code> heeft, ook de class <code>has-extra-extra-small-font-size<\/code> krijgt:<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"has-extra-extra-small-font-size\"&gt;Lorem ipsum dolor...&lt;\/p&gt;<\/code><\/pre>\n<p>En dit is het CSS declaration block:<\/p>\n<pre><code class=\"language-css\">p.has-extra-extra-small-font-size {\n\tfont-size: var(--wp--preset--font-size--extra-extra-small) !important;\n}<\/code><\/pre>\n<p>Voor meer details over de instellingen en stijlen via <strong>theme.json<\/strong>, lees vooral de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">dev-note<\/a> en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">API documentatie<\/a> eens door.<\/p>\n<p>Kijk ook naar de <a href=\"https:\/\/make.wordpress.org\/test\/2021\/06\/24\/call-for-testing-thrive-with-theme-json\/\">FSE call for testing<\/a> van Anne McCarty voor meer inzichten en interessante uitdagingen voor developers die de nieuwe features van <strong>theme.json<\/strong> willen uittesten.<\/p>\n<h2>Block API verbeteringen<\/h2>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Block API verbeteringen<\/a> in WordPress 5.8 verdienen extra aandacht van plugindevelopers.<\/p>\n<p>Het gebruik van het <strong>block.json<\/strong> wordt nu aangemoedigd als de standaardmanier om <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\">block types te registreren<\/a>, en dat biedt ook diverse voordelen:<\/p>\n<ul>\n<li>Qua prestaties, als het thema ondersteuning biedt voor <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-lazyload\/\">lazy loading<\/a>, dan zal het registreren van block types via <strong>json<\/strong> automatisch het laden van de resources optimaliseren. Dit komt doordat de resources die gespecificeerd zijn via de eigenschappen <code>style<\/code> en <code>script<\/code> alleen geladen worden op de frontend wanneer het block wordt gedetecteerd. Hierdoor kan je effici\u00ebntere plugins maken, de grootte van pagina&#8217;s verminderen, en verschillende problemen voorkomen die <a href=\"https:\/\/kinqsta.com\/nl\/blog\/uitschakelen-laden-wordpress-plugins\/\">hier beschreven worden<\/a>.<\/li>\n<li>Het <strong>json<\/strong> bestand vereenvoudigt de server-side block registratie door de <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/block-types\/\">Block Types<\/a> <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\">REST API Endpoint<\/a> toe te staan voor registratie van blocks.<\/li>\n<li>Het <strong>json<\/strong> bestand is ook nodig als je besluit om je block plugin in de WordPress Plugin Directory op te laten nemen.<\/li>\n<\/ul>\n<h3>Veranderingen in de register_block_type functie<\/h3>\n<p>Sinds WordPress 5.8 is de <code>register_block_type<\/code> functie verbeterd, zodat de metadata uit het <strong>block.json<\/strong> bestand gelezen kan worden. De <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\">eerste parameter<\/a> accepteert nu het bestandspad voor het <strong>block.json<\/strong> bestand.<\/p>\n<p>De functie kan zo gebruikt worden:<\/p>\n<pre><code class=\"language-php\">function create_custom_block_init() {\n\tregister_block_type( __DIR__ );\n}\nadd_action( 'init', 'create_custom_block_init' );<\/code><\/pre>\n<p>Hierdoor wordt het geregistreerde block type teruggestuurd, of <code>false<\/code> als het mislukt.<\/p>\n<p>Zoals je wellicht opgevallen is, wordt de functie <code>register_block_type<\/code> nu op dezelfde manier gebruikt als de functie <code>register_block_type_from_metadata<\/code> wat vroeger de enige functie was waarmee <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type_from_metadata\/\">je een block type kon registreren<\/a> door de metadata uit het bestand <strong>block.json<\/strong> te lezen. Zoals <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Greg Zi\u00f3\u0142kowski<\/a> het uitlegt:<\/p>\n<blockquote><p>We hebben besloten om de bestaande functionaliteit van de <code>register_block_type_from_metadata<\/code> methode te consolideren naar <code>register_block_type<\/code> om de bestaande verwarring te verminderen. Je kan nog steeds beide functies gebruiken, maar we zijn van plan om voortaan alleen de kortere versies in alle offici\u00eble documenten en tools te gebruiken.<\/p><\/blockquote>\n<p>Zodra het block geregistreerd is op de server, hoef je alleen maar de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\">instellingen te registreren<\/a> van de client via dezelfde blocknaam in je <strong>index.js<\/strong> bestand.<\/p>\n<p>Voor meer details over block API verbeteringen in WordPress 5.8, kan je de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">dev-note van Greg Zi\u00f3\u0142kowski<\/a> lezen.<\/p>\n<h2>WebP ondersteuning in WordPress 5.8<\/h2>\n<p>Hier bij Kinsta hebben we een lichte obsessie voor snelheid en prestaties van WordPress websites. Daarom vinden we de ondersteuning van het <a href=\"https:\/\/kinqsta.com\/nl\/blog\/webp\/\">WebP<\/a> format in WordPress 5.8 erg interessant.<\/p>\n<p>WebP wordt namelijk als een <a href=\"https:\/\/web.dev\/uses-webp-images\/\">next-gen format<\/a> gezien, als een <a href=\"https:\/\/kinqsta.com\/nl\/blog\/bestandstypen-afbeeldingen\/\">afbeeldingsformat<\/a> dat door Google ontwikkeld is om meer compressie te bieden dan PNG en JPEG, en dus snellere downloads en minder dataverbruik.<\/p>\n<figure id=\"attachment_98615\" aria-describedby=\"caption-attachment-98615\" style=\"width: 1406px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98615 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/next-gen-image-formats-lighthouse.png\" alt=\"Google Lighthouse raadt aan om next-gen afbeeldingsformats te gebruiken.\" width=\"1406\" height=\"338\"><figcaption id=\"caption-attachment-98615\" class=\"wp-caption-text\">Google Lighthouse raadt aan om next-gen afbeeldingsformats te gebruiken.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developers.google.com\/speed\/webp\" target=\"_blank\" rel=\"noopener noreferrer\">Volgens Google<\/a>:<\/p>\n<blockquote><p>WebP is een modern <strong>afbeeldingsformat<\/strong> met superieure <strong>lossless en lossy<\/strong> compressie voor afbeeldingen op het web. Door WebP kunnen webmasters en webdevelopers kleinere, rijkere afbeeldingen maken waardoor het internet sneller wordt.<\/p>\n<p>WebP lossless afbeeldingen zijn 26% kleiner dan dezelfde afbeelding in PNG. WebP lossy afbeeldingen zijn 25-34% kleiner dan vergelijkbare <a href=\"https:\/\/kinqsta.com\/nl\/blog\/jpg-vs-jpeg\/\">JPEG afbeeldingen<\/a>, met een vergelijkbare SSIM kwaliteitsindex.<\/p><\/blockquote>\n<p>Vanaf WordPress 5.8 kan je het WebP afbeeldingsformat op dezelfde manier gebruiken als de bestaande JPEG, PNG en GIF formats. Je kan dus gewoon je afbeeldingen uploaden naar de <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-mediabibliotheek\/\">Media Library<\/a> en ze opnemen in je content.<\/p>\n<p>In een <a href=\"https:\/\/kinqsta.com\/nl\/blog\/webp\/\">vorig artikel<\/a> hebben we in detail gekeken naar het WebP format en de tools waarmee je dit binnen WordPress kan gebruiken. Dankzij de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">ondersteuning voor WebP afbeelding in WordPress 5.8<\/a> zal dit wat veranderen. Aangezien WebP voortaan standaard wordt ondersteund, heb je geen extra plugins meer nodig om de WebP afbeelding naar WordPress te kunnen uploaden, in ieder geval niet voor standaardtoepassingen.<\/p>\n<p>Je kan trouwens, ondanks de mogelijkheid voor het uploaden van WebP afbeeldingen naar je Media Library, nog niet automatisch afbeeldingen omzetten naar het WebP format. Om dat toch te kunnen doen op je website, heb je dus nog steeds een externe <a href=\"https:\/\/kinqsta.com\/nl\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">WebP WordPress plugin<\/a> nodig.<\/p>\n<h3>Zo gebruik je WebP afbeeldingen bij WordPress<\/h3>\n<p>Je kan je afbeeldingen op verschillende manieren omzetten naar WebP:<\/p>\n<ul>\n<li>Je kan de <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled\">geprecompileerde WebP tools en library<\/a> van Google gebruiken voor Linux, Windows, of Mac OS X.<\/li>\n<li>Mac gebruikers kunnen een <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled#os_x_package_managers\">package manager<\/a> installeren, zoals de <a href=\"https:\/\/formulae.brew.sh\/formula\/webp\">Homebrew WebP package<\/a> of het <a href=\"https:\/\/ports.macports.org\/?search=webp&#038;search_by=name\">Macports WebP package<\/a>.<\/li>\n<li>Je kan ook een afbeeldingsbewerkingstool gebruiken met ondersteuning voor WebP, zoals <a href=\"https:\/\/squoosh.app\/\">Squoosh<\/a> van <a href=\"https:\/\/github.com\/GoogleChromeLabs\/squoosh\">Google Chrome Labs<\/a>, de batch image converter <a href=\"https:\/\/www.xnview.com\/en\/xnconvert\/\">XnConvert<\/a>, of een populaire afbeeldingseditor zoals <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>.<\/li>\n<li>Je kan ook een <a href=\"https:\/\/kinqsta.com\/nl\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">WebP WordPress plugin<\/a> installeren voor meer controle over je WebP afbeeldingen in WordPress.<\/li>\n<\/ul>\n<figure id=\"attachment_98680\" aria-describedby=\"caption-attachment-98680\" style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98680 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/webp-export-settings-gimp.jpg\" alt=\"Exporteren van afbeeldingen als WebP in GIMP.\" width=\"582\" height=\"596\"><figcaption id=\"caption-attachment-98680\" class=\"wp-caption-text\">Exporteren van afbeeldingen als WebP in GIMP.<\/figcaption><\/figure>\n<p>Als je kiest voor een command-line tool, dan kan je afbeeldingen encoden en decoden via <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\">cwebp<\/a> en <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/dwebp\">dwebp<\/a>. Het volgende commando voert bijvoorbeeld een standaard JPEG naar WebP conversie uit:<\/p>\n<pre><code class=\"language-bash\">cwebp [options] original_image.jpg -o compressed_image.webp<\/code><\/pre>\n<p>Je kan ook in bulk conversies van je afbeeldingen doen via Bash en cwebp (voorbeeld van <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\">Jeremy Wagner<\/a>):<\/p>\n<pre><code class=\"language-bash\">find .\/ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o \"${1%.png}.webp\"' _ {} \\;\n<\/code><\/pre>\n<p>Bovenstaande opdracht zet alle <strong>.png<\/strong> afbeeldingen om naar het <strong>.webp<\/strong> format, met een compressiefactor van 75.<\/p>\n<figure id=\"attachment_98677\" aria-describedby=\"caption-attachment-98677\" style=\"width: 1269px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98677 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/webp-quality-vs-file-size.jpg\" alt=\"Vergelijking van bestandsgrootte en compressiefactoren.\" width=\"1269\" height=\"870\"><figcaption id=\"caption-attachment-98677\" class=\"wp-caption-text\">Vergelijking van bestandsgrootte en compressiefactoren.<\/figcaption><\/figure>\n<p>Nadat je de WebP afbeeldingen hebt, kan je ze voortaan dus gewoon uploaden naar de WordPress <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-mediabibliotheek\/\">Media Library<\/a>. Hieronder zie je een 127 KB JPEG afbeelding voor de conversie, in de Media Library:<\/p>\n<figure id=\"attachment_98611\" aria-describedby=\"caption-attachment-98611\" style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98611 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/jpeg-image.jpg\" alt=\"De gecomprimeerde JPEG grootte is 127 KB.\" width=\"1960\" height=\"1280\"><figcaption id=\"caption-attachment-98611\" class=\"wp-caption-text\">De gecomprimeerde JPEG grootte is 127 KB.<\/figcaption><\/figure>\n<p>De gecomprimeerde bestandsgrootte van de WebP afbeelding is nota bene 42% kleiner dan de originele JPEG afbeelding.<\/p>\n<figure id=\"attachment_98641\" aria-describedby=\"caption-attachment-98641\" style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98641 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/webp-image.jpg\" alt=\"Dezelfde afbeelding in WebP format is slechts 74KB.\" width=\"1960\" height=\"1280\"><figcaption id=\"caption-attachment-98641\" class=\"wp-caption-text\">Dezelfde afbeelding in WebP format is slechts 74KB.<\/figcaption><\/figure>\n<p>Als laatste bieden WebP afbeeldingen dezelfde bewerkingsfeatures als JPEG, PNG en GIF afbeeldingen. Je kan dus gewoon bijsnijden, draaien, spiegelen, en schalen, en veranderingen toepassen op de grootte van afbeeldingen.<\/p>\n<h3>Kanttekeningen bij WebP in WordPress 5.8<\/h3>\n<p>Volgens Adam Silverstein:<\/p>\n<blockquote><p>WebP afbeeldingen bieden ondersteuning voor lossy en lossless compressie, naast animaties en ondersteuning voor transparante afbeeldingen. In WordPress wordt het lossless WebP format alleen ondersteunt wanneer de hostingserver Imagick (de PHP library) gebruikt, totdat ook LibGD dit gaat ondersteunen. Daarnaast worden geanimeerde en transparante formats nog niet ondersteund voor resized afbeeldingen (dus wanneer je afbeeldingen uploadt in deze formats, worden er lossy afbeeldingen voor in de plaats gezet).<\/p><\/blockquote>\n<p>Als je webhost geen ondersteuning biedt voor WebP afbeeldingen, zal je ook een foutmelding zien wanneer je die probeert te uploaden. Weet je niet zeker of je webhost de Imagick library ondersteunt, dan bevat het Info tabblad van de Site Health tool een item dat je vertelt of er ondersteuning voor <strong>Imagick library<\/strong> is.<\/p>\n<figure id=\"attachment_99311\" aria-describedby=\"caption-attachment-99311\" style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99311 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/site-health-tool-1.jpg\" alt=\"Kinsta ondersteunt de Imagick library.\" width=\"1600\" height=\"1222\"><figcaption id=\"caption-attachment-99311\" class=\"wp-caption-text\">Kinsta ondersteunt de Imagick library.<\/figcaption><\/figure>\n<p>Met WebP ondersteuning introduceert WordPress 5.8 ook twee extra velden voor de Media Handling binnen Site Health: <strong>Imagick version<\/strong> en <strong>ImageMagick supported file formats<\/strong>.<\/p>\n<figure id=\"attachment_98634\" aria-describedby=\"caption-attachment-98634\" style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98634 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/site-health-media-handling.jpg\" alt=\"ImageMagick version veld in Site Heath.\" width=\"1600\" height=\"473\"><figcaption id=\"caption-attachment-98634\" class=\"wp-caption-text\">ImageMagick version veld in Site Heath.<\/figcaption><\/figure>\n<p>Als WebP niet bij de ondersteunde bestandstypen staat, zul je contact op moeten nemen met je webhost voor ondersteuning.<\/p>\n<p>De <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">dev-note<\/a> biedt <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/#comment-41376\">extra informatie<\/a> over WebP ondersteuning binnen WordPress 5.8, waaronder handige FAQ&#8217;s en andere zaken.<\/p>\n<p>Ben je ge\u00efnteresseerd in het optimaliseren van afbeeldingen, kijk dan ook eens naar deze tutorials:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinqsta.com\/nl\/blog\/afbeeldingen-optimaliseren-voor-internet\/\">Zo optimaliseer je afbeeldingen voor het internet en snelheid<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/blog\/lossy-compression\/\">Waarom en hoe je lossy compressie gebruikt voor je WordPress afbeeldingen<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/nl\/blog\/webp\/\">Zo gebruik je WebP afbeeldingen in WordPress (en verklein je de grootte van afbeeldingen tot 35%<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/nl\/blog\/bestandstypen-afbeeldingen\/\">15 beste bestandstypes voor afbeeldingen<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/nl\/blog\/afmetingen-van-afbeeldingen-in-wordpress\/\">Alles wat je moet weten over afbeeldingsgroottes in WordPress<\/a><\/li>\n<\/ul>\n<h2>Overige features voor developers<\/h2>\n<p>Je vindt nog tientallen andere interessante features voor developers in WordPress 5.8. In dit artikel hebben we ons vooral gericht op de features die de meeste impact zullen hebben op je werk als developer. Maar er zijn nog allerlei andere nieuwe features die ook interessant zijn, zoals:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Block Supports API<\/h3>\n<p>WordPress 5.8 biedt <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">nieuwe block supports flags<\/a> waarmee developers geregistreerde blocks kunnen aanpassen met de nieuwste block features.<\/p>\n<p>Naast de experimentele <a href=\"#bookmark=id.1fob9te\">duotone block ondersteuning<\/a> die we al noemden (<code>color._experimentalDuotone<\/code>), biedt WordPress 5.8 ook ondersteuning voor kleur van links. Om deze feature te gebruiken, moet je de volgende flag toevoegen aan je block metadata:<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\tlink: true;\n\t}\n}<\/code><\/pre>\n<p>Je kan verschillende waarden instellen via attributen, zoals in onderstaande voorbeeld te zien, of je presets instellen via <em>theme.json<\/em>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tlink: '#FF0000',\n\t\t\t}\n\t\t}<\/code><\/pre>\n<p>Overige veranderingen in Block Supports API zijn bijvoorbeeld:<\/p>\n<ul>\n<li><code>fontSize<\/code> en <code>lineHeight<\/code> supports zijn nu stabiel.<\/li>\n<li>spacing ondersteuning is uitgebreid, en je kan nu <code>margin<\/code> en <code>padding<\/code> instellen, en individueel de grootte bepalen van <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code> en <code>left<\/code>.<\/li>\n<\/ul>\n<p>Je kan meer over de Block Supports API in WordPress 5.8 lezen in de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">Block Supports API updates<\/a> dev-note.<\/p>\n<p>Voor meer details over het gebruik van de Block Supports API, lees je de offici\u00eble documentatie van <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\">Block Supports API<\/a>.<\/p>\n<h3>Custom tabbladen in Site Health<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">Twee nieuwe hooks<\/a> maken het mogelijk dat developers hun eigen tabblad toevoegen aan de Site Health interface, en de reeds beschikbare schermen aanpassen.<\/p>\n<p>Het <code><strong>site_health_navigation_tabs<\/strong><\/code><strong> filter<\/strong> is een associatieve array van tab ID&#8217;s en labels, waarmee je een nieuw tabblad kan registreren binnen Site Health. Je kan het filter gebruiken door de volgende code toe te voegen aan het <a href=\"https:\/\/kinqsta.com\/nl\/blog\/hoe-je-je-wordpress-thema-kan-customizen\/#the-theme-editor-and-why-not-to-use-it\">functions bestand van je thema<\/a> of via een eigen plugin:<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_navigation_tabs( $tabs ) {\n\t$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );\n\n\treturn $tabs;\n}\nadd_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );<\/code><\/pre>\n<p>Onderstaande afbeelding toont het nieuwe Site Health tabblad:<\/p>\n<figure id=\"attachment_98633\" aria-describedby=\"caption-attachment-98633\" style=\"width: 1646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98633 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/06\/site-health-custom-tabs.png\" alt=\"Een custom tabblad in het navigatiemenu van Site Health.\" width=\"1646\" height=\"1068\"><figcaption id=\"caption-attachment-98633\" class=\"wp-caption-text\">Een custom tabblad in het navigatiemenu van Site Health.<\/figcaption><\/figure>\n<p>Dankzij het <code>site_health_navigation_tabs<\/code> filter, is het nu ook mogelijk om de tabs een andere volgorde te geven of te verwijderen.<\/p>\n<p>De <code><strong>site_health_tab_content<\/strong><\/code><strong> action<\/strong> wordt geactiveerd wanneer de gebruiker het Site Health scherm bezoekt, behalve bij het standaard <strong>Status<\/strong> scherm. Je kan deze hook gebruiken zoals in volgende stukje code (een voorbeeld uit de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">dev-note<\/a>):<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_tab_content( $tab ) {\n\t\/\/ Return if this is not your tab.\n\tif ( 'kinsta-site-health-tab' !== $tab ) {\n\t\treturn;\n\t}\n\n\t\/\/ Include the interface, kept in a separate file just to differentiate code from views.\n\tinclude trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views\/kinsta-site-health-tab.php';\n}\nadd_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );<\/code><\/pre>\n<p>Allereerst detecteert het of het huidige tabblad je custom tabblad is, en vervolgens wordt de content voor je Site Health scherm geladen uit een <strong>.php<\/strong> bestand. De <code>site_health_tab_content<\/code> action biedt developers ook de mogelijkheid om het standaard <strong>Info<\/strong> tabblad uit te breiden met bepaalde stukjes informatie over hun plugins of thema&#8217;s.<\/p>\n<h3>Block Editor API ondersteuning in meerdere admin schermen<\/h3>\n<p>In WordPress 5.8 is de artikel editor niet meer het enige admin scherm waarin de block editor gebruikt kan worden (zo is het widgets venster een goed voorbeeld).<\/p>\n<p>De core had diverse hooks die gedefinieerd zijn op de server en afhankelijk zijn van het <code>$post<\/code> object. Dit object is niet aanwezig in de schermen voor site edits, widgets en navigatie. Verder zijn diverse filters afgeschreven en vervangen door context-bewuste opvolgers.<\/p>\n<p>Ook is er een nieuwe <code>WP_Block_Editor_Context<\/code> class die de huidige context van de block editor vertegenwoordigt, en zijn er verschillende methods ge\u00efntroduceerd.<\/p>\n<p>Deze veranderingen verbeteren de schermen met nieuwe opties en bieden developers mogelijkheden voor nieuwe customizations.<\/p>\n<p>Voor een complete lijst met veranderingen in de Block Editor API in de admin schermen, zie de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/block-editor-api-changes-to-support-multiple-admin-screens-in-wp-5-8\/\">dev note<\/a> van Greg Zi\u00f3\u0142kowski.<\/p>\n<h3>Overige features en verbeteringen<\/h3>\n<p>Er zijn zoveel nieuwe features en veranderingen voor developers in WordPress 5.8, dat we ze nooit allemaal in \u00e9\u00e9n artikel kunnen behandelen. Daarom hebben we een lijst met dev-notes voor je verzameld, voor meer informatie:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/news\/2021\/05\/dropping-support-for-internet-explorer-11\/\">Geen support meer voor Internet Explorer 11<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/01\/block-styles-loading-enhancements-in-wordpress-5-8\/\">Block-styles loading verbeteringen in WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/blocks-in-an-iframed-template-editor\/\">Blocks in een iframed (template) editor<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/on-layout-and-content-width-in-wordpress-5-8\/\">Layout en content breedte in WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/introducing-update-uri-plugin-header-in-wordpress-5-8\/\">Introductie \u201cUpdate URI\u201d pluginheader in WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-editor-api-removals-58\/\">Verscheidene Block Editor API removals in WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/rest-api-changes-in-wordpress-5-8\/\">REST API wijzigingen in WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/28\/miscellaneous-developer-focused-changes-in-wordpress-5-8\/\">Verschillende op developers gerichte wijzigingen in WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/12\/miscellaneous-block-editor-api-additions-in-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">Diverse blockeditor API toevoegingen in WordPress 5.8<\/a><\/li>\n<\/ul>\n\n<h2>Samenvatting<\/h2>\n<p>WordPress 5.8 is een belangrijk mijlpaal onderweg naar Full Site Editing. Maar de tweede WordPress release van dit jaar heeft nog veel meer te bieden. Gebruikers en developers zullen ladingen verbeteringen vinden, onder meer in de block editor, het nieuwe <strong>theme.json<\/strong> mechanisme, een krachtiger Block API, ondersteuning voor WebP afbeeldingen, en nog veel meer.<\/p>\n<p>Wij zijn vooral erg enthousiast over alle verbeteringen in de block editor en de bijbehorende User Interface, zowel over de grote als de kleine aanpassingen. Het is erg fijn dat de navigatie tussen blocks is verbeterd, de gereorganiseerde block toolbar, het verbeterde overzicht van de interface, en de diverse verberingen in verschillende individuele blocks.<\/p>\n<p>Deze relatief kleine veranderingen vergemakkelijken het bewerken van sites, en haast zonder dat we het merken gebruiken we opeens betere en robuustere software. Dat is voor ons de essentie van <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wat-is-wordpress\/\">WordPress<\/a>!<\/p>\n<p><em>En nu jij. Wat denk je van Full Site Editing? En wat zijn jouw favoriete veranderingen in WordPress 5.8?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 5.8 &#8220;Tatum&#8221; is gearriveerd en het is een gedenkwaardige release Naast een groot aantal nieuwe features, verbeteringen en bugfixes, introduceert WP 5.8 een nieuwe manier &#8230;<\/p>\n","protected":false},"author":36,"featured_media":39119,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[75,28],"topic":[907],"class_list":["post-39117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cms","tag-wordpress","topic-wordpress-updates"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)<\/title>\n<meta name=\"description\" content=\"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)\" \/>\n<meta property=\"og:description\" content=\"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-22T12:41:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-23T08:27:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/NL-Homepage-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"43 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)\",\"datePublished\":\"2021-07-22T12:41:45+00:00\",\"dateModified\":\"2023-05-23T08:27:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\"},\"wordCount\":6984,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg\",\"keywords\":[\"CMS\",\"WordPress\"],\"articleSection\":[\"WordPress nieuws\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\",\"name\":\"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg\",\"datePublished\":\"2021-07-22T12:41:45+00:00\",\"dateModified\":\"2023-05-23T08:27:20+00:00\",\"description\":\"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress updates\",\"item\":\"https:\/\/kinqsta.com\/nl\/onderwerpen\/wordpress-updates\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)","description":"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/","og_locale":"nl_NL","og_type":"article","og_title":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)","og_description":"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!","og_url":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2021-07-22T12:41:45+00:00","article_modified_time":"2023-05-23T08:27:20+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/11\/NL-Homepage-featured-image.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!","twitter_image":"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"43 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)","datePublished":"2021-07-22T12:41:45+00:00","dateModified":"2023-05-23T08:27:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/"},"wordCount":6984,"commentCount":2,"publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg","keywords":["CMS","WordPress"],"articleSection":["WordPress nieuws"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/","url":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/","name":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg","datePublished":"2021-07-22T12:41:45+00:00","dateModified":"2023-05-23T08:27:20+00:00","description":"Bekijk onze gedetailleerde beoordelingen van WordPress 5.8 en ontdek alle grote nieuwe features in de nieuwste release (en dat zijn er veel)!","breadcrumb":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#primaryimage","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/wordpress-5.8.jpg","width":1460,"height":730,"caption":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/nl\/blog\/wordpress-5-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress updates","item":"https:\/\/kinqsta.com\/nl\/onderwerpen\/wordpress-updates\/"},{"@type":"ListItem","position":3,"name":"Wat is er nieuw in WordPress 5.8 (full-site editing, WebP afbeeldingen, algemene stijlen en instellingen en meer)"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/nl\/#website","url":"https:\/\/kinqsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinqsta.com\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/39117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/comments?post=39117"}],"version-history":[{"count":10,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/39117\/revisions"}],"predecessor-version":[{"id":49414,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/39117\/revisions\/49414"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/translations\/se"},{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39117\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media\/39119"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media?parent=39117"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/tags?post=39117"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/topic?post=39117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}