WordPress Gutenberg PluginDocumentSettingPanel funktioniert nicht mit Steuerelementen?

Question 1

Ich möchte dem Gutenberg-Dokumentenfeld ein benutzerdefiniertes Metafeld hinzufügen und verwenden dieses Dokument. Für das benutzerdefinierte Metafeld, das ich verwendet habe dieses Tutorial. Das Problem, das ich habe, tritt auf, wenn ich versuche, sie zusammenzusetzen.

Hier mein bisheriger Code:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
const { PanelBody, PanelRow, TextControl } = wp.components

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        <TextControl 
          value={wp.data.select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']}
          label={ "Text Meta" }
          onChange={(value) => wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: value}})}
        />
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Bearbeiten: Dank Ivan habe ich dieses Nebenproblem gelöst 🙂

Meine Sidebar sieht auf den ersten Blick gut aus:

Aber wenn ich versuche, den Eingabewert zu ändern, wird er nicht aktualisiert (aber der Speicher in wp.data ist). Ich kann es auch nicht löschen. Es bleibt auf seinem Anfangswert. Wenn ich den Teil entferne, wo ich den Anfangswert setze, funktioniert es so, wie es sein sollte, aber da ich den Anfangswert brauche, ist das keine Option für mich;)

Hier ein Beispielprotokoll aus der Konsole, wenn ich am Ende der Eingabe ein “x” hinzufüge (wie oben erwähnt, ändert sich der Text in der Eingabe selbst nicht)

Weiß jemand, wie man das Eingabefeld richtig zum Laufen bringt?

Question 2

Stellen Sie zunächst sicher, dass Sie dies haben https://wordpress.org/plugins/gutenberg/ Plugin installiert, da PluginDocumentSettingPanel noch nicht vollständig im Core WP implementiert ist. Es sollte für die Version 5.3 laut sein diese Tweets.

Zweitens benötigen Sie die Intervallfunktion für die wp.plugins nicht. Der Grund, warum es zunächst undefiniert ist, ist, dass WordPress nicht weiß, dass Sie die wp-plugins zuerst laden müssen. Von dem WordPress-Dokumentation

Wenn Sie die PlainText-Komponente aus dem Editor-Modul verwenden möchten, würden Sie zuerst wp-editor als Abhängigkeit angeben, wenn Sie Ihr Skript in die Warteschlange stellen

Gleiches gilt für alle anderen Module (Leseskripte, wie ‘wp-plugins’). Sie müssen das Skript ‚wp-plugins‘ als Abhängigkeit hinzufügen, wenn Sie Ihr js-Plugin-Skript registrieren:

<?php

/*
Plugin Name: Sidebar plugin
*/

function sidebar_plugin_register() {
    wp_register_script(
        'plugin-sidebar-js',
        plugins_url( 'plugin-sidebar.js', __FILE__ ),
        array( 'wp-plugins', 'wp-edit-post', 'wp-element' ) // <== the dependencies array is important!
    );
}
add_action( 'init', 'sidebar_plugin_register' );

function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );

Das obige PHP stammt aus der offizielle WP-Dokumentation.

Ich würde auch empfehlen, dies gründlich zu lesen tolle Anleitung von CSS-Tricks. Es geht ausführlich auf die Einrichtung einer ESNext-Umgebung nur mit der @wordpress/scripts Paket. Es geht auf die Abhängigkeiten ein, fügt Metafelder hinzu und vieles mehr 🙂 Ich hoffe, das hilft!

————— Die erste Antwort endet hier —————

Bearbeiten: Nachdem ich den Code des Autors getestet hatte, fand ich ein paar Probleme heraus. Zunächst fehlte ein schließendes Tag für das TextControl. Zweitens habe ich Komponenten höherer Ordnung aus dem wp-data-Paket hinzugefügt, die ich dann verwendet habe, um das TextControl zu “verbessern”, sodass es Daten nicht direkt manipuliert oder liest, sondern diese Logik in sich abstrahiert Komponenten höherer Ordnung. Der Code sieht so aus:

const { __ } = wp.i18n;
const { registerPlugin } = wp.plugins;
const { PluginDocumentSettingPanel } = wp.editPost;
const { TextControl } = wp.components;
const { withSelect, withDispatch, dispatch, select } = wp.data;
// All the necessary code is pulled from the wp global variable,
// so you don't have to install anything
// import { withSelect, withDispatch, dispatch, select } from "@wordpress/data";
// !!! You should install all the packages locally,
// so your editor could access the files so you could
// look up the functions and classes directly. 
// It will not add to the final bundle if you
// run it through wp-scripts. If not, you can
// still use the wp global variable, like you have done so far.



let TextController = props => (
    <TextControl
        value={props.text_metafield}
        label={__("Text Meta", "textdomain")}
        onChange={(value) => props.onMetaFieldChange(value)}
    />
);

TextController = withSelect(
    (select) => {
        return {
            text_metafield: select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
        }
    }
)(TextController);

TextController = withDispatch(
    (dispatch) => {
        return {
            onMetaFieldChange: (value) => {
                dispatch('core/editor').editPost({ meta: { _myprefix_text_metafield: value } })
            }
        }
    }
)(TextController);

const PluginDocumentSettingPanelDemo = () => {
    // Check if a value has been set
    // This is for editing a post, because you don't want to override it everytime
    if (!select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']) {
        // Set initial value
        dispatch('core/editor').editPost({ meta: { _myprefix_text_metafield: 'Your custom value' } });
    }
    return (
        <PluginDocumentSettingPanel
            name="custom-panel"
            title="Custom Panel"
            className="custom-panel"
        >
            <TextController />
        </PluginDocumentSettingPanel>
    )
};
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Da das Meta-Feld mit einem Unterstrich als erstes Symbol im Namen registriert ist, erlaubt WordPress Ihnen nicht, es zu speichern, da es als privater Wert behandelt wird, sodass Sie beim Registrieren des Felds zusätzlichen Code hinzufügen müssen:

function myprefix_register_meta()
{
    register_post_meta('post', '_myprefix_text_metafield', array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'sanitize_text_field',
        'auth_callback' => function () {
            return current_user_can('edit_posts');
        }
    ));
}
add_action('init', 'myprefix_register_meta');

Nochmals, all dies wird in der erklärt Tutorial für CSS-Tricks.

Question 3

Ich hatte das gleiche Problem – Werte wurden im Feld und in der Datenbank nicht aktualisiert – und nach einiger Recherche habe ich herausgefunden, dass der Grund dafür darin besteht, dass Sie hinzufügen sollten 'custom-fields' zum 'supports' Array in Ihrem Aufruf an register_post_type()so was:

register_post_type(
    'my_post_type_slug',
    array(
        ...
       'supports' => array( 'title', 'editor', 'custom-fields' ),
        ...
    )
);

Ob das funktioniert, kannst du testen, indem du anrufst wp.data.select( 'core/editor' ).getCurrentPost().meta in Ihrer JavaScript-Konsole, wenn der Blockeditor geladen ist. Wenn Ihr Beitragstyp keine Unterstützung für hinzufügt 'custom-fields'wird dieser Aufruf zurückgegeben undefined; Wenn dies der Fall ist, wird ein leeres Array zurückgegeben (oder besser gesagt ein Array mit dem bereits vorhandenen Meta aus der Datenbank). Dieses Verhalten wird erwähnt in den Gutenberg-Dokumentenin einem Hinweis zur Registrierung Ihres Post-Meta:

Um sicherzustellen, dass das Feld geladen wurde, fragen Sie den Blockeditor ab interne Datenstrukturen, auch bekannt als Geschäfte. Öffnen Sie die Konsole Ihres Browsers und führen Sie diesen Code aus:
wp.data.select( 'core/editor' ).getCurrentPost().meta;
Vor dem Hinzufügen der register_post_meta Funktion an das Plugin, gibt dieser Code ein void-Array zurück, da WordPress noch nicht angewiesen wurde, ein Metafeld zu laden. Nach der Registrierung des Felds gibt derselbe Code ein Objekt zurück, das das von Ihnen registrierte registrierte Metafeld enthält.

Question 4

Ich habe kürzlich an einer ähnlichen Implementierung gearbeitet und auch eine Reihe von Beispielen durchgearbeitet. Zwischen den oben genannten Artikeln und diese großartige Serie von einem der Automattic-Entwicklerhabe ich eine funktionierende Version des obigen Beispiels mit dem neueren erhalten useSelect und useDispatch benutzerdefinierte Haken. Es ist wirklich ziemlich ähnlich, verwendet aber benutzerdefinierte Hooks von React 16.8 für ein etwas prägnanteres Entwicklererlebnis:

(Auch mit @wordpress/scriptsalso stammen die Importe aus den npm-Paketen statt aus der wp Objekt direkt, aber beides würde funktionieren.)

import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';

const TextController = (props) => {
  const meta = useSelect(
    (select) =>
      select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
  );
  const { editPost } = useDispatch('core/editor');
  return (
    <TextControl
      label={__("Text Meta", "textdomain")}
      value={meta}
      onChange={(value) => editPost({ meta: { _myprefix_text_metafield: value } })}
    />
  );
};

const PluginDocumentSettingPanelDemo = () => {
  return (
    <PluginDocumentSettingPanel
      name="custom-panel"
      title="Custom Panel"
      className="custom-panel"
    >
      <TextController />
    </PluginDocumentSettingPanel>
  );
};

export default PluginDocumentSettingPanelDemo;

Hoffentlich hilft das jemand anderem bei der Suche.