{"id":41803,"date":"2022-01-25T08:09:53","date_gmt":"2022-01-25T07:09:53","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=41803&#038;preview=true&#038;preview_id=41803"},"modified":"2024-02-20T15:02:53","modified_gmt":"2024-02-20T14:02:53","slug":"wordpress-5-9","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/","title":{"rendered":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#8217;s, UI verbeteringen en nog veel meer"},"content":{"rendered":"<p><a href=\"https:\/\/wordpress.org\/news\/2022\/01\/josephine\/\">WordPress 5.9 Josephine<\/a> is gearriveerd! De eerste WordPress versie van het jaar stond oorspronkelijk gepland voor 14 december 2021. Vanwege verschillende openstaande problemen en onopgeloste bugs was de definitieve <a href=\"https:\/\/make.wordpress.org\/core\/2021\/11\/22\/wordpress-5-9-revised-release-schedule\/\">release vertraagd<\/a> en is deze uiteindelijk uitgebracht op 25 januari 2022.<\/p>\n<p>Als je je afvraagt wat er nieuw is in WordPress 5.9, is het korte antwoord <strong>Full Site Editing<\/strong> (FSE).<\/p>\n<p>En inderdaad, veel features van 5.9 zijn alleen beschikbaar als je een thema gebruikt dat Full Site Editing ondersteunt, zoals het gloednieuwe standaardthema <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/\">Twenty Twenty-Two<\/a>.<\/p>\n<figure id=\"attachment_110731\" aria-describedby=\"caption-attachment-110731\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2.jpg\" alt=\"Een voorbeeld van Twenty Twenty-Two, het nieuwe standaard WordPress thema\" width=\"2560\" height=\"1752\"><figcaption id=\"caption-attachment-110731\" class=\"wp-caption-text\">Een voorbeeld van Twenty Twenty-Two, het nieuwe standaard WordPress thema (Bron afbeelding: <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">WordPress.org<\/a>)<\/figcaption><\/figure>\n<p>Met WordPress 5.9 zijn we aanbeland bij de kern van de tweede fase van de <a href=\"https:\/\/wordpress.org\/about\/roadmap\/\">Gutenberg roadmap<\/a>: de <strong>Customization fase<\/strong>, die vooral gericht is op Full Site Editing, blokpatronen, blokdirectory en op blokken gebaseerde thema&#8217;s.<\/p>\n<blockquote><p><em>Met 5.9, dat volgende maand uitkomt, zijn we \u2013 maar mijn mening \u2013 aanbeland bij de MVP, het Minimum Viable Product van deze Customization fase van Gutenberg.<\/em><\/p><\/blockquote>\n<p>Deze woorden van Matt Mullenweg in <a href=\"https:\/\/wordpress.tv\/2021\/12\/15\/matt-mullenweg-2021-state-of-the-word\/\">2021 State of the Word<\/a> vatten de belangrijkste features van de nieuwe WordPress release het beste samen.<\/p>\n<figure id=\"attachment_113486\" aria-describedby=\"caption-attachment-113486\" style=\"width: 1940px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113486 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/gutenberg-roadmap-2.jpg\" alt=\"De Gutenberg roadmap\" width=\"1940\" height=\"1120\"><figcaption id=\"caption-attachment-113486\" class=\"wp-caption-text\">De Gutenberg roadmap. (Bron afbeelding: <a href=\"https:\/\/wordpress.tv\/2021\/12\/15\/matt-mullenweg-2021-state-of-the-word\/\">Matt Mullenweg: 2021 State of the Word<\/a>)<\/figcaption><\/figure>\n<p>Dat gezegd hebbende, wat is er nieuw in deze eerste WordPress release van 2022?<\/p>\n<p>Laten we daar snel achter komen!<\/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<h2>Global Styles: een grafische interface voor theme.json<\/h2>\n<p>Met de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">release van WordPress 5.8<\/a> in 2021 werd het manipuleren van het <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/\">theme.json<\/a> bestand de standaardmanier voor themaontwikkelaars om editorinstellingen en stijlen aan te passen.<\/p>\n<p>WordPress 5.9 tilt de zaken naar een hoger niveau door een grafische interface te introduceren waarmee gebruikers <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/#twenty-twentytwo-at-its-core-a-quick-overview-of-themejson\">style presets<\/a> voor hun websites kunnen aanpassen, zowel globaal als op blokniveau, zonder een enkele regel code te hoeven schrijven.<\/p>\n<p>Het Global Styles mechanisme zou de manier waarop je gewend bent om het uiterlijk van je websites aan te passen aanzienlijk moeten veranderen, aangezien <a href=\"https:\/\/learn.wordpress.org\/tutorial\/how-to-style-your-site-with-global-styles\/\">Global Styles<\/a> van invloed zijn op verschillende aspecten van het ontwerp van WordPress sites.<\/p>\n<p>Ten eerste vervangt de Global Styles interface de <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoe-je-je-wordpress-thema-kan-customizen\/#customizing-your-theme-via-the-customizer\">Customizer<\/a> en is nu de enige manier om instellingen en stijlen aan te passen binnen blokthema&#8217;s. Ook zijn complexe beheerpagina&#8217;s voor thema opties niet langer nodig. Dit biedt een nieuwe standaardmanier voor het configureren van thema-instellingen en stijlen en moet tegelijkertijd de workflow voor themaontwikkeling stroomlijnen.<\/p>\n<p>Met Global Styles krijgen WordPress gebruikers meer controle over de presentatie van hun websites, zowel globaal als per bloktype, buiten de context van individuele pagina&#8217;s of berichten.<\/p>\n<p>Er is nu een nieuwe zijbalk beschikbaar in de site-editor, met bovenaan een klein previewvenster en vier componenten in de volgende volgorde:<\/p>\n<ul>\n<li><a href=\"#typography\">Typography<\/a><\/li>\n<li><a href=\"#colors\">Colors<\/a><\/li>\n<li><a href=\"#layout\">Layout<\/a><\/li>\n<li><a href=\"#blocks\">Blocks<\/a><\/li>\n<\/ul>\n<p>We kunnen verwachten dat er <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">in de loop van de tijd<\/a> nieuwe componenten zullen worden toegevoegd.<\/p>\n<figure id=\"attachment_112441\" aria-describedby=\"caption-attachment-112441\" style=\"width: 1962px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112441 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/global-styles-sidebar.jpg\" alt=\" De Global Styles zijbalk met het Blockbase thema van Automattic.\" width=\"1962\" height=\"1290\"><figcaption id=\"caption-attachment-112441\" class=\"wp-caption-text\">De Global Styles zijbalk met het <a href=\"https:\/\/wordpress.org\/themes\/blockbase\/\">Blockbase thema<\/a> van Automattic.<\/figcaption><\/figure>\n<p>Laten we de nieuwe interface eens beter bekijken.<\/p>\n\n<h3>Style Preview<\/h3>\n<p>Het eerste element in de Global Styles zijbalk is een preview-venster. Met dit venster kun je het resultaat van je aanpassingen controleren en dit is met name handig wanneer je wijzigingen van toepassing zijn op elementen die niet zichtbaar zijn in het canvas van de site-editor.<\/p>\n<p>De volgende afbeelding toont een vergelijking van drie verschillende stijlcombinaties:<\/p>\n<figure id=\"attachment_112425\" aria-describedby=\"caption-attachment-112425\" style=\"width: 1826px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112425 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/global-styles-preview.jpg\" alt=\" Global Styles previews vergeleken.\" width=\"1826\" height=\"1230\"><figcaption id=\"caption-attachment-112425\" class=\"wp-caption-text\">Global Styles previews vergeleken.<\/figcaption><\/figure>\n<h3>Typography<\/h3>\n<p>In het Typography venster bepaal je de typografie van je website. De beschikbare controls in dit venster zijn natuurlijk afhankelijk van je <strong>theme.json<\/strong> instellingen.<\/p>\n<p>Het thema <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\">Twenty Twenty-One Blocks<\/a> (TT1 Blocks) declaret bijvoorbeeld de volgende typografische eigenschappen:<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n\t\"typography\": {\n\t\t\"customLineHeight\": true,\n\t\t\"fontSizes\": [],\n\t\t\"fontFamilies\": []\n\t}\n}<\/code><\/pre>\n<p>De volgende afbeelding toont de resulterende Typography instellingen in de Global Styles zijbalk:<\/p>\n<figure id=\"attachment_112443\" aria-describedby=\"caption-attachment-112443\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112443 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt1b-typography-settings.jpg\" alt=\" Typografie instellingen in TT1 Blocks Global Styles.\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-112443\" class=\"wp-caption-text\">Typografie instellingen in TT1 Blocks Global Styles.<\/figcaption><\/figure>\n<p>Laten we hier eens beter naar kijken en bekijken hoe het TTI Blocks thema <code>fontFamilies<\/code> declaret:<\/p>\n<pre><code class=\"language-json\">\"fontFamilies\": [\n\t{\n\t\t\"fontFamily\": \"-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\\"Helvetica Neue\\\",sans-serif\",\n\t\t\"slug\": \"system-font\",\n\t\t\"name\": \"System Font\"\n\t},\n\t{\n\t\t\"fontFamily\": \"Helvetica Neue, Helvetica, Arial, sans-serif\",\n\t\t\"slug\": \"helvetica-arial\"\n\t},\n\t{\n\t\t\"fontFamily\": \"Geneva, Tahoma, Verdana, sans-serif\",\n\t\t\"slug\": \"geneva-verdana\"\n\t},\n\t{\n\t\t\"fontFamily\": \"Cambria, Georgia, serif\",\n\t\t\"slug\": \"cambria-georgia\"\n\t},\n\t{\n\t\t\"fontFamily\": \"Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif\",\n\t\t\"slug\": \"hoefler-times-new-roman\"\n\t}\n]<\/code><\/pre>\n<p>Je kunt deze fontfamilies controleren in het Global Styles previewpaneel:<\/p>\n<figure id=\"attachment_112427\" aria-describedby=\"caption-attachment-112427\" style=\"width: 1682px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112427 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt1b-font-preview.jpg\" alt=\" Fontfamilies in Twenty Twenty-One Blocks.\" width=\"1682\" height=\"804\"><figcaption id=\"caption-attachment-112427\" class=\"wp-caption-text\">Fontfamilies in Twenty Twenty-One Blocks.<\/figcaption><\/figure>\n<h3>Colors<\/h3>\n<p>In de Colors sectie kun je kleurenpaletten bekijken en bewerken en de kleur van verschillende site-elementen aanpassen.<\/p>\n<figure id=\"attachment_112428\" aria-describedby=\"caption-attachment-112428\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112428 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/colors-panel-in-tt1b.jpg\" alt=\" Kleurenpaneel in Twenty Twenty-One Blocks\" width=\"1522\" height=\"1348\"><figcaption id=\"caption-attachment-112428\" class=\"wp-caption-text\">Kleurenpaneel in Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Door op die elementen te klikken, krijg je toegang tot een nieuw venster waar je kleuren kunt kiezen uit drie kleurenpaletten: Core, Theme, en Custom palet (lees meer in <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/29568\">Standaardkleuren, Themakleuren en Aangepaste kleuren<\/a>).<\/p>\n<figure id=\"attachment_112445\" aria-describedby=\"caption-attachment-112445\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112445 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt1b-color-settings.jpg\" alt=\" Kleurinstellingen in Twenty Twenty-One Blocks\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-112445\" class=\"wp-caption-text\">Kleurinstellingen in Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>In dit venster kun je de kleur voor het huidige element instellen en wijzigen.<\/p>\n<figure id=\"attachment_112430\" aria-describedby=\"caption-attachment-112430\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112430 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/color-picker-1.jpg\" alt=\" Linkkleur aanpassen in Global Styles.\" width=\"1522\" height=\"1286\"><figcaption id=\"caption-attachment-112430\" class=\"wp-caption-text\">Linkkleur aanpassen in Global Styles.<\/figcaption><\/figure>\n<h3>Layout<\/h3>\n<p>De laatste groep tools is bedoeld voor lay-outaanpassingen. In de globale context is dit beperkt tot de sitecontainer.<\/p>\n<figure id=\"attachment_112431\" aria-describedby=\"caption-attachment-112431\" style=\"width: 2404px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112431 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/global-padding-setting.jpg\" alt=\"Lay-outinstellingen in Twenty Twenty-One Blocks\" width=\"2404\" height=\"1350\"><figcaption id=\"caption-attachment-112431\" class=\"wp-caption-text\">Lay-outinstellingen in Twenty Twenty-One Blocks.<\/figcaption><\/figure>\n<h3>Blokken<\/h3>\n<p>Met de implementatie van het Global Styles mechanisme is het nu ook mogelijk om het uiterlijk van specifieke blokken te wijzigen, zoals Paragraph (typografie en kleuren), Buttons (lay-out) en Column (kleuren en lay-out).<\/p>\n<p>Merk op dat<strong> blokstijlen alleen kunnen worden aangepast vanuit de Global Styles interface als het blok ondersteuning voor specifieke functionaliteit <\/strong>in het bijbehorende<strong> block.json <\/strong>bestand aangeeft. Het <code>core\/post-title<\/code> blok ondersteunt bijvoorbeeld momenteel de volgende stijlen:<\/p>\n<pre><code class=\"language-json\">\"supports\": {\n\t\"align\": [ \"wide\", \"full\" ],\n\t\"html\": false,\n\t\"color\": {\n\t\t\"gradients\": true,\n\t\t\"link\": true\n\t},\n\t\"spacing\": {\n\t\t\"margin\": true\n\t},\n\t\"typography\": {\n\t\t\"fontSize\": true,\n\t\t\"lineHeight\": true,\n\t\t\"__experimentalFontFamily\": true,\n\t\t\"__experimentalFontWeight\": true,\n\t\t\"__experimentalFontStyle\": true,\n\t\t\"__experimentalTextTransform\": true,\n\t\t\"__experimentalLetterSpacing\": true,\n\t\t\"__experimentalDefaultControls\": {\n\t\t\t\"fontSize\": true,\n\t\t\t\"fontAppearance\": true,\n\t\t\t\"textTransform\": true\n\t\t}\n\t}\n},<\/code><\/pre>\n<p>Aangezien het <code>core\/post-title<\/code> blok kleuren, spacing en typografie ondersteunt, vind je de overeenkomstige vermeldingen in de instellingen voor Global Styles van het Post Title blok.<\/p>\n<p>De volgende afbeelding toont typografische instellingen, die je eenvoudig kunt vergelijken met de bovenstaande code:<\/p>\n<figure id=\"attachment_112449\" aria-describedby=\"caption-attachment-112449\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112449 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/post-tytle-typography-settings.jpg\" alt=\" Typografie-instellingen voor Post Title aanpassen\" width=\"1790\" height=\"1308\"><figcaption id=\"caption-attachment-112449\" class=\"wp-caption-text\">Typografie-instellingen voor Post Title aanpassen<\/figcaption><\/figure>\n<p>Het is vermeldenswaard dat WordPress 5.9 alleen de eerste implementatie van de Global Styles interface levert. Zoals <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">Matias Ventura aangeeft<\/a>, kunnen we redelijkerwijs een verdere ontwikkeling van de nieuwe stijlcontrolefeature verwachten:<\/p>\n<blockquote><p>In de toekomst zullen er flows in het systeem worden ingebouwd, zodat je van Local Syles naar globaal kunt gaan &#8211; zoals het maken van aanpassingen aan een Button blok en ervoor kiezen om ze globaal toe te passen op alle knoppen van dat type.<\/p><\/blockquote>\n<p>Dus we kunnen binnenkort verdere grote verbeteringen zien. De afbeelding hieronder is slechts een voorbeeld van wat we zouden kunnen verwachten:<\/p>\n<figure id=\"attachment_112432\" aria-describedby=\"caption-attachment-112432\" style=\"width: 1586px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112432 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/link-state-color.jpg\" alt=\"In de toekomst kun je de kleur van de linkstatus bepalen. \" width=\"1586\" height=\"872\"><figcaption id=\"caption-attachment-112432\" class=\"wp-caption-text\">In de toekomst kun je de kleur van de linkstatus bepalen. (Afbeeldingsbron <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">GitHub<\/a>)<\/figcaption><\/figure>\n<p>Aanvullende verbeteringen zijn onder meer de <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/pull\/292\">mogelijkheid voor thema&#8217;s<\/a> om <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36304\">alternatieve kleurenpaletten<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35619\">meerdere globale stijlvariaties te bieden<\/a>.<\/p>\n<p>https:\/\/twitter.com\/kjellr\/status\/1460270505513082881<\/p>\n<p>Ontwikkelaars kunnen meer lezen over het mechanisme achter Global Styles in het ondersteuningsartikel <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Global Settings &#038; Styles (theme.json)<\/a>. Je vindt aanvullende voorbeelden in onze <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/#global-styles-in-twenty-twentytwo\">inleiding tot het standaardthema Twenty Twenty-Two<\/a>.<\/p>\n<h2>Het Navigation blok<\/h2>\n<p>Het navigatieblok \u2013 Navigation blok &#8211; wordt &#8220;een van de meest impactvolle themablokken&#8221; <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/15\/wordpress-5-9-feature-go-no-go-october-14-2021\/\">genoemd<\/a> en we zijn niet bang om te zeggen dat we het daarmee eens zijn.<\/p>\n<p>Het blok bevindt zich al een tijdje in de embryonale fase (zie ook Navigatieblok <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/27593\">Tracking Issue<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/35521\">Tracking Issue i2<\/a>). Maar nu alle <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36556\">lopende problemen en blockers<\/a> die als WordPress 5.9 musthaves worden vermeld, zijn opgelost, kunnen we eindelijk <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34041\">een van de krachtigste features<\/a> gaan gebruiken die in de core zijn samengevoegd <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/15\/wordpress-5-9-feature-go-no-go-october-14-2021\/\">met WordPress 5.9<\/a>.<\/p>\n<h3>Een kort overzicht van de interface van Navigation blokken<\/h3>\n<p>Het gebruik van het nieuwe blok kan in het begin een beetje verwarrend zijn, maar als je het eenmaal onder de knie hebt, zul je het volledige potentieel ervan waarderen.<\/p>\n<figure id=\"attachment_112667\" aria-describedby=\"caption-attachment-112667\" style=\"width: 1382px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112667 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-placeholder.jpg\" alt=\" De placeholder voor het Navigation blok\" width=\"1382\" height=\"404\"><figcaption id=\"caption-attachment-112667\" class=\"wp-caption-text\">De placeholder voor het Navigation blok<\/figcaption><\/figure>\n<p>Wanneer je voor het eerst een Navigation blok toevoegt, biedt de placeholder van het blok drie opties voor het selecteren van een bestaand op blokken gebaseerd menu, het maken van een menu met alle pagina&#8217;s of het opnieuw beginnen met een leeg menu.<\/p>\n<figure id=\"attachment_112672\" aria-describedby=\"caption-attachment-112672\" style=\"width: 1412px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112672 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/select-navigation-menu.jpg\" alt=\" Een bestaand navigatiemenu selecteren.\" width=\"1412\" height=\"860\"><figcaption id=\"caption-attachment-112672\" class=\"wp-caption-text\">Een bestaand navigatiemenu selecteren.<\/figcaption><\/figure>\n<p>Met het nieuwe navigatiemenu kun je ook menu&#8217;s importeren die zijn gemaakt via het <a href=\"https:\/\/wordpress.org\/support\/article\/appearance-menus-screen\/\">Appearance Menus scherm<\/a> dat beschikbaar is bij klassieke thema&#8217;s.<\/p>\n<p>Dit betekent dat als je overstapt van een klassiek thema naar een blokthema, je je bestaande menu&#8217;s niet opnieuw hoeft te bouwen. Je hoeft alleen maar een van je momenteel beschikbare &#8220;klassieke menu&#8217;s&#8221; te kiezen en deze wordt automatisch <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/07\/the-new-navigation-block\/\">geconverteerd naar een op blokken gebaseerd navigatiemenu<\/a>.<\/p>\n<figure id=\"attachment_113474\" aria-describedby=\"caption-attachment-113474\" style=\"width: 1352px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113474 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/importing-cassic-menus.jpg\" alt=\" Een klassiek menu selecteren.\" width=\"1352\" height=\"1280\"><figcaption id=\"caption-attachment-113474\" class=\"wp-caption-text\">Een klassiek menu selecteren.<\/figcaption><\/figure>\n<p>Je kunt het Navigation blok overal op je pagina&#8217;s toevoegen. Het kan bijvoorbeeld handig zijn om in <a href=\"https:\/\/kinsta.com\/nl\/blog\/long-form-artikelen\/\">long-form artikelen<\/a> een <a href=\"https:\/\/kinsta.com\/nl\/blog\/anchor-links\/\">inhoudsopgave<\/a> te maken, zodat gebruikers naar specifieke contentsecties kunnen springen.<\/p>\n<figure id=\"attachment_112673\" aria-describedby=\"caption-attachment-112673\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112673 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/internal-links-navigation.jpg\" alt=\" Anchorlinks toevoegen aan een navigatiemenu.\" width=\"1424\" height=\"1024\"><figcaption id=\"caption-attachment-112673\" class=\"wp-caption-text\">Anchorlinks toevoegen aan een navigatiemenu.<\/figcaption><\/figure>\n<p>Nieuwe navigatielinks worden direct aan het navigatieblok toegevoegd door op het plusteken (<strong>+<\/strong>) aan de rechterkant te klikken <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/14\/whats-new-in-gutenberg-11-7-october-13th\/\">(zie ook Gutenberg 11.7 release notes)<\/a>, <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/34899\">tenzij er al andere soorten blokken<\/a> aan het menu zijn toegevoegd.<\/p>\n<figure id=\"attachment_112662\" aria-describedby=\"caption-attachment-112662\" style=\"width: 1416px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112662 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-appender.jpg\" alt=\" Appender van Navigation blok met navigatielinks.\" width=\"1416\" height=\"1246\"><figcaption id=\"caption-attachment-112662\" class=\"wp-caption-text\">Appender van Navigation blok met navigatielinks.<\/figcaption><\/figure>\n<p>Als je op de <strong>Edit <\/strong>knop in de werkbalk van het Navigation Link blok klikt, wordt een menu-item geconverteerd naar een aangepaste link. Hiermee kun je items afzonderlijk toevoegen, bewerken, opnieuw ordenen en verwijderen.<\/p>\n<figure id=\"attachment_112674\" aria-describedby=\"caption-attachment-112674\" style=\"width: 1426px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112674 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/converting-navigation-menu-items.jpg\" alt=\" Een navigatiemenu converteren naar individuele paginalinks.\" width=\"1426\" height=\"770\"><figcaption id=\"caption-attachment-112674\" class=\"wp-caption-text\">Een navigatiemenu converteren naar individuele paginalinks.<\/figcaption><\/figure>\n<p>Je kunt <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/14\/whats-new-in-gutenberg-11-7-october-13th\/\">links ook naar blokken transformeren<\/a> door op de <strong>Transform<\/strong> knop in de blokwerkbalk te klikken. Hiermee kun je <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/34978\">specifieke blokken direct toevoegen aan het navigatiemenu<\/a>.<\/p>\n<figure id=\"attachment_112675\" aria-describedby=\"caption-attachment-112675\" style=\"width: 1398px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112675 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/transform-links-to-blocks-in-navigation-menu.jpg\" alt=\" Navigatielinks omzetten in blokken.\" width=\"1398\" height=\"700\"><figcaption id=\"caption-attachment-112675\" class=\"wp-caption-text\">Navigatielinks omzetten in blokken.<\/figcaption><\/figure>\n<p>De blokken Custom Link, Spacer, Site Logo, Home Link, Social Icons en Search zijn nu zichtbaar voor gebruikers wanneer ze blokken toevoegen aan navigatiemenu&#8217;s.<\/p>\n<p>In de Settings zijbalk vind je een uitgebreide reeks opties voor het bedienen van verschillende aspecten van je navigatiemenu&#8217;s.<\/p>\n<p>Het Layout venster bevat controls voor <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35077\">jusification<\/a>, ori\u00ebntatie en wrapping.<\/p>\n<figure id=\"attachment_112666\" aria-describedby=\"caption-attachment-112666\" style=\"width: 1688px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112666 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-layout-settings.jpg\" alt=\" Instellingen voor lay-out Navigation blok\" width=\"1688\" height=\"644\"><figcaption id=\"caption-attachment-112666\" class=\"wp-caption-text\">Instellingen voor lay-out Navigation blok<\/figcaption><\/figure>\n<p>Het Navigation blok heeft ook een <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/28\/whats-new-in-gutenberg-11-8-0-27-october\/\">verbeterd venster met Display instellingen<\/a> met een optie voor een altijd actief hamburgermenu.<\/p>\n<figure id=\"attachment_112664\" aria-describedby=\"caption-attachment-112664\" style=\"width: 1682px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112664 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-display-settings.jpg\" alt=\" Een verbeterd venster met Display instellingen voor het navigatieblok.\" width=\"1682\" height=\"1008\"><figcaption id=\"caption-attachment-112664\" class=\"wp-caption-text\">Een verbeterd venster met Display instellingen voor het navigatieblok.<\/figcaption><\/figure>\n<p>Je kunt ook tekst- en achtergrondkleuren voor je menu&#8217;s en submenu&#8217;s aanpassen.<\/p>\n<figure id=\"attachment_112663\" aria-describedby=\"caption-attachment-112663\" style=\"width: 1686px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112663 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-color-settings.jpg\" alt=\" Kleurinstellingen voor Navigation blokken.\" width=\"1686\" height=\"1162\"><figcaption id=\"caption-attachment-112663\" class=\"wp-caption-text\">Kleurinstellingen voor Navigation blokken.<\/figcaption><\/figure>\n<p>Een andere nuttige toevoeging die onlangs aan het Navigation blok is <a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/17\/whats-new-in-gutenberg-11-5-16-september\/\">toegevoegd<\/a>, is de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/33991\">Block Gap ondersteuning,<\/a> die gebruikers de mogelijkheid biedt om de afstand tussen menu-items te regelen.<\/p>\n<figure id=\"attachment_112669\" aria-describedby=\"caption-attachment-112669\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112669 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-spacing.jpg\" alt=\" Regeling voor blokafstand op het Navigation blok.\" width=\"1684\" height=\"1114\"><figcaption id=\"caption-attachment-112669\" class=\"wp-caption-text\">Regeling voor blokafstand op het Navigation blok.<\/figcaption><\/figure>\n<p>Het venster Typografie biedt een reeks bedieningselementen voor fontfamilie, uiterlijk, regelhoogte, decoratie en letter case. Al deze bedieningselementen kunnen worden in- of uitgeschakeld via een vervolgkeuzemenu dat verschijnt wanneer je op het ellipspictogram aan de rechterkant klikt.<\/p>\n<figure id=\"attachment_112670\" aria-describedby=\"caption-attachment-112670\" style=\"width: 1688px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112670 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-typography-settings.jpg\" alt=\" Typografie-instellingen voor Navigation blok.\" width=\"1688\" height=\"964\"><figcaption id=\"caption-attachment-112670\" class=\"wp-caption-text\">Typografie-instellingen voor Navigation blok.<\/figcaption><\/figure>\n<h3>Het Navigation blok: onder de motorkap<\/h3>\n<p>Data van Navigation blokken worden in de database opgeslagen met behulp van een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35746\">dedicated berichttype<\/a>\u00a0<code>wp_navigation<\/code>.<\/p>\n<p>Waarom is dit interessant voor WordPress gebruikers en hoe werkt het?<\/p>\n<p>Stel dat je een Navigation menu hebt gemaakt dat bestaat uit twee aangepaste links en een zoekvak. Met het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/\">Twenty Twenty-Two thema<\/a> ge\u00efnstalleerd, zou het menu eruit kunnen zien zoals in de volgende afbeelding:<\/p>\n<figure id=\"attachment_112665\" aria-describedby=\"caption-attachment-112665\" style=\"width: 1610px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112665 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-block-example.jpg\" alt=\" Voorbeeld Navigation blok\" width=\"1610\" height=\"246\"><figcaption id=\"caption-attachment-112665\" class=\"wp-caption-text\">Voorbeeld Navigation blok<\/figcaption><\/figure>\n<p>Het bovenstaande navigatieblok wordt als volgt in de database opgeslagen als <code>wp_navigation<\/code> berichttype:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:navigation-link {\"label\":\"Contacts\",\"type\":\"page\",\"id\":7,\"url\":\"http:\/\/wordpress-59.local\/?page_id=7\",\"kind\":\"post-type\",\"isTopLevelLink\":true} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"About Us\",\"type\":\"page\",\"id\":10,\"url\":\"http:\/\/wordpress-59.local\/?page_id=10\",\"kind\":\"post-type\",\"isTopLevelLink\":true} \/--&gt;\n\n&lt;!-- wp:search {\"showLabel\":false,\"placeholder\":\"Search the site\",\"buttonPosition\":\"button-inside\",\"buttonUseIcon\":true} \/--&gt;<\/code><\/pre>\n<p>Door de content van het Navigation blok in de database op te slaan, kunnen gebruikers dezelfde navigatiemenu&#8217;s gebruiken voor verschillende blokthema&#8217;s. Als het menu niet direct zichtbaar is, kies je gewoon het gewenste navigatiemenu in de menuselector (zie ook issue <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36087\">#36087<\/a> en PR <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36178\">#36178<\/a>).<\/p>\n<p>De volgende afbeelding toont het bovenstaande menu met het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/#the-twenty-twentyone-blocks-experiment\">Twenty Twenty-One Blocks thema<\/a>:<\/p>\n<figure id=\"attachment_112671\" aria-describedby=\"caption-attachment-112671\" style=\"width: 1158px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112671 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/navigation-menu-selector-tt1b.jpg\" alt=\" Selecteer menu in Twenty Twenty-One Blocks.\" width=\"1158\" height=\"708\"><figcaption id=\"caption-attachment-112671\" class=\"wp-caption-text\">Selecteer menu in Twenty Twenty-One Blocks.<\/figcaption><\/figure>\n<p>Het navigatieblok heeft verschillende iteraties doorlopen. Je kunt meer te weten komen van elke implementatie in de release notes van Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/14\/whats-new-in-gutenberg-11-7-october-13th\/\">11.7<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/28\/whats-new-in-gutenberg-11-8-0-27-october\/\">11.8<\/a> en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/11\/12\/whats-new-in-gutenberg-11-9-0-10-november\/\">11.9<\/a>.<\/p>\n<p>Je kunt ook meer lezen over het Navigation blok in <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/07\/the-new-navigation-block\/\">The new Navigation block dev note<\/a> en het artikel <a href=\"https:\/\/wordpress.org\/support\/article\/navigation-block\/\">Navigation block support<\/a>.<\/p>\n<h2>Afbeeldingengalerijen, uitgelichte afbeeldingen en sitepictogrammen<\/h2>\n<p>Met het doel afbeeldingen zich consistenter te laten gedragen in verschillende contexten, biedt WordPress 5.9 nieuwe features en verbeteringen aan in verschillende blokken. Het Gallery blok is volledig herzien, terwijl verschillende wijzigingen in de blokken met uitgelichte afbeelding en sitepictogram gebruikers meer gedetailleerde controle geven over de respectieve afbeeldingen.<\/p>\n<h3>Een volledig herzien Gallery blok<\/h3>\n<p>In WordPress 5.8 was de mogelijkheid om het uiterlijk van afbeeldingen in galerijen aan te passen enigszins beperkt. Er was geen manier om de beeldstijl te wijzigen of een duotoonfilter toe te passen.<\/p>\n<p>Bovendien ontbraken belangrijke features in galerijafbeeldingen, zoals het toevoegen van aangepaste links naar afzonderlijke afbeeldingen in een galerij.<\/p>\n<p>Om de reden voor deze asymmetrie tussen afbeeldingen in de twee verschillende contexten van een enkele afbeelding en een afbeelding in een galerij beter te begrijpen, gaan we eens kijken naar het Gallery blok in de Code view in WordPress 5.8:<\/p>\n<figure id=\"attachment_112457\" aria-describedby=\"caption-attachment-112457\" style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112457 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/gallery-block-code-view-wordpress-5-8.jpg\" alt=\"Gallery blok in Code view in WordPress 5.8.\" width=\"1896\" height=\"494\"><figcaption id=\"caption-attachment-112457\" class=\"wp-caption-text\">Gallery blok in Code view in WordPress 5.8.<\/figcaption><\/figure>\n<p>Houd er rekening mee dat afbeeldingsdetails alleen worden opgeslagen in de delimiter van Gallery blokken (zie ook <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#what-is-a-gutenberg-block\">Wat is een Gutenberg blok?<\/a>).<\/p>\n<figure id=\"attachment_112461\" aria-describedby=\"caption-attachment-112461\" style=\"width: 1822px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112461 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/gallery-block-wordpress-5-8.jpg\" alt=\"Gallery blok inspecteren in WordPress 5.8.\" width=\"1822\" height=\"778\"><figcaption id=\"caption-attachment-112461\" class=\"wp-caption-text\">Gallery blok inspecteren in WordPress 5.8.<\/figcaption><\/figure>\n<p>Hierdoor <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/11436\">gedroegen individuele afbeeldingen zich anders dan afbeeldingen in galerijen<\/a>.<\/p>\n<p>Om ervoor te zorgen dat afbeeldingen zich consistent gedragen in de twee verschillende contexten, introduceert WordPress 5.9 een <a href=\"https:\/\/wordpress.org\/news\/2021\/09\/upcoming-gallery-block-improvements\/\">volledig herzien galerijblok<\/a>, dat zich nu <a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/20\/gallery-block-refactor-dev-note\/\">gedraagt als een container voor een verzameling figuurelementen<\/a> in plaats van een ongeordende lijst met afbeeldingen.<\/p>\n<p>In WordPress 5.9 worden galerijafbeeldingen genest met behulp van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#innerblocks-component\">core <code>innerBlocks<\/code> API&#8217;s<\/a>, en elke afbeelding slaat zijn eigen set details op, precies zoals individuele afbeeldingen.<\/p>\n<figure id=\"attachment_112458\" aria-describedby=\"caption-attachment-112458\" style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112458 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/gallery-block-code-view-wordpress-5-9.jpg\" alt=\" Gallery blok in Code view in WordPress 5.9\" width=\"1896\" height=\"628\"><figcaption id=\"caption-attachment-112458\" class=\"wp-caption-text\">Gallery blok in Code view in WordPress 5.9<\/figcaption><\/figure>\n<p>Dat is een geweldige verbetering, aangezien <strong>afbeeldingen binnen Gallery blokken nu van dezelfde functionaliteiten genieten die beschikbaar zijn in het core Gallery blok<\/strong>, zoals afbeeldingsdimensies en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-8\/#duotone-block-support\">duotoonfilters<\/a>, evenals standaardblokfuncties, zoals drag-and-drop, kopi\u00ebren, dupliceren en verwijderen van functionaliteiten.<\/p>\n<figure id=\"attachment_112462\" aria-describedby=\"caption-attachment-112462\" style=\"width: 1604px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112462 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/gallery-block-wordpress-5-9.jpg\" alt=\" Gallery blok inspecteren in WordPress 5.9\" width=\"1604\" height=\"864\"><figcaption id=\"caption-attachment-112462\" class=\"wp-caption-text\">Gallery blok inspecteren in WordPress 5.9<\/figcaption><\/figure>\n<p>Met het nieuwe Gallery blok kun je afbeeldingen individueel stylen. Dit biedt een breed scala aan aanpassingsmogelijkheden.<\/p>\n<p>De onderstaande afbeelding toont meerdere afbeeldingen in een galerij, elk met verschillende afgeronde hoeken:<\/p>\n<figure id=\"attachment_112459\" aria-describedby=\"caption-attachment-112459\" style=\"width: 1642px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112459 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/gallery-block-full-wordpress-5-9.jpg\" alt=\" Het nieuwe Gallery blok is een wrapper voor losse Image blokken.\" width=\"1642\" height=\"1274\"><figcaption id=\"caption-attachment-112459\" class=\"wp-caption-text\">Het nieuwe Gallery blok is een wrapper voor losse Image blokken.<\/figcaption><\/figure>\n<p>Je kunt ook verschillende duotoonfilters gebruiken voor verschillende afbeeldingen in dezelfde galerij.<\/p>\n<figure id=\"attachment_112460\" aria-describedby=\"caption-attachment-112460\" style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112460 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/gallery-block-image-duotone-filters.jpg\" alt=\" Verschillende duotoonfilters toegepast op verschillende afbeeldingen in een Gallery blok\" width=\"1728\" height=\"1048\"><figcaption id=\"caption-attachment-112460\" class=\"wp-caption-text\">Verschillende duotoonfilters toegepast op verschillende afbeeldingen in een Gallery blok<\/figcaption><\/figure>\n<p>En natuurlijk kun je aan elke afbeelding een specifieke CSS klasse toewijzen, wat je extra superkrachten geeft voor het toevoegen van alle aanpassingen die je nodig hebt aan je galerijafbeeldingen.<\/p>\n<p>Voor een beter beeld van het nieuwe Galery blok, zie ook <a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/20\/gallery-block-refactor-dev-note\/\">Gallery Block Refactor dev note<\/a>, <a href=\"https:\/\/wordpress.org\/news\/2021\/09\/upcoming-gallery-block-improvements\/\">Upcoming Gallery Block improvements<\/a> en\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/01\/whats-new-in-gutenberg-11-4-1-september\/\">Gutenberg 11.4 release notes<\/a>.<\/p>\n<h3>Verbeteringen aan uitgelichte afbeeldingen<\/h3>\n<p>Er zijn ook verschillende verbeteringen aangebracht in de uitgelichte afbeeldingen van blokken.<\/p>\n<h4>Meer controle basisafmetingen<\/h4>\n<p>Het blok Featured Image heeft nu een nieuw venster met instellingen voor afmetingen met bedieningselementen voor <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31634\">hoogte, breedte en schaal<\/a>.<\/p>\n<figure id=\"attachment_112828\" aria-describedby=\"caption-attachment-112828\" style=\"width: 2032px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112828 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/featured-image-dimensions-control-1.jpg\" alt=\" Venster instellingen uitgelichte afbeelding.\" width=\"2032\" height=\"1128\"><figcaption id=\"caption-attachment-112828\" class=\"wp-caption-text\">Venster instellingen uitgelichte afbeelding.<\/figcaption><\/figure>\n<p>De betere controle van uitgelichte afbeeldingen is ook te vinden in Query Loop blokken, zoals te zien in de volgende afbeelding:<\/p>\n<figure id=\"attachment_112829\" aria-describedby=\"caption-attachment-112829\" style=\"width: 2876px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112829 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/featured-image-dimensions-control-2.jpg\" alt=\" Uitgelichte afbeeldingsafmetingen in een Query Loop blok.\" width=\"2876\" height=\"1202\"><figcaption id=\"caption-attachment-112829\" class=\"wp-caption-text\">Uitgelichte afbeeldingsafmetingen in een Query Loop blok.<\/figcaption><\/figure>\n<h4>Duotoonfilters op uitgelichte afbeeldingen<\/h4>\n<p>We hebben hierboven vermeld dat we nu het duotoonfilter kunnen toepassen op afbeeldingen die zijn opgenomen in het vernieuwde Gallery blok.<\/p>\n<p>Vanaf WordPress 5.9 zijn <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-8\/#duotone-block-support\">duotoonfilters<\/a> ook beschikbaar Featured Image blokken &#8211; in elke context, van bericht- en paginatemplates tot Query Loop blokken.<\/p>\n<figure id=\"attachment_112830\" aria-describedby=\"caption-attachment-112830\" style=\"width: 2110px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112830 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/featured-image-duotone-filter.jpg\" alt=\"Duotoonfilter op uitgelichte afbeeldingen in een Query Loop blok.\" width=\"2110\" height=\"1042\"><figcaption id=\"caption-attachment-112830\" class=\"wp-caption-text\">Duotoonfilter op uitgelichte afbeeldingen in een Query Loop blok.<\/figcaption><\/figure>\n<p>Deze feature opent de deur naar creatieve en consistente kleurencombinaties op de hele site.<\/p>\n<h3>Afbeelding bijsnijden in sitelogo<\/h3>\n<p>V\u00f3\u00f3r WordPress 5.9 (en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/01\/whats-new-in-gutenberg-11-6-29-september\/\">Gutenberg 11.6)<\/a> konden logoafbeeldingen alleen worden bewerkt voordat ze werden ge\u00fcpload. Met WordPress 5.9 kun je afbeeldingen die in het Site Logo blok worden gebruikt, <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31607\">bijsnijden, zoomen en roteren<\/a>, rechtstreeks vanuit de toolbar van het blok.<\/p>\n<figure id=\"attachment_112831\" aria-describedby=\"caption-attachment-112831\" style=\"width: 1258px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112831 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/editing-logo-image.jpg\" alt=\"Afbeelding van het sitelogo bewerken.\" width=\"1258\" height=\"1272\"><figcaption id=\"caption-attachment-112831\" class=\"wp-caption-text\">Afbeelding van het sitelogo bewerken.<\/figcaption><\/figure>\n<h2>Nieuwe ontwerptools, blokken en UI verbeteringen<\/h2>\n<p>Elf Gutenberg versies worden samengevoegd tot de core van WordPress 5.9, en bieden zoveel features, verbeteringen en bugfixes dat het niet mogelijk zou zijn om ze allemaal in \u00e9\u00e9n artikel te behandelen.<\/p>\n<p>Dus hebben we er een paar uitgekozen die we het meest op waarde schatten. Voor een uitgebreider overzicht van die features en verbeteringen, kun je ook de release posts raadplegen van Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/10\/whats-new-in-gutenberg-10-8-9-june\/\">10.8<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">10.9<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/09\/whats-new-in-gutenberg-11-0-0-9-july\/\">11.0<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/21\/whats-new-in-gutenberg-11-1-0-21-july\/\">11.1<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/05\/whats-new-in-gutenberg-11-2-0-4-august\/\">11.2<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/18\/whats-new-in-gutenberg-11-3-18-august\/\">11.3<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/01\/whats-new-in-gutenberg-11-4-1-september\/\">11.4<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/17\/whats-new-in-gutenberg-11-5-16-september\/\">11.5<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/01\/whats-new-in-gutenberg-11-6-29-september\/\">11.6<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/14\/whats-new-in-gutenberg-11-7-october-13th\/\">11.7<\/a>,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/28\/whats-new-in-gutenberg-11-8-0-27-october\/\">11.8<\/a>, en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/11\/12\/whats-new-in-gutenberg-11-9-0-10-november\/\">11.9<\/a>.<\/p>\n<p>Dat gezegd hebbende, zal deze sectie de volgende wijzigingen behandelen:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"9\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Border ondersteunt UI<\/h3>\n<p>Beginnend bij WordPress 5.9: wanneer de <strong>theme.json<\/strong>\u00a0<code>border<\/code> instellingen declareert en een blok border support declareert via de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\">Block Supports API<\/a>, zal een nieuw instellingenvenster controls bieden voor <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31585\">border radius, breedte, stijl, kleur<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/33315\">units<\/a> (zie ook <a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/21\/whats-new-in-gutenberg-11-1-0-21-july\/\">Gutenberg 11.1<\/a>).<\/p>\n<p>Het <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-library\/src\/group\">core Groups blokis<\/a> een goed voorbeeld van deze nuttige UI verbetering. Het bestand <strong>block.json<\/strong> van het Group blok bevat nu de volgende\u00a0<code>supports<\/code> declaraties:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"supports\": {\n\t\t\"align\": [ \"wide\", \"full\" ],\n\t\t\"anchor\": true,\n\t\t\"html\": false,\n\t\t\"color\": {\n\t\t\t\"gradients\": true,\n\t\t\t\"link\": true\n\t\t},\n\t\t\"spacing\": {\n\t\t\t\"padding\": true,\n\t\t\t\"__experimentalDefaultControls\": {\n\t\t\t\t\"padding\": true\n\t\t\t}\n\t\t},\n\t\t\"__experimentalBorder\": {\n\t\t\t\"color\": true,\n\t\t\t\"radius\": true,\n\t\t\t\"style\": true,\n\t\t\t\"width\": true,\n\t\t\t\"__experimentalDefaultControls\": {\n\t\t\t\t\"color\": true,\n\t\t\t\t\"radius\": true,\n\t\t\t\t\"style\": true,\n\t\t\t\t\"width\": true\n\t\t\t}\n\t\t},\n\t\t...\n\t},\n\t...\n}<\/code><\/pre>\n<p>Met deze feature kunnen gebruikers met minimale inspanning geweldige grafische effecten op hun websites cre\u00ebren. Je kunt het in actie zien met het nieuwe Twenty Twenty-Two thema.<\/p>\n<p>Maak in een nieuw bericht of nieuwe pagina een nieuw Groups blok en selecteer het. Je ziet een <strong>Border<\/strong> paneel in de zijbalk met blokinstellingen. Wijzig indien nodig de randbreedte en -stijl en geniet van het resultaat.<\/p>\n<figure id=\"attachment_112693\" aria-describedby=\"caption-attachment-112693\" style=\"width: 1868px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112693 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/border-controls.jpg\" alt=\" Een Groups met een aangepaste randconfiguratie binnen Twenty Twenty-Two.\" width=\"1868\" height=\"1222\"><figcaption id=\"caption-attachment-112693\" class=\"wp-caption-text\">Een Groups met een aangepaste randconfiguratie binnen Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>Als je een themaontwikkelaar bent en deze feature aan je thema&#8217;s wilt toevoegen, open dan je <strong>theme.json<\/strong> bestand en declare border support zoals weergegeven in de volgende code:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"border\": {\n\t\t\t\"customColor\": true,\n\t\t\t\"customRadius\": true,\n\t\t\t\"customStyle\": true,\n\t\t\t\"customWidth\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Sla het bestand op en ga terug naar je WordPress dashboard. Maak in een nieuw bericht of nieuwe pagina een nieuw Groups blok en selecteer het. Je zou nu een border venster moeten zien in de zijbalk met blokinstellingen (zie ook dit <a href=\"https:\/\/gist.github.com\/aaronrobertshaw\/8ed108e4a024b81297a55fc498ef3a57\">experimentele theme.json<\/a>).<\/p>\n<h3>Verbeteringen List View<\/h3>\n<p>Met WordPress 5.9 is de lijstweergave verbeterd en bevat nu drag-and-drop, inklapbare secties en HTML anchors.<\/p>\n<h4>Drag and Drop in lijstweergave<\/h4>\n<p>-Zoals vermeld in <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/33320\">pull request #33320<\/a>, is drag-and0drop ge\u00efmplementeerd in de List View, maar werd dit uitgeschakeld vanwege prestatieproblemen.<\/p>\n<p>Vanaf WordPress 5.9 is drag-and-drop in de lijstweergave opnieuw ge\u00efmplementeerd. Je kunt <a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/21\/whats-new-in-gutenberg-11-1-0-21-july\/\">blokken en groepen blokken opnieuw overal in de lijstweergave drag-and-droppen<\/a>. Dit is een geweldige verbetering in de bruikbaarheid van de editor, omdat je hiermee snel en gemakkelijk blokken en groepen blokken binnen je pagina&#8217;s kunt verplaatsen. Het speelt een belangrijke rol bij <a href=\"https:\/\/kinsta.com\/nl\/blog\/long-form-artikelen\/\">long-form artikelen<\/a> en pagina&#8217;s en bij het beheren van complexe structuren van geneste blokken.<\/p>\n<figure id=\"attachment_112560\" aria-describedby=\"caption-attachment-112560\" style=\"width: 1994px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112560 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/drag-and-drop-in-list-view.jpg\" alt=\" Drag and Drop in List View.\" width=\"1994\" height=\"1180\"><figcaption id=\"caption-attachment-112560\" class=\"wp-caption-text\">Drag and Drop in List View.<\/figcaption><\/figure>\n<h4>Lijstweergave opvouwbare secties<\/h4>\n<p>Een andere belangrijke verbetering van de lijstweergave is de mogelijkheid om <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">secties van geneste blokken uit\/samen te vouwen<\/a>. Dit stelt je in staat om gemakkelijk door complexe blokstructuren te navigeren, enkele groepen blokken uit te breiden terwijl de rest samengevouwen blijft.<\/p>\n<p>Je kunt secties van de lijstweergave ook uitvouwen en samenvouwen met de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32117\">pijlen naar links en naar rechts<\/a>.<\/p>\n<figure id=\"attachment_112561\" aria-describedby=\"caption-attachment-112561\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112561 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/group-block-expanded.jpg\" alt=\"Een uitgevouwen groep blokken.\" width=\"1996\" height=\"1102\"><figcaption id=\"caption-attachment-112561\" class=\"wp-caption-text\">Een uitgevouwen groep blokken.<\/figcaption><\/figure>\n<h4>HTML anchors binnen items in List View<\/h4>\n<p>Nog een andere nuttige verbetering is de mogelijkheid om HTML anchors toe te voegen aan je blokken in de List View en ze in \u00e9\u00e9n oogopslag te bekijken.<\/p>\n<figure id=\"attachment_112562\" aria-describedby=\"caption-attachment-112562\" style=\"width: 1997px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112562 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/html-anchors-list-view.jpg\" alt=\" HTML anchors in List View.\" width=\"1997\" height=\"1112\"><figcaption id=\"caption-attachment-112562\" class=\"wp-caption-text\">HTML anchors in List View.<\/figcaption><\/figure>\n<h3>Blok Gap Spacing control<\/h3>\n<p>De nieuwe Block Gap Spacing control werd voor het eerst ge\u00efntroduceerd in <a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/01\/whats-new-in-gutenberg-11-4-1-september\/\">Gutenberg 11.4<\/a> en wordt nu samengevoegd tot de core van WordPress 5.9. De control stelt je in staat om een aangepaste afstand tussen items binnen een blok in te stellen. Hieronder zie je een preview met verschillende waarden voor blokafstanden in een Columns blok met het standaardthema Twenty Twenty-Two:<\/p>\n<figure id=\"attachment_113303\" aria-describedby=\"caption-attachment-113303\" style=\"width: 1966px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113303 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/block-spacing-90.jpg\" alt=\"Spacing beheren in Colums blok in WordPress 5.9.\" width=\"1966\" height=\"1166\"><figcaption id=\"caption-attachment-113303\" class=\"wp-caption-text\">Spacing beheren in Colums blok in WordPress 5.9.<\/figcaption><\/figure>\n<p>Gap Spacing is in eerste instantie beschikbaar voor specifieke blokken, waaronder Buttons, Images, Columns, Title en Navigation, maar de ondersteuning zou in de nabije toekomst naar meer blokken moeten worden uitgebreid.<\/p>\n<p>Thema&#8217;s moeten Gap Spacing in <strong>theme.json<\/strong> inschakelen met behulp van de nieuwe <em>appearanceTools<\/em> property. Je kunt meer lezen over Appearance tools in ons <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/#layout-and-appearance-tools\">uitgebreide artikel over Twenty Twenty-Two<\/a>. Zie ook pull requests <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/33991\">#33991<\/a>\u00a0en\u00a0<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/34630\">#34630<\/a>.<\/p>\n<h3>Rich URL preview voor linkbeheer<\/h3>\n<p>Door gebruik te maken van het nieuwe REST <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31763\">url-details endpoint<\/a>, biedt de Link control nu een <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">rich URL preview<\/a> met details voor een link target resource.<\/p>\n<figure id=\"attachment_112702\" aria-describedby=\"caption-attachment-112702\" style=\"width: 1390px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112702 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/rich-url-preview.jpg\" alt=\" Rich URL preview in de berichteditor.\" width=\"1390\" height=\"1002\"><figcaption id=\"caption-attachment-112702\" class=\"wp-caption-text\">Rich URL preview in de berichteditor.<\/figcaption><\/figure>\n<p>In de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31464\">eerste implementatie<\/a> was deze feature alleen beschikbaar in de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#using-richtext-component\">richtext component<\/a> van de berichteditor. Op het moment van schrijven is het ook beschikbaar in de site-editor, maar niet in de navigatie- en widgeteditors.<\/p>\n<h3>Pagina&#8217;s maken vanuit de linkpop-up<\/h3>\n<p>WordPress 5.9 heeft ook een <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/14\/whats-new-in-gutenberg-11-7-october-13th\/\">verbeterde gebruikersinterface voor inline links<\/a>, met een gloednieuwe knop om <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35083\">nieuwe pagina&#8217;s rechtstreeks vanuit de pop-up voor inline links te maken<\/a>. Deze feature is alleen beschikbaar in de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">berichteditor<\/a>.<\/p>\n<figure id=\"attachment_113304\" aria-describedby=\"caption-attachment-113304\" style=\"width: 1332px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113304 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/create-pages-from-link-popup.jpg\" alt=\" WordPress 5.9 heeft een nieuwe UI voor inline links.\" width=\"1332\" height=\"1100\"><figcaption id=\"caption-attachment-113304\" class=\"wp-caption-text\">WordPress 5.9 heeft een nieuwe UI voor inline links.<\/figcaption><\/figure>\n<h3>Verbeteringen aan het Search blok<\/h3>\n<p>Het Search blok toont nu <a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/05\/whats-new-in-gutenberg-11-2-0-4-august\/\">knop- en randkleurinstellingen<\/a>.<\/p>\n<figure id=\"attachment_113295\" aria-describedby=\"caption-attachment-113295\" style=\"width: 2032px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113295 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/search-block-color-settings.jpg\" alt=\"Kleurinstellingen Search blok.\" width=\"2032\" height=\"1068\"><figcaption id=\"caption-attachment-113295\" class=\"wp-caption-text\">Kleurinstellingen Search blok.<\/figcaption><\/figure>\n<p>Je kunt nu ook de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32416\">achtergrond- en tekstkleur<\/a> en de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31783\">randkleur en radius<\/a> aanpassen.<\/p>\n<figure id=\"attachment_113294\" aria-describedby=\"caption-attachment-113294\" style=\"width: 2028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113294 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/search-block-border-settings.jpg\" alt=\"Search blok instellingen kleur en radius van rand.\" width=\"2028\" height=\"1100\"><figcaption id=\"caption-attachment-113294\" class=\"wp-caption-text\">Search blok instellingen kleur en radius van rand.<\/figcaption><\/figure>\n<h3>Nieuwe controls voor blokafmetingen<\/h3>\n<p>Er is nu een nieuw venster met instellingen voor afmetingen <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28356\">beschikbaar voor gebruikers<\/a> om de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/18\/whats-new-in-gutenberg-11-3-18-august\/\">ruimte te beheren die wordt ingenomen door een blok<\/a> op de pagina. Het venster <em>zou <\/em>hoogte, breedte, opvulling, marge en mogelijk uitlijningsopties moeten bevatten, maar niet alle attributen zullen voor elk blok beschikbaar zijn.<\/p>\n<figure id=\"attachment_113296\" aria-describedby=\"caption-attachment-113296\" style=\"width: 2026px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113296 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/dimensions-panel-group-block.jpg\" alt=\" Padding control voor een Group blok in WordPress 5.9.\" width=\"2026\" height=\"616\"><figcaption id=\"caption-attachment-113296\" class=\"wp-caption-text\">Padding control voor een Group blok in WordPress 5.9.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">Blokontwikkelaars<\/a> zullen de component\u00a0<code>&lt;DimensionControl \/&gt;<\/code> vinden die is <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/components\/src\/dimension-control\/README.md\">gedocumenteerd op GitHub<\/a>, maar houd er rekening mee dat het nog steeds is gemarkeerd als een experimentele feature en onderhevig kan zijn aan belangrijke wijzigingen op het moment van schrijven.<\/p>\n<h3>Een nieuw Widget Group blok toegevoegd aan het widgetscherm<\/h3>\n<p>Een nieuw <a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/22\/core-editor-improvement-introducing-the-widget-group-block\/\">Widget Group blok<\/a> is <a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/17\/whats-new-in-gutenberg-11-5-16-september\/\">nu beschikbaar<\/a> in de op blokken gebaseerde widgeteditor. Met het nieuwste blok kun je <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/34484\">een groep blokken toevoegen aan een widget met een titel<\/a> in de Widgets Editor en de Customizer van de klassieke thema&#8217;s.<\/p>\n<figure id=\"attachment_113297\" aria-describedby=\"caption-attachment-113297\" style=\"width: 1398px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113297 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/widget-group-block.jpg\" alt=\" Widget Group blok in het Twenty Twenty-One thema.\" width=\"1398\" height=\"1122\"><figcaption id=\"caption-attachment-113297\" class=\"wp-caption-text\">Widget Group blok in het Twenty Twenty-One thema.<\/figcaption><\/figure>\n<p>Je kunt meer lezen over de widgeteditor in <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-8\/#blockbased-widgets-editor-and-block-widgets-in-the-customizer\">Block Based Widgets Editor en Block Widgets in de Customizer<\/a>.<\/p>\n<h3>Flex lay-out en het nieuwe Row blok<\/h3>\n<p>Oorspronkelijk ge\u00efntroduceerd als een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/33359\">experimentele feature<\/a> met <a href=\"https:\/\/make.wordpress.org\/core\/2021\/08\/05\/whats-new-in-gutenberg-11-2-0-4-august\/\">Gutenberg 11.2<\/a>, is de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\">flexlay-out<\/a> uitgebreid naar verschillende blokken, waaronder de blokken <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/34493\">Social Links<\/a> en Groups.<\/p>\n<p>Sommige blokken, zoals het blok Social Links, bieden nu een set toolbar controls en zijbalkinstellingen waarmee je de flex lay-out kunt aanpassen.<\/p>\n<figure id=\"attachment_112704\" aria-describedby=\"caption-attachment-112704\" style=\"width: 1358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112704 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/social-links-layout-controls.jpg\" alt=\" Lay-out controls in de toolbar van het Social Links blok.\" width=\"1358\" height=\"524\"><figcaption id=\"caption-attachment-112704\" class=\"wp-caption-text\">Lay-out controls in de toolbar van het Social Links blok.<\/figcaption><\/figure>\n<p>Dezelfde functionaliteit is beschikbaar in het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#the-navigation-block\">Navigation blok<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/34535\">Row blok<\/a>, een nieuwe variant van het Group blok dat is ge\u00efntroduceerd met <a href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/17\/whats-new-in-gutenberg-11-5-16-september\/\">Gutenberg 11.5<\/a>.<\/p>\n<p>De volgende afbeelding toont het Row blok met lay-out controls in de instellingenzijbalk:<\/p>\n<figure id=\"attachment_112706\" aria-describedby=\"caption-attachment-112706\" style=\"width: 2046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112706 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/row-block-with-layout-settings.jpg\" alt=\" Het nieuwe Row blok met lay-outinstellingen.\" width=\"2046\" height=\"772\"><figcaption id=\"caption-attachment-112706\" class=\"wp-caption-text\">Het nieuwe Row blok met lay-outinstellingen.<\/figcaption><\/figure>\n<p>Hieronder zie je hetzelfde Row blok op de frontend en in Chrome\u2019s <a href=\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\">Inspect tool<\/a>.<\/p>\n<figure id=\"attachment_112705\" aria-describedby=\"caption-attachment-112705\" style=\"width: 2460px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112705 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/row-block-flex-props.jpg\" alt=\" Een rijblok in de Chrome inspectietool.\" width=\"2460\" height=\"880\"><figcaption id=\"caption-attachment-112705\" class=\"wp-caption-text\">Een rijblok in de Chrome inspectietool.<\/figcaption><\/figure>\n<h2>Verbeteringen in blokpatroon<\/h2>\n<p>Blokpatronen, voor het eerst <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-5\/#block-patterns\">ge\u00efntroduceerd met WordPress 5.5<\/a>, stellen WordPress gebruikers in staat om met slechts een paar klikken <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-5\/#block-patterns\">complexe, gebruiksklare structuren van geneste blokken<\/a> in hun content op te nemen.<\/p>\n<p>WordPress 5.9 zet een stap vooruit in de richting van democratisering van het ontwerp en empowerment van gebruikers door een aantal verbeteringen aan het blokpatroonsysteem te introduceren.<\/p>\n<p>Maar wat is er nieuw in blokpatronen in WordPress 5.9?<\/p>\n<h3>Featured Patterns uit de Pattern Directory<\/h3>\n<p>De Block Inserter <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/28\/whats-new-in-gutenberg-11-8-0-27-october\/\">geeft nu Featured Block Patterns weer<\/a> die dynamisch zijn opgehaald uit de <a href=\"https:\/\/wordpress.org\/patterns\/\">Pattern Directory<\/a>, zodat gebruikers snel en gemakkelijk populaire patronen kunnen vinden om in hun content te gebruiken.<\/p>\n<figure id=\"attachment_112574\" aria-describedby=\"caption-attachment-112574\" style=\"width: 2160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112574 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/buttons-patterns-wp-59-tt2.jpg\" alt=\" Blockpatronen voor Buttons in WordPress 5.9.\" width=\"2160\" height=\"1308\"><figcaption id=\"caption-attachment-112574\" class=\"wp-caption-text\">Blockpatronen voor Buttons in WordPress 5.9.<\/figcaption><\/figure>\n<p>Op deze manier moeten WordPress ontwikkelaars worden aangemoedigd om in de loop van de tijd steeds meer patronen te maken en te publiceren, aangezien patronen rechtstreeks in het WordPress dashboard terechtkomen. Dit resulteert hopelijk in steeds uitgebreidere ontwerpmogelijkheden voor gebruikers<\/p>\n<h3>Een nieuwe fullscreen Pattern Explorer<\/h3>\n<p>Aangezien het aantal beschikbare blokpatronen in de <a href=\"https:\/\/wordpress.org\/patterns\/\">Pattern Directory<\/a> blijft groeien en meer thema&#8217;s ze gebruiken, introduceert WordPress 5.9 een <a href=\"https:\/\/make.wordpress.org\/core\/2021\/11\/12\/whats-new-in-gutenberg-11-9-0-10-november\/\">nieuwe interface voor de patroonnavigatie<\/a>: de Pattern Explorer.<\/p>\n<figure id=\"attachment_112575\" aria-describedby=\"caption-attachment-112575\" style=\"width: 2158px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112575 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/fullscreen-pattern-modal.jpg\" alt=\"Fullscreen patroon modal in WordPress 5.9.\" width=\"2158\" height=\"1300\"><figcaption id=\"caption-attachment-112575\" class=\"wp-caption-text\">Fullscreen patroon modal in WordPress 5.9.<\/figcaption><\/figure>\n<p>Een nieuwe <strong>Explore<\/strong> knop opent nu een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35773\">fullscreen modal<\/a> waarmee gebruikers met slechts een paar klikken kunnen bladeren, zoeken naar en blokpatronen kunnen invoegen. Het resultaat is een verbeterde gebruikerservaring.<\/p>\n<figure id=\"attachment_112576\" aria-describedby=\"caption-attachment-112576\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112576 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/featured-block-patterns.jpg\" alt=\" Uitgelichte blokpatronen in de blok-inserter.\" width=\"1996\" height=\"1132\"><figcaption id=\"caption-attachment-112576\" class=\"wp-caption-text\">Uitgelichte blokpatronen in de blok-inserter.<\/figcaption><\/figure>\n<p>Je vindt aanvullende opmerkingen en verschillende voorbeelden van blokpatronen in ons uitgebreide artikel over het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/#twenty-twentytwo-block-patterns\">Twenty Twenty-Two WordPress thema<\/a>.<\/p>\n<p>Als je ge\u00efnteresseerd bent en meer wilt weten, luister dan naar Josepha Haden Chomphosy&#8217;s podcast <a href=\"https:\/\/wordpress.org\/news\/2021\/09\/episode-16-a-sneak-peek-at-wordpress-5-9\/\">Aflevering 16<\/a> en <a href=\"https:\/\/wordpress.org\/news\/2021\/11\/episode-21-all-things-block-themes\/\">21<\/a>, en bekijk de <a href=\"https:\/\/www.youtube.com\/watch?v=r59aR1tmY6k\">Exploring WordPress 5.9<\/a> YouTube video van Anne McCarthy.<\/p>\n<h2>Het Twenty Twenty-Two thema en WordPress blok thema<\/h2>\n<p>In WordPress 5.9 hoef je niet langer de Gutenberg plugin te installeren om Full Site Editing op je WordPress site in te schakelen. Je hoeft alleen maar een blokthema te gebruiken dat kan profiteren van alle FSE features.<\/p>\n<p>Bovendien is WordPress 5.9 gebundeld met een gloednieuw standaardthema, Twenty Twenty-Two. Dit is een game changer aangezien Twenty Twenty-Two het eerste standaardblokthema ooit is.<\/p>\n<p>Twenty Twenty-Two is een zeer flexibel en aanpasbaar thema. Het biedt een perfecte sandbox om de nieuwe templatebewerkingsflow, nieuwe blokken, interfaceverbeteringen en alle sitebewerkingsfeatures die aan de kern zijn toegevoegd, uit te proberen, te beginnen met WordPress 5.9.<\/p>\n<figure id=\"attachment_110731\" aria-describedby=\"caption-attachment-110731\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2.jpg\" alt=\"Twenty Twenty-Two is het nieuwe standaard WordPress thema\" width=\"2560\" height=\"1752\"><figcaption id=\"caption-attachment-110731\" class=\"wp-caption-text\">Twenty Twenty-Two is het nieuwe standaard WordPress thema. (Bron afbeelding: <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">WordPress.org<\/a>)<\/figcaption><\/figure>\n<p>Zoals hierboven vermeld, hoef je alleen maar een <a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\">blokthema<\/a> te installeren en te activeren, zoals Twenty Twenty-Two. Zodra het thema actief is, verschijnt er een nieuw menu item <strong>Editor (beta)<\/strong> in het beheerdersmenu van het WordPress dashboard.<\/p>\n<figure id=\"attachment_113422\" aria-describedby=\"caption-attachment-113422\" style=\"width: 2002px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113422 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/wp-59-appearance-menu.jpg\" alt=\" Het nieuwe Appearance menu in WordPress 5.9.\" width=\"2002\" height=\"830\"><figcaption id=\"caption-attachment-113422\" class=\"wp-caption-text\">Het nieuwe Appearance menu in WordPress 5.9.<\/figcaption><\/figure>\n<p>De interface van de site-editor heeft nu een vernieuwde <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/#twenty-twentytwo-brings-a-new-site-editing-flow\">site editing flow<\/a>. Vanuit de editing interface kun je de startpagina, templates en template-onderdelen van de site visueel bewerken en toegang krijgen tot de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#global-styles-a-graphic-interface-for-themejson\">Global Styles interface<\/a>.<\/p>\n<figure id=\"attachment_110741\" aria-describedby=\"caption-attachment-110741\" style=\"width: 2318px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-navigation-menu.jpg\" alt=\" Het navigatiemenu van de Editor.\" width=\"2318\" height=\"1046\"><figcaption id=\"caption-attachment-110741\" class=\"wp-caption-text\">Het navigatiemenu van de Editor.<\/figcaption><\/figure>\n<p>Wanneer je een blokthema activeert, <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/07\/state-of-the-customizer-with-block-themes-in-wordpress-5-9\/\">zul je de Customizer niet vinden<\/a>. Dat komt omdat de Customizer geen blokthema&#8217;s ondersteunt, die alleen de site-editor gebruiken. Dat is ook de reden waarom <strong>je geen preview van inactieve blokthema&#8217;s kunt bekijken<\/strong>.<\/p>\n<figure id=\"attachment_113429\" aria-describedby=\"caption-attachment-113429\" style=\"width: 1650px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-113429 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/live-preview-not-available.jpg\" alt=\" De Live Preview is niet beschikbaar bij blokthema's.\" width=\"1650\" height=\"1268\"><figcaption id=\"caption-attachment-113429\" class=\"wp-caption-text\">De Live Preview is niet beschikbaar bij blokthema&#8217;s.<\/figcaption><\/figure>\n<p>Dus vanaf WordPress 5.9 is het toegangspunt tot de Customizer niet langer beschikbaar in het beheerdersmenu wanneer een blokthema actief is (tenzij je <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/04\/block-themes-a-new-way-to-build-themes-in-wordpress-5-9\/\">een plugin gebruikt die er gebruik van maakt<\/a>).<\/p>\n<p>Als je nog steeds gebonden bent aan traditionele thema&#8217;s en je je zorgen maakt over achterwaartse compatibiliteit, wees gerust: je kunt je thema blijven gebruiken.<\/p>\n<p>Je kunt momenteel kiezen uit vier verschillende categorie\u00ebn thema&#8217;s:<\/p>\n<ul>\n<li><strong>Blokthema&#8217;s<\/strong>: Thema&#8217;s ontworpen voor FSE<\/li>\n<li><strong>Universele thema&#8217;s<\/strong>: Thema&#8217;s die werken met zowel de Customizer als de Site-editor<\/li>\n<li><strong>Hybride thema&#8217;s<\/strong>: Klassieke thema&#8217;s die FSE features ondersteunen, zoals theme.json<\/li>\n<li><strong>Klassieke thema&#8217;s<\/strong>: Thema&#8217;s met PHP templates, functions.php, enz.<\/li>\n<\/ul>\n<p>Vanwege de impact die blokthema&#8217;s waarschijnlijk zullen hebben op het WordPress ecosysteem, hebben we een heel artikel over <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/\">Twenty Twenty-Two en WordPress blokthema&#8217;s<\/a>. Bekijk het zeker eens voor een uitgebreider overzicht.<\/p>\n<h2>Prestatieverbeteringen<\/h2>\n<p>Bij Kinsta zijn we geobsedeerd door <a href=\"https:\/\/kinsta.com\/nl\/leren\/wordpress-sneller-maken\/\">websitesnelheid<\/a>. Daarom zijn we enthousiast over de <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/05\/wordpress-5-9-performance-improvements\/\">prestatieverbeteringen<\/a> van WordPress 5.9.<\/p>\n<p>Deze verbeteringen zijn van invloed op verschillende delen van het CMS, van de blokeditor tot blokthema&#8217;s, Lazy Loading en meer. Laten we beginnen.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Verbeteringen in Block Inserter<\/h3>\n<p>Sinds WordPress 5.9 worden bloktypes, patronen en categorie\u00ebn gelazyload in de Block Inserter. De browser laadt eerst content met een hogere prioriteit, waardoor de gebruiker een soepelere bewerkingservaring en verbeterde prestaties krijgt.<\/p>\n<p>Verdere opmerkelijke prestatieverbeteringen in de context van de blokeditor zijn van invloed op herbruikbare blokken en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#list-view-improvements\">List View<\/a>.<\/p>\n<h3>Minder CSS geladen<\/h3>\n<p>Wat de frontend betreft, heeft WordPress 5.9 de hoeveelheid CSS die door blokthema&#8217;s wordt geladen drastisch verminderd, waardoor pagina&#8217;s aanzienlijk sneller worden geladen.<\/p>\n<p>De belangrijkste verbetering die in dit verband moet worden opgemerkt, is de introductie van de <strong>theme.json<\/strong> instellingen en stylemechanisme, dat voorkomt dat thema&#8217;s enorme stylesheets gebruiken, inclusief honderden CSS declaraties. De hoeveelheid CSS code die een thema gebruikt, is nu teruggebracht tot <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-two-blokthema\/#twenty-twentytwo-at-its-core-a-quick-overview-of-themejson\">enkele aangepaste CSS eigenschappen<\/a> die elk bloktype opnieuw kan gebruiken.<\/p>\n<h3>Prestatieverbeteringen bij Lazy Loading<\/h3>\n<p>Lazyloading van afbeeldingen werd voor het eerst <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-5\/#native-image-lazyloading-in-wordpress-core\">ge\u00efntroduceerd in WordPress 5.5<\/a>. Vanaf WordPress 5.7 werd de lazyloading functionaliteit <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-7\/#lazyloading-iframes\">uitgebreid naar iframes<\/a>, waardoor site eigenaren snellere websites konden bouwen en hun <a href=\"https:\/\/kinsta.com\/nl\/ebooks\/wordpress\/seo-verbeteren\/\">SEO konden verbeteren<\/a>.<\/p>\n<p>Hoe dan ook, na een analyse van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/core-web-vitals\/#largest-contentful-paint-lcp\">Largest Contentful Paint (LCP)<\/a> bleek dat het toewijzen van het\u00a0<code>loading=\"lazy\"<\/code> attribuut aan alle afbeeldingen en iframes op de pagina een lichte prestatievermindering veroorzaakt.<\/p>\n<p>Het simpelweg overslaan van het attribuut\u00a0<code>loading=\"lazy\"<\/code> was geen oplossing, omdat dit zou leiden tot het verlies van de duidelijke voordelen van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-lazyload\/\">lazyloading<\/a>.<\/p>\n<p>De <a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/15\/refining-wordpress-cores-lazy-loading-implementation\/\">optimale oplossing<\/a> zou zijn om het attribuut\u00a0<code>loading=\"lazy\"<\/code> alleen weg te laten voor afbeeldingen die \u201cabove the fold\u201d verschijnen. Omdat het attribuut <code>loading=\"lazy\"<\/code> echter aan de serverzijde is toegewezen, kan WordPress niet bepalen welke afbeeldingen precies above the fold worden weergegeven. Het is iets dat grotendeels afhangt van het actieve thema.<\/p>\n<p>Nu, als een afwegingsoplossing, wordt, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/12\/29\/enhanced-lazy-loading-performance-in-5-9\/\">te beginnen met WordPress 5.9<\/a>, het attribuut\u00a0<code>loading=\"lazy\"<\/code> niet toegepast op de eerste contentafbeelding of iframe. Een analyse uitgevoerd op 50 populaire <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\">WordPress thema&#8217;s<\/a> wees uit dat deze oplossing leidt tot aanzienlijke prestatieverbeteringen en dat pagina&#8217;s tot 30% sneller worden geladen.<\/p>\n<p>Felix Arntz legt uit <a href=\"https:\/\/make.wordpress.org\/core\/2021\/12\/29\/enhanced-lazy-loading-performance-in-5-9\/\">hoe het werkt<\/a>:<\/p>\n<blockquote><p>&#8230; om de prestaties out-of-the-box te verbeteren zonder dat een ontwikkelaar het gedrag hoeft aan te passen, zal WordPress nu de allereerste &#8220;contentafbeelding of iframe&#8221; op de pagina overslaan voor het lazyloaden. De term &#8220;contentafbeelding of iframe&#8221; verwijst hier naar elke afbeelding of iframe die wordt gevonden in de content van een bericht in de huidige hoofdqueryloop, evenals een uitgelichte afbeelding van een dergelijk bericht. Dit geldt zowel voor \u201csingle\u201d als voor \u201carchief\u201d content: in een \u201csingle\u201d context wordt de eerste afbeelding of iframe van de (enige) post niet gelazyload, terwijl in een \u201carchief\u201d context de eerste afbeelding of iframe van het eerste bericht in de query niet wordt gelazyload.<\/p><\/blockquote>\n<p>Themaontwikkelaars kunnen nu het nieuwe\u00a0<code>wp_omit_loading_attr_threshold<\/code> filter gebruiken om het aantal afbeeldingen\/iframes te wijzigen dat moet worden overgeslagen van lazyloading.<\/p>\n<h3>Meerdere stylesheets per blok<\/h3>\n<p>Ontwikkelaars van blokken en thema&#8217;s kunnen <a href=\"https:\/\/make.wordpress.org\/core\/2021\/12\/15\/using-multiple-stylesheets-per-block\/\">meerdere stylesheets op elk blok registreren<\/a> en indien nodig stijlen uit andere blokken laden. Hierdoor kunnen stylesheets worden geladen, afhankelijk van de paginacontent, waardoor wordt voorkomen dat thema&#8217;s enorme stylesheets op elke pagina laden.<\/p>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/12\/15\/using-multiple-stylesheets-per-block\/\">Ari Stathopoulos<\/a> zegt hierover:<\/p>\n<blockquote><p>Blokken kunnen nu meerdere stylesheets registreren en indien nodig stijlen uit andere blokken laden. Thema&#8217;s kunnen stijlen per blok toevoegen in plaats van enorme stylesheets te laden die overal geforceerd worden geladen. Dit heeft een grotere impact op blokthema&#8217;s waar het laden van stylesheets is geoptimaliseerd op basis van de pagina- en lay-outcontent, maar kan ook worden gebruikt door klassieke thema&#8217;s.<\/p><\/blockquote>\n<h2>Extra features voor ontwikkelaars<\/h2>\n<p>Naast de vele features en UI verbeteringen die tot nu toe zijn besproken, introduceert WordPress 5.9 ook verschillende features voor ontwikkelaars.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Als je nog niet bekend bent met het ontwikkelen van WordPress blokken, bekijk dan zeker onze <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">definitieve tutorial over het ontwikkelen van blokken<\/a><\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Een nieuw attribuut om blokken te vergrendelen<\/h3>\n<p>Blokontwikkelaars kunnen nu voorkomen dat gebruikers <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/01\/whats-new-in-gutenberg-11-6-29-september\/\">individuele blokken verplaatsen of verwijderen<\/a> door een \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/08\/locking-blocks-in-wordpress-5-9\/\"><code>lock<\/code>\u00a0attribuut toe te voegen<\/a> in blokinstellingen:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"lock\": {\n\t\t\t\"type\": \"object\",\n\t\t\t\"default\": {\n\t\t\t\t\"move\": true,\n\t\t\t\t\"remove\": true\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Als <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32457\">deze feature is ingeschakeld<\/a>, kunnen gebruikers de blokcontent bewerken, maar kunnen ze het blok niet op de pagina verplaatsen of het van het editorcanvas verwijderen. De volgende afbeelding toont een <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">aangepast blok<\/a> met een standaardset toolbars controls:<\/p>\n<figure id=\"attachment_112708\" aria-describedby=\"caption-attachment-112708\" style=\"width: 1288px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112708 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/custom-block-with-regular-toolbar.jpg\" alt=\" Een aangepast blok met een standaard toolbar\" width=\"1288\" height=\"946\"><figcaption id=\"caption-attachment-112708\" class=\"wp-caption-text\">Een aangepast blok met een standaard toolbar<\/figcaption><\/figure>\n<p>Het defini\u00ebren van het\u00a0<code>lock<\/code> attribuut, zoals te zien is in de bovenstaande code, verbergt de blokverplaatsers en de <strong>Move to<\/strong> en <strong>Remove <\/strong>controls van de bloktoolbar. Onderstaande afbeelding toont het eindresultaat op het scherm:<\/p>\n<figure id=\"attachment_112709\" aria-describedby=\"caption-attachment-112709\" style=\"width: 1284px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112709 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/custom-block-without-move-and-remove-controls.jpg\" alt=\" Een aangepast blok zonder Move and Remove controls\" width=\"1284\" height=\"762\"><figcaption id=\"caption-attachment-112709\" class=\"wp-caption-text\">Een aangepast blok zonder Move and Remove controls<\/figcaption><\/figure>\n<p>Je kunt ook een specifiek blok binnen een blokpatroon vergrendelen. Zie voor een voorbeeld ook <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/08\/locking-blocks-in-wordpress-5-9\/\">Blokken vergrendelen in WordPress 5.9<\/a>.<\/p>\n<h3>Nieuwe API voor toegang tot algemene instellingen en stijlen<\/h3>\n<p>WordPress 5.9 introduceert een nieuwe <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/04\/new-api-to-access-global-settings-styles\/\">openbare PHP API<\/a> om gegevens van <strong>theme.json <\/strong>te lezen.<\/p>\n<h4>Instellingen en stijlen lezen van theme.json<\/h4>\n<p>Er zijn twee nieuwe functies om gegevens te lezen van secties met\u00a0<code>settings<\/code> en <code>styles<\/code> die zijn gedeclareerd in het <strong>theme.json<\/strong>:<\/p>\n<pre><code class=\"language-php\">wp_get_global_settings( $path = array() , $context = array() );\nwp_get_global_styles( $path = array(), $context = array() );<\/code><\/pre>\n<ul>\n<li><code>$path<\/code> is een array met het pad naar de opgegeven instelling<\/li>\n<li><code>$context<\/code> is een array die de context voor die gegevens instelt. Ontwikkelaars kunnen lezen vanuit een specifieke sectie met blokinstellingen, bijvoorbeeld <code>array( 'block_name' =&gt; 'core\/paragraph' )<\/code>. De <code>orygin<\/code> sleutel die is ingesteld op <code>base<\/code> maakt het negeren van aangepaste gegevens die door de gebruiker zijn opgeslagen, mogelijk.<\/li>\n<\/ul>\n<p>De volgende voorbeeldcode retourneert de instellingswaarde\u00a0<code>contentSize<\/code> In Twenty Twenty-Two zou het <code>650px<\/code> zijn:<\/p>\n<pre><code class=\"language-php\">wp_get_global_settings( array( 'layout', 'contentSize' ) );<\/code><\/pre>\n<p>Door een context in te stellen, kun je stijlen voor specifieke blokken ophalen. De volgende code laat zien hoe je de border radius waarde voor het\u00a0<code>core\/button<\/code> blok kunt ophalen:<\/p>\n<pre><code class=\"language-php\">function get_global_styles() {\n\treturn\n\twp_get_global_styles(\n\t\tarray( 'border', 'radius' ),\n\t\tarray( 'block_name' =&gt; 'core\/button' )\n\t);\n}<\/code><\/pre>\n<p>De bovenstaande functie retourneert de vereiste property waarde, rekening houdend met standaardinstellingen, thema-instellingen en gebruikersgegevens. De aangepaste waarde wordt geleverd als de gebruiker de border radius van de knop configureert in de Global Styles interface.<\/p>\n<p>Om gebruikersgegevens te negeren, gebruik je de volgende code:<\/p>\n<pre><code class=\"language-php\">function get_global_styles() {\n\treturn\n\twp_get_global_styles(\n\t\tarray( 'border', 'radius' ),\n\t\tarray( 'block_name' =&gt; 'core\/button', 'origin' =&gt; 'base' )\n\t);\n}<\/code><\/pre>\n<h4>De gegenereerde stylesheet verkrijgen<\/h4>\n<p>WordPress 5.9 introduceert ook een nieuwe functie om de stylesheet te krijgen die het resultaat is van standaard-, thema- en aangepaste stijlen:<\/p>\n<pre><code class=\"language-php\">wp_get_global_stylesheet( $types = array() );<\/code><\/pre>\n<p><code>$types<\/code> is een lijst van de stijlen die moeten worden gegenereerd.<\/p>\n<p>Je kunt meer lezen over de nieuwe API in <a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/04\/new-api-to-access-global-settings-styles\/\">Nieuwe API om toegang te krijgen tot algemene instellingen en stijlen.<\/a><\/p>\n<h3>Meer features voor ontwikkelaars<\/h3>\n<p>Aanvullende WordPress 5.9 wijzigingen voor ontwikkelaars waarover je misschien meer wilt weten, zijn onder meer:<\/p>\n<ul>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/04\/block-themes-a-new-way-to-build-themes-in-wordpress-5-9\/\">Thema&#8217;s blokkeren, een nieuwe manier om thema&#8217;s te bouwen in WordPress 5.9<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/08\/updates-for-settings-styles-and-theme-json\/\">Updates voor instellingen, stijlen en theme.json<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/07\/theme-focused-changes-and-filters-in-wordpress-5-9\/\">Themagerichte wijzigingen en filters in WordPress 5.9<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/05\/new-capability-queries-in-wordpress-5-9\/\">Nieuwe Capability queries in WordPress 5.9<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/04\/miscellaneous-core-changes-in-wordpress-5-9\/\">Diverse core wijzigingen in WordPress 5.9<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/01\/04\/miscellaneous-block-editor-changes-in-wordpress-5-9\/\">Diverse wijzigingen in de blokeditor in WordPress 5.9<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/12\/28\/take-more-control-over-inner-block-areas-as-a-block-developer\/\">Neem meer controle over Inner Block Areas (als blokontwikkelaar)<\/a><\/li>\n<\/ul>\n\n<h2>Samenvatting<\/h2>\n<p>We sluiten dit artikel af met een korte opmerking over het <a href=\"https:\/\/kinsta.com\/nl\/wordpress-marktaandeel\/\">marktaandeel van WordPress<\/a>. WordPress beheert momenteel meer dan 65% van alle websites waarvan het contentmanagementsysteem bekend is en dat is meer dan <strong>43% van alle websites<\/strong>.<\/p>\n<p>Deze cijfers zijn indrukwekkend, vooral in vergelijking met de naaste concurrenten met een marktaandeel van minder dan 5%, zoals Shopify.<\/p>\n<p>En dit betekent ook dat je de evolutie <a href=\"https:\/\/kinsta.com\/blog\/content-management-system\/\">van het WP CMS<\/a> niet over het hoofd kunt zien. Elke <a href=\"https:\/\/kinsta.com\/nl\/blog\/huidige-wordpress-versie\/\">nieuwe versie van WordPress<\/a> brengt nieuwe features, interfaceverbeteringen, prestatieverbeteringen en WordPress 5.9 is geen uitzondering. Het enige dat je nodig hebt om de nieuwe features te testen, is een blokthema, zoals het nieuwe Twenty Twenty-Two standaardthema, en je bent klaar voor de start.<\/p>\n<p><em>Nu ben jij aan de beurt! Ben je klaar om de overstap te maken naar blokthema&#8217;s en FSE? En wat zijn je favoriete veranderingen met WordPress 5.9?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 5.9 Josephine is gearriveerd! De eerste WordPress versie van het jaar stond oorspronkelijk gepland voor 14 december 2021. Vanwege verschillende openstaande problemen en onopgeloste bugs &#8230;<\/p>\n","protected":false},"author":36,"featured_media":41805,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[75,523,524,29,28],"topic":[907],"class_list":["post-41803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cms","tag-editing","tag-updates","tag-webdev","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.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#039;s, UI verbeteringen en nog veel meer<\/title>\n<meta name=\"description\" content=\"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\" \/>\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.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#039;s, UI verbeteringen en nog veel meer\" \/>\n<meta property=\"og:description\" content=\"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\" \/>\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=\"2022-01-25T07:09:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T14:02:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg\" \/>\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=\"39 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#8217;s, UI verbeteringen en nog veel meer\",\"datePublished\":\"2022-01-25T07:09:53+00:00\",\"dateModified\":\"2024-02-20T14:02:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\"},\"wordCount\":5891,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg\",\"keywords\":[\"CMS\",\"editing\",\"updates\",\"webdev\",\"WordPress\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\",\"name\":\"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg\",\"datePublished\":\"2022-01-25T07:09:53+00:00\",\"dateModified\":\"2024-02-20T14:02:53+00:00\",\"description\":\"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress updates\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-updates\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#8217;s, UI verbeteringen en nog veel meer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer","description":"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!","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:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/","og_locale":"nl_NL","og_type":"article","og_title":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer","og_description":"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-01-25T07:09:53+00:00","article_modified_time":"2024-02-20T14:02:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"39 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#8217;s, UI verbeteringen en nog veel meer","datePublished":"2022-01-25T07:09:53+00:00","dateModified":"2024-02-20T14:02:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/"},"wordCount":5891,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg","keywords":["CMS","editing","updates","webdev","WordPress"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/","name":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg","datePublished":"2022-01-25T07:09:53+00:00","dateModified":"2024-02-20T14:02:53+00:00","description":"Bekijk onze uitgebreide review van WordPress 5.9 en ontdek alle belangrijke features die worden ge\u00efntroduceerd in deze eerste WordPress release van 2022!","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/01\/wordpress-5-9.jpeg","width":1460,"height":730,"caption":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API's, UI verbeteringen en nog veel meer"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-9\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress updates","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-updates\/"},{"@type":"ListItem","position":3,"name":"Wat is er nieuw in WordPress 5.9 \u2013 Full Site Editing, Global Styles, blokken, patronen, API&#8217;s, UI verbeteringen en nog veel meer"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/41803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=41803"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/41803\/revisions"}],"predecessor-version":[{"id":58443,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/41803\/revisions\/58443"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/de"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/translations\/jp"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/41803\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/41805"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=41803"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=41803"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=41803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}