Gutenberg custom block with responsive images

I found a solution with a help of this gutenberg github issue. The simple answer is, that wordpress (php) converts all images with the class name of wp-image-<id> automatically responsive, using the wp_make_content_images_responsive-function.

That said, all you need to do is to add the above class name to your image in the save function.

Applied to the example you mentioned it would be something like the follwing:

save: function( props ) {  var attributes = props.attributes;  var alignment = props.attributes.alignment;  var imageClass = 'wp-image-' + props.attributes.mediaId;  return (    el( 'div', { className: props.className },      attributes.mediaURL &&      el( 'div', { className: 'nelio-testimonial-image', style: { backgroundImage: 'url('+attributes.mediaURL+')' } },        el( 'img', { src: attributes.mediaURL, class: imageClass } ),      ),      el( 'div', { className: 'nelio-testimonial-content', style: { textAlign: attributes.alignment } },        attributes.testimonial && el( 'p', {}, attributes.testimonial ),        el( 'p', { className: 'nelio-testimonial-name' }, attributes.name ),        attributes.position && el( 'p', { className: 'nelio-testimonial-position' }, attributes.position )      )    )  );},