Wp-calypso: Gutenlypso: Opening Media Library Breaks Image Blocks

[Aurorum]

Outdated steps: See this comment

Steps to reproduce

1. Starting at URL: https://horizon.wordpress.com/block-editor/post/
2. Write a post and include an Image Block
3. Add a caption or adjust the size slightly
4. Set a Featured Image under "Document"
5. Preview or Publish post
6. See issue

What I expected

I expected the post to reflect the changes made in the editor, showing the captions and the image sizing.

What happened instead

• The captions were removed in both the editor and the actual post/preview itself
• Nothing changed regarding image sizing in the editor, but it reverts to full size when publishing or previewing the post

In the editor (should show captions beneath image):

In the post:

Browser / OS version

• Mac OS X 10.6.8
• Chrome 49

Context / Source

Found when writing a post for my own blog (I've experienced this several times before but I wasn't sure how to recreate it until now)

[Aurorum]

Seems to be less of an issue exclusive to Featured Images, but more as Featured Images causing the result due to the actual issue.

Opening the "Media Library" in a Block or by setting the Featured Image causes this issue. To recreate:

1. Starting at URL: https://horizon.wordpress.com/block-editor/post/
2. Write a post and include an Image Block
3. Add a caption or adjust the size slightly
4. Open the Media Library, either by clicking "Media Library" after creating an Image Block, or by setting a featured image

The same result will occur, images will resize in the actual post but not the editor, and captions will disappear from both.

@vindl Due to bug #28893, it's necessary to use the Media Library to upload an image using Gutenlypso. That means adding more than one image to a post would cause a lot of chaos and confusion. May I suggest bumping the priority of this due to how vital images are?

[vindl]

@vindl Due to bug #28893, it's necessary to use the Media Library to upload an image using Gutenlypso. That means adding more than one image to a post would cause a lot of chaos and confusion. May I suggest bumping the priority of this due to how vital images are?

@torres126 thank you for reporting this and for the suggestion! I'll bump the priority and we'll try to resolve this as soon as possible.

[mmtr]

It seems this is a side effect of using MediaStore.on( 'change', this.updateMedia ); in our custom MediaUpload for Gutenberg.

There is a call to mediaCalypsoToGutenberg in insertMedia (called by updateMedia) which resets all the image block attributes (width, height, caption, ...).

If we disable the MediaStore.on( 'change', this.updateMedia ); line everything works, but then the image blocks are not updated if we edit the images via the Media Modal (https://github.com/Automattic/wp-calypso/pull/28123).

I think we should pull the current attributes of the image blocks when executing mediaCalypsoToGutenberg or replace only the URL attribute.

Not sure if any of them are feasible, but I will continue investigating this. cc @Copons since he has been involved in this.

[mmtr]

Looks like the updateBlockAttributes action and the getBlockAttributes selector should help with the idea of replacing only the URL when the images are updated.

Will open a PR soon exploring this approach.