Neue Optionen in der Gutenberg Dokument Sidebar anlegen

Ich versuche bereits vergeblich seit mehreren Stunden im Gutenberg Editor in der Sidebar zwei neue Optionen hinzuzufügen. Ein Textfeld für den Seiten-untertitel und ein Radiobutton Menü für die Höhe des Banners im Header.

Bei meinen zahlreichen Versuchen mittels eines Transpilers meine Felder zum Laufen zu bringen enden stets im selben Error, unabhängig vom Tutorial für den Transpiler (ich gefühlt alle durchprobiert). Dieser lautet wie folgt:

Uncaught TypeError: Cannot read property ‚registerPlugin‘ of undefined
at Object.<anonymous> (block.build.js?ver=1574369285:70)
at __webpack_require__ (block.build.js?ver=1574369285:20)
at block.build.js?ver=1574369285:63
at block.build.js?ver=1574369285:66

Mein kleines Plugin dafür besteht im wesentlichen aus einer index.php mit folgendem Inhalt:

<?php

/**
 * Plugin Name: Custom Panels
 * Author: ---
 * Version: 1.0.0
 */

add_action('wp_enqueue_scripts','custom_panels');

function custom_panels() {
    wp_enqueue_script( 'block-js', plugins_url( '/block.build.js', __FILE__ ));
}

register_post_meta('post', 'customname_meta_subtitle', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true
));

register_post_meta('post', 'customname_meta_header_height', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true
));

Und einer block.js mit folgendem Inhalt (die vom transpiler in eine block.build.js umgewandelt wird):

const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
const { RadioControl, TextControl } = wp.components
const { withState } = wp.compose
const { withSelect, withDispatch } = wp.data

let SubtitleControl = ({ subtitle, handleSubtitleChange }) => (
    <TextControl
        label="Set subtitle"
        value={subtitle}
        onChange={subtitle => handleSubtitleChange(subtitle)}
    />
);

SubtitleControl = withSelect(
    (select) => {
        return {
            subtitle: select('core/editor').getEditedPostAttribute('meta')['customname_meta_subtitle']
        }
    }
)(SubtitleControl);

SubtitleControl = withDispatch(
    (dispatch) => {
        return {
            handleSubtitleChange: (value) => {
                dispatch('core/editor').editPost({ meta: { customname_meta_subtitle: value } })
            }
        }
    }
)(SubtitleControl);

let HeaderImageHeightControl = ({ height, handleHeightChange }) => (
    <RadioControl
        label="Set image height"
        help="Set the height of the header image"
        selected={height}
        options={[
            { label: '100', value: '1' },
            { label: '200', value: '2' },
        ]}
        onChange={handleHeightChange}
    />
);

HeaderImageHeightControl = withSelect(
    (select) => {
        return {
            height: select('core/editor').getEditedPostAttribute('meta')['customname_meta_header_height']
        }
    }
)(HeaderImageHeightControl);

HeaderImageHeightControl = withDispatch(
    (dispatch) => {
        return {
            handleHeightChange: value => {
                dispatch('core/editor').editPost({ meta: { customname_meta_header_height: value } })
            }
        }
    }
)(HeaderImageHeightControl);

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        <SubtitleControl />
        <HeaderImageHeightControl />
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Kann jemand sagen wo der Fehler liegt? Ich stehe mit meinem sowieso recht bescheidenen Programmierkenntnissen am Ende. Danke und liebe Grüße,
Samuel

• Dieses Thema wurde geändert vor 4 Jahren, 5 Monaten von juhee370.