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.<\/p>\n
Warum die Block Bindings API ein bahnbrechendes Tool ist<\/h2>\n
Benutzerdefinierte Felder<\/a> geh\u00f6ren schon seit Jahren zum Kern von WordPress. Sie f\u00fcgen statischen Beitr\u00e4gen dynamische Daten hinzu und bieten Entwicklern mehr Anpassungsm\u00f6glichkeiten. Allerdings ist der Prozess zu ihrer Verwendung umst\u00e4ndlich.<\/p>\n Du musst die Alle benutzerdefinierten Felddaten f\u00fcr einen Beitrag werden als Post-Meta<\/a> gespeichert. Es gab jedoch keine direkte M\u00f6glichkeit, die Ergebnisse anzuzeigen. Dazu war ein Plugin erforderlich und\/oder das Hinzuf\u00fcgen von Code<\/a> zu deinem Theme. Das ist nicht nur schwieriger f\u00fcr die Entwickler, sondern auch ein weiteres St\u00fcck technischer Risiken, das du verwalten musst.<\/p>\n Die Einf\u00fchrung des Block-Editors und der Block-Themes<\/a> hat das Problem nicht gel\u00f6st. Benutzerdefinierte Felddaten konnten in keinem der in WordPress enthaltenen Kernbl\u00f6cke angezeigt werden, und die gleichen Einschr\u00e4nkungen galten auch f\u00fcr Block-Themes. Das mag ein wichtiger Grund sein, warum einige Entwickler am klassischen Editor und\/oder an klassischen Themes<\/a> festgehalten haben.<\/p>\n Die Block Bindings API bringt diese Funktionalit\u00e4t in WordPress. Endlich brauchst du keine Plugins mehr, die dir bei der Anzeige von Daten helfen. Sie verkn\u00fcpft eine Datenquelle mit bestimmten Bl\u00f6cken wie Buttons<\/a>, \u00dcberschriften<\/a>, Bildern<\/a> und Abs\u00e4tzen<\/a> und er\u00f6ffnet damit eine neue Welt der Anpassungsm\u00f6glichkeiten f\u00fcr Blockthemen und den Blockeditor.<\/p>\n Die M\u00f6glichkeiten, die du durch das Schreiben von PHP oder die Verwendung eines Plugins f\u00fcr benutzerdefinierte Felder erh\u00e4ltst, lassen sich damit nicht vollst\u00e4ndig duplizieren. Aber es ist ein Schritt in die richtige Richtung. Und in manchen F\u00e4llen ist es vielleicht alles, was du brauchst.<\/p>\n Wie funktioniert die Block Bindings API in der realen Welt? Wir haben ein einfaches Beispiel daf\u00fcr zusammengestellt, wie sie n\u00fctzlich sein kann.<\/p>\n Bevor wir loslegen, hier ein \u00dcberblick \u00fcber unser Projekt:<\/p>\n Jetzt, da wir unseren Plan haben, k\u00f6nnen wir die WordPress Block Bindings API in die Tat umsetzen.<\/p>\n Da WordPress benutzerdefinierte Felder standardm\u00e4\u00dfig ausblendet, m\u00fcssen wir sie zun\u00e4chst im Block-Editor aktivieren.<\/p>\n Um benutzerdefinierte Felder zu aktivieren, \u00f6ffne das Men\u00fc Optionen<\/strong> (\u22ee Symbol) im Block-Editor. Klicke dann auf Einstellungen<\/strong>.<\/p>\n Klicke dann auf den Schalter Benutzerdefinierte Felder<\/strong>, um sie im Editor anzuzeigen. Klicke auf die Schaltfl\u00e4che Seite anzeigen & neu laden<\/strong>, um deine \u00c4nderungen zu speichern.<\/p>\n Um unsere benutzerdefinierten Felder zu registrieren, \u00f6ffne die Datei Notiere dir den Slug f\u00fcr jedes Feld, da wir ihn im n\u00e4chsten Schritt brauchen werden:<\/p>\n Du kannst diese Felder weiter anpassen, indem du der WordPress-Dokumentation<\/a> Au\u00dferdem kannst du diese Felder \u00fcber ein eigenes Plugin<\/a> registrieren. Das hat den Vorteil, dass die Felder weiterhin funktionieren – auch wenn du das Theme wechselst.<\/p>\n Als N\u00e4chstes f\u00fcgst du benutzerdefinierte Feldwerte zu einer Seite hinzu, indem du diese Schritte befolgst:<\/p>\n Jetzt k\u00f6nnen wir die Seite speichern und diesen Vorgang f\u00fcr die anderen Seiten unserer Website wiederholen.<\/p>\n Da wir unsere Daten auf den Seiten anzeigen wollen, m\u00fcssen wir die Seitenvorlage unseres Themes im Site Editor<\/a> bearbeiten. Um dies zu tun:<\/p>\n Navigiere zu Darstellung > Editor<\/strong> und klicke dann auf den Link Vorlagen<\/strong> in der linken Spalte. Suche die Seitenvorlage<\/strong> und klicke darauf, um sie im Editor zu \u00f6ffnen.<\/p>\n Zuerst m\u00fcssen wir einen Platz f\u00fcr die Anzeige unserer benutzerdefinierten Felddaten w\u00e4hlen. F\u00fcgen wir einen Bereich am unteren Rand jeder Seite hinzu.<\/p>\n Wir f\u00fcgen einen Gruppenblock<\/strong> und darin einen Spaltenblock<\/strong> ein. Die linke Spalte enth\u00e4lt einen Bildblock<\/strong> (f\u00fcr unser Foto) und die rechte Spalte einen Absatzblock<\/strong> (f\u00fcr unser Zitat).<\/p>\n F\u00fcr die Zukunft haben wir unseren Gruppenblock in Benutzerdefinierte Felddaten<\/strong> umbenannt<\/a>. Das macht es einfacher, ihn zu finden, wenn wir ihn sp\u00e4ter wieder bearbeiten wollen.<\/p>\n Die Block Bindings API verf\u00fcgt noch nicht \u00fcber eine visuelle Schnittstelle f\u00fcr die Anzeige von Werten (mehr dazu weiter unten). Deshalb m\u00fcssen wir den Code unserer Bild- und Absatzbl\u00f6cke bearbeiten. So k\u00f6nnen wir benutzerdefinierte Daten an sie binden.<\/p>\n Klicke auf das Men\u00fc Optionen<\/strong> (\u22ee Symbol) oben rechts im Site Editor. W\u00e4hle den Link Code-Editor<\/strong>. Dadurch \u00f6ffnet sich der Code-Editor.<\/p>\n Suche nach dem Gruppenblock<\/strong>, den wir gerade hinzugef\u00fcgt haben. Der Code beginnt mit:<\/p>\n Wir haben den entsprechenden Code auch in der Abbildung unten hervorgehoben:<\/p>\n Als N\u00e4chstes suchst du die Bl\u00f6cke Bild und Absatz in dieser Gruppe. Ihr Standardcode sieht wie folgt aus:<\/p>\n Bild:<\/strong><\/p>\n Absatz:<\/strong><\/p>\n Wir k\u00f6nnen diese Bl\u00f6cke bearbeiten, um sie an unsere benutzerdefinierten Felder zu binden:<\/p>\n Bild:<\/strong><\/p>\n Beachte, dass der Wert Absatz:<\/strong><\/p>\n In diesem Fall wird der Wert Speichere die \u00c4nderungen und verlasse den Code-Editor.<\/strong><\/p>\n Klicke auf die Bl\u00f6cke Bild und Absatz. WordPress umrandet jeden Block in lila, um anzuzeigen, dass er an eine Datenquelle gebunden ist. Au\u00dferdem wird auf der rechten Seite ein Bereich f\u00fcr Attribute mit weiteren Details angezeigt.<\/p>\n Hinweis:<\/strong> Du wirst diese Bl\u00f6cke nicht sehen, wenn du Seiten bearbeitest. Sie werden jedoch im Frontend deiner Website angezeigt.<\/p>\n 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.<\/p>\n Wir haben ein grundlegendes Beispiel f\u00fcr die Bindung von Bl\u00f6cken an eine Datenquelle erstellt. Es gibt jedoch noch einige weitere M\u00f6glichkeiten, wie wir unser Projekt erweitern k\u00f6nnen:<\/p>\n Die Idee ist, dass du dir \u00fcberlegst, 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\u00fcr viele M\u00f6glichkeiten.<\/p>\n Die Block Bindings API ist kein fertiges Produkt. Sie wird mit jeder neuen Version von WordPress weiterentwickelt.<\/p>\n So sind zum Beispiel einige Verbesserungen<\/a> f\u00fcr WordPress 6.7 geplant:<\/p>\n Halte Ausschau nach neuen Funktionen, die die Nutzung der API einfacher und leistungsf\u00e4higer machen.<\/p>\n Du kannst auch das Gutenberg-Plugin<\/a> installieren, um einen fr\u00fchen 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.<\/p>\n Alle Kinsta-Kunden haben Zugang zu einer Staging-Umgebung<\/a> zum Testen und k\u00f6nnen auch Premium-Funktionen<\/a> hinzuf\u00fcgen.<\/p>\n Und jeder kann unser kostenloses lokales WordPress-Entwicklungspaket DevKinsta<\/a> nutzen. Mit einem einzigen Klick kannst du neue Websites erstellen und von deinem lokalen Rechner aus entwickeln.<\/p>\n 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\u00e4llen die Notwendigkeit von Plugins oder benutzerdefinierten Bl\u00f6cken. Und sie bringt mehr Flexibilit\u00e4t f\u00fcr WordPress-Bl\u00f6cke und Block-Themes.<\/p>\n 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.<\/p>\n Das sind gute Gr\u00fcnde, sie schon heute zu nutzen. Und die Zukunft sieht noch viel besser aus!<\/p>\n Wir haben erst begonnen, die M\u00f6glichkeiten zu erforschen, die in diesem Artikel beschrieben werden. Tauche tiefer in die Blockbindungs-API ein, indem du mehr \u00fcber das Verbinden von benutzerdefinierten Feldern<\/a>, die Arbeit mit benutzerdefinierten Bindungsquellen<\/a> und das Abrufen und Setzen von Blockbindungswerten im Editor<\/a> erf\u00e4hrst.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 …<\/p>\n","protected":false},"author":51,"featured_media":72217,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999],"class_list":["post-72216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung"],"yoast_head":"\nregister_meta()<\/a><\/code> 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.<\/p>\nEin einfacher Anwendungsfall f\u00fcr die Block Bindings API<\/h2>\n
\n
\n
Aktiviere benutzerdefinierte Felder im Block-Editor<\/h3>\n
![\"Aktivieren](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-preferences.png\" "\\"The")
Registrieren der benutzerdefinierten Felder<\/h3>\n
functions.php<\/code> des Themas. F\u00fcge dann den folgenden Code ein:<\/p>\n\/\/ Register custom fields for pages in WordPress using register_meta()\nfunction kinsta_register_custom_meta_fields_for_pages() {\n \/\/ Register the text field \"kinsta_famous_quote\" for pages\n register_meta('post', 'kinsta_famous_quote', array(\n 'type' => 'string', \/\/ Text field\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'wp_strip_all_tags', \/\/ Sanitize the input\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n )); \n\n\/\/ Register the image field \"kinsta_photo\" for pages\n register_meta('post', 'kinsta_photo', array(\n 'type' => 'string', \/\/ Can store the URL or attachment ID as a string\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'esc_url_raw', \/\/ Sanitize the input as a URL\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n ));\n}\nadd_action('init', 'kinsta_register_custom_meta_fields_for_pages');<\/code><\/pre>\n\n
kinsta_famous_quote<\/code><\/li>\nkinsta_photo<\/code><\/li>\n<\/ul>\nregister_meta()<\/code> folgst.<\/p>\nBenutzerdefinierte Feldwerte zu einer Seite hinzuf\u00fcgen<\/h3>\n
\n
kinsta_famous_quote<\/code> in der linken Spalte hinzu. F\u00fcge dann den Inhalt unseres Zitats auf der rechten Seite hinzu: Die Zukunft geh\u00f6rt denjenigen, die an die Sch\u00f6nheit ihrer Tr\u00e4ume glauben. – Eleanor Roosevelt<\/li>\nkinsta_photo<\/code> hinzuzuf\u00fcgen. F\u00fcge die URL des Bildes, das wir verwenden wollen, rechts ein.<\/li>\n<\/ol>\n![\"Benutzerdefinierte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-custom-field-config.png\" "\\"WordPress")
Binde die Daten der benutzerdefinierten Felder an Bl\u00f6cke<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-templates.png\" "\\"The")
![\"Bearbeiten](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-page-template.png\" "\\"The")
<!-- wp:group {\"metadata\":{\"name\":\"Custom Field Data\"},\"layout\":{\"type\":\"constrained\"}} --><\/code><\/pre>\n![\"Anzeige](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-block-code.png\" "\\"WordPress")
<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_photo\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\nkey<\/code> auf unser benutzerdefiniertes Feld kinsta_photo<\/code> gesetzt ist.<\/p>\n<!-- wp:paragraph {\"metadata\":{\"bindings\":{\"content\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_famous_quote\"}}}}} -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\nkey<\/code> auf unser benutzerdefiniertes Feld kinsta_famous_quote<\/code> gesetzt.<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-image-block-bound.png\" "\\"Image")
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-paragraph-block-bound.png\" "\\"Paragraph")
![\"Benutzerdefinierte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-result.jpg\" "\\"WordPress")
Andere M\u00f6glichkeiten f\u00fcr verbindliche Bl\u00f6cke<\/h3>\n
\n
kinsta_photo_alt<\/code>, mit dem Attribut alt<\/code> verbinden:\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo\"}},\"alt\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo_alt\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<\/li>\nWeitergehen mit der Block Bindings API<\/h2>\n
\n
Zusammenfassung<\/h2>\n