File: /mnt/drbd/www/edenhouse/wp-content/plugins/essential-blocks/lib/global-styles/src/controls.js
import { PluginSidebar } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";
import { applyFilters } from "@wordpress/hooks";
import { useState, useEffect } from "@wordpress/element";
import { PanelBody, Button, Popover, Dashicon, TabPanel } from "@wordpress/components";
import { store as editorStore } from '@wordpress/editor';
import { dispatch, useSelect, withSelect } from "@wordpress/data";
import {
BlockPreview,
PanelColorSettings
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import EBIcon from "./assets/icon";
import ColorPalletWrapper from "./components/colorPalletWrapper"
import GradientColorPallet from "./components/GradientColorPallet"
import TypographySettings from "./components/typography/TypographySettings"
import {
getGlobalSettings,
generateTypographyCSS,
applyTypographyCSS,
loadGoogleFonts
} from "./helpers/helpers"
import "./style.scss";
import Accordion from "./block-defaults/accordion";
import AdvancedHeading from "./block-defaults/advanced-heading";
import AdvancedImage from "./block-defaults/advanced-image";
import AdvancedTabs from "./block-defaults/advanced-tabs";
import AdvancedVideo from "./block-defaults/advanced-video";
import AdvancedNavigation from "./block-defaults/advanced-navigation";
import EBButton from "./block-defaults/button";
import CallToAction from "./block-defaults/call-to-action";
import Countdown from "./block-defaults/countdown";
import DualButton from "./block-defaults/dual-button";
import FeatureList from "./block-defaults/feature-list";
import Flipbox from "./block-defaults/flipbox";
import FluentForms from "./block-defaults/fluent-forms";
import ImageComparison from "./block-defaults/image-comparison";
import ImageGallery from "./block-defaults/image-gallery";
import Infobox from "./block-defaults/infobox";
import InstagramFeed from "./block-defaults/instagram-feed";
import InteractivePromo from "./block-defaults/interactive-promo";
import NftGallery from "./block-defaults/nft-gallery";
import Notice from "./block-defaults/notice";
import NumberCounter from "./block-defaults/number-counter";
import Openverse from "./block-defaults/openverse";
import ParallaxSlider from "./block-defaults/parallax-slider";
import Popup from "./block-defaults/popup";
import PostCarousel from "./block-defaults/post-carousel";
import PostGrid from "./block-defaults/post-grid";
import PricingTable from "./block-defaults/pricing-table";
import ProgressBar from "./block-defaults/progress-bar";
import Row from "./block-defaults/row";
import Slider from "./block-defaults/slider";
import Social from "./block-defaults/social";
import SocialShare from "./block-defaults/social-share";
import TableOfContents from "./block-defaults/table-of-contents";
import TeamMember from "./block-defaults/team-member";
import Testimonial from "./block-defaults/testimonial";
import ToggleContent from "./block-defaults/toggle-content";
import TypingText from "./block-defaults/typing-text";
import WooProductGrid from "./block-defaults/woo-product-grid";
import Wpforms from "./block-defaults/wpforms";
import Wrapper from "./block-defaults/wrapper";
import GoogleMap from "./block-defaults/google-map";
import Form from "./block-defaults/form";
/**
* Global Controls Component
* @param {*} props
* @returns {Component}
*/
function EBGlobalControls(props) {
const {
getGlobalColors,
getCustomColors,
getGradientColors,
getCustomGradientColors,
getGlobalTypography,
getBlockDefaults
} = props;
const localizeColors = EssentialBlocksLocalize.globalColors || []
const components = applyFilters('eb_block_defaults', {
advanced_heading: {
component: AdvancedHeading,
preview: true,
},
accordion: {
component: Accordion,
preview: true,
},
advanced_image: {
component: AdvancedImage,
preview: true,
previewData: {
image: {
url: EssentialBlocksLocalize?.image_url + "/gallery-images/hongkong.jpg",
},
imageCaption: "Style images in Gutenberg with advanced options.",
},
},
advanced_tabs: {
component: AdvancedTabs,
preview: true,
},
advanced_video: {
component: AdvancedVideo,
preview: true,
},
advanced_navigation: {
component: AdvancedNavigation,
preview: false,
},
button: {
component: EBButton,
preview: true,
},
call_to_action: {
component: CallToAction,
preview: true,
},
countdown: {
component: Countdown,
preview: true,
},
dual_button: {
component: DualButton,
preview: true,
},
feature_list: {
component: FeatureList,
preview: true,
},
flipbox: {
component: Flipbox,
preview: true,
},
fluent_forms: {
component: FluentForms,
preview: false,
},
image_comparison: {
component: ImageComparison,
preview: true,
previewData: {
leftImageURL: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/white-balloon-bnw.jpeg",
rightImageURL: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/white-balloon.jpeg",
},
},
image_gallery: {
component: ImageGallery,
preview: true,
previewData: {
images: [
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Maldive.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Australia.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/hongkong.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/iceland.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/china.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/CA.jpg",
},
],
sources: [
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Maldive.jpg",
caption: "",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Australia.jpg",
caption: "",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/hongkong.jpg",
caption: "",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/iceland.jpg",
caption: "",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/china.jpg",
caption: "",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/CA.jpg",
caption: "",
},
],
},
},
infobox: {
component: Infobox,
preview: true,
},
instagram_feed: {
component: InstagramFeed,
preview: false,
},
interactive_promo: {
component: InteractivePromo,
preview: true,
previewData: {
imageURL: EssentialBlocksLocalize?.image_url + "/gallery-images/china.jpg",
},
},
nft_gallery: {
component: NftGallery,
preview: false,
},
notice: {
component: Notice,
preview: true,
},
number_counter: {
component: NumberCounter,
preview: true,
},
openverse: {
component: Openverse,
preview: false,
},
parallax_slider: {
component: ParallaxSlider,
preview: true,
previewData: {
sliderData: [
{
src: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Maldive.jpg",
},
{
src: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Australia.jpg",
},
{
src: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/hongkong.jpg",
},
{
src: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/iceland.jpg",
},
],
},
},
popup: {
component: Popup,
preview: true,
},
post_carousel: {
component: PostCarousel,
preview: false,
},
post_grid: {
component: PostGrid,
preview: false,
},
pricing_table: {
component: PricingTable,
preview: true,
},
progress_bar: {
component: ProgressBar,
preview: true,
},
row: {
component: Row,
preview: false,
},
slider: {
component: Slider,
preview: true,
previewData: {
images: [
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Maldive.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/Australia.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/hongkong.jpg",
},
{
url: EssentialBlocksLocalize?.eb_plugins_url + "assets/images/gallery-images/iceland.jpg",
},
],
},
},
social: {
component: Social,
preview: true,
},
social_share: {
component: SocialShare,
preview: true,
},
table_of_contents: {
component: TableOfContents,
preview: true,
},
team_member: {
component: TeamMember,
preview: true,
},
testimonial: {
component: Testimonial,
preview: true,
},
toggle_content: {
component: ToggleContent,
preview: true,
},
typing_text: {
component: TypingText,
preview: true,
},
woo_product_grid: {
component: WooProductGrid,
preview: false,
},
wpforms: {
component: Wpforms,
preview: false,
},
wrapper: {
component: Wrapper,
preview: true,
},
google_map: {
component: GoogleMap,
preview: false,
},
form: {
component: Form,
preview: false,
},
});
/**
* State
*/
const [globalColors, setGlobalColors] = useState([]);
const [customColors, setCustomColors] = useState([]);
const [gradientColors, setGradientColors] = useState([]);
const [customGradientColors, setCustomGradientColors] = useState([]);
const [blockDefaults, setBlockDefaults] = useState({});
const [blockItemDefaults, setBlockItemDefaults] = useState({});
const [popoverAnchor, setPopoverAnchor] = useState();
const [clickedBlock, setClickedBlock] = useState("");
const [isVisible, setIsVisible] = useState(false);
//Create Element for write Global Typography
useEffect(() => {
if (Object.keys(getGlobalTypography).length > 0) {
const cssString = generateTypographyCSS(getGlobalTypography);
applyTypographyCSS(cssString);
loadGoogleFonts(getGlobalTypography)
}
}, [getGlobalTypography])
//Initial UseEffect, Set Defualt color if Store is empty
useEffect(() => {
//Set Global Colors
if (typeof getGlobalColors === "object" && globalColors.length === 0) {
setGlobalColors(localizeColors);
}
//Set Gradient Colors
if (typeof getGradientColors === "object" && gradientColors.length === 0) {
setGradientColors(EssentialBlocksLocalize.gradientColors || []);
}
}, []);
//Set globalColors when Store "getGlobalColors" is changed
useEffect(() => {
if (JSON.stringify(getGlobalColors) !== JSON.stringify(globalColors)) {
setGlobalColors(getGlobalColors);
}
}, [getGlobalColors]);
//Set customColors when Store "getCustomColors" is changed
useEffect(() => {
if (JSON.stringify(getCustomColors) !== JSON.stringify(customColors)) {
setCustomColors(getCustomColors);
}
}, [getCustomColors]);
//Set gradientColors when Store "getGradientColors" is changed
useEffect(() => {
if (JSON.stringify(getGradientColors) !== JSON.stringify(gradientColors)) {
setGradientColors(getGradientColors);
}
}, [getGradientColors]);
//Set customGradientColors when Store "getCustomGradientColors" is changed
useEffect(() => {
if (JSON.stringify(getCustomGradientColors) !== JSON.stringify(customGradientColors)) {
setCustomGradientColors(getCustomGradientColors);
}
}, [getCustomGradientColors]);
//Update Store when "globalColors" is changed
useEffect(() => {
if (globalColors.length > 0) {
dispatch("essential-blocks").setGlobalColors(globalColors);
dispatch('essential-blocks').setIsSaving(true);
}
const root = document.documentElement;
(globalColors.length > 0) && globalColors.map((item) => {
if (item.var && item.color) {
root.style.setProperty(item.var, item.color);
}
})
}, [globalColors]);
//Update Store when "customColors" is changed
useEffect(() => {
if (typeof customColors === 'object') {
dispatch("essential-blocks").setCustomColors(customColors);
dispatch('essential-blocks').setIsSaving(true);
}
const root = document.documentElement;
(customColors.length > 0) && customColors.map((item) => {
if (item.var && item.color) {
root.style.setProperty(item.var, item.color);
}
})
}, [customColors]);
//Update Store when "gradientColors" is changed
useEffect(() => {
if (gradientColors.length > 0) {
dispatch("essential-blocks").setGradientColors(gradientColors);
dispatch('essential-blocks').setIsSaving(true);
}
const root = document.documentElement;
(gradientColors.length > 0) && gradientColors.map((item) => {
if (item.var && item.color) {
root.style.setProperty(item.var, item.color);
}
})
}, [gradientColors]);
//Update Store when "customGradientColors" is changed
useEffect(() => {
if (typeof customGradientColors === 'object') {
dispatch("essential-blocks").setCustomGradientColors(customGradientColors);
dispatch('essential-blocks').setIsSaving(true);
}
const root = document.documentElement;
(customGradientColors.length > 0) && customGradientColors.map((item) => {
if (item.var && item.color) {
root.style.setProperty(item.var, item.color);
}
})
}, [customGradientColors]);
//Update Global Colors
const setGlobalColor = (index, color) => {
const colors = [...globalColors];
colors[index].color = color;
setGlobalColors([...colors]);
};
const setGradientColor = (index, color) => {
const colors = [...gradientColors];
colors[index].color = color;
setGradientColors([...colors]);
};
const setCustomGradientColor = (index, color) => {
const colors = [...customGradientColors];
colors[index].color = color;
setCustomGradientColors([...colors]);
};
const deleteCustomGradientColor = (index) => {
const colors = [...customGradientColors];
colors.splice(index, 1)
setCustomGradientColors([...colors]);
};
//Get Device type from "getDeviceType" Function
const deviceType = useSelect((select) => {
const { getDeviceType } = select(editorStore)
const { __experimentalGetPreviewDeviceType } = select("core/edit-post")
return getDeviceType ? getDeviceType() : __experimentalGetPreviewDeviceType ? __experimentalGetPreviewDeviceType() : "Desktop";
});
/**
* Handle Popup Visibility
* @param {*} block
*/
const toggleVisible = (block) => {
setClickedBlock(block);
setIsVisible((state) => !state);
};
//Set blockDefaults when Store "getBlockDefaults" is changed
useEffect(() => {
if (JSON.stringify(getBlockDefaults) !== JSON.stringify(blockDefaults)) {
setBlockDefaults(getBlockDefaults);
}
}, [getBlockDefaults]);
useEffect(() => {
setBlockDefaults({
...blockDefaults,
...blockItemDefaults,
});
}, [blockItemDefaults]);
/**
* Handle Save Block Default
* @param {*} block
*/
const handleSaveBlockDefault = () => {
setIsVisible((state) => !state);
//Save Block Default
if (Object.keys(blockDefaults).length > 0) {
dispatch("essential-blocks").setBlockDefault(blockDefaults);
dispatch("essential-blocks").saveBlockDefault(blockDefaults);
}
};
/**
* Handle Save & Insert Block
* @param {*} block
*/
const handleSaveInsert = (clickedBlock) => {
setIsVisible((state) => !state);
//Save Block Default
if (Object.keys(blockDefaults).length > 0) {
dispatch("essential-blocks").setBlockDefault(blockDefaults);
dispatch("essential-blocks").saveBlockDefault(blockDefaults);
}
const insertedBlock = wp.blocks.createBlock(`essential-blocks/${registeredBlocks[clickedBlock]?.is_pro ? 'pro-' : ''}${clickedBlock.replace(
/_/g,
"-"
)}`,
{
...previewData(
clickedBlock
),
});
wp.data.dispatch('core/block-editor').insertBlocks(insertedBlock);
};
/**
* Handle Reset Block Default
* @param {*} block
*/
const handleResetBlockDefault = (selected) => {
if (
!window.confirm(
`Are you sure, you want to reset all the changes you made for ${registeredBlocks[clickedBlock]?.label}`
)
) {
return;
}
const defaults = { ...blockDefaults };
if (defaults[selected]) {
delete defaults[selected];
}
//Save Block Default
dispatch("essential-blocks").setBlockDefault(defaults);
dispatch("essential-blocks").saveBlockDefault(defaults);
//save updated blockDefault object after deleted selected
setBlockItemDefaults({});
setBlockDefaults(defaults);
//Reload popup
setIsVisible(false);
setTimeout(() => {
setIsVisible(true);
}, 1);
};
/**
* Handle Close without save
* @param {*} selected
*/
const handleCloseWithoutSave = (selected) => {
setBlockItemDefaults({});
setIsVisible(false);
};
/**
* Setup Popup
*/
useEffect(() => {
const editor = document.querySelector("#editor");
setPopoverAnchor(editor);
}, []);
const ClickedComponent = components[clickedBlock]?.component;
const allBlocksKeys = Object.keys(components);
const registeredBlocks = EssentialBlocksLocalize?.all_blocks_default;
const activedBlocks = EssentialBlocksLocalize?.all_blocks;
/**
* Handle preview data
* @param {*} selected
* @returns
*/
const previewData = (selected) => {
let data = { ...blockDefaults[selected] };
if (components[selected].previewData) {
data = {
...data,
...components[selected].previewData,
};
}
return data;
};
const colorPanelArray = (colors, setColor, defaults = []) => {
if (typeof colors !== 'object') {
return []
}
const colorArr = []
colors.map((colorObj, index) => (
colorArr.push({
label: colorObj.name || 'Color',
value: colorObj.color,
onChange: (newColor) => {
setColor(index, newColor || defaults[index]?.color || '#000')
}
})
))
return colorArr
}
return (
<>
<PluginSidebar
className="eb-global-controls"
icon={<EBIcon />}
name="eb-global-controls"
title={__("EB Global Controls", "essential-blocks")}
>
<div className="eb-panel-control">
<PanelBody
title={__("Global Color", "essential-blocks")}
initialOpen={true}
>
<TabPanel
className="eb-global-color-tab-panel"
activeClass="active-tab"
tabs={[
{
name: "solid",
title: "Solid",
className: "eb-tab solid",
},
{
name: "gradient",
title: "Gradient",
className: "eb-tab gradient",
}
]}
>
{(tab) => (
<div className={"eb-tab-control-item eb-tab-controls-" + tab.name}>
{tab.name === "solid" && (
<>
<PanelColorSettings
title={__(
"Global Colors",
"essential-blocks"
)}
className={"eb-color-panel eb-global-color-panel"}
initialOpen={true}
disableAlpha={true}
disableCustomGradients={false}
colorSettings={colorPanelArray(globalColors, setGlobalColor, localizeColors)}
/>
{customColors && customColors.length > 0 && (
<ColorPalletWrapper
customColors={customColors}
setCustomColors={setCustomColors}
/>
)}
<div className="eb-add-btn add-custom-color">
<Button
className="eb-add-btn__button add-custom-color-btn"
onClick={() => setCustomColors([
...customColors,
{
color: '#000000',
name: `Custom Color ${customColors.length + 1}`,
slug: `custom-color-${customColors.length + 1}`,
var: `--eb-custom-color-${customColors.length + 1}`
}
])}
>Add Custom Color <Dashicon icon={"plus"} /></Button>
</div>
</>
)}
{tab.name === "gradient" && (
<>
{/* Gradient Color Pallet */}
<GradientColorPallet
title={"Gradient Colors"}
colors={gradientColors}
setColor={setGradientColor}
setColors={setGradientColors}
wrapperClass={"eb-gradient-color-panel"}
resetAction={true}
/>
{/* Custom Gradient Color Pallet */}
<GradientColorPallet
title={"Custom Gradient Colors"}
colors={customGradientColors}
setColor={setCustomGradientColor}
setColors={setCustomGradientColors}
wrapperClass={"eb-custom-gradient-color-panel"}
resetAction={true}
deleteAction={true}
enableEditName={true}
onDelete={deleteCustomGradientColor}
/>
<div className="eb-add-btn add-custom-color">
<Button
className="eb-add-btn__button add-custom-color-btn"
onClick={() => setCustomGradientColors([
...customGradientColors,
{
color: 'linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)',
name: `Custom Color ${customGradientColors.length + 1}`,
slug: `custom-gradient-color-${customGradientColors.length + 1}`,
var: `--eb-custom-gradient-color-${customGradientColors.length + 1}`
}
])}
>Add Custom Color <Dashicon icon={"plus"} /></Button>
</div>
</>
)}
</div>
)}
</TabPanel>
</PanelBody>
<PanelBody
title={__("Global Typography", "essential-blocks")}
initialOpen={true}
>
<TypographySettings />
</PanelBody>
<PanelBody
title={__("Block Defaults", "essential-blocks")}
initialOpen={false}
>
<div className="eb-block-list-button">
{typeof registeredBlocks === "object" &&
Object.keys(components).map((item, index) => (
<div className="eb-block-button" key={index}>
<Button
variant="none"
className="eb-block-default-button"
onClick={() =>
toggleVisible(
registeredBlocks[item].value
)
}
>
<img
className="eb-global-icon"
src={registeredBlocks[item]?.icon}
alt={registeredBlocks[item]?.label}
/>
{registeredBlocks[item]?.label}
{getBlockDefaults[item] && (
<span className="active">
{" "}
{__(<Dashicon icon={"edit"} />)}
</span>
)}
</Button>
</div>
))}
</div>
</PanelBody>
</div>
</PluginSidebar>
{isVisible && (
<Popover
anchor={popoverAnchor}
className="eb-block-default-popup"
>
<Button
className="btn-block-default btn-block-default-close"
onClick={() => handleCloseWithoutSave(clickedBlock)}
>
{__(<Dashicon icon={"no"} />)}
</Button>
{allBlocksKeys.includes(clickedBlock) && (
<>
<div
id="eb-preview"
className="eb-block-default-preveiw-wrapper"
>
<div className="eb-block-default-heading">
<span>
{
EssentialBlocksLocalize
.all_blocks_default[
clickedBlock
].label
}{" "}
Preview
</span>
</div>
{components[clickedBlock].preview &&
activedBlocks[clickedBlock].visibility ===
"true" && (
<BlockPreview
blocks={createBlock(
`essential-blocks/${registeredBlocks[clickedBlock]?.is_pro ? 'pro-' : ''}${clickedBlock.replace(
/_/g,
"-"
)}`,
{
...previewData(
clickedBlock
),
}
)}
viewportWidth={1100}
/>
)}
{activedBlocks[clickedBlock].visibility ===
"false" && (
<p className="preview-not-available">
{registeredBlocks[clickedBlock].label}{" "}
Block isn't Enabled!
</p>
)}
{!components[clickedBlock].preview && (
<p className="preview-not-available">
Preview not available
</p>
)}
<div className="block-default-popup-footer">
<Button
className="btn-block-default-reset btn-block-default-link"
onClick={() =>
handleResetBlockDefault(
clickedBlock
)
}
>
Reset
</Button>
<Button
className="btn-block-default-link"
onClick={() =>
handleSaveInsert(
clickedBlock
)
}
>
Save & Insert
</Button>
<Button
className="btn-block-default-save"
onClick={() => handleSaveBlockDefault()}
>
Save
</Button>
</div>
</div>
<div className="eb-block-default">
<ClickedComponent
blockDefaults={blockDefaults}
setBlockDefaults={setBlockItemDefaults}
name={clickedBlock}
deviceType={deviceType}
/>
</div>
</>
)}
{!allBlocksKeys.includes(clickedBlock) && (
<h3>Block Default Controls not available</h3>
)}
</Popover>
)}
</>
);
}
export default withSelect((select) => {
return {
...getGlobalSettings(select),
getBlockDefaults: select('essential-blocks').getBlockDefaults()
};
})(EBGlobalControls);