Introductie van WordPress 5.4 (blokken, functies, nieuwe API’s)

WordPress 5.4 “Adderley” is uitgebracht op 31 maart 2020 en nu beschikbaar als download.

Hoog tijd dus om eens goed te kijken naar de meest interessante nieuwe functies en veranderingen die WordPress 5.4 met zich meebrengt.

Allereerst valt op dat de blok-editor in deze WordPress 5.4-release een grote rol speelt met vele nieuwe functies, verbeteringen en bugfixes. Ook zijn een aanzienlijk aantal versies van de Gutenberg-plugin samengevoegd met de core. Deze wijzigingen zijn van invloed op zowel de functionaliteiten als de gebruikersinterface en verbeteren de toegankelijkheid/bruikbaarheid van de redacteur, naast vele verbeteringen aan de bewerkingservaring in meer algemene zin.

Naast de editor introduceert WordPress 5.4 ook interessante verbeteringen aan de Site Health Tool en de REST API. Een aantal functies we ook in deze nieuwe versie verwachtten, zijn echter vooruitgeschoven en zullen naar verwachting gebundeld worden met de core in versie 5.5 (zie ook Standaard lazyloaden van afbeeldingen en Navigatieblokken).

Mogelijk zijn de volgende data en links van de ontwikkelingscyclus van WordPress 5.4 voor jou interessant:

• 11 februari 2020: Beta 1
• 18 februari 2020: Beta 2
• 25 februari 2020: Beta 3
• 3 maart 2020: RC 1
• 10 maart 2020: RC 2
• 17 maart 2020: RC 3
• 24 maart 2020: RC 4
• 27 maart 2020: RC 5
• 30 maart 2020: Testronde release WordPress 5.4
• 31 maart 2020: Release van WordPress 5.4 “Adderley“

Dan is het nu tijd om te kijken naar wat er nieuw is in WordPress 5.4! Ben je er klaar voor?

Wat is er nieuw in de blok-editor?

Een aanzienlijk aantal versies van de Gutenberg-plugin zijn samengevoegd in de kern van WordPress – van 6.6 tot 7.5. Als je geen gebruik maakt van de Gutenberg-plugin, dan zal je na het upgraden naar WordPress 5.4 tal van nieuwe features, verbeteringen en bugfixes aantreffen.

Maar het zijn niet alleen nieuwe blokken en features in de editor die de klok slaan. Ook worden er tal van prestatieverbeteringen gemeld:

Het team achter de blok-editor heeft een laadtijdreductie van 14% en een 51% time-to-type-reductie bereikt ten opzichte van WordPress 5.3 – voor een enorm bericht van ~36.000 woorden en ~1.000 blokken).

Allemaal gave dingen, dus laten we ze snel beter bekijken.

• Nieuwe features en verbeteringen voor de blok-editor
• Wijzigingen in de blok-editor voor thema- en blokontwikkelaars
• Extra features

Nieuwe features en verbeteringen voor de blok-editor

De blok-editor van WordPress is momenteel nog volop in ontwikkeling versie 5.4 van WordPress brengt veel veranderingen met zich mee die de bruikbaarheid van de editor verbeteren, zowel op desktop als mobiel.

Een aantal van deze wijzigingen hebben uitsluitend betrekking op de interface. Denk hierbij aan dat de fullscreen-modus nu standaard is ingeschakeld, verbeterde blokselectie, het makkelijker wisselen tussen bewerkingsmodus en selectiemodus, vaste mobiele toolbar en breadcrumbs voor verbeterde bloknavigatie. Verder zijn er twee nieuwe blokken en optie-instellingen toegevoegd die de functionaliteit van de editor verbeteren.

Hier is een korte lijst met onze favoriete functies en verbeteringen die je voor WordPress 5.4 kan verwachten:

• Nieuw blok met sociale iconen
• Nieuw blok voor knoppen
• De welkomstgids
• Schermvullende weergave standaard ingeschakeld
• Inline ondersteuning voor tekstkleur in RichText-blokken
• Extra kleuropties voor bepaalde blokken
• Uitgelichte afbeeldingen in het blok Nieuwste berichten
• Een nieuwe breadcrumb-bar voor bloknavigatie

Nieuw blok met sociale iconen

Het blok heette voorheen Sociale links, maar krijgt nu de naam Sociale iconen. Met dit blok kunnen auteurs snel iconen toevoegen met daarin links naar sociale profielen. De plugin biedt een groot aantal child-blokken met sociale iconen waaruit je kan kiezen. Dit blok bevond zich al even in de experimentele fase en is sinds Gutenberg 7.5 stabiel.

Het Sociale iconen-blok komt met drie vooraf gedefinieerde stijlen die je naar wens visueel kan aanpassen: Default, Logos only en Pill shape.

Dit blok zag het daglicht als experimentele functie in Gutenberg 6.5 (en werd samengevoegd met WordPress 5.3). Sociale iconen werd toegevoegd aan Gutenberg 7.5 en werkt mogelijk niet naar behoren als je een verouderde versie van de Gutenberg-plugin gebruikt.

Volgens Jorge Costa zijn er twee methodes om problemen met Sociale iconen te voorkomen:

• Handmatig inhoud migreren met Sociale iconen: update naar WordPress 5.4, laad het bericht in de blok-editor en sla het op. Sociale iconen wordt vervolgens automatisch gemigreerd naar de nieuwe versie.
• Zorg dat de Gutenberg-plugin is geïnstalleerd terwijl je WordPress updatet naar 5.4: De plugin is backward compatible en zou dus niet voor problemen moeten zorgen.

Nieuw blok voor knoppen

Deze is toegevoegd aan de blok-editor in Gutenberg 7.2. Het blok Knoppen vervangt het oude knoppenblok en stelt WordPress-gebruikers in staat om met dezelfde blokcontainer meerdere knoppen aan hun content toe te voegen.

Je kan voor elke knop kiezen uit twee vooraf ingestelde stijlen en verschillende aanvullende opties om het uiterlijk van de knop te verfijnen.

Met WordPress 5.4 krijgen site-eigenaren meer controle over de look en feel van hun call-to-actions dankzij de toevoeging van gradient-achtergronden. Deze worden bovendien geleverd met een aantal gradient-presets die sitebeheerders kunnen gebruiken als startpunt voor verdere aanpassingen.

De welkomstgids

WordPress 5.4 voegt een Welkom-slideshow toe met basisinformatie over de blok-editor en een link naar de online documentatie (toegevoegd in Gutenberg 7.1).

De pop-up is alleen zichtbaar na het updaten naar 5.4. Als je het opnieuw wil activeren, moet je het menu Meer tools & opties openen (de 3 verticale stippen rechtsboven) en op de link Welkomstgids klikken.

Schermvullende weergave standaard ingeschakeld

Vanaf WordPress 5.4 wordt de editor standaard in volledig scherm geopend voor nieuwe installaties en apparaten. Je kan de Schermvullende weergave in-/uitschakelen via het menu Meer tools & opties. Zie de onderstaande afbeelding voor meer informatie.

Deze voorkeur wordt (vooralsnog) lokaal opgeslagen. Dit betekent dat deze opnieuw moet worden ingesteld als je bijvoorbeeld de website in incognito-modus bezoekt. In de toekomst zal je voorkeur worden opgeslagen in de database, waardoor het niet meer uitmaakt hoe je je site bezoekt.

De beslissing om de editor in volledige weergave te tonen kwam niet zonder slag of stoot. De vraag was met name of dit niet verwarrend zou zijn voor beginnende gebruikers. Lees dit bericht als je meer wil weten waarom veel mensen zich zorgen maken over de fullscreen-modus.

Blok-editor-ontwikkelaars kunnen de standaardinstellingen van de fullscreen-modus wijzigen met slechts een paar regels JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );	

if ( isFullscreenMode ) {	
 wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Inline ondersteuning voor tekstkleur in RichText-blokken

Als je doorgaans lange artikelen schrijft, dan kan je de ondersteuning voor inline tekstkleur waarschijnlijk wel waarderen. Vóór deze update moest je hiervoor middels HTML-modus de RichText-blokken hardcoderen om de kleur van afzonderlijke woorden en strings te wijzigen.

Vanaf WordPress 5.4 kunnen we woorden en sub-strings binnen RichText-blokken selecteren en hun kleur wijzigen met behulp van de ingebouwde kleurkiezer.

Extra kleuropties voor bepaalde blokken

WordPress 5.4 levert een lange lijst met andere kleurgerelateerde functies en verbeteringen aan de blok-editor. Zoals je hierboven kan zien, zijn we niet langer beperkt tot effen kleuren. Een aantal blokken bieden nu ook ondersteuning voor verloopachtergronden (gradient) en andere vooraf gedefinieerde gradients.

Hier is een korte lijst met een aantal kleurgerelateerde verbeteringen:

• Ondersteuning voor gradient-achtergronden voor Knoppen-blok (Gutenberg 6.7).
• Ondersteuning voor gradient-achtergronden voor het Cover-blok (Gutenberg 6.8).
• Ondersteuning voor tekstkleur voor de Groep-blokken (Gutenberg 4 en 7.5): gegroepeerde blokken kunnen nu de tekstkleur overnemen van hun bovenliggende Groep-blok.
• Kleurondersteuning voor tekst en achtergronden voor het Kolommen-blok (Gutenberg 4 en 7.5).

Uitgelichte afbeeldingen in het blok Nieuwste berichten

Een andere interessante toevoeging aan de blok-editor is de ondersteuning voor uitgelichte afbeeldingen in het blok Nieuwste berichten (Gutenberg 7.5).

Dit is de meest recente van een aantal verbeteringen die in de laatste jaren aan het blok Nieuwste berichten zijn toegevoegd onder het motto van “meer complexe dynamische of globale blokken”.

In WordPress 5.4 kan je met het blok Nieuwste berichten berichten uit een specifieke categorie opvragen, maar het is helaas nog niet mogelijk om ook geavanceerdere query’s te maken, bijvoorbeeld op basis van categorie/tag/bericht types en/of afzonderlijke berichten opnemen/uitsluiten.

We hopen dat dit in de nabije toekomst wel mogelijk zal zijn.

Een nieuwe breadcrumb-bar voor bloknavigatie

De nieuwe breadcrumb-bar is sinds versie 6.7 beschikbaar voor Gutenberg-gebruikers is nu samengevoegd met de kern. Het doel is om bloknavigatie binnen blokken te vereenvoudigen.

De onderstaande afbeelding toont verschillende geneste blokken en het nieuwe breadcrumb-menu eronder.

Wijzigingen in de blok-editor voor thema- en blokontwikkelaars

Ook ontwikkelaars van thema’s en blokken kunnen een hoop veranderingen verwachten aan de blok-editor in WordPress 5.4. Denk hierbij aan:

• Block Editor Keyboard Shortcuts
• Gradient Theme APIs
• Markup and Style Changes on the Block Editor
• Block Scaffolding
• Block Collections
• Block Variations

Sneltoetsen voor de blok-editor

Ontwikkelaars van blokken en andere gevorderde gebruikers kunnen nu hun eigen custom sneltoetsen toevoegen aan de blok-editor.

Een nieuw pakket genaamd @wordpress/keyboard-shortcuts is namelijk toegevoegd om de registratie, verwijdering en documentatie van editor-sneltoetsen te centraliseren.

Ontwikkelaars kunnen hun eigenlijk custom sneltoetsen toevoegen door op deze manier een call te maken aan de registerShortcut action:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

	// Shortcut identifier
	name: 'plugin/shortcut-test',

	// Shortcut category (possible values global, block, selection)
	category: 'global',

	// Shortcut description
	description: 'My first shortcut',

	// The key combination that triggers the shortcut
	keyCombination: {

		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',
	},

	// An alias for the key combination
	aliases: [
		{
			modifier: 'primary',
			character: 'q',
		},
	],
} );

Hiermee wordt de custom sneltoets automatisch toegevoegd aan de modal met sneltoetsen die je rechtsboven in de editor kan vinden onder Meer tools & opties.

Vervolgens kunnen we een sneltoets-handler koppelen met de functie useShortcut:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
	useShortcut(

		'plugin/shortcut-test',

		useCallback(
			( event ) => {
				// Do something
			},
			[]
		)
	);
}

Je kan meer lezen over sneltoetsen op de blog van Make WordPress Core.

Gradient Theme APIs

WordPress 5.4 introduceert gradient-achtergronden met een aantal vooraf gedefinieerde instellingen voor de blokken Knop en Cover. Dit wordt mogelijk gemaakt door de nieuwe Gradient Theme APIs.

De nieuwe API’s bieden de editor-gradient-presets theme-support optie, waarmee thema-ontwikkelaars de standaard presets kunnen overschrijven en hun eigen kunnen definiëren:

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
		),
	)
);

• name: een voor jou logische label voor de tooltip met informatie over de gradient. Dit is vooral handig voor schermlezers en gebruikers die moeite hebben met het onderscheiden van bepaalde kleuren.
• gradient: de CSS-waarden voor de gradient.
• slug: een identifier om de CSS-classes te genereren die worden gebruikt in de blok-editor.

Je kan custom gradients uitschakelen met de theme-support optie disable-custom-gradients:

add_theme_support( 'disable-custom-gradients' );

De gradient-functionaliteiten kunnen volledig worden verwijderd met behulp van disable-custom-gradients en editor-gradient-presets:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Veranderingen aan markup en style binnen de blok-editor

WordPress 5.4 introduceert een aantal DOM-structuurwijzigingen waarvan ontwikkelaars van thema’s op de hoogte moeten zijn.

• De verouderde class-prefix editor- is nu verwijderd uit de scripts van block-editor. Ontwikkelaars mogen nu alleen het prefix block-editor-
• De class edit-post-layout__content is ook verwijderd uit de DOM van de blok-editor.
• Een aantal div wrappers zijn verwijderd uit blokken en RichText, omdat ze overbodig waren. Deze verandering zorgt voor een aanzienlijke prestatieverbetering en vereenvoudigt de DOM-structuur, iets wat zeker zal worden gewaardeerd door ontwikkelaars van blokken en thema’s.
• Blok paddings en negatieve margins zijn verdwenen. Blokstyles zullen dienovereenkomstig veranderen.

Voor meer gedetailleerde informatie over de DOM- en CSS-wijzigingen kan je het beste even kijken naar Markup- en style-gerelateerde wijzigingen in WordPress 5.4.

Scaffolding van blokken

Met de nieuwe @wordpress/create-block Package for Blok Scaffolding, hebben ontwikkelaars een nieuwe manier om de directory-structuur voor een blok-editor plugin te genereren. Deze structuur bevat normaal gesproken index.php, index.js en style.css.

Blok-ontwikkelaars kunnen nu eenvoudig de volgende opdracht uitvoeren:

$ npm init @wordpress/block block-name

Block Collections

Block Collections bieden een manier om verzamelingen blokken visueel te groepen in de inserter van de blok-editor. Collections verschillen van categorieën en bieden dus een extra manier om blokken te groeperen.

De nieuwe API levert een nieuwe functie:

registerBlockCollection( namespace, { title, icon } );

• namespace: komt overeen met een blok-prefix.
• title: dit is het label dat wordt weergegeven in de blok-inserter.
• icon: dit is het icoon dat wordt getoond met de title in de blok-inserter

De nieuwe API werd geïntroduceerd in Gutenberg 7.3 en is nu samengevoegd met de kern en stelt thema- en blok-ontwikkelaars in staat om hun blokken beter te organiseren, zodat gebruikers gemakkelijker blokken kunnen ontdekken en aan content kunnen toevoegen.

Block Variations

De Block Variations API levert een reeks functies waarmee blokontwikkelaars variaties op blokken kunnen toevoegen/beheren/verwijderen. Gebruikers kunnen hieruit kiezen als ze een blok willen toevoegen aan content. Het registeren van een nieuwe variant is vrij eenvoudig (JS-code):

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter' ] 
} );

• blockName: de naam van het blok (bijv core/heading).
• variation: aeen object dat de variatie voor het bloktype beschrijft.

• name: (string) de unieke identifier van de variatie.
• title: (string) de voor mensen leesbare titel van de variant.
• description: (string) een gedetailleerde beschrijving.
• : (WPIcon) een icoon om te laten zien in de blok-inserter.
• [isDefault]: (boolean) of de huidige variant de standaardvariant is. Staat standaard op false.
• [attributes]: (Object) de waarden die de standaard blok-attributes overschrijven.
• [innerBlocks]: (Array[]) initiële configuratie van het nested blok.
• [example]: (Object) structured data voor de blok-preview. Stel in op undefined om de preview uit te schakelen.
• [scope]: (WPBlockVariationScope[]) De lijst met scopes waar de variatie van toepassing is. Wanneer je niets opgeeft, wordt uitgegaan van alle beschikbare scopes. Beschikbare opties: block, inserter.

Voor meer informatie over de Block Variations API, zie PR #20068.

Overige features voor de blok-editor in WordPress 5.4

Andere noemenswaardige features die je kan vinden in de kern van WordPress 5.4 zijn:

• Een menu om visueel te schakelen tussen bewerkings- en navigatiemodus (7.1)

• Een bijschrift toegevoegd aan Tabel-blok (7.1)

• Drag-and-drop afbeeldingen in het vak met uitgelichte afbeeldingen (7.1)

• Vaste blok-toolbar op mobiel (7.1)

• Een size-selector voor afbeeldingen in het Galerij-blok (7.2)

• Links toegevoegd aan afbeeldingen in het blok Media & Tekst (7.2)

Features en verbeteringen voor WordPress-ontwikkelaars

Ontwikkelaars kunnen ook profiteren van een aantal nieuwe toevoegingen binnen WordPress 5.4.

Onze favorieten veranderingen zijn onder andere:

• Een semantisch correcte kalenderwidget en nieuwe CSS-classes
• Shortcodes in PHP-scripts
• Verbeteringen aan Favicon Handling in WordPress 5.4
• Nieuwe hooks om custom velden toe te voegen aan menu-items
• Overige wijzigingen voor ontwikkelaars

Een semantisch correcte kalenderwidget en nieuwe CSS-classes

De HTML 5.1 spec heeft de manier veranderd waarom tfoot elementen moeten worden gebruikt in tabellen. Voor HTML 5.1 kon het tbody element worden voorafgegaan door tfoot elementen. De nieuwe spec verandert dit: tfoot moet tbody volgen.

De WordPress-kalenderwidget verandert hiermee ook. Vanaf WordPress 5.4, gaan navigatielinks naar een nav element buiten de kalendertabel.

Het was een langverwachte verandering, aangezien nav in elke context het meest geschikte HTML-element is voor navigatielinks. Ook kan het helpen de toegankelijkheid op schermlezers te verbeteren. Volgens de documentatie van Mozilla:

Een document kan meerdere <nav> elementen bevatten, bijvoorbeeld een voor sitenavigatie en een voor navigatie binnen de pagina. aria-labeledby kan in zo’n geval worden gebruikt om de toegankelijkheid te bevorderen…

User-agents, zoals schermlezers die zijn gericht op gebruikers met een handicap, kunnen deze elementen gebruiken om te bepalen of de eerste weergave van de nagivatie-only inhoud moet worden weggelaten.

Daarnaast zijn de volgende CSS-classes geïntroduceerd in get_calendar() voor eenvoudiger targeten:

• wp-calendar-table voor het table element
• wp-calendar-nav voor het nav element
• wp-calendar-nav-prev voor de link naar de vorige maand, ter vervanging van #prev ID
• wp-calendar-nav-next voor de link naar de volgende maand, ter vervanging van #next ID

Het onderstaande fragment laat de nieuwe HTML-structuur van de kalender zien:

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
				<span class="pad"> </span>
				<span class="wp-calendar-nav-next"> </span>
			</nav>
		</div>
	</div>
</div>

Ontwikkelaars van thema’s willen hun stylesheets dienovereenkomstig wijzigen.

Shortcodes in PHP-scripts

WordPress 5.4 introduceert de functie apply_shortcodes() als alias voor do_shortcode(), waarmee we een shortcode binnen een PHP-bestand kunnen gebruiken.

Vanuit semantisch oogpunt kunnen we het resultaat van do_* functies verwachten door simpelweg de functie zelf aan te roepen. Maar dat is niet het geval bij do_shortcode. Om de output van de opgegeven shortcode te printen, moet do_shortcode worden ge-echoëd:

// Displays the result of the shortcode
echo do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 brengt hier verandering door de introductie van apply_shortcodes(), die op dezelfde manier werkt als do_shortcode(), maar ontwikkelaars in staat stelt beter leesbare en semantisch correcte code te bouwen:

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

Het staat vooralsnog (WordPress 5.4 RC 5) niet in de planning om de ondersteuning voor do_shortcode() te beëindigen, omdat deze nog veel wordt gebruikt in externe plugins.

Verbeteringen aan Favicon Handling in WordPress 5.4

Ontwikkelaars van thema’s kunnen in WordPress 5.4 hun favicon requests met veel meer flexibiliteit afhandelen. Dankzij verschillende nieuwe functies kunnen favicons op dezelfde manier worden beheerd als robots.txt-gerelateerde functies. Sergey Biryukov legt uit:

Een verzoek aan favicon.ico moet op dezelfde manier worden behandeld als dat robots.txt do_robots() handlet:

• Als er een fysiek bestand bestaat, doe dan niets en laat de server het verzoek afhandelen.
• Geef in alle andere gevallen een fall-back icoon (zie hieronder).

Dus als er geen fysiek favicon.ico bestand wordt geleverd, is dit hoe WordPress het afhandelt:

• Als er zich in de Customizer een Icon Set bevindt, dan redirect favicon.ico naar dat specifieke icoon.
• Is er geen Icon Set, dan gebruikt het het WordPress-logo als een fall-back optie (wp-admin/images/w-logo-blue.png).

Een aantal nieuwe functies en hooks complementeren de bijbehorende robots.txt-gerelateerde functies/hooks:

• De nieuwe functie is_favicon() complementeert is_robots().
• do_favicon action complementeert do_robots en wordt geactiveerd wanneer de template-loader een faviconverzoek bepaalt.
• do_favicon() functie is gekoppeld aan de do_favicon action en complementeert do_robots().
• do_faviconico action complementeert do_robotstxt en stelt ontwikkelaars in staat om het standaardgedrag te overschrijven.

Lees meer over favicon handling.

Nieuwe hooks om custom velden toe te voegen aan menu-items

Met WordPress 5.4 kunnen ontwikkelaars twee nieuwe action hooks gebruiken om aangepaste velden toe te voegen aan menu-items.

De wp_nav_menu_item_custom_fields wordt geactiveerd net voordat een nav menu-item wordt toegevoegd aan de admin menu-editor. Zie het voorbeeld hieronder:

function kinsta_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );

De nieuwe action hook ondersteunt vijf parameters die je kan gebruiken om het gedrag van het custom veld te finetunen:

• $item_id: ID van het menu-item (integer).
• $item: data-object van het menu-item (object).
• $depth: de diepte van het menu-item (integer).
• $args: een object van de arguments van het menu item(object).
• $id: het Navigation Menu ID (integer).

De wp_nav_menu_item_custom_fields_customize_template werkt op dezelfde manier als wp_nav_menu_item_custom_fields, maar wordt geactiveerd aan het einde van het formfields template voor nav menu-items in de Customizer. De onderstaande afbeelding toont de sectie Menu’s van de Customizer in WordPress 5.4.

Overige wijzigingen voor ontwikkelaars

Overige wijzigingen voor ontwikkelaars en gevorderde gebruikers die je kan verwachten in WordPress 5.4, zijn onder andere:

• Meer informatie over foutmeldingen die login-fouten veroorzaken dankzij een nieuwe $error parameter die wordt ondersteund door de wp_login_failed
• Aanpasbare adminmeldingen in WordPress Multisite afhankelijk side ID.
• De nieuwe post meta waarde _source_url maakt het nu mogelijk om de originele URL voor mediabestanden op te slaan.
• De Admin Bar wordt nu geladen in wp_body_open in plaats van wp_footer.
• Een aantal wijzigingen aan REST API.

Hoe installeer je een ontwikkelingsversie van WordPress

Als je er zeker van wilt zijn dat je thema’s en plugins volledig compatibel zijn met WordPress 5.4 of als je gewoon nieuwsgierig bent naar de nieuwe functies die met de nieuwste WordPress-release komen, kan je de huidige ontwikkelingsversie met een paar klikken installeren.

Er zijn twee manieren om een WordPress Beta/RC-versie te installeren:

• Installeer de plugin WordPress Beta Tester en voer de installatie uit in het dashboard van een bestaande WordPress-omgeving.
• Download en installeer de huidige Beta/RC handmatig. Je kunt de “nightly build” krijgen, die is gemaakt vanuit de Subversion-repository. Als je op zoek bent naar een specifieke WordPress-versie, stable of development, kijk dan eens in het Releases Category Archive.

Als je besluit om de Beta Tester plugin te gebruiken, moet je eerst een reguliere WordPress-installatie instellen, hetzij lokaal of in je staging omgeving.

Zodra je WordPress-site opgezet is, ga je naar Plugins → Nieuwe toevoegen en zoek je naar de plugin WordPress Beta Tester.

De plugin biedt een snelle en gemakkelijke manier om WordPress te bètatesten, waardoor het mogelijk is om de huidige beta- of candidate-release met één klik op de knop te installeren en/of bij te werken.

Het installeren en activeren van de plugin doe je zoals gebruikelijk.

Ga naar Gereedschap → Beta Testing en vink de optie Bleeding edge nightlies aan. Sla de wijzigingen op.

Ga vervolgens naar het Dashboard → Updates en klik op de knop Nu bijwerken.

WordPress zal nu het volgende pakket downloaden en installeren:

https://wordpress.org/nightly-builds/wordpress-latest.zip

Zodra de installatie is voltooid, word je doorgestuurd naar de tijdelijke WordPress About-pagina.

En dat was het! Je bent nu klaar om je eigen tests uit te voeren op de de WordPress Beta en RC versies.

Raadpleeg de officiële documentatie voor meer informatie over WordPress Beta-testen.

Samenvatting

In WordPress 5.4 zijn tien versies van de Gutenberg-plugin samengevoegd met de kern, geen wonder dat deze nieuw versie zich dus richt op de blok-editor. En er zijn nogal wat toevoegingen: twee nieuwe blokken, aangepaste sneltoetsen, verbeterde bruikbaarheid en toegankelijkheid. Ook in de nabije toekomst verwachten we interessante ontwikkelingen.

Maar dat was het nog niet:

• Een Site Health Status-widget is nu toegevoegd aan het dashboard, wat het gebruikers makkelijker maakt om de gezondheidsstatus, beveiliging en prestaties van hun site te zien.
• Beter focusbeheer, makkelijkere toetsenbordnavigatie en een makkelijker te lezen Privacy Policy Guide zorgen voor betere toegankelijkheid op mobiel en desktop.
• Verschillende wijzigingen in de privacytools die UX vereenvoudigen bij het exporteren van persoonlijke gegevens.

Nu is het jouw beurt. Wat is jouw mening over WordPress 5.4? Welke wijzigingen en features kan jij het meest waarderen? Laat het weten in de reacties!