diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js index 1a84011b4f..9aa0e31b2c 100644 --- a/assets/js/src/newsletter_editor/blocks/image.js +++ b/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')); } }); diff --git a/tests/javascript/newsletter_editor/blocks/image.spec.js b/tests/javascript/newsletter_editor/blocks/image.spec.js index d5ec68263a..a4f37aa68b 100644 --- a/tests/javascript/newsletter_editor/blocks/image.spec.js +++ b/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;