/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import {
PanelBody,
ToggleControl,
SelectControl,
TextControl,
Button,
ButtonGroup,
BaseControl,
TabPanel,
__experimentalDivider as Divider,
} from "@wordpress/components";
/**
* Internal dependencies
*/
import {
TWOUNITS,
ICON_POSITION,
ALIGNMENT,
buttonIconSpacing,
buttonIconSize,
buttonPadding,
buttonMargin,
wrapperPadding,
wrapperMargin,
titlePadding,
titleMargin,
priceCurrencyMargin,
buttonBorderShadow,
buttonBackgroundControl,
priceTableBackground,
wrapperBorderShadow,
iconBorderShadow,
ribbonBorderShadow,
headerIconSize,
headerIconWidth,
headerIconHeight,
salepriceCurrencyMargin,
featuresIconSize,
RIBBON_ALIGNMENT_HORIZONTAL,
RIBBON_ALIGNMENT_VERTICAL,
} from "./constants";
import {
typoPrefix_button,
typoPrefix_title,
typoPrefix_subtitle,
typoPrefix_saleprice_currency,
typoPrefix_price_title,
typoPrefix_price_currency,
typoPrefix_saleprice,
typoPrefix_pricing_period,
typoPrefix_features_text,
typoPrefix_ribbon,
} from "./constants/typographyPrefixConstants";
import objAttributes from "./attributes";
const {
ColorControl,
ResponsiveRangeController,
ResponsiveDimensionsControl,
TypographyDropdown,
BackgroundControl,
BorderShadowControl,
AdvancedControls,
DynamicInputControl,
EBIconPicker,
SortControl
} = window.EBControls;
const Inspector = ({ attributes, setAttributes }) => {
const {
resOption,
pricingStyle,
title,
showSubtitle,
subtitle,
showHeaderIcon,
headerIcon,
showTitleLine,
mainPrice,
showOnSale,
salePrice,
priceCurrency,
currencyPlacement,
pricePeriod,
periodSeparator,
hideFeatures,
showButton,
buttonIcon,
buttonIconPosition,
buttonText,
buttonURL,
buttonTextColor,
hoverTextColor,
titleTextColor,
titleLineColor,
titleBackgroundColor,
subtitleTextColor,
showIconBackground,
iconBackgroundColor,
iconBackgroundHoverColor,
iconColor,
iconHoverColor,
priceTextColor,
priceCurrencyTextColor,
salePriceTextColor,
salepriceCurrencyTextColor,
pricingPeriodTextColor,
featuresTextColor,
showRibbon,
ribbonStyle,
ribbonText,
ribbonColor,
ribbonBackgroundColor,
featuresAlignment,
buttonAlignment,
headerAlignment,
priceAlignment,
iconAlignment,
ribbonAlignHorizontal,
ribbonAlignVertical,
newWindow,
showFeatureLine,
pricingTopBgColor,
showFeatureIcon,
featureIcon
} = attributes;
const resRequiredProps = {
setAttributes,
resOption,
attributes,
objAttributes,
};
const onFeatureAdd = () => {
const count = attributes.features.length + 1;
const features = [
...attributes.features,
{
icon: "fas fa-check",
text: `Feature ${count}`,
color: "var(--eb-global-primary-color)",
},
];
setAttributes({ features });
};
// const handlePricingStyle = (pricingStyle) => {
// setAttributes({ pricingStyle });
// switch (pricingStyle) {
// case "style-1":
// setAttributes({
// showSubtitle: false,
// showHeaderIcon: false,
// iconColor: "#000000",
// iconHoverColor: "#000000",
// titleTextColor: "#000000",
// priceCurrencyTextColor: "#000000",
// priceTextColor: "#000000",
// pricingPeriodTextColor: "#999999",
// ribbonBackgroundColor: "#00c853",
// // ribbonColor: "#7967ff",
// btnBgbackgroundColor: "#00c853",
// });
// defaultSubtitle ? setAttributes({ showSubtitle: true }) : "";
// defaultHeaderIcon
// ? setAttributes({ showHeaderIcon: true })
// : "";
// defaultTitleLine === undefined
// ? setAttributes({ showTitleLine: true })
// : "";
// break;
// case "style-2":
// setAttributes({
// iconColor: "#000000",
// iconHoverColor: "#000000",
// titleTextColor: "#000000",
// priceCurrencyTextColor: "#000000",
// priceTextColor: "#000000",
// pricingPeriodTextColor: "#999999",
// ribbonBackgroundColor: "#00c853",
// // ribbonColor: "#7967ff",
// btnBgbackgroundColor: "#00c853",
// });
// defaultSubtitle === undefined
// ? setAttributes({ showSubtitle: true })
// : "";
// defaultHeaderIcon === undefined
// ? setAttributes({ showHeaderIcon: true })
// : "";
// defaultTitleLine === undefined
// ? setAttributes({ showTitleLine: false })
// : "";
// break;
// case "style-3":
// setAttributes({
// showSubtitle: false,
// showHeaderIcon: false,
// iconColor: "#000000",
// iconHoverColor: "#000000",
// titleTextColor: "#000000",
// priceCurrencyTextColor: "#000000",
// priceTextColor: "#000000",
// pricingPeriodTextColor: "#999999",
// ribbonBackgroundColor: "#00c853",
// // ribbonColor: "#7967ff",
// btnBgbackgroundColor: "#00c853",
// });
// defaultSubtitle ? setAttributes({ showSubtitle: true }) : "";
// defaultHeaderIcon
// ? setAttributes({ showHeaderIcon: true })
// : "";
// defaultTitleLine === undefined
// ? setAttributes({ showTitleLine: true })
// : "";
// break;
// case "style-4":
// setAttributes({
// iconColor: "#ffffff",
// iconHoverColor: "#ffffff",
// titleTextColor: "#ffffff",
// priceCurrencyTextColor: "#ffffff",
// priceTextColor: "#ffffff",
// pricingPeriodTextColor: "#ffffff",
// ribbonBackgroundColor: "#cc5ae7",
// // ribbonColor: "#7967ff",
// btnBgbackgroundColor: "#7967ff",
// });
// defaultHeaderIcon === undefined
// ? setAttributes({ showHeaderIcon: true })
// : "";
// break;
// default:
// return false;
// }
// };
const getFeaturesComponents = () => {
const onFeatureChange = (key, value, position) => {
const newFeature = { ...attributes.features[position] };
const newFeatureList = [...attributes.features];
newFeatureList[position] = newFeature;
newFeatureList[position][key] = value;
setAttributes({ features: newFeatureList });
};
return attributes.features.map((each, i) => (
<div key={i}>
<TextControl
onChange={(value) => onFeatureChange("text", value, i)}
label={__(
"Text",
"essential-blocks"
)}
value={each.text}
/>
<ToggleControl
label={__("Link", "essential-blocks")}
checked={each.clickable === "true"}
onChange={(value) =>
onFeatureChange("clickable", value.toString(), i)
}
/>
{each.clickable === "true" && (
<TextControl
label={__("Link", "essential-blocks")}
value={each.link}
onChange={(value) => onFeatureChange("link", value, i)}
/>
)}
{featureIcon && (
<>
<EBIconPicker
value={each.icon}
onChange={(value) => onFeatureChange("icon", value, i)}
/>
{each.icon && (
<ColorControl
label={__("Icon Color", "essential-blocks")}
color={each.color}
onChange={(value) => onFeatureChange("color", value, i)}
/>
)}
</>
)}
</div>
))
}
return (
<InspectorControls key="controls">
<div className="eb-panel-control">
<TabPanel
className="eb-parent-tab-panel"
activeClass="active-tab"
tabs={[
{
name: "general",
title: __("General", "essential-blocks"),
className: "eb-tab general",
},
{
name: "styles",
title: __("Style", "essential-blocks"),
className: "eb-tab styles",
},
{
name: "advance",
title: __("Advanced", "essential-blocks"),
className: "eb-tab advance",
},
]}
>
{(tab) => (
<div className={"eb-tab-controls" + tab.name}>
{tab.name === "general" && (
<>
<PanelBody
title={__(
"Settings",
"essential-blocks"
)}
>
{/* <SelectControl
label={__(
"Pricing Preset",
"essential-blocks"
)}
value={pricingStyle}
options={[
{
label: "Default",
value: "style-1",
},
{
label: "Style 2",
value: "style-2",
},
{
label: "Style 3",
value: "style-3",
},
{
label: "Style 4 (New)",
value: "style-4",
},
]}
onChange={(pricingStyle) =>
handlePricingStyle(pricingStyle)
}
/> */}
<TextControl
label={__(
"Title",
"essential-blocks"
)}
value={title}
onChange={(newTitle) =>
setAttributes({
title: newTitle,
})
}
/>
<ToggleControl
label={__("Show Subtitle?")}
checked={showSubtitle}
onChange={() => {
setAttributes({
showSubtitle: !showSubtitle,
defaultSubtitle: !showSubtitle,
});
}}
/>
{showSubtitle && (
<TextControl
label={__(
"Sub Title",
"essential-blocks"
)}
value={subtitle}
onChange={(newSubtitle) =>
setAttributes({
subtitle: newSubtitle,
})
}
/>
)}
<ToggleControl
label={__("Show Icon?")}
checked={showHeaderIcon}
onChange={() => {
setAttributes({
showHeaderIcon: !showHeaderIcon,
defaultHeaderIcon: !showHeaderIcon,
});
}}
/>
{showHeaderIcon && (
<EBIconPicker
value={headerIcon}
onChange={(icon) =>
setAttributes({
headerIcon: icon,
})
}
title={__("Icon", "essential-blocks")}
/>
)}
{pricingStyle !== "style-4" && (
<ToggleControl
label={__("Show title line?")}
checked={showTitleLine}
onChange={() => {
setAttributes({
showTitleLine: !showTitleLine,
defaultTitleLine: !showTitleLine,
});
}}
/>
)}
</PanelBody>
<PanelBody
title={__("Price", "essential-blocks")}
initialOpen={false}
>
<TextControl
label={__(
"Price",
"essential-blocks"
)}
value={mainPrice}
onChange={(newPrice) =>
setAttributes({
mainPrice: newPrice,
})
}
/>
<ToggleControl
label={__("On Sale?")}
checked={showOnSale}
onChange={() => {
setAttributes({
showOnSale: !showOnSale,
});
}}
/>
{showOnSale && (
<TextControl
label={__(
"Sale Price",
"essential-blocks"
)}
value={salePrice}
onChange={(newsalePrice) =>
setAttributes({
salePrice: newsalePrice,
})
}
/>
)}
<TextControl
label={__(
"Price Currency",
"essential-blocks"
)}
value={priceCurrency}
onChange={(newPriceCurrency) =>
setAttributes({
priceCurrency: newPriceCurrency,
})
}
/>
<SelectControl
label={__(
"Currency Placement",
"essential-blocks"
)}
value={currencyPlacement}
options={[
{
label: "Left",
value: "left",
},
{
label: "Right",
value: "right",
},
]}
onChange={(currencyPlacement) => {
setAttributes({
currencyPlacement,
});
}}
/>
<TextControl
label={__("Price Period (per)")}
value={pricePeriod}
onChange={(pricePeriod) =>
setAttributes({ pricePeriod })
}
/>
<TextControl
label={__(
"Period Separator",
"essential-blocks"
)}
value={periodSeparator}
onChange={(periodSeparator) =>
setAttributes({
periodSeparator,
})
}
/>
<Divider />
</PanelBody>
<PanelBody
title={__(
"Features",
"essential-blocks"
)}
initialOpen={false}
>
<ToggleControl
label={__("Hide Features?")}
checked={hideFeatures}
onChange={() => {
setAttributes({
hideFeatures: !hideFeatures,
});
}}
/>
{hideFeatures !== true && (
<>
<ToggleControl
label={__("Show line?")}
checked={showFeatureLine}
onChange={() => {
setAttributes({
showFeatureLine: !showFeatureLine,
});
}}
/>
<ToggleControl
label={__("Show Icon?")}
checked={showFeatureIcon}
onChange={() => {
setAttributes({
showFeatureIcon: !showFeatureIcon,
});
}}
/>
{/*<SortableFeatures
features={
attributes.features
}
featureIcon={
attributes.showFeatureIcon
}
setAttributes={
setAttributes
}
/>*/}
{/*<Button
className="eb-pricebox-feature-button"
label={__(
"Add feature",
"essential-blocks"
)}
icon="plus-alt"
onClick={onFeatureAdd}
>
<span className="eb-pricebox-add-button-label">
{__(
"Add Feature",
"essential-blocks"
)}
</span>
</Button>*/}
<SortControl
items={attributes.features}
labelKey={'text'}
onSortEnd={features => setAttributes({ features })}
onDeleteItem={index => {
setAttributes({ features: attributes.features.filter((each, i) => i !== index) })
}}
hasSettings={true}
settingsComponents={getFeaturesComponents()}
hasAddButton={true}
onAddItem={onFeatureAdd}
addButtonText={__("Add Features", "essential-blocks")}
></SortControl>
</>
)}
</PanelBody>
<PanelBody
title={__("Button", "essential-blocks")}
initialOpen={false}
>
<ToggleControl
label={__("Display Button?")}
checked={showButton}
onChange={() => {
setAttributes({
showButton: !showButton,
});
}}
/>
<EBIconPicker
value={buttonIcon}
onChange={(icon) =>
setAttributes({
buttonIcon: icon,
})
}
title={__("Button Icon", "essential-blocks")}
/>
<BaseControl
label={__(
"Icon Position",
"essential-blocks"
)}
>
<ButtonGroup>
{RIBBON_ALIGNMENT_HORIZONTAL.map(
(item, index) => (
<Button
// isLarge
key={index}
isPrimary={
buttonIconPosition ===
item.value
}
isSecondary={
buttonIconPosition !==
item.value
}
onClick={() =>
setAttributes({
buttonIconPosition:
item.value,
})
}
>
{item.label}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<ResponsiveRangeController
baseLabel={__(
"Icon Spacing",
"essential-blocks"
)}
controlName={buttonIconSpacing}
resRequiredProps={resRequiredProps}
min={1}
max={60}
step={1}
noUnits
/>
<DynamicInputControl
label={__(
"Button Text",
"essential-blocks"
)}
attrName="buttonText"
inputValue={buttonText}
setAttributes={setAttributes}
onChange={(text) =>
setAttributes({
buttonText: text,
})
}
/>
<DynamicInputControl
label={__(
"Button Link",
"essential-blocks"
)}
attrName="buttonURL"
inputValue={buttonURL}
setAttributes={setAttributes}
onChange={(link) =>
setAttributes({
buttonURL: link,
})
}
/>
{buttonURL && (
<ToggleControl
label={__(
"Open in New Tab",
"essential-blocks"
)}
checked={newWindow}
onChange={() =>
setAttributes({
newWindow: !newWindow,
})
}
/>
)}
</PanelBody>
<PanelBody
title={__("Ribbon", "essential-blocks")}
initialOpen={false}
>
<ToggleControl
label={__(
"Featured",
"essential-blocks"
)}
checked={showRibbon}
onChange={() => {
setAttributes({
showRibbon: !showRibbon,
});
}}
/>
{showRibbon && (
<>
<SelectControl
label={__(
"Ribbon Style",
"essential-blocks"
)}
value={ribbonStyle}
options={[
{
label: "Style 1",
value: "ribbon-1",
},
{
label: "Style 2",
value: "ribbon-2",
},
{
label: "Style 3",
value: "ribbon-3",
},
{
label: "Style 4",
value: "ribbon-4",
},
]}
onChange={(ribbonStyle) => {
setAttributes({
ribbonStyle,
});
}}
/>
{ribbonStyle == "ribbon-1" && (
<BaseControl
label={__(
"Align",
"essential-blocks"
)}
>
<ButtonGroup>
{RIBBON_ALIGNMENT_VERTICAL.map(
(
item,
index
) => (
<Button
// isLarge
key={
index
}
isPrimary={
ribbonAlignVertical ===
item.value
}
isSecondary={
ribbonAlignVertical !==
item.value
}
onClick={() =>
setAttributes(
{
ribbonAlignVertical:
item.value,
}
)
}
>
{
item.label
}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
)}
{ribbonStyle !== "ribbon-1" && (
<>
<BaseControl
label={__(
"Align",
"essential-blocks"
)}
>
<ButtonGroup>
{RIBBON_ALIGNMENT_HORIZONTAL.map(
(
item,
index
) => (
<Button
// isLarge
key={
index
}
isPrimary={
ribbonAlignHorizontal ===
item.value
}
isSecondary={
ribbonAlignHorizontal !==
item.value
}
onClick={() =>
setAttributes(
{
ribbonAlignHorizontal:
item.value,
}
)
}
>
{
item.label
}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<TextControl
label={__(
"Featured Tag Text",
"essential-blocks"
)}
value={ribbonText}
onChange={(
ribbonText
) =>
setAttributes({
ribbonText,
})
}
/>
</>
)}
</>
)}
</PanelBody>
</>
)}
{tab.name === "styles" && (
<>
<PanelBody
title={__(
"Price Table Box",
"essential-blocks"
)}
initialOpen={false}
>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Background",
"essential-blocks"
)}
</h3>
</BaseControl>
<BackgroundControl
controlName={priceTableBackground}
resRequiredProps={resRequiredProps}
/>
<BaseControl>
<h3 className="eb-control-title">
Border
</h3>
</BaseControl>
<BorderShadowControl
controlName={wrapperBorderShadow}
resRequiredProps={resRequiredProps}
/>
{pricingStyle == "style-4" && (
<ColorControl
label={__(
"Pricing Top Color",
"essential-blocks"
)}
color={pricingTopBgColor}
onChange={(pricingTopBgColor) =>
setAttributes({
pricingTopBgColor,
})
}
/>
)}
</PanelBody>
<PanelBody
title={__("Header", "essential-blocks")}
initialOpen={false}
>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Alignment",
"essential-blocks"
)}
</h3>
<ButtonGroup>
{ALIGNMENT.map(
(item, index) => (
<Button
key={index}
isPrimary={
headerAlignment ===
item.value
}
isSecondary={
headerAlignment !==
item.value
}
onClick={() =>
setAttributes({
headerAlignment:
item.value,
})
}
>
{item.label}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<Divider />
<BaseControl>
<h3 className="eb-control-title">
{__(
"Title Style",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={titleTextColor}
onChange={(titleTextColor) =>
setAttributes({
titleTextColor,
})
}
/>
{showTitleLine &&
pricingStyle !== "style-4" && (
<ColorControl
label={__(
"Line Color",
"essential-blocks"
)}
color={titleLineColor}
onChange={(
titleLineColor
) =>
setAttributes({
titleLineColor,
})
}
/>
)}
<ColorControl
label={__(
"Background Color",
"essential-blocks"
)}
color={titleBackgroundColor}
onChange={(titleBackgroundColor) =>
setAttributes({
titleBackgroundColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_title
}
resRequiredProps={resRequiredProps}
/>
<Divider />
{showSubtitle && (
<>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Subtitle Style",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={subtitleTextColor}
onChange={(
subtitleTextColor
) =>
setAttributes({
subtitleTextColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_subtitle
}
resRequiredProps={
resRequiredProps
}
/>
<Divider />
</>
)}
<BaseControl>
<h3 className="eb-control-title">
{__("Margin & Padding")}
</h3>
</BaseControl>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={titlePadding}
baseLabel={__(
"Padding",
"essential-blocks"
)}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={titleMargin}
baseLabel={__(
"Margin",
"essential-blocks"
)}
/>
</PanelBody>
<PanelBody
title={__("Price", "essential-blocks")}
initialOpen={false}
>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Alignment",
"essential-blocks"
)}
</h3>
<ButtonGroup>
{ALIGNMENT.map(
(item, index) => (
<Button
key={index}
isPrimary={
priceAlignment ===
item.value
}
isSecondary={
priceAlignment !==
item.value
}
onClick={() =>
setAttributes({
priceAlignment:
item.value,
})
}
>
{item.label}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<Divider />
<BaseControl>
<h3 className="eb-control-title">
{__(
"Original Price",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={priceTextColor}
onChange={(priceTextColor) =>
setAttributes({
priceTextColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_price_title
}
resRequiredProps={resRequiredProps}
/>
<Divider />
<BaseControl>
<h3 className="eb-control-title">
{__(
"Original Price Currency",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={priceCurrencyTextColor}
onChange={(
priceCurrencyTextColor
) =>
setAttributes({
priceCurrencyTextColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_price_currency
}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={priceCurrencyMargin}
baseLabel={__(
"Margin",
"essential-blocks"
)}
/>
<Divider />
{showOnSale && (
<>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Sale Price",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={salePriceTextColor}
onChange={(
salePriceTextColor
) =>
setAttributes({
salePriceTextColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_saleprice
}
resRequiredProps={
resRequiredProps
}
/>
<Divider />
<BaseControl>
<h3 className="eb-control-title">
{__(
"Sale Price Currency",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={
salepriceCurrencyTextColor
}
onChange={(
salepriceCurrencyTextColor
) =>
setAttributes({
salepriceCurrencyTextColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_saleprice_currency
}
resRequiredProps={
resRequiredProps
}
/>
<ResponsiveDimensionsControl
resRequiredProps={
resRequiredProps
}
controlName={
salepriceCurrencyMargin
}
baseLabel={__(
"Margin",
"essential-blocks"
)}
/>
<Divider />
</>
)}
<BaseControl>
<h3 className="eb-control-title">
{__(
"Pricing Period",
"essential-blocks"
)}
</h3>
</BaseControl>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={pricingPeriodTextColor}
F
onChange={(
pricingPeriodTextColor
) =>
setAttributes({
pricingPeriodTextColor,
})
}
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_pricing_period
}
resRequiredProps={resRequiredProps}
/>
</PanelBody>
<PanelBody
title={__(
"Features",
"essential-blocks"
)}
initialOpen={false}
>
<BaseControl>
<h3 className="eb-control-title">
Alignment
</h3>
<ButtonGroup>
{ALIGNMENT.map(
(item, index) => (
<Button
key={index}
isPrimary={
featuresAlignment ===
item.value
}
isSecondary={
featuresAlignment !==
item.value
}
onClick={() =>
setAttributes({
featuresAlignment:
item.value,
})
}
>
{item.label}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<Divider />
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={featuresTextColor}
onChange={(featuresTextColor) =>
setAttributes({
featuresTextColor,
})
}
/>
{showFeatureIcon && (
<ResponsiveRangeController
baseLabel={__(
"Icon Size",
"essential-blocks"
)}
controlName={featuresIconSize}
resRequiredProps={resRequiredProps}
min={0}
max={50}
step={1}
noUnits
/>
)}
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_features_text
}
resRequiredProps={resRequiredProps}
/>
</PanelBody>
<PanelBody
title={__("Button", "essential-blocks")}
initialOpen={false}
>
<BaseControl>
<h3 className="eb-control-title">
Alignment
</h3>
<ButtonGroup>
{ALIGNMENT.map(
(item, index) => (
<Button
key={index}
isPrimary={
buttonAlignment ===
item.value
}
isSecondary={
buttonAlignment !==
item.value
}
onClick={() =>
setAttributes({
buttonAlignment:
item.value,
})
}
>
{item.label}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<Divider />
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={buttonPadding}
baseLabel={__(
"Padding",
"essential-blocks"
)}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={buttonMargin}
baseLabel={__(
"Margin",
"essential-blocks"
)}
/>
<ResponsiveRangeController
baseLabel={__(
"Icon Size",
"essential-blocks"
)}
controlName={buttonIconSize}
resRequiredProps={resRequiredProps}
min={0}
max={50}
step={1}
noUnits
/>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_button
}
resRequiredProps={resRequiredProps}
/>
<ColorControl
label={__(
"Text Color",
"essential-blocks"
)}
color={buttonTextColor}
onChange={(buttonTextColor) =>
setAttributes({
buttonTextColor,
})
}
/>
<ColorControl
label={__(
"Text Hover Color",
"essential-blocks"
)}
color={hoverTextColor}
onChange={(hoverTextColor) =>
setAttributes({
hoverTextColor,
})
}
/>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Button Background",
"essential-blocks"
)}
</h3>
</BaseControl>
<BackgroundControl
controlName={
buttonBackgroundControl
}
resRequiredProps={resRequiredProps}
noOverlay={true}
noMainBgi={true}
/>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Button Border Style",
"essential-blocks"
)}
</h3>
</BaseControl>
<BorderShadowControl
controlName={buttonBorderShadow}
resRequiredProps={resRequiredProps}
/>
</PanelBody>
{showHeaderIcon && (
<PanelBody
title={__(
"Icon Settings",
"essential-blocks"
)}
initialOpen={false}
>
<BaseControl>
<h3 className="eb-control-title">
{__(
"Alignment",
"essential-blocks"
)}
</h3>
<ButtonGroup>
{ALIGNMENT.map(
(item, index) => (
<Button
key={index}
isPrimary={
iconAlignment ===
item.value
}
isSecondary={
iconAlignment !==
item.value
}
onClick={() =>
setAttributes(
{
iconAlignment:
item.value,
}
)
}
>
{item.label}
</Button>
)
)}
</ButtonGroup>
</BaseControl>
<Divider />
<ToggleControl
label={__(
"Show Background",
"essential-blocks"
)}
checked={showIconBackground}
onChange={() => {
setAttributes({
showIconBackground: !showIconBackground,
});
}}
/>
{showIconBackground && (
<>
<ColorControl
label={__(
"Background Color",
"essential-blocks"
)}
color={
iconBackgroundColor
}
onChange={(
iconBackgroundColor
) =>
setAttributes({
iconBackgroundColor,
})
}
/>
<ColorControl
label={__(
"Background Hover Color",
"essential-blocks"
)}
color={
iconBackgroundHoverColor
}
onChange={(
iconBackgroundHoverColor
) =>
setAttributes({
iconBackgroundHoverColor,
})
}
/>
<Divider />
</>
)}
<ResponsiveRangeController
baseLabel={__(
"Icon Size",
"essential-blocks"
)}
controlName={headerIconSize}
resRequiredProps={
resRequiredProps
}
min={0}
max={200}
step={1}
/>
<ResponsiveRangeController
baseLabel={__(
"Icon Area Width",
"essential-blocks"
)}
controlName={headerIconWidth}
resRequiredProps={
resRequiredProps
}
units={TWOUNITS}
min={0}
max={500}
step={1}
/>
<ResponsiveRangeController
baseLabel={__(
"Icon Area Height",
"essential-blocks"
)}
controlName={headerIconHeight}
resRequiredProps={
resRequiredProps
}
units={TWOUNITS}
min={0}
max={500}
step={1}
/>
<ColorControl
label={__(
"Icon Color",
"essential-blocks"
)}
color={iconColor}
onChange={(iconColor) =>
setAttributes({ iconColor })
}
/>
<ColorControl
label={__(
"Icon Hover Color",
"essential-blocks"
)}
color={iconHoverColor}
onChange={(iconHoverColor) =>
setAttributes({
iconHoverColor,
})
}
/>
<Divider />
<BaseControl>
<h3 className="eb-control-title">
Border
</h3>
</BaseControl>
<BorderShadowControl
controlName={iconBorderShadow}
resRequiredProps={
resRequiredProps
}
noShadow
/>
</PanelBody>
)}
{showRibbon && (
<PanelBody
title={__(
"Ribbon",
"essential-blocks"
)}
initialOpen={false}
>
<TypographyDropdown
baseLabel={__(
"Typography",
"essential-blocks"
)}
typographyPrefixConstant={
typoPrefix_ribbon
}
resRequiredProps={
resRequiredProps
}
/>
<ColorControl
label={__(
"Color",
"essential-blocks"
)}
color={ribbonColor}
onChange={(ribbonColor) =>
setAttributes({
ribbonColor,
})
}
/>
<ColorControl
label={__(
"Background Color",
"essential-blocks"
)}
color={ribbonBackgroundColor}
onChange={(
ribbonBackgroundColor
) =>
setAttributes({
ribbonBackgroundColor,
})
}
/>
<BorderShadowControl
controlName={ribbonBorderShadow}
resRequiredProps={
resRequiredProps
}
noBorder
/>
</PanelBody>
)}
</>
)}
{tab.name === "advance" && (
<>
<PanelBody>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={wrapperPadding}
baseLabel={__(
"Padding",
"essential-blocks"
)}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={wrapperMargin}
baseLabel={__(
"Margin",
"essential-blocks"
)}
/>
</PanelBody>
<AdvancedControls
attributes={attributes}
setAttributes={setAttributes}
/>
</>
)}
</div>
)}
</TabPanel>
</div>
</InspectorControls>
);
};
export default Inspector;