/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import { useEffect, useState, useRef } from "@wordpress/element";
import { InspectorControls } from "@wordpress/block-editor";
import {
PanelBody,
PanelRow,
SelectControl,
ToggleControl,
TextControl,
Button,
ButtonGroup,
BaseControl,
TabPanel,
RangeControl,
} from "@wordpress/components";
import { select } from "@wordpress/data";
import { doAction, applyFilters } from "@wordpress/hooks";
/**
* External Dependencies
*/
import Select2 from "react-select";
/**
* Internal depencencies
*/
import {
WRAPPER_MARGIN,
WRAPPER_PADDING,
WRAPPER_BORDER_SHADOW,
WRAPPER_BG,
COLUMNS,
COLUMN_GAP,
COLUMN_PADDING,
COLUMN_BG,
COLUMN_BORDER_SHADOW,
THUMBNAIL_IMAGE_SIZE,
THUMBNAIL_BORDER_RADIUS,
THUMBNAIL_MARGIN,
TITLE_MARGIN,
CONTENT_MARGIN,
READMORE_MARGIN,
READMORE_PADDING,
HEADER_META_MARGIN,
FOOTER_META_MARGIN,
HEADER_META_SPACE,
FOOTER_META_SPACE,
AVATAR_BORDER_RADIUS,
COLUMN_MEDIA_WIDTH,
UNIT_TYPES,
HEIGHT_UNIT_TYPES,
NORMAL_HOVER,
NORMAL_HOVER_ACTIVE,
PRESETS,
TEXT_ALIGN,
TITLE_TAGS,
CONTENT_POSITION,
VERTICAL_POSITION,
DOTS_GAP,
ARROW_POSITION,
DOTS_POSITION,
ARROW_SIZE,
DOTS_SIZE,
SLIDES_GAP,
SLIDE_TO_SHOW,
CUSTOM_HEIGHT,
FONT_UNIT_TYPES,
COLORS,
DOT_PRESETS,
READMORE_BORDER_SHADOW
} from "./constants/constants";
import {
EBPG_TITLE_TYPOGRAPHY,
EBPG_CONTENT_TYPOGRAPHY,
EBPG_READMORE_TYPOGRAPHY,
EBPG_META_TYPOGRAPHY,
} from "./constants/typographyPrefixConstants";
import objAttributes from "./attributes";
const {
ColorControl,
ResponsiveDimensionsControl,
TypographyDropdown,
BorderShadowControl,
ResponsiveRangeController,
BackgroundControl,
CustomQuery,
MorePosts,
AdvancedControls,
faArrowIcons,
DynamicInputControl,
EBIconPicker
} = window.EBControls;
function Inspector(props) {
const { attributes, setAttributes, slider, setQueryResults } = props;
const {
resOption,
preset,
queryData,
postTerms,
showThumbnail,
thumbnailOverlayColor,
thumbnailOverlayHoverColor,
showTitle,
titleColor,
titleHoverColor,
titleColorStyle,
titleLength,
titleTextAlign,
titleTag,
showContent,
contentColor,
contentTextAlign,
contentLength,
expansionIndicator,
showReadMore,
readmoreText,
readmoreColor,
readmoreBGColor,
readmoreTextAlign,
readmoreHoverColor,
readmoreBGHoverColor,
readmoreColorType,
showMeta,
headerMeta,
footerMeta,
authorPrefix,
datePrefix,
headerMetaTextAlign,
footerMetaTextAlign,
metaColorType,
authorMetaColor,
authorMetaHoverColor,
commonMetaColor,
commonMetaHoverColor,
commonMetaDividerColor,
categoryMetaColor,
categoryMetaHoverColor,
categoryMetaDividerColor,
tagMetaDividerColor,
tagMetaColor,
tagMetaHoverColor,
tagMetaBgColor,
tagMetaBgHoverColor,
dateMetaColor,
dynamicMetaColor,
dynamicMetaBgColor,
styleVerticalAlignment,
leftArrowIcon,
rightArrowIcon,
arrowColorType,
arrowColor,
arrowHoverColor,
dotsColor,
dotsActiveColor,
initialSlide,
speed,
slidesToShow,
isCustomHeight,
pauseOnHover,
vertical,
infinite,
fade,
dots,
autoplaySpeed,
autoplay,
adaptiveHeight,
arrows,
dotPreset,
} = attributes;
const [metaOptions, setMetaOptions] = useState([]);
useEffect(() => {
const meta = [
{ value: "date", label: "Published Date" },
{ value: "author", label: "Author Name" },
{ value: "avatar", label: "Author Avatar" },
];
if (postTerms && Object.keys(postTerms).length > 0) {
Object.keys(postTerms).map((term) => {
meta.push(postTerms[term]);
});
}
//Meta option Filter
const updatedMeta = applyFilters("essential_blocks_post_carousel_meta", meta, queryData?.source);
//Set Meta Options
if (updatedMeta.then) {
updatedMeta.then((resp) => {
setMetaOptions(resp);
});
} else {
setMetaOptions(updatedMeta);
}
}, [postTerms]);
const prevSource = useRef(queryData?.source);
const prevterms = useRef(postTerms);
useEffect(() => {
if (!queryData || !queryData.source) {
return;
}
if (queryData.source != prevSource.current) {
const terms =
prevterms.current && typeof prevterms.current === "object" ? Object.keys(prevterms.current) : [];
let headerMetaVal = headerMeta.length > 0 ? JSON.parse(headerMeta) : [];
headerMetaVal = headerMetaVal.length > 0 && headerMetaVal.filter((item) => !terms.includes(item.value));
let footerMetaVal = footerMeta.length > 0 ? JSON.parse(footerMeta) : [];
footerMetaVal = footerMetaVal.length > 0 && footerMetaVal.filter((item) => !terms.includes(item.value));
setAttributes({
headerMeta: JSON.stringify(headerMetaVal),
footerMeta: JSON.stringify(footerMetaVal),
});
prevSource.current = queryData.source;
}
}, [queryData?.source]);
const resRequiredProps = {
setAttributes,
resOption,
attributes,
objAttributes,
};
// const changePreset = (selected) => {
// //Filter for Pro
// applyFilters("eb_post_carousel_preset_change", selected, attributes, setAttributes);
// setAttributes({ preset: selected });
// switch (selected) {
// case "style-1":
// setAttributes({
// thumbnailBDRBottom: "5",
// thumbnailBDRLeft: "5",
// thumbnailBDRRight: "5",
// thumbnailBDRTop: "5",
// thumbnailBDRUnit: "px",
// thumbnailBDRisLinked: true,
// showContent: true,
// columnBorderShadowRds_Bottom: "0",
// columnBorderShadowRds_Top: "0",
// columnBorderShadowRds_Left: "0",
// columnBorderShadowRds_Right: "0",
// columnBorderShadowRds_Unit: "px",
// columnBorderShadowhOffset: 0,
// columnBorderShadowvOffset: 0,
// columnBorderShadowblur: 0,
// columnBorderShadowspread: 0,
// columnBorderShadowshadowColor: "rgba(197,197,197,1)",
// thumbnailImageSizeRange: 250,
// slideToShowRange: 3,
// columnGapRange: 10,
// columnGapUnit: "px",
// thumbnailImageSizeUnit: "px",
// columnPaddingBottom: "0",
// columnPaddingTop: "0",
// columnPaddingRight: "0",
// columnPaddingLeft: "0",
// columnPaddingUnit: "px",
// footerMetaTextAlign: "left",
// headerMeta: '[{"value":"categories","label":"Categories"}]',
// footerMeta:
// '[{"value":"avatar","label":"Author Avatar"},{"value":"author","label":"Author Name"},{"value":"date","label":"Published Date"}]',
// contentColor: "#333333",
// titleColor: "#333333",
// titleMarginLeft: "0",
// titleMarginRight: "0",
// titleMarginTop: "0",
// titleMarginBottom: "10",
// headerMetaMarginLeft: "0",
// headerMetaMarginRight: "0",
// headerMetaMarginTop: "0",
// headerMetaMarginBottom: "10",
// footerMetaMarginLeft: "0",
// footerMetaMarginRight: "0",
// footerMetaMarginTop: "0",
// footerMetaMarginBottom: "0",
// dateMetaColor: "#9e9e9e",
// thumbnailOverlayColor: "rgba(0 0 0 / 0)",
// thumbnailOverlayHoverColor: "rgba(0 0 0 / 0.5)",
// styleVerticalAlignment: "flex-start",
// dotPreset: "dot-style-1",
// arrows: true,
// dots: true,
// columnBorderShadowborderStyle: "none",
// columnBorderShadowBdr_Top: "1",
// columnBorderShadowBdr_Left: "1",
// columnBorderShadowBdr_Right: "1",
// columnBorderShadowBdr_Bottom: "1",
// columnBorderShadowBdr_isLinked: true,
// columnBorderShadowborderColor: "#000000",
// thumbnailMarginBottom: 0,
// leftArrowIcon: "fas fa-chevron-circle-left",
// rightArrowIcon: "fas fa-chevron-circle-right",
// arrowPositionRange: -25,
// arrowPositionUnit: "px",
// });
// break;
// case "style-2":
// setAttributes({
// thumbnailBDRBottom: "0",
// thumbnailBDRLeft: "0",
// thumbnailBDRRight: "9",
// thumbnailBDRTop: "9",
// thumbnailBDRUnit: "px",
// thumbnailBDRisLinked: false,
// showContent: true,
// columnBorderShadowRds_Bottom: "9",
// columnBorderShadowRds_Top: "9",
// columnBorderShadowRds_Left: "9",
// columnBorderShadowRds_Right: "9",
// columnBorderShadowRds_Unit: "px",
// columnBorderShadowhOffset: 0,
// columnBorderShadowvOffset: 0,
// columnBorderShadowblur: 0,
// columnBorderShadowspread: 0,
// columnBorderShadowshadowColor: "rgba(197,197,197,1)",
// thumbnailImageSizeRange: 200,
// slideToShowRange: 3,
// columnGapRange: 10,
// columnGapUnit: "px",
// thumbnailImageSizeUnit: "px",
// columnPaddingBottom: "20",
// columnPaddingTop: "20",
// columnPaddingRight: "20",
// columnPaddingLeft: "20",
// columnPaddingUnit: "px",
// footerMetaTextAlign: "left",
// headerMeta: '[{"value":"date","label":"Published Date"}]',
// footerMeta: '[{"value":"avatar","label":"Author Avatar"},{"value":"author","label":"Author Name"}]',
// contentColor: "#333333",
// titleColor: "#333333",
// titleMarginLeft: "0",
// titleMarginRight: "0",
// titleMarginTop: "0",
// titleMarginBottom: "10",
// headerMetaMarginLeft: "0",
// headerMetaMarginRight: "0",
// headerMetaMarginTop: "0",
// headerMetaMarginBottom: "10",
// footerMetaMarginLeft: "0",
// footerMetaMarginRight: "0",
// footerMetaMarginTop: "0",
// footerMetaMarginBottom: "0",
// dateMetaColor: "#d18df1",
// thumbnailOverlayColor: "rgba(0 0 0 / 0)",
// thumbnailOverlayHoverColor: "rgba(0 0 0 / 0.5)",
// styleVerticalAlignment: "flex-start",
// dotPreset: "dot-style-1",
// arrows: true,
// dots: true,
// columnBorderShadowborderStyle: "none",
// columnBorderShadowBdr_Top: "1",
// columnBorderShadowBdr_Left: "1",
// columnBorderShadowBdr_Right: "1",
// columnBorderShadowBdr_Bottom: "1",
// columnBorderShadowBdr_isLinked: true,
// columnBorderShadowborderColor: "#000000",
// thumbnailMarginBottom: 0,
// leftArrowIcon: "fas fa-chevron-circle-left",
// rightArrowIcon: "fas fa-chevron-circle-right",
// arrowPositionRange: -25,
// arrowPositionUnit: "px",
// });
// break;
// case "style-3":
// setAttributes({
// thumbnailBDRBottom: "5",
// thumbnailBDRLeft: "5",
// thumbnailBDRRight: "5",
// thumbnailBDRTop: "5",
// thumbnailBDRUnit: "px",
// thumbnailBDRisLinked: true,
// showContent: true,
// columnBorderShadowRds_Bottom: "0",
// columnBorderShadowRds_Top: "0",
// columnBorderShadowRds_Left: "0",
// columnBorderShadowRds_Right: "0",
// columnBorderShadowRds_Unit: "px",
// columnBorderShadowhOffset: 0,
// columnBorderShadowvOffset: 0,
// columnBorderShadowblur: 0,
// columnBorderShadowspread: 0,
// columnBorderShadowshadowColor: "rgba(197,197,197,1)",
// thumbnailImageSizeRange: 165,
// slideToShowRange: 1,
// columnGapRange: 10,
// columnGapUnit: "px",
// thumbnailImageSizeUnit: "px",
// columnPaddingBottom: "0",
// columnPaddingTop: "0",
// columnPaddingRight: "0",
// columnPaddingLeft: "0",
// columnPaddingUnit: "px",
// footerMetaTextAlign: "left",
// headerMeta: '[{"value":"date","label":"Published Date"}]',
// footerMeta: "[]",
// contentColor: "#333333",
// titleColor: "#333333",
// titleMarginLeft: "0",
// titleMarginRight: "0",
// titleMarginTop: "0",
// titleMarginBottom: "10",
// headerMetaMarginLeft: "0",
// headerMetaMarginRight: "0",
// headerMetaMarginTop: "0",
// headerMetaMarginBottom: "10",
// footerMetaMarginLeft: "0",
// footerMetaMarginRight: "0",
// footerMetaMarginTop: "0",
// footerMetaMarginBottom: "0",
// dateMetaColor: "#d18df1",
// thumbnailOverlayColor: "rgba(0 0 0 / 0)",
// thumbnailOverlayHoverColor: "rgba(0 0 0 / 0.5)",
// styleVerticalAlignment: "flex-start",
// dotPreset: "dot-style-1",
// arrows: true,
// dots: true,
// columnBorderShadowborderStyle: "none",
// columnBorderShadowBdr_Top: "1",
// columnBorderShadowBdr_Left: "1",
// columnBorderShadowBdr_Right: "1",
// columnBorderShadowBdr_Bottom: "1",
// columnBorderShadowBdr_isLinked: true,
// columnBorderShadowborderColor: "#000000",
// thumbnailMarginBottom: 0,
// leftArrowIcon: "fas fa-chevron-circle-left",
// rightArrowIcon: "fas fa-chevron-circle-right",
// arrowPositionRange: -25,
// arrowPositionUnit: "px",
// });
// break;
// case "style-4":
// setAttributes({
// thumbnailBDRBottom: "0",
// thumbnailBDRLeft: "0",
// thumbnailBDRRight: "0",
// thumbnailBDRTop: "0",
// thumbnailBDRUnit: "px",
// thumbnailBDRisLinked: true,
// showContent: false,
// columnBorderShadowRds_Bottom: "15",
// columnBorderShadowRds_Top: "15",
// columnBorderShadowRds_Left: "15",
// columnBorderShadowRds_Right: "15",
// columnBorderShadowRds_Unit: "px",
// columnBorderShadowhOffset: 0,
// columnBorderShadowvOffset: 0,
// columnBorderShadowblur: 0,
// columnBorderShadowspread: 0,
// columnBorderShadowshadowColor: "rgba(197,197,197,1)",
// thumbnailImageSizeRange: 350,
// slideToShowRange: 3,
// columnGapRange: 10,
// columnGapUnit: "px",
// thumbnailImageSizeUnit: "px",
// columnPaddingBottom: "30",
// columnPaddingTop: "30",
// columnPaddingRight: "30",
// columnPaddingLeft: "30",
// columnPaddingUnit: "px",
// footerMetaTextAlign: "left",
// headerMeta: '[{"value":"avatar","label":"Author Avatar"}]',
// footerMeta: '[{"value":"date","label":"Published Date"}]',
// contentColor: "#ffffff",
// titleColor: "#ffffff",
// titleMarginLeft: "0",
// titleMarginRight: "",
// titleMarginTop: "0",
// titleMarginBottom: "15",
// headerMetaMarginLeft: "0",
// headerMetaMarginRight: "0",
// headerMetaMarginTop: "0",
// headerMetaMarginBottom: "15",
// footerMetaMarginLeft: "0",
// footerMetaMarginRight: "0",
// footerMetaMarginTop: "0",
// footerMetaMarginBottom: "0",
// authorMetaColor: "#d18df1",
// dateMetaColor: "#FAFAFA",
// thumbnailOverlayColor: "rgba(0 0 0 / 0.45)",
// thumbnailOverlayHoverColor: "rgba(0 0 0 / 0.65)",
// styleVerticalAlignment: "flex-end",
// dotPreset: "dot-style-4",
// arrows: false,
// dots: true,
// columnBorderShadowborderStyle: "none",
// columnBorderShadowBdr_Top: "1",
// columnBorderShadowBdr_Left: "1",
// columnBorderShadowBdr_Right: "1",
// columnBorderShadowBdr_Bottom: "1",
// columnBorderShadowBdr_isLinked: true,
// columnBorderShadowborderColor: "#000000",
// thumbnailMarginBottom: 0,
// leftArrowIcon: "fas fa-caret-left",
// rightArrowIcon: "fas fa-caret-right",
// arrowPositionRange: -25,
// arrowPositionUnit: "px",
// });
// break;
// default:
// return false;
// }
// };
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: "Styles",
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={__("Carousel", "essential-blocks")} initialOpen={true}>
<ToggleControl
label={__("Show Arrows", "essential-blocks")}
checked={arrows}
onChange={() => {
setAttributes({
arrows: !arrows,
});
}}
/>
<ToggleControl
label={__("Equal Height", "essential-blocks")}
checked={adaptiveHeight}
onChange={() => {
setAttributes({
adaptiveHeight: !adaptiveHeight,
});
}}
/>
<ToggleControl
label={__("Autoplay", "essential-blocks")}
checked={autoplay}
onChange={() => {
autoplay ? slider.current.slickPlay() : slider.current.slickPause();
setAttributes({
autoplay: !autoplay,
});
}}
/>
<ToggleControl
label={__("Dots", "essential-blocks")}
checked={dots}
onChange={() => setAttributes({ dots: !dots })}
/>
<ToggleControl
label={__("Infinite", "essential-blocks")}
checked={infinite}
onChange={() =>
setAttributes({
infinite: !infinite,
})
}
/>
<ToggleControl
label={__("Pause on Hover", "essential-blocks")}
checked={pauseOnHover}
onChange={() =>
setAttributes({
pauseOnHover: !pauseOnHover,
})
}
/>
<ResponsiveRangeController
baseLabel={__("Slides to Show", "essential-blocks")}
controlName={SLIDE_TO_SHOW}
resRequiredProps={resRequiredProps}
units={[]}
min={1}
max={8}
step={1}
/>
{autoplay && (
<RangeControl
label={__("Autoplay Speed", "essential-blocks")}
value={autoplaySpeed}
onChange={(autoplaySpeed) =>
setAttributes({
autoplaySpeed,
})
}
min={0}
max={8000}
/>
)}
<RangeControl
label={__("Animation Speed", "essential-blocks")}
value={speed}
onChange={(speed) => setAttributes({ speed })}
min={0}
max={3000}
/>
{dots && (
<SelectControl
label={__("Dot Preset", "essential-blocks")}
value={dotPreset}
options={DOT_PRESETS}
onChange={(dotPreset) => setAttributes({ dotPreset })}
/>
)}
</PanelBody>
<PanelBody title={__("Layout", "essential-blocks")} initialOpen={false}>
{/* <SelectControl
label={__("Template", "essential-blocks")}
value={preset}
options={PRESETS}
onChange={(selected) => changePreset(selected)}
/> */}
<ToggleControl
label={__("Show Thumbnail?")}
checked={showThumbnail}
onChange={() => {
setAttributes({
showThumbnail: !showThumbnail,
});
}}
/>
{showThumbnail && (
<>
<ResponsiveRangeController
baseLabel={__("Thumbnail Height", "essential-blocks")}
controlName={THUMBNAIL_IMAGE_SIZE}
resRequiredProps={resRequiredProps}
units={HEIGHT_UNIT_TYPES}
min={1}
max={500}
step={1}
/>
{preset === "style-3" && (
<ResponsiveRangeController
baseLabel={__("Thumbnail Width", "essential-blocks")}
controlName={COLUMN_MEDIA_WIDTH}
resRequiredProps={resRequiredProps}
units={[
{
label: "%",
value: "%",
},
]}
min={0}
max={100}
step={1}
/>
)}
</>
)}
{preset === "style-4" && preset === "pro-style-5" && (
<BaseControl
label={__("Content Vertical Alignment", "essential-blocks")}
id="essential-blocks"
>
<ButtonGroup id="essential-blocks">
{VERTICAL_POSITION.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={styleVerticalAlignment === item.value}
isSecondary={styleVerticalAlignment !== item.value}
onClick={() =>
setAttributes({
styleVerticalAlignment: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
</BaseControl>
)}
<ToggleControl
label={__("Show Title?")}
checked={showTitle}
onChange={() => {
setAttributes({
showTitle: !showTitle,
});
}}
/>
{showTitle && (
<>
<SelectControl
label={__("Title Tag", "essential-blocks")}
value={titleTag}
options={TITLE_TAGS}
onChange={(value) => {
setAttributes({
titleTag: value,
});
}}
/>
<RangeControl
label="Title Words"
value={titleLength}
onChange={(value) =>
setAttributes({
titleLength: value,
})
}
min={-1}
max={100}
/>
</>
)}
<ToggleControl
label={__("Show Excerpt?")}
checked={showContent}
onChange={() => {
setAttributes({
showContent: !showContent,
});
}}
/>
{showContent && (
<>
<RangeControl
label="Excerpt Words"
value={contentLength}
onChange={(value) =>
setAttributes({
contentLength: value,
})
}
min={-1}
max={100}
/>
<TextControl
label="Expansion Indicator"
type={"text"}
value={expansionIndicator}
onChange={(text) =>
setAttributes({
expansionIndicator: text,
})
}
/>
</>
)}
<ToggleControl
label={__("Show Read More Button?")}
checked={showReadMore}
onChange={() => {
setAttributes({
showReadMore: !showReadMore,
});
}}
/>
{showReadMore && (
<>
<TextControl
label="Button Text"
type={"text"}
value={readmoreText}
onChange={(text) =>
setAttributes({
readmoreText: text,
})
}
/>
</>
)}
<ToggleControl
label={__("Show Meta?")}
checked={showMeta}
onChange={() => {
setAttributes({
showMeta: !showMeta,
});
}}
/>
{showMeta && (
<>
<div className="eb-control-item-wrapper">
<PanelRow>Header Meta</PanelRow>
<Select2
name="select-header-meta"
value={headerMeta.length > 0 ? JSON.parse(headerMeta) : ""}
onChange={(selected) =>
setAttributes({
headerMeta: JSON.stringify(selected),
})
}
options={metaOptions}
isMulti="true"
/>
</div>
<div className="eb-control-item-wrapper">
<PanelRow>Footer Meta</PanelRow>
<Select2
name="select-footer-meta"
value={footerMeta.length > 0 ? JSON.parse(footerMeta) : ""}
onChange={(selected) =>
setAttributes({
footerMeta: JSON.stringify(selected),
})
}
options={metaOptions}
isMulti="true"
/>
</div>
<DynamicInputControl
label={__(
"Author Prefix",
"essential-blocks"
)}
help={__(
"Example: by John Doe",
"essential-blocks"
)}
attrName="authorPrefix"
inputValue={authorPrefix}
setAttributes={
setAttributes
}
onChange={(text) =>
setAttributes({
authorPrefix: text,
})
}
/>
<DynamicInputControl
label={__(
"Published Date Prefix",
"essential-blocks"
)}
help={__(
"Example: on 01/01/2023",
"essential-blocks"
)}
attrName="datePrefix"
inputValue={datePrefix}
setAttributes={
setAttributes
}
onChange={(text) =>
setAttributes({
datePrefix: text,
})
}
/>
</>
)}
</PanelBody>
<CustomQuery
attributes={attributes}
setAttributes={setAttributes}
setQueryResults={setQueryResults}
/>
</>
)}
{tab.name === "styles" && (
<>
<PanelBody title={__("Carousel", "essential-blocks")} initialOpen={true}>
<ResponsiveRangeController
baseLabel={__("Slides Gap", "essential-blocks")}
controlName={SLIDES_GAP}
resRequiredProps={resRequiredProps}
units={[]}
min={0}
max={100}
step={1}
/>
</PanelBody>
<PanelBody title={__("Columns", "essential-blocks")} initialOpen={false}>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={COLUMN_PADDING}
baseLabel="Padding"
/>
<PanelBody title={__("Background", "essential-blocks")} initialOpen={false}>
<BackgroundControl
controlName={COLUMN_BG}
resRequiredProps={resRequiredProps}
noOverlay
/>
</PanelBody>
<PanelBody title={__("Border")} initialOpen={false}>
<BorderShadowControl
controlName={COLUMN_BORDER_SHADOW}
resRequiredProps={resRequiredProps}
noShadow
// noBorder
/>
</PanelBody>
</PanelBody>
{showThumbnail && (
<PanelBody title={__("Thumbnail", "essential-blocks")} initialOpen={false}>
{preset != "style-4" ||
(preset != "pro-style-5" && (
<>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={THUMBNAIL_BORDER_RADIUS}
baseLabel="Border Radius"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={THUMBNAIL_MARGIN}
baseLabel="Margin"
/>
</>
))}
<ColorControl
label={__("Overlay Color", "essential-blocks")}
color={thumbnailOverlayColor}
onChange={(color) =>
setAttributes({
thumbnailOverlayColor: color,
})
}
/>
<ColorControl
label={__("Overlay Hover Color", "essential-blocks")}
color={thumbnailOverlayHoverColor}
onChange={(color) =>
setAttributes({
thumbnailOverlayHoverColor: color,
})
}
/>
</PanelBody>
)}
{showTitle && (
<PanelBody title={__("Title", "essential-blocks")} initialOpen={false}>
<ButtonGroup className="eb-inspector-btn-group">
{NORMAL_HOVER.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={titleColorStyle === item.value}
isSecondary={titleColorStyle !== item.value}
onClick={() =>
setAttributes({
titleColorStyle: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
{titleColorStyle === "normal" && (
<ColorControl
label={__("Color", "essential-blocks")}
color={titleColor}
onChange={(newColor) =>
setAttributes({
titleColor: newColor,
})
}
/>
)}
{titleColorStyle === "hover" && (
<ColorControl
label={__("Hover Color", "essential-blocks")}
color={titleHoverColor}
onChange={(newColor) =>
setAttributes({
titleHoverColor: newColor,
})
}
/>
)}
<BaseControl
label={__("Alignment", "essential-blocks")}
id="essential-blocks"
>
<ButtonGroup id="essential-blocks">
{TEXT_ALIGN.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={titleTextAlign === item.value}
isSecondary={titleTextAlign !== item.value}
onClick={() =>
setAttributes({
titleTextAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
</BaseControl>
<TypographyDropdown
baseLabel={__("Typography", "essential-blocks")}
typographyPrefixConstant={EBPG_TITLE_TYPOGRAPHY}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={TITLE_MARGIN}
baseLabel="Margin"
/>
</PanelBody>
)}
{showContent && (
<PanelBody title={__("Excerpt", "essential-blocks")} initialOpen={false}>
<ColorControl
label={__("Color", "essential-blocks")}
color={contentColor}
onChange={(color) =>
setAttributes({
contentColor: color,
})
}
/>
<BaseControl
label={__("Alignment", "essential-blocks")}
id="essential-blocks"
>
<ButtonGroup id="essential-blocks">
{TEXT_ALIGN.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={contentTextAlign === item.value}
isSecondary={contentTextAlign !== item.value}
onClick={() =>
setAttributes({
contentTextAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
</BaseControl>
<TypographyDropdown
baseLabel={__("Typography", "essential-blocks")}
typographyPrefixConstant={EBPG_CONTENT_TYPOGRAPHY}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={CONTENT_MARGIN}
baseLabel="Margin"
/>
</PanelBody>
)}
{(preset != "style-4" || preset != "pro-style-5") && showReadMore && (
<PanelBody
title={__("Read More Button", "essential-blocks")}
initialOpen={false}
>
<ButtonGroup className="eb-inspector-btn-group">
{NORMAL_HOVER.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={readmoreColorType === item.value}
isSecondary={readmoreColorType !== item.value}
onClick={() =>
setAttributes({
readmoreColorType: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
{readmoreColorType === "normal" && (
<>
<ColorControl
label={__("Color", "essential-blocks")}
color={readmoreColor}
onChange={(newColor) =>
setAttributes({
readmoreColor: newColor,
})
}
/>
<ColorControl
label={__("Background Color", "essential-blocks")}
color={readmoreBGColor}
onChange={(newColor) =>
setAttributes({
readmoreBGColor: newColor,
})
}
/>
</>
)}
{readmoreColorType === "hover" && (
<>
<ColorControl
label={__("Hover Color", "essential-blocks")}
color={readmoreHoverColor}
onChange={(newColor) =>
setAttributes({
readmoreHoverColor: newColor,
})
}
/>
<ColorControl
label={__("Hover Background Color", "essential-blocks")}
color={readmoreBGHoverColor}
onChange={(newColor) =>
setAttributes({
readmoreBGHoverColor: newColor,
})
}
/>
</>
)}
<BaseControl
label={__("Alignment", "essential-blocks")}
id="essential-blocks"
>
<ButtonGroup id="essential-blocks">
{TEXT_ALIGN.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={readmoreTextAlign === item.value}
isSecondary={readmoreTextAlign !== item.value}
onClick={() =>
setAttributes({
readmoreTextAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
</BaseControl>
<TypographyDropdown
baseLabel={__("Typography", "essential-blocks")}
typographyPrefixConstant={EBPG_READMORE_TYPOGRAPHY}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={READMORE_MARGIN}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={READMORE_PADDING}
baseLabel="Padding"
/>
<PanelBody title={__("Border & Shadow")} initialOpen={false}>
<BorderShadowControl
controlName={READMORE_BORDER_SHADOW}
resRequiredProps={resRequiredProps}
noShadow
// noBorder
/>
</PanelBody>
</PanelBody>
)}
{showMeta && (
<PanelBody title={__("Meta", "essential-blocks")} initialOpen={false}>
<BaseControl
label={__("Header Meta Alignment", "essential-blocks")}
id="essential-blocks"
>
<ButtonGroup id="essential-blocks">
{CONTENT_POSITION.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={headerMetaTextAlign === item.value}
isSecondary={headerMetaTextAlign !== item.value}
onClick={() =>
setAttributes({
headerMetaTextAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
</BaseControl>
<ResponsiveRangeController
baseLabel={__("Header Meta Gap", "essential-blocks")}
controlName={HEADER_META_SPACE}
resRequiredProps={resRequiredProps}
units={UNIT_TYPES}
min={1}
max={100}
step={1}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={HEADER_META_MARGIN}
baseLabel="Header Meta Margin"
/>
<BaseControl
label={__("Footer Meta Alignment", "essential-blocks")}
id="essential-blocks"
>
<ButtonGroup id="essential-blocks">
{CONTENT_POSITION.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={footerMetaTextAlign === item.value}
isSecondary={footerMetaTextAlign !== item.value}
onClick={() =>
setAttributes({
footerMetaTextAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
</BaseControl>
<ResponsiveRangeController
baseLabel={__("Footer Meta Gap", "essential-blocks")}
controlName={FOOTER_META_SPACE}
resRequiredProps={resRequiredProps}
units={UNIT_TYPES}
min={1}
max={100}
step={1}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={FOOTER_META_MARGIN}
baseLabel="Footer Meta Margin"
/>
<ButtonGroup className="eb-inspector-btn-group">
{NORMAL_HOVER.map((item, index) => (
<Button
key={index}
// isLarge
isPrimary={metaColorType === item.value}
isSecondary={metaColorType !== item.value}
onClick={() =>
setAttributes({
metaColorType: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
{metaColorType === "normal" && (
<>
<ColorControl
label={__("Author Color", "essential-blocks")}
color={authorMetaColor}
onChange={(newColor) =>
setAttributes({
authorMetaColor: newColor,
})
}
/>
<ColorControl
label={__("Date Color", "essential-blocks")}
color={dateMetaColor}
onChange={(newColor) =>
setAttributes({
dateMetaColor: newColor,
})
}
/>
<ColorControl
label={__("Common Color", "essential-blocks")}
color={commonMetaColor}
onChange={(newColor) =>
setAttributes({
commonMetaColor: newColor,
})
}
/>
<ColorControl
label={__("Common Divider Color", "essential-blocks")}
color={commonMetaDividerColor}
onChange={(newColor) =>
setAttributes({
commonMetaDividerColor: newColor,
})
}
/>
<ColorControl
label={__("Category Color", "essential-blocks")}
color={categoryMetaColor}
onChange={(newColor) =>
setAttributes({
categoryMetaColor: newColor,
})
}
/>
<ColorControl
label={__("Category Divider Color", "essential-blocks")}
color={categoryMetaDividerColor}
onChange={(newColor) =>
setAttributes({
categoryMetaDividerColor: newColor,
})
}
/>
<ColorControl
label={__("Tag Color", "essential-blocks")}
color={tagMetaColor}
onChange={(newColor) =>
setAttributes({
tagMetaColor: newColor,
})
}
/>
<ColorControl
label={__("Tag BG Color", "essential-blocks")}
color={tagMetaBgColor}
onChange={(newColor) =>
setAttributes({
tagMetaBgColor: newColor,
})
}
/>
<ColorControl
label={__("Tag Divider Color", "essential-blocks")}
color={tagMetaDividerColor}
onChange={(newColor) =>
setAttributes({
tagMetaDividerColor: newColor,
})
}
/>
<ColorControl
label={__("Dynamic Data Color", "essential-blocks")}
color={dynamicMetaColor}
onChange={(newColor) =>
setAttributes({
dynamicMetaColor: newColor,
})
}
/>
<ColorControl
label={__("Dynamic Data BG Color", "essential-blocks")}
color={dynamicMetaBgColor}
onChange={(newColor) =>
setAttributes({
dynamicMetaBgColor: newColor,
})
}
/>
</>
)}
{metaColorType === "hover" && (
<>
<ColorControl
label={__("Author Hover Color", "essential-blocks")}
color={authorMetaHoverColor}
onChange={(newColor) =>
setAttributes({
authorMetaHoverColor: newColor,
})
}
/>
<ColorControl
label={__("Common Hover Color", "essential-blocks")}
color={commonMetaHoverColor}
onChange={(newColor) =>
setAttributes({
commonMetaHoverColor: newColor,
})
}
/>
<ColorControl
label={__("Category Hover Color", "essential-blocks")}
color={categoryMetaHoverColor}
onChange={(newColor) =>
setAttributes({
categoryMetaHoverColor: newColor,
})
}
/>
<ColorControl
label={__("Tag Hover Color", "essential-blocks")}
color={tagMetaHoverColor}
onChange={(newColor) =>
setAttributes({
tagMetaHoverColor: newColor,
})
}
/>
<ColorControl
label={__("Tag BG Hover Color", "essential-blocks")}
color={tagMetaBgHoverColor}
onChange={(newColor) =>
setAttributes({
tagMetaBgHoverColor: newColor,
})
}
/>
</>
)}
<TypographyDropdown
baseLabel={__("Meta Typography", "essential-blocks")}
typographyPrefixConstant={EBPG_META_TYPOGRAPHY}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={AVATAR_BORDER_RADIUS}
baseLabel="Avatar Border Radius"
/>
</PanelBody>
)}
{arrows && (
<PanelBody title={__("Arrow", "essential-blocks")} initialOpen={false}>
<EBIconPicker
value={leftArrowIcon}
onChange={(icon) =>
setAttributes({
leftArrowIcon: icon,
})
}
title={__("Left Arrow Icon", "essential-blocks")}
icons={{ fontAwesome: faArrowIcons }}
disableDashicon={true}
/>
<EBIconPicker
value={rightArrowIcon}
onChange={(icon) =>
setAttributes({
rightArrowIcon: icon,
})
}
title={__("Right Arrow Icon", "essential-blocks")}
icons={{ fontAwesome: faArrowIcons }}
disableDashicon={true}
/>
<ButtonGroup className="eb-inspector-btn-group">
{NORMAL_HOVER.map((item, index) => (
<Button
key={index}
isPrimary={arrowColorType === item.value}
isSecondary={arrowColorType !== item.value}
onClick={() =>
setAttributes({
arrowColorType: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
{arrowColorType === "normal" && (
<ColorControl
label={__("Color", "essential-blocks")}
color={arrowColor}
onChange={(newColor) =>
setAttributes({
arrowColor: newColor,
})
}
/>
)}
{arrowColorType === "hover" && (
<ColorControl
label={__("Color", "essential-blocks")}
color={arrowHoverColor}
onChange={(newColor) =>
setAttributes({
arrowHoverColor: newColor,
})
}
/>
)}
<ResponsiveRangeController
baseLabel={__("Arrow Size", "essential-blocks")}
controlName={ARROW_SIZE}
resRequiredProps={resRequiredProps}
units={FONT_UNIT_TYPES}
min={1}
max={50}
step={1}
/>
<ResponsiveRangeController
baseLabel={__("Arrow Position", "essential-blocks")}
controlName={ARROW_POSITION}
resRequiredProps={resRequiredProps}
units={UNIT_TYPES}
min={-100}
max={100}
step={1}
/>
</PanelBody>
)}
{dots && (
<PanelBody title={__("Dot", "essential-blocks")} initialOpen={false}>
<ColorControl
label={__("Color", "essential-blocks")}
color={dotsColor}
onChange={(color) =>
setAttributes({
dotsColor: color,
})
}
/>
<ColorControl
label={__("Active Color", "essential-blocks")}
color={dotsActiveColor}
onChange={(color) =>
setAttributes({
dotsActiveColor: color,
})
}
/>
<ResponsiveRangeController
baseLabel={__(
"Dots Size",
"essential-blocks"
)}
controlName={DOTS_SIZE}
resRequiredProps={
resRequiredProps
}
units={FONT_UNIT_TYPES}
min={1}
max={50}
step={1}
/>
<ResponsiveRangeController
baseLabel={__(
"Dots Gap",
"essential-blocks"
)}
controlName={DOTS_GAP}
resRequiredProps={
resRequiredProps
}
units={UNIT_TYPES}
min={0}
max={50}
step={1}
/>
<ResponsiveRangeController
baseLabel={__(
"Dots Size",
"essential-blocks"
)}
controlName={DOTS_SIZE}
resRequiredProps={
resRequiredProps
}
units={FONT_UNIT_TYPES}
min={1}
max={50}
step={1}
/>
<ResponsiveRangeController
baseLabel={__(
"Dots Gap",
"essential-blocks"
)}
controlName={DOTS_GAP}
resRequiredProps={
resRequiredProps
}
units={UNIT_TYPES}
min={0}
max={50}
step={1}
/>
<ResponsiveRangeController
baseLabel={__(
"Dots Position (PX)",
"essential-blocks"
)}
controlName={DOTS_POSITION}
resRequiredProps={resRequiredProps}
min={-100}
max={100}
step={1}
noUnits
/>
</PanelBody>
)}
</>
)}
{tab.name === "advance" && (
<>
<PanelBody>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={WRAPPER_MARGIN}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={WRAPPER_PADDING}
baseLabel="Padding"
/>
</PanelBody>
<PanelBody title={__("Background", "essential-blocks")} initialOpen={false}>
<BackgroundControl
controlName={WRAPPER_BG}
resRequiredProps={resRequiredProps}
noOverlay
/>
</PanelBody>
<PanelBody title={__("Border & Shadow")} initialOpen={false}>
<BorderShadowControl
controlName={WRAPPER_BORDER_SHADOW}
resRequiredProps={resRequiredProps}
// noShadow
// noBorder
/>
</PanelBody>
<AdvancedControls attributes={attributes} setAttributes={setAttributes} />
</>
)}
</div>
)}
</TabPanel>
</div>
</InspectorControls>
);
}
export default Inspector;