/** * WordPress dependencies */ import { __ } from "@wordpress/i18n"; import { PanelBody, SelectControl, ToggleControl, TextControl, TextareaControl, Button, ButtonGroup, BaseControl, TabPanel, ColorPicker, } from "@wordpress/components"; import { ResponsiveDimensionsControl, TypographyDropdown, BorderShadowControl, ResponsiveRangeController, BackgroundControl, ColorControl, EBIconPicker, useBlockDefaults, withBlockContext } from "@essential-blocks/controls"; /** * Internal depencencies */ import { WRAPPER_BG, WRAPPER_MARGIN, WRAPPER_PADDING, WRAPPER_BORDER_SHADOW, TITLE_MARGIN, SUBTITLE_MARGIN, SEPARATOR_MARGIN, SEPARATOR_LINE_SIZE, SEPARATOR_ICON_SIZE, SEPARATOR_WIDTH, SEPARATOR_POSITION, NORMAL_HOVER, UNIT_TYPES, SEPARATOR_UNIT_TYPES, PRESETS, TEXT_ALIGN, HEADING, SEPERATOR_STYLES, SEPARATOR_TYPE, } from "@essential-blocks/blocks/advanced-heading/src/constants/constants"; import { TITLE_TYPOGRAPHY, SUBTITLE_TYPOGRAPHY, } from "@essential-blocks/blocks/advanced-heading/src/constants/typographyPrefixConstants"; import objAttributes from "@essential-blocks/blocks/advanced-heading/src/attributes"; function AdvancedHeading(props) { const { blockDefaults, setBlockDefaults, name, deviceType, handleBlockDefault } = props; const { tagName, subtitleTagName, titleColor, titleHoverColor, subtitleColor, subtitleHoverColor, separatorColor, separatorHoverColor, align, displaySubtitle, displaySeperator, seperatorPosition, seperatorType, seperatorStyle, separatorIcon, } = blockDefaults; const isDefaultSet = useBlockDefaults(name, blockDefaults, setBlockDefaults, objAttributes) return ( <> {isDefaultSet && (
{TEXT_ALIGN.map((item, key) => ( ))} {HEADING.map((item, key) => ( ))} handleBlockDefault({ displaySubtitle: !displaySubtitle, }) } /> {displaySubtitle && ( <> {HEADING.map((item, key) => ( ))} )} handleBlockDefault({ displaySeperator: !displaySeperator, }) } /> handleBlockDefault({ titleColor: value })} defaultValue={titleColor} /> handleBlockDefault({ titleHoverColor: value })} defaultValue={titleHoverColor} /> {displaySubtitle && ( handleBlockDefault({ subtitleColor: value })} defaultValue={subtitleColor} /> handleBlockDefault({ subtitleHoverColor: value, }) } defaultValue={subtitleHoverColor} /> )} {displaySeperator && ( handleBlockDefault({ seperatorPosition })} /> {SEPARATOR_TYPE.map((item, key) => ( ))} {seperatorType === "line" && ( <> handleBlockDefault({ seperatorStyle, }) } /> )} {seperatorType === "icon" && ( <> handleBlockDefault({ separatorIcon: icon, }) } title={__( "Select Icon", "essential-blocks-pro" )} /> )} handleBlockDefault({ separatorColor: value, }) } defaultValue={separatorColor} /> handleBlockDefault({ separatorHoverColor: value, }) } defaultValue={separatorHoverColor} /> )}
)} ); } export default withBlockContext(objAttributes)(AdvancedHeading); .dnext-team-creative-sn a span::before{width:40px;height:40px;line-height:40px;font-size:16px;padding:15px}.dnext-team-creative-social-items span::before{content:attr(data-icon);padding:15px;border-radius:50%}@media (max-width:980px){.dnext-team-creative-social-items span::before{content:attr(data-icon-tablet)!important}}@media (max-width:767px){.dnext-team-creative-social-items span::before{content:attr(data-icon-phone)!important}}.dnext-team-creative-facebook span::before{content:"\e093";font-family:ETmodules!important;background-color:#3b5998;padding:15px;border-radius:50%}.dnext-team-creative-pinterest span::before,.dnext-team-creative-twitter span::before{content:"\e094";font-family:ETmodules!important;background-color:#00aced;padding:15px;border-radius:50%}.dnext-team-creative-pinterest span::before{content:"\e095";background-color:#cb2027}.dnext-team-creative-linkedin span::before,.dnext-team-creative-tumblr span::before{content:"\e09d";font-family:ETmodules!important;background-color:#007bb6;padding:15px;border-radius:50%}.dnext-team-creative-tumblr span::before{content:"\e097";background-color:#32506d}.dnext-team-creative-instagram span::before,.dnext-team-creative-skype span::before{content:"\e09a";font-family:ETmodules!important;background-color:#ea2c59;padding:15px;border-radius:50%}.dnext-team-creative-skype span::before{content:"\e0a2";background-color:#12a5f4}.dnext-team-creative-dribbble span::before,.dnext-team-creative-flikr span::before{content:"\e0a6";font-family:ETmodules!important;background-color:#ff0084;padding:15px;border-radius:50%}.dnext-team-creative-dribbble span::before{content:"\e09b";background-color:#ea4c8d}.dnext-team-creative-vimeo span::before,.dnext-team-creative-youtube span::before{content:"\e0a3";font-family:ETmodules!important;background-color:#a82400;padding:15px;border-radius:50%}.dnext-team-creative-vimeo span::before{content:"\e09c";background-color:#45bbff}li.dnext-team-creative-sn a span:before{border:0 solid #333}/*! elementor - v3.28.0 - 22-04-2025 */ :root{--color-box-shadow-color:rgba(0,0,0,.05)}.eps-theme-dark{--color-box-shadow-color:rgba(0,0,0,.1)}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}@media screen and (min-width:480px){.text-start-sm{text-align:start}.text-center-sm{text-align:center}.text-end-sm{text-align:end}}@media screen and (min-width:768px){.text-start-md{text-align:start}.text-center-md{text-align:center}.text-end-md{text-align:end}}@media screen and (min-width:1025px){.text-start-lg{text-align:start}.text-center-lg{text-align:center}.text-end-lg{text-align:end}}@media screen and (min-width:1440px){.text-start-xl{text-align:start}.text-center-xl{text-align:center}.text-end-xl{text-align:end}}@media screen and (min-width:1600px){.text-start-xxl{text-align:start}.text-center-xxl{text-align:center}.text-end-xxl{text-align:end}}@keyframes eps-animation-pop{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}import './preview-iframe.scss'; export default function PreviewIFrame( props ) { const ref = React.useRef( null ), previewBreakpoint = 1200, [ scale, setScale ] = React.useState( 1 ), [ height, setHeight ] = React.useState( 0 ); // In order to make sure that the iframe itself show the content in specific viewport, // and it should fit to the size of the card, there is a use of css props `scale` and `height`, // and another element that wraps the iframe to be the guidelines of the iframe sizes. React.useEffect( () => { const currentScale = ref.current.clientWidth / previewBreakpoint; setScale( currentScale ); setHeight( ref.current.clientHeight / currentScale ); }, [] ); return (