{"id":65466,"date":"2026-05-04T11:41:33","date_gmt":"2026-05-04T09:41:33","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=65466&#038;preview=true&#038;preview_id=65466"},"modified":"2026-05-11T10:32:58","modified_gmt":"2026-05-11T08:32:58","slug":"wordpress-7-0","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/","title":{"rendered":"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken en nog veel meer"},"content":{"rendered":"<p>Zet het vuurwerk maar klaar! Met 7.0 gaat WordPress een gedurfd nieuw tijdperk in.<\/p>\n<p>Het is waarschijnlijk de grootste sprong die het platform de afgelopen jaren heeft gemaakt.<\/p>\n<p>WordPress 7.0 verbetert de beheerinterface en introduceert het nieuwe blokken en ontwikkelaarstools, zoals de iframed post editor en PHP-only blokken.<\/p>\n<p>Zet een kopje koffie en maak het je gemakkelijk, want dit wordt een lang en spannend verhaal.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Integratie met AI<\/h2>\n<p>Met 7.0 heeft WordPress een grote evolutionaire sprong voorwaarts gemaakt. Vergeet het blogging platform van de begindagen. Vandaag de dag is WordPress een samenwerkingsplatform dat helemaal klaar is voor kunstmatige intelligentie.<\/p>\n<p>Dit ambitieuze project had als doel om een betrouwbare, veilige infrastructuur te bieden waarmee WordPress gebruikers en plugin-ontwikkelaars op een gestandaardiseerde manier kunnen communiceren met Large Language Models (LLM&#8217;s).<\/p>\n<p>Het nieuwe architectuurparadigma maakt de weg vrij voor &#8220;agentic WordPress&#8221;. Het is een verschuiving naar agentic usability waarbij WordPress van nature in staat is om te communiceren met externe AI Agents via gestandaardiseerde, machinevriendelijke interfaces.<\/p>\n<p>Er valt veel te zeggen, maar voordat we ingaan op de details van de AI-integratie, volgen hier enkele voorlopige definities.<\/p>\n<h3>WordPress AI architectuur: basisbegrippen<\/h3>\n<p>Om de AI architectuur van WordPress 7.0 te begrijpen, is het essentieel om vier kritieke componenten te identificeren.<\/p>\n<ul>\n<li><strong>AI Client:<\/strong> Een <a href=\"https:\/\/make.wordpress.org\/core\/2026\/02\/03\/proposal-for-merging-wp-ai-client-into-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">provider-onafhankelijke AI-infrastructuur<\/a> die een gestandaardiseerde manier biedt voor WordPress PHP en JS code om te communiceren met generatieve AI-modellen. Omdat de AI Client provider-agnostisch is, kan het systeem onafhankelijk van een bepaalde AI provider werken.<\/li>\n<li><strong>AI Provider:<\/strong> De entiteit of het bedrijf dat grote taalmodellen (LLM&#8217;s) ontwikkelt, bezit en beheert, zoals Anthropic, Google en OpenAI.<\/li>\n<li><strong>Connector:<\/strong> Het onderdeel dat <a href=\"https:\/\/developer.wordpress.org\/news\/2026\/03\/whats-new-for-developers-march-2026\/#ai-provider-packages-in-the-plugin-directory\" target=\"_blank\" rel=\"noopener noreferrer\">integratie tussen WordPress en AI providers mogelijk maakt<\/a>. WordPress 7.0 bevat 3 standaard connectors &#8211; OpenAI, Anthropic en Google &#8211; die toegankelijk zijn via <b>Settings <\/b>&gt; <strong>Connectors<\/strong>.<\/li>\n<li><strong>Abilities API:<\/strong> Een nieuwe <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-9\/#abilities-api\">functionele interface<\/a> die is ontworpen om plugins, thema&#8217;s en de core van WordPress in staat te stellen hun opties kenbaar te maken in zowel mens- als machineleesbare formats, zodat AI-agents op een gestructureerde manier kunnen communiceren met WordPress functies (bijvoorbeeld berichten maken of een uittreksel toevoegen). Dit is wat WordPress 7.0 <strong>uit zichzelf agentic<\/strong> maakt.<\/li>\n<\/ul>\n<figure id=\"attachment_207401\" aria-describedby=\"caption-attachment-207401\" style=\"width: 1940px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207401 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-connectors-screen.jpg\" alt=\"Het Connectors-scherm in WordPress 7.0.\" width=\"1940\" height=\"1296\"><figcaption id=\"caption-attachment-207401\" class=\"wp-caption-text\">Het Connectors-scherm in WordPress 7.0.<\/figcaption><\/figure>\n<h3>Connectors<\/h3>\n<p>In eerdere versies van WordPress had je voor elke AI-provider een aparte plugin nodig. WordPress 7.0 introduceert een centrale <a href=\"https:\/\/developer.wordpress.org\/news\/2026\/03\/whats-new-for-developers-march-2026\/#ai-provider-packages-in-the-plugin-directory\" target=\"_blank\" rel=\"noopener noreferrer\">interface voor het beheren van AI-connectors<\/a> via <b>Settings <\/b>&gt; <strong>Connectors<\/strong>.<\/p>\n<p>Je hoeft je API-sleutels niet meer op meerdere plekken in te vullen. Voer je sleutels eenmalig in via de <strong>Connectors <\/strong>pagina en alle compatibele plugins kunnen die verbinding gebruiken via de <a href=\"https:\/\/github.com\/WordPress\/wp-ai-client\" target=\"_blank\" rel=\"noopener noreferrer\">AI Client<\/a>.<\/p>\n<p>Daarnaast kun je via de nieuwe interface eenvoudig wisselen tussen AI-providers, zonder het risico iets te breken.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>WordPress stuurt standaard <a href=\"https:\/\/core.trac.wordpress.org\/changeset\/61700\/\">geen prompts of gegevens<\/a> naar AI-diensten zonder je uitdrukkelijke toestemming en de configuratie van de dienst.<\/p>\n<\/aside>\n\n<p>Klik in de <strong>Connectors <\/strong>pagina op <b>Install <\/b>bij je AI-provider en voer je API-sleutel in. Sla je instellingen op en je bent klaar om te communiceren met de AI-provider op je WordPress site.<\/p>\n<figure id=\"attachment_207521\" aria-describedby=\"caption-attachment-207521\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207521 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-add-google-api-key.jpg\" alt=\"Een API-sleutel toevoegen in de Connectors-interface.\" width=\"1302\" height=\"1268\"><figcaption id=\"caption-attachment-207521\" class=\"wp-caption-text\">Een API-sleutel toevoegen in de Connectors-interface.<\/figcaption><\/figure>\n<p>Weet je niet waar je moet beginnen? Installeer dan de <a href=\"https:\/\/make.wordpress.org\/ai\/2026\/03\/12\/whats-new-in-ai-experiments-0-5-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">AI Experiments plugin<\/a>. Hiermee kun je AI-gegenereerde uitgelichte afbeeldingen, alt-tekst, samenvattingen en meer toevoegen.<\/p>\n<figure id=\"attachment_207522\" aria-describedby=\"caption-attachment-207522\" style=\"width: 1978px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207522 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-ai-experiments-settings.png\" alt=\"Instellingen van de AI Experiments plugin.\" width=\"1978\" height=\"1834\"><figcaption id=\"caption-attachment-207522\" class=\"wp-caption-text\">Instellingen van de AI Experiments plugin.<\/figcaption><\/figure>\n<p>De nieuwe AI-integratie introduceert niet alleen een vernieuwde gebruikersinterface, maar stelt ontwikkelaars ook in staat nieuwe AI-providers te registreren via de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/18\/introducing-the-connectors-api-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Connectors API<\/a>.<\/p>\n<p>Ontwikkelaars kunnen connectors registreren en beheren met de nieuwe core klassen en -methoden. Na registratie verschijnt elke connector als een kaart in het Connectors-scherm.<\/p>\n<p>De nieuwe API biedt ook drie publieke functies.<\/p>\n<ul>\n<li><code>wp_is_connector_registered()<\/code>: Controleert of een connector is geregistreerd.<\/li>\n<li><code>wp_get_connector()<\/code>: Haalt de gegevens van een enkele connector op.<\/li>\n<li><code>wp_get_connectors()<\/code>: Haalt alle geregistreerde connectors op.<\/li>\n<\/ul>\n<p>Daarnaast kun je met de nieuwe action hook <code>wp_connectors_init<\/code> de metadata van geregistreerde connectors overschrijven.<\/p>\n<h3>Bouwen met de AI Client<\/h3>\n<p>Het <strong>Connectors <\/strong>scherm verzorgt de AI-interface. De <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/24\/introducing-the-ai-client-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">AI Client is de motor onder de motorkap<\/a> &#8211; een uniforme abstractielaag die standaardiseert hoe WordPress met AI communiceert. Of het nu OpenAI, Anthropic of Google Gemini is, je code blijft hetzelfde. WordPress regelt de vertaling, zodat jij je kunt richten op de logica van je applicatie.<\/p>\n<p>De nieuwe <a href=\"https:\/\/github.com\/WordPress\/wp-ai-client\" target=\"_blank\" rel=\"noopener noreferrer\"><code>wp_ai_client_prompt()<\/code> functie<\/a> is het centrale onderdeel van deze aanpak.<\/p>\n<p>Hier is een eenvoudig voorbeeld in PHP:<\/p>\n<pre><code class=\"language-php\">$ai_response = wp_ai_client_prompt( \"Create a professional post about WordPress\" )\n\t-&gt;generate_text();\n\nif ( is_wp_error( $ai_response ) ) {\n\twp_die( $ai_response-&gt;get_error_message() );\n}\n\necho wp_kses_post( $ai_response );<\/code><\/pre>\n<p>Het volgende voorbeeld laat zien hoe je het antwoordschema definieert om de gegevens direct bruikbaar te maken.<\/p>\n<pre><code class=\"language-php\">$taxonomy_schema = array(\n\t'type'       =&gt; 'object',\n\t'properties' =&gt; array(\n\t\t'category' =&gt; array( 'type' =&gt; 'string' ),\n\t\t'tags'     =&gt; array( \n\t\t\t'type'  =&gt; 'array',\n\t\t\t'items' =&gt; array( 'type' =&gt; 'string' )\n\t\t),\n\t),\n\t'required'   =&gt; array( 'category', 'tags' ),\n);\n\n$post_body = \"Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.\";\n\n$json = wp_ai_client_prompt( \"Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body\" )\n\t-&gt;using_temperature( 0.1 )\n\t-&gt;as_json_response( $taxonomy_schema )\n\t-&gt;generate_text();\n\nif ( is_wp_error( $json ) ) {\n\treturn $json;\n}\n\n$suggested_taxonomies = json_decode( $json, true );<\/code><\/pre>\n<p>Voor deze code geldt het volgende:<\/p>\n<ul>\n<li>Met <code>as_json_response()<\/code> zorgt WordPress ervoor dat de uitvoer pure JSON is die voldoet aan het opgegeven schema (<code>$taxonomy_schema<\/code>).<\/li>\n<li><code>using_temperature()<\/code> bepaalt hoe de AI reageert: meer of minder deterministisch. Een lage temperatuur (<code>0.1<\/code>) levert meer precisie op, een hogere waarde stimuleert creatievere uitvoer.<\/li>\n<li>De array <code>$suggested_taxonomies<\/code> bevat de categorie\u00ebn en tags die door de AI zijn gegenereerd. Je kunt deze automatisch toewijzen aan je bericht.<\/li>\n<\/ul>\n<p>Gestructureerde uitvoer levert voorspelbare resultaten op en is ideaal voor gebruik met de Abilities API. De bovenstaande code kan bijvoorbeeld worden ingezet om automatisch een bericht aan te maken met de opgegeven categorie en tags.<\/p>\n<p>De API ondersteunt meer dan alleen tekst. Met de methode <code>generate_image()<\/code> kan de AI Client ook afbeeldingen genereren.<\/p>\n<p>Je kunt meerdere resultaten opvragen met \u00e9\u00e9n call. Wil je bijvoorbeeld 3 tekst- of afbeeldingsvariaties, geef dan een numerieke waarde mee aan <code>generate_text()<\/code> of <code>generate_image()<\/code>: door <code>generate_image( 3 )<\/code> aan te roepen, krijg je 3 variaties van dezelfde afbeelding.<\/p>\n<p>De API biedt ook een set methoden die extra informatie teruggeven. Deze methoden retourneren een <code>GenerativeAiResult<\/code>-object met uitgebreide metadata, zoals het tokengebruik, de provider en het model dat op de prompt heeft gereageerd:<\/p>\n<ul>\n<li><code>generate_text_result()<\/code><\/li>\n<li><code>generate_image_result()<\/code><\/li>\n<li><code>convert_text_to_speech_result()<\/code><\/li>\n<li><code>generate_speech_result()<\/code><\/li>\n<li><code>generate_video_result()<\/code><\/li>\n<\/ul>\n<p>Zoals je ziet, bieden deze methoden aanvullende mogelijkheden &#8211; waaronder ondersteuning voor tekst-naar-spraak, spraak en videoconversie.<\/p>\n<p>Andere API-methoden zijn:<\/p>\n<ul>\n<li><code>using_max_tokens()<\/code>: Beperk de lengte van het antwoord (bijv. <code>-&gt;using_max_tokens( 500 )<\/code>)<\/li>\n<li><code>using_model_preference()<\/code>: Stel een specifiek model in (bijv. <code>-&gt;using_model_preference( 'gemini-2.5-flash' )<\/code>)<\/li>\n<\/ul>\n<p>Voor een uitgebreide analyse en aanvullende codevoorbeelden, zie de <a href=\"https:\/\/github.com\/WordPress\/wp-ai-client\" target=\"_blank\" rel=\"noopener noreferrer\">WP AI Client<\/a> GitHub-projectpagina en de wijzigingen die zijn doorgevoerd ter <a href=\"https:\/\/github.com\/WordPress\/wp-ai-client\/blob\/trunk\/UPGRADE.md\" target=\"_blank\" rel=\"noopener noreferrer\">voorbereiding op WordPress 7.0<\/a>.<\/p>\n<h2>Nieuwe blokken en ontwerptools<\/h2>\n<p>WordPress 7.0 introduceert nieuwe blokken en ontwerptools die de bewerkingservaring aanzienlijk verbeteren. Dit is wat er nieuw is en hoe je creatieve workflows veranderen.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"11\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Nieuw: Breadcrumbs-blok<\/h3>\n<p>WordPress 7.0 introduceert een nieuw <a href=\"https:\/\/make.wordpress.org\/core\/2025\/12\/03\/whats-new-in-gutenberg-22-2-dec3\/#breadcrumbs-block-enhancements\" target=\"_blank\" rel=\"noopener noreferrer\">Breadcrumbs-blok<\/a> dat de paginahi\u00ebrarchie weergeeft.<\/p>\n<p>Het nieuwe blok bevat een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/72498\" target=\"_blank\" rel=\"noopener noreferrer\">dynamische component<\/a> die de WordPress-datastructuur bevraagt om automatisch de huidige locatie van sitebezoekers te bepalen &#8211; op basis van de paginahi\u00ebrarchie (parent\/child) of de taxonomietermen van het bericht.<\/p>\n<p>In de afbeelding hieronder toont het Breadcrumbs-blok de categoriehi\u00ebrarchie van een gewone blogpost.<\/p>\n<figure id=\"attachment_206612\" aria-describedby=\"caption-attachment-206612\" style=\"width: 2146px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206612 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-breadcrumbs-block-settings-1.png\" alt=\"Het Breadcrumbs-blok geeft de categoriehi\u00ebrarchie van de post weer.\" width=\"2146\" height=\"916\"><figcaption id=\"caption-attachment-206612\" class=\"wp-caption-text\">Het Breadcrumbs-blok geeft de categoriehi\u00ebrarchie van de post weer.<\/figcaption><\/figure>\n<p>Het Breadcrumbs-blok werkt ook samen met de Query Loop. Voeg je een Breadcrumbs-blok toe aan een Query Loop-blok, dan geeft het de paden weer van individuele berichten die uit de query zijn opgehaald.<\/p>\n<p>Het Breadcrumbs-blok heeft een aantal configuratieopties waarmee je:<\/p>\n<ul>\n<li>De link naar de startpagina als beginpunt van de navigatie toont of verbergt.<\/li>\n<li>De huidige breadcrumb toont of verbergt.<\/li>\n<li>Het scheidingsteken tussen breadcrumbs aanpast.<\/li>\n<li>Breadcrumbs op de startpagina weergeeft.<\/li>\n<li>De voorkeur geeft aan berichthi\u00ebrarchie (standaard) of taxonomietermenhi\u00ebrarchie.<\/li>\n<\/ul>\n<p>Het Breadcrumbs-blok ondersteunt de Gutenberg-ontwerptools en <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/04\/breadcrumb-block-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">introduceert twee filters<\/a> waarmee ontwikkelaars breadcrumbs programmatisch kunnen aansturen.<\/p>\n<p>Met het nieuwe filter <code>block_core_breadcrumbs_post_type_settings<\/code> kunnen ontwikkelaars aangeven welke taxonomie en term moeten worden gebruikt als een post meerdere taxonomie\u00ebn of termen heeft.<\/p>\n<p>In het volgende voorbeeld wordt het filter gebruikt om tags weer te geven in plaats van categorie\u00ebn:<\/p>\n<pre><code class=\"language-php\">add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {\n\tif ( 'post' === $post_type ) {\n\t\t$settings['taxonomy'] = 'post_tag';\n\t}\n\treturn $settings;\n}, 10, 2 );<\/code><\/pre>\n<p>Met het filter <code>block_core_breadcrumbs_items<\/code> kunnen ontwikkelaars items wijzigen, toevoegen of verwijderen uit het uiteindelijke breadcrumb-pad voordat het wordt weergegeven. Enkele gebruikssituaties:<\/p>\n<ul>\n<li>Vervang het Home-pictogram door een afbeelding (een SVG, je bedrijfslogo, enz.) om ruimte te besparen of de uitvoer beter af te stemmen op de huisstijl van je site.<\/li>\n<li>Verkort de titel van een bericht in de breadcrumbs als die te lang is.<\/li>\n<li>Voeg aangepaste categorie\u00ebn of termen in, bijvoorbeeld door een stap in het breadcrumb-pad af te dwingen.<\/li>\n<\/ul>\n<p>De volgende code gebruikt het nieuwe filter om breadcrumb-labels in te korten als de lengte meer dan 20 tekens bedraagt:<\/p>\n<pre><code class=\"language-php\">add_filter( 'block_core_breadcrumbs_items', function( $items ) {\n\tforeach ( $items as $key =&gt; $item ) {\n\t\tif ( mb_strlen( $item['label'] ) &gt; 20 ) {\n\t\t\t\/\/ Truncate the string to 17 characters and append '...'\n\t\t\t$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );\n\t\t}\n\t}\n\treturn $items;\n}, 10, 1 );<\/code><\/pre>\n<p>Voor een uitgebreider overzicht van breadcrumb-blokfilters en aanvullende codevoorbeelden, zie de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/04\/breadcrumb-block-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">dev note<\/a>.<\/p>\n<h3>Nieuw: Icon-blok<\/h3>\n<p>Met het nieuwe <a href=\"https:\/\/make.wordpress.org\/core\/2026\/02\/25\/whats-new-in-gutenberg-22-6-25-february\/#icon-block\" target=\"_blank\" rel=\"noopener noreferrer\">Icon-blok<\/a> kun je SVG-pictogrammen toevoegen aan je inhoud. Het blok biedt <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/16484\" target=\"_blank\" rel=\"noopener noreferrer\">een native standaardoplossing<\/a> voor het beheren van markup en het waarborgen van toegankelijkheidsconsistentie &#8211; zonder dat je een plugin van derden nodig hebt voor een paar pictogrammen.<\/p>\n<p>Op dit moment wordt het blok geleverd met een standaardset waaruit je kunt kiezen. Er zijn plannen om in de toekomst de mogelijkheid toe te voegen voor gebruikers om pictogrammensets van derden te registreren.<\/p>\n<figure id=\"attachment_206608\" aria-describedby=\"caption-attachment-206608\" style=\"width: 2214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206608 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-icon-library.png\" alt=\"De pictogrammenbibliotheek in WordPress 7.0.\" width=\"2214\" height=\"1400\"><figcaption id=\"caption-attachment-206608\" class=\"wp-caption-text\">De pictogrammenbibliotheek in WordPress 7.0.<\/figcaption><\/figure>\n<p>Het blok is gebouwd op een nieuwe server-side <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/72215\" target=\"_blank\" rel=\"noopener noreferrer\">SVG Icon Registration API<\/a>. Dit zorgt ervoor dat updates van het pictogrammenregister foutloos worden doorgevoerd voor alle gebruikers. Bij de introductie van het Icon-blok hoort ook een nieuw <code>\/wp\/v2\/icons<\/code> API-eindpunt.<\/p>\n<figure id=\"attachment_206609\" aria-describedby=\"caption-attachment-206609\" style=\"width: 1702px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206609 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-icons.png\" alt=\"Pictogrammen toevoegen aan je content is eenvoudig met het nieuwe Icon-blok.\" width=\"1702\" height=\"986\"><figcaption id=\"caption-attachment-206609\" class=\"wp-caption-text\">Pictogrammen toevoegen aan je content is eenvoudig met het nieuwe Icon-blok.<\/figcaption><\/figure>\n<h3>Aanpasbare navigatie-overlays<\/h3>\n<p>V\u00f3\u00f3r WordPress 7.0 waren mobiele navigatiemenu&#8217;s statisch &#8211; je kon het ontwerp, de layout of de standaardinhoud niet aanpassen. WordPress 7.0 introduceert <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/04\/customisable-navigation-overlays-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">aanpasbare navigatie-overlays<\/a>, waarmee je volledige controle krijgt over je navigatiemenu&#8217;s. Je kunt een menu-overlay bouwen met blokken en patronen, en een nieuw <strong>Navigation Overlay Close<\/strong>-blok gebruiken om overal in de overlay een sluitknop toe te voegen.<\/p>\n<p>Technisch gezien zijn navigatie-overlays sjabloononderdelen. Zodra je er een hebt aangemaakt, vind je die terug in de <b>Patterns <\/b>sectie van de Site Editor-zijbalk. Elke overlay wordt gekoppeld aan een navigatieblok, maar je kunt meerdere navigatieblokken aan dezelfde overlay toewijzen.<\/p>\n<p>In feite zijn het blokcanvassen die elk type blok kunnen bevatten. Je kunt een navigatieblok toevoegen, maar welke blokken je gebruikt is volledig aan jou &#8211; denk aan sociale pictogrammen, een zoekveld of het logo van je site.<\/p>\n<p>Navigatie-overlays zijn uitsluitend bedoeld voor gebruik in het navigatieblok. Om te voorkomen dat ze per ongeluk elders in een sjabloon worden ingezet, zijn ze uitgesloten van de blokken-invoeginterface.<\/p>\n<figure id=\"attachment_206595\" aria-describedby=\"caption-attachment-206595\" style=\"width: 1932px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-create-overlay.png\" alt=\"Een navigatie-overlay aanmaken in WordPress 7.0.\" width=\"1932\" height=\"1731\"><figcaption id=\"caption-attachment-206595\" class=\"wp-caption-text\">Een navigatie-overlay aanmaken in WordPress 7.0.<\/figcaption><\/figure>\n<p>Je kunt een aangepaste navigatie-overlay aanmaken via de sectie <strong>Overlays<\/strong> in de zijbalk van het navigatieblok in de Site Editor.<\/p>\n<p>Als je het navigatieblok selecteert, toont de sjabloononderdeel-zijbalk de instellingen voor de <strong>navigatie-overlay<\/strong>, verdeeld in twee secties. De sectie <b>Content <\/b>toont de bloktypen die in de overlay zijn opgenomen, terwijl de sectie <b>Design <\/b>een reeks vooraf gedefinieerde ontwerpen biedt.<\/p>\n<figure id=\"attachment_206597\" aria-describedby=\"caption-attachment-206597\" style=\"width: 1882px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-navigation-overlay-settings-2.png\" alt=\"Instellingen van het Navigation Overlay-template part.\" width=\"1882\" height=\"1332\"><figcaption id=\"caption-attachment-206597\" class=\"wp-caption-text\">Instellingen van het Navigation Overlay-template part.<\/figcaption><\/figure>\n<p>De blokzijbalk is verdeeld in twee tabbladen: \u00e9\u00e9n voor instellingen en \u00e9\u00e9n voor stijlen van het Navigation Overlay template part.<\/p>\n<figure id=\"attachment_206599\" aria-describedby=\"caption-attachment-206599\" style=\"width: 1926px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-navigation-overlay-blocks.png\" alt=\"Blokken configureren in een Navigation Overlay.\" width=\"1926\" height=\"1400\"><figcaption id=\"caption-attachment-206599\" class=\"wp-caption-text\">Blokken configureren in een Navigation Overlay.<\/figcaption><\/figure>\n<p>Op het tabblad <b>Styles <\/b>van het Navigation Overlay-blok kun je het uiterlijk van je overlay aanpassen via kleuren, achtergrondafbeelding, typografie, afmetingen, rand en schaduw.<\/p>\n<figure id=\"attachment_206602\" aria-describedby=\"caption-attachment-206602\" style=\"width: 1882px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206602 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-navigation-overlay-styles.png\" alt=\"Stijlinstellingen van de Navigation Overlay.\" width=\"1882\" height=\"1380\"><figcaption id=\"caption-attachment-206602\" class=\"wp-caption-text\">Stijlinstellingen van de Navigation Overlay.<\/figcaption><\/figure>\n<p>Thema-ontwikkelaars kunnen eenvoudig kant-en-klare navigatie-overlays aan hun thema&#8217;s toevoegen. Je kunt zowel een standaard overlay-template part (de overlay zelf) als een set overlay patterns aanleveren &#8211; vooraf gemaakte ontwerpen die verschijnen wanneer je een navigatie-overlay bewerkt.<\/p>\n<figure id=\"attachment_206603\" aria-describedby=\"caption-attachment-206603\" style=\"width: 1884px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206603 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-navigation-pre-built-designs.png\" alt=\"De sectie Designs in de Template Part-zijbalk biedt een reeks kant-en-klare patronen.\" width=\"1884\" height=\"1296\"><figcaption id=\"caption-attachment-206603\" class=\"wp-caption-text\">De sectie Designs in de Template Part-zijbalk biedt een reeks kant-en-klare patronen.<\/figcaption><\/figure>\n<p>Voor een uitgebreider overzicht en codevoorbeelden, zie de offici\u00eble <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/04\/customisable-navigation-overlays-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">dev note<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73359\" target=\"_blank\" rel=\"noopener noreferrer\">dit pull request<\/a>.<\/p>\n<figure id=\"attachment_206601\" aria-describedby=\"caption-attachment-206601\" style=\"width: 1930px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206601 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-navigation-overlay-close-block-settings.png\" alt=\"Instellingen van het Navigation Overlay Close-blok.\" width=\"1930\" height=\"880\"><figcaption id=\"caption-attachment-206601\" class=\"wp-caption-text\">Instellingen van het Navigation Overlay Close-blok.<\/figcaption><\/figure>\n<h3>Verbeteringen aan het Paragraph-blok<\/h3>\n<p>Verschillende nieuwe toevoegingen aan het Paragraph-blok bieden meer flexibiliteit in tekststijlen. Ten eerste kun je met een nieuwe optie in de Typografie-instellingen de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/15\/new-block-support-text-indent-textindent\/\" target=\"_blank\" rel=\"noopener noreferrer\">inspringing van de eerste regel<\/a> instellen.<\/p>\n<figure id=\"attachment_208154\" aria-describedby=\"caption-attachment-208154\" style=\"width: 2040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208154 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-line-indent-1.png\" alt=\"Regelinspringing in WordPress 7.0.\" width=\"2040\" height=\"774\"><figcaption id=\"caption-attachment-208154\" class=\"wp-caption-text\">Regelinspringing in WordPress 7.0.<\/figcaption><\/figure>\n<p>Je kunt de inspringing instellen voor individuele alinea&#8217;s, of globaal toepassen via de Globale stijlinstellingen onder <strong>Editor<\/strong> &gt; <b>Styles <\/b>&gt; <b>Blocks <\/b>&gt; <strong>Paragraph<\/strong>.<\/p>\n<figure id=\"attachment_208150\" aria-describedby=\"caption-attachment-208150\" style=\"width: 2308px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208150 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-line-indent-global-styles.png\" alt=\"Regelinspringing in Global Styles.\" width=\"2308\" height=\"636\"><figcaption id=\"caption-attachment-208150\" class=\"wp-caption-text\">Regelinspringing in Global Styles.<\/figcaption><\/figure>\n<p>Thema-ontwikkelaars kunnen regelinspringing in- of uitschakelen en gedetailleerd instellen via het <code>theme.json<\/code>-bestand, met de nieuwe <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74889\" target=\"_blank\" rel=\"noopener noreferrer\"><code>textIndent<\/code>\u00a0property<\/a>.<\/p>\n<p>Het Paragraph-blok ondersteunt nu ook <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73958\" target=\"_blank\" rel=\"noopener noreferrer\">brede en volledige uitlijning<\/a>. De volgende afbeelding toont de nieuwe <strong>uitlijningmogelijkheid<\/strong>.<\/p>\n<figure id=\"attachment_208151\" aria-describedby=\"caption-attachment-208151\" style=\"width: 1354px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208151 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-paragraph-block-align-control.png\" alt=\"Het Paragraph-blok ondersteunt nu brede en volledige uitlijning.\" width=\"1354\" height=\"622\"><figcaption id=\"caption-attachment-208151\" class=\"wp-caption-text\">Het Paragraph-blok ondersteunt nu brede en volledige uitlijning.<\/figcaption><\/figure>\n<p>Een andere handige toevoeging is de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74656\" target=\"_blank\" rel=\"noopener noreferrer\">ondersteuning voor tekstkolommen<\/a>. Deze nieuwe optie is beschikbaar onder de <strong>Typography <\/strong>settings in de zijbalk van het blok.<\/p>\n<figure id=\"attachment_208152\" aria-describedby=\"caption-attachment-208152\" style=\"width: 2060px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208152 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-paragraph-block-columns.png\" alt=\"Het Paragraph-blok ondersteunt nu tekstkolommen.\" width=\"2060\" height=\"1034\"><figcaption id=\"caption-attachment-208152\" class=\"wp-caption-text\">Het Paragraph-blok ondersteunt nu tekstkolommen.<\/figcaption><\/figure>\n<h3>Ingesloten achtergrondvideo&#8217;s voor het Cover-blok<\/h3>\n<p>Met WordPress 7.0 kun je ingesloten video&#8217;s &#8211; zoals die van <a href=\"https:\/\/kinsta.com\/nl\/blog\/youtube-wordpress\/\">YouTube<\/a> of Vimeo &#8211; gebruiken als <a href=\"https:\/\/make.wordpress.org\/core\/2025\/12\/03\/whats-new-in-gutenberg-22-2-dec3\/#cover-block-video-embeds\" target=\"_blank\" rel=\"noopener noreferrer\">achtergrondvideo voor het Cover-blok<\/a>. Voorheen kon je alleen ge\u00fcploade video&#8217;s gebruiken.<\/p>\n<p>Dit is met name handig als je bandbreedte wilt besparen door <a href=\"https:\/\/kinsta.com\/nl\/blog\/video-hosting\/\">video&#8217;s op externe platforms te hosten<\/a>.<\/p>\n<figure id=\"attachment_207246\" aria-describedby=\"caption-attachment-207246\" style=\"width: 1748px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207246 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-embed-video-from-url.png\" alt=\"Video insluiten via URL in WordPress 7.0.\" width=\"1748\" height=\"856\"><figcaption id=\"caption-attachment-207246\" class=\"wp-caption-text\">Video insluiten via URL in WordPress 7.0.<\/figcaption><\/figure>\n<p>Om een gehoste video toe te voegen, klik je op <strong>Add media <\/strong>in de werkbalk van het Cover-blok en kies je vervolgens <strong>Embed Video from URL<\/strong>.<\/p>\n<figure id=\"attachment_207248\" aria-describedby=\"caption-attachment-207248\" style=\"width: 1742px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207248 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-add-video-url.png\" alt=\"Voer de video-URL in voor het Cover-blok.\" width=\"1742\" height=\"852\"><figcaption id=\"caption-attachment-207248\" class=\"wp-caption-text\">Voer de video-URL in voor het Cover-blok.<\/figcaption><\/figure>\n<p>Je wordt vervolgens gevraagd de video-URL in te voeren.<\/p>\n<figure id=\"attachment_207250\" aria-describedby=\"caption-attachment-207250\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207250 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-embedded-video.jpg\" alt=\"Ingesloten video als achtergrond voor het Cover-blok.\" width=\"2378\" height=\"1206\"><figcaption id=\"caption-attachment-207250\" class=\"wp-caption-text\">Ingesloten video als achtergrond voor het Cover-blok.<\/figcaption><\/figure>\n<p>Je ingesloten video verschijnt als achtergrondvideo in je Cover-blok, zowel in de editor als op de frontend.<\/p>\n<h3>Responsief Grid-blok<\/h3>\n<p>Het Grid-blok is bijgewerkt en is nu van zichzelf responsief. In eerdere versies van WordPress konden gebruikers kiezen tussen de Auto- en de Handmatige modus. In de Auto-modus kon je de minimale kolombreedte instellen; in de Handmatige modus bepaalde je het aantal kolommen, dat vervolgens vast bleef.<\/p>\n<figure id=\"attachment_207377\" aria-describedby=\"caption-attachment-207377\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207377 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/grid-block-settings-wp-6-9.jpg\" alt=\"Grid-blokinstellingen in WordPress 6.9.\" width=\"1790\" height=\"1002\"><figcaption id=\"caption-attachment-207377\" class=\"wp-caption-text\">Grid-blokinstellingen in WordPress 6.9.<\/figcaption><\/figure>\n<p>Vanaf WordPress 7.0 <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73662\" target=\"_blank\" rel=\"noopener noreferrer\">is het Grid-blok van zichzelf responsief<\/a>. Het aantal kolommen fungeert nu als maximum, en je kunt de minimale kolomgrootte en het maximale aantal kolommen nauwkeurig instellen terwijl het blok responsief blijft.<\/p>\n<figure id=\"attachment_207378\" aria-describedby=\"caption-attachment-207378\" style=\"width: 2496px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207378 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-wide-screen.jpg\" alt=\"Het Grid-blok op een groot scherm.\" width=\"2496\" height=\"1274\"><figcaption id=\"caption-attachment-207378\" class=\"wp-caption-text\">Het Grid-blok op een groot scherm.<\/figcaption><\/figure>\n<figure id=\"attachment_207379\" aria-describedby=\"caption-attachment-207379\" style=\"width: 2496px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207379 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-small-screen.jpg\" alt=\"Het Grid-blok op een klein scherm.\" width=\"2496\" height=\"1274\"><figcaption id=\"caption-attachment-207379\" class=\"wp-caption-text\">Het Grid-blok op een klein scherm.<\/figcaption><\/figure>\n<h3>Custom CSS per blokinstantie<\/h3>\n<p>Je kunt nu <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/15\/custom-css-for-individual-block-instances-in-wordpress-7-0\/\">custom stijlen toevoegen aan specifieke blokinstanties<\/a> via de Geavanceerde instellingen van het blok.<\/p>\n<figure id=\"attachment_207383\" aria-describedby=\"caption-attachment-207383\" style=\"width: 1712px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207383 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-additional-css.jpg\" alt=\"Custom CSS per blokinstantie in WordPress 7.0.\" width=\"1712\" height=\"858\"><figcaption id=\"caption-attachment-207383\" class=\"wp-caption-text\">Custom CSS per blokinstantie in WordPress 7.0.<\/figcaption><\/figure>\n<p>Voeg je eigen stijlen toe aan een blok, dan voegt WordPress automatisch de class <code>has-custom-css<\/code> toe. Inspecteer je het blok in de code-editor, dan zie je iets als het volgende:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:image {\n\t\"id\":848,\n\t\"sizeSlug\":\"large\",\n\t\"linkDestination\":\"none\",\n\t\"style\":{ \"css\":\"border: 4px solid blue;\" }\n} --&gt;\n\t&lt;figure class=\"wp-block-image size-large has-custom-css\"&gt;\n\t\t&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2026\/03\/example-768x1024.jpg\" alt=\" class=\"wp-image-848\"\/&gt;\n\t&lt;\/figure&gt;\n&lt;!-- \/wp:image --&gt;<\/code><\/pre>\n<p>De aangepaste stijl wordt geladen n\u00e1 de WordPress-standaardstijlen en globale stijlen, zodat jouw aanpassingen geen invloed hebben op andere instanties van hetzelfde blok.<\/p>\n<h3>Blokzichtbaarheid op basis van viewport<\/h3>\n<p>Vanaf WordPress 7.0 kun je <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/15\/block-visibility-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">blokken afzonderlijk verbergen of tonen<\/a> op basis van het apparaat van de gebruiker: mobiel, tablet of desktop.<\/p>\n<p>Deze eerste iteratie voegt de nieuwe viewport-eigenschap toe aan <code>blockVisibility<\/code>.<\/p>\n<pre><code class=\"language-json\">{\n\t\"metadata\": {\n\t\t\"blockVisibility\": {\n\t\t\t\"viewport\": {\n\t\t\t\t\"mobile\": false,\n\t\t\t\t\"tablet\": true,\n\t\t\t\t\"desktop\": true\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Je schakelt zichtbaarheidscontrole in door het bovenstaande JSON-object toe te voegen aan het blok via de Code-editor of het Opdrachtpalet.<\/p>\n<figure id=\"attachment_207741\" aria-describedby=\"caption-attachment-207741\" style=\"width: 1466px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-command-palette.jpg\" alt=\"Blokzichtbaarheid inschakelen via het opdrachtpalet.\" width=\"1466\" height=\"900\"><figcaption id=\"caption-attachment-207741\" class=\"wp-caption-text\">Blokzichtbaarheid inschakelen via het opdrachtpalet.<\/figcaption><\/figure>\n<p>Heb je blokzichtbaarheid ingeschakeld, dan open je de zichtbaarheidsopties via de popup in de blokwerkbalk, de blokinspector in de -zijbalk of het opdrachtpalet.<\/p>\n<figure id=\"attachment_207742\" aria-describedby=\"caption-attachment-207742\" style=\"width: 2174px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207742 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp_7-0-visibility-modal.jpg\" alt=\"Het blokzichtbaarheidsvenster in WordPress 7.0.\" width=\"2174\" height=\"1108\"><figcaption id=\"caption-attachment-207742\" class=\"wp-caption-text\">Het blokzichtbaarheidsvenster in WordPress 7.0.<\/figcaption><\/figure>\n<p>Toekomstige releases zullen configureerbare breekpunten en integratie met <code>theme.json<\/code> toevoegen voor blokzichtbaarheid.<\/p>\n<h3>Stylingopties voor het Math-blok<\/h3>\n<p>V\u00f3\u00f3r WordPress 7.0 was het uiterlijk van het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-9\/#math\">Math-blok<\/a> niet aan te passen. De nieuwe versie voegt kleur, typografie, afmetingen en rand <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73544\" target=\"_blank\" rel=\"noopener noreferrer\">toe als stylingopties voor het Math-blok<\/a>.<br \/>\nDe volgende afbeelding geeft een voorbeeld van de opmaak van het Math-blok:<\/p>\n<figure id=\"attachment_208194\" aria-describedby=\"caption-attachment-208194\" style=\"width: 2040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208194 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-math-block-styles.png\" alt=\"Stylingopties voor het Math-blok.\" width=\"2040\" height=\"1264\"><figcaption id=\"caption-attachment-208194\" class=\"wp-caption-text\">Stylingopties voor het Math-blok.<\/figcaption><\/figure>\n<h3>Vernieuwd HTML-blok<\/h3>\n<p>Het HTML-blok is <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73108\" target=\"_blank\" rel=\"noopener noreferrer\">volledig vernieuwd<\/a>. Voeg je nu een HTML-blok in, dan verschijnt er een popup met drie aparte tabbladen voor HTML, CSS en JavaScript.<\/p>\n<figure id=\"attachment_208202\" aria-describedby=\"caption-attachment-208202\" style=\"width: 2426px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208202 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-html-block-modal.png\" alt=\"Code toevoegen aan het HTML-blok in WordPress 7.0.\" width=\"2426\" height=\"1182\"><figcaption id=\"caption-attachment-208202\" class=\"wp-caption-text\">Code toevoegen aan het HTML-blok in WordPress 7.0.<\/figcaption><\/figure>\n<p>Heb je meer ruimte nodig, dan schakel je met een knop rechtsboven in de popup naar volledig scherm.<\/p>\n<figure id=\"attachment_208203\" aria-describedby=\"caption-attachment-208203\" style=\"width: 2182px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208203 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-html-block-modal-fullscreen.png\" alt=\"Het HTML-blok in volledig scherm.\" width=\"2182\" height=\"1386\"><figcaption id=\"caption-attachment-208203\" class=\"wp-caption-text\">Het HTML-blok in volledig scherm.<\/figcaption><\/figure>\n<h3>Verbeteringen aan het Image-blok<\/h3>\n<p>Het Image-blok is bijgewerkt met verschillende verbeteringen die meer aanpassingsmogelijkheden bieden.<\/p>\n<p>Het blok ondersteunt nu <a href=\"https:\/\/make.wordpress.org\/core\/2026\/02\/04\/whats-new-in-gutenberg-22-5-04-february\/#image-block-aspect-ratio-control-for-wide-and-full-alignment\" target=\"_blank\" rel=\"noopener noreferrer\">beeldverhouding<\/a> voor brede en volledige uitlijning (<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74519\" target=\"_blank\" rel=\"noopener noreferrer\">PR #74519<\/a>). Deze nieuwe functie is beschikbaar op het tabblad Styles in de blokinstellingen-zijbalk.<\/p>\n<figure id=\"attachment_208229\" aria-describedby=\"caption-attachment-208229\" style=\"width: 2136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208229 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-image-aspect-ratio.jpg\" alt=\"Beeldverhoudingsbeheer voor het Image-blok in WordPress 7.0.\" width=\"2136\" height=\"1220\"><figcaption id=\"caption-attachment-208229\" class=\"wp-caption-text\">Beeldverhoudingsbeheer voor het Image-blok in WordPress 7.0.<\/figcaption><\/figure>\n<p>Een andere handige toevoeging is de focuspuntregeling. Hiermee pas je het zichtbare deel van een afbeelding aan wanneer deze wordt bijgesneden (<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73115\" target=\"_blank\" rel=\"noopener noreferrer\">PR #73115<\/a>).<\/p>\n<figure id=\"attachment_208230\" aria-describedby=\"caption-attachment-208230\" style=\"width: 2132px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208230 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-image-focal-point.jpg\" alt=\"Focuspuntregeling voor het Image-blok in WordPress 7.0.\" width=\"2132\" height=\"982\"><figcaption id=\"caption-attachment-208230\" class=\"wp-caption-text\">Focuspuntregeling voor het Image-blok in WordPress 7.0.<\/figcaption><\/figure>\n<p>De bijsnijdcomponent in de editor is verplaatst naar een apart pakket en kan nu door de hele applicatie worden gebruikt, niet alleen in de blokeditor (<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73277\" target=\"_blank\" rel=\"noopener noreferrer\">PR #73277<\/a>).<\/p>\n<h2>Verbeterde beheerervaring<\/h2>\n<p>Met WordPress 7.0 is het beheerpaneel opnieuw ontworpen en gemoderniseerd. Het is een substanti\u00eble verbetering van de beheerervaring, gericht op soepelere navigatie, meer consistentie en een frissere uitstraling.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Visuele verbeteringen<\/h3>\n<p>Open je het WordPress 7.0-beheerpaneel, dan valt meteen op hoe anders de interface-elementen eruitzien. Deze wijzigingen zijn <a href=\"https:\/\/core.trac.wordpress.org\/ticket\/64308\" target=\"_blank\" rel=\"noopener noreferrer\">uitgebreid besproken<\/a> en waren nodig om het dashboard te moderniseren en inconsistenties tussen het klassieke dashboard en de blokeditor te verminderen.<\/p>\n<blockquote><p>Het doel is om het uiterlijk van de beheerinterface te moderniseren, inconsistenties tussen de oudere pagina&#8217;s en de nieuwere pagina&#8217;s van de blokeditor en site-editor te verminderen, en het geheel beter af te stemmen op het WordPress-ontwerpsysteem.<\/p><\/blockquote>\n<p>Het visuele herontwerp richt zich op een reeks kerncomponenten die door het hele beheerpaneel worden gebruikt. Zoals Fabian Kaegy al aangaf: dit zijn puur visuele wijzigingen, zonder architecturale of functionele aanpassingen.<\/p>\n<p>Je kunt de nieuwe menu&#8217;s, knoppen en overgangen in WordPress 7.0 bekijken in het offici\u00eble <a href=\"https:\/\/www.figma.com\/design\/804HN2REV2iap2ytjRQ055\/WordPress-Design-System?node-id=551-29619&#038;p=f&#038;t=tJrIlW5QQaGPdDIo-0\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Design System op Figma<\/a>.<\/p>\n<figure id=\"attachment_208271\" aria-describedby=\"caption-attachment-208271\" style=\"width: 1634px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-208271 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-admin-buttons-restyling.png\" alt=\"Vernieuwde admin-knoppen in WordPress 7.0 \" width=\"1634\" height=\"1064\"><figcaption id=\"caption-attachment-208271\" class=\"wp-caption-text\">Vernieuwde admin-knoppen in WordPress 7.0 (Bron: <a href=\"https:\/\/www.figma.com\/design\/804HN2REV2iap2ytjRQ055\/WordPress-Design-System?node-id=551-29619&#038;p=f&#038;t=tJrIlW5QQaGPdDIo-0\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Design System<\/a>)<\/figcaption><\/figure>\n<h3>Visuele revisies<\/h3>\n<p>Revisies worden nu weergegeven als previews in een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74771\" target=\"_blank\" rel=\"noopener noreferrer\">editor-achtige interface<\/a> die visuele verschillen benadrukt. Je hoeft niet langer het hele artikel door te lezen om te zien wat er is veranderd &#8211; verschillen tussen versies worden nu gemarkeerd op blokniveau. Het systeem detecteert ook stijlwijzigingen, waardoor aanpassingen aan kleurenpalet, typografie, afmetingen en dergelijke direct zichtbaar zijn.<\/p>\n<figure id=\"attachment_207219\" aria-describedby=\"caption-attachment-207219\" style=\"width: 2266px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-207219 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-revisions-2.jpg\" alt=\"Revisies bieden nu een visuele preview van wijzigingen op blokniveau.\" width=\"2266\" height=\"1204\"><figcaption id=\"caption-attachment-207219\" class=\"wp-caption-text\">Revisies bieden nu een visuele preview van wijzigingen op blokniveau.<\/figcaption><\/figure>\n<p>Verschillende kleuren geven <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/75049\" target=\"_blank\" rel=\"noopener noreferrer\">verschillende soorten wijzigingen<\/a> aan:<\/p>\n<ul>\n<li>Geel markeert een gewijzigd blok of stuk tekst.<\/li>\n<li>Rood markeert een verwijderd blok of stuk tekst.<\/li>\n<li>Groen markeert een toegevoegd blok of stuk tekst.<\/li>\n<\/ul>\n<p>Met revisies zie je de kracht van Yjs in actie: bij het herstellen van een eerdere versie worden alleen de wijzigingen per blok teruggedraaid, niet de volledige inhoud.<\/p>\n<p>Naar verwachting wordt het systeem in toekomstige updates verder uitgebreid. Voor een gedetailleerd overzicht van wat er al is gedaan en wat er nog aankomt, zie <a href=\"https:\/\/make.wordpress.org\/core\/2023\/07\/05\/revisions\/\" target=\"_blank\" rel=\"noopener noreferrer\">dit bericht van Mathias Ventura uit 2023<\/a> en de nummers <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/60096\" target=\"_blank\" rel=\"noopener noreferrer\">#60096<\/a> en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/61161\" target=\"_blank\" rel=\"noopener noreferrer\">#61161<\/a>.<\/p>\n<h3>Weergave-overgangen<\/h3>\n<p>Met WordPress 7.0 krijgt het <code>opstartpakket<\/code> &#8211; het onderdeel dat verantwoordelijk is voor het initialiseren van de editor en het beheren van overgangen tussen beheerschermen &#8211; een <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73586\">aanzienlijke upgrade<\/a>. Navigeren tussen dashboardschermen vereist daardoor geen abrupte pagina-herlaadactie meer, maar verloopt via vloeiende overgangen die de beheerervaring merkbaar verbeteren.<\/p>\n<p>Technisch gezien kan WordPress, door de View Transitions API in het opstartpakket te integreren, nu zoom- en slide-animaties orkestreren bij statuswijzigingen. Dit voorkomt dat het canvas opnieuw wordt opgebouwd bij routewijzigingen, wat resulteert in een vloeiende overgang voor de hoofdnavigatie.<\/p>\n<h2>Wijzigingen voor ontwikkelaars<\/h2>\n<p>WordPress 7.0 is meer dan een visuele update &#8211; het introduceert structurele wijzigingen die de ontwikkelworkflow aanzienlijk vereenvoudigen. Denk hierbij aan minder custom CSS dankzij een krachtiger <code>theme.json<\/code>, voorspelbaarder layoutbeheer door uitgebreid gebruik van iframes, nieuwe declaratieve tools voor beheerinterfaces met verbeterde DataViews, DataForm en Field API, en een nieuwe Client-side Abilities API die een gestandaardiseerde manier biedt om applicatiemogelijkheden via JavaScript te registreren en te gebruiken.<\/p>\n<p>Dit zijn de belangrijkste technische wijzigingen in WordPress 7.0 voor ontwikkelaars.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"6\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Ondersteuning voor pseudo-klassen in theme.json<\/h3>\n<p>Goed nieuws voor thema-ontwikkelaars. Vanaf WordPress 7.0 kun je <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/09\/pseudo-element-support-for-blocks-and-their-variations-in-theme-json\/\" target=\"_blank\" rel=\"noopener noreferrer\">pseudo-class selectors<\/a> (<code>:hover<\/code>, <code>:focus<\/code>, <code>:focus-visible<\/code> en <code>:active<\/code>) direct gebruiken op blokken en stijlvarianten in je <code>theme.json<\/code>.<\/p>\n<p>V\u00f3\u00f3r WordPress 7.0 werden pseudo-klassen alleen ondersteund voor HTML-elementen zoals knoppen en links. Ze op blokniveau gebruiken was alleen mogelijk via aangepaste CSS.<\/p>\n<p>Om pseudo-klassen op blokniveau te gebruiken, voeg je <a href=\"https:\/\/core.trac.wordpress.org\/ticket\/64263\" target=\"_blank\" rel=\"noopener noreferrer\">je stijlconfiguratie toe<\/a> in de sectie <code>styles<\/code> van je <code>theme.json<\/code>-bestand. Hier is een eenvoudig voorbeeld voor een Button-blok (zie ook <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/71418\" target=\"_blank\" rel=\"noopener noreferrer\">PR #71418<\/a>):<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 3,\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/button\": {\n\t\t\t\t\"border\": {\n\t\t\t\t\t\"width\": \"2px\",\n\t\t\t\t\t\"style\": \"solid\",\n\t\t\t\t\t\"color\": \"#000000\"\n\t\t\t\t},\n\t\t\t\t\":hover\": {\n\t\t\t\t\t\"border\": {\n\t\t\t\t\t\t\"color\": \"#ff4400\"\n\t\t\t\t\t},\n\t\t\t\t\t\"shadow\": \"0 8px 15px rgba(255, 68, 0, 0.3)\",\n\t\t\t\t\t\"typography\": {\n\t\t\t\t\t\t\"textDecoration\": \"underline\"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\":active\": {\n\t\t\t\t\t\"filter\": \"brightness(0.8)\",\n\t\t\t\t\t\"shadow\": \"none\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>De volgende afbeelding toont de verschillende toestanden van het Button-blok.<\/p>\n<figure id=\"attachment_206689\" aria-describedby=\"caption-attachment-206689\" style=\"width: 942px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206689 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/03\/wp-7-0-pseudo-elements.png\" alt=\"De pseudo-klassen hover en active in een Button-blok.\" width=\"942\" height=\"213\"><figcaption id=\"caption-attachment-206689\" class=\"wp-caption-text\">De pseudo-klassen :hover en :active in een Button-blok.<\/figcaption><\/figure>\n<p>Het volgende voorbeeld laat zien hoe je pseudo-klassen gebruikt voor een blokvariatie in <code>theme.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 3,\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/button\": {\n\t\t\t\t\"variations\": {\n\t\t\t\t\t\"neon\": {\n\t\t\t\t\t\t\"border\": {\n\t\t\t\t\t\t\t\"width\": \"2px\",\n\t\t\t\t\t\t\t\"style\": \"solid\",\n\t\t\t\t\t\t\t\"color\": \"#00ff00\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t\"color\": {\n\t\t\t\t\t\t\t\"text\": \"#00ff00\",\n\t\t\t\t\t\t\t\"background\": \"transparent\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t\":hover\": {\n\t\t\t\t\t\t\t\"border\": {\n\t\t\t\t\t\t\t\t\"color\": \"#ffffff\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"shadow\": \"0 0 20px #00ff00, 0 0 40px #00ff00\",\n\t\t\t\t\t\t\t\"color\": {\n\t\t\t\t\t\t\t\t\"text\": \"#ffffff\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"typography\": {\n\t\t\t\t\t\t\t\t\"textDecoration\": \"none\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t\":active\": {\n\t\t\t\t\t\t\t\"filter\": \"brightness(1.5) blur(1px)\",\n\t\t\t\t\t\t\t\"shadow\": \"0 0 10px #ffffff\"\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Iframed post editor<\/h3>\n<p>Vanaf WordPress 7.0 wordt de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/02\/24\/iframed-editor-changes-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">post editor geladen in een iframe<\/a> als de inhoud uitsluitend blokken bevat die <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/75187\" target=\"_blank\" rel=\"noopener noreferrer\">Block API versie 3 of hoger<\/a> gebruiken. V\u00f3\u00f3r versie 7.0 werd de post editor alleen in een iframe geladen als \u00e1lle geregistreerde blokken &#8211; ook de blokken die niet in de inhoud stonden &#8211; Block API v3 gebruikten.<\/p>\n<p>Het belangrijkste voordeel van de iframed editor is dat de UI-stijlen van de editor worden ge\u00efsoleerd van de inhoudsstijlen van het thema. Zonder iframe bestaan de stylesheets van de editor en het thema naast elkaar in hetzelfde document, wat regelmatig leidt tot compatibiliteitsproblemen en het lastig maakt om visuele consistentie te bereiken tussen de backend en frontend.<\/p>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/blocks-in-an-iframed-template-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">De belangrijkste voordelen<\/a> van de iframed post editor zijn:<\/p>\n<h4>Stijlisolatie<\/h4>\n<ul>\n<li><strong>Geen CSS-doorwerking:<\/strong> Het iframe voorkomt dat WordPress-admin-stijlen het editorcanvas binnendringen en vice versa, zodat het uiterlijk van blokken niet wordt be\u00efnvloed door de omringende UI.<\/li>\n<li><strong>Geen CSS-reset meer nodig:<\/strong> Ontwikkelaars hoeven niet langer handmatig WordPress-admin-CSS-regels te resetten om de inhoud van de editor overeen te laten komen met de frontend.<\/li>\n<li><strong>Geen prefixing:<\/strong> Thema-ontwikkelaars hoeven geen voorvoegsels of high-specificity selectors meer toe te voegen aan hun CSS-regels om te voorkomen dat de admin-interface wordt verstoord.<\/li>\n<\/ul>\n<h4>Layoutconsistentie<\/h4>\n<ul>\n<li><strong>Viewport-relatieve eenheden:<\/strong> Zonder iframe verwijzen eenheden als <code>vw<\/code> (viewport width) en <code>vh<\/code> (viewport height) naar de hele beheerpagina, inclusief de zijbalk. Ze zijn <a href=\"https:\/\/make.wordpress.org\/core\/2025\/11\/12\/preparing-the-post-editor-for-full-iframe-integration\/\">alleen bedoeld voor gebruik op het editorcanvas<\/a>.<\/li>\n<li><strong>Native media queries:<\/strong> Media queries werken van nature binnen het iframe en weerspiegelen de canvasgrootte van de editor in plaats van het volledige browservenster.<\/li>\n<\/ul>\n<h4>Ontwikkelervaring<\/h4>\n<ul>\n<li><strong>Vereenvoudigde workflow:<\/strong> Thema- en plugin-ontwikkelaars kunnen frontend-stijlen met minimale aanpassingen doorvoeren naar de editor.<\/li>\n<li><strong>Blijvende selecties:<\/strong> Iframes houden de selectie in de editor zichtbaar &#8211; zoals geselecteerde tekst &#8211; ook als de gebruiker interacteert met UI-elementen zoals zijbalkregelaars.<\/li>\n<li><strong>Voorspelbaarheid:<\/strong> De iframed editor lost ook het probleem van visuele inconsistentie op, doordat de editor niet langer plotseling van modus wisselt op basis van ge\u00efnstalleerde plugins.<\/li>\n<\/ul>\n<h4>Achterwaartse compatibiliteit<\/h4>\n<p>Bevat een bericht een blok dat oudere API-versies gebruikt, dan wordt het iframe automatisch verwijderd om achterwaartse compatibiliteit te garanderen. Om te profiteren van deze verbeteringen, worden blokontwikkelaars aangeraden hun blokken bij te werken naar Block API versie 3.<\/p>\n<h3>PHP-only blokregistratie<\/h3>\n<p>WordPress 7.0 introduceert de mogelijkheid om <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/03\/php-only-block-registration\/\">blokken uitsluitend via PHP te registreren<\/a> met automatisch gegenereerde inspector-bedieningselementen. Deze toevoeging stroomlijnt de workflow voor ontwikkelaars en moedigt sites die hybride thema&#8217;s of klassieke PHP-functies en shortcodes gebruiken aan om de blokeditor verder te omarmen. Hier is een voorbeeld van een blok dat via PHP is geregistreerd:<\/p>\n<pre><code class=\"language-php\">\/**\n * Render callback (frontend and editor)\n *\/\nfunction my_php_only_block_render( $attributes ) {\n\treturn '&lt;div&gt;\n\t\t&lt;h3&gt;\ud83d\ude80 PHP-only Block&lt;\/h3&gt;\n\t\t&lt;p&gt;This block was created with only PHP!&lt;\/p&gt;\n\t&lt;\/div&gt;';\n}\n\n\/**\n * Register the block on the 'init' hook.\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'my-plugin\/php-only-test-block', array(\n\t\t'title'\t\t   =&gt; 'My PHP-only Block',\n\t\t'icon'\t\t\t=&gt; 'welcome-learn-more',\n\t\t'category'\t\t=&gt; 'text',\n\t\t'render_callback' =&gt; 'my_php_only_block_render',\n\t\t'supports'\t\t=&gt; array(\n\t\t\t\/\/ Automatically registers the block in the Editor JS (previously auto_ssr)\n\t\t\t'auto_register' =&gt; true, \n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Op dit moment zijn PHP-only blokken niet dynamisch en kunnen ze alleen bepaalde configuratiebedieningselementen gebruiken. Er zijn echter tal van gebruikssituaties te ontdekken. Daarom hebben we een aparte tutorial gepubliceerd over <a href=\"https:\/\/kinsta.com\/nl\/blog\/php-only-gutenberg-blokken\/\" target=\"_blank\" rel=\"noopener noreferrer\">PHP-only blokken<\/a>. Ben je PHP-ontwikkelaar, dan is het de moeite waard om die te bekijken.<\/p>\n<figure id=\"attachment_206054\" aria-describedby=\"caption-attachment-206054\" style=\"width: 1644px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-206054 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/02\/basic-php-only-block.png\" alt=\"Een eenvoudig PHP-only blok in de blokeditor.\" width=\"1644\" height=\"656\"><figcaption id=\"caption-attachment-206054\" class=\"wp-caption-text\">Een eenvoudig PHP-only blok in de blokeditor.<\/figcaption><\/figure>\n<h3>Verbeteringen aan DataViews, DataForm en Field API<\/h3>\n<p>WordPress 7.0 introduceert diverse verbeteringen aan DataViews, waarmee een duidelijke stap wordt gezet richting een modernere, modulaire beheerinterface. Ontwikkelaars kunnen nu complexe aangepaste interfaces bouwen door hun regels in JSON-format te defini\u00ebren &#8211; de core genereert de interface automatisch.<\/p>\n<p>Nieuwe toevoegingen zijn onder andere:<\/p>\n<ul>\n<li><strong>Verbeteringen in datavisualisatie (DataViews):<\/strong> De nieuwe <b>Activities <\/b>layout gebruikt een activity-feed-tijdlijnstijl. Er is ook een nieuwe compacte weergavemodus voor lijsten.<\/li>\n<li><strong>Formulierverbeteringen (DataForm):<\/strong> De nieuwe <strong>Details <\/strong>layout is nu beschikbaar, samen met bewerkingspictogrammen voor de <strong>Panel <\/strong>layout. Deze pictogrammen zijn configureerbaar zodat ze alleen verschijnen wanneer nodig.<\/li>\n<li><strong>Verbeteringen aan databeheer (Field API):<\/strong> Automatische veldvalidatie is beschikbaar, samen met nieuwe opmaakopties voor numerieke velden en datumvelden.<\/li>\n<\/ul>\n<p>Het volgende is een voorbeeld van hoe je een weergave definieert die gegevens groepeert en weergeeft in de compacte modus:<\/p>\n<pre><code class=\"language-javascript\">const myCompactView = {\n\ttype: 'list',\n\tlayout: { \n\t\tdensity: 'compact' \n\t},\n\tgroupBy: {\n\t\tfield: 'status',\n\t\tdirection: 'desc',\n\t\tshowLabel: true\n\t}\n};<\/code><\/pre>\n<p>Voor een gedetailleerd overzicht van de verbeteringen aan DataViews, DataForm en Field API, zie de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/04\/dataviews-dataform-et-al-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">dev note<\/a>.<\/p>\n<h3>Client-side Abilities API<\/h3>\n<p>WordPress 6.9 introduceerde de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-9\/#abilities-api\">Abilities API<\/a> &#8211; een nieuwe functionele interface die een gestandaardiseerd register biedt voor plugins, thema&#8217;s en de WordPress-core om hun mogelijkheden te registreren in zowel mens- als machineleesbare formaten.<\/p>\n<p>WordPress 7.0 breidt dit uit met een JavaScript API waarmee je client-side functies &#8211; zoals navigeren of blokken toevoegen &#8211; direct vanuit JavaScript kunt inzetten op een veilige en gestandaardiseerde manier.<\/p>\n<p>De nieuwe Client-side Abilities API bestaat uit twee pakketten.<\/p>\n<ul>\n<li><code>@wordpress\/core-abilities<\/code>: Heeft je plugin toegang nodig tot de op de server geregistreerde abilities, dan koppel je aan dit pakket. Het haalt alle geregistreerde abilities en categorie\u00ebn op via de REST API en slaat ze op in de <code>@wordpress\/abilities<\/code>-store.<\/li>\n<li><code>@wordpress\/abilities<\/code>: Dit pakket biedt de abilities-store zonder de server-side abilities te laden. Hoeft je plugin alleen client-side abilities te registreren en heeft het geen toegang nodig tot server-side geregistreerde abilities, dan gebruik je <code>@wordpress\/abilities<\/code>.<\/li>\n<\/ul>\n<p>Zie de dev note voor een gedetailleerde analyse van de nieuwe <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/24\/client-side-abilities-api-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Client-side Abilities API<\/a> en diverse codevoorbeelden.<\/p>\n<h3>Wijzigingen in de Interactivity API<\/h3>\n<p>De <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\">Interactivity API<\/a> is een WordPress-native API waarmee ontwikkelaars op een gestandaardiseerde manier interactiviteit aan hun sites kunnen toevoegen. WordPress 7.0 breidt de Interactivity API uit met een nieuwe <code>watch()<\/code>-functie waarmee je toestandswijzigingen programmatisch kunt observeren. Voorheen was je aangewezen op de <code>data-wp-watch<\/code> richtlijn om te reageren op statuswijzigingen.<\/p>\n<p>Andere wijzigingen in WordPress 7.0 hebben betrekking op de <code>core\/router<\/code>-store.<\/p>\n<p>Voor een gedetailleerde beschrijving van de wijzigingen in de Interactivity API, zie de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/04\/changes-to-the-interactivity-api-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">dev note<\/a>.<\/p>\n<h3>Overige wijzigingen voor ontwikkelaars<\/h3>\n<p>Nog een aantal andere wijzigingen die het vermelden waard zijn:<\/p>\n<ul>\n<li>Vanaf WordPress 7.0 ondersteunen blokattributen die <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-block-bindings-api\/\">Block Bindings<\/a> ondersteunen ook <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-blokpatronen\/#synced-pattern-overrides\">Pattern Overrides<\/a>. Dit betekent dat je <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/16\/pattern-overrides-in-wp-7-0-support-for-custom-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">pattern overrides kunt gebruiken met elk blok<\/a>, inclusief aangepaste blokken.<\/li>\n<li>Niet-gesynchroniseerde patronen en template parts staan nu <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/15\/pattern-editing-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">standaard op <code>contentOnly<\/code><\/a>. Gebruikers zien eerst de bedieningselementen voor tekst en media, zonder het risico de blokstructuur per ongeluk te verbreken. Heb je custom blokken gemaakt die bewerkbaar moeten blijven, stel dan <code>\"role\": \"contentOnly\"<\/code> in het <code>block.json<\/code>\u00a0bestand in. Ontwikkelaars kunnen deze functie uitschakelen via PHP met de <code>block_editor_settings_all<\/code>-filter, of via JavaScript door <code>disableContentOnlyForUnsyncedPatterns<\/code> op <code>true<\/code> te zetten.<\/li>\n<li>WordPress 7.0 <a href=\"https:\/\/make.wordpress.org\/core\/2026\/01\/09\/dropping-support-for-php-7-2-and-7-3\/\" target=\"_blank\" rel=\"noopener noreferrer\">laat ondersteuning voor PHP 7.2 en 7.3 vallen<\/a>. De minimaal aanbevolen versie van PHP blijft 8.3.<\/li>\n<li>Het ondersteuningssysteem voor afmetingen is aanzienlijk verbeterd. Je kunt <code>breedte<\/code> en <code>hoogte<\/code> als standaard blokondersteuning gebruiken onder <code>dimensions<\/code> in <code>block.json<\/code>, en thema&#8217;s kunnen voorinstellingen voor afmetingen defini\u00ebren in hun <code>theme.json<\/code>.<\/li>\n<\/ul>\n<h2>Vooruitblik: WordPress 7.0 is het begin van een nieuw tijdperk<\/h2>\n<p>WordPress 7.0 is geen gewone update &#8211; het is een keerpunt voor zowel gebruikers als ontwikkelaars. Dankzij AI-integratie en de Abilities API kan AI nu door het dashboard navigeren, nieuwe inhoud aanmaken en bestaande berichten bewerken. We staan aan het begin van iets nieuws, en we kijken ernaar uit om deze AI-gedreven mogelijkheden verder te verkennen.<\/p>\n<p>Maar WordPress 7.0 is meer dan AI. De bewerkingservaring is volledig vernieuwd: een nieuwe revisiearchitectuur op blokniveau, nieuwe kernblokken en belangrijke updates van het ontwerpsysteem.<\/p>\n<p>Naast AI-integratie profiteren ontwikkelaars van verbeteringen die de ontwikkelworkflow stroomlijnen en nieuwe mogelijkheden ontsluiten. Van de iframed editor en pseudo-class-ondersteuning in <code>theme.json<\/code> tot de Client-side Abilities API en PHP-only blokken &#8211; WordPress 7.0 biedt een veelzijdige basis voor het bouwen van krachtigere sites en applicaties.<\/p>\n<p>Om het volledige potentieel van WordPress 7.0 te benutten, heb je een hostingomgeving nodig die is geoptimaliseerd voor prestaties en beveiliging. Bij Kinsta vind je alles wat je nodig hebt om het maximale uit WordPress te halen. <a href=\"https:\/\/kinsta.com\/nl\/prijzen\/\">Bekijk onze pakketten<\/a> en kies het pakket dat het beste past bij jouw use case.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zet het vuurwerk maar klaar! Met 7.0 gaat WordPress een gedurfd nieuw tijdperk in. Het is waarschijnlijk de grootste sprong die het platform de afgelopen jaren &#8230;<\/p>\n","protected":false},"author":36,"featured_media":65467,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[907],"class_list":["post-65466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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>WordPress 7.0: integratie met AI, nieuwe blokken, en meer<\/title>\n<meta name=\"description\" content=\"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.\" \/>\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-7-0\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken en nog veel meer\" \/>\n<meta property=\"og:description\" content=\"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\" \/>\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=\"2026-05-04T09:41:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-11T08:32:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1472\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png\" \/>\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=\"25 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-7-0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken en nog veel meer\",\"datePublished\":\"2026-05-04T09:41:33+00:00\",\"dateModified\":\"2026-05-11T08:32:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\"},\"wordCount\":4552,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png\",\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\",\"name\":\"WordPress 7.0: integratie met AI, nieuwe blokken, en meer\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png\",\"datePublished\":\"2026-05-04T09:41:33+00:00\",\"dateModified\":\"2026-05-11T08:32:58+00:00\",\"description\":\"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png\",\"width\":1472,\"height\":737},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#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\":\"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken 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":"WordPress 7.0: integratie met AI, nieuwe blokken, en meer","description":"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.","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-7-0\/","og_locale":"nl_NL","og_type":"article","og_title":"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken en nog veel meer","og_description":"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2026-05-04T09:41:33+00:00","article_modified_time":"2026-05-11T08:32:58+00:00","og_image":[{"width":1472,"height":737,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"25 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken en nog veel meer","datePublished":"2026-05-04T09:41:33+00:00","dateModified":"2026-05-11T08:32:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/"},"wordCount":4552,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png","inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/","name":"WordPress 7.0: integratie met AI, nieuwe blokken, en meer","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png","datePublished":"2026-05-04T09:41:33+00:00","dateModified":"2026-05-11T08:32:58+00:00","description":"AI-integratie, nieuwe blokken en geavanceerde tools voor ontwikkelaars en ontwerpers. Dit is wat er nieuw is in WordPress 7.0.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/05\/whats-new-in-wordpress7.0-ai-integration-real-time-collaboration-and-much-more.png","width":1472,"height":737},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#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":"Nieuw in WordPress 7.0: AI-integratie, nieuwe blokken 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\/65466","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=65466"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/65466\/revisions"}],"predecessor-version":[{"id":65532,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/65466\/revisions\/65532"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/translations\/jp"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/65466\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/65467"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=65466"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=65466"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=65466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}