API tools faq
paste
Advertisement
NicholasB

src/blocks/singlebtn/edit.js

NicholasB
Oct 6th, 2023 (edited)
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 61.74 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  * BLOCK: Kadence Advanced Btn Single.
  3.  *
  4.  * Editor for Advanced Btn
  5.  */
  6. // @TODO after `npm run build` replace `dist/blocks-singlebtn.js` and `dist/blocks-advancedbtn.js` in production
  7. import {
  8.     KadenceColorOutput,
  9.     getPreviewSize,
  10.     showSettings,
  11.     getSpacingOptionOutput,
  12.     mouseOverVisualizer,
  13.     getFontSizeOptionOutput,
  14.     typographyStyle,
  15.     getBorderStyle,
  16.     setBlockDefaults,
  17.     getBorderColor,
  18.     getUniqueId,
  19.     getInQueryBlock,
  20.     getPostOrFseId
  21. } from '@kadence/helpers';
  22.  
  23. import {
  24.     PopColorControl,
  25.     TypographyControls,
  26.     ResponsiveMeasurementControls,
  27.     SmallResponsiveControl,
  28.     ResponsiveRangeControls,
  29.     IconRender,
  30.     HoverToggleControl,
  31.     ResponsiveBorderControl,
  32.     KadenceIconPicker,
  33.     KadencePanelBody,
  34.     URLInputControl,
  35.     KadenceWebfontLoader,
  36.     BackgroundTypeControl,
  37.     KadenceRadioButtons,
  38.     URLInputInline,
  39.     ResponsiveAlignControls,
  40.     GradientControl,
  41.     BoxShadowControl,
  42.     DynamicTextControl,
  43.     InspectorControlTabs,
  44.     KadenceBlockDefaults,
  45.     ResponsiveMeasureRangeControl,
  46.     SpacingVisualizer,
  47.     CopyPasteAttributes,
  48. } from '@kadence/components';
  49. import classnames from 'classnames';
  50. import { times, filter, map, uniqueId } from 'lodash';
  51.  
  52. const defaultBtns = {
  53.     text: '',
  54.     link: '',
  55.     target: '_self',
  56.     color: '',
  57.     background: '',
  58.     borderRadius: ['', '', '', ''],
  59.     colorHover: '',
  60.     backgroundHover: '',
  61.     icon: '',
  62.     iconSide: 'right',
  63.     iconHover: false,
  64.     noFollow: false,
  65.     sponsored: false,
  66.     download: false,
  67.     gradient: '',
  68.     gradientHover: '',
  69.     btnStyle: 'basic',
  70.     sizePreset: 'standard',
  71.     backgroundType: 'solid',
  72.     backgroundHoverType: 'solid',
  73.     width: [ '', '', '' ],
  74.     widthType:'auto',
  75.     borderStyle:[ {
  76.         top: [ '', '', '' ],
  77.         right: [ '', '', '' ],
  78.         bottom: [ '', '', '' ],
  79.         left: [ '', '', '' ],
  80.         unit: 'px'
  81.     } ],
  82.     borderHoverStyle:[ {
  83.         top: [ '', '', '' ],
  84.         right: [ '', '', '' ],
  85.         bottom: [ '', '', '' ],
  86.         left: [ '', '', '' ],
  87.         unit: 'px'
  88.     } ],
  89.     displayShadow: false,
  90.     displayHoverShadow: false,
  91.     shadow: [ {
  92.         color: '#000000',
  93.         opacity: 0.2,
  94.         spread: 0,
  95.         blur: 2,
  96.         hOffset: 1,
  97.         vOffset: 1,
  98.         inset: false
  99.     } ],
  100.     shadowHover: [ {
  101.         color: '#000000',
  102.         opacity: 0.4,
  103.         spread: 0,
  104.         blur: 3,
  105.         hOffset: 2,
  106.         vOffset: 2,
  107.         inset: false
  108.     } ],
  109.     typography: {
  110.         type: 'array',
  111.         default: [ {
  112.             'size': [ '', '', '' ],
  113.             'sizeType': 'px',
  114.             'lineHeight': [ '', '', '' ],
  115.             'lineType': 'px',
  116.             'letterSpacing': [ '', '', '' ],
  117.             'letterType': 'px',
  118.             'family': '',
  119.             'google': false,
  120.             'style': '',
  121.             'weight': '',
  122.             'variant': '',
  123.             'subset': '',
  124.             'loadGoogle': true,
  125.             'textTransform': ''
  126.         } ]
  127.     },
  128.     inheritStyles: '',
  129.     iconSize: [ '', '', '' ],
  130.     iconPadding: [ '', '', '', '' ],
  131.     iconTabletPadding: [ '', '', '', '' ],
  132.     iconMobilePadding: [ '', '', '', '' ],
  133.     iconPaddingUnit: 'px',
  134.     onlyIcon: [ false, '', '' ],
  135.     iconColor: '',
  136.     iconColorHover: '',
  137.     iconSizeUnit: 'px',
  138.     label: '',
  139.     marginUnit: 'px',
  140.     margin: [ '', '', '', '' ],
  141.     tabletMargin: [ '', '', '', '' ],
  142.     mobileMargin: [ '', '', '', '' ],
  143.     paddingUnit: 'px',
  144.     padding: [ '', '', '', '' ],
  145.     tabletPadding: [ '', '', '', '' ],
  146.     mobilePadding: [ '', '', '', '' ],
  147.     borderStyle: [{}],
  148. };
  149.  
  150. import metadata from './block.json';
  151. /**
  152.  * Internal block libraries
  153.  */
  154. import { __ } from '@wordpress/i18n';
  155. import { useDispatch, useSelect } from '@wordpress/data';
  156.  
  157. import {
  158.     cog,
  159.     pages,
  160.     chevronRight,
  161.     chevronLeft,
  162.     plus,
  163.     close,
  164.     code,
  165.     link as linkIcon,
  166. } from '@wordpress/icons';
  167. import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
  168. import {
  169.     Fragment,
  170.     useEffect,
  171.     useState,
  172. } from '@wordpress/element';
  173. import {
  174.     RichText,
  175.     InspectorControls,
  176.     BlockControls,
  177.     AlignmentToolbar,
  178.     InspectorAdvancedControls,
  179.     JustifyContentControl,
  180.     BlockVerticalAlignmentControl,
  181.     useBlockProps,
  182.     store as blockEditorStore,
  183. } from '@wordpress/block-editor';
  184. import {
  185.     Dashicon,
  186.     TabPanel,
  187.     Button,
  188.     PanelRow,
  189.     RangeControl,
  190.     TextControl,
  191.     ToolbarGroup,
  192.     ButtonGroup,
  193.     SelectControl,
  194.     ToggleControl,
  195.     DropdownMenu,
  196.     MenuGroup,
  197.     MenuItem,
  198.     ToolbarButton,
  199.     Icon,
  200. } from '@wordpress/components';
  201. import {
  202.     addFilter,
  203.     applyFilters,
  204. } from '@wordpress/hooks';
  205.  
  206.  
  207. export default function KadenceButtonEdit( props ) {
  208.     const { attributes, setAttributes, className, isSelected, context, clientId, name } = props;
  209.     const {
  210.         uniqueID,
  211.         text,
  212.         link,
  213.         target,
  214.         sponsored,
  215.         download,
  216.         noFollow,
  217.         sizePreset,
  218.         padding,
  219.         tabletPadding,
  220.         mobilePadding,
  221.         paddingUnit,
  222.         color,
  223.         background,
  224.         backgroundType,
  225.         gradient,
  226.         colorHover,
  227.         backgroundHover,
  228.         backgroundHoverType,
  229.         gradientHover,
  230.         borderStyle,
  231.         tabletBorderStyle,
  232.         mobileBorderStyle,
  233.         borderHoverStyle,
  234.         tabletBorderHoverStyle,
  235.         mobileBorderHoverStyle,
  236.         typography,
  237.         borderRadius,
  238.         tabletBorderRadius,
  239.         mobileBorderRadius,
  240.         borderRadiusUnit,
  241.         borderHoverRadius,
  242.         tabletBorderHoverRadius,
  243.         mobileBorderHoverRadius,
  244.         borderHoverRadiusUnit,
  245.         icon,
  246.         iconSide,
  247.         iconHover,
  248.         width,
  249.         widthUnit,
  250.         widthType,
  251.         displayShadow,
  252.         shadow,
  253.         displayHoverShadow,
  254.         shadowHover,
  255.         inheritStyles,
  256.         iconSize,
  257.         iconPadding,
  258.         tabletIconPadding,
  259.         mobileIconPadding,
  260.         iconPaddingUnit,
  261.         onlyIcon,
  262.         iconColor,
  263.         iconColorHover,
  264.         label,
  265.         marginUnit,
  266.         margin,
  267.         iconSizeUnit,
  268.         tabletMargin,
  269.         mobileMargin,
  270.         kadenceAOSOptions,
  271.         kadenceAnimation,
  272.         hideLink,
  273.         inQueryBlock,
  274.     } = attributes;
  275.  
  276.     // Support rank math content analysis.
  277.     const rankMathContent = link !== '' ? '<a href="' + link + '">' + text + '</a>' : text;
  278.     addFilter( 'rank_math_content', 'kadence/advbtn', (content) => {
  279.         const kadencePattern = new  RegExp( `<\\!-- wp:kadence/singlebtn.*\\b${ text }\\b.*?/-->`, 'g')
  280.         const allContent = content.replace( kadencePattern, rankMathContent )
  281.         return allContent
  282.     }, 11 )
  283.  
  284.     const { updateBlockAttributes } = useDispatch( blockEditorStore );
  285.     const { btnsBlock, rootID } = useSelect(
  286.         ( select ) => {
  287.             const { getBlockRootClientId, getBlocksByClientId } = select( blockEditorStore );
  288.             const rootID = getBlockRootClientId( clientId );
  289.             const btnsBlock = getBlocksByClientId( rootID );
  290.             return {
  291.                 btnsBlock: ( undefined !== btnsBlock ? btnsBlock : '' ),
  292.                 rootID: ( undefined !== rootID ? rootID : '' ),
  293.             };
  294.         },
  295.         [ clientId ]
  296.     );
  297.     const updateParentBlock = ( key, value ) => {
  298.         updateBlockAttributes( rootID, { [key]: value } );
  299.     }
  300.     const { addUniqueID } = useDispatch( 'kadenceblocks/data' );
  301.     const { isUniqueID, isUniqueBlock, previewDevice, parentData } = useSelect(
  302.         ( select ) => {
  303.             return {
  304.                 isUniqueID: ( value ) => select( 'kadenceblocks/data' ).isUniqueID( value ),
  305.                 isUniqueBlock: ( value, clientId ) => select( 'kadenceblocks/data' ).isUniqueBlock( value, clientId ),
  306.                 previewDevice: select( 'kadenceblocks/data' ).getPreviewDeviceType(),
  307.                 parentData: {
  308.                     rootBlock: select( 'core/block-editor' ).getBlock( select( 'core/block-editor' ).getBlockHierarchyRootClientId( clientId ) ),
  309.                     postId: select( 'core/editor' )?.getCurrentPostId() ? select( 'core/editor' )?.getCurrentPostId() : '',
  310.                     reusableParent: select('core/block-editor').getBlockAttributes( select('core/block-editor').getBlockParentsByBlockName( clientId, 'core/block' ).slice(-1)[0] ),
  311.                     editedPostId: select( 'core/edit-site' ) ? select( 'core/edit-site' ).getEditedPostId() : false
  312.                 }
  313.             };
  314.         },
  315.         [ clientId ]
  316.     );
  317.     const marginMouseOver = mouseOverVisualizer();
  318.     const paddingMouseOver = mouseOverVisualizer();
  319.     useEffect( () => {
  320.         setBlockDefaults( 'kadence/singlebtn', attributes);
  321.  
  322.         const postOrFseId = getPostOrFseId( props, parentData );
  323.         let uniqueId = getUniqueId( uniqueID, clientId, isUniqueID, isUniqueBlock, postOrFseId );
  324.         if ( uniqueId !== uniqueID ) {
  325.             attributes.uniqueID = uniqueId;
  326.             setAttributes( { uniqueID: uniqueId } );
  327.             addUniqueID( uniqueId, clientId );
  328.         } else {
  329.             addUniqueID( uniqueID, clientId );
  330.         }
  331.  
  332.         setAttributes( { inQueryBlock: getInQueryBlock( context, inQueryBlock ) } );
  333.     }, [] );
  334.     const [ activeTab, setActiveTab ] = useState( 'general' );
  335.     const [ isEditingURL, setIsEditingURL ] = useState( false );
  336.     useEffect( () => {
  337.         if ( ! isSelected ) {
  338.             setIsEditingURL( false );
  339.         }
  340.     }, [ isSelected ] );
  341.     function startEditing( event ) {
  342.         event.preventDefault();
  343.         setIsEditingURL( true );
  344.     }
  345.     const saveTypography = ( value ) => {
  346.         const newUpdate = typography.map( ( item, index ) => {
  347.             if ( 0 === index ) {
  348.                 item = { ...item, ...value };
  349.             }
  350.             return item;
  351.         } );
  352.         setAttributes( {
  353.             typography: newUpdate,
  354.         } );
  355.     };
  356.     const saveShadow = ( value ) => {
  357.         const newUpdate = shadow.map( ( item, index ) => {
  358.             if ( 0 === index ) {
  359.                 item = { ...item, ...value };
  360.             }
  361.             return item;
  362.         } );
  363.         setAttributes( {
  364.             shadow: newUpdate,
  365.         } );
  366.     };
  367.     const saveShadowHover = ( value ) => {
  368.         const newItems = shadowHover.map( ( item, thisIndex ) => {
  369.             if ( 0 === thisIndex ) {
  370.                 item = { ...item, ...value };
  371.             }
  372.  
  373.             return item;
  374.         } );
  375.         setAttributes( {
  376.             shadowHover: newItems,
  377.         } );
  378.     }
  379.     const btnSizes = [
  380.         { value: 'small', label: __( 'SM' , 'kadence-blocks') },
  381.         { value: 'standard', label: __( 'MD', 'kadence-blocks' ) },
  382.         { value: 'large', label: __( 'LG', 'kadence-blocks' ) },
  383.         { value: 'xlarge', label: __( 'XL', 'kadence-blocks' ) },
  384.     ];
  385.     const btnWidths = [
  386.         { value: 'auto', label: __( 'Auto', 'kadence-blocks' ) },
  387.         { value: 'fixed', label: __( 'Fixed', 'kadence-blocks' ) },
  388.         { value: 'full', label: __( 'Full', 'kadence-blocks' ) },
  389.     ];
  390.     const defineWidthType = ( type ) => {
  391.         if ( 'full' === type ) {
  392.             //updateParentBlock( 'forceFullwidth', true );
  393.             setAttributes( { widthType: type } );
  394.         } else {
  395.             //updateParentBlock( 'forceFullwidth', false );
  396.             setAttributes( { widthType: type } );
  397.         }
  398.     };
  399.     const buttonStyleOptions = [
  400.         { value: 'fill', label: __( 'Fill', 'kadence-blocks' ) },
  401.         { value: 'outline', label: __( 'Outline', 'kadence-blocks' ) },
  402.         { value: 'inherit', label: __( 'Theme', 'kadence-blocks' ) },
  403.     ];
  404.  
  405.     const previewMarginTop = getPreviewSize( previewDevice, ( undefined !== margin?.[0] ? margin[0] : '' ), ( undefined !== tabletMargin?.[0] ? tabletMargin[0] : '' ), ( undefined !== mobileMargin?.[0] ? mobileMargin[0] : '' ) );
  406.     const previewMarginRight = getPreviewSize( previewDevice, ( undefined !== margin?.[1] ? margin[1] : '' ), ( undefined !== tabletMargin?.[1] ? tabletMargin[1] : '' ), ( undefined !== mobileMargin?.[1] ? mobileMargin[1] : '' ) );
  407.     const previewMarginBottom = getPreviewSize( previewDevice, ( undefined !== margin?.[2] ? margin[2] : '' ), ( undefined !== tabletMargin?.[2] ? tabletMargin[2] : '' ), ( undefined !== mobileMargin?.[2] ? mobileMargin[2] : '' ) );
  408.     const previewMarginLeft = getPreviewSize( previewDevice, ( undefined !== margin?.[3] ? margin[3] : '' ), ( undefined !== tabletMargin?.[3] ? tabletMargin[3] : '' ), ( undefined !== mobileMargin?.[3] ? mobileMargin[3] : '' ) );
  409.     const previewMarginUnit = ( marginUnit ? marginUnit : 'px' );
  410.  
  411.     const previewPaddingTop = getPreviewSize( previewDevice, ( undefined !== padding?.[0] ? padding[0] : '' ), ( undefined !== tabletPadding?.[0] ? tabletPadding[0] : '' ), ( undefined !== mobilePadding?.[0] ? mobilePadding[0] : '' ) );
  412.     const previewPaddingRight = getPreviewSize( previewDevice, ( undefined !== padding?.[1] ? padding[1] : '' ), ( undefined !== tabletPadding?.[1] ? tabletPadding[1] : '' ), ( undefined !== mobilePadding?.[1] ? mobilePadding[1] : '' ) );
  413.     const previewPaddingBottom = getPreviewSize( previewDevice, ( undefined !== padding?.[2] ? padding[2] : '' ), ( undefined !== tabletPadding?.[2] ? tabletPadding[2] : '' ), ( undefined !== mobilePadding?.[2] ? mobilePadding[2] : '' ) );
  414.     const previewPaddingLeft = getPreviewSize( previewDevice, ( undefined !== padding?.[3] ? padding[3] : '' ), ( undefined !== tabletPadding?.[3] ? tabletPadding[3] : '' ), ( undefined !== mobilePadding?.[3] ? mobilePadding[3] : '' ) );
  415.  
  416.     const previewRadiusTop = getPreviewSize( previewDevice, ( undefined !== borderRadius ? borderRadius[ 0 ] : '' ), ( undefined !== tabletBorderRadius ? tabletBorderRadius[ 0 ] : '' ), ( undefined !== mobileBorderRadius ? mobileBorderRadius[ 0 ] : '' ) );
  417.     const previewRadiusRight = getPreviewSize( previewDevice, ( undefined !== borderRadius ? borderRadius[ 1 ] : '' ), ( undefined !== tabletBorderRadius ? tabletBorderRadius[ 1 ] : '' ), ( undefined !== mobileBorderRadius ? mobileBorderRadius[ 1 ] : '' ) );
  418.     const previewRadiusBottom = getPreviewSize( previewDevice, ( undefined !== borderRadius ? borderRadius[ 2 ] : '' ), ( undefined !== tabletBorderRadius ? tabletBorderRadius[ 2 ] : '' ), ( undefined !== mobileBorderRadius ? mobileBorderRadius[ 2 ] : '' ) );
  419.     const previewRadiusLeft = getPreviewSize( previewDevice, ( undefined !== borderRadius ? borderRadius[ 3 ] : '' ), ( undefined !== tabletBorderRadius ? tabletBorderRadius[ 3 ] : '' ), ( undefined !== mobileBorderRadius ? mobileBorderRadius[ 3 ] : '' ) );
  420.  
  421.     const previewIconSize = getPreviewSize( previewDevice, ( undefined !== iconSize?.[0] ? iconSize[0] : '' ), ( undefined !== iconSize?.[1] ? iconSize[1] : '' ), ( undefined !== iconSize?.[2] ? iconSize[2] : '' ) );
  422.     const previewIconPaddingTop = getPreviewSize( previewDevice, ( undefined !== iconPadding?.[0] ? iconPadding[0] : '' ), ( undefined !== tabletIconPadding?.[0] ? tabletIconPadding[0] : '' ), ( undefined !== mobileIconPadding?.[0] ? mobileIconPadding[0] : '' ) );
  423.     const previewIconPaddingRight = getPreviewSize( previewDevice, ( undefined !== iconPadding?.[1] ? iconPadding[1] : '' ), ( undefined !== tabletIconPadding?.[1] ? tabletIconPadding[1] : '' ), ( undefined !== mobileIconPadding?.[1] ? mobileIconPadding[1] : '' ) );
  424.     const previewIconPaddingBottom = getPreviewSize( previewDevice, ( undefined !== iconPadding?.[2] ? iconPadding[2] : '' ), ( undefined !== tabletIconPadding?.[2] ? tabletIconPadding[2] : '' ), ( undefined !== mobileIconPadding?.[2] ? mobileIconPadding[2] : '' ) );
  425.     const previewIconPaddingLeft = getPreviewSize( previewDevice, ( undefined !== iconPadding?.[ 3 ] ? iconPadding[ 3 ] : '' ), ( undefined !== tabletIconPadding?.[ 3 ] ? tabletIconPadding[ 3 ] : '' ), ( undefined !== mobileIconPadding?.[ 3 ] ? mobileIconPadding[ 3 ] : '' ) );
  426.  
  427.     const previewFixedWidth = getPreviewSize( previewDevice, ( undefined !== width?.[0] ? width[0] : '' ), ( undefined !== width?.[1] ? width[1] : undefined ), ( undefined !== width?.[2] ? width[2] : undefined ) );
  428.  
  429.     const previewBorderTopStyle = getBorderStyle( previewDevice, 'top', borderStyle, tabletBorderStyle, mobileBorderStyle );
  430.     const previewBorderRightStyle = getBorderStyle( previewDevice, 'right', borderStyle, tabletBorderStyle, mobileBorderStyle );
  431.     const previewBorderBottomStyle = getBorderStyle( previewDevice, 'bottom', borderStyle, tabletBorderStyle, mobileBorderStyle );
  432.     const previewBorderLeftStyle = getBorderStyle( previewDevice, 'left', borderStyle, tabletBorderStyle, mobileBorderStyle );
  433.     const previewBorderTopColor = getBorderColor( previewDevice, 'top', borderStyle, tabletBorderStyle, mobileBorderStyle );
  434.     const previewBorderRightColor = getBorderColor( previewDevice, 'right', borderStyle, tabletBorderStyle, mobileBorderStyle );
  435.     const previewBorderBottomColor = getBorderColor( previewDevice, 'bottom', borderStyle, tabletBorderStyle, mobileBorderStyle );
  436.     const previewBorderLeftColor = getBorderColor( previewDevice, 'left', borderStyle, tabletBorderStyle, mobileBorderStyle );
  437.     const inheritBorder = [ borderStyle, tabletBorderStyle, mobileBorderStyle ];
  438.     const previewBorderHoverTopStyle = getBorderStyle( previewDevice, 'top', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  439.     const previewBorderHoverRightStyle = getBorderStyle( previewDevice, 'right', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  440.     const previewBorderHoverBottomStyle = getBorderStyle( previewDevice, 'bottom', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  441.     const previewBorderHoverLeftStyle = getBorderStyle( previewDevice, 'left', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  442.     const previewBorderHoverTopColor = getBorderColor( previewDevice, 'top', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  443.     const previewBorderHoverRightColor = getBorderColor( previewDevice, 'right', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  444.     const previewBorderHoverBottomColor = getBorderColor( previewDevice, 'bottom', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  445.     const previewBorderHoverLeftColor = getBorderColor( previewDevice, 'left', borderHoverStyle, tabletBorderHoverStyle, mobileBorderHoverStyle, inheritBorder );
  446.  
  447.     const previewHoverRadiusTop = getPreviewSize( previewDevice, ( undefined !== borderHoverRadius ? borderHoverRadius[ 0 ] : '' ), ( undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[ 0 ] : '' ), ( undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[ 0 ] : '' ) );
  448.     const previewHoverRadiusRight = getPreviewSize( previewDevice, ( undefined !== borderHoverRadius ? borderHoverRadius[ 1 ] : '' ), ( undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[ 1 ] : '' ), ( undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[ 1 ] : '' ) );
  449.     const previewHoverRadiusBottom = getPreviewSize( previewDevice, ( undefined !== borderHoverRadius ? borderHoverRadius[ 2 ] : '' ), ( undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[ 2 ] : '' ), ( undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[ 2 ] : '' ) );
  450.     const previewHoverRadiusLeft = getPreviewSize( previewDevice, ( undefined !== borderHoverRadius ? borderHoverRadius[ 3 ] : '' ), ( undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[ 3 ] : '' ), ( undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[ 3 ] : '' ) );
  451.  
  452.     const previewAlign = getPreviewSize( previewDevice, ( undefined !== btnsBlock?.[0]?.attributes?.hAlign ? btnsBlock?.[0]?.attributes?.hAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.thAlign ? btnsBlock?.[0]?.attributes?.thAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.mhAlign ? btnsBlock?.[0]?.attributes?.mhAlign : '' ) );
  453.     const previewVertical = getPreviewSize( previewDevice, ( undefined !== btnsBlock?.[0]?.attributes?.vAlign ? btnsBlock?.[0]?.attributes?.vAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.tvAlign ? btnsBlock?.[0]?.attributes?.tvAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.mvAlign ? btnsBlock?.[0]?.attributes?.mvAlign : '' ) );
  454.     const previewOnlyIcon = getPreviewSize( previewDevice, ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : undefined ), ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : undefined ) );
  455.     let btnbg;
  456.     // let btnGrad;
  457.     // let btnGrad2;
  458.     if ( undefined !== backgroundType && 'gradient' === backgroundType ) {
  459.         btnbg = gradient;
  460.         // btnGrad = ( 'transparent' === background || undefined === background ? 'rgba(255,255,255,0)' : KadenceColorOutput( background ) );
  461.         // btnGrad2 = ( undefined !== gradient && undefined !== gradient[ 0 ] && '' !== gradient[ 0 ] ? KadenceColorOutput( gradient[ 0 ], ( undefined !== gradient && gradient[1] !== undefined ? gradient[ 1 ] : 1 ) ) : KadenceColorOutput( '#999999', ( undefined !== gradient && gradient[1] !== undefined ? gradient[1] : 1 ) ) );
  462.         // if ( undefined !== gradient && 'radial' === gradient[ 4 ] ) {
  463.         //  btnbg = `radial-gradient(at ${( undefined === gradient[ 6 ] ? 'center center' : gradient[ 6 ] )}, ${btnGrad} ${( undefined === gradient[ 2 ] ? '0' : gradient[ 2 ] )}%, ${btnGrad2} ${( undefined === gradient[ 3 ] ? '100' : gradient[ 3 ] )}%)`;
  464.         // } else if ( undefined === gradient || 'radial' !== gradient[ 4 ] ) {
  465.         //  btnbg = `linear-gradient(${( undefined !== gradient && undefined !== gradient[ 5 ] ? gradient[ 5 ] : '180' )}deg, ${btnGrad} ${( undefined !== gradient && undefined !== gradient[ 2 ] ? gradient[ 2 ] : '0' )}%, ${btnGrad2} ${( undefined !== gradient && undefined !== gradient[ 3 ] ? gradient[ 3 ] : '100' )}%)`;
  466.         // }
  467.     } else {
  468.         btnbg = ( 'transparent' === background || undefined === background ? undefined : KadenceColorOutput( background ) );
  469.     }
  470.     const nonTransAttrs = [ 'hideLink', 'link', 'target', 'download', 'text', 'sponsor' ];
  471.     const btnClassName = classnames( {
  472.         'kt-button'                   : true,
  473.         [ `kt-button-${uniqueID}` ]  : true,
  474.         [ `kb-btn-global-${inheritStyles}` ] : inheritStyles,
  475.         'wp-block-button__link'              : inheritStyles && 'inherit' === inheritStyles,
  476.         [ `kb-btn-has-icon` ]                : icon,
  477.         [ `kt-btn-svg-show-${( !iconHover ? 'always' : 'hover' )}` ]   : icon,
  478.         [ `kb-btn-only-icon` ]               : previewOnlyIcon,
  479.         [ `kt-btn-size-${( sizePreset ? sizePreset : 'standard' )}` ]  : true,
  480.     } );
  481.     const classes = classnames( {
  482.         className                  : className,
  483.         [ `kb-single-btn-${uniqueID}` ]  : true,
  484.         [ `kt-btn-width-type-${( widthType ? widthType : 'auto' )}` ]   : true,
  485.     } );
  486.     const blockProps = useBlockProps( {
  487.         className: classes,
  488.         style: {
  489.             width        : ( undefined !== widthType && 'fixed' === widthType && '%' === ( undefined !== widthUnit ? widthUnit : 'px' ) && '' !== previewFixedWidth ? previewFixedWidth + ( undefined !== widthUnit ? widthUnit : 'px' ) : undefined ),
  490.         },
  491.     } );
  492.     let btnRad = '0';
  493.     let btnBox = '';
  494.     let btnBox2 = '';
  495.     const btnbgHover = ( 'gradient' === backgroundHoverType ? gradientHover : KadenceColorOutput( backgroundHover ) );
  496.     if ( undefined !== displayHoverShadow && displayHoverShadow && undefined !== shadowHover?.[0] && undefined !== shadowHover?.[0].inset && false === shadowHover?.[0].inset ) {
  497.         btnBox = `${( undefined !== shadowHover?.[0].inset && shadowHover[0].inset ? 'inset ' : '' ) + ( undefined !== shadowHover?.[0].hOffset ? shadowHover[0].hOffset : 0 ) + 'px ' + ( undefined !== shadowHover?.[0].vOffset ? shadowHover[0].vOffset : 0 ) + 'px ' + ( undefined !== shadowHover?.[0].blur ? shadowHover[0].blur : 14 ) + 'px ' + ( undefined !== shadowHover?.[0].spread ? shadowHover[0].spread : 0 ) + 'px ' + KadenceColorOutput( ( undefined !== shadowHover?.[0].color ? shadowHover[0].color : '#000000' ), ( undefined !== shadowHover?.[0].opacity ? shadowHover[0].opacity : 1 ) ) }`;
  498.         btnBox2 = 'none';
  499.         btnRad = '0';
  500.     }
  501.     if ( undefined !== displayHoverShadow && displayHoverShadow && undefined !== shadowHover?.[0] && undefined !== shadowHover?.[0].inset && true === shadowHover?.[0].inset ) {
  502.         btnBox2 = `${( undefined !== shadowHover?.[0].inset && shadowHover[0].inset ? 'inset ' : '' ) + ( undefined !== shadowHover?.[0].hOffset ? shadowHover[0].hOffset : 0 ) + 'px ' + ( undefined !== shadowHover?.[0].vOffset ? shadowHover[0].vOffset : 0 ) + 'px ' + ( undefined !== shadowHover?.[0].blur ? shadowHover[0].blur : 14 ) + 'px ' + ( undefined !== shadowHover?.[0].spread ? shadowHover[0].spread : 0 ) + 'px ' + KadenceColorOutput( ( undefined !== shadowHover?.[0].color ? shadowHover[0].color : '#000000' ), ( undefined !== shadowHover?.[0].opacity ? shadowHover[0].opacity : 1 ) ) }`;
  503.         btnRad = ( undefined !== borderRadius ? borderRadius : '3' );
  504.         btnBox = 'none';
  505.     }
  506.     const previewTypographyCSS = typographyStyle( typography, `.editor-styles-wrapper .wp-block-kadence-advancedbtn .kb-single-btn-${uniqueID} .kt-button-${uniqueID}`, previewDevice );
  507.     const renderCSS = (
  508.         <style>
  509.             { ( '' !== previewTypographyCSS ? previewTypographyCSS : '' ) }
  510.             {`.kb-single-btn-${uniqueID} .kt-button-${uniqueID}.kb-btn-global-outline {`}
  511.                 {( ! previewBorderTopStyle && previewBorderTopColor ? 'border-top-color:' + previewBorderTopColor + ';' : '' )}
  512.                 {( ! previewBorderRightStyle && previewBorderRightColor ? 'border-right-color:' + previewBorderRightColor + ';' : '' )}
  513.                 {( ! previewBorderLeftStyle && previewBorderLeftColor ? 'border-left-color:' + previewBorderLeftColor + ';' : '' )}
  514.                 {( ! previewBorderBottomStyle && previewBorderBottomColor ? 'border-bottom-color:' + previewBorderBottomColor + ';' : '' )}
  515.             {'}'}
  516.             {`.kb-single-btn-${uniqueID} .kt-button-${uniqueID}.kb-btn-global-outline:hover {`}
  517.                 {( ! previewBorderHoverTopStyle && previewBorderHoverTopColor ? 'border-top-color:' + previewBorderHoverTopColor + ';' : '' )}
  518.                 {( ! previewBorderHoverRightStyle && previewBorderHoverRightColor ? 'border-right-color:' + previewBorderHoverRightColor + ';' : '' )}
  519.                 {( ! previewBorderHoverLeftStyle && previewBorderHoverLeftColor ? 'border-left-color:' + previewBorderHoverLeftColor + ';' : '' )}
  520.                 {( ! previewBorderHoverBottomStyle && previewBorderHoverBottomColor ? 'border-bottom-color:' + previewBorderHoverBottomColor + ';' : '' )}
  521.             {'}'}
  522.             {`.kb-single-btn-${uniqueID} .kt-button-${uniqueID}:hover {`}
  523.                 {( colorHover ? 'color:' + KadenceColorOutput( colorHover ) + '!important;' : '' )}
  524.                 {( btnBox ? 'box-shadow:' + btnBox + '!important;' : '' )}
  525.                 {( previewBorderHoverTopStyle ? 'border-top:' + previewBorderHoverTopStyle + '!important;' : '' )}
  526.                 {( previewBorderHoverRightStyle ? 'border-right:' + previewBorderHoverRightStyle + '!important;' : '' )}
  527.                 {( previewBorderHoverLeftStyle ? 'border-left:' + previewBorderHoverLeftStyle + '!important;' : '' )}
  528.                 {( previewBorderHoverBottomStyle ? 'border-bottom:' + previewBorderHoverBottomStyle + '!important;' : '' )}
  529.                 {( '' !== previewHoverRadiusTop ? 'border-top-left-radius:' + previewHoverRadiusTop + ( borderHoverRadiusUnit ? borderHoverRadiusUnit : 'px' ) + '!important;' : '' )}
  530.                 {( '' !== previewHoverRadiusRight ? 'border-top-right-radius:' + previewHoverRadiusRight + ( borderHoverRadiusUnit ? borderHoverRadiusUnit : 'px' ) + '!important;' : '' )}
  531.                 {( '' !== previewHoverRadiusLeft ? 'border-bottom-left-radius:' + previewHoverRadiusLeft + ( borderHoverRadiusUnit ? borderHoverRadiusUnit : 'px' ) + '!important;' : '' )}
  532.                 {( '' !== previewHoverRadiusBottom ? 'border-bottom-right-radius:' + previewHoverRadiusBottom + ( borderHoverRadiusUnit ? borderHoverRadiusUnit : 'px' ) + '!important;' : '' )}
  533.             {'}'}
  534.             {( iconColorHover ? `.kb-single-btn-${uniqueID} .kt-button-${uniqueID}:hover .kt-btn-svg-icon { color:${KadenceColorOutput( iconColorHover )} !important;}` : '' )}
  535.             {`.kb-single-btn-${uniqueID} .kt-button-${uniqueID}::before {`}
  536.                     {( btnbgHover ? 'background:' + btnbgHover + ';' : '' )}
  537.                     {( btnBox2 ? 'box-shadow:' + btnBox2 + ';' : '' )}
  538.                     {( btnRad ? 'border-radius:' + btnRad + 'px;' : '' )}
  539.             {'}'}
  540.         </style>
  541.     );
  542.     return (
  543.         <div {...blockProps}>
  544.             {renderCSS}
  545.             <BlockControls>
  546.                 <ToolbarGroup>
  547.                     <JustifyContentControl
  548.                         value={ previewAlign }
  549.                         onChange={ value => {
  550.                             if ( previewDevice === 'Mobile' ) {
  551.                                 updateParentBlock( 'mhAlign', ( value ? value : '' ) );
  552.                             } else if ( previewDevice === 'Tablet' ) {
  553.                                 updateParentBlock( 'thAlign', ( value ? value : '' ) );
  554.                             } else {
  555.                                 updateParentBlock( 'hAlign', ( value ? value : 'center' ) );
  556.                             }
  557.                         } }
  558.                     />
  559.                     <BlockVerticalAlignmentControl
  560.                         value={previewVertical}
  561.                         onChange={ value => {
  562.                             if ( previewDevice === 'Mobile' ) {
  563.                                 updateParentBlock( 'mvAlign', ( value ? value : '' ) );
  564.                             } else if ( previewDevice === 'Tablet' ) {
  565.                                 updateParentBlock( 'tvAlign', ( value ? value : '' ) );
  566.                             } else {
  567.                                 updateParentBlock( 'vAlign', ( value ? value : 'center' ) );
  568.                             }
  569.                         }}
  570.                     />
  571.                 </ToolbarGroup>
  572.                 { ! hideLink && (
  573.                     <ToolbarGroup>
  574.                         <ToolbarButton
  575.                             name="link"
  576.                             icon={ linkIcon }
  577.                             title={ __( 'Link', 'kadence-blocks' ) }
  578.                             shortcut={ displayShortcut.primary( 'k' ) }
  579.                             onClick={ startEditing }
  580.                         />
  581.                     </ToolbarGroup>
  582.                 ) }
  583.                 <CopyPasteAttributes
  584.                     attributes={ attributes }
  585.                     excludedAttrs={ nonTransAttrs }
  586.                     defaultAttributes={ metadata['attributes'] }
  587.                     blockSlug={ metadata['name'] }
  588.                     onPaste={ attributesToPaste => setAttributes( attributesToPaste ) }
  589.                 />
  590.             </BlockControls>
  591.             { ! hideLink && isSelected && isEditingURL && (
  592.                 <URLInputInline
  593.                     url={link}
  594.                     onChangeUrl={value => {
  595.                         setAttributes( { link: value } );
  596.                     }}
  597.                     additionalControls={true}
  598.                     changeTargetType={true}
  599.                     opensInNewTab={( undefined !== target ? target : '' )}
  600.                     onChangeTarget={value => {
  601.                         setAttributes( { target: value } );
  602.                     }}
  603.                     linkNoFollow={( undefined !== noFollow ? noFollow : false )}
  604.                     onChangeFollow={value => {
  605.                         setAttributes( { noFollow: value } );
  606.                     }}
  607.                     linkSponsored={( undefined !== sponsored ? sponsored : false )}
  608.                     onChangeSponsored={value => {
  609.                         setAttributes( { sponsored: value } );
  610.                     }}
  611.                     linkDownload={( undefined !== download ? download : false )}
  612.                     onChangeDownload={value => {
  613.                         setAttributes( { download: value } );
  614.                     }}
  615.                     dynamicAttribute={'link'}
  616.                     allowClear={true}
  617.                     isSelected={ isSelected }
  618.                     attributes={ attributes }
  619.                     setAttributes={ setAttributes }
  620.                     name={ name }
  621.                     clientId={ clientId }
  622.                     context={ context }
  623.                 />
  624.             ) }
  625.             {showSettings( 'allSettings', 'kadence/advancedbtn' ) && (
  626.                 <>
  627.                     <InspectorControls>
  628.                         <InspectorControlTabs
  629.                             panelName={'singlebtn'}
  630.                             setActiveTab={( value ) => setActiveTab( value )}
  631.                             activeTab={ activeTab}
  632.                         />
  633.  
  634.                         {( activeTab === 'general' ) &&
  635.                             <>
  636.                                 <KadencePanelBody
  637.                                     title={__( 'Button Settings', 'kadence-blocks' ) }
  638.                                     initialOpen={true}
  639.                                     panelName={'kb-adv-single-btn'}
  640.                                 >
  641.                                     { ! hideLink && (
  642.                                         <URLInputControl
  643.                                             label={__( 'Button Link', 'kadence-blocks' )}
  644.                                             url={link}
  645.                                             onChangeUrl={value => {
  646.                                                 setAttributes( { link: value });
  647.                                             }}
  648.                                             additionalControls={true}
  649.                                             changeTargetType={true}
  650.                                             opensInNewTab={( undefined !== target ? target : '' )}
  651.                                             onChangeTarget={value => {
  652.                                                 setAttributes( { target: value });
  653.                                             }}
  654.                                             linkNoFollow={( undefined !== noFollow ? noFollow : false )}
  655.                                             onChangeFollow={value => {
  656.                                                 setAttributes( { noFollow: value });
  657.                                             }}
  658.                                             linkSponsored={( undefined !== sponsored ? sponsored : false )}
  659.                                             onChangeSponsored={value => {
  660.                                                 setAttributes( { sponsored: value });
  661.                                             }}
  662.                                             linkDownload={( undefined !== download ? download : false )}
  663.                                             onChangeDownload={value => {
  664.                                                 setAttributes( { download: value });
  665.                                             }}
  666.                                             dynamicAttribute={'link'}
  667.                                             allowClear={true}
  668.                                             isSelected={ isSelected }
  669.                                             attributes={ attributes }
  670.                                             setAttributes={ setAttributes }
  671.                                             name={ name }
  672.                                             clientId={ clientId }
  673.                                             context={ context }
  674.                                         />
  675.                                     )}
  676.                                     <KadenceRadioButtons
  677.                                         value={ inheritStyles }
  678.                                         options={ buttonStyleOptions }
  679.                                         hideLabel={false}
  680.                                         label={__( 'Button Inherit Styles', 'kadence-blocks' ) }
  681.                                         onChange={ value => {
  682.                                             setAttributes( {
  683.                                                 inheritStyles: value,
  684.                                             } );
  685.                                         }}
  686.                                     />
  687.                                     {showSettings( 'sizeSettings', 'kadence/advancedbtn' ) && (
  688.                                         <>
  689.                                             <KadenceRadioButtons
  690.                                                 value={ sizePreset }
  691.                                                 options={ btnSizes }
  692.                                                 hideLabel={false}
  693.                                                 label={__( 'Button Size', 'kadence-blocks' ) }
  694.                                                 onChange={ value => {
  695.                                                     setAttributes( {
  696.                                                         sizePreset: value,
  697.                                                     } );
  698.                                                 }}
  699.                                             />
  700.                                             <KadenceRadioButtons
  701.                                                 value={ widthType }
  702.                                                 options={ btnWidths }
  703.                                                 hideLabel={false}
  704.                                                 label={__( 'Button Width', 'kadence-blocks' ) }
  705.                                                 onChange={ value => {
  706.                                                     setAttributes( {
  707.                                                         widthType: value,
  708.                                                     } );
  709.                                                 }}
  710.                                             />
  711.                                             {'fixed' === widthType && (
  712.                                                 <div className="kt-inner-sub-section">
  713.                                                     <ResponsiveRangeControls
  714.                                                         label={__( 'Fixed Width', 'kadence-blocks' )}
  715.                                                         value={( undefined !== width?.[ 0 ] ? width[ 0 ] : undefined )}
  716.                                                         onChange={value => {
  717.                                                             setAttributes( { width: [ value, ( undefined !== width?.[1] ? width[1] : '' ), ( undefined !== width?.[2] ? width[2] : '' ) ] } );
  718.                                                         }}
  719.                                                         tabletValue={( undefined !== width?.[1] ? width[1] : undefined )}
  720.                                                         onChangeTablet={value => {
  721.                                                             setAttributes( { width: [ ( undefined !== width?.[ 0 ] ? width[ 0 ] : '' ), value, ( undefined !== width?.[2] ? width[2] : '' ) ] } );
  722.                                                         }}
  723.                                                         mobileValue={( undefined !== width?.[2] ? width[2] : undefined )}
  724.                                                         onChangeMobile={value => {
  725.                                                             setAttributes( { width: [ ( undefined !== width?.[ 0 ] ? width[ 0 ] : '' ), ( undefined !== width?.[1] ? width[1] : '' ), value ] } );
  726.                                                         }}
  727.                                                         min={0}
  728.                                                         max={( ( widthUnit ? widthUnit : 'px' ) !== 'px' ? 100 : 600 )}
  729.                                                         step={1}
  730.                                                         unit={widthUnit ? widthUnit : 'px'}
  731.                                                         onUnit={( value ) => {
  732.                                                             setAttributes( { widthUnit: value } );
  733.                                                         }}
  734.                                                         units={[ 'px', '%' ]}
  735.                                                     />
  736.                                                 </div>
  737.                                             )}
  738.                                         </>
  739.                                     )}
  740.                                 </KadencePanelBody>
  741.  
  742.                             </>
  743.                         }
  744.  
  745.                         {( activeTab === 'style' ) &&
  746.                             <>
  747.                                 { showSettings( 'colorSettings', 'kadence/advancedbtn' ) && (
  748.                                     <KadencePanelBody
  749.                                         title={__( 'Button Styles', 'kadence-blocks' ) }
  750.                                         initialOpen={true}
  751.                                         panelName={'kb-adv-single-btn-styles'}
  752.                                     >
  753.                                         <HoverToggleControl
  754.                                             hover={
  755.                                                 <>
  756.                                                     <PopColorControl
  757.                                                         label={__( 'Color Hover', 'kadence-blocks' )}
  758.                                                         value={( colorHover ? colorHover : '' )}
  759.                                                         default={''}
  760.                                                         onChange={value => setAttributes( { colorHover: value } )}
  761.                                                     />
  762.                                                     <BackgroundTypeControl
  763.                                                         label={ __( 'Hover Type', 'kadence-blocks' ) }
  764.                                                         type={ backgroundHoverType ? backgroundHoverType : 'normal' }
  765.                                                         onChange={ value => setAttributes( { backgroundHoverType: value } ) }
  766.                                                         allowedTypes={ [ 'normal', 'gradient' ] }
  767.                                                     />
  768.                                                     { 'gradient' === backgroundHoverType && (
  769.                                                         <GradientControl
  770.                                                             value={ gradientHover }
  771.                                                             onChange={ value => setAttributes( { gradientHover: value } ) }
  772.                                                             gradients={ [] }
  773.                                                         />
  774.                                                     ) }
  775.                                                     { 'normal' === backgroundHoverType && (
  776.                                                         <PopColorControl
  777.                                                             label={__( 'Background Color', 'kadence-blocks' )}
  778.                                                             value={( backgroundHover ? backgroundHover : '' )}
  779.                                                             default={''}
  780.                                                             onChange={value => setAttributes( { backgroundHover: value } )}
  781.                                                         />
  782.                                                     )}
  783.                                                     <ResponsiveBorderControl
  784.                                                         label={__( 'Border', 'kadence-blocks' )}
  785.                                                         value={borderHoverStyle}
  786.                                                         tabletValue={tabletBorderHoverStyle}
  787.                                                         mobileValue={mobileBorderHoverStyle}
  788.                                                         onChange={( value ) => setAttributes( { borderHoverStyle: value } )}
  789.                                                         onChangeTablet={( value ) => setAttributes( { tabletBorderHoverStyle: value } )}
  790.                                                         onChangeMobile={( value ) => setAttributes( { mobileBorderHoverStyle: value } )}
  791.                                                     />
  792.                                                     <ResponsiveMeasurementControls
  793.                                                         label={__( 'Border Radius', 'kadence-blocks' )}
  794.                                                         value={borderHoverRadius}
  795.                                                         tabletValue={tabletBorderHoverRadius}
  796.                                                         mobileValue={mobileBorderHoverRadius}
  797.                                                         onChange={( value ) => setAttributes( { borderHoverRadius: value } )}
  798.                                                         onChangeTablet={( value ) => setAttributes( { tabletBorderHoverRadius: value } )}
  799.                                                         onChangeMobile={( value ) => setAttributes( { mobileBorderHoverRadius: value } )}
  800.                                                         unit={borderHoverRadiusUnit}
  801.                                                         units={[ 'px', 'em', 'rem', '%' ]}
  802.                                                         onUnit={( value ) => setAttributes( { borderHoverRadiusUnit: value } )}
  803.                                                         max={(borderHoverRadiusUnit === 'em' || borderHoverRadiusUnit === 'rem' ? 24 : 500)}
  804.                                                         step={(borderHoverRadiusUnit === 'em' || borderHoverRadiusUnit === 'rem' ? 0.1 : 1)}
  805.                                                         min={ 0 }
  806.                                                         isBorderRadius={ true }
  807.                                                         allowEmpty={true}
  808.                                                     />
  809.                                                     <BoxShadowControl
  810.                                                         label={__( 'Box Shadow', 'kadence-blocks' )}
  811.                                                         enable={( undefined !== displayHoverShadow ? displayHoverShadow : false )}
  812.                                                         color={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].color ? shadowHover[ 0 ].color : '#000000' )}
  813.                                                         colorDefault={'#000000'}
  814.                                                         onArrayChange={( color, opacity ) => {
  815.                                                             saveShadowHover( { color: color, opacity: opacity } );
  816.                                                         }}
  817.                                                         opacity={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].opacity ? shadowHover[ 0 ].opacity : 0.2 )}
  818.                                                         hOffset={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].hOffset ? shadowHover[ 0 ].hOffset : 0 )}
  819.                                                         vOffset={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].vOffset ? shadowHover[ 0 ].vOffset : 0 )}
  820.                                                         blur={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].blur ? shadowHover[ 0 ].blur : 14 )}
  821.                                                         spread={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].spread ? shadowHover[ 0 ].spread : 0 )}
  822.                                                         inset={( undefined !== shadowHover && undefined !== shadowHover[ 0 ] && undefined !== shadowHover[ 0 ].inset ? shadowHover[ 0 ].inset : false )}
  823.                                                         onEnableChange={value => {
  824.                                                             setAttributes( {
  825.                                                                 displayHoverShadow: value,
  826.                                                             } );
  827.                                                         }}
  828.                                                         onColorChange={value => {
  829.                                                             saveShadowHover( { color: value } );
  830.                                                         }}
  831.                                                         onOpacityChange={value => {
  832.                                                             saveShadowHover( { opacity: value } );
  833.                                                         }}
  834.                                                         onHOffsetChange={value => {
  835.                                                             saveShadowHover( { hOffset: value } );
  836.                                                         }}
  837.                                                         onVOffsetChange={value => {
  838.                                                             saveShadowHover( { vOffset: value } );
  839.                                                         }}
  840.                                                         onBlurChange={value => {
  841.                                                             saveShadowHover( { blur: value } );
  842.                                                         }}
  843.                                                         onSpreadChange={value => {
  844.                                                             saveShadowHover( { spread: value } );
  845.                                                         }}
  846.                                                         onInsetChange={value => {
  847.                                                             saveShadowHover( { inset: value } );
  848.                                                         }}
  849.                                                     />
  850.                                                 </>
  851.                                             }
  852.                                             normal={
  853.                                                 <>
  854.                                                     <PopColorControl
  855.                                                         label={__( 'Color', 'kadence-blocks' )}
  856.                                                         value={( color ? color : '' )}
  857.                                                         default={''}
  858.                                                         onChange={value => setAttributes( { color: value } )}
  859.                                                     />
  860.                                                     <BackgroundTypeControl
  861.                                                         label={ __( 'Type', 'kadence-blocks' ) }
  862.                                                         type={ backgroundType ? backgroundType : 'normal' }
  863.                                                         onChange={ value => setAttributes( { backgroundType: value } ) }
  864.                                                         allowedTypes={ [ 'normal', 'gradient' ] }
  865.                                                     />
  866.                                                     { 'gradient' === backgroundType && (
  867.                                                         <GradientControl
  868.                                                             value={ gradient }
  869.                                                             onChange={ value => setAttributes( { gradient: value } ) }
  870.                                                             gradients={ [] }
  871.                                                         />
  872.                                                     ) }
  873.                                                     { 'normal' === backgroundType && (
  874.                                                         <PopColorControl
  875.                                                             label={__( 'Background Color', 'kadence-blocks' )}
  876.                                                             value={( background ? background : '' )}
  877.                                                             default={''}
  878.                                                             onChange={value => setAttributes( { background: value } )}
  879.                                                         />
  880.                                                     ) }
  881.                                                     <ResponsiveBorderControl
  882.                                                         label={__( 'Border', 'kadence-blocks' )}
  883.                                                         value={borderStyle}
  884.                                                         tabletValue={tabletBorderStyle}
  885.                                                         mobileValue={mobileBorderStyle}
  886.                                                         onChange={( value ) => setAttributes( { borderStyle: value } )}
  887.                                                         onChangeTablet={( value ) => setAttributes( { tabletBorderStyle: value } )}
  888.                                                         onChangeMobile={( value ) => setAttributes( { mobileBorderStyle: value } )}
  889.                                                     />
  890.                                                     <ResponsiveMeasurementControls
  891.                                                         label={__( 'Border Radius', 'kadence-blocks' )}
  892.                                                         value={borderRadius}
  893.                                                         tabletValue={tabletBorderRadius}
  894.                                                         mobileValue={mobileBorderRadius}
  895.                                                         onChange={( value ) => setAttributes( { borderRadius: value } )}
  896.                                                         onChangeTablet={( value ) => setAttributes( { tabletBorderRadius: value } )}
  897.                                                         onChangeMobile={( value ) => setAttributes( { mobileBorderRadius: value } )}
  898.                                                         unit={borderRadiusUnit}
  899.                                                         units={[ 'px', 'em', 'rem', '%' ]}
  900.                                                         onUnit={( value ) => setAttributes( { borderRadiusUnit: value } )}
  901.                                                         max={(borderRadiusUnit === 'em' || borderRadiusUnit === 'rem' ? 24 : 500)}
  902.                                                         step={(borderRadiusUnit === 'em' || borderRadiusUnit === 'rem' ? 0.1 : 1)}
  903.                                                         min={ 0 }
  904.                                                         isBorderRadius={ true }
  905.                                                         allowEmpty={true}
  906.                                                     />
  907.                                                     <BoxShadowControl
  908.                                                         label={__( 'Box Shadow', 'kadence-blocks' )}
  909.                                                         enable={( undefined !== displayShadow ? displayShadow : false )}
  910.                                                         color={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].color ? shadow[ 0 ].color : '#000000' )}
  911.                                                         colorDefault={'#000000'}
  912.                                                         onArrayChange={( color, opacity ) => {
  913.                                                             saveShadow( { color: color, opacity: opacity } );
  914.                                                         }}
  915.                                                         opacity={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].opacity ? shadow[ 0 ].opacity : 0.2 )}
  916.                                                         hOffset={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].hOffset ? shadow[ 0 ].hOffset : 0 )}
  917.                                                         vOffset={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].vOffset ? shadow[ 0 ].vOffset : 0 )}
  918.                                                         blur={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].blur ? shadow[ 0 ].blur : 14 )}
  919.                                                         spread={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].spread ? shadow[ 0 ].spread : 0 )}
  920.                                                         inset={( undefined !== shadow && undefined !== shadow[ 0 ] && undefined !== shadow[ 0 ].inset ? shadow[ 0 ].inset : false )}
  921.                                                         onEnableChange={value => {
  922.                                                             setAttributes( {
  923.                                                                 displayShadow: value,
  924.                                                             } );
  925.                                                         }}
  926.                                                         onColorChange={value => {
  927.                                                             saveShadow( { color: value } );
  928.                                                         }}
  929.                                                         onOpacityChange={value => {
  930.                                                             saveShadow( { opacity: value } );
  931.                                                         }}
  932.                                                         onHOffsetChange={value => {
  933.                                                             saveShadow( { hOffset: value } );
  934.                                                         }}
  935.                                                         onVOffsetChange={value => {
  936.                                                             saveShadow( { vOffset: value } );
  937.                                                         }}
  938.                                                         onBlurChange={value => {
  939.                                                             saveShadow( { blur: value } );
  940.                                                         }}
  941.                                                         onSpreadChange={value => {
  942.                                                             saveShadow( { spread: value } );
  943.                                                         }}
  944.                                                         onInsetChange={value => {
  945.                                                             saveShadow( { inset: value } );
  946.                                                         }}
  947.                                                     />
  948.                                                 </>
  949.                                             }
  950.                                         />
  951.                                     </KadencePanelBody>
  952.                                 )}
  953.                                 {showSettings( 'iconSettings', 'kadence/advancedbtn' ) && (
  954.                                     <KadencePanelBody
  955.                                         title={__( 'Icon Settings', 'kadence-blocks' ) }
  956.                                         initialOpen={false}
  957.                                         panelName={'kb-adv-single-btn-icons'}
  958.                                     >
  959.                                         <div className="kt-select-icon-container">
  960.                                             <KadenceIconPicker
  961.                                                 value={icon}
  962.                                                 onChange={value => {
  963.                                                     setAttributes( { icon: value } );
  964.                                                 }}
  965.                                                 allowClear={ true }
  966.                                             />
  967.                                         </div>
  968.                                         <SmallResponsiveControl
  969.                                             label={__( 'Icon and Text Display', 'kadence-blocks' )}
  970.                                             desktopChildren={<SelectControl
  971.                                                 value={( undefined !== onlyIcon?.[ 0 ] && onlyIcon[ 0 ] ? 'true' : 'false' )}
  972.                                                 options={[
  973.                                                     { value: 'false', label: __( 'Show Icon and Text', 'kadence-blocks' ) },
  974.                                                     { value: 'true', label: __( 'Show Only Icon', 'kadence-blocks' ) },
  975.                                                 ]}
  976.                                                 onChange={value => {
  977.                                                     setAttributes( { onlyIcon: [ ( value === 'true' ? true : false ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : '' ), ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : '' ) ] } );
  978.                                                 }}
  979.                                             />}
  980.                                             tabletChildren={<SelectControl
  981.                                                 value={( undefined !== onlyIcon?.[1] && onlyIcon[1] ? 'true' : ( undefined !== onlyIcon?.[1] && false === onlyIcon[1] ? 'false' : '' ) )}
  982.                                                 options={[
  983.                                                     { value: '', label: __( 'Inherit', 'kadence-blocks' ) },
  984.                                                     { value: 'false', label: __( 'Show Icon and Text', 'kadence-blocks' ) },
  985.                                                     { value: 'true', label: __( 'Show Only Icon', 'kadence-blocks' ) },
  986.                                                 ]}
  987.                                                 onChange={value => {
  988.                                                     let newValue = value;
  989.                                                     if ( value === 'true' ) {
  990.                                                         newValue = true;
  991.                                                     } else if ( value === 'false' ) {
  992.                                                         newValue = false;
  993.                                                     }
  994.                                                     setAttributes( { onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), newValue, ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : '' ) ] } );
  995.                                                 }}
  996.                                             />}
  997.                                             mobileChildren={<SelectControl
  998.                                                 value={( undefined !== onlyIcon?.[2] && onlyIcon[2] ? 'true' : ( undefined !== onlyIcon?.[2] && false === onlyIcon[2] ? 'false' : '' ) )}
  999.                                                 options={[
  1000.                                                     { value: '', label: __( 'Inherit', 'kadence-blocks' ) },
  1001.                                                     { value: 'false', label: __( 'Show Icon and Text', 'kadence-blocks' ) },
  1002.                                                     { value: 'true', label: __( 'Show Only Icon', 'kadence-blocks' ) },
  1003.                                                 ]}
  1004.                                                 onChange={value => {
  1005.                                                     let newValue = value;
  1006.                                                     if ( value === 'true' ) {
  1007.                                                         newValue = true;
  1008.                                                     } else if ( value === 'false' ) {
  1009.                                                         newValue = false;
  1010.                                                     }
  1011.                                                     setAttributes( { onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : '' ), newValue ] } );
  1012.                                                 }}
  1013.                                             />}
  1014.                                         />
  1015.                                         <SelectControl
  1016.                                             label={__( 'Icon Location', 'kadence-blocks' )}
  1017.                                             value={iconSide}
  1018.                                             options={[
  1019.                                                 { value: 'right', label: __( 'Right' ) },
  1020.                                                 { value: 'left', label: __( 'Left' ) },
  1021.                                             ]}
  1022.                                             onChange={value => {
  1023.                                                 setAttributes( { iconSide: value } );
  1024.                                             }}
  1025.                                         />
  1026.                                         <ResponsiveRangeControls
  1027.                                             label={__( 'Icon Size', 'kadence-blocks' )}
  1028.                                             value={( undefined !== iconSize?.[0] ? iconSize[0] : '' )}
  1029.                                             onChange={value => {
  1030.                                                 setAttributes( { iconSize: [ value, ( undefined !==iconSize[1] ? iconSize[1] : '' ), ( undefined !== iconSize?.[2] && iconSize[2] ?iconSize[2] : '' ) ] } );
  1031.                                             }}
  1032.                                             tabletValue={( undefined !== iconSize?.[1] ? iconSize[1] : '' )}
  1033.                                             onChangeTablet={( value ) => {
  1034.                                                 setAttributes( { iconSize: [ ( undefined !== iconSize?.[0] ? iconSize[0] : '' ), value, ( undefined !== iconSize?.[2] ? iconSize[2] : '' ) ] } );
  1035.                                             }}
  1036.                                             mobileValue={( undefined !== iconSize?.[2] ? iconSize[2] : '' )}
  1037.                                             onChangeMobile={( value ) => {
  1038.                                                 setAttributes( { iconSize: [ ( undefined !== iconSize?.[0] ? iconSize[0] : '' ), ( undefined !== iconSize?.[1] ? iconSize[1] : '' ), value ] } );
  1039.                                             }}
  1040.                                             min={0}
  1041.                                             max={( ( iconSizeUnit ? iconSizeUnit : 'px' ) !== 'px' ? 12 : 200 )}
  1042.                                             step={( ( iconSizeUnit ? iconSizeUnit : 'px' ) !== 'px' ? 0.1 : 1 )}
  1043.                                             unit={ iconSizeUnit ? iconSizeUnit : 'px'}
  1044.                                             onUnit={( value ) => {
  1045.                                                 setAttributes( { iconSizeUnit: value });
  1046.                                             }}
  1047.                                             units={[ 'px', 'em', 'rem' ]}
  1048.                                         />
  1049.                                         <PopColorControl
  1050.                                             label={__( 'Icon Color', 'kadence-blocks' )}
  1051.                                             value={(iconColor ? iconColor : '' )}
  1052.                                             default={''}
  1053.                                             onChange={value => {
  1054.                                                 setAttributes( { iconColor: value });
  1055.                                             }}
  1056.                                             swatchLabel2={__( 'Hover Color', 'kadence-blocks' )}
  1057.                                             value2={(iconColorHover ?iconColorHover : '' )}
  1058.                                             default2={''}
  1059.                                             onChange2={value => {
  1060.                                                 setAttributes( { iconColorHover: value });
  1061.                                             }}
  1062.                                         />
  1063.                                         <ResponsiveMeasureRangeControl
  1064.                                             label={__( 'Icon Padding', 'kadence-blocks' )}
  1065.                                             value={undefined !== iconPadding ? iconPadding : [ '', '', '', '' ]}
  1066.                                             tabletValue={undefined !== tabletIconPadding ? tabletIconPadding : [ '', '', '', '' ]}
  1067.                                             mobileValue={undefined !== mobileIconPadding ? mobileIconPadding : [ '', '', '', '' ]}
  1068.                                             onChange={( value ) => setAttributes( { iconPadding: value } )}
  1069.                                             onChangeTablet={( value ) => setAttributes( { tabletIconPadding: value } )}
  1070.                                             onChangeMobile={( value ) => setAttributes( { mobileIconPadding: value } )}
  1071.                                             min={( iconPaddingUnit === 'em' || iconPaddingUnit === 'rem' ? -2 : -200 )}
  1072.                                             max={( iconPaddingUnit === 'em' || iconPaddingUnit === 'rem' ? 12 : 200 )}
  1073.                                             step={( iconPaddingUnit === 'em' || iconPaddingUnit === 'rem' ? 0.1 : 1 )}
  1074.                                             unit={iconPaddingUnit}
  1075.                                             units={[ 'px', 'em', 'rem' ]}
  1076.                                             onUnit={( value ) => setAttributes( { iconPaddingUnit: value } )}
  1077.                                         />
  1078.                                     </KadencePanelBody>
  1079.                                 )}
  1080.                                 { showSettings( 'fontSettings', 'kadence/advancedbtn' ) && (
  1081.                                     <KadencePanelBody
  1082.                                         title={__( 'Typography Settings', 'kadence-blocks' )}
  1083.                                         initialOpen={false}
  1084.                                         panelName={'kb-adv-btn-font-family'}
  1085.                                     >
  1086.                                         <TypographyControls
  1087.                                             fontGroup={'button'}
  1088.                                             fontSize={typography[0].size}
  1089.                                             onFontSize={( value ) => saveTypography( { size: value } )}
  1090.                                             fontSizeType={typography[0].sizeType}
  1091.                                             onFontSizeType={( value ) => saveTypography( { sizeType: value } )}
  1092.                                             lineHeight={typography[0].lineHeight}
  1093.                                             onLineHeight={( value ) => saveTypography( { lineHeight: value } )}
  1094.                                             lineHeightType={typography[0].lineType}
  1095.                                             onLineHeightType={( value ) => saveTypography( { lineType: value } )}
  1096.                                             reLetterSpacing={typography[0].letterSpacing}
  1097.                                             onLetterSpacing={( value ) => saveTypography( { letterSpacing: value } )}
  1098.                                             letterSpacingType={typography[0].letterType}
  1099.                                             onLetterSpacingType={( value ) => saveTypography( { letterType: value } )}
  1100.                                             textTransform={typography[0].textTransform}
  1101.                                             onTextTransform={( value ) => saveTypography( { textTransform: value } )}
  1102.                                             fontFamily={typography[0].family}
  1103.                                             onFontFamily={( value ) => saveTypography( { family: value } )}
  1104.                                             onFontChange={( select ) => {
  1105.                                                 saveTypography( {
  1106.                                                     family: select.value,
  1107.                                                     google: select.google,
  1108.                                                 } );
  1109.                                             }}
  1110.                                             onFontArrayChange={( values ) => saveTypography( values )}
  1111.                                             googleFont={typography[0].google}
  1112.                                             onGoogleFont={( value ) => saveTypography( { google: value } )}
  1113.                                             loadGoogleFont={typography[0].loadGoogle}
  1114.                                             onLoadGoogleFont={( value ) => saveTypography( { loadGoogle: value } )}
  1115.                                             fontVariant={typography[0].variant}
  1116.                                             onFontVariant={( value ) => saveTypography( { variant: value } )}
  1117.                                             fontWeight={typography[0].weight}
  1118.                                             onFontWeight={( value ) => saveTypography( { weight: value } )}
  1119.                                             fontStyle={typography[0].style}
  1120.                                             onFontStyle={( value ) => saveTypography( { style: value } )}
  1121.                                             fontSubset={typography[0].subset}
  1122.                                             onFontSubset={( value ) => saveTypography( { subset: value } )}
  1123.                                         />
  1124.                                     </KadencePanelBody>
  1125.                                 )}
  1126.  
  1127.                             </>
  1128.                         }
  1129.  
  1130.                         {( activeTab === 'advanced' ) && (
  1131.                             <>
  1132.                                 {showSettings('marginSettings', 'kadence/advancedbtn') && (
  1133.                                     <>
  1134.                                         <KadencePanelBody panelName={'kb-single-button-margin-settings'}>
  1135.                                             <ResponsiveMeasureRangeControl
  1136.                                                 label={__( 'Padding', 'kadence-blocks' )}
  1137.                                                 value={padding}
  1138.                                                 onChange={( value ) => setAttributes( { padding: value } )}
  1139.                                                 tabletValue={tabletPadding}
  1140.                                                 onChangeTablet={( value ) => setAttributes( { tabletPadding: value } )}
  1141.                                                 mobileValue={mobilePadding}
  1142.                                                 onChangeMobile={( value ) => setAttributes( { mobilePadding: value } )}
  1143.                                                 min={( paddingUnit === 'em' || paddingUnit === 'rem' ? -25 : -400 )}
  1144.                                                 max={( paddingUnit === 'em' || paddingUnit === 'rem' ? 25 : 400 )}
  1145.                                                 step={( paddingUnit === 'em' || paddingUnit === 'rem' ? 0.1 : 1 )}
  1146.                                                 unit={paddingUnit}
  1147.                                                 units={[ 'px', 'em', 'rem' ]}
  1148.                                                 onUnit={( value ) => setAttributes( { paddingUnit: value } )}
  1149.                                                 onMouseOver={ paddingMouseOver.onMouseOver }
  1150.                                                 onMouseOut={ paddingMouseOver.onMouseOut }
  1151.                                             />
  1152.                                             <ResponsiveMeasureRangeControl
  1153.                                                 label={__( 'Margin', 'kadence-blocks' )}
  1154.                                                 value={margin}
  1155.                                                 onChange={( value ) => setAttributes( { margin: value } )}
  1156.                                                 tabletValue={tabletMargin}
  1157.                                                 onChangeTablet={( value ) => setAttributes( { tabletMargin: value } )}
  1158.                                                 mobileValue={mobileMargin}
  1159.                                                 onChangeMobile={( value ) => setAttributes( { mobileMargin: value } )}
  1160.                                                 min={( marginUnit === 'em' || marginUnit === 'rem' ? -25 : -400 )}
  1161.                                                 max={( marginUnit === 'em' || marginUnit === 'rem' ? 25 : 400 )}
  1162.                                                 step={( marginUnit === 'em' || marginUnit === 'rem' ? 0.1 : 1 )}
  1163.                                                 unit={marginUnit}
  1164.                                                 units={[ 'px', 'em', 'rem' ]}
  1165.                                                 onUnit={( value ) => setAttributes( { marginUnit: value } )}
  1166.                                                 onMouseOver={ marginMouseOver.onMouseOver }
  1167.                                                 onMouseOut={ marginMouseOver.onMouseOut }
  1168.                                             />
  1169.                                             <TextControl
  1170.                                                 label={ __( 'Add Aria Label', 'kadence-blocks' )}
  1171.                                                 value={ ( label ? label : '' )}
  1172.                                                 onChange={( value ) => setAttributes( { label: value })}
  1173.                                                 className={ 'kb-textbox-style' }
  1174.                                             />
  1175.                                         </KadencePanelBody>
  1176.  
  1177.                                         <div className="kt-sidebar-settings-spacer"></div>
  1178.                                     </>
  1179.                                 )}
  1180.  
  1181.                                 <KadenceBlockDefaults attributes={ attributes } defaultAttributes={ metadata['attributes'] } blockSlug={ metadata['name'] } excludedAttrs={ nonTransAttrs } />
  1182.                             </>
  1183.                         )}
  1184.                     </InspectorControls>
  1185.                 </>
  1186.             )}
  1187.             <div
  1188.                 id={`animate-id${uniqueID}`}
  1189.                 className={'btn-inner-wrap aos-animate kt-animation-wrap'}
  1190.                 data-aos={( kadenceAnimation ? kadenceAnimation : undefined )}
  1191.                 data-aos-duration={( kadenceAOSOptions && kadenceAOSOptions[0] && kadenceAOSOptions[0].duration ? kadenceAOSOptions[0].duration : undefined )}
  1192.                 data-aos-easing={( kadenceAOSOptions && kadenceAOSOptions[ 0 ] && kadenceAOSOptions[ 0 ].easing ? kadenceAOSOptions[ 0 ].easing : undefined )}
  1193.             >
  1194.                 <span
  1195.                     className={btnClassName}
  1196.                     style={{
  1197.                         paddingTop     : ( '' !== previewPaddingTop ? getSpacingOptionOutput( previewPaddingTop, paddingUnit) : undefined ),
  1198.                         paddingRight       : ( '' !== previewPaddingRight ? getSpacingOptionOutput( previewPaddingRight, paddingUnit) : undefined ),
  1199.                         paddingBottom      : ( '' !== previewPaddingBottom ? getSpacingOptionOutput( previewPaddingBottom, paddingUnit) : undefined ),
  1200.                         paddingLeft    : ( '' !== previewPaddingLeft ? getSpacingOptionOutput( previewPaddingLeft, paddingUnit) : undefined ),
  1201.                         marginTop      : ('' !==  previewMarginTop ? getSpacingOptionOutput( previewMarginTop, previewMarginUnit ) : undefined ),
  1202.                         marginRight    : ( '' !== previewMarginRight ? getSpacingOptionOutput( previewMarginRight, previewMarginUnit ) : undefined ),
  1203.                         marginBottom   : ('' !==  previewMarginBottom ? getSpacingOptionOutput( previewMarginBottom, previewMarginUnit ) : undefined ),
  1204.                         marginLeft     : ('' !==  previewMarginLeft ? getSpacingOptionOutput( previewMarginLeft, previewMarginUnit ) : undefined ),
  1205.                         borderTop: ( previewBorderTopStyle ? previewBorderTopStyle : undefined ),
  1206.                         borderRight: ( previewBorderRightStyle ? previewBorderRightStyle : undefined ),
  1207.                         borderBottom: ( previewBorderBottomStyle ? previewBorderBottomStyle : undefined ),
  1208.                         borderLeft: ( previewBorderLeftStyle ? previewBorderLeftStyle : undefined ),
  1209.                         borderTopLeftRadius: ( '' !== previewRadiusTop ? previewRadiusTop + ( borderRadiusUnit ? borderRadiusUnit : 'px' ) : undefined ),
  1210.                         borderTopRightRadius: ( '' !== previewRadiusRight ? previewRadiusRight + ( borderRadiusUnit ? borderRadiusUnit : 'px' ) : undefined ),
  1211.                         borderBottomRightRadius: ( '' !== previewRadiusBottom ? previewRadiusBottom + ( borderRadiusUnit ? borderRadiusUnit : 'px' ) : undefined ),
  1212.                         borderBottomLeftRadius: ( '' !== previewRadiusLeft ? previewRadiusLeft + ( borderRadiusUnit ? borderRadiusUnit : 'px' ) : undefined ),
  1213.                         boxShadow      : ( undefined !== displayShadow && displayShadow && undefined !== shadow && undefined !== shadow[0] && undefined !== shadow[0].color ? ( undefined !== shadow[0].inset && shadow[0].inset ? 'inset ' : '' ) + ( undefined !== shadow[0].hOffset ? shadow[0].hOffset : 0 ) + 'px ' + ( undefined !== shadow[0].vOffset ? shadow[0].vOffset : 0 ) + 'px ' + ( undefined !== shadow[0].blur ? shadow[0].blur : 14 ) + 'px ' + ( undefined !== shadow[0].spread ? shadow[0].spread : 0 ) + 'px ' + KadenceColorOutput( ( undefined !== shadow[0].color ? shadow[0].color : '#000000' ), ( undefined !== shadow[0].opacity ? shadow[0].opacity : 1 ) ) : undefined ),
  1214.  
  1215.                         background   : ( undefined !== btnbg ? btnbg : undefined ),
  1216.                         color        : ( undefined !== color ? KadenceColorOutput( color ) : undefined ),
  1217.                         width        : ( undefined !== widthType && 'fixed' === widthType && 'px' === ( undefined !== widthUnit ? widthUnit : 'px' ) && '' !== previewFixedWidth ? previewFixedWidth + ( undefined !== widthUnit ? widthUnit : 'px' ) : undefined ),
  1218.                     }}
  1219.                 >
  1220.                     {icon && 'left' === iconSide && (
  1221.                         <IconRender className={`kt-btn-svg-icon kt-btn-svg-icon-${icon} kt-btn-side-${iconSide}`} name={icon} size={'1em'} style={{
  1222.                             fontSize     : previewIconSize ? getFontSizeOptionOutput( previewIconSize, ( undefined !== iconSizeUnit ? iconSizeUnit : 'px' ) ) : undefined,
  1223.                             color        : ( '' !== iconColor ? KadenceColorOutput( iconColor ) : undefined ),
  1224.                             paddingTop   : ( previewIconPaddingTop ? getSpacingOptionOutput( previewIconPaddingTop, iconPaddingUnit ) : undefined ),
  1225.                             paddingRight : ( previewIconPaddingRight ? getSpacingOptionOutput( previewIconPaddingRight, iconPaddingUnit ) : undefined ),
  1226.                             paddingBottom: ( previewIconPaddingBottom ? getSpacingOptionOutput( previewIconPaddingBottom, iconPaddingUnit ) : undefined ),
  1227.                             paddingLeft  : ( previewIconPaddingLeft ? getSpacingOptionOutput( previewIconPaddingLeft, iconPaddingUnit ) : undefined ),
  1228.                         }}/>
  1229.                     )}
  1230.                     <RichText
  1231.                         tagName="div"
  1232.                         placeholder={__( 'Button...', 'kadence-blocks' )}
  1233.                         value={text}
  1234.                         onChange={value => setAttributes( { text: value } ) }
  1235.                         allowedFormats={applyFilters( 'kadence.whitelist_richtext_formats', [ 'kadence/insert-dynamic', 'core/bold', 'core/italic', 'core/strikethrough', 'toolset/inline-field' ], 'kadence/advancedbtn' )}
  1236.                         className={'kt-button-text'}
  1237.                         keepPlaceholderOnFocus
  1238.                     />
  1239.                     {icon && 'left' !== iconSide && (
  1240.                         <IconRender className={`kt-btn-svg-icon kt-btn-svg-icon-${icon} kt-btn-side-${iconSide}`} name={icon} size={'1em'} style={{
  1241.                             fontSize     : previewIconSize ? getFontSizeOptionOutput( previewIconSize, ( undefined !== iconSizeUnit ? iconSizeUnit : 'px' ) ) : undefined,
  1242.                             color        : ( '' !== iconColor ? KadenceColorOutput( iconColor ) : undefined ),
  1243.                             paddingTop   : ( previewIconPaddingTop ? getSpacingOptionOutput( previewIconPaddingTop, iconPaddingUnit ) : undefined ),
  1244.                             paddingRight : ( previewIconPaddingRight ? getSpacingOptionOutput( previewIconPaddingRight, iconPaddingUnit ) : undefined ),
  1245.                             paddingBottom: ( previewIconPaddingBottom ? getSpacingOptionOutput( previewIconPaddingBottom, iconPaddingUnit ) : undefined ),
  1246.                             paddingLeft  : ( previewIconPaddingLeft ? getSpacingOptionOutput( previewIconPaddingLeft, iconPaddingUnit ) : undefined ),
  1247.                         }}/>
  1248.                     )}
  1249.                     <SpacingVisualizer
  1250.                         type="inside"
  1251.                         forceShow={ paddingMouseOver.isMouseOver }
  1252.                         spacing={ [ getSpacingOptionOutput( previewPaddingTop, paddingUnit ), getSpacingOptionOutput( previewPaddingRight, paddingUnit ), getSpacingOptionOutput( previewPaddingBottom, paddingUnit ), getSpacingOptionOutput( previewPaddingLeft, paddingUnit ) ] }
  1253.                     />
  1254.                 </span>
  1255.                 <SpacingVisualizer
  1256.                     type="inside"
  1257.                     forceShow={ marginMouseOver.isMouseOver }
  1258.                     spacing={ [ getSpacingOptionOutput( previewMarginTop, previewMarginUnit ), getSpacingOptionOutput( previewMarginRight, previewMarginUnit ), getSpacingOptionOutput( previewMarginBottom, previewMarginUnit ), getSpacingOptionOutput( previewMarginLeft, previewMarginUnit ) ] }
  1259.                 />
  1260.                 { typography?.[ 0 ]?.google && (
  1261.                     <KadenceWebfontLoader typography={ typography } clientId={ clientId } id={ 'typography' } />
  1262.                 ) }
  1263.             </div>
  1264.         </div>
  1265.     );
  1266.  
  1267. }
  1268.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!