How to add custom block in gutenberg?

I want to add fully customized block in gutenberg. I have wordpress latest version and want to add custom block with image and some text fields.
This should be dynamic for changes and multiple block i can use.

>Solution :

you can add block like this:

/**
 * Plugin Name: Test Plugin
 * Author: John Doe
 * Version: 1.0.0
 */
  
function loadMyBlock() {
  wp_enqueue_script(
    'my-new-block',
    plugin_dir_url(__FILE__) . 'test-block.js',
    array('wp-blocks','wp-editor'),
    true
  );
}
   
add_action('enqueue_block_editor_assets', 'loadMyBlock');

Create test-block.js file in your plugin

(function (blocks, editor, components, i18n) {
    var el = wp.element.createElement;
    var registerBlockType = blocks.registerBlockType;
    var MediaUpload = editor.MediaUpload;
    var BlockControls = editor.BlockControls;
    var InspectorControls = editor.InspectorControls;
    var SelectControl = components.SelectControl;
    var Button = components.Button;
    var TextControl = components.TextControl;
    var Fragment = wp.element.Fragment;

    registerBlockType('test-block/custom-block', {
        title: ('Custom Block'),
        icon: 'format-image',
        category: 'common',
        attributes: {
            imageUrl: {
                type: 'string',
                source: 'attribute',
                attribute: 'src',
                selector: 'img',
            },
            title: {
                type: 'string',
                source: 'html',
                selector: 'h2',
            },
            description: {
                type: 'string',
                source: 'html',
                selector: 'p',
            },
        },
        edit: function (props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;
            var onSelectImage = function (media) {
                setAttributes({
                    imageUrl: media.url,
                });
            };

            return el(Fragment, null, el(BlockControls, null, el(MediaUpload,
                {
                    onSelect: onSelectImage,
                    allowedTypes: ['image'],
                    render: function (props) {
                        return el(
                            Button,
                            {
                                className: 'components-icon-button components-toolbar__control',
                                onClick: props.open,
                            },
                            el('svg', { width: 20, height: 20, viewBox: '0 0 20 20' },
                                el('path', { d: 'M14,3 L14,1 L6,1 L6,3 L3,3 L3,6 L17,6 L17,3 L14,3 Z M15,8 L15,17 C15,17.55 14.55,18 14,18 L6,18 C5.45,18 5,17.55 5,17 L5,8 L2,8 L2,17 C2,18.1 2.9,19 4,19 L16,19 C17.1,19 18,18.1 18,17 L18,8 L15,8 Z M9,13 L11,13 L11,15 L9,15 L9,13 Z M6,8 L6,10 L8,10 L8,8 L6,8 Z M12,8 L12,10 L14,10 L14,8 L12,8 Z' })
                            ),
                            ('Upload Image')
                        );
                    },
                }
            ),
            ),
                el(
                    InspectorControls,
                    null,
                    el(
                        SelectControl,
                        {
                            label: ('Image Size'),
                            options: [
                                { value: 'small', label: ('Small') },
                                { value: 'medium', label: ('Medium') },
                                { value: 'large', label: ('Large') },
                            ],
                            value: attributes.imageSize,
                            onChange: function (value) {
                                setAttributes({ imageSize: value });
                            },
                        }
                    ),
                    el(
                        TextControl,
                        {
                            label: ('Title'),
                            value: attributes.title,
                            onChange: function (value) {
                                setAttributes({ title: value });
                            },
                        }
                    ),
                    el(
                        TextControl,
                        {
                            label: ('Description'),
                            value: attributes.description,
                            onChange: function (value) {
                                setAttributes({ description: value });
                            },
                        }
                    ),
                ),
                el(
                    'div',
                    { className: props.className },
                    el('img', { src: attributes.imageUrl }),
                    el(
                        'h2',
                        null,
                        attributes.title
                    ),
                    el(
                        'p',
                        null,
                        attributes.description
                    )
                )
            );
        },
        save: function (props) {
            var attributes = props.attributes;
            return el(
                'div',
                { className: props.className },
                el('img', { src: attributes.imageUrl }),
                el(
                    'h2',
                    null,
                    attributes.title
                ),
                el(
                    'p',
                    null,
                    attributes.description
                )
            );
        },
    });
}(
    window.wp.blocks,
    window.wp.editor,
    window.wp.components
));