Create Gutenberg custom block

customblock.js

var el = wp.element.createElement,
    Fragment = wp.element.Fragment
    registerBlockType = wp.blocks.registerBlockType,
    
    RichText = wp.editor.RichText,
    BlockControls = wp.editor.BlockControls,
    AlignmentToolbar = wp.editor.AlignmentToolbar,
    MediaUpload = wp.editor.MediaUpload,
    InspectorControls = wp.components.InspectorControls,
    PanelColor = wp.editor.PanelColor,
    withColors = wp.editor.withColors,
    compose = wp.compose.compose,
    TextControl = wp.components.TextControl,
    InspectorControls = wp.editor.InspectorControls,
    PanelBody = wp.components.PanelBody,
    Button = wp.components.Button
    ;

registerBlockType( 'brink/fullwidth-block', {
    title: 'Full Width Block',

    icon: 'align-wide',

    category: 'layout',

    attributes: {
        title: {
            type: 'array',
            source: 'children',
            selector: 'h3',
        },
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        backgroundColor: {
            type: 'string',
            default: 'white',
        },
        mediaID: {
  				type: 'number',
  			},
  			mediaURL: {
  				type: 'string',
  				source: 'attribute',
  				selector: 'img',
  				attribute: 'src',
  			},
        alignment: {
  				type: 'string',
  			},

    },

    edit: function( props ) {
        var attributes = props.attributes;
        var title = props.attributes.title;
        var content = props.attributes.content;
        var backgroundColor = props.attributes.backgroundColor;
        var alignment = props.attributes.alignment;
        
        var onSelectImage = function( media ) {
  				return props.setAttributes( {
  					mediaURL: media.url,
  					mediaID: media.id,
  				} );
  			};


        function onChangeTitle( newTitle ) {
            props.setAttributes( { title: newTitle } );
        }
        function onChangeContent( newContent ) {
            props.setAttributes( { content: newContent } );
        }
        function onChangeBackgroundColor( newBackgroundColor ) {
          props.setAttributes( { backgroundColor: newBackgroundColor} );
        }
        function onChangeAlignment( newAlignment ) {
    				props.setAttributes( { alignment: newAlignment } );
  			}
        

        return [

            // Block Controls
            el( BlockControls, { key: 'controls' }, // Display controls when the block is clicked on.
    					el( 'div', { className: 'components-toolbar' },
    						el( MediaUpload, {
    							onSelect: onSelectImage,
    							type: 'image',
    							render: function( obj ) {
    								return el( Button, {
    									className: 'components-icon-button components-toolbar__control',
    									onClick: obj.open
    									},
    									el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' },
    										el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } )
    									)
    								);
    							}
    						} )
    					),
    					el( AlignmentToolbar, {
    						value: alignment,
    						onChange: onChangeAlignment,
    					} )
    				),

            // Inspector
            el(
          			wp.element.Fragment,
          			{},
          			el(
            				InspectorControls,
            				{},
            				el(
                        PanelColor,
                        {
                            title: 'Background Color',
                            value: backgroundColor,
                            onChange: onChangeBackgroundColor,
                        }
                    ),
                ),
            ),
            
            
            // Editor
            el( 'div', {
        			className: props.className,
        			style: { backgroundColor: backgroundColor },
        			style: attributes.mediaID ? { backgroundImage: 'url('+attributes.mediaURL+')' } : {}
        		},  
        		    el( 'div', {
          				className: 'inner-container',
          				style: { textAlign: alignment }
          			}, 
            
                    el(
                        RichText,
                        {
                            tagName: 'h3', 
                            value: title, // Content in our block. i.e. props.attributes.title;
                            placeholder: 'Block Title...',
                            keepPlaceholderOnFocus: true,
                            focus: focus, // Focus — should be truthy. i.e. props.focus;
                            onFocus: props.setFocus,
                            onChange: onChangeTitle
                        }
                    ),
                    el(
                        RichText,
                        {
                            tagName: 'p',
                            onChange: onChangeContent,
                            value: content,
                            placeholder: 'Content Here...',
                        }
                    )
                )
            )
                  
        ]
    },

    save: function( props ) {
        var attributes = props.attributes;
        var title = props.attributes.title;
        var content = props.attributes.content;        
        var backgroundColor = props.attributes.backgroundColor;
        var alignment = props.attributes.alignment;

        return (
            el( 'div', {
        			className: props.className,
        			style: { 
          			  backgroundColor: backgroundColor,
                  backgroundImage: "url("+attributes.mediaURL+")"
              },
        		},  
        		    el( 'div', {
          				className: 'inner-container',
          				style: { textAlign: attributes.alignment }
          			},    			
            				el( RichText.Content, {
            					tagName: 'h3',
            					value: title
            				} ),
            				el( RichText.Content, {
            					tagName: 'p',
            					value: content
            				} ),      
                )
            )
      	);

        
    },
} );