Skip to content

Commit

Permalink
Merge pull request #582 from stellarwp/audit/KAD-3345
Browse files Browse the repository at this point in the history 
audit/KAD-3345
  • Loading branch information
@oakesjosh
oakesjosh authored Dec 4, 2024
2 parents 550a93d + 6f332d7 commit e36cb0d
Show file tree
Hide file tree
Showing 6 changed files with 494 additions and 78 deletions.
16 changes: 14 additions & 2 deletions includes/blocks/class-kadence-blocks-advanced-heading-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,21 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property( 'background-color', $css->render_color( $attributes['background'] ) );
}
}
if ( isset( $attributes['textShadow'] ) && is_array( $attributes['textShadow'] ) && isset( $attributes['textShadow'][0] ) && is_array( $attributes['textShadow'][0] ) && isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable'] ) {
$css->add_property( 'text-shadow', ( isset( $attributes['textShadow'][0]['hOffset'] ) ? $attributes['textShadow'][0]['hOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['vOffset'] ) ? $attributes['textShadow'][0]['vOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['blur'] ) ? $attributes['textShadow'][0]['blur'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['color'] ) ? $css->render_color( $attributes['textShadow'][0]['color'] ) : 'rgba(0,0,0,0.2)' ) );
if ( (isset($attributes['enableTextShadow']) && !empty($attributes['enableTextShadow']) || (isset($attributes['textShadow']) && !empty($attributes['textShadow'][0]['enable'])) ) ) {
if ( isset( $attributes['textShadow'] ) && is_array( $attributes['textShadow'] ) && isset( $attributes['textShadow'][0] ) && is_array( $attributes['textShadow'][0] ) && ((isset( $attributes['enableTextShadow'] ) && $attributes['enableTextShadow']) || (isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable']) ) ) {
$css->add_property( 'text-shadow', ( isset( $attributes['textShadow'][0]['hOffset'] ) ? $attributes['textShadow'][0]['hOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['vOffset'] ) ? $attributes['textShadow'][0]['vOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['blur'] ) ? $attributes['textShadow'][0]['blur'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['color'] ) ? $css->render_color( $attributes['textShadow'][0]['color'] ) : 'rgba(0,0,0,0.2)' ) );
}
if ( isset( $attributes['textShadowTablet'] ) && is_array( $attributes['textShadowTablet'] ) && isset( $attributes['textShadowTablet'][0] ) && is_array( $attributes['textShadowTablet'][0] ) && ((isset( $attributes['enableTextShadow'] ) && $attributes['enableTextShadow']) || (isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable']) ) ) {
$css->set_media_state('tablet');
$css->add_property( 'text-shadow', ( isset( $attributes['textShadowTablet'][0]['hOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['hOffset'] ) ? $attributes['textShadowTablet'][0]['hOffset'] : $attributes['textShadow'][0]['hOffset'] ) . 'px ' . ( isset( $attributes['textShadowTablet'][0]['vOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['vOffset'] ) ? $attributes['textShadowTablet'][0]['vOffset'] : $attributes['textShadow'][0]['vOffset'] ) . 'px ' . ( isset( $attributes['textShadowTablet'][0]['blur'] ) && ! empty( $attributes['textShadowTablet'][0]['blur'] ) ? $attributes['textShadowTablet'][0]['blur'] : $attributes['textShadow'][0]['blur'] ) . 'px ' . ( isset( $attributes['textShadowTablet'][0]['color'] ) ? $css->render_color( $attributes['textShadowTablet'][0]['color'] ) : $css->render_color( $attributes['textShadow'][0]['color'] ) ) );
}
if ( isset( $attributes['textShadowMobile'] ) && is_array( $attributes['textShadowMobile'] ) && isset( $attributes['textShadowMobile'][0] ) && is_array( $attributes['textShadowMobile'][0] ) && ((isset( $attributes['enableTextShadow'] ) && $attributes['enableTextShadow']) || (isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable']) ) ) {
$css->set_media_state('mobile');
$css->add_property( 'text-shadow', ( isset( $attributes['textShadowMobile'][0]['hOffset'] ) && ! empty( $attributes['textShadowMobile'][0]['hOffset'] ) ? $attributes['textShadowMobile'][0]['hOffset'] : ( isset( $attributes['textShadowTablet'][0]['hOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['hOffset'] ) ? $attributes['textShadowTablet'][0]['hOffset'] : $attributes['textShadow'][0]['hOffset']) ) . 'px ' . ( isset( $attributes['textShadowMobile'][0]['vOffset'] ) && ! empty( $attributes['textShadowMobile'][0]['vOffset'] ) ? $attributes['textShadowMobile'][0]['vOffset'] : (isset( $attributes['textShadowTablet'][0]['vOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['vOffset'] ) ? $attributes['textShadowTablet'][0]['vOffset'] : $attributes['textShadow'][0]['vOffset']) ) . 'px ' . ( isset( $attributes['textShadowMobile'][0]['blur'] ) && ! empty( $attributes['textShadowMobile'][0]['blur'] ) ? $attributes['textShadowMobile'][0]['blur'] : (isset( $attributes['textShadowTablet'][0]['blur'] ) && ! empty( $attributes['textShadowTablet'][0]['blur'] ) ? $attributes['textShadowTablet'][0]['blur'] : $attributes['textShadow'][0]['blur']) ) . 'px ' . (isset($attributes['textShadowMobile'][0]['color']) ? $css->render_color($attributes['textShadowMobile'][0]['color']) : (isset($attributes['textShadowTablet'][0]['color']) ? $css->render_color($attributes['textShadowTablet'][0]['color']) : $css->render_color($attributes['textShadow'][0]['color']))) );
}
}


$css->set_media_state( 'tablet' );
// Old size first.
if ( ! empty( $attributes['tabSize'] ) ) {
Expand Down
28 changes: 28 additions & 0 deletions src/blocks/advancedheading/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,10 @@
"mobileAlign": {
"type": "string"
},
"enableTextShadow": {
"type": "boolean",
"default": false
},
"textShadow": {
"type": "array",
"default": [
Expand All @@ -335,6 +339,30 @@
}
]
},
"textShadowTablet": {
"type": "array",
"default": [
{
"enable": false,
"color": "",
"blur": "",
"hOffset": "",
"vOffset": ""
}
]
},
"textShadowMobile": {
"type": "array",
"default": [
{
"enable": false,
"color": "",
"blur": "",
"hOffset": "",
"vOffset": ""
}
]
},
"htmlTag": {
"type": "string",
"default": "heading"
Expand Down
245 changes: 169 additions & 76 deletions src/blocks/advancedheading/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import classnames from 'classnames';
import {
PopColorControl,
TextShadowControl,
ResponsiveShadowControl,
TypographyControls,
InlineTypographyControls,
ResponsiveMeasurementControls,
Expand Down Expand Up @@ -119,7 +120,10 @@ function KadenceAdvancedHeading(props) {
content,
color,
colorClass,
enableTextShadow,
textShadow,
textShadowTablet,
textShadowMobile,
mobileAlign,
tabletAlign,
size,
Expand Down Expand Up @@ -364,19 +368,73 @@ function KadenceAdvancedHeading(props) {
setAttributes({ tabletMarkBorderStyles: tempBorderStyle });
setAttributes({ mobileMarkBorderStyles: tempBorderStyle });
}

// update enableTextShadow if textShadow[0].enable is true for previous unresponsive setting
if (!enableTextShadow && textShadow[0].enable) {
setAttributes({ enableTextShadow: true });
}
}, []);

let newItems;
const saveShadow = (value) => {
const newItems = textShadow.map((item, thisIndex) => {
if (0 === thisIndex) {
item = { ...item, ...value };
if (value.enable === 'reset') {
const resetItems = [
{
type: 'array',
default: [
{
enable: false,
color: 'rgba(0, 0, 0, 0.2)',
blur: 1,
hOffset: 1,
vOffset: 1,
},
],
enable: false,
},
];
switch (previewDevice) {
case 'Desktop':
setAttributes({ textShadow: resetItems });
break;
case 'Tablet':
setAttributes({ textShadowTablet: resetItems });
break;
case 'Mobile':
setAttributes({ textShadowMobile: resetItems });
break;
}

return item;
});
setAttributes({
textShadow: newItems,
});
} else if (previewDevice === 'Desktop') {
newItems = textShadow.map((item, thisIndex) => {
if (0 === thisIndex) {
item = { ...item, ...value };
}
return item;
});
setAttributes({
textShadow: newItems,
});
} else if (previewDevice === 'Tablet') {
newItems = textShadowTablet.map((item, thisIndex) => {
if (0 === thisIndex) {
item = { ...item, ...value };
}
return item;
});
setAttributes({
textShadowTablet: newItems,
});
} else if (previewDevice === 'Mobile') {
newItems = textShadowMobile.map((item, thisIndex) => {
if (0 === thisIndex) {
item = { ...item, ...value };
}
return item;
});
setAttributes({
textShadowMobile: newItems,
});
}
};

const isDynamicReplaced =
Expand Down Expand Up @@ -489,6 +547,60 @@ function KadenceAdvancedHeading(props) {
undefined !== tabletAlign ? tabletAlign : '',
undefined !== mobileAlign ? mobileAlign : ''
);
const previewColorTextShadow = getPreviewSize(
previewDevice,
undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].color
? textShadow[0].color
: 'rgba(0, 0, 0, 0.2)',
undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].color
? textShadowTablet[0].color
: textShadow[0].color,
undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].color
? textShadowMobile[0].color
: textShadowTablet[0].color
? textShadowTablet[0].color
: textShadow[0].color
);
const previewHOffset = getPreviewSize(
previewDevice,
undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].hOffset
? textShadow[0].hOffset
: 1,
undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].hOffset
? textShadowTablet[0].hOffset
: '',
undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].hOffset
? textShadowMobile[0].hOffset
: ''
);
const previewVOffset = getPreviewSize(
previewDevice,
undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].vOffset
? textShadow[0].vOffset
: 1,

undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].vOffset
? textShadowTablet[0].vOffset
: '',

undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].vOffset
? textShadowMobile[0].vOffset
: ''
);
const previewBlur = getPreviewSize(
previewDevice,
undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].blur
? textShadow[0].blur
: 1,

undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].blur
? textShadowTablet[0].blur
: '',

undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].blur
? textShadowMobile[0].blur
: ''
);
let previewJustifyAlign = previewAlign;
switch (previewAlign) {
case 'left':
Expand Down Expand Up @@ -925,21 +1037,23 @@ function KadenceAdvancedHeading(props) {
: undefined,
textTransform: textTransform ? textTransform : undefined,
fontFamily: typography ? renderTypography : '',
textShadow:
undefined !== textShadow &&
undefined !== textShadow[0] &&
undefined !== textShadow[0].enable &&
textShadow[0].enable
? (undefined !== textShadow[0].hOffset ? textShadow[0].hOffset : 1) +
'px ' +
(undefined !== textShadow[0].vOffset ? textShadow[0].vOffset : 1) +
'px ' +
(undefined !== textShadow[0].blur ? textShadow[0].blur : 1) +
'px ' +
(undefined !== textShadow[0].color
? KadenceColorOutput(textShadow[0].color)
: 'rgba(0,0,0,0.2)')
: undefined,
textShadow: enableTextShadow
? `${previewHOffset}px ${previewVOffset}px ${previewBlur}px ${KadenceColorOutput(
previewColorTextShadow
)}`
: textShadow[0].enable && previewDevice === 'Tablet'
? `${textShadow[0].hOffset}px ${textShadow[0].vOffset}px ${
textShadow[0].blur
}px ${KadenceColorOutput(textShadow[0].color)}`
: textShadowTablet[0].enable && previewDevice === 'Mobile'
? `${textShadowTablet[0].hOffset}px ${textShadowTablet[0].vOffset}px ${
textShadowTablet[0].blur
}px ${KadenceColorOutput(textShadowTablet[0].color)}`
: textShadow[0].enable && previewDevice === 'Mobile'
? `${textShadow[0].hOffset}px ${textShadow[0].vOffset}px ${
textShadow[0].blur
}px ${KadenceColorOutput(textShadow[0].color)}`
: undefined,
}}
placeholder={__('Write something…', 'kadence-blocks')}
/>
Expand Down Expand Up @@ -1669,60 +1783,39 @@ function KadenceAdvancedHeading(props) {
initialOpen={false}
panelName={'kb-adv-heading-text-shadow'}
>
<TextShadowControl
label={__('Text Shadow', 'kadence-blocks')}
enable={
undefined !== textShadow &&
undefined !== textShadow[0] &&
undefined !== textShadow[0].enable
? textShadow[0].enable
: false
}
color={
undefined !== textShadow &&
undefined !== textShadow[0] &&
undefined !== textShadow[0].color
? textShadow[0].color
: 'rgba(0, 0, 0, 0.2)'
}
colorDefault={'rgba(0, 0, 0, 0.2)'}
hOffset={
undefined !== textShadow &&
undefined !== textShadow[0] &&
undefined !== textShadow[0].hOffset
? textShadow[0].hOffset
: 1
}
vOffset={
undefined !== textShadow &&
undefined !== textShadow[0] &&
undefined !== textShadow[0].vOffset
? textShadow[0].vOffset
: 1
}
blur={
undefined !== textShadow &&
undefined !== textShadow[0] &&
undefined !== textShadow[0].blur
? textShadow[0].blur
: 1
}
onEnableChange={(value) => {
saveShadow({ enable: value });
}}
onColorChange={(value) => {
saveShadow({ color: value });
}}
onHOffsetChange={(value) => {
saveShadow({ hOffset: value });
}}
onVOffsetChange={(value) => {
saveShadow({ vOffset: value });
}}
onBlurChange={(value) => {
saveShadow({ blur: value });
<ToggleControl
label={'Enable Text Shadow'}
checked={enableTextShadow}
onChange={(value) => {
setAttributes({ enableTextShadow: value });
}}
/>
{enableTextShadow === true && (
<ResponsiveShadowControl
label={__('Text Shadow', 'kadence-blocks')}
enable={enableTextShadow}
color={previewColorTextShadow}
colorDefault={'rgba(0, 0, 0, 0.2)'}
hOffset={previewHOffset}
vOffset={previewVOffset}
blur={previewBlur}
onEnableChange={(value) => {
saveShadow({ enable: value });
}}
onColorChange={(value) => {
saveShadow({ color: value });
}}
onHOffsetChange={(value) => {
saveShadow({ hOffset: value });
}}
onVOffsetChange={(value) => {
saveShadow({ vOffset: value });
}}
onBlurChange={(value) => {
saveShadow({ blur: value });
}}
/>
)}
</KadencePanelBody>
{showSettings('iconSettings', 'kadence/advancedheading') && (
<KadencePanelBody
Expand Down
2 changes: 2 additions & 0 deletions src/packages/components/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ export { default as MeasurementSingleControl } from './measurement/single-input-
/* Color */
export { default as AdvancedColorControlPalette } from './color/advanced-color-control-palette';
export { default as BorderColorControls } from './color/border-color-control';
export { default as ShadowControl } from './shadow/shadow-control';
export { default as ResponsiveShadowControl } from './shadow/responsive-shadow-control';

/* Block Defaults */
export { default as KadenceBlockDefaults } from './block-defaults';
Expand Down
Loading

0 comments on commit e36cb0d

Please sign in to comment.