Product Elements: Add design tools to “On Sale Badge” block

[sunyatasattva]

Details TBD.

cc @vivialice

[vivialice]

Hey @sunyatasattva 👋

I did a review of the On-Sale badge and you can also find the summary in Figma .We have different settings available depending on where the block is found, either:

• On the Product image block
• As its own block
• In Global styles list

Inspector settings

We already have most of what we need in the separate block variation of On-Sale products. I have a few suggestions for improvement:

• Bring in other Typography styles available, (right now we are just using Font Size): Font Family, Appearance, Line height, Letter spacing, Letter case, Decoration
• Add Margin option to Dimensions drawer

Also, I feel like what settings are available in the main panel, should be available in the Global Styles options.

Placement

I am not sure where we ended up on this discussion, but there was talk of exploring referencing the Cover block toolbar placement controls for the product image. For the first iteration, I think it's fine if we continue with the left / center / right options currently available, but perhaps it's something we can explore with this work.