Gutenlypso: Preserve block attributes when updating media #29791

mmtr · 2018-12-28T17:09:50Z

Our custom Media Modal for Gutenlypso relies on MediaStore.on( 'change' ) for updating the media items when they are edited within the Media Modal itself.

But the current approach is triggering an undesired effect: it resets the block attributes to default values (using the mediaCalypsoToGutenberg utility) causing the previous values to don't be preserved.

Changes proposed in this Pull Request

Move the current change listener out of the Media Modal, so the callback is executed only once per post, instead of once per block.
Create new class containing the whole logic that updates the media.
If the media changes, update the needed block attributes without modifying the rest of them.

Know issues

This PR doesn't update the media used as featured media for the post or for a simple payment block. A follow-up PR will cover this.

Testing instructions

Open the block editor at /block-editor and select a site under a paid plan (free plans don't allow to edit images in the Media Modal).
Insert an image block and click on the "Media Library" button.
Select any image from the Media Modal (or upload a new one and select it).
Adjust the image size and enter a caption.
Repeat steps 2-4 with other media blocks and selecting the same image as selected in step 3: Gallery, Cover, Media & Text, Tiled Gallery.
Select any of the current blocks and click on the Pencil icon on its toolbar.
Click on the Edit button in the Media Modal and apply some changes to the image (e.g. flip it).
Close the Media Modal without inserting the modified image.
Make sure that all the media blocks show the modified image.
Check the size and the caption of the previous image block are preserved in both the editor and the post preview.

Editor

Before	After

Preview

Before	After

Fixes #29557

matticbot · 2018-12-28T17:09:51Z

Test live: https://calypso.live/?branch=fix/gutenlypso-update-edited-images

…moval

Aurorum · 2018-12-31T18:42:40Z

Just wanted to confirm that this fixes the original issue for me! It also tested well with the Image, Gallery, Inline Image, Cover and Media & Text blocks. 🎉

This PR doesn't update the media used as featured media for the post or for a simple payment block. A follow-up PR will cover this.

~~I can't test the Simple Payment block, but for some reason, this PR does fix the issue with Featured Images causing captions and alignments to not be preserved for me.~~

My bad, misunderstood!

gwwar · 2019-01-01T00:13:35Z

client/gutenberg/editor/utils/media-updater/index.js

+	};
+
+	// Block name -> Function that updates the media
+	mediaBocks = {


An explicit mapping works in the short term 👍

We may want to chat with @Automattic/luna and core folks, maybe @gziolo @aduth, if there's a way to detect blocks that use images, and maybe provide a decent fallback option

It looks like in core we don't refresh content at all when any change in the media library happens. I tried the following:

delete an image using media library, images are missing as soon as you refresh the page

edit an image using media library - only the image in the currently selected block gets updated, however the old image still works properly for other blocks

So, the short answer is we don't have support for it at the moment at all :(

Regarding finding the ways, I don't think it is straightforward because urls are stored as strings in attributes section and we simply inline components which handle them. I know that there were some work to strip out image ids when exporting/importing reusable blocks, so maybe @mcsf or @youknowriad would know more how to automate it.

Thanks @gziolo for the extra context. I suppose we'll keep thinking about this for core's use case as well. 🤔Maybe we could build something that could query for block functionality. Say, of an editors registered blocks, which ones involve the media library, and it'd return this list or something similar. Or may return a list of blocks instances that satisfy the feature query. I'm guessing we may have other use cases like that.

gwwar · 2019-01-01T00:22:27Z

client/gutenberg/editor/utils/media-updater/index.js

+import MediaStore from 'lib/media/store';
+
+const { updateBlockAttributes } = dispatch( 'core/editor' );
+const { getBlocks } = select( 'core/editor' );


I wonder if we'll move away from a single editor store, but I think this usage is okay for now.

gwwar · 2019-01-01T00:47:40Z

~~One small corner case we can follow up in, in another PR is that the featured image preview doesn't update if we edit an image in the media modal.~~

Sorry missed the known issues line 👍

gwwar

Thanks for the investigation and analysis @mmtr ! This one was particularly tricky to get a solution in that covers most cases.

Thank you @torres126 for the report and help testing! Much appreciated. ✨

Gutenlypso: Update edited images within the Media Modal

816269d

mmtr added [Type] Bug [Pri] High [Status] In Progress [Feature] Media The media screen in Calypso, general media management, or integration with third party media. [Goal] Gutenberg Working towards full integration with Gutenberg labels Dec 28, 2018

mmtr self-assigned this Dec 28, 2018

mmtr requested a review from a team December 28, 2018 17:09

mmtr mentioned this pull request Dec 28, 2018

Gutenlypso: Update the URL attribute for the image blocks in the Media Modal #29753

Closed

mmtr added 2 commits December 28, 2018 19:10

Fix ID attribute name for blocks with multiple images

a9f8931

Revert "edit" event and use "change" again, so we handle the media re…

cf86fec

…moval

mmtr changed the title ~~Gutenlypso: Update edited images within the Media Modal~~ Gutenlypso: Preserve block attributes when updating media Dec 31, 2018

mmtr added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Dec 31, 2018

gwwar reviewed Jan 1, 2019

View reviewed changes

gwwar approved these changes Jan 1, 2019

View reviewed changes

mmtr merged commit b40cff0 into master Jan 1, 2019

mmtr deleted the fix/gutenlypso-update-edited-images branch January 1, 2019 11:44

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 1, 2019

This was referenced Jan 1, 2019

Gutenberg: Featured Image not updated when edited on Media Modal #29829

Closed

Gutenlypso: Simple Payments blocks product images not updated when edited on Media Modal #29830

Closed

rodrigoi mentioned this pull request Jan 3, 2019

Gutenpack: Attributes as the source of truth for media on the Simple Payments block. #29820

Merged

mmtr mentioned this pull request Jan 15, 2019

Gallery block: adding/editing additional gallery blocks clears existing galleries #30104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenlypso: Preserve block attributes when updating media #29791

Gutenlypso: Preserve block attributes when updating media #29791

mmtr commented Dec 28, 2018 •

edited

Loading

matticbot commented Dec 28, 2018

Aurorum commented Dec 31, 2018 •

edited

Loading

gwwar Jan 1, 2019

gziolo Jan 2, 2019

gwwar Jan 2, 2019

gwwar Jan 1, 2019

gwwar commented Jan 1, 2019 •

edited

Loading

gwwar left a comment

Gutenlypso: Preserve block attributes when updating media #29791

Gutenlypso: Preserve block attributes when updating media #29791

Conversation

mmtr commented Dec 28, 2018 • edited Loading

Changes proposed in this Pull Request

Know issues

Testing instructions

matticbot commented Dec 28, 2018

Aurorum commented Dec 31, 2018 • edited Loading

gwwar Jan 1, 2019

Choose a reason for hiding this comment

gziolo Jan 2, 2019

Choose a reason for hiding this comment

gwwar Jan 2, 2019

Choose a reason for hiding this comment

gwwar Jan 1, 2019

Choose a reason for hiding this comment

gwwar commented Jan 1, 2019 • edited Loading

gwwar left a comment

Choose a reason for hiding this comment

mmtr commented Dec 28, 2018 •

edited

Loading

Aurorum commented Dec 31, 2018 •

edited

Loading

gwwar commented Jan 1, 2019 •

edited

Loading