Optimiere Blöcke mit der WordPress Block Bindings API

Die Anzeige von benutzerdefinierten Daten im WordPress-Block-Editor war nicht immer ein einfacher Prozess. Es musste ein eigener Block erstellt werden, um Daten aus benutzerdefinierten Feldern oder anderen Quellen abzurufen.

Das ist eine Menge Arbeit und übersteigt oft die Möglichkeiten mancher Entwickler. In manchen Fällen bedeutet es auch, dass doppelte Funktionen erstellt werden müssen. Nehmen wir zum Beispiel die Anzeige von Daten aus benutzerdefinierten Feldern in einer Textüberschrift. Sollte das nicht möglich sein, ohne einen ganz neuen Block zu erstellen?

Jetzt ist es endlich möglich. Mit der Einführung der Block Bindings API in WordPress 6.5 gibt es eine native Lösung. Sie ermöglicht es dir, eine Datenquelle an eine Auswahl von WordPress-Kernblöcken zu binden, sodass du dynamische WordPress-Websites in kürzerer Zeit erstellen kannst. Außerdem bietet sie eine neue Funktionsebene für Blockthemen.

Dieser Artikel stellt dir die Block Bindings API vor, zeigt dir anhand einer einfachen Demo, wie sie funktioniert, und erkundet, was die Zukunft bringt, wenn sich die API weiterentwickelt.

Warum die Block Bindings API ein bahnbrechendes Tool ist

Benutzerdefinierte Felder gehören schon seit Jahren zum Kern von WordPress. Sie fügen statischen Beiträgen dynamische Daten hinzu und bieten Entwicklern mehr Anpassungsmöglichkeiten. Allerdings ist der Prozess zu ihrer Verwendung umständlich.

Du musst die register_meta() Funktion verwenden oder ein Plugin installieren, um neue Felder zu registrieren und zu konfigurieren. Das ist nur der erste Schritt. Die Anzeige dieser Daten auf deiner Website ist eine weitere Herausforderung.

Alle benutzerdefinierten Felddaten für einen Beitrag werden als Post-Meta gespeichert. Es gab jedoch keine direkte Möglichkeit, die Ergebnisse anzuzeigen. Dazu war ein Plugin erforderlich und/oder das Hinzufügen von Code zu deinem Theme. Das ist nicht nur schwieriger für die Entwickler, sondern auch ein weiteres Stück technischer Risiken, das du verwalten musst.

Die Einführung des Block-Editors und der Block-Themes hat das Problem nicht gelöst. Benutzerdefinierte Felddaten konnten in keinem der in WordPress enthaltenen Kernblöcke angezeigt werden, und die gleichen Einschränkungen galten auch für Block-Themes. Das mag ein wichtiger Grund sein, warum einige Entwickler am klassischen Editor und/oder an klassischen Themes festgehalten haben.

Die Block Bindings API bringt diese Funktionalität in WordPress. Endlich brauchst du keine Plugins mehr, die dir bei der Anzeige von Daten helfen. Sie verknüpft eine Datenquelle mit bestimmten Blöcken wie Buttons, Überschriften, Bildern und Absätzen und eröffnet damit eine neue Welt der Anpassungsmöglichkeiten für Blockthemen und den Blockeditor.

Die Möglichkeiten, die du durch das Schreiben von PHP oder die Verwendung eines Plugins für benutzerdefinierte Felder erhältst, lassen sich damit nicht vollständig duplizieren. Aber es ist ein Schritt in die richtige Richtung. Und in manchen Fällen ist es vielleicht alles, was du brauchst.

Ein einfacher Anwendungsfall für die Block Bindings API

Wie funktioniert die Block Bindings API in der realen Welt? Wir haben ein einfaches Beispiel dafür zusammengestellt, wie sie nützlich sein kann.

Bevor wir loslegen, hier ein Überblick über unser Projekt:

• Installiere die neueste Version von WordPress und verwende das Standard-Theme Twenty Twenty-Four.
• Registriere ein paar benutzerdefinierte Felder:
  • Zitat: Ein berühmtes Zitat, das auf jeder Seite hervorgehoben werden soll, gebunden an einen Absatzblock.
  • Foto: Die URL eines anderen Fotos für jede Seite, das an einen Bildblock gebunden ist.
• Schließlich bearbeitest du die Seitenvorlage des Themes und fügst Blöcke hinzu, die diese benutzerdefinierten Feldwerte abrufen.

Jetzt, da wir unseren Plan haben, können wir die WordPress Block Bindings API in die Tat umsetzen.

Aktiviere benutzerdefinierte Felder im Block-Editor

Da WordPress benutzerdefinierte Felder standardmäßig ausblendet, müssen wir sie zunächst im Block-Editor aktivieren.

Um benutzerdefinierte Felder zu aktivieren, öffne das Menü Optionen (⋮ Symbol) im Block-Editor. Klicke dann auf Einstellungen.

Klicke dann auf den Schalter Benutzerdefinierte Felder, um sie im Editor anzuzeigen. Klicke auf die Schaltfläche Seite anzeigen & neu laden, um deine Änderungen zu speichern.

Registrieren der benutzerdefinierten Felder

Um unsere benutzerdefinierten Felder zu registrieren, öffne die Datei functions.php des Themas. Füge dann den folgenden Code ein:

// Register custom fields for pages in WordPress using register_meta()
function kinsta_register_custom_meta_fields_for_pages() {
     // Register the text field "kinsta_famous_quote" for pages
     register_meta('post', 'kinsta_famous_quote', array(
          'type' => 'string',  // Text field
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'wp_strip_all_tags',  // Sanitize the input
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     )); 

// Register the image field "kinsta_photo" for pages
    register_meta('post', 'kinsta_photo', array(
          'type' => 'string',  // Can store the URL or attachment ID as a string
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'esc_url_raw',  // Sanitize the input as a URL
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     ));
}
add_action('init', 'kinsta_register_custom_meta_fields_for_pages');

Notiere dir den Slug für jedes Feld, da wir ihn im nächsten Schritt brauchen werden:

• kinsta_famous_quote
• kinsta_photo

Du kannst diese Felder weiter anpassen, indem du der WordPress-Dokumentation register_meta() folgst.

Außerdem kannst du diese Felder über ein eigenes Plugin registrieren. Das hat den Vorteil, dass die Felder weiterhin funktionieren – auch wenn du das Theme wechselst.

Benutzerdefinierte Feldwerte zu einer Seite hinzufügen

Als Nächstes fügst du benutzerdefinierte Feldwerte zu einer Seite hinzu, indem du diese Schritte befolgst:

1. Navigiere zu Seiten > Alle Seiten und wähle die Seite deiner Wahl aus.
2. Scrolle zum Ende der Seite und suche das Feld Benutzerdefinierte Felder. Klicke auf die Schaltfläche Neu eingeben, die sich unter dem ersten Feld befindet. Füge kinsta_famous_quote in der linken Spalte hinzu. Füge dann den Inhalt unseres Zitats auf der rechten Seite hinzu: Die Zukunft gehört denjenigen, die an die Schönheit ihrer Träume glauben. – Eleanor Roosevelt
3. Als nächstes klickst du auf die Schaltfläche Benutzerdefiniertes Feld hinzufügen, um das Feld kinsta_photo hinzuzufügen. Füge die URL des Bildes, das wir verwenden wollen, rechts ein.

Jetzt können wir die Seite speichern und diesen Vorgang für die anderen Seiten unserer Website wiederholen.

Binde die Daten der benutzerdefinierten Felder an Blöcke

Da wir unsere Daten auf den Seiten anzeigen wollen, müssen wir die Seitenvorlage unseres Themes im Site Editor bearbeiten. Um dies zu tun:

Navigiere zu Darstellung > Editor und klicke dann auf den Link Vorlagen in der linken Spalte. Suche die Seitenvorlage und klicke darauf, um sie im Editor zu öffnen.

Zuerst müssen wir einen Platz für die Anzeige unserer benutzerdefinierten Felddaten wählen. Fügen wir einen Bereich am unteren Rand jeder Seite hinzu.

Wir fügen einen Gruppenblock und darin einen Spaltenblock ein. Die linke Spalte enthält einen Bildblock (für unser Foto) und die rechte Spalte einen Absatzblock (für unser Zitat).

Für die Zukunft haben wir unseren Gruppenblock in Benutzerdefinierte Felddaten umbenannt. Das macht es einfacher, ihn zu finden, wenn wir ihn später wieder bearbeiten wollen.

Die Block Bindings API verfügt noch nicht über eine visuelle Schnittstelle für die Anzeige von Werten (mehr dazu weiter unten). Deshalb müssen wir den Code unserer Bild- und Absatzblöcke bearbeiten. So können wir benutzerdefinierte Daten an sie binden.

Klicke auf das Menü Optionen (⋮ Symbol) oben rechts im Site Editor. Wähle den Link Code-Editor. Dadurch öffnet sich der Code-Editor.

Suche nach dem Gruppenblock, den wir gerade hinzugefügt haben. Der Code beginnt mit:

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

Wir haben den entsprechenden Code auch in der Abbildung unten hervorgehoben:

Als Nächstes suchst du die Blöcke Bild und Absatz in dieser Gruppe. Ihr Standardcode sieht wie folgt aus:

Bild:

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

Absatz:

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

Wir können diese Blöcke bearbeiten, um sie an unsere benutzerdefinierten Felder zu binden:

Bild:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"kinsta_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->

Beachte, dass der Wert key auf unser benutzerdefiniertes Feld kinsta_photo gesetzt ist.

Absatz:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"kinsta_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

In diesem Fall wird der Wert key auf unser benutzerdefiniertes Feld kinsta_famous_quote gesetzt.

Speichere die Änderungen und verlasse den Code-Editor.

Klicke auf die Blöcke Bild und Absatz. WordPress umrandet jeden Block in lila, um anzuzeigen, dass er an eine Datenquelle gebunden ist. Außerdem wird auf der rechten Seite ein Bereich für Attribute mit weiteren Details angezeigt.

Hinweis: Du wirst diese Blöcke nicht sehen, wenn du Seiten bearbeitest. Sie werden jedoch im Frontend deiner Website angezeigt.

Der letzte Schritt besteht darin, das Frontend der Website zu besuchen. Wir sollten unser Bild und unser Zitat auf allen Seiten sehen, die benutzerdefinierte Feldwerte haben.

Andere Möglichkeiten für verbindliche Blöcke

Wir haben ein grundlegendes Beispiel für die Bindung von Blöcken an eine Datenquelle erstellt. Es gibt jedoch noch einige weitere Möglichkeiten, wie wir unser Projekt erweitern können:

• ALT-Attribute hinzufügen: Wir könnten ein weiteres benutzerdefiniertes Feld registrieren, das ALT-Attribute für unsere Fotos definiert. Das würde die Funktion besser zugänglich machen. Wir könnten zum Beispiel ein neues Feld, kinsta_photo_alt, mit dem Attribut alt verbinden:

  <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"kinsta_photo"}},"alt":{"source":"namespace/slug","args":{"key":"kinsta_photo_alt"}}}}} -->
  <figure class="wp-block-image"><img src="" alt=""/></figure>
  <!-- /wp:image -->

• Verwende eine benutzerdefinierte Datenquelle: Benutzerdefinierte Felder sind für unsere Zwecke genau richtig. Wir hätten jedoch auch Daten aus einer benutzerdefinierten Quelle abrufen können. Zu den Möglichkeiten gehören APIs, benutzerdefinierte Datenbanktabellen, Plugin-/Theme-Optionen, Website-Daten und Taxonomien.

Die Idee ist, dass du dir überlegst, wie du benutzerdefinierte Daten in deine Website integrieren willst. Danach erstellst du einen Plan, wie du sie so implementieren kannst, dass sie leicht zu pflegen sind. Die Block Bindings API bietet dafür viele Möglichkeiten.

Weitergehen mit der Block Bindings API

Die Block Bindings API ist kein fertiges Produkt. Sie wird mit jeder neuen Version von WordPress weiterentwickelt.

So sind zum Beispiel einige Verbesserungen für WordPress 6.7 geplant:

• Eine Standard-UI für die Bindung von Blöcken an verfügbare Datenquellen.
• Post-Meta-Labels zur leichteren Identifizierung.
• Kompatibilität mit benutzerdefinierten Post-Type-Theme-Vorlagen.
• Standardberechtigungen, um festzulegen, wer Blockbindungen bearbeiten darf.
• Mehrere technische Verbesserungen unter der Haube.

Halte Ausschau nach neuen Funktionen, die die Nutzung der API einfacher und leistungsfähiger machen.

Du kannst auch das Gutenberg-Plugin installieren, um einen frühen Zugang zu den Funktionen zu erhalten, bevor sie in den WordPress-Kern integriert werden. Wir empfehlen, es in einer Staging- oder lokalen Umgebung zu verwenden.

Alle Kinsta-Kunden haben Zugang zu einer Staging-Umgebung zum Testen und können auch Premium-Funktionen hinzufügen.

Und jeder kann unser kostenloses lokales WordPress-Entwicklungspaket DevKinsta nutzen. Mit einem einzigen Klick kannst du neue Websites erstellen und von deinem lokalen Rechner aus entwickeln.

Zusammenfassung

Die Block Bindings API stellt einen Wandel in der Art und Weise dar, wie wir mit benutzerdefinierten Daten in WordPress arbeiten. Sie ersetzt in vielen Fällen die Notwendigkeit von Plugins oder benutzerdefinierten Blöcken. Und sie bringt mehr Flexibilität für WordPress-Blöcke und Block-Themes.

Wenn du sie in deinen Workflow aufnimmst, kannst du deine Entwicklungszeit reduzieren. Als native Funktion kann sie auch die Leistung im Vergleich zu Plugins verbessern.

Das sind gute Gründe, sie schon heute zu nutzen. Und die Zukunft sieht noch viel besser aus!

Wir haben erst begonnen, die Möglichkeiten zu erforschen, die in diesem Artikel beschrieben werden. Tauche tiefer in die Blockbindungs-API ein, indem du mehr über das Verbinden von benutzerdefinierten Feldern, die Arbeit mit benutzerdefinierten Bindungsquellen und das Abrufen und Setzen von Blockbindungswerten im Editor erfährst.

Eric Karkovack

Eric Karkovack is a freelance web developer and writer with over 25 years of experience. He loves helping others learn about WordPress, freelancing, and technology.