DesignBold

my plugin add a button to media button, when WordPress update to WordPress 5 that replace editor and hidden my button.

This is my code. After onSelectImage run it not return alignment formatting. I`m research handbook Gutenberg but not found solution for resize image feature.

var DBbutton = (function (blocks, editor, components, i18n, element) {
    var __ = i18n.__
    var el = element.createElement
    var registerBlockType = blocks.registerBlockType
    var RichText = editor.RichText
    var BlockControls = editor.BlockControls
    var AlignmentToolbar = editor.AlignmentToolbar
    var MediaUpload = editor.MediaUpload
    var Button = components.Button

    registerBlockType('designbold/design-button-block', {
        title: __('DesignBold'),
        description: __('A custom block for image design by DesignBold.'),
        icon: 'dashicons-align-center',
        category: 'common',
        keywords: [__('image'), __('photo'), __('pics')],
        attributes: { // Necessary for saving block content.
            mediaID: {
                type: 'number'
            },
            mediaURL: {
                type: 'string',
                source: 'attribute',
                selector: 'img',
                attribute: 'src'
            },
            mediaTitle: {
                type: 'string'
            },
            mediaFileName: {
                type: 'string'
            },
            alignment: {
                type: 'string',
                default: 'none',
            },
            content: {
                type: 'array',
                source: 'children',
                selector: 'p',
            }
        },

        edit: function (props) {
            var attributes = props.attributes,
                alignment = attributes.alignment,
                content = attributes.content,
                _content = [];

            function onSelectImage(media) {
                props.setAttributes({
                    mediaURL: media.url,
                    mediaID: media.id,
                    mediaTitle: media.title,
                    mediaFileName: media.filename,
                })
            };

            function startDesignTool() {
                // Do something
            };

            var generateImage = (url) => {
                return (
                	// Display controls when the block is clicked on.
                    el(
                        BlockControls,
                        { key: 'controls' },
                        // Button upload images
                        el(Button, {
                                type: 'button',
                                className: 'dbdb-design-button',
                                onClick: startDesignTool,
                                children: iconEl
                            }
                        ),
                        // Display alignment toolbar within block controls
                        el(
                            AlignmentToolbar,
                            {
                                value: alignment,
                                onChange: onChangeAlignment,
                            }
                        ),
                    ),
                    el('figure', {className: 'wp-block-image is-resized'},
                        el('img', {src: url, resizeMethod: "scale"}),
                        el(
                            RichText,
                            {
                                key: 'richtext',
                                tagName: 'p',
                                style: { textAlign: alignment },
                                className: props.className,
                                onChange: onChangeContent,
                                value: content,
                                placeholder: __("Write caption..."),
                                keePlaceholderOnFocus: true,
                            }
                        )
                    )
                )
            }

            /** End function to add value props */
            if (attributes.mediaURL) {
                _content.push(generateImage(props.attributes.mediaURL));
            } else {
                _content.push(
                    // Display controls when the block is clicked on.
                    el(
                        BlockControls,
                        { key: 'controls' },
                        // Button upload images
                        el(Button, {
                                type: 'button',
                                className: 'dbdb-design-button',
                                onClick: startDesignTool,
                                children: iconEl
                            }
                        ),
                        // Display alignment toolbar within block controls
                        el(
                            AlignmentToolbar,
                            {
                                value: alignment,
                                onChange: onChangeAlignment,
                            }
                        ),
                    ),
                    
                    el(MediaUpload, {
                        onSelect: onSelectImage,
                        allowedTypes: ALLOWED_MEDIA_TYPES,
                        type: 'button',
                        className: 'components-button editor-media-placeholder__button is-button is-default is-large',
                        value: attributes.mediaID,
                        render: function (obj) {
                            return el(components.Button, {
                                    className: 'components-button editor-media-placeholder__button is-button is-default is-large',
                                    onClick: obj.open,
                                    children: __('Open Media Library')
                                }
                            )
                        }
                    })
                )
            }

            return _content;
        },

        save: function (props) {
            var attributes = props.attributes;
            return (
                el('div',
                    {className: props.className},
                    el('figure',
                        {className: 'wp-block-image'},
                        el('img', {src: attributes.mediaURL})
                    )
                )
            );
        },
    });
})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.components,
    window.wp.i18n,
    window.wp.element
);