Cover: Allow drag n drop media replacement

[Mamaduka]

Description

Adds dropzone for the cover block background image.

Thanks, @jasmussen, @paaljoachim for the initial mockups. Sorry if any metrics are off compared to mockups.

Fixes #26388.

How has this been tested?

Manually on local dev environment.

Steps:

1. Add cover block.
2. Upload a background image.
3. Drag and drop replacement image.
4. Dropzone indicator element should appear.
5. See if the background image is replaced.

Screenshots

Types of changes

New feature.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[jasmussen]

Nice. We use 0.2s in most other places to make it snappy — if that feels okay to you, might be a good change. If it feels too snappy, okay to keep 0.3, but worth a shot.

Might want to include this right below the transition rule:

@include reduce-motion("transition");

[Mamaduka]

I think 0.2s looks better, and it isn't too snappy.

Wasn't aware of the reduce-motion mixin, Thanks for mentioning it.

[jasmussen]

Yep, it's easily missed. We have one for the animation property as well, and if you basically output it on the line right after either transition or animation both, you'll be sure that for people to check the system level setting have their needs met. It's a nice little trick, it just sets the duration to about zero.

[jasmussen]

Nice 👌

[jasmussen]

I wonder if we should round this number up to 40px ($grid-unit-50), or down to 32 ($grid-unit-40). It's a small thing, but might be slightly more griddy. Alternately, I see the grid as being fundamentally base12, even though we leverage an 8px base. You could do ($grid-unit-15 * 3).

[Mamaduka]

Tested with both $grid-unit-40 and $grid-unit-40 initially, but 36px give it more "centered" look.

I've updated styles to use ($grid-unit-15 * 3).

[jasmussen]

This is what I see:

This is stellar work. Thanks so much for the work. I left a few comments, but it's almost ready to land. It could use a small code sanity check (@aristath want to look at the JS bits?), but otherwise, sweet deal!

[aristath]

Nice! I Iike it 👍

@aristath want to look at the JS bits?

Code looks good to me ❤️
Tested and works as advertised.

[Mamaduka]

Thanks, @jasmussen, @aristath

For taking the time and testing the PR.

I've pushed styling adjustments that @jasmussen suggested.

[jasmussen]

🚢

[jasmussen]

@Mamaduka It looks like we missed a small issue here for when you are using the Cover block without an image:

Compare with the commit before this branch:

Sorry about missing that. It's hopefully an easy fix. Want me to ticket it?

[Mamaduka]

Hi @jasmussen,

Thanks for catching this regression, and sorry for missing it myself. I will create fixing PR ASAP.

[jasmussen]

Don't stress, take the weekend off!

[roo2]

@Mamaduka, @jasmussen it looks like we're still seeing the issue with the misaligned paragraphs Automattic/wp-calypso#51670

I tested on latest trunk as well as whats on wpcom 👍

[roo2]

Sorry, it looks like the issue I was seeing is wpcom specific, caused by jetpack intercepting the drag-and-drop area introducd in this PR 🙏