toggleSettingsVisibility()}>
+
+
toggleSettingsVisibility()}>
)}
-
+
)}
);
diff --git a/src/blocks/advancedheading/ai-text/ai-text.js b/src/blocks/advancedheading/ai-text/ai-text.js
index 3e8718814..a47cce36e 100644
--- a/src/blocks/advancedheading/ai-text/ai-text.js
+++ b/src/blocks/advancedheading/ai-text/ai-text.js
@@ -66,6 +66,7 @@ export const AIText = {
const [ isLoading, setIsLoading ] = useState(false);
const [ dynamicRows, setDynamicRows ] = useState(1);
const [ aiDynamicRows, setAIDynamicRows ] = useState(2);
+ const [ promptCost, setPromptCost ] = useState(1);
const [ isToggled, setIsToggled ] = useState(false);
const [ credits, setCredits ] = useState( '' );
const [ tempCredits, setTempCredits ] = useState( '' );
@@ -103,22 +104,33 @@ export const AIText = {
}
}, [credits]);
useEffect( () => {
- if ( value?.text && value?.text.length > 0 && value?.end && value.start !== value.end ) {
+ if ( value?.text && value?.text.length > 0 && value?.text.length < 800 && value?.end && value.start !== value.end ) {
+ console.log( value.text.substring(value.start, value.end) );
setSelectedContent( value.text.substring(value.start, value.end) );
if ( ! isOpen && value?.text.length > 30 ) {
setIsOpen( true );
}
- } else if ( value?.text && value?.text.length > 0 && value.start === value.end && value?.text.length !== value.start ) {
+ } else if ( value?.text && value?.text.length > 0 && value?.text.length < 800 && value.start === value.end && value?.text.length !== value.start ) {
setSelectedContent( value.text );
if ( ! isOpen && value?.text.length > 30 ) {
setIsOpen( true );
}
+ } else if ( value?.text && value?.text.length >= 800 ) {
+ setSelectedContent( '' );
+ if ( isOpen ) {
+ setIsOpen( false );
+ }
} else if ( selectedContent && selectedContent.length > 0 ) {
setSelectedContent( '' );
if ( isOpen ) {
setIsOpen( false );
}
}
+ if ( value?.text && value?.text.length > 400 ) {
+ setPromptCost( 2 );
+ } else {
+ setPromptCost( 1 );
+ }
}, [ value ] );
function handleGettingContent(value) {
setIsLoading(true);
@@ -133,7 +145,7 @@ export const AIText = {
setIsLoading(false);
setPrompt('');
setIsOpen( true );
- setTempCredits(parseInt( currentCredits ) - 1);
+ setTempCredits(parseInt( currentCredits ) - promptCost);
setCredits( 'fetch' );
return;
}
@@ -170,7 +182,7 @@ export const AIText = {
if (done) {
setIsLoading(false);
setPrompt('');
- setTempCredits(parseInt( currentCredits ) - 1);
+ setTempCredits(parseInt( currentCredits ) - promptCost);
setCredits( 'fetch' );
setIsOpen( true );
return;
@@ -209,7 +221,7 @@ export const AIText = {
setIsLoading(false);
setPrompt('');
setIsOpen( true );
- setTempCredits(parseInt( currentCredits ) - 1);
+ setTempCredits(parseInt( currentCredits ) - promptCost);
setCredits( 'fetch' );
return;
}
diff --git a/src/blocks/advancedheading/ai-text/fetch-ai.js b/src/blocks/advancedheading/ai-text/fetch-ai.js
index fe7d0294d..fe9144d70 100644
--- a/src/blocks/advancedheading/ai-text/fetch-ai.js
+++ b/src/blocks/advancedheading/ai-text/fetch-ai.js
@@ -17,7 +17,8 @@ export function getAIContentHelper() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'error';
}
}
diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js
index 217cb951f..783f6883c 100644
--- a/src/blocks/advancedheading/edit.js
+++ b/src/blocks/advancedheading/edit.js
@@ -623,11 +623,11 @@ function KadenceAdvancedHeading( props ) {
if ( contentHtml.querySelectorAll( '.kt-typed-text' )[ 0 ] ) {
let typedElement = contentHtml.querySelectorAll( '.kt-typed-text' )[ 0 ];
let dataStrings = typedElement.getAttribute('data-strings');
- let strings = dataStrings ? JSON.parse( dataStrings ) : [];
+ let strings = dataStrings ? JSON.parse( dataStrings.replaceAll('&', '&') ) : [];
// Adding the default/existing string twice is required for displaying properly
- strings.unshift( typedElement.textContent );
- strings.unshift( typedElement.textContent );
+ strings.unshift( typedElement.textContent.replaceAll('&', '&') );
+ strings.unshift( typedElement.textContent.replaceAll('&', '&') );
let options = {
strings: strings,
diff --git a/src/blocks/column/edit.js b/src/blocks/column/edit.js
index df32f3198..988b1cd48 100644
--- a/src/blocks/column/edit.js
+++ b/src/blocks/column/edit.js
@@ -276,7 +276,6 @@ function SectionEdit( props ) {
setAttributes( { mobileBorderHoverStyle: tempMobileBorderHoverWidth, mobileBorderWidth:[ '', '', '', '' ] } );
}
if ( ! kbVersion || kbVersion < 2 ) {
- console.log( 'update to V2' );
// Update Align and Text Align settings for 3.2.0
let deskJustifyAlign = ( justifyContent?.[0] ? justifyContent[0] : '' );
let tabletJustifyAlign = ( justifyContent?.[1] ? justifyContent[1] : '' );
diff --git a/src/blocks/countdown/block.json b/src/blocks/countdown/block.json
index 6c667c1aa..13edddb1e 100644
--- a/src/blocks/countdown/block.json
+++ b/src/blocks/countdown/block.json
@@ -18,6 +18,10 @@
"type": "string",
"default": ""
},
+ "endDate": {
+ "type": "string",
+ "default": ""
+ },
"timezone": {
"type": "string",
"default": ""
@@ -55,6 +59,18 @@
"type": "boolean",
"default": false
},
+ "repeat": {
+ "type": "boolean",
+ "default": false
+ },
+ "stopRepeating": {
+ "type": "boolean",
+ "default": false
+ },
+ "frequency": {
+ "type": "string",
+ "default": "daily"
+ },
"enableTimer": {
"type": "boolean",
"default": true
diff --git a/src/blocks/countdown/countdown-timer/edit.js b/src/blocks/countdown/countdown-timer/edit.js
index 5069517b9..c141e129e 100644
--- a/src/blocks/countdown/countdown-timer/edit.js
+++ b/src/blocks/countdown/countdown-timer/edit.js
@@ -184,10 +184,87 @@ function KadenceCoundownTimer( props ) {
className: `kb-countdown-timer kb-countdown-timer-${uniqueID}`,
} );
+ const calculateDate = () => {
+ const currentDate = new Date();
+ const initialDate = new Date(parentBlock[ 0 ].attributes.timestamp);
+ const stopRepeating = !parentBlock[ 0 ].attributes.stopRepeating ? true : (new Date(parentBlock[ 0 ].attributes.endDate) <= new Date(currentDate) ? false : true);
+ if(currentDate >= initialDate && parentBlock[ 0 ].attributes.repeat && parentBlock[ 0 ].attributes.frequency !== '' && stopRepeating) {
+ const seconds = initialDate.getSeconds();
+ const minutes = initialDate.getMinutes();
+ const hours = initialDate.getHours();
+ let futureDate = new Date();
+ let daysPassed = Math.floor((currentDate.getTime() - initialDate.getTime()) / (1000 * 3600 * 24));
+ let offsetDays = 0;
+ let dayOfMonth = initialDate.getDate();
+ const futureDayOfMonth = currentDate.getDate();
+ const initialMonth = initialDate.getMonth();
+ const futureMonth = currentDate.getMonth() === 11 ? 0 : futureDayOfMonth >= dayOfMonth ? currentDate.getMonth() + 1 : currentDate.getMonth();
+ let futureYear = currentDate.getMonth() === 11 ? currentDate.getFullYear() + 1 : currentDate.getFullYear();
+ const nextMonthDays = new Date(futureYear, futureMonth + 1, 0).getDate();
+
+ switch(parentBlock[ 0 ].attributes.frequency) {
+ case 'daily':
+ offsetDays = daysPassed + 1;
+ futureDate.setDate(initialDate.getDate() + offsetDays);
+ futureDate.setHours(hours);
+ futureDate.setMinutes(minutes);
+ futureDate.setSeconds(seconds);
+ break;
+ case 'weekly':
+ offsetDays = daysPassed + (7 - (daysPassed) % 7);
+ futureDate.setDate(initialDate.getDate() + offsetDays);
+ futureDate.setHours(hours);
+ futureDate.setMinutes(minutes);
+ futureDate.setSeconds(seconds);
+ break;
+ case 'monthly':
+ if(dayOfMonth === 31 && nextMonthDays === 30 ) {
+ dayOfMonth = 30;
+ } else if(futureMonth === 0 && dayOfMonth >= 29) {
+ dayOfMonth = dayOfMonth === 29 ? dayOfMonth : 28;
+ }
+
+ futureDate = new Date(
+ futureYear,
+ futureMonth,
+ dayOfMonth,
+ hours,
+ minutes,
+ seconds
+ );
+ break;
+ case 'yearly':
+ const datePassed = currentDate.getMonth() <= initialDate.getMonth()
+ && currentDate.getDate() <= initialDate.getDate()
+ && currentDate.getHours() <= hours
+ && currentDate.getMinutes() <= minutes
+ && currentDate.getSeconds() <= seconds;
+ futureYear = datePassed
+ ? currentDate.getFullYear()
+ : currentDate.getFullYear() + 1;
+ futureDate = new Date(
+ futureYear,
+ initialMonth,
+ dayOfMonth,
+ hours,
+ minutes,
+ seconds
+ );
+ break;
+ default:
+ break;
+ }
+
+ return futureDate;
+ }
+
+ return new Date(parentBlock[ 0 ].attributes.timestamp);
+ }
+
return (
diff --git a/src/blocks/countdown/edit.js b/src/blocks/countdown/edit.js
index 4fd77cc04..05744ac88 100644
--- a/src/blocks/countdown/edit.js
+++ b/src/blocks/countdown/edit.js
@@ -67,19 +67,15 @@ import { applyFilters } from '@wordpress/hooks';
import { useSelect, useDispatch } from '@wordpress/data';
import {
- Component,
useEffect,
useState,
} from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
import {
InnerBlocks,
BlockControls,
AlignmentToolbar,
InspectorControls,
- store as blockEditorStore,
useBlockProps,
} from '@wordpress/block-editor';
import {
@@ -109,7 +105,6 @@ const COUNTDOWN_NO_TIMER_WITH_MESSAGE = [
const COUNTDOWN_NO_TIMER = [
[ 'kadence/countdown-inner', { location: 'first' } ],
];
-const ALLOWED_BLOCKS = [ 'kadence/countdown-timer', 'kadence/countdown-inner' ];
const typeOptions = [
{ value: 'date', label: __( 'Date', 'kadence-blocks' ), disabled: false },
{ value: 'evergreen', label: __( 'Evergreen (Pro addon)', 'kadence-blocks' ), disabled: true },
@@ -120,6 +115,12 @@ const actionOptions = [
{ value: 'message', label: __( 'Replace with Content (Pro addon)', 'kadence-blocks' ), disabled: true },
{ value: 'redirect', label: __( 'Redirect (Pro addon)', 'kadence-blocks' ), disabled: true },
];
+const frequencyOptions = [
+ { value: 'daily', label: __( 'Daily', 'kadence-blocks' ), disabled: false },
+ { value: 'weekly', label: __( 'Weekly', 'kadence-blocks' ), disabled: false },
+ { value: 'monthly', label: __( 'Monthly', 'kadence-blocks' ), disabled: false },
+ { value: 'yearly', label: __( 'Yearly', 'kadence-blocks' ), disabled: false },
+];
const ANCHOR_REGEX = /[\s#]/g;
/**
@@ -127,7 +128,7 @@ const ANCHOR_REGEX = /[\s#]/g;
*/
function KadenceCountdown( props ) {
- const { attributes, setAttributes, className, clientId, isNested, parentBlock, getPreviewDevice } = props;
+ const { attributes, setAttributes, className, clientId } = props;
const {
uniqueID,
expireAction,
@@ -135,9 +136,13 @@ function KadenceCountdown( props ) {
enableTimer,
evergreenHours,
evergreenMinutes,
+ repeat,
+ stopRepeating,
+ frequency,
redirectURL,
timerLayout,
date,
+ endDate,
timestamp,
evergreenReset,
timezone,
@@ -193,17 +198,25 @@ function KadenceCountdown( props ) {
} = attributes;
const { addUniqueID } = useDispatch( 'kadenceblocks/data' );
- const { isUniqueID, isUniqueBlock, parentData } = useSelect(
+ const { selectBlock } = useDispatch( 'core/block-editor' );
+
+ const { isUniqueID, isUniqueBlock, previewDevice, parentData, isNested, parentBlock } = useSelect(
( select ) => {
+ const { getBlock, getBlockParentsByBlockName } = select( 'core/block-editor' );
+ const parentBlocks = getBlockParentsByBlockName( clientId, 'kadence/countdown' );
+ const nested = ( parentBlocks.length && undefined !== parentBlocks[ 0 ] && '' !== parentBlocks[ 0 ] );
return {
isUniqueID: ( value ) => select( 'kadenceblocks/data' ).isUniqueID( value ),
- isUniqueBlock: ( value, clientId ) => select( 'kadenceblocks/data' ).isUniqueBlock( value, clientId ),
+ isUniqueBlock: ( value ) => select( 'kadenceblocks/data' ).isUniqueBlock( value, clientId ),
+ previewDevice: select( 'kadenceblocks/data' ).getPreviewDeviceType(),
parentData: {
rootBlock: select( 'core/block-editor' ).getBlock( select( 'core/block-editor' ).getBlockHierarchyRootClientId( clientId ) ),
postId: select( 'core/editor' )?.getCurrentPostId() ? select( 'core/editor' )?.getCurrentPostId() : '',
reusableParent: select('core/block-editor').getBlockAttributes( select('core/block-editor').getBlockParentsByBlockName( clientId, 'core/block' ).slice(-1)[0] ),
editedPostId: select( 'core/edit-site' ) ? select( 'core/edit-site' ).getEditedPostId() : false
- }
+ },
+ isNested: nested,
+ parentBlock : ( nested ? getBlock( parentBlocks[ 0 ] ) : '' ),
};
},
[ clientId ]
@@ -242,8 +255,6 @@ function KadenceCountdown( props ) {
const [ borderWidthControl, setBorderWidthControl ] = useState( 'individual' );
const [ borderRadiusControl, setBorderRadiusControl ] = useState( 'linked' );
- const [ paddingControl, setPaddingControl ] = useState( 'individual' );
- const [ marginControl, setMarginControl ] = useState( 'individual' );
const [ itemBorderWidthControl, setItemBorderWidthControl ] = useState( 'individual' );
const [ itemBorderRadiusControl, setItemBorderRadiusControl ] = useState( 'linked' );
const [ itemPaddingControl, setItemPaddingControl ] = useState( 'linked' );
@@ -298,6 +309,7 @@ function KadenceCountdown( props ) {
units: newUpdate,
} );
};
+
const saveDate = ( value ) => {
const theTimezone = get( dateSettings, ['timezone', 'string' ], '');
const theTimeOffset = get( dateSettings, ['timezone', 'offset' ], 0);
@@ -418,52 +430,52 @@ function KadenceCountdown( props ) {
const itemPaddingStep = ( itemPaddingType === 'em' || itemPaddingType === 'rem' ? 0.1 : 1 );
const previewItemPaddingType = ( undefined !== itemPaddingType ? itemPaddingType : 'px' );
const previewMarginType = ( undefined !== marginType ? marginType : 'px' );
- const previewMarginTop = getPreviewSize( getPreviewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 0 ] ? containerMargin[ 0 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 0 ] ? containerTabletMargin[ 0 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 0 ] ? containerMobileMargin[ 0 ] : '' ) );
- const previewMarginRight = getPreviewSize( getPreviewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 1 ] ? containerMargin[ 1 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 1 ] ? containerTabletMargin[ 1 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 1 ] ? containerMobileMargin[ 1 ] : '' ) );
- const previewMarginBottom = getPreviewSize( getPreviewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 2 ] ? containerMargin[ 2 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 2 ] ? containerTabletMargin[ 2 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 2 ] ? containerMobileMargin[ 2 ] : '' ) );
- const previewMarginLeft = getPreviewSize( getPreviewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 3 ] ? containerMargin[ 3 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 3 ] ? containerTabletMargin[ 3 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 3 ] ? containerMobileMargin[ 3 ] : '' ) );
- const previewPaddingTop = getPreviewSize( getPreviewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 0 ] ? containerPadding[ 0 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 0 ] ? containerTabletPadding[ 0 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 0 ] ? containerMobilePadding[ 0 ] : '' ) );
- const previewPaddingRight = getPreviewSize( getPreviewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 1 ] ? containerPadding[ 1 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 1 ] ? containerTabletPadding[ 1 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 1 ] ? containerMobilePadding[ 1 ] : '' ) );
- const previewPaddingBottom = getPreviewSize( getPreviewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 2 ] ? containerPadding[ 2 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 2 ] ? containerTabletPadding[ 2 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 2 ] ? containerMobilePadding[ 2 ] : '' ) );
- const previewPaddingLeft = getPreviewSize( getPreviewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 3 ] ? containerPadding[ 3 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 3 ] ? containerTabletPadding[ 3 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 3 ] ? containerMobilePadding[ 3 ] : '' ) );
- const previewBorderTop = getPreviewSize( getPreviewDevice, ( undefined !== borderWidth ? borderWidth[ 0 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 0 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 0 ] : '' ) );
- const previewBorderRight = getPreviewSize( getPreviewDevice, ( undefined !== borderWidth ? borderWidth[ 1 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 1 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 1 ] : '' ) );
- const previewBorderBottom = getPreviewSize( getPreviewDevice, ( undefined !== borderWidth ? borderWidth[ 2 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 2 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 2 ] : '' ) );
- const previewBorderLeft = getPreviewSize( getPreviewDevice, ( undefined !== borderWidth ? borderWidth[ 3 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 3 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 3 ] : '' ) );
+ const previewMarginTop = getPreviewSize( previewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 0 ] ? containerMargin[ 0 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 0 ] ? containerTabletMargin[ 0 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 0 ] ? containerMobileMargin[ 0 ] : '' ) );
+ const previewMarginRight = getPreviewSize( previewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 1 ] ? containerMargin[ 1 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 1 ] ? containerTabletMargin[ 1 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 1 ] ? containerMobileMargin[ 1 ] : '' ) );
+ const previewMarginBottom = getPreviewSize( previewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 2 ] ? containerMargin[ 2 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 2 ] ? containerTabletMargin[ 2 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 2 ] ? containerMobileMargin[ 2 ] : '' ) );
+ const previewMarginLeft = getPreviewSize( previewDevice, ( undefined !== containerMargin && undefined !== containerMargin[ 3 ] ? containerMargin[ 3 ] : '' ), ( undefined !== containerTabletMargin && undefined !== containerTabletMargin[ 3 ] ? containerTabletMargin[ 3 ] : '' ), ( undefined !== containerMobileMargin && undefined !== containerMobileMargin[ 3 ] ? containerMobileMargin[ 3 ] : '' ) );
+ const previewPaddingTop = getPreviewSize( previewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 0 ] ? containerPadding[ 0 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 0 ] ? containerTabletPadding[ 0 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 0 ] ? containerMobilePadding[ 0 ] : '' ) );
+ const previewPaddingRight = getPreviewSize( previewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 1 ] ? containerPadding[ 1 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 1 ] ? containerTabletPadding[ 1 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 1 ] ? containerMobilePadding[ 1 ] : '' ) );
+ const previewPaddingBottom = getPreviewSize( previewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 2 ] ? containerPadding[ 2 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 2 ] ? containerTabletPadding[ 2 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 2 ] ? containerMobilePadding[ 2 ] : '' ) );
+ const previewPaddingLeft = getPreviewSize( previewDevice, ( undefined !== containerPadding && undefined !== containerPadding[ 3 ] ? containerPadding[ 3 ] : '' ), ( undefined !== containerTabletPadding && undefined !== containerTabletPadding[ 3 ] ? containerTabletPadding[ 3 ] : '' ), ( undefined !== containerMobilePadding && undefined !== containerMobilePadding[ 3 ] ? containerMobilePadding[ 3 ] : '' ) );
+ const previewBorderTop = getPreviewSize( previewDevice, ( undefined !== borderWidth ? borderWidth[ 0 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 0 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 0 ] : '' ) );
+ const previewBorderRight = getPreviewSize( previewDevice, ( undefined !== borderWidth ? borderWidth[ 1 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 1 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 1 ] : '' ) );
+ const previewBorderBottom = getPreviewSize( previewDevice, ( undefined !== borderWidth ? borderWidth[ 2 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 2 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 2 ] : '' ) );
+ const previewBorderLeft = getPreviewSize( previewDevice, ( undefined !== borderWidth ? borderWidth[ 3 ] : '' ), ( undefined !== tabletBorderWidth ? tabletBorderWidth[ 3 ] : '' ), ( undefined !== mobileBorderWidth ? mobileBorderWidth[ 3 ] : '' ) );
- const previewItemPaddingTop = getPreviewSize( getPreviewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 0 ] ? itemPadding[ 0 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 0 ] ? itemTabletPadding[ 0 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 0 ] ? itemMobilePadding[ 0 ] : '' ) );
- const previewItemPaddingRight = getPreviewSize( getPreviewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 1 ] ? itemPadding[ 1 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 1 ] ? itemTabletPadding[ 1 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 1 ] ? itemMobilePadding[ 1 ] : '' ) );
- const previewItemPaddingBottom = getPreviewSize( getPreviewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 2 ] ? itemPadding[ 2 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 2 ] ? itemTabletPadding[ 2 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 2 ] ? itemMobilePadding[ 2 ] : '' ) );
- const previewItemPaddingLeft = getPreviewSize( getPreviewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 3 ] ? itemPadding[ 3 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 3 ] ? itemTabletPadding[ 3 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 3 ] ? itemMobilePadding[ 3 ] : '' ) );
- const previewItemBorderTop = getPreviewSize( getPreviewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 0 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 0 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 0 ] : '' ) );
- const previewItemBorderRight = getPreviewSize( getPreviewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 1 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 1 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 1 ] : '' ) );
- const previewItemBorderBottom = getPreviewSize( getPreviewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 2 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 2 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 2 ] : '' ) );
- const previewItemBorderLeft = getPreviewSize( getPreviewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 3 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 3 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 3 ] : '' ) );
+ const previewItemPaddingTop = getPreviewSize( previewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 0 ] ? itemPadding[ 0 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 0 ] ? itemTabletPadding[ 0 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 0 ] ? itemMobilePadding[ 0 ] : '' ) );
+ const previewItemPaddingRight = getPreviewSize( previewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 1 ] ? itemPadding[ 1 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 1 ] ? itemTabletPadding[ 1 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 1 ] ? itemMobilePadding[ 1 ] : '' ) );
+ const previewItemPaddingBottom = getPreviewSize( previewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 2 ] ? itemPadding[ 2 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 2 ] ? itemTabletPadding[ 2 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 2 ] ? itemMobilePadding[ 2 ] : '' ) );
+ const previewItemPaddingLeft = getPreviewSize( previewDevice, ( undefined !== itemPadding && undefined !== itemPadding[ 3 ] ? itemPadding[ 3 ] : '' ), ( undefined !== itemTabletPadding && undefined !== itemTabletPadding[ 3 ] ? itemTabletPadding[ 3 ] : '' ), ( undefined !== itemMobilePadding && undefined !== itemMobilePadding[ 3 ] ? itemMobilePadding[ 3 ] : '' ) );
+ const previewItemBorderTop = getPreviewSize( previewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 0 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 0 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 0 ] : '' ) );
+ const previewItemBorderRight = getPreviewSize( previewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 1 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 1 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 1 ] : '' ) );
+ const previewItemBorderBottom = getPreviewSize( previewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 2 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 2 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 2 ] : '' ) );
+ const previewItemBorderLeft = getPreviewSize( previewDevice, ( undefined !== itemBorderWidth ? itemBorderWidth[ 3 ] : '' ), ( undefined !== itemTabletBorderWidth ? itemTabletBorderWidth[ 3 ] : '' ), ( undefined !== itemMobileBorderWidth ? itemMobileBorderWidth[ 3 ] : '' ) );
const previewNumberSizeType = ( undefined !== numberFont && undefined !== numberFont[ 0 ] && '' !== numberFont[ 0 ].sizeType ? numberFont[ 0 ].sizeType : 'px' );
const previewNumberLineType = ( undefined !== numberFont && undefined !== numberFont[ 0 ] && '' !== numberFont[ 0 ].lineType ? numberFont[ 0 ].lineType : 'px' );
const previewNumberLetterType = ( undefined !== numberFont && undefined !== numberFont[ 0 ] && '' !== numberFont[ 0 ].letterType ? numberFont[ 0 ].letterType : 'px' );
- const previewNumberFontSize = getPreviewSize( getPreviewDevice, ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].size && undefined !== numberFont[ 0 ].size[ 0 ] && '' !== numberFont[ 0 ].size[ 0 ] ? numberFont[ 0 ].size[ 0 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].size && undefined !== numberFont[ 0 ].size[ 1 ] && '' !== numberFont[ 0 ].size[ 1 ] ? numberFont[ 0 ].size[ 1 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].size && undefined !== numberFont[ 0 ].size[ 2 ] && '' !== numberFont[ 0 ].size[ 2 ] ? numberFont[ 0 ].size[ 2 ] : '' ) );
- const previewNumberLineSize = getPreviewSize( getPreviewDevice, ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].lineHeight && undefined !== numberFont[ 0 ].lineHeight[ 0 ] && '' !== numberFont[ 0 ].lineHeight[ 0 ] ? numberFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].lineHeight && undefined !== numberFont[ 0 ].lineHeight[ 1 ] && '' !== numberFont[ 0 ].lineHeight[ 1 ] ? numberFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].lineHeight && undefined !== numberFont[ 0 ].lineHeight[ 2 ] && '' !== numberFont[ 0 ].lineHeight[ 2 ] ? numberFont[ 0 ].lineHeight[ 2 ] : '' ) );
- const previewNumberLetterSize = getPreviewSize( getPreviewDevice, ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].letterSpacing && undefined !== numberFont[ 0 ].letterSpacing[ 0 ] && '' !== numberFont[ 0 ].letterSpacing[ 0 ] ? numberFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].letterSpacing && undefined !== numberFont[ 0 ].letterSpacing[ 1 ] && '' !== numberFont[ 0 ].letterSpacing[ 1 ] ? numberFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].letterSpacing && undefined !== numberFont[ 0 ].letterSpacing[ 2 ] && '' !== numberFont[ 0 ].letterSpacing[ 2 ] ? numberFont[ 0 ].letterSpacing[ 2 ] : '' ) );
+ const previewNumberFontSize = getPreviewSize( previewDevice, ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].size && undefined !== numberFont[ 0 ].size[ 0 ] && '' !== numberFont[ 0 ].size[ 0 ] ? numberFont[ 0 ].size[ 0 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].size && undefined !== numberFont[ 0 ].size[ 1 ] && '' !== numberFont[ 0 ].size[ 1 ] ? numberFont[ 0 ].size[ 1 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].size && undefined !== numberFont[ 0 ].size[ 2 ] && '' !== numberFont[ 0 ].size[ 2 ] ? numberFont[ 0 ].size[ 2 ] : '' ) );
+ const previewNumberLineSize = getPreviewSize( previewDevice, ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].lineHeight && undefined !== numberFont[ 0 ].lineHeight[ 0 ] && '' !== numberFont[ 0 ].lineHeight[ 0 ] ? numberFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].lineHeight && undefined !== numberFont[ 0 ].lineHeight[ 1 ] && '' !== numberFont[ 0 ].lineHeight[ 1 ] ? numberFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].lineHeight && undefined !== numberFont[ 0 ].lineHeight[ 2 ] && '' !== numberFont[ 0 ].lineHeight[ 2 ] ? numberFont[ 0 ].lineHeight[ 2 ] : '' ) );
+ const previewNumberLetterSize = getPreviewSize( previewDevice, ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].letterSpacing && undefined !== numberFont[ 0 ].letterSpacing[ 0 ] && '' !== numberFont[ 0 ].letterSpacing[ 0 ] ? numberFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].letterSpacing && undefined !== numberFont[ 0 ].letterSpacing[ 1 ] && '' !== numberFont[ 0 ].letterSpacing[ 1 ] ? numberFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== numberFont && undefined !== numberFont[ 0 ] && undefined !== numberFont[ 0 ].letterSpacing && undefined !== numberFont[ 0 ].letterSpacing[ 2 ] && '' !== numberFont[ 0 ].letterSpacing[ 2 ] ? numberFont[ 0 ].letterSpacing[ 2 ] : '' ) );
const previewLabelSizeType = ( undefined !== labelFont && undefined !== labelFont[ 0 ] && '' !== labelFont[ 0 ].sizeType ? labelFont[ 0 ].sizeType : 'px' );
const previewLabelLineType = ( undefined !== labelFont && undefined !== labelFont[ 0 ] && '' !== labelFont[ 0 ].lineType ? labelFont[ 0 ].lineType : 'px' );
const previewLabelLetterType = ( undefined !== labelFont && undefined !== labelFont[ 0 ] && '' !== labelFont[ 0 ].letterType ? labelFont[ 0 ].letterType : 'px' );
- const previewLabelFontSize = getPreviewSize( getPreviewDevice, ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].size && undefined !== labelFont[ 0 ].size[ 0 ] && '' !== labelFont[ 0 ].size[ 0 ] ? labelFont[ 0 ].size[ 0 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].size && undefined !== labelFont[ 0 ].size[ 1 ] && '' !== labelFont[ 0 ].size[ 1 ] ? labelFont[ 0 ].size[ 1 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].size && undefined !== labelFont[ 0 ].size[ 2 ] && '' !== labelFont[ 0 ].size[ 2 ] ? labelFont[ 0 ].size[ 2 ] : '' ) );
- const previewLabelLineSize = getPreviewSize( getPreviewDevice, ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].lineHeight && undefined !== labelFont[ 0 ].lineHeight[ 0 ] && '' !== labelFont[ 0 ].lineHeight[ 0 ] ? labelFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].lineHeight && undefined !== labelFont[ 0 ].lineHeight[ 1 ] && '' !== labelFont[ 0 ].lineHeight[ 1 ] ? labelFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].lineHeight && undefined !== labelFont[ 0 ].lineHeight[ 2 ] && '' !== labelFont[ 0 ].lineHeight[ 2 ] ? labelFont[ 0 ].lineHeight[ 2 ] : '' ) );
- const previewLabelLetterSize = getPreviewSize( getPreviewDevice, ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].letterSpacing && undefined !== labelFont[ 0 ].letterSpacing[ 0 ] && '' !== labelFont[ 0 ].letterSpacing[ 0 ] ? labelFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].letterSpacing && undefined !== labelFont[ 0 ].letterSpacing[ 1 ] && '' !== labelFont[ 0 ].letterSpacing[ 1 ] ? labelFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].letterSpacing && undefined !== labelFont[ 0 ].letterSpacing[ 2 ] && '' !== labelFont[ 0 ].letterSpacing[ 2 ] ? labelFont[ 0 ].letterSpacing[ 2 ] : '' ) );
+ const previewLabelFontSize = getPreviewSize( previewDevice, ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].size && undefined !== labelFont[ 0 ].size[ 0 ] && '' !== labelFont[ 0 ].size[ 0 ] ? labelFont[ 0 ].size[ 0 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].size && undefined !== labelFont[ 0 ].size[ 1 ] && '' !== labelFont[ 0 ].size[ 1 ] ? labelFont[ 0 ].size[ 1 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].size && undefined !== labelFont[ 0 ].size[ 2 ] && '' !== labelFont[ 0 ].size[ 2 ] ? labelFont[ 0 ].size[ 2 ] : '' ) );
+ const previewLabelLineSize = getPreviewSize( previewDevice, ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].lineHeight && undefined !== labelFont[ 0 ].lineHeight[ 0 ] && '' !== labelFont[ 0 ].lineHeight[ 0 ] ? labelFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].lineHeight && undefined !== labelFont[ 0 ].lineHeight[ 1 ] && '' !== labelFont[ 0 ].lineHeight[ 1 ] ? labelFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].lineHeight && undefined !== labelFont[ 0 ].lineHeight[ 2 ] && '' !== labelFont[ 0 ].lineHeight[ 2 ] ? labelFont[ 0 ].lineHeight[ 2 ] : '' ) );
+ const previewLabelLetterSize = getPreviewSize( previewDevice, ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].letterSpacing && undefined !== labelFont[ 0 ].letterSpacing[ 0 ] && '' !== labelFont[ 0 ].letterSpacing[ 0 ] ? labelFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].letterSpacing && undefined !== labelFont[ 0 ].letterSpacing[ 1 ] && '' !== labelFont[ 0 ].letterSpacing[ 1 ] ? labelFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== labelFont && undefined !== labelFont[ 0 ] && undefined !== labelFont[ 0 ].letterSpacing && undefined !== labelFont[ 0 ].letterSpacing[ 2 ] && '' !== labelFont[ 0 ].letterSpacing[ 2 ] ? labelFont[ 0 ].letterSpacing[ 2 ] : '' ) );
const previewPreLabelSizeType = ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && '' !== preLabelFont[ 0 ].sizeType ? preLabelFont[ 0 ].sizeType : 'px' );
const previewPreLabelLineType = ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && '' !== preLabelFont[ 0 ].lineType ? preLabelFont[ 0 ].lineType : 'px' );
const previewPreLabelLetterType = ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && '' !== preLabelFont[ 0 ].letterType ? preLabelFont[ 0 ].letterType : 'px' );
- const previewPreLabelFontSize = getPreviewSize( getPreviewDevice, ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].size && undefined !== preLabelFont[ 0 ].size[ 0 ] && '' !== preLabelFont[ 0 ].size[ 0 ] ? preLabelFont[ 0 ].size[ 0 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].size && undefined !== preLabelFont[ 0 ].size[ 1 ] && '' !== preLabelFont[ 0 ].size[ 1 ] ? preLabelFont[ 0 ].size[ 1 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].size && undefined !== preLabelFont[ 0 ].size[ 2 ] && '' !== preLabelFont[ 0 ].size[ 2 ] ? preLabelFont[ 0 ].size[ 2 ] : '' ) );
- const previewPreLabelLineSize = getPreviewSize( getPreviewDevice, ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].lineHeight && undefined !== preLabelFont[ 0 ].lineHeight[ 0 ] && '' !== preLabelFont[ 0 ].lineHeight[ 0 ] ? preLabelFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].lineHeight && undefined !== preLabelFont[ 0 ].lineHeight[ 1 ] && '' !== preLabelFont[ 0 ].lineHeight[ 1 ] ? preLabelFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].lineHeight && undefined !== preLabelFont[ 0 ].lineHeight[ 2 ] && '' !== preLabelFont[ 0 ].lineHeight[ 2 ] ? preLabelFont[ 0 ].lineHeight[ 2 ] : '' ) );
- const previewPreLabelLetterSize = getPreviewSize( getPreviewDevice, ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].letterSpacing && undefined !== preLabelFont[ 0 ].letterSpacing[ 0 ] && '' !== preLabelFont[ 0 ].letterSpacing[ 0 ] ? preLabelFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].letterSpacing && undefined !== preLabelFont[ 0 ].letterSpacing[ 1 ] && '' !== preLabelFont[ 0 ].letterSpacing[ 1 ] ? preLabelFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].letterSpacing && undefined !== preLabelFont[ 0 ].letterSpacing[ 2 ] && '' !== preLabelFont[ 0 ].letterSpacing[ 2 ] ? preLabelFont[ 0 ].letterSpacing[ 2 ] : '' ) );
+ const previewPreLabelFontSize = getPreviewSize( previewDevice, ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].size && undefined !== preLabelFont[ 0 ].size[ 0 ] && '' !== preLabelFont[ 0 ].size[ 0 ] ? preLabelFont[ 0 ].size[ 0 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].size && undefined !== preLabelFont[ 0 ].size[ 1 ] && '' !== preLabelFont[ 0 ].size[ 1 ] ? preLabelFont[ 0 ].size[ 1 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].size && undefined !== preLabelFont[ 0 ].size[ 2 ] && '' !== preLabelFont[ 0 ].size[ 2 ] ? preLabelFont[ 0 ].size[ 2 ] : '' ) );
+ const previewPreLabelLineSize = getPreviewSize( previewDevice, ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].lineHeight && undefined !== preLabelFont[ 0 ].lineHeight[ 0 ] && '' !== preLabelFont[ 0 ].lineHeight[ 0 ] ? preLabelFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].lineHeight && undefined !== preLabelFont[ 0 ].lineHeight[ 1 ] && '' !== preLabelFont[ 0 ].lineHeight[ 1 ] ? preLabelFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].lineHeight && undefined !== preLabelFont[ 0 ].lineHeight[ 2 ] && '' !== preLabelFont[ 0 ].lineHeight[ 2 ] ? preLabelFont[ 0 ].lineHeight[ 2 ] : '' ) );
+ const previewPreLabelLetterSize = getPreviewSize( previewDevice, ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].letterSpacing && undefined !== preLabelFont[ 0 ].letterSpacing[ 0 ] && '' !== preLabelFont[ 0 ].letterSpacing[ 0 ] ? preLabelFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].letterSpacing && undefined !== preLabelFont[ 0 ].letterSpacing[ 1 ] && '' !== preLabelFont[ 0 ].letterSpacing[ 1 ] ? preLabelFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== preLabelFont && undefined !== preLabelFont[ 0 ] && undefined !== preLabelFont[ 0 ].letterSpacing && undefined !== preLabelFont[ 0 ].letterSpacing[ 2 ] && '' !== preLabelFont[ 0 ].letterSpacing[ 2 ] ? preLabelFont[ 0 ].letterSpacing[ 2 ] : '' ) );
const previewPostLabelSizeType = ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && '' !== postLabelFont[ 0 ].sizeType ? postLabelFont[ 0 ].sizeType : 'px' );
const previewPostLabelLineType = ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && '' !== postLabelFont[ 0 ].lineType ? postLabelFont[ 0 ].lineType : 'px' );
const previewPostLabelLetterType = ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && '' !== postLabelFont[ 0 ].letterType ? postLabelFont[ 0 ].letterType : 'px' );
- const previewPostLabelFontSize = getPreviewSize( getPreviewDevice, ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].size && undefined !== postLabelFont[ 0 ].size[ 0 ] && '' !== postLabelFont[ 0 ].size[ 0 ] ? postLabelFont[ 0 ].size[ 0 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].size && undefined !== postLabelFont[ 0 ].size[ 1 ] && '' !== postLabelFont[ 0 ].size[ 1 ] ? postLabelFont[ 0 ].size[ 1 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].size && undefined !== postLabelFont[ 0 ].size[ 2 ] && '' !== postLabelFont[ 0 ].size[ 2 ] ? postLabelFont[ 0 ].size[ 2 ] : '' ) );
- const previewPostLabelLineSize = getPreviewSize( getPreviewDevice, ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].lineHeight && undefined !== postLabelFont[ 0 ].lineHeight[ 0 ] && '' !== postLabelFont[ 0 ].lineHeight[ 0 ] ? postLabelFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].lineHeight && undefined !== postLabelFont[ 0 ].lineHeight[ 1 ] && '' !== postLabelFont[ 0 ].lineHeight[ 1 ] ? postLabelFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].lineHeight && undefined !== postLabelFont[ 0 ].lineHeight[ 2 ] && '' !== postLabelFont[ 0 ].lineHeight[ 2 ] ? postLabelFont[ 0 ].lineHeight[ 2 ] : '' ) );
- const previewPostLabelLetterSize = getPreviewSize( getPreviewDevice, ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].letterSpacing && undefined !== postLabelFont[ 0 ].letterSpacing[ 0 ] && '' !== postLabelFont[ 0 ].letterSpacing[ 0 ] ? postLabelFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].letterSpacing && undefined !== postLabelFont[ 0 ].letterSpacing[ 1 ] && '' !== postLabelFont[ 0 ].letterSpacing[ 1 ] ? postLabelFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].letterSpacing && undefined !== postLabelFont[ 0 ].letterSpacing[ 2 ] && '' !== postLabelFont[ 0 ].letterSpacing[ 2 ] ? postLabelFont[ 0 ].letterSpacing[ 2 ] : '' ) );
+ const previewPostLabelFontSize = getPreviewSize( previewDevice, ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].size && undefined !== postLabelFont[ 0 ].size[ 0 ] && '' !== postLabelFont[ 0 ].size[ 0 ] ? postLabelFont[ 0 ].size[ 0 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].size && undefined !== postLabelFont[ 0 ].size[ 1 ] && '' !== postLabelFont[ 0 ].size[ 1 ] ? postLabelFont[ 0 ].size[ 1 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].size && undefined !== postLabelFont[ 0 ].size[ 2 ] && '' !== postLabelFont[ 0 ].size[ 2 ] ? postLabelFont[ 0 ].size[ 2 ] : '' ) );
+ const previewPostLabelLineSize = getPreviewSize( previewDevice, ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].lineHeight && undefined !== postLabelFont[ 0 ].lineHeight[ 0 ] && '' !== postLabelFont[ 0 ].lineHeight[ 0 ] ? postLabelFont[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].lineHeight && undefined !== postLabelFont[ 0 ].lineHeight[ 1 ] && '' !== postLabelFont[ 0 ].lineHeight[ 1 ] ? postLabelFont[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].lineHeight && undefined !== postLabelFont[ 0 ].lineHeight[ 2 ] && '' !== postLabelFont[ 0 ].lineHeight[ 2 ] ? postLabelFont[ 0 ].lineHeight[ 2 ] : '' ) );
+ const previewPostLabelLetterSize = getPreviewSize( previewDevice, ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].letterSpacing && undefined !== postLabelFont[ 0 ].letterSpacing[ 0 ] && '' !== postLabelFont[ 0 ].letterSpacing[ 0 ] ? postLabelFont[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].letterSpacing && undefined !== postLabelFont[ 0 ].letterSpacing[ 1 ] && '' !== postLabelFont[ 0 ].letterSpacing[ 1 ] ? postLabelFont[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== postLabelFont && undefined !== postLabelFont[ 0 ] && undefined !== postLabelFont[ 0 ].letterSpacing && undefined !== postLabelFont[ 0 ].letterSpacing[ 2 ] && '' !== postLabelFont[ 0 ].letterSpacing[ 2 ] ? postLabelFont[ 0 ].letterSpacing[ 2 ] : '' ) );
const classes = classnames( {
'kb-countdown-container' : true,
[ `kb-countdown-container-${uniqueID}` ] : uniqueID,
@@ -614,6 +626,7 @@ function KadenceCountdown( props ) {
{( previewItemPaddingBottom ? `padding-bottom: ${previewItemPaddingBottom + previewItemPaddingType};` : '' )}
{'}'}
+
{showSettings( 'allSettings', 'kadence/countdown' ) && (
<>
@@ -664,7 +677,7 @@ function KadenceCountdown( props ) {
- {isNested && (
+ {1 === isNested && (
<>
{__( 'Countdown Time Settings Synced to Parent Block', 'kadence-blocks' )}
+ {
+ kadence_blocks_params.pro === 'true' && 'evergreen' !== countdownType &&
+
+ setAttributes( { repeat: value } )}
+ help={__( 'This will give the option to restart the countdown concurrently.', 'kadence-blocks' )}
+ />
+ {
+ repeat && (
+ <>
+ setAttributes( { frequency: value } )}
+ />
+
+ setAttributes( { stopRepeating: value } )}
+ help={__( 'This will give the option to stop repeating the countdown at a specific date.', 'kadence-blocks' )}
+ />
+
+ {
+ stopRepeating &&
+
+
{__( 'End Date for Recurrent Countdown', 'kadence-blocks' )}
+ setAttributes({ endDate: value}) }
+ is12Hour={is12HourTime}
+ help={__( 'Pick a date to stop recurrent repetition of the countdown.', 'kadence-blocks' )}
+ />
+
+ }
+
+ )
+ }
+
+ }
+
{
- const { clientId } = ownProps;
- let isNested = false;
- const {
- getBlock,
- getBlockParentsByBlockName,
- } = select( 'core/block-editor' );
- const parentBlocks = getBlockParentsByBlockName( clientId, 'kadence/countdown' );
- if ( parentBlocks.length && undefined !== parentBlocks[ 0 ] && '' !== parentBlocks[ 0 ] ) {
- isNested = true;
- }
- return {
- isNested : isNested,
- parentBlock : ( isNested ? getBlock( parentBlocks[ 0 ] ) : '' ),
- getPreviewDevice: select( 'kadenceblocks/data' ).getPreviewDeviceType(),
- };
- } ),
- withDispatch( ( dispatch, { clientId } ) => {
- const { selectBlock } = dispatch( blockEditorStore );
- return {
- selectBlock: ( id ) => selectBlock( id ),
- };
- } ),
-] )( KadenceCountdown );
+export default KadenceCountdown ;
diff --git a/src/blocks/tabs/edit.js b/src/blocks/tabs/edit.js
index fb1f331ce..11e226469 100644
--- a/src/blocks/tabs/edit.js
+++ b/src/blocks/tabs/edit.js
@@ -1706,6 +1706,7 @@ function KadenceTabs( props ) {
setWizardState(true)}
isUserAuthenticated={authenticated}
+ showControls={showControls}
+ isNetworkAdmin={isNetworkAdmin}
/>
{ aiStatus === 'getInitial' && (
@@ -163,7 +169,7 @@ export default function KadenceBlocksHome() {
);
})}
- {wizardState && (
+ { ! isNetworkAdmin && wizardState && (
-
{ authenticated ? footerText : __( 'AI access is not authorized.')}
+ { showControls && (
+
{ authenticated ? footerText : __( 'AI access is not authorized.', 'kadence-blocks' ) }
+ ) }
+ { ! showControls && (
+
{ authenticated ? __( 'AI access authorized.', 'kadence-blocks' ) : __( 'AI access is not authorized.', 'kadence-blocks' ) }
+ ) }
);
diff --git a/src/extension/analytics/send-event.js b/src/extension/analytics/send-event.js
index b9043f5d9..c50c6248f 100644
--- a/src/extension/analytics/send-event.js
+++ b/src/extension/analytics/send-event.js
@@ -19,7 +19,8 @@ export async function sendEvent(event_label, event_data) {
},
});
} catch (error) {
- console.log(`ERROR: ${JSON.stringify(error)}`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${message}`);
return 'failed';
}
}
diff --git a/src/extension/image-picker/functions/downloadToMediaLibrary.js b/src/extension/image-picker/functions/downloadToMediaLibrary.js
index a59eae3a4..bf4b7ab83 100644
--- a/src/extension/image-picker/functions/downloadToMediaLibrary.js
+++ b/src/extension/image-picker/functions/downloadToMediaLibrary.js
@@ -18,7 +18,8 @@ async function downloadImage( images ) {
},
});
} catch (error) {
- console.log(`ERROR: ${ JSON.stringify(error) }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return false;
}
}
diff --git a/src/plugins/prebuilt-library/ai-wizard/components/autocomplete/autocomplete.js b/src/plugins/prebuilt-library/ai-wizard/components/autocomplete/autocomplete.js
index 193fc34f7..5fcbd516e 100644
--- a/src/plugins/prebuilt-library/ai-wizard/components/autocomplete/autocomplete.js
+++ b/src/plugins/prebuilt-library/ai-wizard/components/autocomplete/autocomplete.js
@@ -213,12 +213,12 @@ export function Autocomplete(props) {
icon={ closeSmall }
/>
) }
-
+ {/*
inputRef.current.focus() }
icon={ chevronDown }
- />
+ /> */}
0 || locationType !== LOCATION_ONLINE_ONLY && ! locationInput);
+ case 'about-your-site':
+ const missionLength = missionStatement.length >= 200 && missionStatement.length < 1500 ? false : true;
+
+ return (missionLength || missing.length > 0) ? true : false;
case 'the-details':
const missingKeywords = keywords.length >= 5 ? false : true;
diff --git a/src/plugins/prebuilt-library/ai-wizard/pages/about-your-site.js b/src/plugins/prebuilt-library/ai-wizard/pages/about-your-site.js
index 80f8eb2ec..4db86ff52 100644
--- a/src/plugins/prebuilt-library/ai-wizard/pages/about-your-site.js
+++ b/src/plugins/prebuilt-library/ai-wizard/pages/about-your-site.js
@@ -109,25 +109,33 @@ export function AboutYourSite() {
const { getMissionStatement } = missionStatementHelper();
useEffect(() => {
- const progress = Math.round(
+ const tempProgress = Math.round(
(missionStatement.length / MISSION_STATEMENT_GOAL) * 100
);
- const statementProgress = progress >= 100 ? 100 : progress;
-
- if (statementProgress == 0) {
+ console.log("lendth", missionStatement.length);
+ if (tempProgress == 0) {
setIndicator("initial");
}
- if (statementProgress < 50 && statementProgress > 0) {
+ if (tempProgress < 50 && tempProgress > 0) {
setIndicator("weak");
}
- if (statementProgress >= 50) {
+ if (tempProgress >= 50 && tempProgress < 100) {
setIndicator("medium");
}
- if (statementProgress == 100) {
+ if (tempProgress >= 100 && tempProgress < 200 ) {
setIndicator("strong");
}
+ if (tempProgress >= 200 && tempProgress < 500) {
+ setIndicator("enough");
+ }
+ if (tempProgress >= 400 && tempProgress < 500) {
+ setIndicator("less");
+ }
+ if (tempProgress >= 500 ) {
+ setIndicator("muchLess");
+ }
- setProgress(statementProgress);
+ setProgress(tempProgress);
}, [missionStatement]);
function getPlaceholderText() {
@@ -193,7 +201,7 @@ export function AboutYourSite() {
dispatch({ type: "SET_IMAGE_SEARCH_QUERY", payload: '' });
}}
progressBarProps={{
- value: progress,
+ value: progress >= 100 ? 100 : progress,
color: MISSION_STATEMENT_STATUS?.[indicator]?.color
? MISSION_STATEMENT_STATUS[indicator].color
: "red",
@@ -240,7 +248,7 @@ export function AboutYourSite() {
) }
- {progress == 100 && (
+ { ( progress >= 100 ) && ( progress < 400 ) && (
75 ) {
+ industry = industry.substring(0, 75);
+ }
dispatch({ type: 'SET_INDUSTRY', payload: industry });
}
@@ -176,9 +179,13 @@ export function IndustryInformation() {
autoFocus
placeholder={getNameInputText("placeholder")}
value={companyName}
- onChange={(value) =>
- dispatch({ type: "SET_COMPANY_NAME", payload: value })
- }
+ onChange={(value) => {
+ // Prevent a super long string.
+ if ( value && value.length > 75 ) {
+ value = value.substring(0, 75);
+ }
+ dispatch({ type: "SET_COMPANY_NAME", payload: value });
+ }}
/>
+ onChange={(value) => {
+ if ( value && value.length > 140 ) {
+ value = value.substring(0, 140);
+ }
dispatch({ type: "SET_LOCATION_INPUT", payload: value })
- }
+ }}
help={getLocationHelpText()}
/>
) : null }
@@ -205,7 +215,7 @@ export function IndustryInformation() {
currentValue={ industry ? industry : '' }
initialState={{
isOpen: false,
- query: industry ? industry : '',
+ query: industry ? industry : '',
params: {
hitsPerPage: 8,
highlightPreTag: '',
diff --git a/src/plugins/prebuilt-library/ai-wizard/utils/premade-collection-helper.js b/src/plugins/prebuilt-library/ai-wizard/utils/premade-collection-helper.js
index c2c5cd1e0..5b5e2e027 100644
--- a/src/plugins/prebuilt-library/ai-wizard/utils/premade-collection-helper.js
+++ b/src/plugins/prebuilt-library/ai-wizard/utils/premade-collection-helper.js
@@ -173,7 +173,8 @@ export function preMadeCollectionsHelper() {
}
return [];
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
}
}
diff --git a/src/plugins/prebuilt-library/assets/css/pattern-filters.scss b/src/plugins/prebuilt-library/assets/css/pattern-filters.scss
new file mode 100644
index 000000000..97e2de7a6
--- /dev/null
+++ b/src/plugins/prebuilt-library/assets/css/pattern-filters.scss
@@ -0,0 +1,130 @@
+.kb-patterns-filter-wrapper {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+ margin: 16px var(--kb-patterns-outer-wrap-spacing, 48px) 32px;
+}
+
+.kb-pattern-filter-label {
+ font-size: 13px;
+ color: #000;
+ font-weight: bold;
+ margin-right: 14px;
+}
+
+.kb-patterns-filter-dropdown {
+
+ .kb-toggle-button {
+ color: #000;
+ background: white;
+ border: 1px solid;
+ border-color: #DFDFDF;
+ padding: 8px 16px;
+ height: auto;
+ font-size: 13px;
+ line-height: 1.4;
+ border-radius: 4px;
+ font-weight: 500;
+
+ .kb-toggle-button-wrapper {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ > svg {
+ transform: rotate(0deg);
+
+ path {
+ fill: #000;
+ }
+ }
+ }
+
+ &:focus:not(:disabled) {
+ box-shadow: none;
+ }
+
+ &:hover {
+ color: #000;
+ background: #F5F5F5;
+ border-color: #DFDFDF;
+ }
+
+ &[aria-expanded='true'] {
+ color: white;
+ background: var(--kadence-ui-color, #0073E6);
+ border-color: var(--kadence-ui-color, #0073E6);
+
+ .kb-toggle-button-wrapper {
+ > svg {
+ transform: rotate(180deg);
+
+ path {
+ fill: white;
+ }
+ }
+ }
+ }
+ }
+}
+
+.kb-patterns-filter-dropdown-content {
+ box-shadow: 0px 0px 32px 0px #0000001A;
+ background-color: white;
+ border-radius: 4px;
+ border: 1px solid #e8e8e8;
+
+ .kb-pattern-filter-item {
+ white-space: nowrap;
+
+ .components-checkbox-control {
+ padding: 8px 32px 8px 12px;
+ }
+
+ .components-base-control__field {
+ margin-bottom: 0px;
+ }
+
+ .components-checkbox-control__label {
+ font-size: 15px;
+ color: #333;
+ white-space: nowrap;
+ }
+
+ .components-checkbox-control__input[type=checkbox]:checked {
+ background: #020129;
+ border-color: #020129;
+ }
+
+ &:hover {
+ background: #FAFAFA;
+ }
+ }
+
+ .components-popover__content {
+ padding: 0px;
+ position: relative;
+ background-color: white;
+ border-radius: 4px;
+
+ .kb-patterns-filter-dropdown-content-inner {
+ height: 300px;
+ overflow: scroll;
+ padding-bottom: 42px;
+ }
+
+ .kb-pattern-filter-dropdown-content-clear {
+ position: absolute;
+ bottom: 0px;
+ background-color: white;
+ padding: 12px 8px 12px 12px;
+ font-size: 13px;
+ width: 100%;
+ border-top: 1px solid #DFDFDF;
+ cursor: pointer;
+ color: var(--kadence-ui-color, #0073E6);
+ font-weight: 500;
+ }
+
+ }
+}
diff --git a/src/plugins/prebuilt-library/data-fetch/constants.js b/src/plugins/prebuilt-library/data-fetch/constants.js
index 0ff1240f3..68a7bca9c 100644
--- a/src/plugins/prebuilt-library/data-fetch/constants.js
+++ b/src/plugins/prebuilt-library/data-fetch/constants.js
@@ -123,9 +123,7 @@ export const PATTERN_CATEGORIES = {
'home': __( 'Home', 'kadence-blocks' ),
'about': __( 'About', 'kadence-blocks' ),
'contact': __( 'Contact', 'kadence-blocks' ),
- 'pricing': __( 'Pricing', 'kadence-blocks' ),
'services': __( 'Services', 'kadence-blocks' ),
- 'blog': __( 'Blog', 'kadence-blocks' ),
};
export const CONTEXT_PROMPTS = {
'value-prop': '6',
diff --git a/src/plugins/prebuilt-library/data-fetch/get-async-data.js b/src/plugins/prebuilt-library/data-fetch/get-async-data.js
index 749856c9b..820f7e61a 100644
--- a/src/plugins/prebuilt-library/data-fetch/get-async-data.js
+++ b/src/plugins/prebuilt-library/data-fetch/get-async-data.js
@@ -39,7 +39,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'error';
}
}
@@ -65,7 +66,8 @@ export function getAsyncData() {
return true;
}
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
setLoadingWizard(false);
setError(true);
@@ -96,7 +98,8 @@ export function getAsyncData() {
}
}
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
setLoadingWizard(false);
setError(true);
@@ -163,7 +166,8 @@ export function getAsyncData() {
}
return [];
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
}
}
const industries = Array.isArray(userData.photoLibrary) ? userData?.photoLibrary : [ userData.photoLibrary ];
@@ -180,7 +184,8 @@ export function getAsyncData() {
}
return [];
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
}
}
@@ -200,7 +205,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -219,7 +225,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -237,7 +244,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -281,7 +289,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -302,7 +311,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -323,7 +333,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -346,7 +357,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -374,7 +386,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -392,7 +405,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
@@ -415,7 +429,8 @@ export function getAsyncData() {
} );
return response;
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
return 'failed';
}
}
diff --git a/src/plugins/prebuilt-library/data-fetch/get-collections.js b/src/plugins/prebuilt-library/data-fetch/get-collections.js
index ecca62cfe..0ad56986d 100644
--- a/src/plugins/prebuilt-library/data-fetch/get-collections.js
+++ b/src/plugins/prebuilt-library/data-fetch/get-collections.js
@@ -64,11 +64,10 @@ export function getCollection() {
}
return [];
} catch (error) {
- console.log(`ERROR: ${ error }`);
+ const message = error?.message ? error.message : error;
+ console.log(`ERROR: ${ message }`);
}
}
-
-
return {
setCollection,
getCollection,
diff --git a/src/plugins/prebuilt-library/editor.scss b/src/plugins/prebuilt-library/editor.scss
index 3e53217f8..4ac438d91 100644
--- a/src/plugins/prebuilt-library/editor.scss
+++ b/src/plugins/prebuilt-library/editor.scss
@@ -4,6 +4,9 @@
* CSS for just Backend enqueued after style.scss
* which makes it higher in priority.
*/
+
+@import "assets/css/pattern-filters";
+
.kt-prebuilt-modal {
--kadence-ui-color: #0073E6;
}
@@ -1519,116 +1522,8 @@ a.components-external-link.kadence-upgrade-to-pro-btn {
text-transform: uppercase;
}
-.kb-patterns-filter-dropdown {
- margin: 8px var(--kb-patterns-outer-wrap-spacing, 48px ) 0px;
-
- .kb-toggle-button {
- color: #000;
- background: white;
- border: 1px solid;
- border-color: #DFDFDF;
- padding: 8px 16px;
- height: auto;
- font-size: 13px;
- line-height: 1.4;
- border-radius: 4px;
- font-weight: 500;
-
- .kb-toggle-button-wrapper {
- display: flex;
- gap: 4px;
- align-items: center;
-
- > svg {
- color: #020129;
- transform: rotate(0deg);
- }
- }
-
- &:focus:not(:disabled) {
- box-shadow: none;
- }
-
- &:hover {
- color: #000;
- background: #F5F5F5;
- border-color: #DFDFDF;
- }
-
- &[aria-expanded='true'] {
- color: white;
- background: var(--kadence-ui-color, #0073E6);
- border-color: var(--kadence-ui-color, #0073E6);
-
- .kb-toggle-button-wrapper {
- > svg {
- color: white;
- transform: rotate(180deg);
- }
- }
- }
- }
-}
-.kb-patterns-filter-dropdown-content {
- box-shadow: 0px 0px 32px 0px #0000001A;
- background-color: white;
- border-radius: 4px;
- border: 1px solid #e8e8e8;
-
- .kb-pattern-filter-item {
- white-space: nowrap;
-
- .components-checkbox-control {
- padding: 8px 32px 8px 12px;
- }
- .components-base-control__field {
- margin-bottom: 0px;
- }
-
- .components-checkbox-control__label {
- font-size: 15px;
- color: #333;
- white-space: nowrap;
- }
-
- .components-checkbox-control__input[type=checkbox]:checked {
- background: #020129;
- border-color: #020129;
- }
-
- &:hover {
- background: #FAFAFA;
- }
- }
- .components-popover__content {
- padding: 0px;
- position: relative;
- background-color: white;
- border-radius: 4px;
-
- .kb-patterns-filter-dropdown-content-inner {
- height: 300px;
- overflow: scroll;
- padding-bottom: 42px;
- }
-
- .kb-pattern-filter-dropdown-content-clear {
- position: absolute;
- bottom: 0px;
- background-color: white;
- padding: 12px 8px 12px 12px;
- font-size: 13px;
- width: 100%;
- border-top: 1px solid #DFDFDF;
- cursor: pointer;
- color: var(--kadence-ui-color, #0073E6);
- font-weight: 500;
- }
-
- }
-}
.block-editor-block-patterns-list__item .block-editor-block-preview__container {
align-items: flex-start;
}
@@ -1637,4 +1532,4 @@ a.components-external-link.kadence-upgrade-to-pro-btn {
min-width: 1px;
min-height: 1px;
}
-}
\ No newline at end of file
+}
diff --git a/src/plugins/prebuilt-library/page-list.js b/src/plugins/prebuilt-library/page-list.js
index c4333b9cb..2cbccd757 100644
--- a/src/plugins/prebuilt-library/page-list.js
+++ b/src/plugins/prebuilt-library/page-list.js
@@ -548,10 +548,10 @@ function PageList( {
--global-palette7:${kadence_blocks_params.global_colors['--global-palette7']};
--global-palette8:${kadence_blocks_params.global_colors['--global-palette8']};
--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']};
- }.kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette3']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}.wp-block-kadence-tabs.kb-pattern-active-tab-highlight .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title{ color:${kadence_blocks_params.global_colors['--global-palette9']} !important} .kb-pattern-light-color{--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}}`;
+ }.kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette3']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/12/logo-placeholder"] {filter: invert(1);}.wp-block-kadence-tabs.kb-pattern-active-tab-highlight .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title{ color:${kadence_blocks_params.global_colors['--global-palette9']} !important} .kb-pattern-light-color{--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-bottom-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette4']}!important}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-top-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette4']}!important}`;
}
newStyles = [
- { css: `.single-iframe-content{${normalizeStyles} ${globalColors}}.pattern-shadow-wrap > .single-iframe-content > .kb-row-layout-wrap, .pattern-shadow-wrap > .single-iframe-content > .kb-blocks-highlight-page-section { margin-top:-1px;}.pattern-shadow-wrap .single-iframe-content {--global-content-width:1200px }.single-iframe-content .kb-pattern-delete-block {display: none;}${colorClasses}${styleColors}` }
+ { css: `.single-iframe-content{${normalizeStyles} ${globalColors}}.pattern-shadow-wrap > .single-iframe-content > .kb-row-layout-wrap, .pattern-shadow-wrap > .single-iframe-content > .kb-blocks-highlight-page-section { margin-top:-1px;}.pattern-shadow-wrap .single-iframe-content {--global-content-width:1200px }.single-iframe-content .kb-pattern-delete-block {display: none;}${colorClasses}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-bottom-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-top-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}${styleColors}` }
];
return newStyles;
}, [ selectedStyle ] );
diff --git a/src/plugins/prebuilt-library/pattern-library.js b/src/plugins/prebuilt-library/pattern-library.js
index e4220a832..07a91756a 100644
--- a/src/plugins/prebuilt-library/pattern-library.js
+++ b/src/plugins/prebuilt-library/pattern-library.js
@@ -26,11 +26,6 @@ import {
* WordPress dependencies
*/
import { parse, rawHandler } from '@wordpress/blocks';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import {
- Component,
-} from '@wordpress/element';
import { debounce, isEqual } from 'lodash';
import {
Button,
@@ -106,6 +101,7 @@ function PatternLibrary( {
const [ teamCollection, setTeamCollection ] = useState( {} );
const [ categories, setCategories ] = useState( PATTERN_CATEGORIES );
const [ categoryListOptions, setCategoryListOptions ] = useState( [] );
+ const [ styleListOptions, setStyleListOptions ] = useState( [] );
const [ contextOptions, setContextOptions ] = useState( PATTERN_CONTEXTS );
const [ contextStatesRef, setContextStatesRef ] = useState( false );
const [ contextListOptions, setContextListOptions ] = useState( [] );
@@ -237,11 +233,46 @@ function PatternLibrary( {
const { createErrorNotice } = useDispatch(
noticesStore
);
+
+ // Setting category options
useEffect( () => {
setCategoryListOptions( Object.keys( categories ).map( function( key, index ) {
return { value: ( 'category' === key ? 'all' : key ), label: ( 'category' === key ? __( 'All', 'kadence-blocks' ) : categories[key] ) }
} ) );
}, [ categories ] );
+
+ // Setting style options
+ useEffect( () => {
+ const patternStyles = Object.keys( patterns ).map( function( key ) {
+ return patterns[ key ].styles;
+ } );
+
+ // If array is empty, return
+ if ( ! patternStyles.length ) {
+ return;
+ }
+
+ // Clear duplicates
+ const uniqueMap = new Map();
+ patternStyles.forEach( ( item ) => {
+ if ( ! item ) {
+ return;
+ }
+ const key = Object.keys( item )[ 0 ];
+ const value = item[ key ];
+ uniqueMap.set( value, item );
+ } );
+
+ const uniqueArray = Array.from( uniqueMap.values() );
+ const styleOptions = uniqueArray.map( function( key ) {
+ const keyValue = Object.keys( key )[ 0 ];
+ const keyName = key[ keyValue ];
+ return { value: keyValue, label: keyName };
+ } );
+
+ setStyleListOptions( styleOptions );
+ }, [ patterns ] );
+
useEffect( () => {
setPageCategoryListOptions( Object.keys( pagesCategories ).map( function( key, index ) {
return { value: ( 'category' === key ? 'all' : key ), label: ( 'category' === key ? __( 'All', 'kadence-blocks' ) : pagesCategories[key] ) }
@@ -387,7 +418,7 @@ function PatternLibrary( {
if ( false !== localContexts ) {
tempLocalContexts = localContexts;
}
- if ( tempLocalContexts.indexOf( tempContext ) !== -1 ) {
+ if ( ! tempLocalContexts.includes( tempContext ) ) {
tempLocalContexts.push( tempContext );
setLocalContexts( tempLocalContexts );
}
@@ -404,7 +435,7 @@ function PatternLibrary( {
if ( false !== localContexts ) {
tempLocalContexts = localContexts;
}
- if ( tempLocalContexts.indexOf( tempContext ) !== -1 ) {
+ if ( ! tempLocalContexts.includes( tempContext ) ) {
tempLocalContexts.push( tempContext );
setLocalContexts( tempLocalContexts );
}
@@ -1045,7 +1076,8 @@ function PatternLibrary( {
) }
- { styleTerms && styleTerms.length ? (
+ { /* Temp removal as we are not using */ }
+ { false && styleTerms && styleTerms.length ? (
) }
diff --git a/src/plugins/prebuilt-library/pattern-list.js b/src/plugins/prebuilt-library/pattern-list.js
index 5e1b26cf9..34f932f23 100644
--- a/src/plugins/prebuilt-library/pattern-list.js
+++ b/src/plugins/prebuilt-library/pattern-list.js
@@ -280,35 +280,41 @@ function LoadingFailedHeader( { type } ) {
);
}
-function PatternFilterDropdown( { categories, selectedCategories } ) {
- const [options, setOptions] = useState(categories.filter((pattern) => pattern.label !== 'All'));
- const [selectedPatterns, setSelectedPatterns] = useState([]);
+function PatternFilterDropdown( { label, items, selectedItems } ) {
+ const [ options, setOptions ] = useState( items.filter( ( pattern ) => pattern.label !== 'All' ) );
+ const [ selectedPatterns, setSelectedPatterns ] = useState( [] );
useEffect(() => {
if(options && options.length) {
const temp = options.filter((pattern) => pattern.checked);
setSelectedPatterns(temp);
- if(selectedCategories) {
- selectedCategories(temp);
+ if(selectedItems) {
+ selectedItems(temp);
}
}
}, [options]);
- const filterIcon = (
- );
+ const filterIcon = (
);
const clearFilter = () => {
- setOptions(options.map((pattern) => ({...pattern, checked: false})))
- }
+ setOptions( options.map( ( pattern ) => ( { ...pattern, checked: false } ) ) );
+ };
- const updateSelection = (bool, index) => {
- const cloned = [...options];
- cloned[index].checked = bool;
- setOptions(cloned);
+ const updateSelection = ( bool, index ) => {
+ const cloned = [ ...options ];
+ cloned[ index ].checked = bool;
+ setOptions( cloned );
- }
+ // Update selectedPatterns state
+ const patternSelections = cloned.filter( ( pattern ) => pattern.checked );
+ setSelectedPatterns( patternSelections );
+
+ // Notify parent component about selected items
+ if ( selectedItems ) {
+ selectedItems( selectedPatterns );
+ }
+ };
return (
-
+
- Filters {selectedPatterns.length > 0 ? `(${selectedPatterns.length})` : ''}
+ { label } { selectedPatterns.length > 0 ? `(${ selectedPatterns.length })` : '' }
{ filterIcon }
@@ -333,19 +339,21 @@ function PatternFilterDropdown( { categories, selectedCategories } ) {
renderContent={ () => (
- {options && options.map((pattern, i) => (
-
- updateSelection(bool, i) }
- />
-
- ))}
+ { options && options.map( ( pattern, i ) => (
+ pattern.value && (
+
+ updateSelection( bool, i ) }
+ />
+
+ )
+ ) ) }
clearFilter()}>
- Clear
+ { __('Clear', 'kadence-blocks' ) }
) }
@@ -444,12 +452,14 @@ function PatternList( {
generateContext,
contextLabel,
launchWizard,
- categories
- } ) {
+ categories,
+ styles,
+} ) {
const [ failedAI, setFailedAI ] = useState( false );
const [ failedAIType, setFailedAIType ] = useState( 'general' );
const [rootScroll, setRootScroll] = useState();
const [ categoryFilter, setCategoryFilter ] = useState( [] );
+ const [ styleFilter, setStyleFilter ] = useState( [] );
const debouncedSpeak = useDebounce(speak, 500);
const { getContextState, getContextContent, getAllContext } = useSelect(
( select ) => {
@@ -498,27 +508,28 @@ function PatternList( {
let allPatterns = [];
Object.keys( patterns ).map( function( key, index ) {
const temp = [];
- temp['title'] = patterns[key].name;
- temp['name'] = patterns[key].name;
- temp['image'] = patterns[key].image;
- temp['imageWidth'] = patterns[key].imageW;
- temp['imageHeight'] = patterns[key].imageH;
- temp['id'] = patterns[key].id;
- temp['slug'] = patterns[key].slug;
- temp['categories'] = patterns[key].categories ? Object.keys( patterns[key].categories ) : [];
- temp['contexts'] = patterns[key].contexts ? Object.keys( patterns[key].contexts ) : [];
- temp['hpcontexts'] = patterns[key].hpcontexts ? Object.keys( patterns[key].hpcontexts ) : [];
- temp['keywords'] = patterns[key].keywords ? patterns[key].keywords : [];
- if ( patterns[key]?.html) {
- temp['html'] = replaceMasks( patterns[key].html );
+ temp.title = patterns[ key ].name;
+ temp.name = patterns[ key ].name;
+ temp.image = patterns[ key ].image;
+ temp.imageWidth = patterns[ key ].imageW;
+ temp.imageHeight = patterns[ key ].imageH;
+ temp.id = patterns[ key ].id;
+ temp.slug = patterns[ key ].slug;
+ temp.categories = patterns[ key ].categories ? Object.keys( patterns[ key ].categories ) : [];
+ temp.styles = patterns[ key ].styles ? Object.keys( patterns[ key ].styles ) : [];
+ temp.contexts = patterns[ key ].contexts ? Object.keys( patterns[ key ].contexts ) : [];
+ temp.hpcontexts = patterns[ key ].hpcontexts ? Object.keys( patterns[ key ].hpcontexts ) : [];
+ temp.keywords = patterns[ key ].keywords ? patterns[ key ].keywords : [];
+ if ( patterns[ key ]?.html ) {
+ temp.html = replaceMasks( patterns[ key ].html );
}
- temp['content'] = patterns[key]?.content || '';
- temp['pro'] = patterns[key].pro;
- temp['locked'] = ( patterns[key].pro && 'true' !== kadence_blocks_params.pro ? true : false );
- temp['proRender'] = false;
- temp['viewportWidth'] = 1200;
+ temp.content = patterns[ key ]?.content || '';
+ temp.pro = patterns[ key ].pro;
+ temp.locked = ( patterns[ key ].pro && 'true' !== kadence_blocks_params.pro ? true : false );
+ temp.proRender = false;
+ temp.viewportWidth = 1200;
allPatterns.push( temp );
- });
+ } );
return allPatterns;
}, [ patterns ] );
@@ -530,30 +541,30 @@ function PatternList( {
if ( aINeedsData ) {
console.log( 'AI Needed' );
return [];
- } else if ( ! getContextState(aiContext) ) {
+ } else if ( ! getContextState( aiContext ) ) {
console.log( 'AI Needed' );
return [];
- } else if ( 'loading' === getContextState(aiContext) ) {
+ } else if ( 'loading' === getContextState( aiContext ) ) {
console.log( 'Loading AI Content' );
setFailedAI( false );
return [];
- } else if ( 'processing' === getContextState(aiContext) ) {
+ } else if ( 'processing' === getContextState( aiContext ) ) {
console.log( 'Generating AI Content' );
setFailedAI( false );
return [];
- } else if ( 'error' === getContextState(aiContext) ) {
+ } else if ( 'error' === getContextState( aiContext ) ) {
console.log( 'Error Generating AI Content' );
setFailedAI( true );
setFailedAIType( 'license' );
- } else if ( 'credits' === getContextState(aiContext) ) {
+ } else if ( 'credits' === getContextState( aiContext ) ) {
console.log( 'Error not enough credits' );
setFailedAI( true );
setFailedAIType( 'credits' );
- } else if ( getContextContent(aiContext) === 'failed' ){
+ } else if ( getContextContent( aiContext ) === 'failed' ) {
console.log( 'AI Content has failed' );
setFailedAI( true );
setFailedAIType( 'general' );
- } else if ( getContextContent(aiContext) === 'failedReload' ){
+ } else if ( getContextContent( aiContext ) === 'failedReload' ) {
console.log( 'AI Content has failed, reload page required.' );
setFailedAI( true );
setFailedAIType( 'reload' );
@@ -561,7 +572,6 @@ function PatternList( {
}
let allPatterns = thePatterns;
-
if ( ! filterValue && contextTab === 'design' && selectedCategory && 'all' !== selectedCategory ) {
allPatterns = allPatterns.filter( ( pattern ) =>
pattern.categories?.includes( selectedCategory )
@@ -578,11 +588,21 @@ function PatternList( {
);
}
- if(categoryFilter && categoryFilter.length > 0) {
- allPatterns = allPatterns.filter((pattern) => {
- return pattern.categories.some((cat) => categoryFilter.includes(cat))
- });
+ if ( contextTab === 'context' && ( categoryFilter && categoryFilter.length > 0 ) && ( styleFilter && styleFilter.length > 0 ) ) {
+ allPatterns = allPatterns.filter( ( pattern ) => {
+ return pattern.categories.some( ( cat ) => categoryFilter.includes( cat ) ) &&
+ pattern.styles.some( ( style ) => styleFilter.includes( style ) );
+ } );
+ } else if ( contextTab === 'context' && categoryFilter && categoryFilter.length > 0 ) {
+ allPatterns = allPatterns.filter( ( pattern ) => {
+ return pattern.categories.some( ( cat ) => categoryFilter.includes( cat ) );
+ } );
+ } else if ( contextTab === 'context' && styleFilter && styleFilter.length > 0 ) {
+ allPatterns = allPatterns.filter( ( pattern ) => {
+ return pattern.styles.some( ( style ) => styleFilter.includes( style ) );
+ } );
}
+
if ( useImageReplace === 'all' && imageCollection ) {
let variation = 0;
allPatterns = allPatterns.map( ( item, index ) => {
@@ -617,10 +637,16 @@ function PatternList( {
} );
}
return searchItems( allPatterns, filterValue );
- }, [ filterValue, selectedCategory, thePatterns, aiContext, contextTab, contextStatesRef, imageCollection, useImageReplace, aINeedsData, categoryFilter ] );
+ }, [ filterValue, selectedCategory, thePatterns, aiContext, contextTab, contextStatesRef, imageCollection, useImageReplace, aINeedsData, categoryFilter, styleFilter ] );
- const updateFilters = (categoryList) => {
- setCategoryFilter(categoryList.map((cat) => cat.value) ?? []);
+ const updateCategoryFilter = ( categoryList ) => {
+ const selectedCategoryValues = categoryList.map( ( category ) => category.value );
+ setCategoryFilter( selectedCategoryValues );
+ };
+
+ const updateStyleFilter = ( stylesList ) => {
+ const selectedStyleValues = stylesList.map( ( style ) => style.value );
+ setStyleFilter( selectedStyleValues );
};
const hasHTml = useMemo( () => {
@@ -658,7 +684,7 @@ function PatternList( {
--global-palette8:${kadence_blocks_params.global_colors['--global-palette3']};
--global-palette9:${kadence_blocks_params.global_colors['--global-palette4']};
--global-content-edge-padding: 3rem;
- padding:0px !important;}.kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette3']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}.wp-block-kadence-tabs.kb-pattern-active-tab-highlight .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title{ color:${kadence_blocks_params.global_colors['--global-palette9']} !important} .kb-pattern-light-color{--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}}.block-editor-block-list__layout.is-root-container>.wp-block[data-align=full] {margin-left: 0 !important;margin-right: 0 !important;}` );
+ padding:0px !important;}.kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette3']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/12/logo-placeholder"] {filter: invert(1);}.wp-block-kadence-tabs.kb-pattern-active-tab-highlight .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title{ color:${kadence_blocks_params.global_colors['--global-palette9']} !important} .kb-pattern-light-color{--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}}.block-editor-block-list__layout.is-root-container>.wp-block[data-align=full] {margin-left: 0 !important;margin-right: 0 !important;}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-bottom-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-top-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}` );
} else if ( 'highlight' === selectedStyle ) {
tempStyles = tempStyles.concat( `body {--global-palette1:${kadence_blocks_params.global_colors['--global-palette9']};
--global-palette2:${kadence_blocks_params.global_colors['--global-palette8']};
@@ -670,7 +696,7 @@ function PatternList( {
--global-palette8:${kadence_blocks_params.global_colors['--global-palette2']};
--global-palette9:${kadence_blocks_params.global_colors['--global-palette1']};
--global-content-edge-padding: 3rem;
- padding:0px !important; }.kb-submit-field .kb-forms-submit, .kb-btns-outer-wrap .wp-block-button__link {color:${kadence_blocks_params.global_colors['--global-palette9']};background:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-btns-outer-wrap .kb-button.kb-btn-global-outline {color:${kadence_blocks_params.global_colors['--global-palette9']};border-color:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette1']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}.block-editor-block-list__layout.is-root-container>.wp-block[data-align=full] {margin-left: 0 !important;margin-right: 0 !important;}` );
+ padding:0px !important; }.kb-submit-field .kb-forms-submit, .kb-btns-outer-wrap .wp-block-button__link {color:${kadence_blocks_params.global_colors['--global-palette9']};background:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-btns-outer-wrap .kb-button.kb-btn-global-outline {color:${kadence_blocks_params.global_colors['--global-palette9']};border-color:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette1']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/12/logo-placeholder"] {filter: invert(1);}.block-editor-block-list__layout.is-root-container>.wp-block[data-align=full] {margin-left: 0 !important;margin-right: 0 !important;}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-bottom-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-top-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}` );
}
if ( 'sm' === selectedFontSize ) {
tempStyles = tempStyles.concat( `.block-editor-block-list__layout.is-root-container {--global-kb-font-size-xxxl:${kadence_blocks_params.font_sizes['xxl']};
@@ -729,7 +755,7 @@ function PatternList( {
--global-palette8:${kadence_blocks_params.global_colors['--global-palette3']};
--global-palette9:${kadence_blocks_params.global_colors['--global-palette4']};
--global-content-edge-padding: 3rem;
- padding:0px !important;}.kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette3']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}.wp-block-kadence-tabs.kb-pattern-active-tab-highlight .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title{ color:${kadence_blocks_params.global_colors['--global-palette9']} !important} .kb-pattern-light-color{--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}}` );
+ padding:0px !important;}.kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}} .kb-btn-custom-colors .kb-btns-outer-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette3']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/12/logo-placeholder"] {filter: invert(1);}.wp-block-kadence-tabs.kb-pattern-active-tab-highlight .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title{ color:${kadence_blocks_params.global_colors['--global-palette9']} !important} .kb-pattern-light-color{--global-palette9:${kadence_blocks_params.global_colors['--global-palette9']}}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-bottom-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-top-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}` );
} else if ( 'highlight' === selectedStyle ) {
tempStyles = tempStyles.concat( `.single-iframe-content {--global-palette1:${kadence_blocks_params.global_colors['--global-palette9']};
--global-palette2:${kadence_blocks_params.global_colors['--global-palette8']};
@@ -741,7 +767,7 @@ function PatternList( {
--global-palette8:${kadence_blocks_params.global_colors['--global-palette2']};
--global-palette9:${kadence_blocks_params.global_colors['--global-palette1']};
--global-content-edge-padding: 3rem;
- padding:0px !important; }.single-iframe-content .kb-form .kadence-blocks-form-field .kb-forms-submit, .kb-buttons-wrap .wp-block-button__link {color:${kadence_blocks_params.global_colors['--global-palette9']};background:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-buttons-wrap .kb-button.kb-btn-global-outline {color:${kadence_blocks_params.global_colors['--global-palette3']};border-color:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-btn-custom-colors .kb-buttons-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette1']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}` );
+ padding:0px !important; }.single-iframe-content .kb-form .kadence-blocks-form-field .kb-forms-submit, .kb-buttons-wrap .wp-block-button__link {color:${kadence_blocks_params.global_colors['--global-palette9']};background:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-buttons-wrap .kb-button.kb-btn-global-outline {color:${kadence_blocks_params.global_colors['--global-palette3']};border-color:${kadence_blocks_params.global_colors['--global-palette3']};} .kb-btn-custom-colors .kb-buttons-wrap {--global-palette9:${kadence_blocks_params.global_colors['--global-palette1']}} img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/02/Logo-ploaceholder"] {filter: invert(1);}img[src^="https://patterns.startertemplatecloud.com/wp-content/uploads/2023/12/logo-placeholder"] {filter: invert(1);}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-bottom-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}.kb-divider-static.kb-row-layout-wrap.wp-block-kadence-rowlayout > .kt-row-layout-top-sep svg{fill:${kadence_blocks_params.global_colors['--global-palette9']}!important}` );
}
if ( 'sm' === selectedFontSize ) {
tempStyles = tempStyles.concat( `.single-iframe-content {--global-kb-font-size-xxxl:${kadence_blocks_params.font_sizes['xxl']};
@@ -785,8 +811,15 @@ function PatternList( {
{ contextTab === 'context' && ! aINeedsData && ( ! getContextState(aiContext) || 'credits' === getContextState(aiContext) ) && (
generateContext( tempCon ) } />
) }
- { contextTab === 'context' && !failedAI && !filterValue && (
-
+
Filter by:
+ { categories.length > 0 &&
}
+ {
+ /* Hold off until starter templates are ready */
+ // styles.length > 0 &&
+ }
+
+ {__( 'No patterns were found based on the selected filters.', 'kadence-blocks' )}
+
+ )}
);
diff --git a/src/plugins/prebuilt-library/prebuilt-library.js b/src/plugins/prebuilt-library/prebuilt-library.js
index 2c7c7dcf6..9926f4118 100644
--- a/src/plugins/prebuilt-library/prebuilt-library.js
+++ b/src/plugins/prebuilt-library/prebuilt-library.js
@@ -158,7 +158,7 @@ class PrebuiltModal extends Component {
title={ __( 'Design Library', 'kadence-blocks' ) }
onRequestClose={ (event) => {
// No action on blur event (prevents AI modal from closing when Media Library modal opens).
- if (event.type === 'blur') {
+ if ( event?.type && event.type === 'blur') {
return;
}
diff --git a/src/plugins/prebuilt-library/replace/remove-content.js b/src/plugins/prebuilt-library/replace/remove-content.js
index 29c29be2d..9e545d1ec 100644
--- a/src/plugins/prebuilt-library/replace/remove-content.js
+++ b/src/plugins/prebuilt-library/replace/remove-content.js
@@ -5,10 +5,10 @@ const getStringBetween = (str, start, end, from ) => {
// Check if form is there?
if ( ! str.includes( 'kb-pattern-delete-block' ) ) {
return '';
- }
- // get the start of the submit button.
+ }
+ // get the start of the container.
const startpos = str.indexOf( start, from );
- if ( ! startpos ) {
+ if ( -1 === startpos ) {
return '';
}
const pos = startpos + start.length;
diff --git a/src/plugins/prebuilt-library/replace/replace-colors.js b/src/plugins/prebuilt-library/replace/replace-colors.js
index eeffcac1f..914a7e288 100644
--- a/src/plugins/prebuilt-library/replace/replace-colors.js
+++ b/src/plugins/prebuilt-library/replace/replace-colors.js
@@ -48,7 +48,7 @@ export default function replaceColors( content, style ) {
if ( 'dark' !== style && 'highlight' !== style ) {
return content;
}
- // Swap Logos
+ // Swap Logos (old deprecated).
content = content.replace(/Logo-ploaceholder.png/g, "Logo-ploaceholder-white.png");
content = content.replace(/Logo-ploaceholder-1.png/g, "Logo-ploaceholder-1-white.png");
content = content.replace(/Logo-ploaceholder-2.png/g, "Logo-ploaceholder-2-white.png");
@@ -59,6 +59,19 @@ export default function replaceColors( content, style ) {
content = content.replace(/Logo-ploaceholder-7.png/g, "Logo-ploaceholder-7-white.png");
content = content.replace(/Logo-ploaceholder-8.png/g, "Logo-ploaceholder-8-white.png");
+ // Swap Logos (NEW).
+ content = content.replace(/logo-placeholder.png/g, "logo-placeholder-white.png");
+ content = content.replace(/logo-placeholder-1.png/g, "logo-placeholder-1-white.png");
+ content = content.replace(/logo-placeholder-2.png/g, "logo-placeholder-2-white.png");
+ content = content.replace(/logo-placeholder-3.png/g, "logo-placeholder-3-white.png");
+ content = content.replace(/logo-placeholder-4.png/g, "logo-placeholder-4-white.png");
+ content = content.replace(/logo-placeholder-5.png/g, "logo-placeholder-5-white.png");
+ content = content.replace(/logo-placeholder-6.png/g, "logo-placeholder-6-white.png");
+ content = content.replace(/logo-placeholder-7.png/g, "logo-placeholder-7-white.png");
+ content = content.replace(/logo-placeholder-8.png/g, "logo-placeholder-8-white.png");
+ content = content.replace(/logo-placeholder-9.png/g, "logo-placeholder-9-white.png");
+ content = content.replace(/logo-placeholder-10.png/g, "logo-placeholder-10-white.png");
+
let replacements = [];
if ( 'dark' === style ) {
@@ -71,6 +84,15 @@ export default function replaceColors( content, style ) {
content = content.replace( tab_content_org, tab_content );
}
+ // Handle Dividers.
+ let row_divider_content = getStringBetween( content, 'wp:kadence/rowlayout', 'wp:kadence/rowlayout', 'kb-divider-static' );
+ if ( row_divider_content ) {
+ let row_divider_content_org = row_divider_content;
+ row_divider_content = row_divider_content.replace( /"bottomSepColor":"palette9"/g, '"bottomSepColor":"ph-kb-pal9"' );
+ row_divider_content = row_divider_content.replace( /"topSepColor":"palette9"/g, '"topSepColor":"ph-kb-pal9"' );
+ content = content.replace( row_divider_content_org, row_divider_content );
+ }
+
// Special testimonial issue.
let white_text_content = getStringBetweenWhen( content, '