HARALD MELCHER

WordPress Gutenberg-Block mit RichText-Feld

Blöcke speichern statische Inhalte im content-Feld der attributes.

Die edit-Funktion speichert statische Inhalte im Backend darin, wenn sie einen geänderten Inhalt feststellt und die Funktion aufruft, die an onChange gebunden ist. Diese speichert die geänderten Werte in content zurück.

Hier ist der statische Inhalt ein benutzerdefinierbares RichtText-Feld.

Die save-Funktion im Frontent baut das RichText-Feld aus den Inhalten des content-Felds zusammen:

(function (blocks, i18n, editor, element) {
        var el = element.createElement;
        var __ = i18n.__;
        var RichText = editor.RichText;

        blocks.registerBlockType('harald-melcher-blocks/block-01', {
            title: __('Harald Melcher: Editable', 'harald-melcher-blocks'),
            icon: 'universal-access-alt',
            category: 'layout',

            attributes: {
                content: {
                    type: 'array',
                    source: 'children',
                    selector: 'p'
                }
            },

            edit: function (props) {
                var content = props.attributes.content;

                function onChangeContent(newContent) {
                    props.setAttributes({content: newContent});
                }

                return el(
                    RichText,
                    {
                        tagName: 'p',
                        className: props.className,
                        onChange: onChangeContent,
                        value: content
                    }
                );
            },

            save: function (props) {
                return el(RichText.Content,
                    {
                        tagName: 'p',
                        value: props.attributes.content
                    }
                );
            }
        });
    }    (
        window.wp.blocks,
        window.wp.i18n,
        window.wp.editor,
        window.wp.element
    )
);

Das PHP-Script sieht aus wie bei den einfacheren Blöcken, lediglich erweitert um ein Arrayelement, das WordPress sagt, den Javasctipt-Anteil des RichText-Editors (wp-editor) zu laden:

wp_register_script(
    'harald-melcher-blocks-01',
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
);