From 4dc10f41761e427ccf5c2e2b7c3dcf93c39603aa Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Wed, 23 Aug 2023 11:27:50 +0300 Subject: [PATCH 1/3] fix: add CSS var conversion to hex for section shadow --- src/blocks/blocks/flip/inspector.js | 2 +- src/blocks/blocks/section/column/inspector.js | 20 ++++++++++++++++-- .../blocks/section/columns/inspector.js | 21 +++++++++++++++++-- 3 files changed, 38 insertions(+), 5 deletions(-) diff --git a/src/blocks/blocks/flip/inspector.js b/src/blocks/blocks/flip/inspector.js index 91ea01701..0d634c291 100644 --- a/src/blocks/blocks/flip/inspector.js +++ b/src/blocks/blocks/flip/inspector.js @@ -112,7 +112,7 @@ const Inspector = ({ const changeBoxShadowColor = value => { setAttributes({ - boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && attributes.boxShadowColor?.includes( 'var(' ) ) ? + boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && value?.includes( 'var(' ) ) ? getComputedStyle( document.documentElement, null ).getPropertyValue( value?.replace( 'var(', '' )?.replace( ')', '' ) ) : value }); diff --git a/src/blocks/blocks/section/column/inspector.js b/src/blocks/blocks/section/column/inspector.js index acc6c00b4..1bf6c63c9 100644 --- a/src/blocks/blocks/section/column/inspector.js +++ b/src/blocks/blocks/section/column/inspector.js @@ -472,13 +472,29 @@ const Inspector = ({ setAttributes({ boxShadowColor: value }) } + onColorChange={ value => setAttributes({ + boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && value?.includes( 'var(' ) ) ? + getComputedStyle( document.documentElement, null ).getPropertyValue( value?.replace( 'var(', '' )?.replace( ')', '' ) ) : + value + }) } /> setAttributes({ boxShadowColorOpacity: value }) } + onChange={ value => { + const changes = { boxShadowColorOpacity: value }; + + /** + * If the value is less than 100 and the color is CSS a variable, then replace the CSS variable with the computed value. + * This is needed because the way calculate the opacity of the color is by using the HEX value since we are doing in the server side. + */ + if ( 100 > value && attributes.boxShadowColor?.includes( 'var(' ) ) { + changes.boxShadowColor = getComputedStyle( document.documentElement, null ).getPropertyValue( attributes.boxShadowColor.replace( 'var(', '' ).replace( ')', '' ) ); + } + + setAttributes( changes ); + } } min={ 0 } max={ 100 } /> diff --git a/src/blocks/blocks/section/columns/inspector.js b/src/blocks/blocks/section/columns/inspector.js index 0da7a788c..770e61ced 100644 --- a/src/blocks/blocks/section/columns/inspector.js +++ b/src/blocks/blocks/section/columns/inspector.js @@ -917,13 +917,30 @@ const Inspector = ({ setAttributes({ boxShadowColor: value }) } + onColorChange={ value => setAttributes({ + boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && value?.includes( 'var(' ) ) ? + getComputedStyle( document.documentElement, null ).getPropertyValue( value?.replace( 'var(', '' )?.replace( ')', '' ) ) : + value + }) } /> setAttributes({ boxShadowColorOpacity: value }) } + onChange={ value => { + + const changes = { boxShadowColorOpacity: value }; + + /** + * If the value is less than 100 and the color is CSS a variable, then replace the CSS variable with the computed value. + * This is needed because the way calculate the opacity of the color is by using the HEX value since we are doing in the server side. + */ + if ( 100 > value && attributes.boxShadowColor?.includes( 'var(' ) ) { + changes.boxShadowColor = getComputedStyle( document.documentElement, null ).getPropertyValue( attributes.boxShadowColor.replace( 'var(', '' ).replace( ')', '' ) ); + } + + setAttributes( changes ); + } } min={ 0 } max={ 100 } /> From 6672445fbb7f1439d65a7130a42bcf66b5ade15e Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Wed, 23 Aug 2023 11:42:05 +0300 Subject: [PATCH 2/3] fix: section/column shadow display for CSS vars --- src/blocks/blocks/section/column/edit.js | 2 +- src/blocks/blocks/section/columns/edit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/blocks/blocks/section/column/edit.js b/src/blocks/blocks/section/column/edit.js index 44e7c32d7..bd207c408 100644 --- a/src/blocks/blocks/section/column/edit.js +++ b/src/blocks/blocks/section/column/edit.js @@ -254,7 +254,7 @@ const Edit = ({ if ( true === attributes.boxShadow ) { boxShadowStyle = { - boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${ hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }` + boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${ attributes.boxShadowColor.includes( 'var(' ) && ( attributes.boxShadowColorOpacity === undefined || 100 === attributes.boxShadowColorOpacity ) ? attributes.boxShadowColor : hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }` }; } diff --git a/src/blocks/blocks/section/columns/edit.js b/src/blocks/blocks/section/columns/edit.js index 995dd8567..813cfa52a 100644 --- a/src/blocks/blocks/section/columns/edit.js +++ b/src/blocks/blocks/section/columns/edit.js @@ -308,7 +308,7 @@ const Edit = ({ if ( true === attributes.boxShadow ) { boxShadowStyle = { - boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${ hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }` + boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${ attributes.boxShadowColor.includes( 'var(' ) && ( attributes.boxShadowColorOpacity === undefined || 100 === attributes.boxShadowColorOpacity ) ? attributes.boxShadowColor : hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }` }; } From ae2e5ffdb9e2a1abea6a56e44c8111ac10c1972e Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Fri, 25 Aug 2023 10:35:17 +0300 Subject: [PATCH 3/3] chore: pass condition for shadow opacity --- inc/css/blocks/class-shared-css.php | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/inc/css/blocks/class-shared-css.php b/inc/css/blocks/class-shared-css.php index c368a9983..aa4dbc417 100644 --- a/inc/css/blocks/class-shared-css.php +++ b/inc/css/blocks/class-shared-css.php @@ -275,6 +275,14 @@ public static function section_shared() { 'value' => 'boxShadowColor', 'default' => '#000', 'format' => function( $value, $attrs ) { + if ( ! isset( $attrs['boxShadowColorOpacity'] ) ) { + return $value; + } + + if ( 100 === $attrs['boxShadowColorOpacity'] ) { + return $value; + } + $opacity = ( isset( $attrs['boxShadowColorOpacity'] ) ? $attrs['boxShadowColorOpacity'] : 50 ) / 100; return Base_CSS::hex2rgba( $value, $opacity ); },