Web-stories-wp: Copy/paste the background layer should not create new layers

[pbakaus]

Bug Description

fun bug: I can copy the background and then paste it a couple of times to have unlimited background layers

Expected Behaviour

Copy/pasting the background layer / page should replace the background layer in the page it is pasted.

1. If pasted on the same page, in essence it does nothing.
2. If pasted in another page, replace that page's background.

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Implementation Brief

Copying

• When a shape background is copied, make sure to get the page background color from the page and move along with shape to clipboard (post-merge of #2158 moving background color from element to page)
• When a media background is copied, no extra attributes need to be copied (post-merge of #1925 moving background overlay from page to element).

Pasting

• When pasting a background shape element, only look at the background element color at make sure to set it as the page background color. However, also remove (delete) any current background media element (to reveal the "raw" background shape element).
• When pasting a background media element, make sure to merge it into the current background using the "combineElements" operation (will make sure it happens just like regular merge), except also make sure that background overlay is correctly handled.

Acceptance Criteria

QA Instructions

Copy shape to another shape

1. Create a story with two pages - with two different background colors (can be gradients)
2. Select the background element from page 1 and press mod+C to copy
3. Switch to page 2 and press mod+V to paste
4. Observe that background element on page 2 is now identical to page 1 and page 2 still only has a single layer (background)
5. Press "undo" (shortcut or button) and observe that entire operation can be cancelled in a single undo step

Copy shape to media

1. Create a story with two pages - page 1 has a color background and page 2 has an image background
2. Select the background element from page 1 and press mod+C to copy
3. Switch to page 2 and press mod+V to paste
4. Observe that background element on page 2 is now identical to page 1 (background media element has been deleted) and page 2 still only has a single layer (background)
5. Press "undo" (shortcut or button) and observe that entire operation can be cancelled in a single undo step

Copy media to shape

1. Create a story with two pages
2. Set a red background color on page 1, add an image, set it as background and add any overlay to the image
3. Set a blue background color on page 2
4. Select the background element from page 1 and press mod+C to copy
5. Switch to page 2 and press mod+V to paste
6. Observe that background element on page 2 is now identical to page 1 (background media element has been inserted with overlay) and page 2 still only has a single layer (background)
7. Also observe, that page 2 still has a blue page background color "behind" the media element, whereas page 1 still has the red page background color
8. Press "undo" (shortcut or button) and observe that entire operation can be cancelled in a single undo step

Copy media to media

1. Create a story with two pages
2. Set a red background color on page 1, add an image, set it as background and add any overlay to the image
3. Set a blue background color on page 2, add another image, set it as background and add any overlay (different from page 1) to the image
4. Select the background element from page 1 and press mod+C to copy
5. Switch to page 2 and press mod+V to paste
6. Observe that background element on page 2 is now identical to page 1 (background media element has been swapped and has a new overlay) and page 2 still only has a single layer (background)
7. Also observe, that page 2 still has a blue page background color "behind" the media element, whereas page 1 still has the red page background color
8. Press "undo" (shortcut or button) and observe that entire operation can be cancelled in a single undo step

Duplicate background element

1. Create a story with any background (shape or media)
2. Duplicate background element by pressing mod+D
3. Observe that nothing happens

[o-fernandez]

I'd say it can "replace" the background layer in the page it is pasted. So, if pasted on the same page, do nothing (in essence). If pasted in another page, replace that page's background. At least that'd match my expectation.

[pbakaus]

I'd say it can "replace" the background layer in the page it is pasted. So, if pasted on the same page, do nothing (in essence). If pasted in another page, replace that page's background. At least that'd match my expectation.

ah yes, haven't considered that..that makes a lot of sense!

[barklund]

This somewhat conflicts with Sam's expectations in https://docs.google.com/presentation/d/1ZiZWrmLiX40rt3n_1LMSGJxYWI-xsWFsS9bkzdbRIV8/edit?ts=5ec35b92#slide=id.g780d0a5251_0_88:

_I expect it to paste it into the page as a fg image._

Sam describes expecting the copied bg image to paste as regular inline image, whereas Paul and Omar in this issue expect it to paste as (replacement) background image.

Which is it?

[o-fernandez]

Discussed with Sam, we'll go with the approach proposed here. If I copy/paste the background image it replaces the background image of the page it is pasted in. (reference thread)

[barklund]

Discussed with Sam, we'll go with the approach proposed here. If I copy/paste the background image it replaces the background image of the page it is pasted in. (reference thread)

I assume the same goes for background shape, even if it's just a color (but can also be some complex gradient)?

[barklund]

Discussed with Sam, we'll go with the approach proposed here. If I copy/paste the background image it replaces the background image of the page it is pasted in. (reference thread)

Oh, I assume we want to copy the background overlay too, right? Even though it's technically not an attribute of the image, but the page. We'd need some way of actually having that attribute in both places (or moving it when copying, if that's possible) and re-sync to page when pasting.

[miina]

@barklund Q: Will this be addressed in #1925 since it'll be relevant for when copying overlays?

[barklund]

I will fix this in a separate PR after #1925 - I'm just making sure #1925 is made to make this one easier.

[csossi]

Testing in QA Env. - PR#2387

Tested on a PC so using ctrl-c/ctril-v but it isn't working (unable to test on a mac at the moment). Unable to cut-and-paste

[barklund]

Tested on a PC so using ctrl-c/ctril-v but it isn't working (unable to test on a mac at the moment). Unable to cut-and-paste

@csossi, please re-test on Mac. There will be a new issue addressing copy-paste on Windows.

[jauyong]

Created #2709 for windows copy and paste bug.

[jauyong]

Updating from 3 points to 1 for sprint 32

[csossi]

Verified in QA