Add CSS var conversion to hex for Section & Column Block shadow color

[Soare-Robert-Daniel]

Closes #1723

Summary

• Added color extraction to Section Block & Column Block for Shadow Color from CSS vars when opacity is lower than 100%.
• Minor fix for Flip Shadow Color: it did not consider the new color when processing.

Screenshots

2023-08-23.11-35-12.mp4

---

Test instructions

1. Insert a Section block with one Column Block.
2. Test the shadow in both blocks, like in the video above.

---

Checklist before the final review

• Included E2E or unit tests for the changes in this PR.
• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.
• PR is following the best practices

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	270.78 KB	270.78 KB	0 B (0.00%)
Blocks	1.42 MB	1.42 MB	911 B (0.06%)
CSS	85.28 KB	85.28 KB	0 B (0.00%)
Dashboard	122.49 KB	122.49 KB	0 B (0.00%)
Export Import	83.17 KB	83.17 KB	0 B (0.00%)
Pro	303.27 KB	303.27 KB	0 B (0.00%)

[pirate-bot]

Plugin build for ae2e5ff is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	91.98	7.98	90.73	0 (60ms)	0 (80ms)

Values above 60ms

"0 - 95.38, 1 - 95.18, 2 - 88.18, 3 - 90.91, 4 - 82.87, 5 - 87.17, 6 - 84.14, 7 - 96.40, 8 - 92.34, 9 - 85.27, 10 - 102.61, 11 - 104.69, 12 - 90.86, 13 - 87.79, 14 - 90.73, 15 - 85.61, 16 - 114.92, 17 - 88.97, 18 - 83.58"

[irinelenache]

@Soare-Robert-Daniel If the opacity is already set to 100% and i'm changing the color, it will be black in frontend. I have to change the opacity when the color is already set in order to properly work. Here is a video with the behaviour https://vertis.d.pr/v/0U2tWu

[irinelenache]

@Soare-Robert-Daniel Tested again and the mentioned issue is fixed now, thank you 🚀

[pirate-bot]

🎉 This PR is included in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀