const el = wp.element.createElement;
const registerBlockType = wp.blocks.registerBlockType;
const TextControl = wp.components.TextControl;
const __ = wp.i18n.__;
const sprintf = wp.i18n.sprintf;

registerBlockType('recras/gutenberg-availability', {
    title: 'Availability calendar',
    icon: 'calendar-alt',
    category: 'recras',

    attributes: {
        id: {
            type: 'number',
            //source: 'attribute',
        },
        autoresize: {
            type: 'boolean',
            default: true,
            //source: 'attribute',
        }
    },

    edit: function(props) {
        let id = props.attributes.id;
        let autoresize = props.attributes.autoresize;
        let retval = [];
        if (!id) {
            var controlOptions = {
                // Existing 'url' value for the block.
                value: id,
                // When the text input value is changed, we need to
                // update the 'url' attribute to propagate the change.
                onChange: function(newVal) {
                    props.setAttributes({
                        id: newVal
                    });
                },
                placeholder: __('Enter the ID'),
            };
            retval.push(
                // el() is a function to instantiate a new element
                el( TextControl, controlOptions )
            );
        } else {
            retval.push(el(
                'div',
                null,
                sprintf(__('Recras Availability calendar for package %s'), id)
            ));
        }
        return retval;
    },

    save: function(props) {
        let id = props.attributes.id || false;
        let autoresize = props.attributes.autoresize || true;
        // If the attributes ID is missing, don't save any inline HTML.
        if (!id) {
            return null;
        }
        // Include a fallback link for non-JS contexts and for when the plugin is not activated.
        let html = '[recras-availability id=' + id;
        if (!autoresize) {
            html += ' autoresize=false';
        }
        html += ']';
        return html;
    },
} );

@@ -132,16 +132,71 @@
 ontrol;%0A
+const CheckboxControl = wp.components.CheckboxControl;%0A
 const __
@@ -448,43 +448,8 @@
 r',%0A
-            //source: 'attribute',%0A
     
@@ -537,43 +537,8 @@
 ue,%0A
-            //source: 'attribute',%0A
     
@@ -708,49 +708,28 @@
     
-if (!id) %7B%0A            var controlOptions
+var optionsIDControl
  = %7B
@@ -737,27 +737,34 @@
             
-   
+value: id,
  // Existing
@@ -765,19 +765,18 @@
 isting '
-url
+id
 ' value 
@@ -794,39 +794,8 @@
 ck.%0A
-                value: id,%0A    
     
@@ -866,20 +866,16 @@
         
-    
 // updat
@@ -885,11 +885,10 @@
 he '
-url
+id
 ' at
@@ -932,20 +932,16 @@
         
-    
 onChange
@@ -977,20 +977,16 @@
         
-    
 props.se
@@ -999,20 +999,16 @@
 butes(%7B%0A
-    
         
@@ -1046,20 +1046,16 @@
         
-    
 %7D);%0A    
@@ -1058,35 +1058,27 @@
             
-    %7D,%0A    
+%7D,%0A
             
@@ -1098,38 +1098,68 @@
 __('
-Enter the ID'),%0A            %7D;
+ID of the package'),%0A            label: 'ID of the package',
 %0A   
@@ -1167,142 +1167,373 @@
     
+%7D;%0A
     
-retval.push(%0A                // el() is a function to instantiate a new element%0A                el( TextControl, controlOptions )%0A
+    var optionsAutoresizeControl = %7B%0A            checked: autoresize, // Existing 'id' value for the block.%0A            // When the text input value is changed, we need to%0A            // update the 'id' attribute to propagate the change.%0A            onChange: function(newVal) %7B%0A                props.setAttributes(%7B%0A                    autoresize: newVal%0A  
     
@@ -1540,16 +1540,19 @@
         
+  %7D
 );%0A     
@@ -1558,14 +1558,82 @@
     
-%7D else
+    %7D,%0A            label: 'Auto resize iframe',%0A        %7D;%0A        if (id)
  %7B%0A 
@@ -1801,32 +1801,156 @@
   ));%0A        %7D%0A
+        retval.push(el(TextControl, optionsIDControl));%0A        retval.push(el(CheckboxControl, optionsAutoresizeControl));%0A
         return r
@@ -2095,17 +2095,90 @@
 size
- %7C%7C true;
+;%0A        if (autoresize === undefined) %7B%0A            autoresize = true;%0A        %7D
 %0A   

Add auto-resize checkbox