Media: Images added to the canvas during media recording cannot be deleted

[felipebochehin87]

Bug Description

Images added to the canvas while video is being recorded cannot be deleted.

Expected Behaviour

To be defined if:

1. We should block images from being added while video is being recorded or
2. Don't block it but fix the bug so that the users can delete the images from the canvas

Steps to Reproduce

1. Create a new story
2. Start media recording
3. Add images to the canvas (clicking on + button and also dragging and dropping)
4. Stop video recording
5. Select everything that is on the canvas and press Delete a. see that the images are not removed

Screenshots

https://images.zenhubusercontent.com/235435637/001df625-0963-43c4-8f23-90f401222d55/2022_07_27_22_32_05.mp4

Additional Context

• Plugin Version:
• WordPress Version:
• Operating System:
• Browser:

[swissspidy]

Good catch Felipe!

Probably my fault for hiding most of the other layers in CanvasLayout when entering media recording mode. Because of this, when you drag & drop something from the library it's not actually added as a proper element to the canvas, which is why you cannot delete it afterwards.

I see two solutions off the top of my head:

1. Disable LibraryMoveable drag & drop when recording mode is on
2. Make drag & drop work, with the caveat that the element will be added behind the recording UI. See demo:
   https://user-images.githubusercontent.com/841956/181465328-e26d12e8-93fa-43df-9a2e-11bb536c24ba.mov

Option 2 seems most straightforward to me and can be achieved by removing these two isInRecordingMode checks here:

https://github.com/GoogleForCreators/web-stories-wp/blob/02f424e5c32475ecdfd88b5ee63c9088dda443ff/packages/story-editor/src/components/canvas/canvasLayout.js#L109-L110