Wat is er nieuw in WordPress 6.6: pattern overrides , Block Bindings API, data views, nieuwe ontwerptools en nog veel meer!

WordPress 6.6 staat gepland voor een release op 16 juli 2024. De nieuwe versie richt zich op het verfijnen en verbeteren van verschillende features die in eerdere versies zijn geïntroduceerd. Er zijn echter ook veel toevoegingen die de core een stap verder brengen op het pad van fase 3 van de WordPress ontwikkeling.

In totaal zijn er 299 Core Track tickets opgenomen in WordPress 6.6, samen met 392 verbeteringen, 462 bugfixes en 46 toegankelijkheidsverbeteringen voor de Block Editor.

Van de vele nieuwe features  die worden toegevoegd aan WordPress 6.6, vinden we de overrides van blokpatterns het leukst. In eerste instantie gepland voor release met WordPress 6.5, toen uitgesteld tot 6.6, zijn de pattern overrides de tweede implementatie van de Block Bindings API en geven ze ons een beter idee van wat er komen gaat met toekomstige WordPress releases.

Maar pattern overrides zijn slechts één van de vele geweldige toevoegingen aan de komende WordPress release. Dus laten we beginnen aan onze reis om de meest opwindende nieuwe functies en verbeteringen te ontdekken die met WordPress 6.6 komen.

Synced pattern overrides

De eerste implementatie van de Block Bindings API was voor het verbinden van blokattributen en aangepaste velden. Met WordPress 6.6 ontsluit een tweede iteratie een verbetering van gesynchroniseerde patterns met de naam Synced Pattern Overrides.

Er zijn twee soorten blokpatterns:

• Gesynchroniseerde blokpatterns
• Standaard (niet gesynchroniseerde) blokpatterns

Het verschil tussen de twee soorten is dat alle wijzigingen aan een gesynchroniseerde pattern van toepassing zijn op elke pattern op je hele website. Daarentegen hebben wijzigingen aan een standaard blokpattern alleen invloed op een specifieke pattern.

Gesynchroniseerde pattern overrides houden het midden tussen deze twee uitersten. Dankzij de Block Bindings API kun je nu blokpatterns maken die overal op je website dezelfde structuur behouden en synchroon veranderen met de aanpassingen die je maakt aan de patternstructuur en -stijl in de Site Editor. Je kunt echter de inhoud van het pattern op een individuele instantie wijzigen zonder dat dit invloed heeft op andere instanties van hetzelfde pattern op de site.

Laten we eens kijken hoe pattern overrides werken.

Eerst heb je een gesynchroniseerde pattern nodig. Je kunt het vanaf nul opbouwen in de Post Editor of bestaande gesynchroniseerde patterns vinden in de patterns sectie van de  Site Editor.

Stap 1: Ga naar patterns en dupliceer een van de bestaande patterns, zoals het Hero pattern van het standaardthema Twenty Twenty Four. Voeg een naam toe en stel de kopie in als Synced pattern.

Stap 2: Navigeer naar de sectie My patterns en zoek je nieuwe gesynchroniseerde pattern. Open het in de Site Editor en selecteer alle blokken die je afzonderlijk moet overschrijven.

Ga naar de zijbalk met blokinstellingen en scroll naar beneden naar het gedeelte Advanced. Hier vind je een knop Enable overrides.

Als je op de knop klikt, wordt je gevraagd om een naam toe te voegen en het patterntype in te stellen.

Stap 3: Herhaal hetzelfde proces voor elk blok dat je wilt overschrijven. Als je klaar bent, maak je een nieuw bericht of pagina en voeg je je custom pattern toe.

Stap 4: Wijzig de inhoud van de blokken in override en sla de post op. Controleer tot slot het resultaat op de voorkant.

En je bent klaar. Je kunt overal op je website een willekeurig aantal van deze patterns toevoegen en elk nieuw exemplaar toont dezelfde oorspronkelijke inhoud, maar kan worden worden aangepast.

Laten we nu de code van deze patterns controleren. Navigeer terug naar het gedeelte patterns van de Site Editor. Selecteer My patterns en voeg je pattern toe. Open vervolgens het menu Options en selecteer Code Editor om de code van het pattern te bekijken.

In ons voorbeeld zou de code er ongeveer zo uit moeten zien:

<div class="wp-block-group">
	<!-- wp:heading {
		"textAlign":"center",
		"level":1,
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
				}
			},
		"name":"Hero title"
	},"fontSize":"x-large"} -->
		<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
	<!-- /wp:heading -->
	...
</div>

In het blokscheidingsteken zie je de property metadata.bindings. Dit maakt het header blok bewerkbaar. De __default binding instrueert WordPress om alle ondersteunde attributen te koppelen aan een specifieke bron, namelijk "core/pattern-overrides".

Dezelfde property geldt voor alle blokken die je bewerkbaar moet maken. Zie bijvoorbeeld het Button blok:

<div class="wp-block-buttons">
	<!-- wp:button {
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
					}
				},
			"name":"Hero button"
			}
		} -->
	<!-- /wp:button -->
	<div class="wp-block-button">
		<a class="wp-block-button__link wp-element-button">About us</a>
	</div>
	...
</div>

Laten we nu terugkeren naar de post editor en overschakelen naar Code Editor. De code zou er ongeveer zo uit moeten zien:

<!-- wp:block {
	"ref":261,
	"content":{
		"Hero title":{
			"content":"Managed WordPress Hosting"
		},
		"Hero body":{
			"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
		},
		"Hero button":{
			"text":"Learn more",
			"url":"https://kinsta.com/wordpress-hosting/",
			"linkTarget":"",
			"rel":""
		},
		"Second button":{
			"text":"View pricing",
			"url":"https://kinsta.com/wordpress-hosting/pricing/",
			"linkTarget":"_blank",
			"rel":"noreferrer noopener"
		},
		"Hero image":{
			"id":268,
			"alt":"",
			"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
		}
	}
} /-->

Hier zie je geen blokken, maar alleen een verwijzing naar het blokpattern en een set properties voor elk blok die zijn ingesteld als bewerkbaar.

Nogmaals, je kunt overal op je website een willekeurig aantal blokpatterns toevoegen, en deze patterns zullen overeenkomen met dezelfde structuur en hetzelfde ontwerp dat je hebt gemaakt in de Site Editor.

Vervolgens kun je de inhoud van de bewerkbare blokken afzonderlijk wijzigen, waarbij de structuur hetzelfde blijft.

Omdat pattern overrides een implementatie is van de Block Bindings API, kunnen we alleen ondersteunde blokken overriden: Header, Paragraph, Image en Buttons.

Je kunt dieper in pattern overrides duiken in deze WordPress TV video en deze blogpost van Nick Diego.

Pattern overrides zijn onderhevig aan toekomstige verbeteringen en toevoegingen. De discussie gaat verder op GitHub hier en hier.

Aangepaste veldwaarden bewerken vanuit gekoppelde blokken

WordPress 6.5 introduceerde aangepaste velden als gegevensbron (core/post-meta) voor blokattributen, waardoor gebruikers aangepaste veldwaarden kunnen koppelen aan blokken. WordPress 6.6 brengt nieuwe verbeteringen in deze functie, zoals de mogelijkheid om aangepaste veldwaarden direct vanuit het gekoppelde blok te bewerken.

Je kunt het zelf proberen door een nieuwe set aangepaste velden te registreren vanuit een plugin of het functiebestand van je thema, waarbij je ervoor zorgt dat je show_in_rest instelt op true bij het registreren van de bericht meta. Hier is een voorbeeld:

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field'
	)
);

Zodra je klaar bent, maak je een nieuwe post of pagina en voeg je een nieuw custom veld toe met dezelfde naam. Voeg een van de ondersteunde blokken (bijvoorbeeld een Heading-blok) toe aan het canvas, schakel over naar de Code-editor en wijzig het blok zoals hieronder weergegeven:

<!-- wp:heading 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book_title"
				}
			}
		}
	}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

Sla het bericht/de pagina op en controleer het resultaat. Nu kun je de inhoud van de header direct vanuit het blok bewerken. De waarde van het aangepaste veld zou je wijzigingen moeten weergeven.

Daarnaast geeft een nieuw paneel nu info over de blokattributen die zijn gekoppeld aan aangepaste velden, waarbij de blokattributen die zijn gekoppeld aan aangepaste velden worden weergegeven.

Deze functie komt met een aantal gerelateerde functionaliteiten:

• Je kunt aangepaste veldwaarden bijwerken vanuit een query-loop.
• Als meerdere blokken zijn gekoppeld aan hetzelfde custom veld, delen ze dezelfde aangepaste veldwaarde en veranderen ze mee.
• Gebruikers kunnen custom velden alleen bewerken in berichten waarvoor ze toestemming hebben.

Laatste opmerking: Zoals eerder vermeld zijn blokken die de Block Bindings API ondersteunen nog steeds beperkt tot het volgende:

Blok	Attributen
Image	url, alt, title
Header	content
Paragraph	content
Button	url,text, linkTarget, rel

Data Views verbeteringen

Data Views, geïntroduceerd met WordPress 6.5, is een verbeterde UI voor collecties van templates, patterns, berichten, media en meer. De nieuwe interface speelt een essentiële rol in fase 3 van de ontwikkel roadmap – Collaboration – en als zodanig kunnen we meer verbeteringen verwachten bij toekomstige WordPress releases, “inclusief workflowverbeteringen voor het toewijzen van mensen om berichten te beoordelen of het maken van aangepaste weergaven om processen te stroomlijnen.” Vanaf WordPress 6.6 bestaat de nieuwe interface alleen in de site-editor, maar het zou zich in toekomstige releases moeten uitbreiden naar meer beheergedeeltes.

WordPress 6.6 introduceert nieuwe layouts voor de beheerpagina’s. Het beheer van template parts is verwijderd en geïntegreerd in de patterns sectie, terwijl het patterns menu van de Site Editor is herschikt in twee secties, met de template parts bovenaan en de patterns eronder.

Voor pagina’s is er een nieuw paneel met een lijst van pagina’s waarmee je met één klik een voorbeeld van elke pagina kunt bekijken.

Je ziet ook nieuwe lay-out opties beschikbaar in het menu View options. (Het pictogram in de rechterbovenhoek.)

Naast deze uitgebreidere wijzigingen hebben Data Views te maken met andere kleine verbeteringen die de interface verbeteren en functioneler en informatiever maken, zoals een nieuwe feature voor bulkbewerking en een badge op de pagina Front Page of Posts.

WordPress 6.6 gaat een stap verder met Data Views, maar we bevinden ons nog in een vroeg stadium. In de toekomst zullen we de introductie zien van een uitbreidings API waarmee ontwikkelaars direct op weergaven kunnen reageren. Voor een meer diepgaande blik op de toekomst van Data Views, bekijk Data Views Update – juni 2024 van Anne McCarthy.

Andere verbeteringen aan de Block Editor

WordPress 6.6 brengt 8 Gutenberg releases naar de core – van 17.8 tot 18.5 – met veel verbeteringen aan de interface, de React bibliotheek, de Block API en nog veel meer. Hier zijn er maar een paar:

Een nieuwe publicatieflow

Met 6.6 is de zijbalk met bericht- en pagina-instellingen opgeschoond en lichter en consistenter gemaakt. Met deze iteratie maakt het eenwordingsproces tussen de Post- en Site Editor een stap voorwaarts, en beide editors hebben nu dezelfde publicatieflow.

De publicatie-ervaring is gestandaardiseerd en met een nieuw paneel Status & visibility kun je de status van de bericht/pagina op een handigere plek instellen.

Andere wijzigingen hebben betrekking op de Uitgelichte afbeelding en Excerpt checks, die naar de bovenkant van de zijbalk zijn verplaatst en het verbeterde Actions menu in de rechterbovenhoek.

Alle blokken weergeven

In vorige versies van WordPress, als je een blok selecteerde, toonde de Block Inserter alleen het blok dat je mocht toevoegen aan het geselecteerde blok. Bijvoorbeeld, met een Column geselecteerd, kon je alleen het Column blok zien in de blokkenkiezer omdat je alleen een Column kon toevoegen.

Vanaf WordPress 6.6 toont de Block Inserter tool twee groepen blokken: blokken die je in het geselecteerde blok kunt invoegen en blokken die je onder het geselecteerde blok kunt invoegen.

Een sneltoets om blokken te groeperen

Vanaf nu kun je een selectie van blokken groeperen met ⌘ + G op MacOS of Ctrl + G op Windows.

Blokpatterns in klassieke thema’s

Vanaf WordPress 6.6 ondersteunen klassieke thema’s dezelfde patterninterface als blokthema’s. Dus als je klassieke thema’s gebruikt op je WordPress website, geniet je van dezelfde rijke ervaring in patternbeheer als bij blokthema’s.

De volgende afbeeldingen vergelijken het patterns scherm in WordPress 6.5 en het patterns admin gedeelte in WordPress 6.6.

Je kunt nu patterns bewerken, dupliceren, hernoemen, exporteren als JSON en verwijderen zoals je gewend bent met blokthema’s.

Je kunt bulkacties uitvoeren door patterns afzonderlijk te selecteren of op de knop Bulk edit te klikken. Sorteer- en filterfuncties zijn ook beschikbaar.

Je kunt ook patterns maken zoals je ze maakt in blokthema’s. Klik op de knop Add new pattern in de rechterbovenhoek en je wordt gevraagd om het formulier met patterndetails in te vullen.

Vervolgens kun je zoals gewoonlijk je pattern bouwen of bewerken in de Site Editor.

Deze update geeft gebruikers van klassieke thema’s meer kracht, ontsluit nieuwe mogelijkheden en maakt de bewerkingservaring consistenter voor klassieke en blokthema’s.

Nieuwe tools en features voor ontwerpers en thema-ontwikkelaars

WordPress 6.6 brengt zoveel krachtige functies en verbeteringen voor ontwerpers en thema-ontwikkelaars, en we zijn blij om degene die we het leukst vonden hier te delen. Ontwerpers hebben meer bevoegdheden als het gaat om het stylen van hun pagina’s, dankzij sectie stijlen, site-brede achtergrondafbeeldingen, een gloednieuwe schaduw-editor en een raster lay-out variatie. En meer tools bieden nog meer flexibiliteit aan thema-ontwerpers. Laten we er eens naar kijken.

Theme.json v.3

WordPress 6.6 brengt ook een nieuwe theme.json versie die nu versie 3 is. De nieuwe versie verandert de manier om vooraf gedefinieerde properties te overschrijven. Om de standaardwaarden van fontSizes of spacingSizes te wijzigen, moet je nu defaultFontSizes of defaultSpacingSizes instellen op false onder settings.typography of settings.spacing.

Samengevat:

• Als defaultFontSizes of defaultSpacingSizes zijn ingesteld op true, worden standaard lettergroottes en spatiëringsgroottes getoond in de editor en mogen thema’s geen voorinstellingen maken met de standaard slugs. defaultFontSizes is standaard ingesteld op true.
• Als defaultFontSizes of defaultSpacingSizes is ingesteld op false, worden standaard lettergroottes en spatiëringsgroottes niet weergegeven in de editor en mogen thema’s de standaard slugs gebruiken.

Bekijk de dev note voor een uitgebreider overzicht van Theme.json versie 3.

CSS specificiteit in WordPress 6.6

Met WordPress 6.6 verandert de CSS specificiteit en is het nu eenvoudiger om core stijlen te overschrijven met behoud van ondersteuning voor globale stijlen.

Tot 6.6 was het vaak moeilijk om core stijlen te overschrijven en moesten thema ontwikkelaars ingewikkelde CSS regels uitwerken om het gewenste resultaat te bereiken. Met 6.6 zijn de Core Block Styles en Global Styles (theme.json) aangepast door de bestaande selector in te pakken binnen :root :where(...) om de specificiteit van core stijlen te verminderen tot 0-1-0 en het uniform te maken om ook de nieuwe sectie stijlen te ondersteunen.

Als voorbeeld is .wp-block-image.is-style-rounded img bijgewerkt tot :root :where(.wp-block-image.is-style-rounded img).

Ontwikkelaars van blokken die kiezen voor globale stijlen worden aangemoedigd om dezelfde wijzigingen aan te brengen in hun stijlen, zodat ze op een voorspelbare manier kunnen worden aangepast via de Styles interface. Dus, als je een aangepast blok hebt met de volgende stijl:

.wp-block-custom-block {
	padding: 0;
}

Je zou het moeten wrappen in :root :where():

:root :where(.wp-block-custom-block) {
	padding: 0;
}

Hiermee zouden gebruikers de opvulling van blokken kunnen opheffen via de interface Global Styles.

Thema-ontwikkelaars worden aangemoedigd om hetzelfde te doen, zodat blokstijlen kunnen worden geconfigureerd via de interface van Global Styles.

Zie ook de dev note voor een meer diepgaand overzicht van CSS specificiteit in WordPress 6.6.

Sectie stijlen

Met WordPress 6.6 kun je individuele secties van een bericht/pagina stijlen zonder dat je dezelfde stijlen één voor één opnieuw hoeft toe te passen op verschillende blokken. Dit betekent dat je meerdere blokken en kindblokken kunt selecteren en een stijlvariatie kunt toewijzen aan de hele selectie.

Dit is mogelijk dankzij de uitbreiding van blokstijlvariaties die nu de styling van binnenste blokken en elementen ondersteunen en gebruik maken van de verminderde styling specificiteit voor Global Styles.

Blokstijlvariaties kunnen alleen worden gedefinieerd en gemanipuleerd via Global Styles als je ze hebt geregistreerd met een van de volgende methoden:

• Met behulp van theme.json partials in de map /styles van het thema
• Met behulp van de functie register_block_style
• Blokstijlvariaties definiëren onder styles.blocks.variations in je theme.json

Laten we er naar kijken.

Blokstijlvariaties definiëren met theme.json partials

Net als themastijlvariaties kunnen blokstijlvariaties hun eigen theme.json partials hebben in de map /styles van je thema.

Het verschil tussen de twee typen variaties is dat blokstijlvariaties een nieuwe property op het hoogste niveau blockTypes hebben, die een niet-lege array is van bloktypen die de blokstijlvariatie ondersteunen. Er is ook een nieuwe property slug toegevoegd “om consistentie te bieden tussen de verschillende bronnen die blokstijlvariaties kunnen definiëren en om de slug los te koppelen van de vertaalbare property title.”

De dev note geeft het volgende voorbeeld van theme.json partial:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

Programmatisch definiëren van blokstijlvariaties via register_block_style

De functie register_block_style biedt een tweede manier om blokstijlvariaties te registreren. Je kunt deze op deze manier gebruiken in de functions.php van je thema:

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

Wanneer je nu een blok Group of Columns selecteert, toont het paneel Styles van de blokzijbalk een knop voor de geregistreerde sectiestijl.

Je vindt een dieper overzicht en meer voorbeelden van sectie stijlvariaties in Styling van secties, nested elementen en meer met Block Style Variations in WordPress 6.6 door Justin Tadlock, in de dev note van Aaron Robertshaw, en in Block Styles: Block Style Variations uitbreiden pull request.

Blokstijlvariaties definiëren met behulp van styles.variations

Hoewel het op dit moment mogelijk is om de theme.json styles.variations property te gebruiken, is deze methode slechts tijdelijk beschikbaar en zou binnenkort afgeschreven moeten zijn. Kijk voor een uitgebreidere beschrijving in deze sectie van de dev note.

Kleur en typografie presets

Je kunt nu het kleurenpalet en de lettertypefamilies van je thema wijzigen vanuit de interface Global Styles door een van de beschikbare presets te selecteren.

Als je huidige thema kleur- en typografie-presets ondersteunt, verschijnen ze onder Colors en Typography settings in Global Styles.

De volgende afbeeldingen tonen twee kleurenpaletten van Twenty Twenty-Four.

Om deze functionaliteit aan je thema’s toe te voegen, moet je stijlvariaties maken die alleen kleuren en typografie bevatten. De aldus gedefinieerde stijlen worden geëxtraheerd en gebruikt om presets te genereren.

Zie voor deze functie ook Core Editor Improvement: Je designs upgraden en Individuele typografie- en kleurvariaties maken…

Site-brede achtergrondafbeeldingen

Vanaf WordPress 6.6 kun je sitebrede achtergrondafbeeldingen definiëren in theme.json en de Site Editor.

Een sitebrede afbeelding is de waarde van een background-image property die is ingesteld op het body element op siteniveau en verschijnt op elke websitepagina.

In de theme.json, om een sitebrede achtergrondafbeelding te definiëren, kun je de backgroundImage.url onder de styles.background property gebruiken:

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

In het bovenstaande voorbeeld hebben we een absoluut pad naar de afbeelding ingesteld, maar je kunt op deze manier ook achtergrondafbeeldingen definiëren met paden die relatief zijn aan de theme root.

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

Dan kun je de volgende afbeeldingsprops gebruiken:

• backgroundPosition
• backgroundSize
• backgroundRepeat

Als je geen thema-ontwikkelaar bent, kun je site-brede achtergrondafbeeldingen gebruiken via het paneel Styles van de Site Editor. In WordPress 6.6 vind je de juiste regelaars onder Styles > Layout.

Dit is de eerste iteratie voor achtergrondafbeeldingen. Voor een beter beeld van hoe het werkt, de beperkingen en wat de volgende stap is, bekijk je de dev note Site-wide background images in WordPress 6.6.

Raster lay-out variatie

Met een nieuwe layoutvariant van het groepsblok kun je elementen binnen een groep weergeven als een raster.

Je kunt het uitproberen door een Group blok toe te voegen aan het canvas van de editor en de Grid layout te kiezen in het instellingenpaneel van het blok.

Rasterindeling is er in twee soorten:

• Auto genereert de rasterrijen en -kolommen automatisch
• Met Manual kun je het aantal kolommen instellen dat je aan het raster wilt toevoegen

Voeg inhoud toe aan de rasterelementen en pas de grootte aan met de handgrepen. Je kunt ook de minimale kolom met of het aantal kolommen aanpassen, afhankelijk van het geselecteerde rastertype.

Negatieve marges

Je kunt nu negatieve marges instellen voor alle blokken die margeregelaars ondersteunen. Voor WordPress 6.6 was deze functie alleen beschikbaar in theme.json, terwijl het nu eenvoudig is om negatieve marges toe te passen op elementen om overlappende effecten te creëren.

Merk op dat je vanaf WordPress 6.6 de negatieve waarde handmatig moet toevoegen, zoals in de volgende afbeelding.

Custom schaduwen

Met WordPress 6.6 kun je custom schaduwen maken en bewerken in de interface Global Styles. Om je custom schaduwen te maken, navigeer je naar de site-editor en selecteer je Shadows in het menu Global Styles. Hier vind je het paneel Custom. Als je op de knop + klikt, krijg je via een nieuw element toegang tot een aantal besturingselementen om je schaduw aan te passen of te hernoemen/verwijderen.

Custom presets aspectratio

Thema-ontwikkelaars kunnen nu aangepaste aspectratio-presets definiëren door de optie settings.dimensions.aspectRatios in theme.json in te stellen.

Extra wijzigingen voor developers

De wijzigingen voor ontwikkelaars zijn echter niet beperkt tot thema’s. Andere toevoegingen en verbeteringen zijn van invloed op de React-bibliotheek en verschillende API’s.

Options API: Autoload uitschakelen voor grote opties

Vóór WordPress 6.6 werd een groot aantal opties automatisch geladen bij elke paginalading. Om dit standaard gedrag te voorkomen, moesten ontwikkelaars "yes"/true of "no"/false doorgeven aan de derde parameter van add_option() of update_option() functies. Omdat deze parameter optioneel was, met een standaardwaarde van "yes", werden er dus grote hoeveelheden onnodige gegevens geladen op elke pagina, met een negatieve invloed op de prestaties van de site.

Om dit gedrag te voorkomen, introduceert WordPress 6.6 een paar wijzigingen in de Options API:

Om WordPress te laten bepalen of een optie op de huidige pagina moet worden geladen, is de standaardwaarde voor de parameter $autoload van add_option() en update_option() gewijzigd van "yes" in null. De parameter accepteert nu een van de volgende waarden:

• true: laad de optie op elke pagina om een extra DB-query te vermijden.
• false: nooit autoloaden de optie om te voorkomen dat gegevens op elke pagina worden geladen.
• null: misschien autoload, wat betekent dat de autoload waarde dynamisch bepaald moet worden. Standaard worden opties automatisch geladen tenzij ze grote waarden bevatten.

De databasewaarden zijn overeenkomstig gewijzigd en nu is de autoloadwaarde voor elke optie een van de volgende:

• on: moet op elke pagina worden geautoload. Het is toegevoegd met een expliciete true waarde.
• off: mag niet automatisch worden geladen en mag alleen worden gebruikt op één beheerpagina. Het is toegevoegd met een expliciete false waarde.
• auto: vertrouwen op het standaard autoloading gedrag van WP. In WP 6.6 moet het autoloaden, maar het gedrag kan in de toekomst veranderen.
• auto-on: moet automatisch worden geladen. Het is dynamisch ingesteld op true.
• auto-off: mag niet automatisch worden geladen. Deze wordt dynamisch ingesteld op false.

Naast deze wijzigingen introduceert WordPress 6.6 verschillende functies en filters:

• De functie wp_autoload_values_to_autoload() retourneert alle databasewaarden die automatisch moeten worden geladen.
• Met het wp_autoload_values_to_autoload filter kun je de lijst met opties bewerken die automatisch moeten worden geladen.
• Het wp_default_autoload_value filter stelt de waarde in van een optie waar geen expliciete waarde is ingesteld.
• Het wp_max_autoloaded_option_size filter wijzigt de drempel waarboven opties standaard niet automatisch worden geladen. De standaardwaarde is 150000. (150kb)

Deze wijziging is vooral handig voor complexe websites met veel plugins en verdient de aandacht van plugindevelopers. Voor een grondiger overzicht raden we aan om de custom aspectratio presets te bekijken.

Verbeteringen aan de React bibliotheek

Er zijn twee belangrijke veranderingen van toepassing op de React bibliotheek. Ten eerste bevat WordPress 6.6 React 18.3, dat waarschuwingen voor deprecaties en andere wijzigingen toevoegt om ontwikkelaars te helpen zich voor te bereiden op React 19 zodra deze stabiel wordt.

Ten tweede kunnen ontwikkelaars nu de nieuwe React JSX transform gebruiken, die voor het eerst werd geïntroduceerd met React 17.

Voor een beter beeld van deze wijzigingen, zie Voorbereiding op React 19 Upgrade en JSX in WordPress 6.6 dev notes.

Verbeteringen aan de Block API

WordPress 6.6 brengt ook verschillende technische wijzigingen in de Block API, waaronder de volgende:

• Unified Extensibility API’s
• Verbeteringen in de detectie van actieve blokvariaties
• Social Links blok veranderingen in WordPress 6.6

Samenvatting

In dit lange artikel hebben we veel interessante features en veranderingen besproken die met WordPress 6.6 komen, van overrides van blokpatterns tot verbeteringen aan Data Views, nieuwe functies voor thema-ontwikkelaars en de gelijkschakeling van bewerkingservaringen in Site Editor en Post Editor. Maar er is nog veel meer dat we niet in dit artikel hebben behandeld, zoals rollbacks voor auto-updates.

Als je nog meer wil weten, mag je een reeks uitstekende bronnen van WordPress core medewerkers niet missen, waar we naar verwezen tijdens het testen van WordPress 6.6. Onder de vele bronnen, raden we WordPress 6.6 Source of Truth door Anne McCarthy, de Learn WordPress Online Workshops op Meetup, de WordPress Developer blog, de dev notes gepubliceerd op de Make WordPress Core blog, en de regelmatige updates door Birgit Pauli-Haack op Gutenberg Times aan, om er maar een paar te noemen.

Nu is het aan jou. Heb jij de functies van WordPress 6.6 al getest? Welke functie of verandering vond je het leukst? Laat hieronder een reactie achter en praat mee.