Verwenden von Post-Meta-Feldern zum Speichern von Attributen im WordPress-Blockeditor (Gutenberg)

Wenn Sie Attribute im WordPress-Blockeditor (Gutenberg) registrieren und speichern, haben Sie die Möglichkeit, sie als Post-Meta anstelle der üblichen Blockattribute zu speichern.

Mit dieser Methode könnten Sie eine Einstellung in Ihrem Block haben, die etwas postweit oder auf der Vorlage steuern kann.

Ein wichtiger Hinweis zum Rendern von Post-Meta-Attributen

Sie können Post-Meta-Attribute nicht mit einer JavaScript-Speichermethode rendern. Das Gutenberg-Team hat eine Entscheidung getroffen, um dies zu verhindern, da Blöcke, die Post-Meta-Felder rendern, leicht beschädigt werden können, weil sich das Post-Meta an anderer Stelle im Post ändert.

In diesem Leitfaden werden wir das erweitern, was wir bereits in unserem WordPress Gutenberg-Plugin-Leitfaden und auch in dem Dynamischen Block-Leitfaden erstellt haben .

Voraussetzungen

• Machen Sie sich mit der Erstellung von Plugins für WordPress Gutenberg vertraut
• Machen Sie sich mit dynamischen Blöcken und serverseitigem Rendering vertraut

Registrierung der Post-Meta in PHP

Bevor wir ein Post-Meta-Feld in JavaScript verwenden können, müssen wir sicherstellen, dass wir es in PHP mit registriert haben register_metaund dass das show_in_restArgument auf wahr gesetzt wurde.

Öffnen Sie im Anschluss an die Dynamic Block-Anleitung die Root-PHP-Datei des Plugins (in diesem Fall wholesome-plugin.php) und fügen Sie nach allen anderen Funktionen den folgenden Code am Ende dieser Datei hinzu:

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_block_text',
        [
            'auth_callback' => '__return_true',
            'default'       => __( 'Wholesome Plugin – hello from the editor!', 'wholesome-plugin' ),
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Dieser Code registriert ein Metafeld, das _wholesomecode_wholesome_plugin_block_textfür den postBeitragstyp aufgerufen wird. Es stellt auch sicher, dass die REST-API auf dieses Metafeld zugreifen kann, wobei der show_in_restWert auf „true“ gesetzt ist.

Wir übergeben die Funktion auch __return_truean das auth_callbackArgument, um sicherzustellen, dass wir die Berechtigungen zum Zugriff auf diesen Parameter haben. Wenn wir eine bessere Sicherheit für diesen Parameter wünschen, würden wir ihn in eine benutzerdefinierte Funktion ändern, die eine bestimmte Benutzerrolle überprüft.

Registrierung der Post-Meta-Attribute in JavaScript

Erneut öffnen /src/index.jsund ersetzen Sie im Anschluss an die vorherige Anleitung das attributesdurch Folgendes:

attributes: {
  blockText: {
    meta: '_wholesomecode_wholesome_plugin_block_text',
    source: 'meta',
  },
},

Anstatt den Attributtyp anzugeben und einen Standardwert zuzuweisen, definieren wir stattdessen den Metaschlüssel, aus dem das Datenattribut stammt, und geben an, dass der sourcedes Attributs meta.

Wie in der Warnung oben in diesem Handbuch angegeben, können Sie nicht über die JavaScript-Methode auf Post-Meta-Feldattribute zugreifen save, also kompilieren Sie das Plugin mit npm startund sehen Sie, wie wir das Meta ausgeben können.

Rendern der Post-Meta

Da wir unser Attribut als Post-Meta gespeichert haben, können wir dies überall in WordPress ausgeben, indem wir verwenden get_post_meta(vorausgesetzt, wir haben das $post_id):

get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );

Lassen Sie uns in Fortsetzung des Leitfadens zu dynamischen Blöcken sehen, wie wir auf dieses Attribut auf der Serverseite in PHP zugreifen können.

Das Meta ist nicht über den $attributesParameter von verfügbar render_callback, da Post-Meta-Attribute ihren Wert nicht an diesen Parameter weitergeben, aber wir können auf das globale $postObjekt zugreifen, um die Post-ID zu erhalten.

In diesem Sinne aktualisieren wir unsere register_block_type, um das Post-Meta auszugeben:

register_block_type(
  'wholesomecode/wholesome-plugin',
  array(
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      global $post;
      $block_text = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_block_text', true );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',) );

Beachten Sie, dass wir das hier nicht mehr registrieren müssen attributes, da wir über die get_post_metaFunktion nur auf das Post-Meta-Feld zugreifen.

Verwendung des Blocks

Dies ist nicht der beste Anwendungsfall für diese Art von Meta, aber wenn wir den Block verwenden, können wir sehen, dass, weil wir die Attribute als Post-Meta speichern, alle Blöcke aktualisiert werden, wenn wir das Attribut in einem Block aktualisieren Das Post-Meta wird für den Post gespeichert, nicht für den einzelnen Block:

Post-Meta-Attribute in Aktion

• Schauen Sie sich an, wie Sie mit der Komponente verschachtelte untergeordnete Blöcke erstellenInnerBlocks
• Nutzen Sie Post-Meta in Gutenberg weiter, indem Sie benutzerdefinierte Meta-Boxen in Gutenberg erstellen
• Sehen Sie sich die Verwendung von Einstellungen zum Speichern von Daten in der Optionstabelle in Gutenberg an