Notices in Gutenberg erstellen

Der Gutenberg Editor bringt mit den Notices einem Benachrichtigungssystem mit sich, mit dem Erfolgs-, Fehler-, oder sonstige Meldungen ausgegeben werden können.

Eine solche Notice sieht zum Beispiel so aus:

In der nächsten WordPress Version kommen die sogenannten „Snackbar“-Notices dazu, die so aussehen:

Wer diese testen möchte, kann sich das aktuelle Gutenberg Plugin installieren. Mehr Infos zu den „Snackbar“ Notices findet Ihr im Artikel von WP Tavern

Das Benachrichtigungssystem von Gutenberg können wir auch für unsere Blöcke und Gutenberg Erweiterungen nutzen können.

Eigene Notice erstellen

Notices werden über den core/notices Data Store verwaltet.

Die Basis zum Erstellen von Notices ist diese Funktion:

wp.data.dispatch('core/notices').createNotice( status, content, options)Code-Sprache: JavaScript (javascript)

Notice status

Der erste Parameter gibt die Art der Benachrichtigung an. Der Standardwert ist info

Weitere möglich Werte sind:

success
error
warning

Je nach Status, werden die Benachrichtigungen grün (success), rot (error), orange (warning) oder blau (info) dargestellt.

Notice content

Beim zweiten Parameter handelt es sich um die eigentliche Nachricht.

Der content Parameter nimmt ein string entgegen.

Notice options

Der options parameter ist optional und nimmt ein Objekt entgegen.

Folgende Optionen gibt es:

id

Die ID wird verwendet um die Notice später identifizieren zu können, um sie beispielsweise zu löschen oder zu überschreiben.

Wenn die ID nicht manuell festgelegt wird, wird sie automatisch generiert.

Wird eine ID festgelegt, die bereits in Verwendung ist, wird die bestehende Notice überschrieben.

isDismissible

Gibt an ob der Nutzer die Benachrichtigung ausblenden kann. Kann true oder false sein.

speak

Gibt an ob die Nachricht auch an Screenreader gesendet werden soll. Ist im Standard true.

Der Wert kann true oder false sein.

actions

Hierüber können Aktionen definiert werden, über die der Nutzer mit der Benachrichtigung interagieren kann.

Muss ein Array aus Objekten enthalten sein. Jedes Objekt stellt eine Aktion dar und muss wiefolgt aufgebaut sein:

{
    url: '#',
    label: 'View post'
}Code-Sprache: JavaScript (javascript)

type

Hierüber wird geregelt ob die Benachrichtigung als „Standard Benachrichtigung“ (siehe Screenshot) oder als Snackbar Notice ausgegeben werden soll.

Kann entweder den Wert 'default' oder 'snackbar' haben.

Beispielcode für eine Snackbar Notice

const { dispatch} = wp.data;

dispatch( 'core/notices' ).createNotice(
    'info',
    __('Template selected', 'block-layouts'),
    {
        isDismissible: true,
        type: 'snackbar'
    }
)Code-Sprache: JavaScript (javascript)

Weitere Funktionen zum Erstellen von Notices

Zusätzlich zur createNotice() gibt es weitere Funktionen, mit denen Notices erstellt werden können.

Diese unterscheiden sich zur createNotice() Funktion darin, dass der erste Parameter entfällt. Mit der Auswahl der Funktion wird gleichzeitig der Status der Notice definiert.

Folgende weitere Funktionen gibt es:

createErrorNotice() zum Erstellen von Error Notices
createInfoNotice() zum Erstellen von Info Notices
createSuccessNotice() zum Erstellen von Success Notices
createWarningNotice() zum Erstellen von Warning Notices

Notice Löschen

Um eine Notice zu löschen verwenden wir die Funktion

wp.data.dispatch('core/notices').removeNotice(id);Code-Sprache: JavaScript (javascript)

Dieser Funktion übergeben wir die ID der zuvor erstellten Notice. Diese ID kann beim Erstellen über das options Objekt definiert werden.

Wenn wir keine ID festgelegt haben, wurde der Notice automatisch eine ID zugewiesen. In diesem Fall müssen wir erst die IDs der Notices auslesen.

Aktive Notices ausgeben

Um alle aktuell vorhandenen Notices auszulesen verwenden wir den einzigen Selektor, den uns der core/notices Data Store bereitstellt:

wp.data.select('core/notices').getNotices();Code-Sprache: JavaScript (javascript)

Als Rückgabewert erhalten wir ein Array mit WPNotice Objekten.