Verwenden von PHP zum Rendern eines Blocks im WordPress-Editor (Gutenberg)

Beim Erstellen eines Blocks im WordPress-Blockeditor (Gutenberg) haben Sie wahrscheinlich JavaScript verwendet, um den Block in den Inhalt Ihres Beitrags zu rendern. In diesem Leitfaden werden wir uns mit der Verwendung von PHP zum Rendern des Blocks befassen und einen sogenannten „dynamischen Block“ erstellen.

Wir werden es in diesem Leitfaden einfach halten und das erweitern, was wir bereits in unserem WordPress Gutenberg-Plugin-Leitfaden erstellt haben. Dynamische Blöcke sind jedoch sehr nützlich, um komplexere Informationen in einem Block darzustellen, z. B. eine Post-Loop.

Voraussetzungen

• Machen Sie sich mit der Erstellung von Plugins für WordPress Gutenberg vertraut

Erstellen Sie PHP für den dynamischen Block

Wenn Sie dies noch nicht getan haben, führen Sie die Schritte im WordPress Gutenberg-Plugin-Leitfaden aus, damit Sie einen bearbeitbaren RichText-Bereich haben.

Fügen Sie das folgende PHP in Ihr Plugin ein (in diesem Beispiel wholesome-plugin.php) und ersetzen Sie den Codeblock, der mit beginnt register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Attribute

Das erste, was Sie bemerken werden, ist, dass wir die Attribute in dieser Datei neu definiert haben, und sie sind die gleichen wie die, die wir in der /src/index.jsDatei in unserem vorherigen Handbuch definiert haben.

Der Grund dafür ist, dass unsere Ausgabe auf die Attributtypen und ihren Standardinhalt zugreifen kann.

Rückruf rendern

Im obigen Code haben wir auch das Argument render_callbackzur register_block_typeFunktion hinzugefügt. Dies verarbeitet die Ausgabe des Blocks und ersetzt die saveFunktion in der /src/index.jsDatei.

Die render_callbackFunktion benötigt zwei Parameter. Diese sind:

• $attributes— Dies erhält die Attribute, die wir sowohl im attributesArgument dieser Funktion als auch in der /src/index.jsDatei definiert haben
• $content— erhält, was über die saveMethode in der /src/save.jsDatei gespeichert wurde. Dies ist praktisch, wenn wir rendern InnerBlocks, die sonst nicht an die Render-Methode von PHP übergeben würden.

In diesem Beispiel haben wir eine anonyme Funktion für die verwendet render_callback, aber wir hätten ganz einfach stattdessen hier eine Referenz auf eine Funktion übergeben und diese an anderer Stelle definieren können.

Beachten Sie, dass wir nicht auf die Requisiten im PHP-render_callback zugreifen können, daher mussten wir die HTML-Klasse manuell zum <p>Tag hinzufügen, damit unsere Stile weiterhin funktionieren (theoretisch könnten wir den $contentParameter nutzen und ein wenig tun von Suchen- und Ersetzen-Tricks, wenn wir sie wollten, aber das ist etwas für einen anderen Leitfaden).

Entfernen Sie die JavaScript-Save-Methode

Wie bereits erwähnt, speichert der $contentParameter der render_callbackFunktion die Ausgabe der JavaScript save-Methode, aber beachten Sie, dass wir dies nicht in unserem Code verwenden.

/src/index.jsErsetzen Sie in der Datei die saveMethode durch Folgendes:

Dies weist die save-Methode an, nichts zurückzugeben.

Entfernen Sie den saveImport

Wenn wir schon dabei sind, entfernen Sie auch die folgende Zeile aus /src/index.js:

import save from './save';

/src/save.jsSie können die Datei jetzt auch löschen .

Kompilieren des Plugins

Öffnen Sie das Terminal, vergewissern Sie sich, dass Sie sich im Stammverzeichnis Ihres Plugins befinden, und führen Sie den folgenden Befehl aus:

Das Skript wird kompiliert. Wenn Sie irgendwelche Fehler haben, sollte das Terminal Sie darüber informieren.

Verwenden Sie den dynamischen Block

Sie sollten nun in der Lage sein, den Block in eine Seite einzufügen, seinen Inhalt zu bearbeiten und ihn auf dem Frontend anzuzeigen.

Der dynamische Block in Aktion

In diesem einfachen Beispiel sieht der Block genauso aus und verhält sich genauso, als ob Sie eine JavaScript-Rendermethode verwendet hätten.

• Schauen Sie sich an, wie Sie mit der Komponente verschachtelte untergeordnete Blöcke erstellenInnerBlocks
• Erkunden Sie das Speichern von Gutenberg-Attributen als Post-Meta-Felder