Discovery: simple draft of the masks system

[dvoytenko]

Summary

No issue available yet. In design phase. But PR is meant to instruct some technicals.

Some implementation nuances:

1. The mask is applied to all elements in the display mode, right in between the Wrapper and the Display.
2. The Edit mode is different and the elements are expected to apply the mask themselves. This is because the edit mode is pretty nuanced and requires different specialized layouts.
3. The Wrapper is set to pointer-events: none. This is so that clicking within the total rectangle but outside the max (see the "heart" in the demo), the content seen behind the mask is selected.
4. The nuances of editing the mask on the right side (or any other) is still WIP by @samitron7, so this is a very preliminary debugging stuff.

See demo:

Checklist

• My pull request is addressing an open issue (please create one otherwise).
• My code is tested and passes existing tests.
• My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

[pbakaus]

This is super cool!

[miina]

Looks cool indeed!

Would be great if you could also implement one example for saving the mask into DB for the FE display for the purposes of PoC.

[dvoytenko]

@miina Yes. This is very "draft" version. Just wanted to first confirm some editor/format nuances first. LMK if you have any more comments. I'm working on the FE part.

[miina]

@miina Yes. This is very "draft" version. Just wanted to first confirm some editor/format nuances first. LMK if you have any more comments. I'm working on the FE part.

Sure, understood that this is a very draft version, was just interested in seeing the draft version of FE as well, no rush intended at all! The editor part looks good so far.

[swissspidy]

Closing in favor of GoogleForCreators/web-stories-wp#246