Add size detection for images without specified size

[MAILPOET-1685]

assets/js/src/newsletter_editor/blocks/image.js

@@ -59,6 +59,7 @@ define([
       }
     }),
     onRender: function () {
+      var that = this;
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
       if (this.model.get('fullWidth')) {
@@ -66,6 +67,13 @@ define([
       } else {
         this.$el.removeClass('mailpoet_full_image');
       }
+      // Ensure size values for images unknown size data (e.g. added via Gutenberg edited post/page)
+      if (!this.model.get('width') || this.model.get('width') === 'auto') {
+        this.$el.find('img').on('load', function () {
+          that.model.set('width', this.width);
+          that.model.set('height', this.height);
+        });
+      }
       this.$('.mailpoet_content').css('width', this.model.get('width'));
     }
   });

tests/javascript/newsletter_editor/blocks/image.spec.js

@@ -129,6 +129,41 @@ define([
         expect(view.$('.mailpoet_content')).to.have.length(1);
       });
 
+      describe('render', function () {
+        it('sets sizes to model from rendered image when they are null', function () {
+          const model = new (ImageBlock.ImageBlockModel)({ width: null, height: null });
+          const view = new (ImageBlock.ImageBlockView)({ model: model });
+          view.render();
+          view.$('.mailpoet_content img').get(0).width = 100;
+          view.$('.mailpoet_content img').get(0).height = 200;
+          view.$('.mailpoet_content img').trigger('load');
+          expect(view.model.get('width')).to.equal(100);
+          expect(view.model.get('height')).to.equal(200);
+        });
+
+        it('sets sizes to model from rendered image when they are set to auto', function () {
+          const model = new (ImageBlock.ImageBlockModel)({ width: 'auto', height: 'auto' });
+          const view = new (ImageBlock.ImageBlockView)({ model: model });
+          view.render();
+          view.$('.mailpoet_content img').get(0).width = 100;
+          view.$('.mailpoet_content img').get(0).height = 200;
+          view.$('.mailpoet_content img').trigger('load');
+          expect(view.model.get('width')).to.equal(100);
+          expect(view.model.get('height')).to.equal(200);
+        });
+
+        it('keeps sizes when they are already set', function () {
+          const model = new (ImageBlock.ImageBlockModel)({ width: 300, height: 400 });
+          const view = new (ImageBlock.ImageBlockView)({ model: model });
+          view.render();
+          view.$('.mailpoet_content img').get(0).width = 100;
+          view.$('.mailpoet_content img').get(0).height = 200;
+          view.$('.mailpoet_content img').trigger('load');
+          expect(view.model.get('width')).to.equal(300);
+          expect(view.model.get('height')).to.equal(400);
+        });
+      });
+
       describe('once rendered', function () {
         var model;
         var view;