Support » Plugins » 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 1 Jahr, 6 Monaten von juhee370.
  • Das Thema „Neue Optionen in der Gutenberg Dokument Sidebar anlegen“ ist für neue Antworten geschlossen.