# Masked Decal Block.
A custom Gutenberg block to mask an image to a specific shape overlaid ontop of another image.
## The brief
We needed a gutenberg block that could be easily installed across multiple websites, takes a background image, .svg mask shape, and a foreground image, then compiles them into a single image section that allows for the repositioning of the mask shape and foreground image in relation to the background image. The images needed to be easily swapped in and out as the desired images were changing frequently.
## Scope
- [x] Scales up and down without losing proportions or cutting off parts of the images
- [x] Displays in Gutenberg exactly how it will be displayed on the front end
- [x] Allow for any given .svg shape and foreground/background image to be used
- [x] Multiple of these blocks need to be able to be used on the same page without conflicts
## Technical Requirements
The most important aspect of this is for it to display the final output within Gutenberg exactly how it will be displayed on the front end. This allows for the content editor to be able to position the mask and foreground image in relation to the background image with confidence as they can see exactly how it will look on the front end as they make adjustments within Gutenberg.
