Box Shadow color doesn't change on Section Columns

[RohanSharma2598]

Description

The customer reported this bug. When adding a Section with let's say two columns and trying to place the Box Shadow to the column, the color of the box shadow can't be changed and no matter what color is selected in the settings, it will always show Black color on the shadow.

Step-by-step reproduction instructions

1. Go to Edit Page and Add a section with two columns
2. Select one of the column and go to the Section Column Settings > Style > Border, Enable Box Shadow and try applying the Box Shadow with any random color and save the changes.
3. Check the shadow on the frontend and the color will show black.

Screenshots, screen recording, code snippet or Help Scout ticket

Help Scout: https://secure.helpscout.net/conversation/2264389122/372067?folderId=212385

Environment info

No response

Is the issue you are reporting a regression

No

[Soare-Robert-Daniel]

This happens when using color from the presets. The presets offer a string of a CSS variable name instead of the color value.

@HardeepAsrani, do you think it is better to remove the presets options?

[HardeepAsrani]

@Soare-Robert-Daniel If I remember, we use a same workflow in some other part of Otter to fetch the variable value and use it instead?

[Soare-Robert-Daniel]

In Flip, if you have an opacity lower than 100, when you select a color with CSS var, we get the color from that var.

otter-blocks/src/blocks/blocks/flip/inspector.js

Lines 120 to 126 in a2ae025

	const changeBoxShadowColorOpacity = value => {
	const changes = { boxShadowColorOpacity: value };
	if ( 100 > value && attributes.boxShadowColor?.includes( 'var(' ) ) {
	changes.boxShadowColor = getComputedStyle( document.documentElement, null ).getPropertyValue( attributes.boxShadowColor.replace( 'var(', '' ).replace( ')', '' ) );
	}
	setAttributes( changes );
	};

[HardeepAsrani]

@Soare-Robert-Daniel Yes, we can't have the same thing here?

[Soare-Robert-Daniel]

We can.

[pirate-bot]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀