usewaypoint / email-builder-js

A free and open-source block-based email template builder.
https://emailbuilderjs.com
MIT License
307 stars 92 forks source link

Allow transparant color or an easy way to use the backdrop color in components to be set as the background color #80

Open nicktc opened 3 months ago

nicktc commented 3 months ago

Whenever you like to design an email template with a 'floating logo', the the container should not have a background color, or the background color must be the same as the backdrop color. Not sure if allowing transparant color (or no background color) on (container) elements have compatiblity issues in email clients, but I assume that that should work fine. If that's not the case, then it would be really convenient to use the configured backdrop color easily as the background color of a container component. Right now, you need to switch from the component edit mode, to the global styles view, copy the backdrop color, switch back again, and paste it there.

Would be a nice enhancements of the email builder.

jordanisip commented 3 months ago

Thanks for sharing. Do you mind expanding on this one with an example?

In this case, I have a container block with a red background and an image block inside. On my end, the image block is showing with a transparent background.

CleanShot 2024-04-12 at 09 22 17@2x
nicktc commented 3 months ago

@jordanisip, sure. I actually want the container to be transparant. When I add a new container block, the background of the container is white, while in the container settings, the background hasn't been set. Notice the container having a white background, while it didn't have a background color set:

Scherm­afbeelding 2024-04-14 om 09 54 30 Scherm­afbeelding 2024-04-14 om 09 54 40

I hope this makes it more clear.