/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import { useEffect } from "@wordpress/element";
import { InspectorControls, MediaUpload } from "@wordpress/block-editor";
import {
PanelBody,
SelectControl,
ToggleControl,
Button,
RangeControl,
BaseControl,
ButtonGroup,
TabPanel,
TextControl,
} from "@wordpress/components";
import { select } from "@wordpress/data";
import { applyFilters } from "@wordpress/hooks";
/**
* Internal dependencies
*/
const {
// TypographyIcon,
// UserIcon,
LeftAlignIcon,
RightAlignIcon,
CenterAlignIcon,
TypographyDropdown,
ResponsiveDimensionsControl,
ResponsiveRangeController,
ImageAvatar,
ColorControl,
// ResetControl,
GradientColorControl,
BorderShadowControl,
BackgroundControl,
AdvancedControls,
DynamicInputControl,
SortControl,
EBIconPicker
} = window.EBControls;
import objAttributes from "./attributes";
import { typoPrefix_descs, typoPrefix_name, typoPrefix_job } from "./constants/typographyPrefixConstants";
import {
wrapperWidth,
imageWidth,
imageHeight,
rangeIconSize,
rangeIconPadding,
rangeIconDistance,
rangeIconRowGap,
imgTopBgHeight,
cSepWPrefix,
sSepWPrefix,
cSepHPrefix,
sSepHPrefix,
sclDeviderPosRight,
p9LGap,
} from "./constants/rangeNames";
import {
tmbWrapMarginConst,
tmbWrapPaddingConst,
tmbDescsPaddingConst,
tmbNamePaddingConst,
tmbJobPaddingConst,
iconsWrapPadding,
iconsWrapMargin,
imageMarginConst,
imagePaddingConst,
contentsPad,
contentsMargin,
} from "./constants/dimensionsConstants";
import { WrpBgConst, imgTopBgPrefix, socialWrpBg } from "./constants/backgroundsConstants";
import { WrpBdShadowConst, prefixSocialBdShadow, prefixImgBd, ovlBdPrefix } from "./constants/borderShadowConstants";
import {
sizeUnitTypes,
IconsHzAligns,
// CONTENTS_ALIGNMENTS
STYLE_PRESETS,
separatorTypes,
ContentsVerticalAligns,
HOVER_EFFECT,
HOVER_ALIGN
} from "./constants";
const defaultPresetAttrsObj = {
// test: undefined,
socialInImage: false,
WrpBg_backgroundColor: undefined,
cSepColor: undefined,
dscP_Left: undefined,
dscP_Right: undefined,
hov_imgBgP_gradientColor: undefined,
icnSepH: 30,
icnSp_Range: 20,
icnWp_Bottom: undefined,
icnWp_Left: undefined,
icnWp_Right: undefined,
icnWp_Top: undefined,
icnWp_isLinked: true,
imgBd_Bdr_Bottom: "1",
imgBd_Bdr_Left: "1",
imgBd_Bdr_Right: "1",
imgBd_Bdr_Top: "1",
imgBd_Rds_Bottom: undefined,
imgBd_Rds_Left: undefined,
imgBd_Rds_Right: undefined,
imgBd_Rds_Top: undefined,
imgBd_Rds_Unit: "px",
imgBd_borderColor: "undefined",
imgBd_borderStyle: "none",
imgBeforeEl: false,
imgBgP_gradientColor: "linear-gradient(45deg,#7967ff,#c277f2)",
imgMrg_Top: undefined,
imgMrg_isLinked: true,
isIconsDevider: false,
jobP_Bottom: undefined,
jobP_isLinked: true,
sSepColor: undefined,
showCSeparator: false,
showSSeparator: false,
wrpBdSd_blur: undefined,
wrpBdSd_hOffset: undefined,
wrpBdSd_shadowColor: undefined,
wrpBdSd_spread: undefined,
wrpBdSd_vOffset: undefined,
wrpMrg_isLinked: true,
wrpPad_isLinked: true,
imgH_Range: 200,
imgW_Range: 200,
nameP_Bottom: "15",
nameP_Top: "20",
showDescs: true,
wrpBdSd_Rds_Unit: "px",
imgW_Unit: "px",
wrpBdSd_Rds_Bottom: undefined,
wrpBdSd_Rds_Left: undefined,
wrpBdSd_Rds_Right: undefined,
wrpBdSd_Rds_Top: undefined,
wrpMrg_Bottom: undefined,
wrpW_Range: 100,
wrpW_Unit: "%",
hov_sclWBg_backgroundColor: undefined,
icnWp_Bottom: undefined,
icnWp_Left: undefined,
icnWp_Right: undefined,
icnWp_Top: 10,
icnWp_isLinked: false,
sclWBg_backgroundColor: undefined,
iconsVAlign: "center",
isImgHeightAuto: false,
conBgGradient: "linear-gradient(45deg, #7967ff, rgba(194,119,242,0.8))",
wrpBdSd_borderStyle: "none",
};
function Inspector({ attributes, setAttributes }) {
const {
resOption,
blockId,
// blockRoot,
// blockMeta,
//
imageUrl,
imageNewUrl,
//
imageId,
imageAlt,
//
isImgHeightAuto,
//
showDescs,
//
descsColor,
jobColor,
nameColor,
name,
jobTitle,
description,
// social profiles
showSocials,
socialDetails,
//
iconsJustify,
iconsVAlign,
//
contentsAlign,
imageAlign,
cSepAlign,
sSepAlign,
//
preset,
imgBeforeEl,
showCSeparator,
showSSeparator,
cSepType,
sSepType,
cSepColor,
sSepColor,
//
isIconsDevider,
icnsDevideColor,
icnSepW,
icnSepH,
//
hvIcnColor,
hvIcnBgc,
//
conVtAlign,
isConBgGradient,
conBgGradient,
conBgColor,
//
imgCnVtAlign,
isP9reverse,
//
icnEffect,
avatarURL,
newWindow,
showLinkNewTab,
hoverPreset,
showDesignation,
showSocialTitle,
isContentOverlay,
socialInImage
} = attributes;
//
useEffect(() => {
const newSclDtails = socialDetails.map((item) => ({
...item,
isExpanded: false,
}));
setAttributes({ socialDetails: newSclDtails });
}, []);
const resRequiredProps = {
setAttributes,
resOption,
attributes,
objAttributes,
};
// const handlePresetChange = (preset) => {
// applyFilters("eb_team_member_preset_change", preset, attributes, setAttributes, defaultPresetAttrsObj);
// switch (preset) {
// case "default":
// const newsocialDetailsDefault = socialDetails.map(item => {
// return { ...item, color: '#fff', bgColor: '#A0A8BD' }
// })
// setAttributes({
// ...defaultPresetAttrsObj,
// showDescs: true,
// showDesignation: true,
// showSSeparator: false,
// showSocialTitle: false,
// showCSeparator: false,
// isIconsDevider: false,
// imgBeforeEl: false,
// contentsAlign: 'center',
// iconsJustify: 'center',
// isConBgGradient: false,
// nameColor: '#4b4b4b',
// jobColor: '#4b4b4b',
// descsColor: '#9f9f9f',
// hvIcnColor: '#fff',
// hvIcnBgc: '#909AA9',
// name_FontSize: 20,
// name_SizeUnit: "px",
// job_FontSize: 16,
// job_FontWeight: 700,
// job_SizeUnit: "px",
// dscs_FontSize: 16,
// nameP_Bottom: "15",
// nameP_Top: "20",
// dscP_Top: "15",
// dscP_Bottom: "20",
// dscP_Left: "0",
// dscP_Right: "0",
// jobP_Left: "0",
// jobP_Right: "0",
// jobP_Top: "0",
// jobP_Bottom: "0",
// jobP_isLinked: true,
// icnZ_Range: 20,
// icnSp_Range: 20,
// icnPd_Range: 1,
// icnSepH: 38,
// icnWp_Bottom: "0",
// icnWp_Left: "0",
// icnWp_Right: "0",
// icnWp_Top: "10",
// icnWp_isLinked: false,
// socialDetails: newsocialDetailsDefault,
// imgBd_Bdr_Bottom: "0",
// imgBd_Bdr_Left: "0",
// imgBd_Bdr_Right: "0",
// imgBd_Bdr_Top: "0",
// imgBd_Rds_Bottom: "0",
// imgBd_Rds_Left: "0",
// imgBd_Rds_Right: "0",
// imgBd_Rds_Top: "0",
// imgBd_Rds_Unit: "%",
// imgBd_borderColor: "rgba(255,255,255,1)",
// imgBd_borderStyle: "none",
// sclBdSd_Rds_Bottom: "0",
// sclBdSd_Rds_Left: "0",
// sclBdSd_Rds_Right: "0",
// sclBdSd_Rds_Top: "0",
// sclBdSd_Rds_Unit: "px",
// sclBdSd_Rds_isLinked: true,
// sclBdSd_borderColor: "#A0A8BD",
// sclBdSd_borderStyle: "solid",
// wrpBdSd_blur: 20,
// wrpBdSd_hOffset: 0,
// wrpBdSd_shadowColor: "rgba(0,0,0,0)",
// wrpBdSd_spread: 0,
// wrpBdSd_vOffset: 5,
// wrpMrg_isLinked: false,
// wrpPad_isLinked: false,
// ovlBd_shadowColor: "rgba(0,0,0,0)",
// ovlBd_vOffset: 5,
// ovlBd_hOffset: 2,
// ovlBd_blur: 17,
// });
// break;
// case "preset1":
// const newsocialDetails1 = socialDetails.map(item => {
// return { ...item, color: '#fff', bgColor: '#A0A8BD' }
// })
// setAttributes({
// ...defaultPresetAttrsObj,
// showDescs: true,
// showDesignation: true,
// showSSeparator: true,
// showSocialTitle: false,
// showCSeparator: true,
// isIconsDevider: true,
// imgBeforeEl: true,
// contentsAlign: 'center',
// iconsJustify: 'center',
// isConBgGradient: false,
// nameColor: '#4b4b4b',
// jobColor: '#4b4b4b',
// descsColor: '#9f9f9f',
// sSepColor: "#E1E7F1",
// hvIcnColor: '#fff',
// hvIcnBgc: '#909AA9',
// name_FontSize: 20,
// name_SizeUnit: "px",
// job_FontSize: 16,
// job_FontWeight: 700,
// job_SizeUnit: "px",
// dscs_FontSize: 16,
// nameP_Bottom: "15",
// nameP_Top: "20",
// dscP_Left: "20",
// dscP_Right: "20",
// dscP_Top: "15",
// dscP_Bottom: "20",
// jobP_Bottom: "15",
// jobP_isLinked: false,
// icnZ_Range: 20,
// icnSp_Range: 50,
// icnPd_Range: 1,
// icnSepH: 38,
// icnWp_Bottom: "20",
// icnWp_Left: "40",
// icnWp_Right: "40",
// icnWp_Top: "20",
// icnWp_isLinked: false,
// socialDetails: newsocialDetails1,
// imgBd_Bdr_Bottom: "5",
// imgBd_Bdr_Left: "5",
// imgBd_Bdr_Right: "5",
// imgBd_Bdr_Top: "5",
// imgBd_Rds_Bottom: "50",
// imgBd_Rds_Left: "50",
// imgBd_Rds_Right: "50",
// imgBd_Rds_Top: "50",
// imgBd_Rds_Unit: "%",
// imgBd_borderColor: "rgba(255,255,255,1)",
// imgBd_borderStyle: "solid",
// imgBgP_gradientColor:
// "linear-gradient(45deg, rgba(120,102,255,0.49) 0% , rgba(195,120,242,0.52) 100%)",
// imgMrg_Top: "-100",
// imgMrg_isLinked: false,
// WrpBg_backgroundColor: "rgba(255,255,255,1)",
// hov_imgBgP_gradientColor:
// "linear-gradient(45deg, rgba(0,0,0,0.8) 0% , rgba(0,0,0,0.4) 100%)",
// cSepColor: "#E1E7F1",
// sclBdSd_Rds_Bottom: "0",
// sclBdSd_Rds_Left: "0",
// sclBdSd_Rds_Right: "0",
// sclBdSd_Rds_Top: "0",
// sclBdSd_Rds_Unit: "px",
// sclBdSd_Rds_isLinked: true,
// sclBdSd_borderColor: "#A0A8BD",
// sclBdSd_borderStyle: "solid",
// wrpBdSd_blur: 20,
// wrpBdSd_hOffset: 0,
// wrpBdSd_shadowColor: "rgba(0,0,0,0.3)",
// wrpBdSd_spread: 0,
// wrpBdSd_vOffset: 5,
// wrpMrg_isLinked: false,
// wrpPad_isLinked: false,
// ovlBd_shadowColor: "rgba(0,0,0,0)",
// ovlBd_vOffset: 5,
// ovlBd_hOffset: 2,
// ovlBd_blur: 17,
// });
// break;
// case "preset3":
// const newsocialDetailspreset3 = socialDetails.map(item => {
// return { ...item, color: '#fff', bgColor: '#A0A8BD' }
// })
// setAttributes({
// ...defaultPresetAttrsObj,
// socialInImage: true,
// showDescs: true,
// showDesignation: true,
// showSSeparator: false,
// showSocialTitle: false,
// showCSeparator: false,
// isIconsDevider: false,
// imgBeforeEl: false,
// contentsAlign: 'center',
// iconsJustify: 'center',
// isConBgGradient: true,
// conBgGradient: "linear-gradient(211deg, #C8D2E3 0%, #DAE2F0 100%)",
// conBgColor: '#fff',
// nameColor: '#4b4b4b',
// jobColor: '#4b4b4b',
// descsColor: '#9f9f9f',
// hvIcnColor: '#fff',
// hvIcnBgc: '#909AA9',
// name_FontSize: 20,
// name_SizeUnit: "px",
// job_FontSize: 16,
// job_FontWeight: 700,
// job_SizeUnit: "px",
// dscs_FontSize: 16,
// name_SizeUnit: "px",
// nameP_Bottom: "15",
// nameP_Top: "20",
// dscP_Bottom: "20",
// dscP_Top: "15",
// dscP_Left: "0",
// dscP_Right: "0",
// dscP_isLinked: false,
// jobP_Bottom: "0",
// jobP_isLinked: true,
// icnZ_Range: 20,
// icnSp_Range: 20,
// icnPd_Range: 1,
// icnWp_Bottom: "0",
// icnWp_Left: "0",
// icnWp_Right: "0",
// icnWp_Top: "0",
// iconsVAlign: "flex-end",
// socialDetails: newsocialDetailspreset3,
// imgBd_Bdr_Bottom: "0",
// imgBd_Bdr_Left: "0",
// imgBd_Bdr_Right: "0",
// imgBd_Bdr_Top: "0",
// imgBd_Rds_Bottom: "0",
// imgBd_Rds_Left: "0",
// imgBd_Rds_Right: "0",
// imgBd_Rds_Top: "0",
// imgBd_Rds_Unit: "%",
// imgBd_borderColor: "rgba(255,255,255,1)",
// imgBd_borderStyle: "none",
// // hov_sclWBg_backgroundColor: "rgba(0,0,0,0.5)",
// imgW_Unit: "%",
// wrpW_Range: 400,
// wrpW_Unit: "px",
// isImgHeightAuto: true,
// // sclWBg_backgroundColor: "rgba(0,0,0,0.5)",
// cpd_Bottom: "50",
// cpd_Left: "50",
// cpd_Right: "50",
// cpd_Top: "50",
// cpd_Unit: "px",
// cpd_isLinked: true,
// cmrg_Bottom: "20",
// cmrg_Left: "20",
// cmrg_Right: "20",
// cmrg_Top: "20",
// cmrg_Unit: "px",
// cmrg_isLinked: true,
// sclBdSd_Bdr_Bottom: "1",
// sclBdSd_Bdr_Left: "1",
// sclBdSd_Bdr_Right: "1",
// sclBdSd_Bdr_Top: "1",
// sclBdSd_Bdr_Unit: "px",
// sclBdSd_Bdr_isLinked: true,
// sclBdSd_BorderType: "normal",
// sclBdSd_Rds_Bottom: "0",
// sclBdSd_Rds_Left: "0",
// sclBdSd_Rds_Right: "0",
// sclBdSd_Rds_Top: "0",
// sclBdSd_Rds_Unit: "px",
// sclBdSd_Rds_isLinked: true,
// sclBdSd_borderColor: "#A0A8BD",
// sclBdSd_borderStyle: "solid",
// ovlBd_Rds_Bottom: "0",
// ovlBd_Rds_Left: "0",
// ovlBd_Rds_Right: "0",
// ovlBd_Rds_Top: "0",
// ovlBd_Rds_Unit: "px",
// ovlBd_shadowColor: "rgba(0,0,0,0)",
// ovlBd_vOffset: 5,
// ovlBd_hOffset: 2,
// ovlBd_blur: 17,
// });
// break;
// case "new-preset1":
// const newsocialDetails = socialDetails.map(item => {
// return { ...item, color: '#A0A8BD', bgColor: '#fff' }
// })
// setAttributes({
// ...defaultPresetAttrsObj,
// showDescs: true,
// showDesignation: true,
// showSSeparator: false,
// showSocialTitle: false,
// showCSeparator: false,
// isIconsDevider: false,
// imgBeforeEl: false,
// contentsAlign: 'left',
// iconsJustify: 'flex-start',
// isConBgGradient: false,
// conBgColor: '#fff',
// nameColor: '#1C1B1F',
// jobColor: '#CAD2DF',
// descsColor: '#768399',
// hvIcnColor: '#fff',
// hvIcnBgc: '#A0A8BD',
// name_FontSize: 24,
// name_SizeUnit: "px",
// job_FontSize: 32,
// job_SizeUnit: "px",
// job_FontWeight: 700,
// dscs_FontSize: 16,
// nameP_Bottom: "10",
// nameP_Top: "10",
// dscP_Bottom: "10",
// dscP_Top: "10",
// dscP_Left: "0",
// dscP_Right: "0",
// dscP_isLinked: false,
// jobP_Bottom: "0",
// jobP_isLinked: true,
// icnZ_Range: 17,
// icnSp_Range: 8,
// icnPd_Range: 1,
// icnWp_Bottom: "0",
// icnWp_Left: "0",
// icnWp_Right: "0",
// icnWp_Top: "0",
// socialDetails: newsocialDetails,
// imgW_Range: 424,
// imgW_Unit: "px",
// imgH_Range: 558,
// imgH_Unit: "px",
// wrpW_Range: 424,
// wrpW_Unit: "px",
// cpd_Bottom: "24",
// cpd_Left: "24",
// cpd_Right: "24",
// cpd_Top: "24",
// cpd_Unit: "px",
// cpd_isLinked: true,
// cmrg_Bottom: "20",
// cmrg_Left: "20",
// cmrg_Right: "20",
// cmrg_Top: "20",
// cmrg_Unit: "px",
// cmrg_isLinked: true,
// sclBdSd_Bdr_Bottom: "1",
// sclBdSd_Bdr_Left: "1",
// sclBdSd_Bdr_Right: "1",
// sclBdSd_Bdr_Top: "1",
// sclBdSd_Bdr_Unit: "px",
// sclBdSd_Bdr_isLinked: true,
// sclBdSd_BorderType: "normal",
// sclBdSd_Rds_Bottom: "50",
// sclBdSd_Rds_Left: "50",
// sclBdSd_Rds_Right: "50",
// sclBdSd_Rds_Top: "50",
// sclBdSd_Rds_Unit: "px",
// sclBdSd_Rds_isLinked: true,
// sclBdSd_borderColor: "#A0A8BD",
// sclBdSd_borderStyle: "solid",
// ovlBd_Rds_Bottom: "5",
// ovlBd_Rds_Left: "5",
// ovlBd_Rds_Right: "5",
// ovlBd_Rds_Top: "5",
// ovlBd_Rds_Unit: "px",
// imgBd_Bdr_Bottom: "0",
// imgBd_Bdr_Left: "0",
// imgBd_Bdr_Right: "0",
// imgBd_Bdr_Top: "0",
// imgBd_Rds_Bottom: "5",
// imgBd_Rds_Left: "5",
// imgBd_Rds_Right: "5",
// imgBd_Rds_Top: "5",
// imgBd_Rds_Unit: "px",
// imgBd_borderColor: "rgba(255,255,255,1)",
// imgBd_borderStyle: "none",
// ovlBd_shadowColor: "rgba(0,0,0,0)",
// ovlBd_vOffset: 5,
// ovlBd_hOffset: 2,
// ovlBd_blur: 17,
// });
// break;
// case "new-preset2":
// const newsocialDetails2 = socialDetails.map(item => {
// return { ...item, color: '#D5D5D5', bgColor: '#909AA9' }
// })
// setAttributes({
// ...defaultPresetAttrsObj,
// showDescs: false,
// showDesignation: true,
// showSSeparator: false,
// showSocialTitle: false,
// showCSeparator: false,
// isIconsDevider: false,
// imgBeforeEl: false,
// contentsAlign: 'center',
// iconsJustify: 'center',
// isConBgGradient: true,
// conBgGradient: "linear-gradient(214deg, #949CAA -14.68% , #606977 103.07%)",
// conBgColor: '#949CAA',
// nameColor: '#fff',
// jobColor: '#D5D5D5',
// descsColor: '#fff',
// hvIcnColor: '#fff',
// hvIcnBgc: '#909AA9',
// name_FontSize: 24,
// name_SizeUnit: "px",
// job_FontSize: 16,
// job_FontWeight: 400,
// job_SizeUnit: "px",
// dscs_FontSize: 16,
// nameP_Bottom: "10",
// nameP_Top: "10",
// dscP_Bottom: "10",
// dscP_Top: "10",
// jobP_Bottom: "0",
// jobP_Top: "0",
// jobP_isLinked: true,
// icnZ_Range: 14,
// icnSp_Range: 8,
// icnPd_Range: 0.9,
// icnWp_Bottom: "0",
// icnWp_Left: "0",
// icnWp_Right: "0",
// icnWp_Top: "10",
// socialDetails: newsocialDetails2,
// imgBd_Rds_Bottom: "8",
// imgBd_Rds_Left: "8",
// imgBd_Rds_Right: "8",
// imgBd_Rds_Top: "8",
// imgBd_Rds_Unit: "px",
// imgBd_Bdr_Bottom: "0",
// imgBd_Bdr_Left: "0",
// imgBd_Bdr_Right: "0",
// imgBd_Bdr_Top: "0",
// imgBd_borderColor: "rgba(255,255,255,1)",
// imgBd_borderStyle: "none",
// imgW_Range: 424,
// imgW_Unit: "px",
// imgH_Range: 558,
// imgH_Unit: "px",
// wrpW_Range: 424,
// wrpW_Unit: "px",
// cpd_Bottom: "24",
// cpd_Left: "24",
// cpd_Right: "24",
// cpd_Top: "24",
// cpd_Unit: "px",
// cpd_isLinked: true,
// cmrg_Bottom: "24",
// cmrg_Left: "24",
// cmrg_Right: "24",
// cmrg_Top: "24",
// cmrg_Unit: "px",
// cmrg_isLinked: true,
// sclBdSd_Bdr_Bottom: "1",
// sclBdSd_Bdr_Left: "1",
// sclBdSd_Bdr_Right: "1",
// sclBdSd_Bdr_Top: "1",
// sclBdSd_Bdr_Unit: "px",
// sclBdSd_Bdr_isLinked: true,
// sclBdSd_BorderType: "normal",
// sclBdSd_Rds_Bottom: "50",
// sclBdSd_Rds_Left: "50",
// sclBdSd_Rds_Right: "50",
// sclBdSd_Rds_Top: "50",
// sclBdSd_Rds_Unit: "px",
// sclBdSd_Rds_isLinked: true,
// sclBdSd_borderColor: "#A0A8BD",
// sclBdSd_borderStyle: "solid",
// ovlBd_Rds_Bottom: "8",
// ovlBd_Rds_Left: "8",
// ovlBd_Rds_Right: "8",
// ovlBd_Rds_Top: "8",
// ovlBd_Rds_Unit: "px",
// ovlBd_shadowColor: "rgba(0,0,0,0.16)",
// ovlBd_vOffset: 5,
// ovlBd_hOffset: 2,
// ovlBd_blur: 17,
// });
// break;
// case "new-preset3":
// const newsocialDetails3 = socialDetails.map(item => {
// return { ...item, color: '#645F7D', bgColor: 'rgba(0,0,0,0)' }
// })
// setAttributes({
// ...defaultPresetAttrsObj,
// showDescs: true,
// showDesignation: true,
// showSSeparator: true,
// showSocialTitle: true,
// showCSeparator: false,
// isIconsDevider: false,
// imgBeforeEl: false,
// contentsAlign: 'left',
// iconsJustify: 'flex-start',
// isConBgGradient: false,
// conBgColor: '#EBF0F8',
// nameColor: '#342E4C',
// jobColor: '#736D8B',
// descsColor: '#342E4C',
// hvIcnColor: '#000',
// hvIcnBgc: 'rgba(0,0,0,0)',
// name_FontSize: 24,
// name_SizeUnit: "px",
// job_FontSize: 16,
// job_FontWeight: 400,
// job_SizeUnit: "px",
// dscs_FontSize: 16,
// nameP_Bottom: "10",
// nameP_Top: "10",
// dscP_Bottom: "50",
// dscP_Top: "10",
// jobP_Bottom: "",
// jobP_Top: "0",
// jobP_Left: "0",
// jobP_Right: "0",
// jobP_isLinked: false,
// icnZ_Range: 13,
// icnSp_Range: 8,
// icnPd_Range: 0,
// icnWp_Bottom: "0",
// icnWp_Left: "0",
// icnWp_Right: "0",
// icnWp_Top: "20",
// socialDetails: newsocialDetails3,
// imgBd_Rds_Bottom: "0",
// imgBd_Rds_Left: "0",
// imgBd_Rds_Right: "0",
// imgBd_Rds_Top: "0",
// imgBd_Rds_Unit: "px",
// imgBd_Bdr_Bottom: "0",
// imgBd_Bdr_Left: "0",
// imgBd_Bdr_Right: "0",
// imgBd_Bdr_Top: "0",
// imgBd_borderColor: "rgba(255,255,255,1)",
// imgBd_borderStyle: "none",
// imgW_Range: 400,
// imgW_Unit: "px",
// imgH_Range: 400,
// imgH_Unit: "px",
// wrpW_Range: 400,
// wrpW_Unit: "px",
// cpd_Bottom: "34",
// cpd_Left: "34",
// cpd_Right: "34",
// cpd_Top: "34",
// cpd_Unit: "px",
// cpd_isLinked: true,
// cmrg_Bottom: "0",
// cmrg_Left: "0",
// cmrg_Right: "0",
// cmrg_Top: "0",
// cmrg_Unit: "px",
// cmrg_isLinked: true,
// sclBdSd_Bdr_Bottom: "1",
// sclBdSd_Bdr_Left: "1",
// sclBdSd_Bdr_Right: "1",
// sclBdSd_Bdr_Top: "1",
// sclBdSd_Bdr_Unit: "px",
// sclBdSd_Bdr_isLinked: true,
// sclBdSd_BorderType: "normal",
// sclBdSd_Rds_Bottom: "0",
// sclBdSd_Rds_Left: "0",
// sclBdSd_Rds_Right: "0",
// sclBdSd_Rds_Top: "0",
// sclBdSd_Rds_Unit: "px",
// sclBdSd_Rds_isLinked: true,
// sclBdSd_borderColor: "#A0A8BD",
// sclBdSd_borderStyle: "none",
// sSepW_Range: 100,
// ovlBd_Rds_Bottom: "0",
// ovlBd_Rds_Left: "0",
// ovlBd_Rds_Right: "0",
// ovlBd_Rds_Top: "0",
// ovlBd_Rds_Unit: "px",
// ovlBd_shadowColor: "rgba(0,0,0,0)",
// ovlBd_vOffset: 5,
// ovlBd_hOffset: 2,
// ovlBd_blur: 17,
// });
// break;
// case "preset2":
// setAttributes({
// ...defaultPresetAttrsObj,
// icnWp_Bottom: "45",
// icnWp_isLinked: false,
// imgBd_Rds_Bottom: "50",
// imgBd_Rds_Left: "50",
// imgBd_Rds_Right: "50",
// imgBd_Rds_Top: "50",
// imgBd_Rds_Unit: "%",
// isImgHeightAuto: true,
// imgW_Range: 100,
// imgW_Unit: "%",
// jobP_Bottom: "15",
// jobP_isLinked: false,
// nameP_Bottom: "10",
// nameP_Top: "10",
// showDescs: false,
// wrpBdSd_Rds_Bottom: "50",
// wrpBdSd_Rds_Left: "50",
// wrpBdSd_Rds_Right: "50",
// wrpBdSd_Rds_Top: "50",
// wrpBdSd_Rds_Unit: "%",
// wrpMrg_Bottom: "80",
// wrpMrg_isLinked: false,
// wrpW_Range: 400,
// wrpW_Unit: "px",
// });
// break;
// case "preset5":
// setAttributes({
// ...defaultPresetAttrsObj,
// });
// break;
// case "preset6":
// setAttributes({
// ...defaultPresetAttrsObj,
// });
// break;
// case "preset4":
// setAttributes({
// ...defaultPresetAttrsObj,
// conBgGradient:
// "linear-gradient(45deg, #7967ff 0% , rgba(194,119,242,0.8) 100%)",
// imgW_Unit: "%",
// isImgHeightAuto: true,
// wrpW_Range: 400,
// wrpW_Unit: "px",
// });
// break;
// }
// setAttributes({ preset });
// };
useEffect(() => {
if (preset === 'preset3') {
if (isContentOverlay) {
setAttributes({
socialInImage: false,
nameColor: '#fff',
jobColor: '#fff',
descsColor: '#fff',
})
} else {
setAttributes({
socialInImage: true,
nameColor: '#4b4b4b',
jobColor: '#4b4b4b',
descsColor: '#9f9f9f',
})
}
}
}, [isContentOverlay, preset]);
const onSocialProfileAdd = () => {
const socialDetails = [
...attributes.socialDetails,
{
title: "Facebook",
icon: "fab fa-facebook-f",
color: "#fff",
bgColor: "#A0A8BD",
link: "",
linkOpenNewTab: false,
isExpanded: false,
},
];
setAttributes({ socialDetails });
};
const getSocialDetailsComponents = () => {
const onProfileChange = (key, value, position) => {
const newSocialDetail = { ...attributes.socialDetails[position] };
const newSocialDetails = [...attributes.socialDetails];
newSocialDetails[position] = newSocialDetail;
if (Array.isArray(key)) {
key.map((item, index) => {
newSocialDetails[position][item] = value[index];
});
} else {
newSocialDetails[position][key] = value;
}
setAttributes({ socialDetails: newSocialDetails });
};
return attributes.socialDetails.map((each, i) => (
<div key={i}>
<EBIconPicker
title={__("Social Media", "essential-blocks")}
value={each.icon || null}
onChange={(value) => onProfileChange('icon', value, i)}
/>
<TextControl
label={__("Title", "essential-blocks")}
value={each.title}
onChange={(value) => onProfileChange('title', value, i)}
/>
<ColorControl
label={__("Icon Color", "essential-blocks")}
color={each.color}
onChange={(value) => onProfileChange('color', value, i)}
/>
<ColorControl
label={__("Icon Background", "essential-blocks")}
color={each.bgColor}
onChange={(value) => onProfileChange('bgColor', value, i)}
/>
<TextControl
label={__("URL", "essential-blocks")}
value={each.link}
onChange={(value) => onProfileChange('link', value, i)}
help={__(
"Use https or http",
"essential-blocks"
)}
/>
{showLinkNewTab && (
<ToggleControl
label={__("Open in New Tab", "essential-blocks")}
checked={each.linkOpenNewTab}
onChange={(value) => onProfileChange('linkOpenNewTab', value, i)}
/>
)}
</div>
))
}
return (
<InspectorControls key="controls">
<div className="eb-panel-control">
<TabPanel
className="eb-parent-tab-panel"
activeClass="active-tab"
// onSelect={onSelect}
tabs={[
{
name: "general",
title: "General",
className: "eb-tab general",
},
{
name: "styles",
title: "Style",
className: "eb-tab styles",
},
{
name: "advance",
title: "Advanced",
className: "eb-tab advance",
},
]}
>
{(tab) => (
<div className={"eb-tab-controls" + tab.name}>
{tab.name === "general" && (
<>
<PanelBody
title={__("Presets", "essential-blocks")}
// initialOpen={false}
>
{/* <BaseControl label={__("Design Preset", "essential-blocks")}>
<SelectControl
// label={__("Design Preset", "essential-blocks")}
value={preset}
options={STYLE_PRESETS}
// onChange={(preset) => setAttributes({ preset })}
onChange={handlePresetChange}
/>
</BaseControl> */}
{preset === "preset5" && (
<>
<ToggleControl
label={__("Reverse Layout", "essential-blocks")}
checked={isP9reverse}
onChange={() =>
setAttributes({
isP9reverse: !isP9reverse,
})
}
/>
<ResponsiveRangeController
// noUnits
baseLabel={__("Gap", "essential-blocks")}
controlName={p9LGap}
resRequiredProps={resRequiredProps}
min={0}
max={100}
step={1}
/>
</>
)}
{preset === "new-preset3" && (
<SelectControl
label={__("Hover Alignment", "essential-blocks")}
value={hoverPreset}
options={HOVER_ALIGN}
onChange={(hoverPreset) => setAttributes({ hoverPreset })}
/>
)}
{preset === "preset3" && (
<ToggleControl
label={__(
"Content Overlay",
"essential-blocks"
)}
checked={isContentOverlay}
onChange={() =>
setAttributes({
isContentOverlay: !isContentOverlay,
})
}
/>
)}
<ToggleControl
label={__(
"Enable Designation",
"essential-blocks"
)}
checked={showDesignation}
onChange={() =>
setAttributes({
showDesignation: !showDesignation,
})
}
/>
<ToggleControl
label={__(
"Enable Description",
"essential-blocks"
)}
checked={showDescs}
onChange={() =>
setAttributes({
showDescs: !showDescs,
})
}
/>
<ToggleControl
label={__(
"Enable Social Profiles",
"essential-blocks"
)}
checked={showSocials}
onChange={() =>
setAttributes({
showSocials: !showSocials,
})
}
/>
</PanelBody>
<PanelBody
title={__("Content", "essential-blocks")}
initialOpen={false}
>
{!imageNewUrl && (
<MediaUpload
onSelect={({ id, url, alt }) =>
setAttributes({
imageNewUrl: url,
imageId: id,
imageAlt: alt,
})
}
type="image"
value={imageId}
render={({ open }) => {
return (
<Button
className="eb-background-control-inspector-panel-img-btn components-button"
label={__("Upload Image", "essential-blocks")}
icon="format-image"
onClick={open}
/>
);
}}
/>
)}
{imageNewUrl && (
<>
<ImageAvatar
imageUrl={imageNewUrl}
onDeleteImage={() =>
setAttributes({
imageNewUrl: null,
})
}
/>
<DynamicInputControl
label={__(
"URL",
"essential-blocks"
)}
attrName="avatarURL"
inputValue={avatarURL}
setAttributes={
setAttributes
}
onChange={(newURL) =>
setAttributes({
avatarURL: newURL,
})
}
/>
<DynamicInputControl
label={__(
"Title",
"essential-blocks"
)}
attrName="name"
inputValue={name}
setAttributes={
setAttributes
}
onChange={(newName) =>
setAttributes({
name: newName,
})
}
/>
<DynamicInputControl
label={__(
"Designation",
"essential-blocks"
)}
attrName="jobTitle"
inputValue={jobTitle}
setAttributes={
setAttributes
}
onChange={(newJobTitle) =>
setAttributes({
jobTitle: newJobTitle,
})
}
/>
<DynamicInputControl
label={__(
"Description",
"essential-blocks"
)}
attrName="description"
inputValue={description}
setAttributes={
setAttributes
}
onChange={(newDescription) =>
setAttributes({
description: newDescription,
})
}
isTextarea={true}
/>
{avatarURL && (
<ToggleControl
label={__("Open in New Tab", "essential-blocks")}
checked={newWindow}
onChange={() =>
setAttributes({
newWindow: !newWindow,
})
}
/>
)}
</>
)}
</PanelBody>
<PanelBody
title={__(
"Social Profiles",
"essential-blocks"
)}
// initialOpen={false}
>
<>
{showSocials && (
<>
<ToggleControl
label={__("Show link in new tab", "essential-blocks")}
checked={showLinkNewTab}
onChange={() =>
setAttributes({
showLinkNewTab: !showLinkNewTab,
socialDetails: [...socialDetails]
})
}
/>
<SortControl
items={attributes.socialDetails}
labelKey={'title'}
onSortEnd={socialDetails => setAttributes({ socialDetails })}
onDeleteItem={index => {
setAttributes({ socialDetails: attributes.socialDetails.filter((each, i) => i !== index) })
}}
hasSettings={true}
settingsComponents={getSocialDetailsComponents()}
hasAddButton={true}
onAddItem={onSocialProfileAdd}
addButtonText={__(
"Add Social Profile",
"essential-blocks"
)}
/>
</>
)}
</>
</PanelBody>
<PanelBody
title={__(
"Separators",
"essential-blocks"
)}
// initialOpen={false}
>
<ToggleControl
label={__("Enable Content Separator", "essential-blocks")}
checked={showCSeparator}
onChange={() =>
setAttributes({
showCSeparator: !showCSeparator,
})
}
/>
{showSocials && "preset3" !== preset && (
<ToggleControl
label={__("Enable Social Separator", "essential-blocks")}
checked={showSSeparator}
onChange={() =>
setAttributes({
showSSeparator: !showSSeparator,
})
}
/>
)}
</PanelBody>
</>
)}
{tab.name === "styles" && (
<>
<PanelBody
title={__(
"Container width",
"essential-blocks"
)}
// initialOpen={false}
>
<ResponsiveRangeController
// noUnits
baseLabel={__("Max Width", "essential-blocks")}
controlName={wrapperWidth}
resRequiredProps={resRequiredProps}
min={100}
max={2000}
step={1}
/>
</PanelBody>
{/preset[2,3,4,8,9]|new-preset1|new-preset2|new-preset3/i.test(
preset || ""
) && (
<PanelBody
title={__(
"Overlay Contents",
"essential-blocks"
)}
// initialOpen={false}
>
{/preset[3,4,]|new-preset1|new-preset2|new-preset3/i.test(
preset || ""
) && (
<>
<ResponsiveDimensionsControl
resRequiredProps={
resRequiredProps
}
controlName={
contentsMargin
}
baseLabel="margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={
resRequiredProps
}
controlName={
contentsPad
}
baseLabel="Padding"
/>
{preset === "preset4" &&
preset ===
"new-preset1" && (
<>
<BaseControl
id="eb-team-content-vertical-alignments"
label="Vertical alignments"
>
<ButtonGroup id="eb-team-content-vertical-alignments">
{ContentsVerticalAligns.map(
(
{
value,
label,
},
index
) => (
<Button
key={
index
}
isSecondary={
conVtAlign !==
value
}
isPrimary={
conVtAlign ===
value
}
onClick={() =>
setAttributes(
{
conVtAlign: value,
}
)
}
>
{
label
}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
</>
)}
<BorderShadowControl
controlName={
ovlBdPrefix
}
resRequiredProps={
resRequiredProps
}
// noShadow
noBdrHover
// noBorder
// noShdowHover
/>
</>
)}
<BaseControl
label={__(
"Background",
"essential-blocks"
)}
></BaseControl>
<ToggleControl
label={__(
"Use Background Gradient",
"essential-blocks"
)}
checked={isConBgGradient}
onChange={() =>
setAttributes({
isConBgGradient: !isConBgGradient,
})
}
/>
{isConBgGradient ? (
<GradientColorControl
gradientColor={
conBgGradient
}
onChange={(conBgGradient) =>
setAttributes({
conBgGradient,
})
}
/>
) : (
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={conBgColor}
onChange={(conBgColor) =>
setAttributes({
conBgColor,
})
}
/>
)}
{applyFilters(
"eb_team_member_preset8_shadow",
"",
attributes,
setAttributes,
resRequiredProps
)}
<style>
{`${preset === "preset2"
? `
div.${blockId}.eb-team-wrapper div.contents{
top: 50%;
}
`
: ""
}
${preset === "preset3"
? `
div.${blockId}.eb-team-wrapper ul.socials {
opacity: 1;
}
`
: ""
}
${preset === "preset4"
? `
div.${blockId}.eb-team-wrapper div.contents {
opacity: 1;
}
`
: ""
}
`}
</style>
</PanelBody>
)}
<PanelBody
title={__(
"Alignments",
"essential-blocks"
)}
>
{preset === "preset5" ? (
<BaseControl
id="eb-team-avatar-vertical-alignments"
label="Avatar/Content Vertical Alignment"
>
<SelectControl
// label={__("Icons Horizontal Alignment", "essential-blocks")}
value={imgCnVtAlign}
options={ContentsVerticalAligns}
onChange={(imgCnVtAlign) =>
setAttributes({
imgCnVtAlign,
})
}
/>
</BaseControl>
) : (
<BaseControl
id="eb-team-image-alignments"
label="Avatar Horizontal Alignments"
>
<ButtonGroup className="eb-btngrp-align">
<Button
icon={() => (
<LeftAlignIcon
color={
imageAlign ===
"left" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
imageAlign: "left",
})
}
/>
<Button
icon={() => (
<CenterAlignIcon
color={
imageAlign ===
"center" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
imageAlign: "center",
})
}
/>
<Button
icon={() => (
<RightAlignIcon
color={
imageAlign ===
"right" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
imageAlign: "right",
})
}
/>
</ButtonGroup>
</BaseControl>
)}
<BaseControl
id="eb-team-contents-alignments"
label="Contents Horizontal Alignments"
>
<ButtonGroup className="eb-btngrp-align">
<Button
icon={() => (
<LeftAlignIcon
color={
contentsAlign ===
"left" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
contentsAlign: "left",
})
}
/>
<Button
icon={() => (
<CenterAlignIcon
color={
contentsAlign ===
"center" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
contentsAlign: "center",
})
}
/>
<Button
icon={() => (
<RightAlignIcon
color={
contentsAlign ===
"right" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
contentsAlign: "right",
})
}
/>
</ButtonGroup>
</BaseControl>
{showSocials && (
<>
<BaseControl
id="eb-team-icons-alignments"
label="Social Icons Horizontal Alignments"
>
<SelectControl
// label={__("Icons Horizontal Alignment", "essential-blocks")}
value={iconsJustify}
options={IconsHzAligns}
onChange={(iconsJustify) =>
setAttributes({
iconsJustify,
})
}
/>
</BaseControl>
{preset === "preset3" && (
<BaseControl
id="eb-team-icons-alignments"
label="Social Icons Vertical Alignments"
>
<SelectControl
// label={__("Icons Horizontal Alignment", "essential-blocks")}
value={iconsVAlign}
options={ContentsVerticalAligns}
onChange={(iconsVAlign) =>
setAttributes({
iconsVAlign,
})
}
/>
</BaseControl>
)}
</>
)}
{showCSeparator && (
<BaseControl
id="eb-team-contents-alignments"
label="Content Separator Alignment"
>
<ButtonGroup className="eb-btngrp-align">
<Button
icon={() => (
<LeftAlignIcon
color={
cSepAlign ===
"left" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
cSepAlign: "left",
})
}
/>
<Button
icon={() => (
<CenterAlignIcon
color={
cSepAlign ===
"center" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
cSepAlign: "center",
})
}
/>
<Button
icon={() => (
<RightAlignIcon
color={
cSepAlign ===
"right" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
cSepAlign: "right",
})
}
/>
</ButtonGroup>
</BaseControl>
)}
{showSocials && showSSeparator && (
<BaseControl
id="eb-team-contents-alignments"
label="Social Separator Alignment"
>
<ButtonGroup className="eb-btngrp-align">
<Button
icon={() => (
<LeftAlignIcon
color={
sSepAlign ===
"left" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
sSepAlign: "left",
})
}
/>
<Button
icon={() => (
<CenterAlignIcon
color={
sSepAlign ===
"center" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
sSepAlign: "center",
})
}
/>
<Button
icon={() => (
<RightAlignIcon
color={
sSepAlign ===
"right" &&
"#6c40f7"
}
/>
)}
onClick={() =>
setAttributes({
sSepAlign: "right",
})
}
/>
</ButtonGroup>
</BaseControl>
)}
</PanelBody>
<PanelBody title={__("Avatar", "essential-blocks")} initialOpen={false}>
{!imageNewUrl && (
<MediaUpload
onSelect={({ id, url }) =>
setAttributes({
imageNewUrl: url,
imageId: id,
imageAlt: alt,
})
}
type="image"
value={imageId}
render={({ open }) => {
return (
<Button
className="eb-background-control-inspector-panel-img-btn components-button"
label={__("Upload Image", "essential-blocks")}
icon="format-image"
onClick={open}
/>
);
}}
/>
)}
{imageNewUrl && (
<>
<ResponsiveRangeController
baseLabel={__("Image Width", "essential-blocks")}
controlName={imageWidth}
resRequiredProps={resRequiredProps}
units={sizeUnitTypes}
max={2000}
/>
<ToggleControl
label={__("Auto Image Height", "essential-blocks")}
checked={isImgHeightAuto}
onChange={() =>
setAttributes({
isImgHeightAuto: !isImgHeightAuto,
})
}
/>
{!isImgHeightAuto && (
<ResponsiveRangeController
baseLabel={__("Image Height", "essential-blocks")}
controlName={imageHeight}
resRequiredProps={resRequiredProps}
units={sizeUnitTypes}
max={2000}
/>
)}
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={imageMarginConst}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={imagePaddingConst}
baseLabel="Padding"
/>
<BorderShadowControl
controlName={prefixImgBd}
resRequiredProps={
resRequiredProps
}
// noShadow
// noBorder
/>
<ToggleControl
label={__("Enable Background before Image", "essential-blocks")}
checked={imgBeforeEl}
onChange={() =>
setAttributes({
imgBeforeEl: !imgBeforeEl,
})
}
/>
{imgBeforeEl && (
<>
<BackgroundControl
noOverlay
noMainBgi
controlName={imgTopBgPrefix}
resRequiredProps={resRequiredProps}
/>
<ResponsiveRangeController
noUnits
baseLabel={__("Height", "essential-blocks")}
controlName={imgTopBgHeight}
resRequiredProps={resRequiredProps}
min={0}
max={300}
step={1}
/>
</>
)}
</>
)}
</PanelBody>
<PanelBody
title={__("Name", "essential-blocks")}
initialOpen={false}
>
<ColorControl
label={__("Color", "essential-blocks")}
color={nameColor}
onChange={(nameColor) => setAttributes({ nameColor })}
/>
<TypographyDropdown
baseLabel="Typography"
typographyPrefixConstant={typoPrefix_name}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={tmbNamePaddingConst}
baseLabel="Padding"
/>
</PanelBody>
<PanelBody title={__("Job Title", "essential-blocks")} initialOpen={false}>
<ColorControl
label={__("Color", "essential-blocks")}
color={jobColor}
onChange={(jobColor) => setAttributes({ jobColor })}
/>
<TypographyDropdown
baseLabel="Typography"
typographyPrefixConstant={typoPrefix_job}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={tmbJobPaddingConst}
baseLabel="Padding"
/>
</PanelBody>
<PanelBody
title={__(
"Description",
"essential-blocks"
)}
initialOpen={false}
>
{showDescs && (
<>
<ColorControl
label={__("Color", "essential-blocks")}
color={descsColor}
onChange={(descsColor) =>
setAttributes({
descsColor,
})
}
/>
<TypographyDropdown
baseLabel="Typography"
typographyPrefixConstant={typoPrefix_descs}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={tmbDescsPaddingConst}
baseLabel="Padding"
/>
</>
)}
</PanelBody>
{showSocials && (
<PanelBody title={__("Social Icons", "essential-blocks")} initialOpen={false}>
<ColorControl
label={__("Hover Color", "essential-blocks")}
color={hvIcnColor}
onChange={(hvIcnColor) =>
setAttributes({
hvIcnColor,
})
}
/>
<ColorControl
label={__("Hover Background", "essential-blocks")}
color={hvIcnBgc}
onChange={(hvIcnBgc) => setAttributes({ hvIcnBgc })}
/>
<ResponsiveRangeController
noUnits
baseLabel={__("Size", "essential-blocks")}
controlName={rangeIconSize}
resRequiredProps={resRequiredProps}
min={5}
max={300}
step={1}
/>
<ResponsiveRangeController
noUnits
baseLabel={__("Padding", "essential-blocks")}
controlName={rangeIconPadding}
resRequiredProps={resRequiredProps}
min={0}
max={6}
step={0.1}
/>
<ResponsiveRangeController
noUnits
baseLabel={__("Spacing", "essential-blocks")}
controlName={rangeIconDistance}
resRequiredProps={resRequiredProps}
min={0}
max={100}
step={1}
/>
<ResponsiveRangeController
noUnits
baseLabel={__("Rows Gap", "essential-blocks")}
controlName={rangeIconRowGap}
resRequiredProps={resRequiredProps}
min={0}
max={100}
step={1}
/>
<label
style={{
display: "block",
margin: "-20px 0 20px",
}}
>
<i>
N.B. 'Rows Gap' is used when you have multiple rows of social
profiles. Normally in case of only one row, it's not needed
</i>
</label>
<ToggleControl
label={__("Icons Devider", "essential-blocks")}
checked={isIconsDevider}
onChange={() =>
setAttributes({
isIconsDevider: !isIconsDevider,
})
}
/>
{isIconsDevider && (
<>
<ColorControl
label={__("Color", "essential-blocks")}
color={icnsDevideColor}
onChange={(icnsDevideColor) =>
setAttributes({
icnsDevideColor,
})
}
/>
<RangeControl
label={__("Width", "essential-blocks")}
value={icnSepW}
onChange={(icnSepW) =>
setAttributes({
icnSepW,
})
}
step={1}
min={1}
max={50}
/>
<RangeControl
label={__("Height", "essential-blocks")}
value={icnSepH}
onChange={(icnSepH) =>
setAttributes({
icnSepH,
})
}
step={1}
min={1}
max={300}
/>
<ResponsiveRangeController
baseLabel={__("Position From Right", "essential-blocks")}
controlName={sclDeviderPosRight}
resRequiredProps={resRequiredProps}
min={0}
max={80}
step={1}
/>
</>
)}
<SelectControl
label={__("Icon Hover Effect", "essential-blocks")}
value={icnEffect}
options={HOVER_EFFECT}
// onChange={(preset) => setAttributes({ preset })}
onChange={(icnEffect) => {
setAttributes({
icnEffect,
});
}}
/>
<PanelBody
title={__("Icons Border", "essential-blocks")}
initialOpen={false}
>
<BorderShadowControl
controlName={prefixSocialBdShadow}
resRequiredProps={resRequiredProps}
noShadow
// noBorder
/>
</PanelBody>
<PanelBody
title={__("Container Background ", "essential-blocks")}
initialOpen={false}
>
<BackgroundControl
controlName={socialWrpBg}
resRequiredProps={resRequiredProps}
noMainBgi
noOverlay
/>
</PanelBody>
<PanelBody
title={__("Container Margin Padding ", "essential-blocks")}
initialOpen={false}
>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={iconsWrapMargin}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={iconsWrapPadding}
baseLabel="Padding"
/>
</PanelBody>
</PanelBody>
)}
{showCSeparator && (
<PanelBody
title={__("Content Separator", "essential-blocks")}
initialOpen={false}
>
<ColorControl
label={__("Color", "essential-blocks")}
color={cSepColor}
onChange={(cSepColor) => setAttributes({ cSepColor })}
/>
<ResponsiveRangeController
baseLabel={__("Width", "essential-blocks")}
controlName={cSepWPrefix}
resRequiredProps={resRequiredProps}
min={0}
max={800}
step={1}
/>
<ResponsiveRangeController
baseLabel={__("Height", "essential-blocks")}
controlName={cSepHPrefix}
resRequiredProps={resRequiredProps}
min={0}
max={20}
step={1}
/>
<BaseControl label={__("Separator Type", "essential-blocks")}>
<SelectControl
// label={__("Design Preset", "essential-blocks")}
value={cSepType}
options={separatorTypes}
// onChange={(preset) => setAttributes({ preset })}
onChange={(cSepType) => {
setAttributes({
cSepType,
});
}}
/>
</BaseControl>
</PanelBody>
)}
{showSocials && showSSeparator && (
<PanelBody
title={__("Social Separator", "essential-blocks")}
initialOpen={false}
>
<ColorControl
label={__("Color", "essential-blocks")}
color={sSepColor}
onChange={(sSepColor) => setAttributes({ sSepColor })}
/>
<ResponsiveRangeController
baseLabel={__("Width", "essential-blocks")}
controlName={sSepWPrefix}
resRequiredProps={resRequiredProps}
min={0}
max={800}
step={1}
/>
<ResponsiveRangeController
baseLabel={__("Height", "essential-blocks")}
controlName={sSepHPrefix}
resRequiredProps={resRequiredProps}
min={0}
max={20}
step={1}
/>
<BaseControl label={__("Separator Type", "essential-blocks")}>
<SelectControl
// label={__("Design Preset", "essential-blocks")}
value={sSepType}
options={separatorTypes}
// onChange={(preset) => setAttributes({ preset })}
onChange={(sSepType) => {
setAttributes({
sSepType,
});
}}
/>
</BaseControl>
</PanelBody>
)}
</>
)}
{tab.name === "advance" && (
<>
<PanelBody
title={__("Margin & Padding")}
// initialOpen={true}
>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={tmbWrapMarginConst}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={tmbWrapPaddingConst}
baseLabel="Padding"
/>
</PanelBody>
<PanelBody title={__("Background ", "essential-blocks")} initialOpen={false}>
<BackgroundControl
controlName={WrpBgConst}
resRequiredProps={resRequiredProps}
/>
</PanelBody>
<PanelBody title={__("Border & Shadow")} initialOpen={false}>
<BorderShadowControl
controlName={WrpBdShadowConst}
resRequiredProps={resRequiredProps}
// noShadow
// noBorder
/>
</PanelBody>
<AdvancedControls attributes={attributes} setAttributes={setAttributes} />
</>
)}
</div>
)}
</TabPanel>
</div>
</InspectorControls>
);
}
export default Inspector;