From 63f76ea77fd049d4df7c682a016f223271c57fa2 Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 28 Aug 2024 17:19:26 -0500 Subject: [PATCH] KAD-3299 Button settings --- .../class-kadence-blocks-search-block.php | 58 +- src/blocks/search/block.json | 324 +++- src/blocks/search/edit.js | 1514 ++++++++++++++++- src/blocks/single-icon/edit.js | 36 +- 4 files changed, 1794 insertions(+), 138 deletions(-) diff --git a/includes/blocks/class-kadence-blocks-search-block.php b/includes/blocks/class-kadence-blocks-search-block.php index eb8b9ccd7..9b6b898f2 100644 --- a/includes/blocks/class-kadence-blocks-search-block.php +++ b/includes/blocks/class-kadence-blocks-search-block.php @@ -94,7 +94,63 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { * @return mixed */ public function build_html( $attributes, $unique_id, $content, $block_instance ) { - return 'Search Block'; + + $content .= $this->build_button( $attributes, $unique_id, $content ); + + return $content; + } + + private function build_button( $attributes, $unique_id, $content ) { + $class_id = $unique_id; + $outer_classes = array( 'kadence-search-button', 'wp-block-kadence-search-button', 'wp-block-kadence-search-button' . $unique_id ); + $wrapper_args = array( + 'class' => implode( ' ', $outer_classes ), + 'data-uniqueid' => $unique_id, + ); + $wrapper_attributes = get_block_wrapper_attributes( $wrapper_args ); + $classes = array( 'kb-button', 'kt-button', 'button', 'kb-search-button', 'kb-btn' . $class_id ); + $classes[] = ! empty( $attributes['sizePreset'] ) ? 'kt-btn-size-' . $attributes['sizePreset'] : 'kt-btn-size-standard'; + $classes[] = ! empty( $attributes['widthType'] ) ? 'kt-btn-width-type-' . $attributes['widthType'] : 'kt-btn-width-type-auto'; + $classes[] = ! empty( $attributes['inheritStyles'] ) ? 'kb-btn-global-' . $attributes['inheritStyles'] : 'kb-btn-global-fill'; + $classes[] = ! empty( $attributes['text'] ) ? 'kt-btn-has-text-true' : 'kt-btn-has-text-false'; + $classes[] = ! empty( $attributes['icon'] ) ? 'kt-btn-has-svg-true' : 'kt-btn-has-svg-false'; + if ( ! empty( $attributes['inheritStyles'] ) && 'inherit' === $attributes['inheritStyles'] ) { + $classes[] = 'wp-block-button__link'; + } + $button_args = array( + 'class' => implode( ' ', $classes ), + ); + if ( ! empty( $attributes['anchor'] ) ) { + $button_args['id'] = $attributes['anchor']; + } + $button_args['type'] = 'submit'; + if ( ! empty( $attributes['label'] ) ) { + $button_args['aria-label'] = $attributes['label']; + } + $button_wrap_attributes = array(); + foreach ( $button_args as $key => $value ) { + $button_wrap_attributes[] = $key . '="' . esc_attr( $value ) . '"'; + } + $button_wrapper_attributes = implode( ' ', $button_wrap_attributes ); + $text = ! empty( $attributes['text'] ) ? '' . $attributes['text'] . '' : ''; + $svg_icon = ''; + if ( ! empty( $attributes['icon'] ) ) { + $type = substr( $attributes['icon'], 0, 2 ); + $line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false ); + $fill = ( $line_icon ? 'none' : 'currentColor' ); + $stroke_width = false; + + if ( $line_icon ) { + $stroke_width = 2; + } + $svg_icon = Kadence_Blocks_Svg_Render::render( $attributes['icon'], $fill, $stroke_width ); + } + $icon_left = ! empty( $svg_icon ) && ! empty( $attributes['iconSide'] ) && 'left' === $attributes['iconSide'] ? '' . $svg_icon . '' : ''; + $icon_right = ! empty( $svg_icon ) && ! empty( $attributes['iconSide'] ) && 'right' === $attributes['iconSide'] ? '' . $svg_icon . '' : ''; + $html_tag = 'button'; + $content = sprintf( '<%1$s %2$s>%3$s%4$s%5$s', $html_tag, $button_wrapper_attributes, $icon_left, $text, $icon_right ); + $content = sprintf( '
%2$s
', $wrapper_attributes, $content ); + return $content; } /** diff --git a/src/blocks/search/block.json b/src/blocks/search/block.json index 35cd5f666..e6f7d00ff 100644 --- a/src/blocks/search/block.json +++ b/src/blocks/search/block.json @@ -9,40 +9,342 @@ "uniqueID": { "type": "string" }, + "displayStyle": { + "enum": [ "input", "modal" ], + "default": "input" + }, + "text": { + "type": "string", + "default": "", + "__experimentalRole": "content" + }, + "style": { + "type": "string", + "default": "basic" + }, + "sizePreset": { + "type": "string", + "default": "standard" + }, + "gap": { + "type": "array", + "default": [ "", "", "" ] + }, + "width": { + "type": "array", + "default": [ "", "", "" ] + }, + "widthUnit": { + "type": "string", + "default": "px" + }, + "widthType": { + "type": "string", + "default": "auto" + }, + "padding": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "tablePadding": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "mobilePadding": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "paddingUnit": { + "type": "string", + "default": "px" + }, "margin": { "type": "array", - "default": ["", "", "", ""] + "default": [ "", "", "", "" ] }, "tabletMargin": { "type": "array", - "default": ["", "", "", ""] + "default": [ "", "", "", "" ] }, "mobileMargin": { "type": "array", - "default": ["", "", "", ""] + "default": [ "", "", "", "" ] }, - "marginType": { + "marginUnit": { "type": "string", "default": "px" }, - "padding": { + "color": { + "type": "string", + "default": "" + }, + "background": { + "type": "string", + "default": "" + }, + "gradient": { + "type": "string", + "default": "" + }, + "backgroundType": { + "type": "string", + "default": "normal" + }, + "colorHover": { + "type": "string", + "default": "" + }, + "backgroundHover": { + "type": "string", + "default": "" + }, + "backgroundHoverType": { + "type": "string", + "default": "normal" + }, + "gradientHover": { + "type": "string", + "default": "" + }, + "borderStyle": { "type": "array", - "default": ["", "", "", ""] + "default": [ + { + "top": [ "", "", "" ], + "right": [ "", "", "" ], + "bottom": [ "", "", "" ], + "left": [ "", "", "" ], + "unit": "px" + } + ] }, - "tabletPadding": { + "tabletBorderStyle": { "type": "array", - "default": ["", "", "", ""] + "default": [ + { + "top": [ "", "", "" ], + "right": [ "", "", "" ], + "bottom": [ "", "", "" ], + "left": [ "", "", "" ], + "unit": "px" + } + ] }, - "mobilePadding": { + "mobileBorderStyle": { + "type": "array", + "default": [ + { + "top": [ "", "", "" ], + "right": [ "", "", "" ], + "bottom": [ "", "", "" ], + "left": [ "", "", "" ], + "unit": "px" + } + ] + }, + "borderHoverStyle": { + "type": "array", + "default": [ + { + "top": [ "", "", "" ], + "right": [ "", "", "" ], + "bottom": [ "", "", "" ], + "left": [ "", "", "" ], + "unit": "px" + } + ] + }, + "tabletBorderHoverStyle": { + "type": "array", + "default": [ + { + "top": [ "", "", "" ], + "right": [ "", "", "" ], + "bottom": [ "", "", "" ], + "left": [ "", "", "" ], + "unit": "px" + } + ] + }, + "mobileBorderHoverStyle": { + "type": "array", + "default": [ + { + "top": [ "", "", "" ], + "right": [ "", "", "" ], + "bottom": [ "", "", "" ], + "left": [ "", "", "" ], + "unit": "px" + } + ] + }, + "borderRadius": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "tabletBorderRadius": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "mobileBorderRadius": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "borderRadiusUnit": { + "type": "string", + "default": "px" + }, + "borderHoverRadius": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "tabletBorderHoverRadius": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "mobileBorderHoverRadius": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "borderHoverRadiusUnit": { + "type": "string", + "default": "px" + }, + "icon": { + "type": "string", + "default": "" + }, + "iconColor": { + "type": "string", + "default": "" + }, + "iconColorHover": { + "type": "string", + "default": "" + }, + "iconSide": { + "type": "string", + "default": "right" + }, + "iconHover": { + "type": "boolean", + "default": false + }, + "iconPadding": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "iconPaddingUnit": { + "type": "string", + "default": "px" + }, + "tabletIconPadding": { + "type": "array", + "default": [ "", "", "", "" ] + }, + "mobileIconPadding": { "type": "array", - "default": ["", "", "", ""] + "default": [ "", "", "", "" ] }, - "paddingType": { + "iconSize": { + "type": "array", + "default": [ "", "", "" ] + }, + "iconSizeUnit": { "type": "string", "default": "px" + }, + "onlyIcon": { + "type": "array", + "default": [ false, "", "" ] + }, + "label": { + "type": "string", + "default": "" + }, + "inheritStyles": { + "type": "string", + "default": "fill" + }, + "typography": { + "type": "array", + "default": [ + { + "size": [ "", "", "" ], + "sizeType": "px", + "lineHeight": [ "", "", "" ], + "lineType": "", + "letterSpacing": [ "", "", "" ], + "letterType": "px", + "textTransform": "", + "family": "", + "google": "", + "style": "", + "weight": "", + "variant": "", + "subset": "", + "loadGoogle": true + } + ] + }, + "displayShadow": { + "type": "boolean", + "default": false + }, + "displayHoverShadow": { + "type": "boolean", + "default": false + }, + "shadow": { + "type": "array", + "default": [ + { + "color": "#000000", + "opacity": 0.2, + "spread": 0, + "blur": 2, + "hOffset": 1, + "vOffset": 1, + "inset": false + } + ] + }, + "shadowHover": { + "type": "array", + "default": [ + { + "color": "#000000", + "opacity": 0.4, + "spread": 0, + "blur": 3, + "hOffset": 2, + "vOffset": 2, + "inset": false + } + ] + }, + "anchor": { + "type": "string" + }, + "noCustomDefaults": { + "type": "boolean", + "default": false + }, + "hAlign": { + "type": "string", + "default": "left" + }, + "thAlign": { + "type": "string", + "default": "" + }, + "mhAlign": { + "type": "string", + "default": "" } }, "supports": { + "anchor": true, "kbMetadata": true } } diff --git a/src/blocks/search/edit.js b/src/blocks/search/edit.js index fcd3182f4..7edc586a0 100644 --- a/src/blocks/search/edit.js +++ b/src/blocks/search/edit.js @@ -9,7 +9,7 @@ import metadata from './block.json'; */ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; -import { ToggleControl, RangeControl } from '@wordpress/components'; +import { TextControl, ToolbarGroup, SelectControl } from '@wordpress/components'; import { ResponsiveRangeControls, InspectorControlTabs, @@ -19,6 +19,20 @@ import { ResponsiveMeasureRangeControl, SpacingVisualizer, CopyPasteAttributes, + KadenceRadioButtons, + PopColorControl, + TypographyControls, + ResponsiveMeasurementControls, + SmallResponsiveControl, + IconRender, + HoverToggleControl, + ResponsiveBorderControl, + KadenceIconPicker, + KadenceWebfontLoader, + BackgroundTypeControl, + GradientControl, + BoxShadowControl, + SelectParentBlock, } from '@kadence/components'; import { setBlockDefaults, @@ -27,10 +41,17 @@ import { getUniqueId, getPostOrFseId, getPreviewSize, + KadenceColorOutput, + showSettings, + getFontSizeOptionOutput, + typographyStyle, + getBorderStyle, + getBorderColor, } from '@kadence/helpers'; -import { useBlockProps, BlockControls } from '@wordpress/block-editor'; +import { useBlockProps, BlockControls, RichText } from '@wordpress/block-editor'; import { useEffect, useRef, useState } from '@wordpress/element'; +import { applyFilters } from '@wordpress/hooks'; /** * External dependencies @@ -38,18 +59,68 @@ import { useEffect, useRef, useState } from '@wordpress/element'; import classnames from 'classnames'; export function Edit(props) { - const { attributes, setAttributes, clientId } = props; + const { attributes, setAttributes, className, isSelected, context, clientId } = props; const { uniqueID, - margin, - tabletMargin, - mobileMargin, - marginUnit, + displayStyle, + text, + sizePreset, padding, tabletPadding, mobilePadding, paddingUnit, + color, + background, + backgroundType, + gradient, + colorHover, + backgroundHover, + backgroundHoverType, + gradientHover, + borderStyle, + tabletBorderStyle, + mobileBorderStyle, + borderHoverStyle, + tabletBorderHoverStyle, + mobileBorderHoverStyle, + typography, + borderRadius, + tabletBorderRadius, + mobileBorderRadius, + borderRadiusUnit, + borderHoverRadius, + tabletBorderHoverRadius, + mobileBorderHoverRadius, + borderHoverRadiusUnit, + icon, + iconSide, + iconHover, + width, + widthUnit, + widthType, + displayShadow, + shadow, + displayHoverShadow, + shadowHover, + inheritStyles, + iconSize, + iconPadding, + tabletIconPadding, + mobileIconPadding, + iconPaddingUnit, + onlyIcon, + iconColor, + iconColorHover, + label, + marginUnit, + margin, + iconSizeUnit, + tabletMargin, + mobileMargin, + hAlign, + thAlign, + mhAlign, } = attributes; const { addUniqueID } = useDispatch('kadenceblocks/data'); @@ -93,68 +164,505 @@ export function Edit(props) { const paddingMouseOver = mouseOverVisualizer(); const marginMouseOver = mouseOverVisualizer(); + const saveTypography = (value) => { + const newUpdate = typography.map((item, index) => { + if (0 === index) { + item = { ...item, ...value }; + } + return item; + }); + setAttributes({ + typography: newUpdate, + }); + }; + const saveShadow = (value) => { + const newUpdate = shadow.map((item, index) => { + if (0 === index) { + item = { ...item, ...value }; + } + return item; + }); + setAttributes({ + shadow: newUpdate, + }); + }; + const saveShadowHover = (value) => { + const newItems = shadowHover.map((item, thisIndex) => { + if (0 === thisIndex) { + item = { ...item, ...value }; + } + + return item; + }); + setAttributes({ + shadowHover: newItems, + }); + }; + const btnSizes = [ + { value: 'small', label: __('SM', 'kadence-blocks') }, + { value: 'standard', label: __('MD', 'kadence-blocks') }, + { value: 'large', label: __('LG', 'kadence-blocks') }, + { value: 'xlarge', label: __('XL', 'kadence-blocks') }, + ]; + const btnWidths = [ + { value: 'auto', label: __('Auto', 'kadence-blocks') }, + { value: 'fixed', label: __('Fixed', 'kadence-blocks') }, + { value: 'full', label: __('Full', 'kadence-blocks') }, + ]; + + const buttonStyleOptions = [ + { value: 'fill', label: __('Fill', 'kadence-blocks') }, + { value: 'outline', label: __('Outline', 'kadence-blocks') }, + { value: 'inherit', label: __('Theme', 'kadence-blocks') }, + ]; + const previewMarginTop = getPreviewSize( previewDevice, - undefined !== margin ? margin[0] : '', - undefined !== tabletMargin ? tabletMargin[0] : '', - undefined !== mobileMargin ? mobileMargin[0] : '' + undefined !== margin?.[0] ? margin[0] : '', + undefined !== tabletMargin?.[0] ? tabletMargin[0] : '', + undefined !== mobileMargin?.[0] ? mobileMargin[0] : '' ); const previewMarginRight = getPreviewSize( previewDevice, - undefined !== margin ? margin[1] : '', - undefined !== tabletMargin ? tabletMargin[1] : '', - undefined !== mobileMargin ? mobileMargin[1] : '' + undefined !== margin?.[1] ? margin[1] : '', + undefined !== tabletMargin?.[1] ? tabletMargin[1] : '', + undefined !== mobileMargin?.[1] ? mobileMargin[1] : '' ); const previewMarginBottom = getPreviewSize( previewDevice, - undefined !== margin ? margin[2] : '', - undefined !== tabletMargin ? tabletMargin[2] : '', - undefined !== mobileMargin ? mobileMargin[2] : '' + undefined !== margin?.[2] ? margin[2] : '', + undefined !== tabletMargin?.[2] ? tabletMargin[2] : '', + undefined !== mobileMargin?.[2] ? mobileMargin[2] : '' ); const previewMarginLeft = getPreviewSize( previewDevice, - undefined !== margin ? margin[3] : '', - undefined !== tabletMargin ? tabletMargin[3] : '', - undefined !== mobileMargin ? mobileMargin[3] : '' + undefined !== margin?.[3] ? margin[3] : '', + undefined !== tabletMargin?.[3] ? tabletMargin[3] : '', + undefined !== mobileMargin?.[3] ? mobileMargin[3] : '' ); + const previewMarginUnit = marginUnit ? marginUnit : 'px'; const previewPaddingTop = getPreviewSize( previewDevice, - undefined !== padding ? padding[0] : '', - undefined !== tabletPadding ? tabletPadding[0] : '', - undefined !== mobilePadding ? mobilePadding[0] : '' + undefined !== padding?.[0] ? padding[0] : '', + undefined !== tabletPadding?.[0] ? tabletPadding[0] : '', + undefined !== mobilePadding?.[0] ? mobilePadding[0] : '' ); const previewPaddingRight = getPreviewSize( previewDevice, - undefined !== padding ? padding[1] : '', - undefined !== tabletPadding ? tabletPadding[1] : '', - undefined !== mobilePadding ? mobilePadding[1] : '' + undefined !== padding?.[1] ? padding[1] : '', + undefined !== tabletPadding?.[1] ? tabletPadding[1] : '', + undefined !== mobilePadding?.[1] ? mobilePadding[1] : '' ); const previewPaddingBottom = getPreviewSize( previewDevice, - undefined !== padding ? padding[2] : '', - undefined !== tabletPadding ? tabletPadding[2] : '', - undefined !== mobilePadding ? mobilePadding[2] : '' + undefined !== padding?.[2] ? padding[2] : '', + undefined !== tabletPadding?.[2] ? tabletPadding[2] : '', + undefined !== mobilePadding?.[2] ? mobilePadding[2] : '' ); const previewPaddingLeft = getPreviewSize( previewDevice, - undefined !== padding ? padding[3] : '', - undefined !== tabletPadding ? tabletPadding[3] : '', - undefined !== mobilePadding ? mobilePadding[3] : '' + undefined !== padding?.[3] ? padding[3] : '', + undefined !== tabletPadding?.[3] ? tabletPadding[3] : '', + undefined !== mobilePadding?.[3] ? mobilePadding[3] : '' + ); + + const previewRadiusTop = getPreviewSize( + previewDevice, + undefined !== borderRadius ? borderRadius[0] : '', + undefined !== tabletBorderRadius ? tabletBorderRadius[0] : '', + undefined !== mobileBorderRadius ? mobileBorderRadius[0] : '' + ); + const previewRadiusRight = getPreviewSize( + previewDevice, + undefined !== borderRadius ? borderRadius[1] : '', + undefined !== tabletBorderRadius ? tabletBorderRadius[1] : '', + undefined !== mobileBorderRadius ? mobileBorderRadius[1] : '' + ); + const previewRadiusBottom = getPreviewSize( + previewDevice, + undefined !== borderRadius ? borderRadius[2] : '', + undefined !== tabletBorderRadius ? tabletBorderRadius[2] : '', + undefined !== mobileBorderRadius ? mobileBorderRadius[2] : '' + ); + const previewRadiusLeft = getPreviewSize( + previewDevice, + undefined !== borderRadius ? borderRadius[3] : '', + undefined !== tabletBorderRadius ? tabletBorderRadius[3] : '', + undefined !== mobileBorderRadius ? mobileBorderRadius[3] : '' + ); + + const previewIconSize = getPreviewSize( + previewDevice, + undefined !== iconSize?.[0] ? iconSize[0] : '', + undefined !== iconSize?.[1] ? iconSize[1] : '', + undefined !== iconSize?.[2] ? iconSize[2] : '' + ); + const previewIconPaddingTop = getPreviewSize( + previewDevice, + undefined !== iconPadding?.[0] ? iconPadding[0] : '', + undefined !== tabletIconPadding?.[0] ? tabletIconPadding[0] : '', + undefined !== mobileIconPadding?.[0] ? mobileIconPadding[0] : '' + ); + const previewIconPaddingRight = getPreviewSize( + previewDevice, + undefined !== iconPadding?.[1] ? iconPadding[1] : '', + undefined !== tabletIconPadding?.[1] ? tabletIconPadding[1] : '', + undefined !== mobileIconPadding?.[1] ? mobileIconPadding[1] : '' + ); + const previewIconPaddingBottom = getPreviewSize( + previewDevice, + undefined !== iconPadding?.[2] ? iconPadding[2] : '', + undefined !== tabletIconPadding?.[2] ? tabletIconPadding[2] : '', + undefined !== mobileIconPadding?.[2] ? mobileIconPadding[2] : '' + ); + const previewIconPaddingLeft = getPreviewSize( + previewDevice, + undefined !== iconPadding?.[3] ? iconPadding[3] : '', + undefined !== tabletIconPadding?.[3] ? tabletIconPadding[3] : '', + undefined !== mobileIconPadding?.[3] ? mobileIconPadding[3] : '' ); - const ref = useRef(); + const previewFixedWidth = getPreviewSize( + previewDevice, + undefined !== width?.[0] ? width[0] : '', + undefined !== width?.[1] ? width[1] : undefined, + undefined !== width?.[2] ? width[2] : undefined + ); + + const previewBorderTopStyle = getBorderStyle( + previewDevice, + 'top', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderRightStyle = getBorderStyle( + previewDevice, + 'right', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderBottomStyle = getBorderStyle( + previewDevice, + 'bottom', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderLeftStyle = getBorderStyle( + previewDevice, + 'left', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderTopColor = getBorderColor( + previewDevice, + 'top', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderRightColor = getBorderColor( + previewDevice, + 'right', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderBottomColor = getBorderColor( + previewDevice, + 'bottom', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const previewBorderLeftColor = getBorderColor( + previewDevice, + 'left', + borderStyle, + tabletBorderStyle, + mobileBorderStyle + ); + const inheritBorder = [borderStyle, tabletBorderStyle, mobileBorderStyle]; + const previewBorderHoverTopStyle = getBorderStyle( + previewDevice, + 'top', + borderHoverStyle, + tabletBorderHoverStyle, + mobileBorderHoverStyle, + inheritBorder + ); + const previewBorderHoverRightStyle = getBorderStyle( + previewDevice, + 'right', + borderHoverStyle, + tabletBorderHoverStyle, + mobileBorderHoverStyle, + inheritBorder + ); + const previewBorderHoverBottomStyle = getBorderStyle( + previewDevice, + 'bottom', + borderHoverStyle, + tabletBorderHoverStyle, + mobileBorderHoverStyle, + inheritBorder + ); + const previewBorderHoverLeftStyle = getBorderStyle( + previewDevice, + 'left', + borderHoverStyle, + tabletBorderHoverStyle, + mobileBorderHoverStyle, + inheritBorder + ); + const previewBorderHoverTopColor = getBorderColor( + previewDevice, + 'top', + borderStyle, + tabletBorderStyle, + mobileBorderStyle, + inheritBorder + ); + const previewBorderHoverRightColor = getBorderColor( + previewDevice, + 'right', + borderStyle, + tabletBorderStyle, + mobileBorderStyle, + inheritBorder + ); + const previewBorderHoverBottomColor = getBorderColor( + previewDevice, + 'bottom', + borderStyle, + tabletBorderStyle, + mobileBorderStyle, + inheritBorder + ); + const previewBorderHoverLeftColor = getBorderColor( + previewDevice, + 'left', + borderStyle, + tabletBorderStyle, + mobileBorderStyle, + inheritBorder + ); + + const previewHoverRadiusTop = getPreviewSize( + previewDevice, + undefined !== borderHoverRadius ? borderHoverRadius[0] : '', + undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[0] : '', + undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[0] : '' + ); + const previewHoverRadiusRight = getPreviewSize( + previewDevice, + undefined !== borderHoverRadius ? borderHoverRadius[1] : '', + undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[1] : '', + undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[1] : '' + ); + const previewHoverRadiusBottom = getPreviewSize( + previewDevice, + undefined !== borderHoverRadius ? borderHoverRadius[2] : '', + undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[2] : '', + undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[2] : '' + ); + const previewHoverRadiusLeft = getPreviewSize( + previewDevice, + undefined !== borderHoverRadius ? borderHoverRadius[3] : '', + undefined !== tabletBorderHoverRadius ? tabletBorderHoverRadius[3] : '', + undefined !== mobileBorderHoverRadius ? mobileBorderHoverRadius[3] : '' + ); + + const previewAlign = getPreviewSize( + previewDevice, + undefined !== hAlign ? hAlign : '', + undefined !== thAlign ? thAlign : '', + undefined !== mhAlign ? mhAlign : '' + ); + const previewOnlyIcon = getPreviewSize( + previewDevice, + undefined !== onlyIcon?.[0] ? onlyIcon[0] : '', + undefined !== onlyIcon?.[1] ? onlyIcon[1] : undefined, + undefined !== onlyIcon?.[2] ? onlyIcon[2] : undefined + ); + let btnbg; + if (undefined !== backgroundType && 'gradient' === backgroundType) { + btnbg = gradient; + } else { + btnbg = 'transparent' === background || undefined === background ? undefined : KadenceColorOutput(background); + } + const nonTransAttrs = ['text']; + const btnClassName = classnames({ + 'kt-button': true, + [`kt-button-${uniqueID}`]: true, + [`kb-btn-global-${inheritStyles}`]: inheritStyles, + 'wp-block-button__link': inheritStyles && 'inherit' === inheritStyles, + [`kb-btn-has-icon`]: icon, + [`kt-btn-svg-show-${!iconHover ? 'always' : 'hover'}`]: icon, + [`kb-btn-only-icon`]: previewOnlyIcon, + [`kt-btn-size-${sizePreset ? sizePreset : 'standard'}`]: true, + }); const classes = classnames({ - 'kb-block-search-container': true, - [`kb-block-search-container${uniqueID}`]: true, + className, + [`kb-single-btn-${uniqueID}`]: true, + [`kt-btn-width-type-${widthType ? widthType : 'auto'}`]: true, + }); + const wrapperClasses = classnames({ + 'btn-inner-wrap': true, + [`kt-btn-align-${previewAlign}`]: previewAlign, }); const blockProps = useBlockProps({ className: classes, - ref, + style: { + width: + undefined !== widthType && + 'fixed' === widthType && + '%' === (undefined !== widthUnit ? widthUnit : 'px') && + '' !== previewFixedWidth + ? previewFixedWidth + (undefined !== widthUnit ? widthUnit : 'px') + : undefined, + }, }); + let btnRad = '0'; + let btnBox = ''; + let btnBox2 = ''; + const btnbgHover = 'gradient' === backgroundHoverType ? gradientHover : KadenceColorOutput(backgroundHover); + if ( + undefined !== displayHoverShadow && + displayHoverShadow && + undefined !== shadowHover?.[0] && + undefined !== shadowHover?.[0].inset && + false === shadowHover?.[0].inset + ) { + 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 + ) + }`; + btnBox2 = 'none'; + btnRad = '0'; + } + if ( + undefined !== displayHoverShadow && + displayHoverShadow && + undefined !== shadowHover?.[0] && + undefined !== shadowHover?.[0].inset && + true === shadowHover?.[0].inset + ) { + 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 + ) + }`; + btnRad = undefined !== borderRadius ? borderRadius : '3'; + btnBox = 'none'; + } + const previewTypographyCSS = typographyStyle( + typography, + `.editor-styles-wrapper .wp-block-kadence-search-button.kb-single-btn-${uniqueID} .kt-button-${uniqueID}`, + previewDevice + ); + const renderCSS = ( + + ); return ( <> + {renderCSS} - General + { + setAttributes({ displayStyle: value }); + }} + /> - - )} - {activeTab === 'style' && ( - <> - Style + { + setAttributes({ + inheritStyles: value, + }); + }} + /> + {showSettings('sizeSettings', 'kadence/advancedbtn') && ( + <> + { + setAttributes({ + sizePreset: value, + }); + }} + /> + { + setAttributes({ + widthType: value, + }); + }} + /> + {'fixed' === widthType && ( +
+ { + setAttributes({ + width: [ + value, + undefined !== width?.[1] ? width[1] : '', + undefined !== width?.[2] ? width[2] : '', + ], + }); + }} + tabletValue={undefined !== width?.[1] ? width[1] : undefined} + onChangeTablet={(value) => { + setAttributes({ + width: [ + undefined !== width?.[0] ? width[0] : '', + value, + undefined !== width?.[2] ? width[2] : '', + ], + }); + }} + mobileValue={undefined !== width?.[2] ? width[2] : undefined} + onChangeMobile={(value) => { + setAttributes({ + width: [ + undefined !== width?.[0] ? width[0] : '', + undefined !== width?.[1] ? width[1] : '', + value, + ], + }); + }} + min={0} + max={(widthUnit ? widthUnit : 'px') !== 'px' ? 100 : 600} + step={1} + unit={widthUnit ? widthUnit : 'px'} + onUnit={(value) => { + setAttributes({ widthUnit: value }); + }} + units={['px', '%']} + /> +
+ )} + + )} )} + {activeTab === 'style' && ( + <> + {showSettings('colorSettings', 'kadence/advancedbtn') && ( + + + setAttributes({ colorHover: value })} + /> + setAttributes({ backgroundHoverType: value })} + allowedTypes={['normal', 'gradient']} + /> + {'gradient' === backgroundHoverType && ( + setAttributes({ gradientHover: value })} + gradients={[]} + /> + )} + {'normal' === backgroundHoverType && ( + setAttributes({ backgroundHover: value })} + /> + )} + setAttributes({ borderHoverStyle: value })} + onChangeTablet={(value) => + setAttributes({ tabletBorderHoverStyle: value }) + } + onChangeMobile={(value) => + setAttributes({ mobileBorderHoverStyle: value }) + } + /> + setAttributes({ borderHoverRadius: value })} + onChangeTablet={(value) => + setAttributes({ tabletBorderHoverRadius: value }) + } + onChangeMobile={(value) => + setAttributes({ mobileBorderHoverRadius: value }) + } + unit={borderHoverRadiusUnit} + units={['px', 'em', 'rem', '%']} + onUnit={(value) => setAttributes({ borderHoverRadiusUnit: value })} + max={ + borderHoverRadiusUnit === 'em' || borderHoverRadiusUnit === 'rem' + ? 24 + : 500 + } + step={ + borderHoverRadiusUnit === 'em' || borderHoverRadiusUnit === 'rem' + ? 0.1 + : 1 + } + min={0} + isBorderRadius={true} + allowEmpty={true} + /> + { + saveShadowHover({ color, opacity }); + }} + opacity={ + undefined !== shadowHover && + undefined !== shadowHover[0] && + undefined !== shadowHover[0].opacity + ? shadowHover[0].opacity + : 0.2 + } + hOffset={ + undefined !== shadowHover && + undefined !== shadowHover[0] && + undefined !== shadowHover[0].hOffset + ? shadowHover[0].hOffset + : 0 + } + vOffset={ + undefined !== shadowHover && + undefined !== shadowHover[0] && + undefined !== shadowHover[0].vOffset + ? shadowHover[0].vOffset + : 0 + } + blur={ + undefined !== shadowHover && + undefined !== shadowHover[0] && + undefined !== shadowHover[0].blur + ? shadowHover[0].blur + : 14 + } + spread={ + undefined !== shadowHover && + undefined !== shadowHover[0] && + undefined !== shadowHover[0].spread + ? shadowHover[0].spread + : 0 + } + inset={ + undefined !== shadowHover && + undefined !== shadowHover[0] && + undefined !== shadowHover[0].inset + ? shadowHover[0].inset + : false + } + onEnableChange={(value) => { + setAttributes({ + displayHoverShadow: value, + }); + }} + onColorChange={(value) => { + saveShadowHover({ color: value }); + }} + onOpacityChange={(value) => { + saveShadowHover({ opacity: value }); + }} + onHOffsetChange={(value) => { + saveShadowHover({ hOffset: value }); + }} + onVOffsetChange={(value) => { + saveShadowHover({ vOffset: value }); + }} + onBlurChange={(value) => { + saveShadowHover({ blur: value }); + }} + onSpreadChange={(value) => { + saveShadowHover({ spread: value }); + }} + onInsetChange={(value) => { + saveShadowHover({ inset: value }); + }} + /> + + } + normal={ + <> + setAttributes({ color: value })} + /> + setAttributes({ backgroundType: value })} + allowedTypes={['normal', 'gradient']} + /> + {'gradient' === backgroundType && ( + setAttributes({ gradient: value })} + gradients={[]} + /> + )} + {'normal' === backgroundType && ( + setAttributes({ background: value })} + /> + )} + setAttributes({ borderStyle: value })} + onChangeTablet={(value) => setAttributes({ tabletBorderStyle: value })} + onChangeMobile={(value) => setAttributes({ mobileBorderStyle: value })} + /> + setAttributes({ borderRadius: value })} + onChangeTablet={(value) => setAttributes({ tabletBorderRadius: value })} + onChangeMobile={(value) => setAttributes({ mobileBorderRadius: value })} + unit={borderRadiusUnit} + units={['px', 'em', 'rem', '%']} + onUnit={(value) => setAttributes({ borderRadiusUnit: value })} + max={borderRadiusUnit === 'em' || borderRadiusUnit === 'rem' ? 24 : 500} + step={borderRadiusUnit === 'em' || borderRadiusUnit === 'rem' ? 0.1 : 1} + min={0} + isBorderRadius={true} + allowEmpty={true} + /> + { + saveShadow({ color, opacity }); + }} + opacity={ + undefined !== shadow && + undefined !== shadow[0] && + undefined !== shadow[0].opacity + ? shadow[0].opacity + : 0.2 + } + hOffset={ + undefined !== shadow && + undefined !== shadow[0] && + undefined !== shadow[0].hOffset + ? shadow[0].hOffset + : 0 + } + vOffset={ + undefined !== shadow && + undefined !== shadow[0] && + undefined !== shadow[0].vOffset + ? shadow[0].vOffset + : 0 + } + blur={ + undefined !== shadow && + undefined !== shadow[0] && + undefined !== shadow[0].blur + ? shadow[0].blur + : 14 + } + spread={ + undefined !== shadow && + undefined !== shadow[0] && + undefined !== shadow[0].spread + ? shadow[0].spread + : 0 + } + inset={ + undefined !== shadow && + undefined !== shadow[0] && + undefined !== shadow[0].inset + ? shadow[0].inset + : false + } + onEnableChange={(value) => { + setAttributes({ + displayShadow: value, + }); + }} + onColorChange={(value) => { + saveShadow({ color: value }); + }} + onOpacityChange={(value) => { + saveShadow({ opacity: value }); + }} + onHOffsetChange={(value) => { + saveShadow({ hOffset: value }); + }} + onVOffsetChange={(value) => { + saveShadow({ vOffset: value }); + }} + onBlurChange={(value) => { + saveShadow({ blur: value }); + }} + onSpreadChange={(value) => { + saveShadow({ spread: value }); + }} + onInsetChange={(value) => { + saveShadow({ inset: value }); + }} + /> + + } + /> + + )} + {showSettings('iconSettings', 'kadence/advancedbtn') && ( + +
+ { + setAttributes({ icon: value }); + }} + allowClear={true} + /> +
+ { + setAttributes({ + onlyIcon: [ + value === 'true' ? true : false, + undefined !== onlyIcon?.[1] ? onlyIcon[1] : '', + undefined !== onlyIcon?.[2] ? onlyIcon[2] : '', + ], + }); + }} + /> + } + tabletChildren={ + { + let newValue = value; + if (value === 'true') { + newValue = true; + } else if (value === 'false') { + newValue = false; + } + setAttributes({ + onlyIcon: [ + undefined !== onlyIcon?.[0] ? onlyIcon[0] : '', + newValue, + undefined !== onlyIcon?.[2] ? onlyIcon[2] : '', + ], + }); + }} + /> + } + mobileChildren={ + { + let newValue = value; + if (value === 'true') { + newValue = true; + } else if (value === 'false') { + newValue = false; + } + setAttributes({ + onlyIcon: [ + undefined !== onlyIcon?.[0] ? onlyIcon[0] : '', + undefined !== onlyIcon?.[1] ? onlyIcon[1] : '', + newValue, + ], + }); + }} + /> + } + /> + { + setAttributes({ iconSide: value }); + }} + /> + { + setAttributes({ + iconSize: [ + value, + undefined !== iconSize[1] ? iconSize[1] : '', + undefined !== iconSize?.[2] && iconSize[2] ? iconSize[2] : '', + ], + }); + }} + tabletValue={undefined !== iconSize?.[1] ? iconSize[1] : ''} + onChangeTablet={(value) => { + setAttributes({ + iconSize: [ + undefined !== iconSize?.[0] ? iconSize[0] : '', + value, + undefined !== iconSize?.[2] ? iconSize[2] : '', + ], + }); + }} + mobileValue={undefined !== iconSize?.[2] ? iconSize[2] : ''} + onChangeMobile={(value) => { + setAttributes({ + iconSize: [ + undefined !== iconSize?.[0] ? iconSize[0] : '', + undefined !== iconSize?.[1] ? iconSize[1] : '', + value, + ], + }); + }} + min={0} + max={(iconSizeUnit ? iconSizeUnit : 'px') !== 'px' ? 12 : 200} + step={(iconSizeUnit ? iconSizeUnit : 'px') !== 'px' ? 0.1 : 1} + unit={iconSizeUnit ? iconSizeUnit : 'px'} + onUnit={(value) => { + setAttributes({ iconSizeUnit: value }); + }} + units={['px', 'em', 'rem']} + /> + { + setAttributes({ iconColor: value }); + }} + swatchLabel2={__('Hover Color', 'kadence-blocks')} + value2={iconColorHover ? iconColorHover : ''} + default2={''} + onChange2={(value) => { + setAttributes({ iconColorHover: value }); + }} + /> + setAttributes({ iconPadding: value })} + onChangeTablet={(value) => setAttributes({ tabletIconPadding: value })} + onChangeMobile={(value) => setAttributes({ mobileIconPadding: value })} + min={iconPaddingUnit === 'em' || iconPaddingUnit === 'rem' ? -2 : -200} + max={iconPaddingUnit === 'em' || iconPaddingUnit === 'rem' ? 12 : 200} + step={iconPaddingUnit === 'em' || iconPaddingUnit === 'rem' ? 0.1 : 1} + unit={iconPaddingUnit} + units={['px', 'em', 'rem']} + onUnit={(value) => setAttributes({ iconPaddingUnit: value })} + /> + + )} + {showSettings('fontSettings', 'kadence/advancedbtn') && ( + + saveTypography({ size: value })} + fontSizeType={typography[0].sizeType} + onFontSizeType={(value) => saveTypography({ sizeType: value })} + lineHeight={typography[0].lineHeight} + onLineHeight={(value) => saveTypography({ lineHeight: value })} + lineHeightType={typography[0].lineType} + onLineHeightType={(value) => saveTypography({ lineType: value })} + reLetterSpacing={typography[0].letterSpacing} + onLetterSpacing={(value) => saveTypography({ letterSpacing: value })} + letterSpacingType={typography[0].letterType} + onLetterSpacingType={(value) => saveTypography({ letterType: value })} + textTransform={typography[0].textTransform} + onTextTransform={(value) => saveTypography({ textTransform: value })} + fontFamily={typography[0].family} + onFontFamily={(value) => saveTypography({ family: value })} + onFontChange={(select) => { + saveTypography({ + family: select.value, + google: select.google, + }); + }} + onFontArrayChange={(values) => saveTypography(values)} + googleFont={typography[0].google} + onGoogleFont={(value) => saveTypography({ google: value })} + loadGoogleFont={typography[0].loadGoogle} + onLoadGoogleFont={(value) => saveTypography({ loadGoogle: value })} + fontVariant={typography[0].variant} + onFontVariant={(value) => saveTypography({ variant: value })} + fontWeight={typography[0].weight} + onFontWeight={(value) => saveTypography({ weight: value })} + fontStyle={typography[0].style} + onFontStyle={(value) => saveTypography({ style: value })} + fontSubset={typography[0].subset} + onFontSubset={(value) => saveTypography({ subset: value })} + /> + + )} + + )} + {activeTab === 'advanced' && ( <> - - setAttributes({ padding: value })} - onChangeTablet={(value) => setAttributes({ tabletPadding: value })} - onChangeMobile={(value) => setAttributes({ mobilePadding: value })} - min={0} - max={paddingUnit === 'em' || paddingUnit === 'rem' ? 25 : 999} - step={paddingUnit === 'em' || paddingUnit === 'rem' ? 0.1 : 1} - unit={paddingUnit} - units={['px', 'em', 'rem', '%']} - onUnit={(value) => setAttributes({ paddingUnit: value })} - onMouseOver={paddingMouseOver.onMouseOver} - onMouseOut={paddingMouseOver.onMouseOut} - /> - { - setAttributes({ margin: value }); - }} - onChangeTablet={(value) => setAttributes({ tabletMargin: value })} - onChangeMobile={(value) => setAttributes({ mobileMargin: value })} - min={marginUnit === 'em' || marginUnit === 'rem' ? -25 : -999} - max={marginUnit === 'em' || marginUnit === 'rem' ? 25 : 999} - step={marginUnit === 'em' || marginUnit === 'rem' ? 0.1 : 1} - unit={marginUnit} - units={['px', 'em', 'rem', '%', 'vh']} - onUnit={(value) => setAttributes({ marginUnit: value })} - onMouseOver={marginMouseOver.onMouseOver} - onMouseOut={marginMouseOver.onMouseOut} - allowAuto={true} - /> - + {showSettings('marginSettings', 'kadence/advancedbtn') && ( + <> + + setAttributes({ padding: value })} + tabletValue={tabletPadding} + onChangeTablet={(value) => setAttributes({ tabletPadding: value })} + mobileValue={mobilePadding} + onChangeMobile={(value) => setAttributes({ mobilePadding: value })} + min={paddingUnit === 'em' || paddingUnit === 'rem' ? -2 : -200} + max={paddingUnit === 'em' || paddingUnit === 'rem' ? 12 : 200} + step={paddingUnit === 'em' || paddingUnit === 'rem' ? 0.1 : 1} + unit={paddingUnit} + units={['px', 'em', 'rem']} + onUnit={(value) => setAttributes({ paddingUnit: value })} + onMouseOver={paddingMouseOver.onMouseOver} + onMouseOut={paddingMouseOver.onMouseOut} + /> + setAttributes({ margin: value })} + tabletValue={tabletMargin} + onChangeTablet={(value) => setAttributes({ tabletMargin: value })} + mobileValue={mobileMargin} + onChangeMobile={(value) => setAttributes({ mobileMargin: value })} + min={marginUnit === 'em' || marginUnit === 'rem' ? -2 : -200} + max={marginUnit === 'em' || marginUnit === 'rem' ? 12 : 200} + step={marginUnit === 'em' || marginUnit === 'rem' ? 0.1 : 1} + unit={marginUnit} + units={['px', 'em', 'rem']} + onUnit={(value) => setAttributes({ marginUnit: value })} + onMouseOver={marginMouseOver.onMouseOver} + onMouseOut={marginMouseOver.onMouseOut} + /> + setAttributes({ label: value })} + className={'kb-textbox-style'} + /> + -
+
+ + )} )} @@ -277,7 +1430,186 @@ export function Edit(props) { '' !== previewPaddingLeft ? getSpacingOptionOutput(previewPaddingLeft, paddingUnit) : undefined, }} > - Search Block +
+ + {icon && 'left' === iconSide && ( + + )} + setAttributes({ text: value })} + allowedFormats={applyFilters( + 'kadence.whitelist_richtext_formats', + [ + 'kadence/insert-dynamic', + 'core/bold', + 'core/italic', + 'core/strikethrough', + 'toolset/inline-field', + ], + 'kadence/advancedbtn' + )} + className={'kt-button-text'} + keepPlaceholderOnFocus + /> + {icon && 'left' !== iconSide && ( + + )} + + + + {typography?.[0]?.google && ( + + )} +