Wat is er nieuw in WordPress 5.3? (nieuwe blokken, nieuwe API’s en verbeterde gebruikerservaring voor admins)

WordPress 5.3 “Kirk” is officieel uitgebracht op 12 november 2019 en is als download beschikbaar.

Wat is er nu precies veranderd met WordPress 5.3?

Ten eerste is er een ontzettend groot aantal versie-updates van de Gutenberg-plugin aan de WordPress-core toegevoegd, van 5.4 tot 6.6. Dit betekent veel features en verbeteringen voor zowel gebruikers als ontwikkelaars en tevens een belangrijke boost in de prestaties.

Maar WordPress 5.3 biedt veel meer dan alleen Gutenberg. Versie 5.3 heeft namelijk allerlei verbeteringen die te maken hebben met de Site Health Tool, een gloednieuw standaardthema (TwentyTwenty), verbeteringen in de gebruikersinterface van de admin, betere ondersteuning voor PHP 7.4, betere toegankelijkheid, en veel meer.

Dat zijn nogal wat dingen! Als je er klaar voor bent, gaan we WordPress 5.3 dus eens goed onder de loep nemen.

Wat er nieuw is aan de Blok-Editor

Sinds zijn introductie is de blok-editor regelmatig van verbeteringen voorzien dankzij de input van vrijwilligers van over de hele wereld. Maar deze verbeteringen worden echter niet meteen aan de WordPress-core toegevoegd zodra ze uitgebracht worden.

Met 5.3 worden dertien releases van de Gutenberg-plugin in één keer samengevoegd tot de kern. Dus als je de Gutenberg-plugin tot nu toe niet hebt gebruikt en je hebt hem niet regelmatig bijgewerkt, dan zal de release van WordPress 5.3 je veel verbeteringen en nieuwe features in de Block Editor brengen.

Ook zijn er meldingen van verbeteringen in performance. De volgende benchmark vergelijkt de prestaties voor een groot artikel (36.000 woorden/1.000 blokken) met verschillende versies van de Gutenberg-plugin.

Je ziet misschien zelf geen verschil in de laadtijden van normale berichten, maar het is vrij duidelijk dat de verbeteringen zich in de prestaties van de editor bevinden.

Versie	Ladingstijd	ToetsDruk op Gebeurtenis (Typen)
Gutenberg 6.6.0	4.7s	38.96ms
Gutenberg 6.5.0	4.68s	42.96ms
WordPress 5.2	5.69s	57.65ms

Het is lastig om een volledige lijst te maken van alle toevoegingen, wijzigingen en bugfixes, dus we hebben degene met de grootste impact op de ervaring van de gebruiker/ontwikkelaar gekozen en vervolgens gegroepeerd:

• Verbeteringen aan de Bewerkingservaring
• Eigenschappen voor Thema-ontwikkelaars en -ontwerpers
• Eigenschappen voor Blokontwikkelaars

Verbeteringen aan de bewerkingservaring

Als je de Gutenberg-plugin nog niet eerder hebt geïnstalleerd, zul je een gloednieuw blok zien: het Groep-blok. Deze is toegevoegd aan de editor in de release van Gutenberg 5.5 en is een multi-inzetbare container voor andere blokken, waarmee je geavanceerde bloksjablonen kunt maken die in elke pagina van je WordPress-website kunnen worden opgenomen.

Het nieuwe Groep-blok ondersteunt brede uitlijningen en het gebruik van achtergrondkleuren. Hierdoor krijgen WordPress-gebruikers veel vrijheid bij het maken van content.

Naast het Groep-blok hebben we tien verbeteringen in de blok-editor bekeken die van grote invloed zouden kunnen zijn op hoe je de editor gebruikt.

1. De Blok-Appender

De Groep- en Kolom-blokken tonen vanaf nu in lege toestand een blok-appender. Deze appender is feitelijk niets meer dan een grijs vlak met daarin een plusteken, maar zorgt wel voor een betere gebruikerservaring en bruikbaarheid.

2. Groepering van de blokken per groepsinteractie

Je kunt nu Groep-blokken maken door groepsinteractie, wat betekent dat je meerdere blokken kunt selecteren en ze met slechts een paar klikken kunt groeperen. Je hoeft alleen maar alle blokken die je nodig hebt toe te voegen aan de selectie en dan te klikken op Groep in het ellipsmenu. Klaar is Kees!

3. Kolommen met aangepaste breedte

Het blok Kolommen ondersteunt nu een schuifregelaar in de blok-instellingen waarmee je voor elke kolom een aangepaste breedte kunt instellen. (In een toekomstige release kunnen we verdere verbeteringen aan het blok Kolommen verwachten met de introductie van een versleepbare regelaar om de grootte te veranderen.)

4. Een lay-out picker voor kolom-blokken

Een extra verbetering aan het blok Kolommen in WordPress 5.3 is de lay-out picker. Deze functie is toegevoegd aan de editor in Gutenberg 6.0 en stelt gebruikers in staat om te kiezen uit verschillende vooraf gedefinieerde lay-outs (patronen) of om over te gaan naar de standaard lay-out. Dit versnelt het bewerkingsproces enigszins en hierdoor is het blok makkelijker te gebruiken voor de minder technisch onderlegde gebruikers.

De lay-out picker is een implementatie van de Block Patterns API: het is een manier om te kiezen uit een vooraf gedefinieerde set van opties bij het toevoegen van een blok. Naast het blok Kolommen vinden we voorbeelden van deze blokpatronen in Tabel- en Omslagafbeelding-blokken. Je kunt meer lezen over de Block Patterns API op GitHub.

5. Verbeteringen aan het tabel-blok

Het Tabel-blok is uitgebreid met een aantal nieuwe functies. Het ondersteunt nu tekstuitlijningen in kolommen, tabel kop- en voettekst, en achtergrondkleuren.

6. Beëindig de navigatiemodus

Gutenberg 6.3 introduceerde de Navigatiemodus om te navigeren tussen blokken met behulp van Tab of pijltjestoetsen zonder naar de inhoud van het blok te gaan. Gebruikers kunnen overschakelen van de Navigatiemodus naar de Bewerkingsmodus en weer terug door simpelweg op Enter of Esc te drukken. Deze feature is een grote verbetering in de bruikbaarheid, vooral als het gaat om schermlezers.

7. Beweging toegevoegd aan blokwijzigingen en herschikkingen

Met de introductie van beweging om blokken te veranderen, aan te maken, te verwijderen en te herordenen, komt een extra verbetering in de bruikbaarheid. Matías Ventura legt uit waarom deze functie relevant is:

Beeld je in dat je een lijst hebt lijst met een aantal items: de actie van het verplaatsen, herschikken, enz., heeft niet alleen invloed op het item dat wordt beroerd, maar ook op de rest van de lijst; vooral het item waarmee het “van plaats verwisselt”. De praktijk leert ons dat om iets op de plaats van iets anders te zetten, beide dingen moeten bewegen. Als deze verandering onmiddellijk wordt doorgevoerd, dan is het lastiger om precies te zien wat er veranderd is en wat het effect is op de hele groep. Het duurt eigenlijk even om je opnieuw te oriënteren. Vloeiende en niet-onmiddelijke overgangen en op gebaren gebaseerde interacties helpen over het algemeen de twee lijsten (de voor en na) met elkaar te verbinden op een manier die de interactie (het “wat is er net gebeurd is”) sneller duidelijker maakt.

8. Inline herordenen van de afbeeldingen in galerijblokken

Het Galerij-blok is uitgebreid met een inline afbeeldingherordening. We kunnen nu de afbeeldingen in de galerij herschikken met een eenvoudige klik op de knoppen Afbeelding vooruit bewegen en Afbeelding achteruit bewegen zonder het media-pop-upscherm te openen.

9. Verbeteringen aan het blok ‘nieuwste berichten’

Het blok Nieuwste Berichten ondersteunt nu de plaatsing van samenvattingen en content (zie pull #14627).

Het blokinstellingenpaneel bevat nu een sectie waar de gebruiker de content van het bericht kan in- of uitschakelen. Als Artikelinhoud aanstaat, kun je kiezen tussen de opties Samenvatting en Volledig Artikel. Tot slot kun je met een schuifregelaar de lengte van de uittreksels bepalen als Samenvatting is aangevinkt.

Deze laatste verandering is onderdeel van een bredere strategie die gericht is op algemene verbeteringen ten opzichte van gebruikerservaring. In Iterations on “Latest Posts” Block, zegt Mel Choyce:

Als voorbereiding op het werken aan paginasjablonen in Gutenberg, willen we een robuuste set dynamische blokken die in elk bericht of pagina kunnen worden geplaatst. Met de uitbreiding van dit blok kunnen we in de toekomst complexere dynamische of mondiale blokken beter aanpakken.

Gebruikers zouden niet verstand hoeven te hebben van het schrijven aangepaste query’s of het maken van loops om een paar berichten aan hun homepage toe te voegen. Het blok Nieuwste Berichten is een goed begin, maar om een volledig functionerende oplossing te worden, moet het meer ondersteunen dan alleen titels en berichtdata.

10. Verbeteringen aan lijst-blokken

Lijst-blokken ondersteunen nu indent/outdent snelkoppelingen, startwaarden en ondersteuning voor omgekeerde volgorde van lijsten.

Extra verbeteringen aan de blok-editor

Door het grote aantal versies van de Gutenberg-plugin dat in de Core wordt samengevoegd, zijn er talloze wijzigingen, verbeteringen en bugfixes waar we niet eens aan zijn toegekomen. Dit zijn er een paar:

• Het blok Kolommen ondersteunt nu verticaal uitlijnen (Gutenberg 5.4).
• Het blok Media & Tekst ondersteunt nu verticaal uitlijnen (Gutenberg 5.5).
• Het blok Knop ondersteunt nu een linkdoel-optie (Gutenberg 6.2).
• Het blok Separator ondersteunt nu de randkleur (Gutenberg 6.3).
• De omslagafbeeldingen zijn nu van grootte te veranderen (Gutenberg 6.4).
• Verbeterde toetsenbordervaring, vooral nuttig voor mobiel (Gutenberg 6.4).
• Het blok Afbeelding heeft nu een cirkelvormige bijsnijdoptie (Gutenberg 6.4).
• Een gloednieuw Social Links-blok is toegevoegd (Gutenberg 6.5).
• Het Gallerij-blok biedt nu ondersteuning voor Galerij-onderschriften (Gutenberg 6.5).

Interessante features voor thema-ontwikkelaars en -ontwerpers

WordPress 5.3 voegt veel functies en verbeteringen toe aan de block-editor, ook voor thema-ontwikkelaars en ontwerpers.

Drie belangrijke veranderingen zijn specifiek bedoeld voor thema-ontwerpers en hebben te maken met de CSS en HTML van verschillende blokken.

1. De binnenste container van het groep-blok

Het Groep-blok bevat nu een binnenste container (wp-block-group__inner-container) die, indien niet zorgvuldig ontworpen, buiten de hoofdblokcontainer kan uitsteken. Dit kan voor onverwachte effecten zorgen in het uiterlijk van de pagina.

Daarom kan bij thema’s die brede en volledige uitlijning ondersteunen, een Blok-container extra CSS nodig hebben om het te laten verschijnen zoals je normaal gesproken zou verwachten.

Hier is een voorbeeld uit de blog Make WordPress Core dat laat zien hoe je blokken kunt aanpassen om dit soort problemen te voorkomen:

// Apply entry-content styles to the group block's inner container as well. 
.entry-content,
.wp-block-group__inner-container {
	width: 60vw;
	margin: 0 auto;
}
 
// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.alignwide,
.wp-block-group.alignwide .alignfull {
	margin-left: -10vw;
	width: 80vw;
}
 
.alignfull {
	margin-left: -20vw;
	width: 100vw;
}
 
// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
	max-width: 100%;
	margin-left: 0;
}

2. Nieuwe klassenamen voor tekstuitlijning

Vóór WordPress 5.3 werden inline stijlen gebruikt om wijzigingen aan te brengen in het uitlijnen van tekstblokken (Kop, Paragraaf, Citeren en Strofe).

Het hoge aantal specifieke inline stijlen kan het moeilijk maken om het uiterlijk van deze blokken aan te passen. Maar thema-ontwerpers kunnen nu gebruikmaken van drie nieuwe CSS-klassen die de inline stijlen vervangen:

• has-text-align-right
• has-text-align-center
• has-text-align-left

Bestaande blokken worden automatisch geconverteerd en de klassen worden toegepast zodra er berichten worden geopend en opgeslagen in de Blok-editor.

3. Update aan markup van de blokken galerij en tabel

Galerij- en Tabel-blokken zijn nu omsloten door figure elementen. De stijlen van de elementen veranderen mee en thema’s kunnen hierdoor mogelijk worden beïnvloed en moeten hierdoor misschien worden bijgewerkt. Hier is de nieuwe opmaak van een Tabel-blok:

<figure class="wp-block-table is-style-stripes">
	<table class="">
		<tbody>
			<tr>
				<td>Left</td>
				<td>Center</td>
				<td>Right</td>
			</tr>
		</tbody>
	</table>
</figure>

Zie meer details over de klassenamen en extra themagerelateerde wijzigingen op de blog Make WordPress Core.

Features voor blokontwikkelaars

WordPress 5.3 brengt wijzigingen en verbeteringen aan de Block API’s.

1. Registreren en uitschrijven blokstijlen

Vóór 5.3 moesten ontwikkelaars en ontwerpers JavaScript schrijven om stijlen te registreren/uit te schrijven.

Met de release van WordPress 5.3, kunnen we gebruikmaken van twee nieuwe helper-functies die het mogelijk maken om blokstijlen te registreren en uit te schrijven via PHP: register_block_style en unregister_block_style.

De functie register_block_style registreert een nieuwe stijl voor het opgegeven blok. De functie bevat twee argumenten:

• de naam van het blok.
• een reeks van stijleigenschappen.

De reeks kan de volgende parameters bevatten:

• name: (verplicht) een unieke identificatiecode voor de stijl.
• label: (verplicht) een label voor menselijke gebruikers.
• inline_style: (optioneel) een CSS-code die de CSS-klasse voor de stijl registreert.
• style_handle: (optioneel) een handle naar een reeds geregistreerde stijl (de stijl handle equeuet de stijl indien nodig).

We kunnen inline stijlen registreren met bijvoorbeeld de volgende code:

add_action( 'init', 'register_custom_block_style' ); 

function register_custom_block_style() {
	if( ! function_exists( 'register_block_style' ) ) return;

	register_block_style(
		'core/quote',
		array(
			'name'			=> 'blue-quote',
			'label'			=> __( 'Blue Quote' ),
			'inline_style'	=> '.wp-block-quote.is-style-blue-quote { color: blue; }',
		)
	);
};

De nieuwe stijl is als het goed is nu beschikbaar in de instellingen van de sectie Styles.

In plaats van een inline stijl te registreren, kunnen we een handle doorgeven aan een eerder geregistreerde stijl:

wp_register_style( 'custom-style', get_template_directory_uri() . '/custom-style.css' );
 
register_block_style(
	'core/quote',
	array(
		'name'			=> 'custom-quote',
		'label'			=> 'Custom Quote',
		'style_handle'	=> 'custom-style',
	)
);

De volgende afbeelding toont de blauwe quote die in het bovenstaande voorbeeld is geregistreerd.

Om een stijl die eerder geregistreerd was op de server met register_block_style uit te schrijven, kunnen we de functie unregister_block_style gebruiken.

We kunnen unregister_block_style als volgt gebruiken:

unregister_block_style( 'core/quote', 'custom-quote' );

2. Blokvoorbeeld API

WordPress 5.3 voegt een nieuwe JS-eigenschap toe die het mogelijk maakt om een voorbeeld te bekijken van het geselecteerde blok uit de bibliotheek voordat het aan de content wordt toegevoegd.

We kunnen ondersteuning voor deze functie toevoegen door de example in blokinstellingen als volgt te definiëren:

const blockSettings = {
	// ... 
 
	example: {
		attributes: { 
			content: __( 'Content of the block' )
		},
		innerBlocks: []
	} 
}
registerBlockType( name, settings );

Verbeteringen aan de site health tool

WordPress 5.2 introduceerde de Site Health tool om informatie te geven over de technische gezondheid van een website en om sitebeheerders te helpen hun websites te herstellen bij technische problemen. Met de release van WordPress 5.3 krijgt deze Site Health tool verschillende verbeteringen en wijzigingen voor beide aspecten van deze tool.

1. Verwijderde Site Health Grading

In WordPress 5.2 werd bovenaan de pagina een scorepercentage getoond van de Site Health status. Sommigen hadden echter kritiek op het plaatsen van een score en vonden deze dubbelzinnig en verwarrend omdat gebruikers zouden kunnen streven naar een 100% score voor hun website (lees meer hierover in deze ticket).

De indicator geeft aan voor hoeveel tests een site is geslaagd, maar niet het niveau van “gezondheid”. Om deze reden is het percentage verwijderd en toont de Site Health Tool nu een status. Deze moeten meer worden gezien als een reminder dan een precieze indicator van de prestaties en veiligheid van een website. De twee statussen zijn:

• Moet worden verbeterd
• Goed

2. Verbeterde herstel-e-Mails

Wanneer zich een storing voordoet, probeert WordPress een herstel-e-mail te sturen naar de sitebeheerder. Helaas bieden deze emails geen nuttige informatie voor het debuggen en worden we alleen geïnformeerd dat er iets mis is gegaan met onze website.

Om meer nuttige informatie te geven over het herstellen van je WordPress-website, introduceert WordPress 5.3 het recovery_email_debug_info -filter, een bijbehorende reeks van debug-informatie. De herstel-e-mail bevat nu de basisinformatie die je moet helpen met het oplossen van problemen op de site of, in ieder geval, om hulp van anderen te krijgen.

Deze emails zullen een extra sectie bevatten die begint met de volgende string:

When seeking help with this issue, you may be asked for some of the following information:

Vervolgens wordt de volgende informatie verstrekt:

• WordPress-versie.
• PHP-versie.
• Huidige thema en versie.
• De naam en versie van de plugin die het probleem veroorzaakt.

De informatie wordt bewust tot een minimum beperkt om verwarring voor de eindgebruikers te voorkomen, maar ontwikkelaars kunnen een filter recovery_email_debug_info gebruiken om meer details toe te voegen indien nodig (zie ticket #48090 voor meer informatie).

3. Filters voor voltooide tests van de site health status

Het nieuwe filter site_status_test_result  stelt ontwikkelaars in staat om de uitvoer van een voltooide statustest te filteren om het resultaat van een test uit te breiden.

Ontwikkelaars kunnen dit filter ook gebruiken voor aanvullende acties. Hier een mooi gebruiksvoorbeeld (zie ticket #47864):

Een goed voorbeeld is een hostingprovider waarbij PHP extensies ontbreken; dus ze voegen een actieve link toe naar de PHP extension manager van hun bedieningspaneel. Misschien wilden ze directer zijn, ze wilden de PHP versiecontrole die de gebruikersupdate aanbeveelt, dus ze voegen een ajax-knop toe die de PHP-versie voor hen ter plekke zal veranderen.

Dit filter is zowel beschikbaar in PHP voor directe tests en als JavaScript-implementatie voor asynchrone tests.

Verbeterde gebruikerservaring voor beheerders

Naast de Site Health Tool, brengt WordPress 5.3 verschillende verbeteringen die de gebruikerservaring van beheerders verhogen. Daarnaast zijn er een aantal wijzigingen die het werken met het WordPress-dashboard aanzienlijk zal verbeteren.

1. Verbeterd Kleurcontrast

Het kleurcontrast is verbeterd en veel problemen met toegankelijkheid zijn opgelost.

2. Emailverificatie van beheerders

Een admin email verification wordt nu geactiveerd nadat een beheerder een tijdje niet is ingelogd. Dit interval is standaard zes maanden, maar ontwikkelaars kunnen een ander interval instellen met behulp van het filter admin_email_check_interval (zie tickets #46349 en #48144).

Om de verificatie van de e-mail van de admin uit te schakelen, kunt u de volgende filter gebruiken:

add_filter( 'admin_email_check_interval', '__return_false' );

3. Hervatten van uploads

Met het uploaden van grote foto’s van een smartphone loopt het proces niet halverwege in de soep nu WordPress ondersteuning biedt voor het hervatten van de uploads als deze mislukken.

4. Beeldrotatie

Afbeeldingen worden nu correct gedraaid bij het uploaden volgens de EXIF-oriëntatiemetadata.

Een gloednieuw standaardthema: Twenty Twenty

WordPress 5.3 wordt geleverd met een gloednieuw standaard thema: Twenty Twenty. Het is een minimaal thema, gemaakt voor flexibiliteit, helderheid en leesbaarheid, met een scherpe focus op de blok-editor.

Twenty Twenty is gebouwd aan de hand van een bestaand gratis thema uit de community: Chaplin van Andérs Noren. Het heeft een gratis en opensource lettertype met een sterk en aanwezig karakter:

Inter door Rasmus Andersson. Je kunt meer lezen over Twenty Twenty in onze diepaande blogartikel: Twenty Twenty: een inleiding tot het nieuwe standaard WordPress-thema.

Wijzigingen voor WordPress-ontwikkelaars

WordPress 5.3 komt met verschillende wijzigingen en verbeteringen voor WordPress-ontwikkelaars. Van de lijst met vele veranderingen willen we in ieder geval deze noemen:

• Verbeteringen aan core-component Date/Time
• Nieuwe aria-current Attribute
• Nieuw aria-label Attribute
• Functies om UGC-waarde toe te Voegen voor Attributes in Links
• De REST API in WordPress 5.3

Verbeteringen aan Core-Component Date/Date

Het kerncomponent Date/Time gaat over alles wat te maken heeft met datum, tijd en tijdzones in WordPress. Zoals Andrey “Rarst” Savchenko uitlegt:

Het Date/Time-component was gebaseerd op de zogenaamde “WordPress-time stamp“, een sum van een Unix-tijdstempel met een tijdzone offset. Dit veroorzaakte veel bugs en een gebrek aan interoperabiliteit met upstream PHP of welk extern systeem dan ook. In de interne documentatie worden deze ten onrechte Unix-timestamps genoemd.

Hoewel het onmogelijk was om de tijdstempels van WordPress volledig te verwijderen zonder problemen met verkeerde compatibiliteit, is de componentcode verbeterd met verschillende bugfixes en is de inline documentatie bijgewerkt en gecorrigeerd waar nodig.

Bovendien hebben we met de release van WordPress 5.3 toegang tot een aantal nieuwe API Date/Time-functies:

• wp_timezone_string() -Deze functie haalt de tijdzone van de site op als string. Het kan leiden tot een PHP tijdzone-string of ±HH:MM offset..
• wp_timezone() – Deze functie haalt de tijdzone van de site op als DateTimeZone-object
• wp_date() – Dit is een nieuwe functie voor datumlokalisatie. Het is bedoeld ter vervanging van date_i18n().
• current_datetime() – Deze functie haalt de huidige tijd als DateTimeImmutable object met de tijdzone uit de instellingen.
• get_post_datetime() – Haalt de berichttijd op als DateTimeImmutable object.
• get_post_timestamp() – Haalt de berichttijd op als Unix-tijdstempel.

Al deze functies zijn gedefinieerd en gedocumenteerd in wp-includes/functions.php. Het gebruik van current_time(), get_post_time() en date_i18n() wordt nu afgeraden.

Zie ook Verbeteringen van datum-/tijdcomponenten in WordPress 5.3 en Nieuwe functies om toe te voegen aan de API op GitHub.

Nieuw aria-current attribuut

Wanneer een nieuwe pagina of bericht wordt gepubliceerd, verschijnt de naam ervan in verschillende menu’s en widgets. Vóór WordPress 5.3 zouden veel gebruikers die link niet hebben herkend en dit kan vooral voor gebruikers met een beperking en/of gebruikers van schermlezers verwarrend zijn geweest.

Met de release van WordPress 5.3, is een nieuw aria-current="page” attribute programmatisch toegevoegd om links naar dezelfde pagina aan te geven. Thema-ontwikkelaars worden aangemoedigd om specifieke stijlen toe te voegen aan die links. Deze wijziging is van invloed op de volgende kernwidgets:

• Nieuwste Berichten.
• Navigatiemenu.
• Pagina’s.
• Categorie.
• Archieven.

Hier is een voorbeeld van hoe je dit kunt gebruiken:

a[aria-current] {
	/* CSS styles for current link */
}


Nieuwe aria-label attributen in navigatiemenu’s

“Landmarks bieden een krachtige manier om de organisatie en structuur van een webpagina te identificeren” en stellen thema-ontwikkelaars in staat om ondersteuning voor toetsenbordnavigatie in webpagina’s toe te voegen met behulp van landmark-rollen.

ARIA landmarks bieden een context voor web content en zijn vooral nuttig voor gebruikers van ondersteunende technoloie.

Vanwege het belang van ARIA Landmarks voor de toegankelijkheid, voegt WordPress 5.3 nu ondersteuning toe voor aria-label-attributes in berichten en navigatie voor reacties.

Thema-ontwikkelaars en -ontwerpers kunnen ARIA landmarks toevoegen aan de navigatiemenu’s voor berichten en reacties, en een nieuwe aria_label parameter toevoegen aan de volgende functies:

• _navigation_markup()
• get_the_post_navigation()
• get_the_posts_navigation()
• get_the_posts_pagination()
• get_the_comments_navigation()
• get_the_comments_pagination()
• the_post_navigation()
• the_posts_navigation()
• the_posts_pagination()
• the_comments_navigation()
• the_comments_pagination()

Lees meer over aria-label attributes in berichten en reacties in de navigatie in Make WordPress Core.

Functies om UGC-waarde toe te voegen aan attributen in links

In september 2019 kondigde Google twee nieuwe attributes aan die een manier bieden om de aard van links te identificeren: rel="sponsored" en rel="ugc":

rel=”ugc”: UGC staat voor User Generated Content en de ugc attribute-waarde wordt aanbevolen voor links in content die door gebruikers is gegenereerd, zoals reacties en forumberichten..

WordPress 5.3 voegt ondersteuning toe voor de rel="ugc" attribute in reacties. Deze verandering is in een paar uur tijd doorgevoerd en het is interessant om te zien hoe snel het ontwikkelteam reageerde op de aankondiging van Google (zie ticket #48022).

Daarnaast introduceert WordPress 5.3 twee nieuwe functies waarmee ontwikkelaars nofollow– en ugc-waarden kunnen toevoegen voor rel attributes in links:

• wp_rel_callback() wordt gebruikt om waarden toe te voegen aan rel attributes van gespecificeerde links en dit vervangt de nu verouderde wp_rel_nofollow_callback()-functie. De functie is gedefinieerd in wp-includes/formatting.php:

  /**
  	 * Callback to add a rel attribute to HTML A element.
  	 *
  	 * Will remove already existing string before adding to prevent invalidating (X)HTML.
  	 *
  	 * @since 5.3.0
  	 *
  	 * @param array  $matches Single match.
  	 * @param string $rel     The rel attribute to add.
  	 * @return string HTML A element with the added rel attribute.
  	 */
  	function wp_rel_callback( $matches, $rel ) {}

• wp_rel_ugc() voegt zowel nofollow– als ugc-waarden toe aan rel attributes in links. De functie is gedefinieerd in wp-includes/formatting.php:

  /**
  		 * Adds `rel="nofollow ugc"` string to all HTML A elements in content.
  		 *
  		 * @since 5.3.0
  		 *
  		 * @param string $text Content that may contain HTML A elements.
  		 * @return string Converted content.
  		 */
  		function wp_rel_ugc( $text ) {
  			// This is a pre-save filter, so text is already escaped.
  			$text = stripslashes( $text );
  			$text = preg_replace_callback(
  				'|<a>|i',
  				function( $matches ) {
  					return wp_rel_callback( $matches, 'nofollow ugc' );
  				},
  				$text
  			);
  			return wp_slash( $text );
  		}

Dus van nu af aan kunnen ontwikkelaars de rel="nofollow ugc" attribute toevoegen aan links op deze manier:

$link = '<a href="example.com">User generated link example</a>';
$ugc_link = wp_rel_ugc( $link );
echo $ugc_link;
// output: <a href="example.com" rel="nofollow ugc">User generated link example</a>

De REST API in WordPress 5.3

WordPress 5.3 brengt verschillende wijzigingen en verbeteringen aan de REST API.

Een van de meest relevante wijzigingen is de ondersteuning van ‘object‘- en ‘array‘ -datatypes voor register meta-functies.

Met deze uitbreiding ondersteunt de REST API nu van nature complexe metadatatypes. Hiermee kunnen we de API gebruiken om schema-gebaseerde validatie uit te voeren, het kan de client-code-interactie met complexe waarden vereenvoudigen en het stelt ontwikkelaars uiteindelijk in staat om complexe meta-gebaseerde blokken te creëren via de REST API.

Voor een uitgebreidere uitleg van dit onderwerp, zie WP 5.3 Ondersteunt Object en Array Meta Types in de REST API.

Een tweede significante verbetering heeft invloed op de _fields-parameter die het mogelijk maakt om de velden te beperken die zijn opgenomen in de JSON-objecten en worden teruggestuurd van de REST API. Zie het volgende voorbeeld:

/wp/v2/posts?_fields=id,title,author

Sinds WordPress 5.3 kan de parameter _fields gebruikt worden om het REST API-respons-object te filteren op geneste velden, zodat we kunnen vragen naar specifieke metavelden of eigenschappen binnen een complex object. We kunnen de _fields-parameter als volgt gebruiken:

?_fields=meta.meta-key-1,meta.meta-key-2,meta.meta-key-3.nested-prop

Voor een uitgebreider overzicht van de REST API-verbeteringen die met WordPress 5.3 worden meegeleverd, zie de REST API in WordPress 5.3.

Hoe te updaten naar WordPress 5.3

WordPress 5.3 is uitgebracht op 12 november 2019. Je kan onderstaande instructies volgen om je site te updaten.

Omdat de site van elke klant anders is, moet je altijd de standaard testomgeving gebruiken die Kinsta biedt (of een nieuwe premium testomgeving toevoegen als je bestaande testomgeving al in gebruik is). Je kunt je live site in een paar seconden klonen en vervolgens WordPress 5.3 testen met je bestaande thema en plugins om te controleren op compatibiliteit. Je kunt natuurlijk ook een handmatige back-up doen voordat je jouw live site bijwerkt, voor de zekerheid.

Om WordPress bij te werken naar 5.3 klik je op het update-pictogram in je WordPress-beheerdersdashboard. Klik dan op de knop “Nu updaten”. Terwijl jouw site wordt bijgewerkt, staat deze in de onderhoudsmodus. Zodra jouw updates afgerond zijn, wordt de site weer normaal.

Zolang alles goed gaat met de update moet je vervolgens het “Welkom bij WordPress 5.3”-scherm zien. En dat is het! Snel en eenvoudig.

Na het klikken in het dashboard ontvang je ook een bericht om je database bij te werken naar de nieuwste versie. Klik dan op de knop ” WordPress Database Updaten” en je bent er helemaal klaar voor.

Problemen met WordPress update oplossen

Wanneer mensen naar een belangrijke versie van WordPress updaten, is er altijd een groep die problemen ervaart. Dat is te wijten aan de duizenden verschillende plugins en thema’s die momenteel in de markt naast elkaar bestaan. Hier zijn een paar manieren om veelvoorkomende problemen op te lossen.

• Je site kan nog steeds deels gecachet zijn. Je kunt dit oplossen door de volledige paginacache van jouw WordPress-site te verwijderen.
• Probeer al je plugins uit te schakelen om te zien of het probleem is opgelost. Activeer ze vervolgens één voor één totdat je merkt welke plugin mogelijk een update van de ontwikkelaar nodig heeft.
• Probeer over te schakelen naar een standaard WordPress-thema, zoals Twenty Twenty. Als dit jouw probleem niet oplost, kun je misschien beter contact opnemen met jouw thema-ontwikkelaar.
• Problemen met JavaScript in je browser oplossen en diagnosticeren.

Samenvatting

We hebben de mooiste features en verbeteringen in WordPress 5.3 hierboven op een rijtje gezet.

Met dertien versies van de Gutenberg-plugin samengevoegd tot de core, verschillende verbeteringen aan de Site Health Tool, een gloednieuw standaardthema, verbeteringen in de beheerdersinterface, nieuwe functies en features voor ontwikkelaars en thema-ontwerpers, betere ondersteuning voor PHP 7.4, en een ongelofelijk aantal kleine wijzigingen, bugfixes en afschrijvingen, is WordPress 5.3 een belangrijke mijlpaal in de evolutie van het CMS.

Wat zijn jouw favoriete features/verbeteringen? Hebben we iets belangrijks gemist? Deel je mening met ons in de reacties hieronder.