Block-Editor: Hinweis-Aktion in neuem Tab öffnen

In von Hinweisen innerhalb des Block-Editors kannst du Aktionen definieren, die dann unter dem Hinweis angezeigt werden. Standardmäßig können diese nicht in einem neuen Tab geöffnet werden. Aber was, wenn das gewünscht ist?

Das integrierte Hinweissystem (Notices) im Block-Editor erlaubt dir, Informations-, Fehler-, Erfolgs- und Warnhinweise anzuzeigen, ohne ein ganzes System dafür selbst zu erstellen. Zusätzlich kannst du eine Liste an Aktionen an sie anhängen. Sie werden dann unter dem eigentlichen Hinweis als Buttons angezeigt. Und sie funktionieren auch generell ähnlich wie die Button-Komponente. Allerdings gibt es hier keine Unterstützung für das target-Attribut.

Ein weiteres Problem kann das Styling werden, wenn du den Button als normalen Link anzeigen möchtest, denn das einfache Hinzufügen von variant: 'link' an die Aktion erstellt standardmäßig keinen Link-Button, wenn kein url-Parameter verwendet wird (was hier nicht verwendet werden kann, da sonst der Link nie in einem neuen Tab öffnet). Stattdessen ändert es fix die Button-Variante auf secondary und rendert somit einen als solchen erkennbaren Button.

Das target-Problem beheben

Um das Problem mit dem fehlenden target-Attribut zu umgehen, können wir den onClick-Parameter zusammen mit einem window.open() verwenden. Letzteres erlaubt über seinen zweiten Parameter die Angabe eines Ziels, in diesem Fall demnach _blank, damit sich der angegebene Link in einem neuen Tab öffnet.

Richtiges Styling für normale Links

Da der Standard in diesem Fall einen Button in Variante secondary rendert, müssen wir diese Klassen entfernen. Das kann dadurch erreicht werden, indem der Parameter noDefaultClasses auf true gesetzt wird, zusammen mit dem Parameter variant auf link. Dadurch wird der Button dann als normaler Link gerendert.

Beispiel

Ein Erfolgshinweis mit einer Aktion als normaler Link, der in einem neuen Tab öffnet, sieht als Beispiel dann so aus:

createSuccessNotice( __( 'Success notice.', 'my-plugin' ), {
	actions: [
		{
			label: __( 'Go to page (opens in a new tab) ↗', 'my-plugin' ),
			noDefaultClasses: true, // make sure link variant is used even without URL
			onClick: () => window.open( '#', '_blank' ),
			variant: 'link',
		},
	],
} );
Code-Sprache: JavaScript (javascript)

Bitte stelle immer sicher, die Benutzer darauf hinzuweisen, wenn sich Links in einem neuen Tab öffnen, wie im Beispiel oben als Linktext, um die Barrierefreiheit zu verbessern, wenn dieses Verhalten erzwungen wird.