Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

audit/KAD-3345 #582

Merged
merged 8 commits into from
Dec 4, 2024
Merged

audit/KAD-3345 #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fe9fb94
KAD-3345 ShadowControl/ResponsiveShadowControl component created/adde…
gilbert-hernandez Sep 30, 2024
6832dba
KAD-3345 requested updates
gilbert-hernandez Nov 8, 2024
c8c7c07
Merge branch 'master' into audit/KAD-3345
oakesjosh Nov 19, 2024
ec3d223
Fix code style issues with ESLint
lint-action Nov 19, 2024
8835b59
KAD-3345 text shadow updates
gilbert-hernandez Dec 2, 2024
dcfab16
KAD-3345 frontend updates
gilbert-hernandez Dec 4, 2024
c03ffc1
KAD-3345 frontend updates
gilbert-hernandez Dec 4, 2024
6f332d7
Merge branch 'master' into audit/KAD-3345
oakesjosh Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions includes/blocks/class-kadence-blocks-advanced-heading-block.php
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading