From 1663e994efc4fe9e55eaf7fe6189a20137977ddb Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 12:48:36 -0500 Subject: [PATCH 01/10] KAD-3233 Use helpers repository in blocks free --- .../src/advanced-get-preview-size/index.js | 20 --- .../helpers/src/array-string-to-int/index.js | 16 -- .../helpers/src/capital-first/index.js | 8 - .../helpers/src/compare-versions/index.js | 28 --- src/packages/helpers/src/constants/index.js | 169 ------------------ .../helpers/src/convert-color/index.js | 17 -- .../deprecated-kadence-color-output/index.js | 17 -- src/packages/helpers/src/fetch-json/index.js | 24 --- .../helpers/src/font-size-utilities/index.js | 18 -- .../helpers/src/gap-size-utilities/index.js | 21 --- .../helpers/src/get-border-color/index.js | 45 ----- .../helpers/src/get-border-style/index.js | 141 --------------- .../helpers/src/get-border-width/index.js | 74 -------- .../helpers/src/get-in-query-block/index.js | 12 -- .../helpers/src/get-post-or-fse-id/index.js | 22 --- .../src/get-post-or-widget-id/index.js | 26 --- .../helpers/src/get-preview-size/index.js | 28 --- .../src/get-transferable-attributes/index.js | 33 ---- .../helpers/src/get-unique-id/index.js | 24 --- .../helpers/src/get-unit-icon/index.js | 34 ---- src/packages/helpers/src/hash-string/index.js | 17 -- src/packages/helpers/src/hex-to-rgba/index.js | 25 --- src/packages/helpers/src/index.js | 33 ---- .../src/is-linked-or-individual/index.js | 18 -- .../helpers/src/kadence-color-output/index.js | 17 -- .../src/mouse-over-visualizer/index.js | 8 - src/packages/helpers/src/parse-json/index.js | 24 --- .../helpers/src/set-block-defaults/index.js | 28 --- .../helpers/src/set-dynamic-state/index.js | 10 -- .../helpers/src/show-settings/index.js | 25 --- .../helpers/src/spacing-utilities/index.js | 155 ---------------- .../helpers/src/try-parse-json/index.js | 21 --- .../helpers/src/typography-style/index.js | 38 ---- 33 files changed, 1196 deletions(-) delete mode 100644 src/packages/helpers/src/advanced-get-preview-size/index.js delete mode 100644 src/packages/helpers/src/array-string-to-int/index.js delete mode 100644 src/packages/helpers/src/capital-first/index.js delete mode 100644 src/packages/helpers/src/compare-versions/index.js delete mode 100644 src/packages/helpers/src/constants/index.js delete mode 100644 src/packages/helpers/src/convert-color/index.js delete mode 100644 src/packages/helpers/src/deprecated-kadence-color-output/index.js delete mode 100644 src/packages/helpers/src/fetch-json/index.js delete mode 100644 src/packages/helpers/src/font-size-utilities/index.js delete mode 100644 src/packages/helpers/src/gap-size-utilities/index.js delete mode 100644 src/packages/helpers/src/get-border-color/index.js delete mode 100644 src/packages/helpers/src/get-border-style/index.js delete mode 100644 src/packages/helpers/src/get-border-width/index.js delete mode 100644 src/packages/helpers/src/get-in-query-block/index.js delete mode 100644 src/packages/helpers/src/get-post-or-fse-id/index.js delete mode 100644 src/packages/helpers/src/get-post-or-widget-id/index.js delete mode 100644 src/packages/helpers/src/get-preview-size/index.js delete mode 100644 src/packages/helpers/src/get-transferable-attributes/index.js delete mode 100644 src/packages/helpers/src/get-unique-id/index.js delete mode 100644 src/packages/helpers/src/get-unit-icon/index.js delete mode 100644 src/packages/helpers/src/hash-string/index.js delete mode 100644 src/packages/helpers/src/hex-to-rgba/index.js delete mode 100644 src/packages/helpers/src/index.js delete mode 100644 src/packages/helpers/src/is-linked-or-individual/index.js delete mode 100644 src/packages/helpers/src/kadence-color-output/index.js delete mode 100644 src/packages/helpers/src/mouse-over-visualizer/index.js delete mode 100644 src/packages/helpers/src/parse-json/index.js delete mode 100644 src/packages/helpers/src/set-block-defaults/index.js delete mode 100644 src/packages/helpers/src/set-dynamic-state/index.js delete mode 100644 src/packages/helpers/src/show-settings/index.js delete mode 100644 src/packages/helpers/src/spacing-utilities/index.js delete mode 100644 src/packages/helpers/src/try-parse-json/index.js delete mode 100644 src/packages/helpers/src/typography-style/index.js diff --git a/src/packages/helpers/src/advanced-get-preview-size/index.js b/src/packages/helpers/src/advanced-get-preview-size/index.js deleted file mode 100644 index 3a12c9938..000000000 --- a/src/packages/helpers/src/advanced-get-preview-size/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Return the proper preview size, given the current preview device - */ -export default ( device, index, desktopData, tabletData, mobileData ) => { - const desktopSize = ( undefined !== desktopData[ index ] ? desktopData[ index ] : '' ); - const tabletSize = ( undefined !== tabletData[ index ] ? tabletData[ index ] : '' ); - const mobileSize = ( undefined !== mobileData[ index ] ? mobileData[ index ] : '' ); - if ( device === 'Mobile' ) { - if ( undefined !== mobileSize && '' !== mobileSize && null !== mobileSize ) { - return mobileSize; - } else if ( undefined !== tabletSize && '' !== tabletSize && null !== tabletSize ) { - return tabletSize; - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletSize && '' !== tabletSize && null !== tabletSize ) { - return tabletSize; - } - } - return desktopSize; -}; diff --git a/src/packages/helpers/src/array-string-to-int/index.js b/src/packages/helpers/src/array-string-to-int/index.js deleted file mode 100644 index ff2c82716..000000000 --- a/src/packages/helpers/src/array-string-to-int/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Convert number with the type of string, into integers. - * @param {array} array of strings. - * @returns {array} with numbers as integers. - */ -export default ( array ) => { - let result = array.map(function (x) { - let parsedValue = parseInt(x); - if( isNaN( parsedValue ) ) { - return x; - } - return parsedValue; - }); - - return result; -} diff --git a/src/packages/helpers/src/capital-first/index.js b/src/packages/helpers/src/capital-first/index.js deleted file mode 100644 index 3c3131dc8..000000000 --- a/src/packages/helpers/src/capital-first/index.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * function to return string with capital letter. - * @param {string} string the word string. - * @returns {string} with capital letter. - */ -export default ( string ) => { - return string.charAt( 0 ).toUpperCase() + string.slice( 1 ); -} diff --git a/src/packages/helpers/src/compare-versions/index.js b/src/packages/helpers/src/compare-versions/index.js deleted file mode 100644 index 68e13b333..000000000 --- a/src/packages/helpers/src/compare-versions/index.js +++ /dev/null @@ -1,28 +0,0 @@ -export const compareVersions = (v1, v2) => { - // Split version into parts and remove any non-numeric parts (e.g., "-RC1") - var v1parts = v1.split('.').map((part) => (isNaN(parseInt(part)) ? part : parseInt(part))).filter(n => !isNaN(n)); - var v2parts = v2.split('.').map((part) => (isNaN(parseInt(part)) ? part : parseInt(part))).filter(n => !isNaN(n)); - - // Start from the beginning of both versions and compare each part - for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) { - // If part position is not present in v1 but is in v2 - if (i >= v1parts.length) { - // If the missing part is 0 in v2, they are equivalent in this position, continue to next part - if (v2parts[i] === 0) continue; - else return -1; // Otherwise v2 is greater here - } - // If part position is not present in v2 but is in v1 - if (i >= v2parts.length) { - // If the missing part is 0 in v1, they are equivalent in this position, continue to next part - if (v1parts[i] === 0) continue; - else return 1; // Otherwise v1 is greater - } - - // If neither version is missing a part (yet) in this position, carry out a normal comparison - if (v1parts[i] > v2parts[i]) return 1; - if (v1parts[i] < v2parts[i]) return -1; - } - - // If we made it through the loop without returning, the versions are equivalent - return 0; -} diff --git a/src/packages/helpers/src/constants/index.js b/src/packages/helpers/src/constants/index.js deleted file mode 100644 index 9371db525..000000000 --- a/src/packages/helpers/src/constants/index.js +++ /dev/null @@ -1,169 +0,0 @@ -import { __ } from '@wordpress/i18n'; -export const SPACING_SIZES_MAP = [ - { - value: 'ss-auto', - output: 'var(--global-kb-spacing-auto, auto)', - label: __( 'Auto', 'kadence-blocks' ), - size: 0, - name: __( 'Auto', 'kadence-blocks' ), - }, - { - value: '0', - output: '0', - label: __( 'None', 'kadence-blocks' ), - size: 0, - name: __( 'None', 'kadence-blocks' ), - }, - { - value: 'xxs', - output: 'var(--global-kb-spacing-xxs, 0.5rem)', - size: 8, - label: __( 'XXS', 'kadence-blocks' ), - name: __( '2X Small', 'kadence-blocks' ), - }, - { - value: 'xs', - output: 'var(--global-kb-spacing-xs, 1rem)', - size: 16, - label: __( 'XS', 'kadence-blocks' ), - name: __( 'X Small', 'kadence-blocks' ), - }, - { - value: 'sm', - output: 'var(--global-kb-spacing-sm, 1.5rem)', - size: 24, - label: __( 'SM', 'kadence-blocks' ), - name: __( 'Small', 'kadence-blocks' ), - }, - { - value: 'md', - output: 'var(--global-kb-spacing-md, 2rem)', - size: 32, - label: __( 'MD', 'kadence-blocks' ), - name: __( 'Medium', 'kadence-blocks' ), - }, - { - value: 'lg', - output: 'var(--global-kb-spacing-lg, 3rem)', - size: 48, - label: __( 'LG', 'kadence-blocks' ), - name: __( 'Large', 'kadence-blocks' ), - }, - { - value: 'xl', - output: 'var(--global-kb-spacing-xl, 4rem)', - size: 64, - label: __( 'XL', 'kadence-blocks' ), - name: __( 'X Large', 'kadence-blocks' ), - }, - { - value: 'xxl', - output: 'var(--global-kb-spacing-xxl, 5rem)', - size: 80, - label: __( 'XXL', 'kadence-blocks' ), - name: __( '2X Large', 'kadence-blocks' ), - }, - { - value: '3xl', - output: 'var(--global-kb-spacing-3xl, 6.5rem)', - size: 104, - label: __( '3XL', 'kadence-blocks' ), - name: __( '3X Large', 'kadence-blocks' ), - }, - { - value: '4xl', - output: 'var(--global-kb-spacing-4xl, 8rem)', - size: 128, - label: __( '4XL', 'kadence-blocks' ), - name: __( '4X Large', 'kadence-blocks' ), - }, - { - value: '5xl', - output: 'var(--global-kb-spacing-5xl, 10rem)', - size: 160, - label: __( '5XL', 'kadence-blocks' ), - name: __( '5X Large', 'kadence-blocks' ), - }, -]; -export const FONT_SIZES_MAP = [ - { - value: 'sm', - output: 'var(--global-kb-font-size-sm, 0.9rem)', - size: 14, - label: __( 'SM', 'kadence-blocks' ), - name: __( 'Small', 'kadence-blocks' ), - }, - { - value: 'md', - output: 'var(--global-kb-font-size-md, 1.25rem)', - size: 20, - label: __( 'MD', 'kadence-blocks' ), - name: __( 'Medium', 'kadence-blocks' ), - }, - { - value: 'lg', - output: 'var(--global-kb-font-size-lg, 2rem)', - size: 32, - label: __( 'LG', 'kadence-blocks' ), - name: __( 'Large', 'kadence-blocks' ), - }, - { - value: 'xl', - output: 'var(--global-kb-font-size-xl, 3rem)', - size: 48, - label: __( 'XL', 'kadence-blocks' ), - name: __( 'X Large', 'kadence-blocks' ), - }, - { - value: 'xxl', - output: 'var(--global-kb-font-size-xxl, 4rem)', - size: 64, - label: __( '2XL', 'kadence-blocks' ), - name: __( '2X Large', 'kadence-blocks' ), - }, - { - value: '3xl', - output: 'var(--global-kb-font-size-xxxl, 5rem)', - size: 80, - label: __( '3XL', 'kadence-blocks' ), - name: __( '3X Large', 'kadence-blocks' ), - }, -]; -export const GAP_SIZES_MAP = [ - { - value: 'none', - output: 'var(--global-kb-gap-none, 0px)', - size: 0, - label: __( 'None', 'kadence-blocks' ), - name: __( 'None', 'kadence-blocks' ), - }, - { - value: 'xs', - output: 'var(--global-kb-gap-xs, 0.5rem)', - size: 8, - label: __( 'XS', 'kadence-blocks' ), - name: __( 'X Small', 'kadence-blocks' ), - }, - { - value: 'sm', - output: 'var(--global-kb-gap-sm, 1rem)', - size: 16, - label: __( 'SM', 'kadence-blocks' ), - name: __( 'Small', 'kadence-blocks' ), - }, - { - value: 'md', - output: 'var(--global-kb-gap-md, 2rem)', - size: 32, - label: __( 'MD', 'kadence-blocks' ), - name: __( 'Medium', 'kadence-blocks' ), - }, - { - value: 'lg', - output: 'var(--global-kb-gap-lg, 4rem)', - size: 64, - label: __( 'LG', 'kadence-blocks' ), - name: __( 'Large', 'kadence-blocks' ), - }, -]; -export const isRTL = (document.body.classList.contains('rtl')); \ No newline at end of file diff --git a/src/packages/helpers/src/convert-color/index.js b/src/packages/helpers/src/convert-color/index.js deleted file mode 100644 index cedbd9067..000000000 --- a/src/packages/helpers/src/convert-color/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * function to return string with var if needed. - * @param {string} string the word string. - * @returns {string} with var if needed. - */ -/* global kadence_blocks_params */ -import hexToRGBA from '../hex-to-rgba'; - -// eslint-disable-next-line camelcase -export default function ConvertColor( string, opacity = null ) { - if ( string && string.startsWith( 'palette' ) ) { - string = string; - } else if ( opacity !== null && ! isNaN( opacity ) && 1 !== Number( opacity ) && undefined !== string && '' !== string ) { - string = hexToRGBA( string, opacity ); - } - return string; -} diff --git a/src/packages/helpers/src/deprecated-kadence-color-output/index.js b/src/packages/helpers/src/deprecated-kadence-color-output/index.js deleted file mode 100644 index c495ecab9..000000000 --- a/src/packages/helpers/src/deprecated-kadence-color-output/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * function to return string with var if needed. - * @param {string} string the word string. - * @returns {string} with var if needed. - */ -/* global kadence_blocks_params */ -import hexToRGBA from '../hex-to-rgba'; - -// eslint-disable-next-line camelcase -export default function KadenceColorOutput( string, opacity = null ) { - if ( string && string.startsWith( 'palette' ) ) { - string = 'var(--global-' + string + ')'; - } else if ( opacity !== null && ! isNaN( opacity ) && 1 !== Number( opacity ) && undefined !== string && '' !== string ) { - string = hexToRGBA( string, opacity ); - } - return string; -} diff --git a/src/packages/helpers/src/fetch-json/index.js b/src/packages/helpers/src/fetch-json/index.js deleted file mode 100644 index 80bdaf2f4..000000000 --- a/src/packages/helpers/src/fetch-json/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import { zipObject } from 'lodash'; -import apiFetch from '@wordpress/api-fetch'; - -/** - * Fetch JSON. - * - * Helper function to return parsed JSON and also the response headers. - * - * @param {object} args - * @param {array} headerKeys Array of headers to include. - */ -export default ( args, headerKeys = [ 'x-wp-totalpages' ] ) => { - return new Promise( resolve => { - apiFetch( { - ...args, - parse: false, - } ).then( response => Promise.all( [ - response.json ? response.json() : [], - zipObject( headerKeys, headerKeys.map( key => response.headers.get( key ) ) ), - ] ) ).then( data => ( - resolve( data ) - ) ).catch( () => {} ); - } ) -} diff --git a/src/packages/helpers/src/font-size-utilities/index.js b/src/packages/helpers/src/font-size-utilities/index.js deleted file mode 100644 index 9f40607ca..000000000 --- a/src/packages/helpers/src/font-size-utilities/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { FONT_SIZES_MAP } from '../constants'; -export function getFontSizeOptionOutput( value, unit, sizesMap = FONT_SIZES_MAP ) { - if ( ! value ) { - return ''; - } - if ( ! sizesMap ) { - return value; - } - if ( value === '0') { - return '0'; - } - const found = sizesMap.find( ( option ) => option.value === value ); - if ( ! found ) { - return value + unit; - } - return found.output; -} diff --git a/src/packages/helpers/src/gap-size-utilities/index.js b/src/packages/helpers/src/gap-size-utilities/index.js deleted file mode 100644 index 8e64474bc..000000000 --- a/src/packages/helpers/src/gap-size-utilities/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { GAP_SIZES_MAP } from '../constants'; -export function getGapSizeOptionOutput( value, unit, sizesMap = GAP_SIZES_MAP ) { - if ( undefined === value ) { - return ''; - } - if ( ! sizesMap ) { - return value; - } - if ( value === '0') { - return '0' + unit; - } - if ( value === 0 ) { - return '0' + unit; - } - const found = sizesMap.find( ( option ) => option.value === value ); - if ( ! found ) { - return value + unit; - } - return found.output; -} diff --git a/src/packages/helpers/src/get-border-color/index.js b/src/packages/helpers/src/get-border-color/index.js deleted file mode 100644 index c4ce12703..000000000 --- a/src/packages/helpers/src/get-border-color/index.js +++ /dev/null @@ -1,45 +0,0 @@ -import { - useMemo, - } from '@wordpress/element'; - import KadenceColorOutput from '../kadence-color-output'; - function getInheritBorderColor( device, side, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderColor( device, side, desktopStyle, tabletStyle, mobileStyle ); -}; -function getBorderColor( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( '' !== mobileStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( mobileStyle?.[0]?.[side]?.[0] ); - } else if ( '' !== tabletStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( tabletStyle?.[0]?.[side]?.[0] ); - } else if ( inheritBorder && getInheritBorderColor( device, side, inheritBorder ) ) { - return getInheritBorderColor( device, side, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( '' !== tabletStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( tabletStyle?.[0]?.[side]?.[0] ); - } else if ( inheritBorder && getInheritBorderColor( device, side, inheritBorder ) ) { - return getInheritBorderColor( device, side, inheritBorder ); - } - } - if ( '' !== desktopStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( desktopStyle?.[0]?.[side]?.[0] ); - } else if ( inheritBorder && getInheritBorderColor( device, side, inheritBorder ) ) { - return getInheritBorderColor( device, side, inheritBorder ); - } - return ''; - }; -/** - * Return the proper preview size, given the current preview device - */ -export default ( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) => { - return useMemo( () => { - const borderColor = getBorderColor( device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - if ( ! borderColor ) { - return ''; - } - return borderColor; - }, [ device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ] ); -}; diff --git a/src/packages/helpers/src/get-border-style/index.js b/src/packages/helpers/src/get-border-style/index.js deleted file mode 100644 index b8d894b9b..000000000 --- a/src/packages/helpers/src/get-border-style/index.js +++ /dev/null @@ -1,141 +0,0 @@ -import { - useMemo, - } from '@wordpress/element'; - import KadenceColorOutput from '../kadence-color-output'; - function getInheritBorderColor( device, side, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderColor( device, side, desktopStyle, tabletStyle, mobileStyle ); -}; -function getBorderColor( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( undefined !== mobileStyle?.[0]?.[side]?.[0] && '' !== mobileStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( mobileStyle?.[0]?.[side]?.[0] ); - } else if ( '' !== tabletStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( tabletStyle?.[0]?.[side]?.[0] ); - } else if ( inheritBorder && getInheritBorderColor( device, side, inheritBorder ) ) { - return getInheritBorderColor( device, side, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletStyle?.[0]?.[side]?.[0] && '' !== tabletStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( tabletStyle?.[0]?.[side]?.[0] ); - } else if ( inheritBorder && getInheritBorderColor( device, side, inheritBorder ) ) { - return getInheritBorderColor( device, side, inheritBorder ); - } - } - if ( undefined !== desktopStyle?.[0]?.[side]?.[0] && '' !== desktopStyle?.[0]?.[side]?.[0] ) { - return KadenceColorOutput( desktopStyle?.[0]?.[side]?.[0] ); - } else if ( inheritBorder && getInheritBorderColor( device, side, inheritBorder ) ) { - return getInheritBorderColor( device, side, inheritBorder ); - } - return ''; - }; - function getInheritBorderFormat( device, side, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderFormat( device, side, desktopStyle, tabletStyle, mobileStyle ); -}; - function getBorderFormat( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( undefined !== mobileStyle?.[0]?.[side]?.[1] && '' !== mobileStyle?.[0]?.[side]?.[1] ) { - return mobileStyle?.[0]?.[side]?.[1]; - } else if ( '' !== tabletStyle?.[0]?.[side]?.[1] ) { - return tabletStyle?.[0]?.[side]?.[1]; - } else if ( inheritBorder && getInheritBorderFormat( device, side, inheritBorder ) ) { - return getInheritBorderFormat( device, side, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletStyle?.[0]?.[side]?.[1] && '' !== tabletStyle?.[0]?.[side]?.[1] ) { - return tabletStyle?.[0]?.[side]?.[1]; - } else if ( inheritBorder && getInheritBorderFormat( device, side, inheritBorder ) ) { - return getInheritBorderFormat( device, side, inheritBorder ); - } - } - if ( undefined !== desktopStyle?.[0]?.[side]?.[1] && '' !== desktopStyle?.[0]?.[side]?.[1] ) { - return desktopStyle?.[0]?.[side]?.[1]; - } else if ( inheritBorder && getInheritBorderFormat( device, side, inheritBorder ) ) { - return getInheritBorderFormat( device, side, inheritBorder ); - } - return ''; - }; - function getInheritBorderWidth( device, side, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderWidth( device, side, desktopStyle, tabletStyle, mobileStyle ); -}; -function getBorderWidth( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( undefined !== mobileStyle?.[0]?.[side]?.[2] && '' !== mobileStyle?.[0]?.[side]?.[2] ) { - return mobileStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( '' !== tabletStyle?.[0]?.[side]?.[2] ) { - return tabletStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( inheritBorder && getInheritBorderWidth( device, side, inheritBorder ) ) { - return getInheritBorderWidth( device, side, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletStyle?.[0]?.[side]?.[2] && '' !== tabletStyle?.[0]?.[side]?.[2] ) { - return tabletStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( inheritBorder && getInheritBorderWidth( device, side, inheritBorder ) ) { - return getInheritBorderWidth( device, side, inheritBorder ); - } - } - if ( undefined !== desktopStyle?.[0]?.[side]?.[2] && '' !== desktopStyle?.[0]?.[side]?.[2] ) { - return desktopStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( inheritBorder && getInheritBorderWidth( device, side, inheritBorder ) ) { - return getInheritBorderWidth( device, side, inheritBorder ); - } - return ''; -}; -function getInheritBorderUnit( device, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle ); -}; -function getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( undefined !== mobileStyle?.[0]?.['unit'] && '' !== mobileStyle?.[0]?.['unit'] ) { - return mobileStyle[0]['unit']; - } else if ( undefined !== tabletStyle?.[0]?.['unit'] && '' !== tabletStyle?.[0]?.['unit'] ) { - return tabletStyle[0]['unit']; - } else if ( inheritBorder && getInheritBorderUnit( device, inheritBorder ) ) { - return getInheritBorderUnit( device, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletStyle?.[0]?.['unit'] && '' !== tabletStyle?.[0]?.['unit'] ) { - return tabletStyle[0]['unit']; - } else if ( inheritBorder && getInheritBorderUnit( device, inheritBorder ) ) { - return getInheritBorderUnit( device, inheritBorder ); - } - } - if ( undefined !== desktopStyle?.[0]?.['unit'] && '' !== desktopStyle?.[0]?.['unit'] ) { - return desktopStyle[0]['unit']; - } else if ( inheritBorder && getInheritBorderUnit( device, inheritBorder ) ) { - return getInheritBorderUnit( device, inheritBorder ); - } - return 'px'; -}; - -/** - * Return the proper preview size, given the current preview device - */ -export default ( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) => { - return useMemo( () => { - const borderWidth = getBorderWidth( device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - if ( ! borderWidth ) { - return ''; - } - let borderColor = getBorderColor( device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - if ( ! borderColor ) { - borderColor = 'transparent'; - } - let borderStyle = getBorderFormat( device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - if ( ! borderStyle ) { - borderStyle = 'solid'; - } - return borderWidth + ' ' + borderStyle + ' ' + borderColor; - }, [ device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ] ); -}; diff --git a/src/packages/helpers/src/get-border-width/index.js b/src/packages/helpers/src/get-border-width/index.js deleted file mode 100644 index fe352c402..000000000 --- a/src/packages/helpers/src/get-border-width/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import { - useMemo, - } from '@wordpress/element'; - import KadenceColorOutput from '../kadence-color-output'; - function getInheritBorderWidth( device, side, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderWidth( device, side, desktopStyle, tabletStyle, mobileStyle ); -}; -function getBorderWidth( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( undefined !== mobileStyle?.[0]?.[side]?.[2] && '' !== mobileStyle?.[0]?.[side]?.[2] ) { - return mobileStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( '' !== tabletStyle?.[0]?.[side]?.[2] ) { - return tabletStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( inheritBorder && getInheritBorderWidth( device, side, inheritBorder ) ) { - return getInheritBorderWidth( device, side, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletStyle?.[0]?.[side]?.[2] && '' !== tabletStyle?.[0]?.[side]?.[2] ) { - return tabletStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( inheritBorder && getInheritBorderWidth( device, side, inheritBorder ) ) { - return getInheritBorderWidth( device, side, inheritBorder ); - } - } - if ( undefined !== desktopStyle?.[0]?.[side]?.[2] && '' !== desktopStyle?.[0]?.[side]?.[2] ) { - return desktopStyle?.[0]?.[side]?.[2] + getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - } else if ( inheritBorder && getInheritBorderWidth( device, side, inheritBorder ) ) { - return getInheritBorderWidth( device, side, inheritBorder ); - } - return ''; -}; -function getInheritBorderUnit( device, inheritBorder ) { - const desktopStyle = ( undefined !== inheritBorder?.[0] ? inheritBorder?.[0] : [] ); - const tabletStyle = ( undefined !== inheritBorder?.[1] ? inheritBorder?.[1] : [] ); - const mobileStyle = ( undefined !== inheritBorder?.[2] ? inheritBorder?.[2] : [] ); - return getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle ); - }; - function getBorderUnit( device, desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) { - if ( device === 'Mobile' ) { - if ( undefined !== mobileStyle?.[0]?.['unit'] && '' !== mobileStyle?.[0]?.['unit'] ) { - return mobileStyle[0]['unit']; - } else if ( undefined !== tabletStyle?.[0]?.['unit'] && '' !== tabletStyle?.[0]?.['unit'] ) { - return tabletStyle[0]['unit']; - } else if ( inheritBorder && getInheritBorderUnit( device, inheritBorder ) ) { - return getInheritBorderUnit( device, inheritBorder ); - } - } else if ( device === 'Tablet' ) { - if ( undefined !== tabletStyle?.[0]?.['unit'] && '' !== tabletStyle?.[0]?.['unit'] ) { - return tabletStyle[0]['unit']; - } else if ( inheritBorder && getInheritBorderUnit( device, inheritBorder ) ) { - return getInheritBorderUnit( device, inheritBorder ); - } - } - if ( undefined !== desktopStyle?.[0]?.['unit'] && '' !== desktopStyle?.[0]?.['unit'] ) { - return desktopStyle[0]['unit']; - } else if ( inheritBorder && getInheritBorderUnit( device, inheritBorder ) ) { - return getInheritBorderUnit( device, inheritBorder ); - } - return 'px'; - }; -/** - * Return the proper preview size, given the current preview device - */ -export default ( device, side = 'top', desktopStyle, tabletStyle, mobileStyle, inheritBorder = false ) => { - return useMemo( () => { - const borderWidth = getBorderWidth( device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ); - if ( ! borderWidth ) { - return ''; - } - return borderWidth; - }, [ device, side, desktopStyle, tabletStyle, mobileStyle, inheritBorder ] ); -}; \ No newline at end of file diff --git a/src/packages/helpers/src/get-in-query-block/index.js b/src/packages/helpers/src/get-in-query-block/index.js deleted file mode 100644 index 69c94d30f..000000000 --- a/src/packages/helpers/src/get-in-query-block/index.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Decides based on context if this block is indeed in a query or repeater block - */ -export default function getInQueryBlock( context, inQueryBlock ) { - const inQueryContext = Boolean( context && ( context.queryId || Number.isFinite( context.queryId ) ) && context.postId ); - const inRepeaterContext = Boolean( context && 'undefined' != typeof( context['kadence/dynamicSource'] ) && context['kadence/dynamicSource'] ); - - if ( inQueryContext || inRepeaterContext ) { - return true; - } - return false; -} \ No newline at end of file diff --git a/src/packages/helpers/src/get-post-or-fse-id/index.js b/src/packages/helpers/src/get-post-or-fse-id/index.js deleted file mode 100644 index 015470096..000000000 --- a/src/packages/helpers/src/get-post-or-fse-id/index.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Attempt to get current post or widget ID. - */ -import { default as getPostOrWidgetId } from '../get-post-or-widget-id'; -import { get, has } from 'lodash'; -import { default as hashString } from '../hash-string'; - -export default function getPostOrFseId( props, parentPostData ) { - - const { postId, reusableParent, rootBlock, editedPostId } = parentPostData; - const id = getPostOrWidgetId( props, postId, reusableParent, 0 ); - if ( id === 0 ) { - // Try getting the FSE template slug. - if ( get( rootBlock, 'name' ) === 'core/template-part' && has( rootBlock, [ 'attributes', 'slug' ] ) ) { - return hashString( rootBlock.attributes.slug ) % 1000000; - } else if( editedPostId ) { - return hashString( editedPostId ) % 1000000; - } - } - - return id; -} diff --git a/src/packages/helpers/src/get-post-or-widget-id/index.js b/src/packages/helpers/src/get-post-or-widget-id/index.js deleted file mode 100644 index a052c63ad..000000000 --- a/src/packages/helpers/src/get-post-or-widget-id/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Attempt to get current post or widget ID. Will return the reusable block Post ID if called within a reusable block - */ -import { getWidgetIdFromBlock } from '@wordpress/widgets'; -import { has } from 'lodash'; - -export default function getPostOrWidgetId( props, postId, reusableParent, fallback = 'block-unknown' ) { - - // Reusable block ID - if( has(reusableParent, 'ref') ){ - return reusableParent.ref; - } - - // Post ID - if ( postId ) { - postId = typeof postId === 'string' ? postId.replace(/\//g, '_' ) : postId; - return postId; - } - - // Widget ID - if ( getWidgetIdFromBlock( props ) ) { - return getWidgetIdFromBlock( props ); - } - - return fallback; -} diff --git a/src/packages/helpers/src/get-preview-size/index.js b/src/packages/helpers/src/get-preview-size/index.js deleted file mode 100644 index 0f10aaf5b..000000000 --- a/src/packages/helpers/src/get-preview-size/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useMemo } from '@wordpress/element'; -/** - * Return the proper preview size, given the current preview device - */ -export default (device, desktopSize, tabletSize, mobileSize, noHook = false) => { - if (!noHook) { - return useMemo(() => { - return getPreviewSize(device, desktopSize, tabletSize, mobileSize); - }, [device, desktopSize, tabletSize, mobileSize]); - } else { - return getPreviewSize(device, desktopSize, tabletSize, mobileSize); - } -}; - -function getPreviewSize(device, desktopSize, tabletSize, mobileSize) { - if (device === 'Mobile') { - if (undefined !== mobileSize && '' !== mobileSize && null !== mobileSize) { - return mobileSize; - } else if (undefined !== tabletSize && '' !== tabletSize && null !== tabletSize) { - return tabletSize; - } - } else if (device === 'Tablet') { - if (undefined !== tabletSize && '' !== tabletSize && null !== tabletSize) { - return tabletSize; - } - } - return undefined !== desktopSize ? desktopSize : ''; -} diff --git a/src/packages/helpers/src/get-transferable-attributes/index.js b/src/packages/helpers/src/get-transferable-attributes/index.js deleted file mode 100644 index 07d9d7e61..000000000 --- a/src/packages/helpers/src/get-transferable-attributes/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import { omit, isEqual, head } from 'lodash'; - -/** - * Gets attributes from a kadence block that can be transfered to another block via block defaults or copy/pasting. - */ -export default function getTransferableAttributes( attributes, defaultAttributes = {}, excludedAttrs = [], preventMultiple = [] ) { - let attributesToTransfer = {}; - - //some attributes should never be transferred to a new block - const alwaysExclude = [ 'uniqueID', 'inQueryBlock', 'anchor', 'noCustomDefaults', 'metadata' ]; - const allExcludedAttrs = alwaysExclude.concat(excludedAttrs); - attributesToTransfer = omit(attributes, allExcludedAttrs); - - - //preventing multiples of some attributes can save space / complexity - if (preventMultiple !== []) { - preventMultiple.forEach((item) => { - attributesToTransfer[item] = [head(attributesToTransfer[item])]; - }); - } - - // we don't need to transfer attributes that are the default. - // if provided, compare to the block's defaults and delete (assumed from block.json) - Object.keys(attributesToTransfer).map((key, index) => { - if ( undefined !== defaultAttributes[key] && undefined !== defaultAttributes[key].default ) { - if ( isEqual(attributesToTransfer[key], defaultAttributes[key].default ) ) { - delete(attributesToTransfer[key]) - } - } - }); - - return attributesToTransfer; -} \ No newline at end of file diff --git a/src/packages/helpers/src/get-unique-id/index.js b/src/packages/helpers/src/get-unique-id/index.js deleted file mode 100644 index fd7669ebc..000000000 --- a/src/packages/helpers/src/get-unique-id/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import { uniqueId } from 'lodash'; - -/** - * Creates or keeps a uniqueId for a block depending on it's status. - * requires the current block unique Id, client id, and the useSelect functions for isUniqueId and isUniqueBlock - */ -export default function getUniqueId( uniqueID, clientId, isUniqueID, isUniqueBlock, blockPostId = '', uniqueWhenRegenerate = false ) { - const hasBlockPostIdPrefix = uniqueID && uniqueID.split('_').length === 2; - const blockPostIdPrefix = blockPostId ? blockPostId + '_' : ''; - const smallID = blockPostIdPrefix + clientId.substr( 2, 9 ); - - if ( ! uniqueID || ( hasBlockPostIdPrefix && uniqueID.split('_')[0] !== blockPostId.toString() ) ) { - //new block - if ( ! isUniqueID( smallID ) ) { - return uniqueId( smallID ); - } - return smallID; - } else if ( ! isUniqueID( uniqueID ) && ( ! isUniqueBlock( uniqueID, clientId ) ) ) { - // This checks if we are just switching views, client ID the same means we don't need to update. - return uniqueWhenRegenerate ? uniqueId( smallID ) : smallID; - } - //normal block loading - return uniqueID; -} diff --git a/src/packages/helpers/src/get-unit-icon/index.js b/src/packages/helpers/src/get-unit-icon/index.js deleted file mode 100644 index b5df8902e..000000000 --- a/src/packages/helpers/src/get-unit-icon/index.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Return the icon given a unit - */ - -/** - * Import Icons - */ -import { - percentIcon, - pxIcon, - emIcon, - vhIcon, - vwIcon, - remIcon, -} from '@kadence/icons'; - -export default ( unit ) => { - - let lowerUnit = unit.toLowerCase(); - - if ( lowerUnit === '%' ) { - return percentIcon; - } else if ( lowerUnit === 'em' ) { - return emIcon; - } else if ( lowerUnit === 'vh' ) { - return vhIcon; - } else if ( lowerUnit === 'vw' ) { - return vwIcon; - } else if ( lowerUnit === 'rem' ) { - return remIcon; - } - - return pxIcon; -}; diff --git a/src/packages/helpers/src/hash-string/index.js b/src/packages/helpers/src/hash-string/index.js deleted file mode 100644 index 79feff0eb..000000000 --- a/src/packages/helpers/src/hash-string/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Source: https://github.com/darkskyapp/string-hash - */ - -export default function hashString(str) { - var hash = 5381, - i = str.length; - - while(i) { - hash = (hash * 33) ^ str.charCodeAt(--i); - } - - /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed - * integers. Since we want the results to be always positive, convert the - * signed int to an unsigned by doing an unsigned bitshift. */ - return hash >>> 0; -} diff --git a/src/packages/helpers/src/hex-to-rgba/index.js b/src/packages/helpers/src/hex-to-rgba/index.js deleted file mode 100644 index 26729265f..000000000 --- a/src/packages/helpers/src/hex-to-rgba/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * function to return string with capital letter. - * @param {string} hex the color hex. - * @param {number} alpha the alpha number. - * @returns {string} rgba color. - */ -export default ( hex, alpha ) => { - if ( null === hex ) { - return ''; - } - - /** - * Detect CSS variables in form of var(--color) and get their current - * values from the :root selector. - */ - if ( hex.indexOf( 'var(' ) > -1 ) { - hex = window.getComputedStyle( document.documentElement ).getPropertyValue( hex.replace( 'var(', '' ).replace( ')', '' ) ) || '#fff'; - } - - hex = hex.replace( '#', '' ); - const r = parseInt( hex.length === 3 ? hex.slice( 0, 1 ).repeat( 2 ) : hex.slice( 0, 2 ), 16 ); - const g = parseInt( hex.length === 3 ? hex.slice( 1, 2 ).repeat( 2 ) : hex.slice( 2, 4 ), 16 ); - const b = parseInt( hex.length === 3 ? hex.slice( 2, 3 ).repeat( 2 ) : hex.slice( 4, 6 ), 16 ); - return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'; -} diff --git a/src/packages/helpers/src/index.js b/src/packages/helpers/src/index.js deleted file mode 100644 index a93356d51..000000000 --- a/src/packages/helpers/src/index.js +++ /dev/null @@ -1,33 +0,0 @@ -export { default as getPreviewSize } from './get-preview-size'; -export { default as getBorderStyle } from './get-border-style'; -export { default as getBorderColor } from './get-border-color'; -export { default as getBorderWidth } from './get-border-width'; -export { default as advancedGetPreviewSize } from './advanced-get-preview-size'; -export { default as showSettings } from './show-settings'; -export { default as hexToRGBA } from './hex-to-rgba'; -export { default as tryParseJSON } from './try-parse-json'; -export { default as KadenceColorOutput } from './kadence-color-output'; -export { default as ConvertColor } from './convert-color'; -export { default as DeprecatedKadenceColorOutput } from './deprecated-kadence-color-output'; -export { default as fetchJson } from './fetch-json'; -export { default as capitalizeFirstLetter } from './capital-first'; -export { default as SafeParseJSON } from './parse-json'; -export { default as getUnitIcon } from './get-unit-icon'; -export { default as typographyStyle } from './typography-style'; -export { default as linkedOrIndividual } from './is-linked-or-individual'; -export { default as setBlockDefaults } from './set-block-defaults'; -export { default as getUniqueId } from './get-unique-id'; -export { default as getTransferableAttributes } from './get-transferable-attributes'; -export { default as getInQueryBlock } from './get-in-query-block'; -export { default as setDynamicState } from './set-dynamic-state'; -export { default as mouseOverVisualizer } from './mouse-over-visualizer'; -export { SPACING_SIZES_MAP, FONT_SIZES_MAP, GAP_SIZES_MAP, isRTL } from './constants'; -export { getSpacingOptionName, getSpacingOptionOutput, getSpacingOptionSize, getSpacingNameFromSize, getSpacingValueFromSize, objectSameFill, clearNonMatchingValues } from './spacing-utilities'; -export { getFontSizeOptionOutput } from './font-size-utilities'; -export { getGapSizeOptionOutput } from './gap-size-utilities'; - -export { default as getPostOrWidgetId } from './get-post-or-widget-id'; -export { default as getPostOrFseId } from './get-post-or-fse-id'; -export { default as hashString } from './hash-string'; -export { default as arrayStringToInt } from './array-string-to-int'; -export { compareVersions } from './compare-versions'; diff --git a/src/packages/helpers/src/is-linked-or-individual/index.js b/src/packages/helpers/src/is-linked-or-individual/index.js deleted file mode 100644 index e9c2c279b..000000000 --- a/src/packages/helpers/src/is-linked-or-individual/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import { get } from 'lodash'; - -/** - * See if variables are linked or individual - */ -export default ( variable, key ) => { - - let value0 = get( variable, [ key, 0 ] ); - let value1 = get( variable, [ key, 1 ] ); - let value2 = get( variable, [ key, 2 ] ); - let value3 = get( variable, [ key, 3 ] ); - - if ( value0 === value1 && value0 === value2 && value0 === value3 ) { - return 'linked'; - } - - return 'individual'; -} diff --git a/src/packages/helpers/src/kadence-color-output/index.js b/src/packages/helpers/src/kadence-color-output/index.js deleted file mode 100644 index c495ecab9..000000000 --- a/src/packages/helpers/src/kadence-color-output/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * function to return string with var if needed. - * @param {string} string the word string. - * @returns {string} with var if needed. - */ -/* global kadence_blocks_params */ -import hexToRGBA from '../hex-to-rgba'; - -// eslint-disable-next-line camelcase -export default function KadenceColorOutput( string, opacity = null ) { - if ( string && string.startsWith( 'palette' ) ) { - string = 'var(--global-' + string + ')'; - } else if ( opacity !== null && ! isNaN( opacity ) && 1 !== Number( opacity ) && undefined !== string && '' !== string ) { - string = hexToRGBA( string, opacity ); - } - return string; -} diff --git a/src/packages/helpers/src/mouse-over-visualizer/index.js b/src/packages/helpers/src/mouse-over-visualizer/index.js deleted file mode 100644 index 06ed2ce27..000000000 --- a/src/packages/helpers/src/mouse-over-visualizer/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { useState } from '@wordpress/element'; - -export default function mouseOverVisualizer() { - const [ isMouseOver, setIsMouseOver ] = useState( false ); - const onMouseOver = () => setIsMouseOver( true ); - const onMouseOut = () => setIsMouseOver( false ); - return { isMouseOver, onMouseOver, onMouseOut }; -} \ No newline at end of file diff --git a/src/packages/helpers/src/parse-json/index.js b/src/packages/helpers/src/parse-json/index.js deleted file mode 100644 index 8c7a9d810..000000000 --- a/src/packages/helpers/src/parse-json/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Try Parsing - */ -export default ( jsonString, forceJson = true ) => { - try { - var o = JSON.parse( jsonString ); - - // Handle non-exception-throwing cases: - // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking, - // but... JSON.parse(null) returns null, and typeof null === "object", - // so we must check for that, too. Thankfully, null is falsey, so this suffices: - if (o && typeof o === "object") { - return o; - } - } - catch (e) { } - if ( jsonString && typeof jsonString === "object" ) { - return jsonString; - } - if ( forceJson ) { - return {}; - } - return false; -}; diff --git a/src/packages/helpers/src/set-block-defaults/index.js b/src/packages/helpers/src/set-block-defaults/index.js deleted file mode 100644 index e067f337d..000000000 --- a/src/packages/helpers/src/set-block-defaults/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Returns new attributes object with defaults applied. - */ -export default (blockSlug, attributes) => { - if ( ! attributes.uniqueID ) { - if ( undefined === attributes.noCustomDefaults || ! attributes.noCustomDefaults ) { - const oldBlockConfig = kadence_blocks_params.config && kadence_blocks_params.config[blockSlug] ? kadence_blocks_params.config[blockSlug] : undefined; - const blockConfigObject = (kadence_blocks_params.configuration ? JSON.parse(kadence_blocks_params.configuration) : []); - if (blockConfigObject[blockSlug] !== undefined && typeof blockConfigObject[blockSlug] === 'object') { - // hack to make icon list block work with old attributes. - if ( blockSlug === 'kadence/iconlist' ) { - if ( undefined !== blockConfigObject[blockSlug]?.items?.[0]?.icon && blockConfigObject[blockSlug]?.items?.[0]?.icon && ! blockConfigObject[blockSlug]?.icon ) { - attributes['icon'] = blockConfigObject[blockSlug]?.items?.[0]?.icon - } - } - Object.keys(blockConfigObject[blockSlug]).map((attribute) => { - attributes[attribute] = blockConfigObject[blockSlug][attribute]; - }); - } else if (oldBlockConfig !== undefined && typeof oldBlockConfig === 'object') { - Object.keys(oldBlockConfig).map((attribute) => { - attributes[attribute] = oldBlockConfig[attribute]; - }); - } - } - } - - return attributes; -} diff --git a/src/packages/helpers/src/set-dynamic-state/index.js b/src/packages/helpers/src/set-dynamic-state/index.js deleted file mode 100644 index ee3f06171..000000000 --- a/src/packages/helpers/src/set-dynamic-state/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { applyFilters } from '@wordpress/hooks'; - -/** - * Grabs the value for a dynamic attribute and sets it using the state setter given - */ -export default function setDynamicState( filter, content, attributes, dynamicAttribute, setAttributes, context, setState, shouldSetAttribute = false ) { - if ( attributes.kadenceDynamic && attributes.kadenceDynamic[dynamicAttribute] && attributes.kadenceDynamic[dynamicAttribute].enable ) { - applyFilters( filter, content, attributes, dynamicAttribute, setAttributes, context, setState, shouldSetAttribute ); - } -} \ No newline at end of file diff --git a/src/packages/helpers/src/show-settings/index.js b/src/packages/helpers/src/show-settings/index.js deleted file mode 100644 index 415116692..000000000 --- a/src/packages/helpers/src/show-settings/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Return boolean about showing settings. - */ -export default ( key, blockName, defaultOn = true ) => { - const blockSettings = ( kadence_blocks_params.settings ? JSON.parse( kadence_blocks_params.settings ) : {} ); - let settings = {}; - if ( blockSettings[ blockName ] !== undefined && typeof blockSettings[ blockName ] === 'object' ) { - settings = blockSettings[ blockName ]; - } - const user = ( kadence_blocks_params.userrole ? kadence_blocks_params.userrole : 'admin' ); - if ( undefined === settings[ key ] ) { - return defaultOn; - } else if ( 'all' === settings[ key ] ) { - return true; - } else if ( 'contributor' === settings[ key ] && ( 'contributor' === user || 'author' === user || 'editor' === user || 'admin' === user ) ) { - return true; - } else if ( 'author' === settings[ key ] && ( 'author' === user || 'editor' === user || 'admin' === user ) ) { - return true; - } else if ( 'editor' === settings[ key ] && ( 'editor' === user || 'admin' === user ) ) { - return true; - } else if ( 'admin' === settings[ key ] && 'admin' === user ) { - return true; - } - return false; -} diff --git a/src/packages/helpers/src/spacing-utilities/index.js b/src/packages/helpers/src/spacing-utilities/index.js deleted file mode 100644 index 8057a6d54..000000000 --- a/src/packages/helpers/src/spacing-utilities/index.js +++ /dev/null @@ -1,155 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { SPACING_SIZES_MAP } from '../constants'; -export function getSpacingOptionName( value, unit, spacingMap = SPACING_SIZES_MAP ) { - if ( ! value ) { - return __( 'None', 'kadence-blocks' ); - } - if ( ! spacingMap ) { - return __( 'Unset', 'kadence-blocks' ); - } - if ( value === '0') { - return __( 'None', 'kadence-blocks' ); - } - const found = spacingMap.find( ( option ) => option.value === value ); - if ( ! found ) { - return value + unit; - } - return found.name; -} -export function getSpacingOptionOutput( value, unit, spacingMap = SPACING_SIZES_MAP ) { - if ( undefined === value ) { - return ''; - } - if ( value === '' ) { - return ''; - } - if ( value === null ) { - return ''; - } - if ( value === '') { - return '0' + unit; - } - if ( ! spacingMap ) { - return value; - } - if ( value === '0') { - return '0' + unit; - } - if ( value === 0 ) { - return '0' + unit; - } - const found = spacingMap.find( ( option ) => option.value === value ); - if ( ! found ) { - return value + unit; - } - return found.output; -} -export function getSpacingOptionSize( value, spacingMap = SPACING_SIZES_MAP ) { - if ( ! value ) { - return 0; - } - if ( ! spacingMap ) { - return value; - } - if ( value === '0') { - return 0; - } - const found = spacingMap.find( ( option ) => option.value === value ); - if ( ! found ) { - return value; - } - return found.size; -} -export function getSpacingNameFromSize( value, spacingMap = SPACING_SIZES_MAP ) { - if ( ! value ) { - return __( 'Unset', 'kadence-blocks' ); - } - if ( ! spacingMap ) { - return __( 'Unset', 'kadence-blocks' ); - } - if ( value === '0') { - return __( 'None', 'kadence-blocks' ); - } - const found = spacingMap.find( ( option ) => option.size === value ); - if ( ! found ) { - return value + 'px'; - } - return found.name; -} -export function getSpacingValueFromSize( value, spacingMap = SPACING_SIZES_MAP ) { - if ( ! value ) { - return ''; - } - if ( ! spacingMap ) { - return ''; - } - if ( value === '0') { - return '0'; - } - const found = spacingMap.find( ( option ) => option.size === value ); - if ( ! found ) { - return value; - } - return found.value; -} - -/** - * Checks if two arrays have values that exist at the same indices and are of the same length - * @param {*} array1 - * @param {*} array2 - * @returns boolean - */ -export function objectSameFill( array1, array2 ) { - if ( typeof( array1 ) != 'object' || typeof( array2 ) != 'object' ) { - return false; - } - - if ( array1.length != array2.length ) { - return false; - } - - for ( let i = 0; i < array1.length; i++ ) { - const ele1 = array1[i]; - const ele2 = array2[i]; - - if ( ( ele1 && ! ele2 ) || ( ! ele1 && ele2 ) ) { - return false; - } - } - - return true; -} - -/** - * Return incomingValue with any non matching (by data type) indices reset to '' - * Matching data type is determined by the last changed index from the reference - * @param {*} reference - * @param {*} incomingValue - * @returns {*} - */ -export function clearNonMatchingValues( reference, incomingValue ) { - if ( typeof( reference ) != 'object' || typeof( incomingValue ) != 'object' ) { - return incomingValue; - } - - if ( reference.length != incomingValue.length ) { - return incomingValue; - } - - let changedVal = null; - - for ( let i = 0; i < reference.length; i++ ) { - const valPart = reference[i]; - const incValPart = incomingValue[i]; - - if ( valPart !== incValPart ) { - changedVal = incValPart; - } - } - - if ( changedVal ) { - return incomingValue.map( val => typeof( val ) == typeof( changedVal ) ? val : '' ); - } - - return incomingValue; -} \ No newline at end of file diff --git a/src/packages/helpers/src/try-parse-json/index.js b/src/packages/helpers/src/try-parse-json/index.js deleted file mode 100644 index a4f00611a..000000000 --- a/src/packages/helpers/src/try-parse-json/index.js +++ /dev/null @@ -1,21 +0,0 @@ -export default function tryParseJSON( jsonString, forceJson = true ) { - try { - var o = JSON.parse( jsonString ); - - // Handle non-exception-throwing cases: - // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking, - // but... JSON.parse(null) returns null, and typeof null === "object", - // so we must check for that, too. Thankfully, null is falsey, so this suffices: - if (o && typeof o === "object") { - return o; - } - } - catch (e) { } - if ( jsonString && typeof jsonString === "object" ) { - return jsonString; - } - if ( forceJson ) { - return {}; - } - return false; -}; \ No newline at end of file diff --git a/src/packages/helpers/src/typography-style/index.js b/src/packages/helpers/src/typography-style/index.js deleted file mode 100644 index 4e40e77fc..000000000 --- a/src/packages/helpers/src/typography-style/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import getPreviewSize from '../get-preview-size'; -import { getFontSizeOptionOutput } from '../font-size-utilities'; -/** - * Return boolean about showing settings. - */ - export default ( data, cssClass, previewDevice ) => { - let outputCSS = ''; - if ( undefined !== data && undefined !== data[ 0 ] ) { - const previewTypographySize = getPreviewSize( previewDevice, ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].size && undefined !== data[ 0 ].size[ 0 ] ? data[ 0 ].size[ 0 ] : '' ), ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].size && undefined !== data[ 0 ].size[ 1 ] ? data[ 0 ].size[ 1 ] : '' ), ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].size && undefined !== data[ 0 ].size[ 2 ] ? data[ 0 ].size[ 2 ] : '' ) ); - if ( previewTypographySize ) { - outputCSS = outputCSS + 'font-size:' + getFontSizeOptionOutput( previewTypographySize, ( undefined !== data[ 0 ].sizeType ? data[ 0 ].sizeType : 'px' ) ) + ';'; - } - const previewTypographyLineHeight = getPreviewSize( previewDevice, ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].lineHeight && undefined !== data[ 0 ].lineHeight[ 0 ] ? data[ 0 ].lineHeight[ 0 ] : '' ), ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].lineHeight && undefined !== data[ 0 ].lineHeight[ 1 ] ? data[ 0 ].lineHeight[ 1 ] : '' ), ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].lineHeight && undefined !== data[ 0 ].lineHeight[ 2 ] ? data[ 0 ].lineHeight[ 2 ] : '' ) ); - if ( previewTypographyLineHeight ) { - outputCSS = outputCSS + 'line-height:' + previewTypographyLineHeight + ( undefined !== data[ 0 ].lineType ? data[ 0 ].lineType : '' ) + ';'; - } - const previewTypographyLetterSpacing = getPreviewSize( previewDevice, ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].letterSpacing && undefined !== data[ 0 ].letterSpacing[ 0 ] ? data[ 0 ].letterSpacing[ 0 ] : '' ), ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].letterSpacing && undefined !== data[ 0 ].letterSpacing[ 1 ] ? data[ 0 ].letterSpacing[ 1 ] : '' ), ( undefined !== data && undefined !== data[ 0 ] && undefined !== data[ 0 ].letterSpacing && undefined !== data[ 0 ].letterSpacing[ 2 ] ? data[ 0 ].letterSpacing[ 2 ] : '' ) ); - if ( previewTypographyLetterSpacing ) { - outputCSS = outputCSS + 'letter-spacing:' + previewTypographyLetterSpacing + ( undefined !== data[ 0 ].letterSpacingType ? data[ 0 ].letterSpacingType : 'px' ) + ';'; - } - if ( undefined !== data[ 0 ].weight && '' !== data[ 0 ].weight ) { - outputCSS = outputCSS + 'font-weight:' + data[ 0 ].weight + ';'; - } - if ( undefined !== data[ 0 ].style && '' !== data[ 0 ].style ) { - outputCSS = outputCSS + 'font-style:' + data[ 0 ].style + ';'; - } - if ( undefined !== data[ 0 ].textTransform && '' !== data[ 0 ].textTransform ) { - outputCSS = outputCSS + 'text-transform:' + data[ 0 ].textTransform + ';'; - } - if ( undefined !== data[ 0 ].family && '' !== data[ 0 ].family ) { - outputCSS = outputCSS + 'font-family:' + data[ 0 ].family + ';'; - } - } - if ( ! outputCSS ) { - return ''; - } - return cssClass + '{' + outputCSS + '}'; -} From 6b072b93db4f943ccc4e465d20047900cb1339c4 Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 12:48:40 -0500 Subject: [PATCH 02/10] KAD-3233 Use helpers repository in blocks free --- .gitmodules | 3 +++ package.json | 1 + 2 files changed, 4 insertions(+) diff --git a/.gitmodules b/.gitmodules index e69de29bb..07ee95e26 100644 --- a/.gitmodules +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "src/packages/helpers"] + path = src/packages/helpers + url = https://github.com/stellarwp/kadence-helpers/ diff --git a/package.json b/package.json index 25ba3450f..e2e84d30a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@dr-kobros/react-webfont-loader": "^8.0.0", "@floating-ui/react": "^0.26.16", "@hcaptcha/react-hcaptcha": "^1.8.1", + "@kadence/helpers": "file:src/packages/helpers", "@react-google-maps/api": "^2.12.0", "@splidejs/react-splide": "^0.7.12", "@wordpress/icons": "^9.25.0", From 7eb78eb3ab126341045ababcf5e7751dbbe6b11b Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 12:49:26 -0500 Subject: [PATCH 03/10] KAD-3233 Use helpers repository in blocks free --- src/packages/helpers | 1 + 1 file changed, 1 insertion(+) create mode 160000 src/packages/helpers diff --git a/src/packages/helpers b/src/packages/helpers new file mode 160000 index 000000000..8ba361dd0 --- /dev/null +++ b/src/packages/helpers @@ -0,0 +1 @@ +Subproject commit 8ba361dd0c137f1da4fbb0960a4b4aa1227f845d From 2a0dccd97417693e51f83494c9f359032c567aef Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 12:51:05 -0500 Subject: [PATCH 04/10] Delete icons so we can pull from dedicated repo --- src/packages/icons/src/accordion/index.js | 99 ---- src/packages/icons/src/ai-settings/index.js | 10 - src/packages/icons/src/ai/index.js | 10 - src/packages/icons/src/align-bottom/index.js | 4 - src/packages/icons/src/align-middle/index.js | 4 - src/packages/icons/src/align-top/index.js | 4 - src/packages/icons/src/auto-fix/index.js | 8 - .../accordion-block/accord-1/index.js | 28 - .../accordion-block/accord-2/index.js | 29 - .../accordion-block/accord-3/index.js | 52 -- .../accordion-block/accord-4/index.js | 24 - .../block-icons/accordion-block/icon/index.js | 14 - .../src/block-icons/advanced-btn/index.js | 9 - .../block-icons/advanced-form/accept/index.js | 3 - .../block-icons/advanced-form/block/index.js | 16 - .../advanced-form/checkbox/index.js | 12 - .../block-icons/advanced-form/date/index.js | 5 - .../block-icons/advanced-form/email/index.js | 15 - .../block-icons/advanced-form/file/index.js | 12 - .../block-icons/advanced-form/hidden/index.js | 4 - .../block-icons/advanced-form/number/index.js | 15 - .../block-icons/advanced-form/phone/index.js | 9 - .../block-icons/advanced-form/radio/index.js | 10 - .../block-icons/advanced-form/select/index.js | 9 - .../advanced-form/templates/index.js | 536 ------------------ .../block-icons/advanced-form/text/index.js | 15 - .../advanced-form/textarea/index.js | 14 - .../block-icons/advanced-form/time/index.js | 15 - .../advanced-gallery/gal-carousel/index.js | 17 - .../advanced-gallery/gal-fluid/index.js | 30 - .../advanced-gallery/gal-grid/index.js | 33 -- .../advanced-gallery/gal-masonry/index.js | 35 -- .../advanced-gallery/gal-slider/index.js | 14 - .../advanced-gallery/gal-tiles/index.js | 22 - .../advanced-gallery/icon/index.js | 12 - .../src/block-icons/advanced-heading/index.js | 9 - .../icons/src/block-icons/column/index.js | 28 - .../icons/src/block-icons/count-up/index.js | 7 - .../countdown-block/countdown/index.js | 40 -- .../countdown-block/inner-countdown/index.js | 47 -- .../countdown-block/section/index.js | 4 - .../src/block-icons/dynamic-html/index.js | 8 - .../src/block-icons/dynamic-list/index.js | 32 -- .../icons/src/block-icons/form-block/index.js | 13 - .../src/block-icons/google-maps/index.js | 4 - .../src/block-icons/icon-list-block/index.js | 17 - .../block-icons/icon-list-item-block/index.js | 7 - .../icons/src/block-icons/icon/index.js | 9 - .../src/block-icons/image-overlay/index.js | 11 - .../icons/src/block-icons/image/index.js | 11 - .../icons/src/block-icons/infobox/index.js | 13 - .../icons/src/block-icons/lottie/index.js | 14 - .../icons/src/block-icons/modal/index.js | 13 - .../src/block-icons/portfolio-grid/index.js | 31 - .../icons/src/block-icons/post-grid/index.js | 27 - .../post-grid/layout/ascend/index.js | 34 -- .../post-grid/layout/bold/index.js | 25 - .../post-grid/layout/list/index.js | 42 -- .../post-grid/layout/virtue/index.js | 30 - .../icons/src/block-icons/posts/index.js | 23 - .../src/block-icons/product-carousel/index.js | 35 -- .../progress-bar/circle-bar-layout/index.js | 48 -- .../progress-bar/line-bar-layout/index.js | 32 -- .../progress-bar/line-mask-layout/index.js | 12 - .../progress-bar/primary-icon/index.js | 41 -- .../semi-circle-bar-layout/index.js | 30 - .../src/block-icons/restaurant-menu/index.js | 7 - .../row-layout/center-half/index.js | 9 - .../row-layout/collapse-row-five/index.js | 13 - .../row-layout/collapse-row-four/index.js | 11 - .../row-layout/collapse-row-six/index.js | 15 - .../row-layout/collapse-row-three/index.js | 9 - .../row-layout/collapse-row/index.js | 7 - .../row-layout/ex-wide-center/index.js | 5 - .../block-icons/row-layout/first-row/index.js | 6 - .../block-icons/row-layout/five-col/index.js | 7 - .../block-icons/row-layout/four-col/index.js | 6 - .../row-layout/l-four-forty/index.js | 6 - .../block-icons/row-layout/last-row/index.js | 6 - .../block-icons/row-layout/left-half/index.js | 9 - .../row-layout/r-four-forty/index.js | 6 - .../row-layout/right-half/index.js | 9 - .../block-icons/row-layout/six-col/index.js | 8 - .../block-icons/row-layout/three-col/index.js | 9 - .../row-layout/three-grid/index.js | 15 - .../block-icons/row-layout/two-col/index.js | 7 - .../row-layout/two-left-golden/index.js | 7 - .../row-layout/two-right-golden/index.js | 7 - .../row-layout/wide-center/index.js | 5 - .../icons/src/block-icons/slider/index.js | 31 - .../icons/src/block-icons/spacer/index.js | 3 - .../src/block-icons/split-content/index.js | 15 - .../icons/src/block-icons/tab/icon/index.js | 4 - .../table-of-contents/bullets/index.js | 14 - .../table-of-contents/icon/index.js | 23 - .../table-of-contents/none/index.js | 14 - .../table-of-contents/numbered/index.js | 14 - .../table-of-contents/one-column/index.js | 14 - .../table-of-contents/three-column/index.js | 14 - .../table-of-contents/two-column/index.js | 14 - .../icons/src/block-icons/tabs/icon/index.js | 25 - .../src/block-icons/tabs/tabs-bold/index.js | 18 - .../src/block-icons/tabs/tabs-center/index.js | 19 - .../src/block-icons/tabs/tabs-simple/index.js | 20 - .../block-icons/tabs/tabs-vertical/index.js | 23 - .../testimonial/testimonial-basic/index.js | 21 - .../testimonial/testimonial-block/index.js | 11 - .../testimonial/testimonial-bubble/index.js | 23 - .../testimonial/testimonial-card/index.js | 22 - .../testimonial/testimonial-in-line/index.js | 21 - .../testimonial/testimonial-single/index.js | 7 - .../icons/src/block-icons/user-info/index.js | 24 - .../src/block-icons/video-popup/index.js | 9 - src/packages/icons/src/block-row/index.js | 16 - src/packages/icons/src/block-tabs/index.js | 25 - src/packages/icons/src/bottom-left/index.js | 11 - src/packages/icons/src/bottom-right/index.js | 11 - .../src/brand-icons/kadence-blocks/index.js | 13 - .../icons/src/brand-icons/kadence-bw/index.js | 7 - .../src/brand-icons/kadence-cat-new/index.js | 65 --- .../src/brand-icons/kadence-cat/index.js | 7 - .../src/brand-icons/kadence-cloud/index.js | 13 - .../src/brand-icons/kadence-new/index.js | 12 - .../icons/src/brand-icons/kadence/index.js | 9 - src/packages/icons/src/brush/index.js | 8 - src/packages/icons/src/captcha/index.js | 7 - src/packages/icons/src/categories/index.js | 1 - src/packages/icons/src/chat-bubble/index.js | 8 - src/packages/icons/src/check/index.js | 8 - src/packages/icons/src/click/index.js | 12 - src/packages/icons/src/comments/index.js | 1 - src/packages/icons/src/copy-styles/index.js | 13 - src/packages/icons/src/copy/index.js | 8 - src/packages/icons/src/duplicate/index.js | 13 - src/packages/icons/src/dynamic/index.js | 8 - src/packages/icons/src/em/index.js | 12 - src/packages/icons/src/eye/index.js | 8 - src/packages/icons/src/font-family/index.js | 5 - .../icons/src/gallery-icons/carousel/index.js | 22 - .../icons/src/gallery-icons/fluid/index.js | 30 - .../icons/src/gallery-icons/grid/index.js | 33 -- .../icons/src/gallery-icons/masonry/index.js | 35 -- .../icons/src/gallery-icons/slider/index.js | 14 - .../icons/src/gallery-icons/tiles/index.js | 22 - src/packages/icons/src/gradient/index.js | 9 - src/packages/icons/src/grid/index.js | 11 - src/packages/icons/src/hover/index.js | 13 - src/packages/icons/src/index.js | 230 -------- src/packages/icons/src/individual/index.js | 6 - .../icons/src/info-background/index.js | 13 - src/packages/icons/src/info-basic/index.js | 31 - src/packages/icons/src/info-image/index.js | 22 - .../icons/src/info-left-above/index.js | 34 -- .../icons/src/info-left-overlay/index.js | 36 -- src/packages/icons/src/info-left/index.js | 29 - src/packages/icons/src/info-simple/index.js | 19 - src/packages/icons/src/info-start/index.js | 23 - .../icons/src/info-top-overlay/index.js | 35 -- src/packages/icons/src/link/index.js | 8 - src/packages/icons/src/linked/index.js | 3 - src/packages/icons/src/locked/index.js | 8 - src/packages/icons/src/notes/index.js | 8 - src/packages/icons/src/opacity/index.js | 16 - .../icons/src/outline-bottom/index.js | 6 - src/packages/icons/src/outline-left/index.js | 6 - src/packages/icons/src/outline-right/index.js | 6 - src/packages/icons/src/outline-top/index.js | 6 - src/packages/icons/src/paste/index.js | 8 - src/packages/icons/src/percent/index.js | 13 - src/packages/icons/src/playlist/index.js | 8 - src/packages/icons/src/px/index.js | 12 - .../icons/src/radius-individual/index.js | 6 - src/packages/icons/src/radius-linked/index.js | 3 - src/packages/icons/src/rem/index.js | 12 - src/packages/icons/src/row/index.js | 5 - src/packages/icons/src/show-more/index.js | 11 - src/packages/icons/src/slider/index.js | 9 - src/packages/icons/src/subject/index.js | 8 - src/packages/icons/src/tabs/index.js | 78 --- src/packages/icons/src/tags/index.js | 1 - src/packages/icons/src/thumbs-slider/index.js | 26 - src/packages/icons/src/tooltip/index.js | 10 - src/packages/icons/src/top-left/index.js | 11 - src/packages/icons/src/top-right/index.js | 6 - src/packages/icons/src/user/index.js | 1 - src/packages/icons/src/vh/index.js | 12 - src/packages/icons/src/video/index.js | 8 - src/packages/icons/src/visibility/index.js | 11 - src/packages/icons/src/vtabs/index.js | 133 ----- src/packages/icons/src/vw/index.js | 12 - 190 files changed, 3876 deletions(-) delete mode 100644 src/packages/icons/src/accordion/index.js delete mode 100644 src/packages/icons/src/ai-settings/index.js delete mode 100644 src/packages/icons/src/ai/index.js delete mode 100644 src/packages/icons/src/align-bottom/index.js delete mode 100644 src/packages/icons/src/align-middle/index.js delete mode 100644 src/packages/icons/src/align-top/index.js delete mode 100644 src/packages/icons/src/auto-fix/index.js delete mode 100644 src/packages/icons/src/block-icons/accordion-block/accord-1/index.js delete mode 100644 src/packages/icons/src/block-icons/accordion-block/accord-2/index.js delete mode 100644 src/packages/icons/src/block-icons/accordion-block/accord-3/index.js delete mode 100644 src/packages/icons/src/block-icons/accordion-block/accord-4/index.js delete mode 100644 src/packages/icons/src/block-icons/accordion-block/icon/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-btn/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/accept/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/block/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/checkbox/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/date/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/email/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/file/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/hidden/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/number/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/phone/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/radio/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/select/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/templates/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/text/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/textarea/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-form/time/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/gal-carousel/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/gal-fluid/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/gal-grid/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/gal-masonry/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/gal-slider/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/gal-tiles/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-gallery/icon/index.js delete mode 100644 src/packages/icons/src/block-icons/advanced-heading/index.js delete mode 100644 src/packages/icons/src/block-icons/column/index.js delete mode 100644 src/packages/icons/src/block-icons/count-up/index.js delete mode 100644 src/packages/icons/src/block-icons/countdown-block/countdown/index.js delete mode 100644 src/packages/icons/src/block-icons/countdown-block/inner-countdown/index.js delete mode 100644 src/packages/icons/src/block-icons/countdown-block/section/index.js delete mode 100644 src/packages/icons/src/block-icons/dynamic-html/index.js delete mode 100644 src/packages/icons/src/block-icons/dynamic-list/index.js delete mode 100644 src/packages/icons/src/block-icons/form-block/index.js delete mode 100644 src/packages/icons/src/block-icons/google-maps/index.js delete mode 100644 src/packages/icons/src/block-icons/icon-list-block/index.js delete mode 100644 src/packages/icons/src/block-icons/icon-list-item-block/index.js delete mode 100644 src/packages/icons/src/block-icons/icon/index.js delete mode 100644 src/packages/icons/src/block-icons/image-overlay/index.js delete mode 100644 src/packages/icons/src/block-icons/image/index.js delete mode 100644 src/packages/icons/src/block-icons/infobox/index.js delete mode 100644 src/packages/icons/src/block-icons/lottie/index.js delete mode 100644 src/packages/icons/src/block-icons/modal/index.js delete mode 100644 src/packages/icons/src/block-icons/portfolio-grid/index.js delete mode 100644 src/packages/icons/src/block-icons/post-grid/index.js delete mode 100644 src/packages/icons/src/block-icons/post-grid/layout/ascend/index.js delete mode 100644 src/packages/icons/src/block-icons/post-grid/layout/bold/index.js delete mode 100644 src/packages/icons/src/block-icons/post-grid/layout/list/index.js delete mode 100644 src/packages/icons/src/block-icons/post-grid/layout/virtue/index.js delete mode 100644 src/packages/icons/src/block-icons/posts/index.js delete mode 100644 src/packages/icons/src/block-icons/product-carousel/index.js delete mode 100644 src/packages/icons/src/block-icons/progress-bar/circle-bar-layout/index.js delete mode 100644 src/packages/icons/src/block-icons/progress-bar/line-bar-layout/index.js delete mode 100644 src/packages/icons/src/block-icons/progress-bar/line-mask-layout/index.js delete mode 100644 src/packages/icons/src/block-icons/progress-bar/primary-icon/index.js delete mode 100644 src/packages/icons/src/block-icons/progress-bar/semi-circle-bar-layout/index.js delete mode 100644 src/packages/icons/src/block-icons/restaurant-menu/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/center-half/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/collapse-row-five/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/collapse-row-four/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/collapse-row-six/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/collapse-row-three/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/collapse-row/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/ex-wide-center/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/first-row/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/five-col/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/four-col/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/l-four-forty/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/last-row/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/left-half/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/r-four-forty/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/right-half/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/six-col/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/three-col/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/three-grid/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/two-col/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/two-left-golden/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/two-right-golden/index.js delete mode 100644 src/packages/icons/src/block-icons/row-layout/wide-center/index.js delete mode 100644 src/packages/icons/src/block-icons/slider/index.js delete mode 100644 src/packages/icons/src/block-icons/spacer/index.js delete mode 100644 src/packages/icons/src/block-icons/split-content/index.js delete mode 100644 src/packages/icons/src/block-icons/tab/icon/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/bullets/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/icon/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/none/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/numbered/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/one-column/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/three-column/index.js delete mode 100644 src/packages/icons/src/block-icons/table-of-contents/two-column/index.js delete mode 100644 src/packages/icons/src/block-icons/tabs/icon/index.js delete mode 100644 src/packages/icons/src/block-icons/tabs/tabs-bold/index.js delete mode 100644 src/packages/icons/src/block-icons/tabs/tabs-center/index.js delete mode 100644 src/packages/icons/src/block-icons/tabs/tabs-simple/index.js delete mode 100644 src/packages/icons/src/block-icons/tabs/tabs-vertical/index.js delete mode 100644 src/packages/icons/src/block-icons/testimonial/testimonial-basic/index.js delete mode 100644 src/packages/icons/src/block-icons/testimonial/testimonial-block/index.js delete mode 100644 src/packages/icons/src/block-icons/testimonial/testimonial-bubble/index.js delete mode 100644 src/packages/icons/src/block-icons/testimonial/testimonial-card/index.js delete mode 100644 src/packages/icons/src/block-icons/testimonial/testimonial-in-line/index.js delete mode 100644 src/packages/icons/src/block-icons/testimonial/testimonial-single/index.js delete mode 100644 src/packages/icons/src/block-icons/user-info/index.js delete mode 100644 src/packages/icons/src/block-icons/video-popup/index.js delete mode 100644 src/packages/icons/src/block-row/index.js delete mode 100644 src/packages/icons/src/block-tabs/index.js delete mode 100644 src/packages/icons/src/bottom-left/index.js delete mode 100644 src/packages/icons/src/bottom-right/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence-blocks/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence-bw/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence-cat-new/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence-cat/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence-cloud/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence-new/index.js delete mode 100644 src/packages/icons/src/brand-icons/kadence/index.js delete mode 100644 src/packages/icons/src/brush/index.js delete mode 100644 src/packages/icons/src/captcha/index.js delete mode 100644 src/packages/icons/src/categories/index.js delete mode 100644 src/packages/icons/src/chat-bubble/index.js delete mode 100644 src/packages/icons/src/check/index.js delete mode 100644 src/packages/icons/src/click/index.js delete mode 100644 src/packages/icons/src/comments/index.js delete mode 100644 src/packages/icons/src/copy-styles/index.js delete mode 100644 src/packages/icons/src/copy/index.js delete mode 100644 src/packages/icons/src/duplicate/index.js delete mode 100644 src/packages/icons/src/dynamic/index.js delete mode 100644 src/packages/icons/src/em/index.js delete mode 100644 src/packages/icons/src/eye/index.js delete mode 100644 src/packages/icons/src/font-family/index.js delete mode 100644 src/packages/icons/src/gallery-icons/carousel/index.js delete mode 100644 src/packages/icons/src/gallery-icons/fluid/index.js delete mode 100644 src/packages/icons/src/gallery-icons/grid/index.js delete mode 100644 src/packages/icons/src/gallery-icons/masonry/index.js delete mode 100644 src/packages/icons/src/gallery-icons/slider/index.js delete mode 100644 src/packages/icons/src/gallery-icons/tiles/index.js delete mode 100644 src/packages/icons/src/gradient/index.js delete mode 100644 src/packages/icons/src/grid/index.js delete mode 100644 src/packages/icons/src/hover/index.js delete mode 100644 src/packages/icons/src/index.js delete mode 100644 src/packages/icons/src/individual/index.js delete mode 100644 src/packages/icons/src/info-background/index.js delete mode 100644 src/packages/icons/src/info-basic/index.js delete mode 100644 src/packages/icons/src/info-image/index.js delete mode 100644 src/packages/icons/src/info-left-above/index.js delete mode 100644 src/packages/icons/src/info-left-overlay/index.js delete mode 100644 src/packages/icons/src/info-left/index.js delete mode 100644 src/packages/icons/src/info-simple/index.js delete mode 100644 src/packages/icons/src/info-start/index.js delete mode 100644 src/packages/icons/src/info-top-overlay/index.js delete mode 100644 src/packages/icons/src/link/index.js delete mode 100644 src/packages/icons/src/linked/index.js delete mode 100644 src/packages/icons/src/locked/index.js delete mode 100644 src/packages/icons/src/notes/index.js delete mode 100644 src/packages/icons/src/opacity/index.js delete mode 100644 src/packages/icons/src/outline-bottom/index.js delete mode 100644 src/packages/icons/src/outline-left/index.js delete mode 100644 src/packages/icons/src/outline-right/index.js delete mode 100644 src/packages/icons/src/outline-top/index.js delete mode 100644 src/packages/icons/src/paste/index.js delete mode 100644 src/packages/icons/src/percent/index.js delete mode 100644 src/packages/icons/src/playlist/index.js delete mode 100644 src/packages/icons/src/px/index.js delete mode 100644 src/packages/icons/src/radius-individual/index.js delete mode 100644 src/packages/icons/src/radius-linked/index.js delete mode 100644 src/packages/icons/src/rem/index.js delete mode 100644 src/packages/icons/src/row/index.js delete mode 100644 src/packages/icons/src/show-more/index.js delete mode 100644 src/packages/icons/src/slider/index.js delete mode 100644 src/packages/icons/src/subject/index.js delete mode 100644 src/packages/icons/src/tabs/index.js delete mode 100644 src/packages/icons/src/tags/index.js delete mode 100644 src/packages/icons/src/thumbs-slider/index.js delete mode 100644 src/packages/icons/src/tooltip/index.js delete mode 100644 src/packages/icons/src/top-left/index.js delete mode 100644 src/packages/icons/src/top-right/index.js delete mode 100644 src/packages/icons/src/user/index.js delete mode 100644 src/packages/icons/src/vh/index.js delete mode 100644 src/packages/icons/src/video/index.js delete mode 100644 src/packages/icons/src/visibility/index.js delete mode 100644 src/packages/icons/src/vtabs/index.js delete mode 100644 src/packages/icons/src/vw/index.js diff --git a/src/packages/icons/src/accordion/index.js b/src/packages/icons/src/accordion/index.js deleted file mode 100644 index e47fc3db2..000000000 --- a/src/packages/icons/src/accordion/index.js +++ /dev/null @@ -1,99 +0,0 @@ -export default - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/ai-settings/index.js b/src/packages/icons/src/ai-settings/index.js deleted file mode 100644 index 8b6e88996..000000000 --- a/src/packages/icons/src/ai-settings/index.js +++ /dev/null @@ -1,10 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/ai/index.js b/src/packages/icons/src/ai/index.js deleted file mode 100644 index fc5a22efb..000000000 --- a/src/packages/icons/src/ai/index.js +++ /dev/null @@ -1,10 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/align-bottom/index.js b/src/packages/icons/src/align-bottom/index.js deleted file mode 100644 index 9c0e8269d..000000000 --- a/src/packages/icons/src/align-bottom/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/align-middle/index.js b/src/packages/icons/src/align-middle/index.js deleted file mode 100644 index 980a7ea03..000000000 --- a/src/packages/icons/src/align-middle/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/align-top/index.js b/src/packages/icons/src/align-top/index.js deleted file mode 100644 index 303154669..000000000 --- a/src/packages/icons/src/align-top/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/auto-fix/index.js b/src/packages/icons/src/auto-fix/index.js deleted file mode 100644 index 63cedd996..000000000 --- a/src/packages/icons/src/auto-fix/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/accordion-block/accord-1/index.js b/src/packages/icons/src/block-icons/accordion-block/accord-1/index.js deleted file mode 100644 index 10e405811..000000000 --- a/src/packages/icons/src/block-icons/accordion-block/accord-1/index.js +++ /dev/null @@ -1,28 +0,0 @@ -export default - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/accordion-block/accord-2/index.js b/src/packages/icons/src/block-icons/accordion-block/accord-2/index.js deleted file mode 100644 index 4018527b9..000000000 --- a/src/packages/icons/src/block-icons/accordion-block/accord-2/index.js +++ /dev/null @@ -1,29 +0,0 @@ -export default - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/accordion-block/accord-3/index.js b/src/packages/icons/src/block-icons/accordion-block/accord-3/index.js deleted file mode 100644 index 991421a2c..000000000 --- a/src/packages/icons/src/block-icons/accordion-block/accord-3/index.js +++ /dev/null @@ -1,52 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/accordion-block/accord-4/index.js b/src/packages/icons/src/block-icons/accordion-block/accord-4/index.js deleted file mode 100644 index b1c5f74cc..000000000 --- a/src/packages/icons/src/block-icons/accordion-block/accord-4/index.js +++ /dev/null @@ -1,24 +0,0 @@ -export default - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/accordion-block/icon/index.js b/src/packages/icons/src/block-icons/accordion-block/icon/index.js deleted file mode 100644 index 53fc4e8b3..000000000 --- a/src/packages/icons/src/block-icons/accordion-block/icon/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-btn/index.js b/src/packages/icons/src/block-icons/advanced-btn/index.js deleted file mode 100644 index 674fed857..000000000 --- a/src/packages/icons/src/block-icons/advanced-btn/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/accept/index.js b/src/packages/icons/src/block-icons/advanced-form/accept/index.js deleted file mode 100644 index dd52af338..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/accept/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/block/index.js b/src/packages/icons/src/block-icons/advanced-form/block/index.js deleted file mode 100644 index e07e264a3..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/block/index.js +++ /dev/null @@ -1,16 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/checkbox/index.js b/src/packages/icons/src/block-icons/advanced-form/checkbox/index.js deleted file mode 100644 index 751ce7522..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/checkbox/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/date/index.js b/src/packages/icons/src/block-icons/advanced-form/date/index.js deleted file mode 100644 index 0840e481e..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/date/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/email/index.js b/src/packages/icons/src/block-icons/advanced-form/email/index.js deleted file mode 100644 index 3034f4c23..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/email/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/file/index.js b/src/packages/icons/src/block-icons/advanced-form/file/index.js deleted file mode 100644 index a1f264094..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/file/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/hidden/index.js b/src/packages/icons/src/block-icons/advanced-form/hidden/index.js deleted file mode 100644 index 864569167..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/hidden/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/number/index.js b/src/packages/icons/src/block-icons/advanced-form/number/index.js deleted file mode 100644 index 0c854bfc1..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/number/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/phone/index.js b/src/packages/icons/src/block-icons/advanced-form/phone/index.js deleted file mode 100644 index f6ac6ce9e..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/phone/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/radio/index.js b/src/packages/icons/src/block-icons/advanced-form/radio/index.js deleted file mode 100644 index 7de7a6dd1..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/radio/index.js +++ /dev/null @@ -1,10 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/select/index.js b/src/packages/icons/src/block-icons/advanced-form/select/index.js deleted file mode 100644 index 78a85119c..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/select/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/templates/index.js b/src/packages/icons/src/block-icons/advanced-form/templates/index.js deleted file mode 100644 index c3c84947f..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/templates/index.js +++ /dev/null @@ -1,536 +0,0 @@ -const contact = - - - - - - -; - -const contactDark = - - - - - - - - -; -const contactInField = - - - - - - -; -const contactUnderline = - - - - - - -; -const contactAdvanced = - - - - - - - - - - - - - -; - -const subscribe = - - - - -; - -const subscribeAdvanced = - - - - - -; -const contactAdvancedDark = - - - - - - - - - - - - - -; -const contactAdvancedInField = - - - - - -; -const contactAdvancedUnderline = - - - - - - - - - - -; -const subscribeDark = - - - - -; -const subscribeInField = - - - - -; -const subscribeUnderline = - - - - -; -const subscribeAdvancedDark = - - - - - - - - -; -const subscribeAdvancedInField = - - - -; -const subscribeAdvancedUnderline = - - - - -; - -export { - contact as formTemplateContactIcon, - contactDark as formTemplateContactDarkIcon, - contactInField as formTemplateContactInFieldIcon, - contactUnderline as formTemplateContactUnderlineIcon, - contactAdvanced as formTemplateContactAdvancedIcon, - contactAdvancedDark as formTemplateContactAdvancedDarkIcon, - contactAdvancedInField as formTemplateContactAdvancedInFieldIcon, - contactAdvancedUnderline as formTemplateContactAdvancedUnderlineIcon, - subscribe as formTemplateSubscribeIcon, - subscribeDark as formTemplateSubscribeDarkIcon, - subscribeInField as formTemplateSubscribeInFieldIcon, - subscribeUnderline as formTemplateSubscribeUnderlineIcon, - subscribeAdvanced as formTemplateSubscribeAdvancedIcon, - subscribeAdvancedDark as formTemplateSubscribeAdvancedDarkIcon, - subscribeAdvancedInField as formTemplateSubscribeAdvancedInFieldIcon, - subscribeAdvancedUnderline as formTemplateSubscribeAdvancedUnderlineIcon, -} \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/advanced-form/text/index.js b/src/packages/icons/src/block-icons/advanced-form/text/index.js deleted file mode 100644 index aca6e5215..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/text/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/textarea/index.js b/src/packages/icons/src/block-icons/advanced-form/textarea/index.js deleted file mode 100644 index 2fb3a6b12..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/textarea/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/advanced-form/time/index.js b/src/packages/icons/src/block-icons/advanced-form/time/index.js deleted file mode 100644 index 769b4584f..000000000 --- a/src/packages/icons/src/block-icons/advanced-form/time/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/gal-carousel/index.js b/src/packages/icons/src/block-icons/advanced-gallery/gal-carousel/index.js deleted file mode 100644 index a41e17556..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/gal-carousel/index.js +++ /dev/null @@ -1,17 +0,0 @@ -export default - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/gal-fluid/index.js b/src/packages/icons/src/block-icons/advanced-gallery/gal-fluid/index.js deleted file mode 100644 index 5998bff6e..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/gal-fluid/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/gal-grid/index.js b/src/packages/icons/src/block-icons/advanced-gallery/gal-grid/index.js deleted file mode 100644 index f10e53ea5..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/gal-grid/index.js +++ /dev/null @@ -1,33 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/gal-masonry/index.js b/src/packages/icons/src/block-icons/advanced-gallery/gal-masonry/index.js deleted file mode 100644 index 366c2a2bb..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/gal-masonry/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/gal-slider/index.js b/src/packages/icons/src/block-icons/advanced-gallery/gal-slider/index.js deleted file mode 100644 index d830d2733..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/gal-slider/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/gal-tiles/index.js b/src/packages/icons/src/block-icons/advanced-gallery/gal-tiles/index.js deleted file mode 100644 index 1813f28f1..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/gal-tiles/index.js +++ /dev/null @@ -1,22 +0,0 @@ -export default - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-gallery/icon/index.js b/src/packages/icons/src/block-icons/advanced-gallery/icon/index.js deleted file mode 100644 index d901c78d9..000000000 --- a/src/packages/icons/src/block-icons/advanced-gallery/icon/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/advanced-heading/index.js b/src/packages/icons/src/block-icons/advanced-heading/index.js deleted file mode 100644 index e07b791e8..000000000 --- a/src/packages/icons/src/block-icons/advanced-heading/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/column/index.js b/src/packages/icons/src/block-icons/column/index.js deleted file mode 100644 index 4f36a6024..000000000 --- a/src/packages/icons/src/block-icons/column/index.js +++ /dev/null @@ -1,28 +0,0 @@ -export default - - - -; - diff --git a/src/packages/icons/src/block-icons/count-up/index.js b/src/packages/icons/src/block-icons/count-up/index.js deleted file mode 100644 index a5a2b3bdf..000000000 --- a/src/packages/icons/src/block-icons/count-up/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/block-icons/countdown-block/countdown/index.js b/src/packages/icons/src/block-icons/countdown-block/countdown/index.js deleted file mode 100644 index 148bc889c..000000000 --- a/src/packages/icons/src/block-icons/countdown-block/countdown/index.js +++ /dev/null @@ -1,40 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/countdown-block/inner-countdown/index.js b/src/packages/icons/src/block-icons/countdown-block/inner-countdown/index.js deleted file mode 100644 index 4df4ca7c4..000000000 --- a/src/packages/icons/src/block-icons/countdown-block/inner-countdown/index.js +++ /dev/null @@ -1,47 +0,0 @@ -export default - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/countdown-block/section/index.js b/src/packages/icons/src/block-icons/countdown-block/section/index.js deleted file mode 100644 index 4fae30f8f..000000000 --- a/src/packages/icons/src/block-icons/countdown-block/section/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/dynamic-html/index.js b/src/packages/icons/src/block-icons/dynamic-html/index.js deleted file mode 100644 index a134c9983..000000000 --- a/src/packages/icons/src/block-icons/dynamic-html/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/dynamic-list/index.js b/src/packages/icons/src/block-icons/dynamic-list/index.js deleted file mode 100644 index 6a8650192..000000000 --- a/src/packages/icons/src/block-icons/dynamic-list/index.js +++ /dev/null @@ -1,32 +0,0 @@ -export default - - - - - diff --git a/src/packages/icons/src/block-icons/form-block/index.js b/src/packages/icons/src/block-icons/form-block/index.js deleted file mode 100644 index dbadb708f..000000000 --- a/src/packages/icons/src/block-icons/form-block/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/google-maps/index.js b/src/packages/icons/src/block-icons/google-maps/index.js deleted file mode 100644 index b17fe445b..000000000 --- a/src/packages/icons/src/block-icons/google-maps/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/icon-list-block/index.js b/src/packages/icons/src/block-icons/icon-list-block/index.js deleted file mode 100644 index e1177b4ca..000000000 --- a/src/packages/icons/src/block-icons/icon-list-block/index.js +++ /dev/null @@ -1,17 +0,0 @@ -export default - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/icon-list-item-block/index.js b/src/packages/icons/src/block-icons/icon-list-item-block/index.js deleted file mode 100644 index 4af1d3e70..000000000 --- a/src/packages/icons/src/block-icons/icon-list-item-block/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/icon/index.js b/src/packages/icons/src/block-icons/icon/index.js deleted file mode 100644 index a1a9601ce..000000000 --- a/src/packages/icons/src/block-icons/icon/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/image-overlay/index.js b/src/packages/icons/src/block-icons/image-overlay/index.js deleted file mode 100644 index 623a6d723..000000000 --- a/src/packages/icons/src/block-icons/image-overlay/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - - - \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/image/index.js b/src/packages/icons/src/block-icons/image/index.js deleted file mode 100644 index 3e97f0c4f..000000000 --- a/src/packages/icons/src/block-icons/image/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/block-icons/infobox/index.js b/src/packages/icons/src/block-icons/infobox/index.js deleted file mode 100644 index de6eff5dd..000000000 --- a/src/packages/icons/src/block-icons/infobox/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/lottie/index.js b/src/packages/icons/src/block-icons/lottie/index.js deleted file mode 100644 index fc14e05bf..000000000 --- a/src/packages/icons/src/block-icons/lottie/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/modal/index.js b/src/packages/icons/src/block-icons/modal/index.js deleted file mode 100644 index 98874fea6..000000000 --- a/src/packages/icons/src/block-icons/modal/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/portfolio-grid/index.js b/src/packages/icons/src/block-icons/portfolio-grid/index.js deleted file mode 100644 index 5797991a7..000000000 --- a/src/packages/icons/src/block-icons/portfolio-grid/index.js +++ /dev/null @@ -1,31 +0,0 @@ -export default - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/post-grid/index.js b/src/packages/icons/src/block-icons/post-grid/index.js deleted file mode 100644 index 0a54511f9..000000000 --- a/src/packages/icons/src/block-icons/post-grid/index.js +++ /dev/null @@ -1,27 +0,0 @@ -export default - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/post-grid/layout/ascend/index.js b/src/packages/icons/src/block-icons/post-grid/layout/ascend/index.js deleted file mode 100644 index 570129a71..000000000 --- a/src/packages/icons/src/block-icons/post-grid/layout/ascend/index.js +++ /dev/null @@ -1,34 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/post-grid/layout/bold/index.js b/src/packages/icons/src/block-icons/post-grid/layout/bold/index.js deleted file mode 100644 index 7baeedb19..000000000 --- a/src/packages/icons/src/block-icons/post-grid/layout/bold/index.js +++ /dev/null @@ -1,25 +0,0 @@ -export default - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/post-grid/layout/list/index.js b/src/packages/icons/src/block-icons/post-grid/layout/list/index.js deleted file mode 100644 index 0c0d54ace..000000000 --- a/src/packages/icons/src/block-icons/post-grid/layout/list/index.js +++ /dev/null @@ -1,42 +0,0 @@ -export default - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/post-grid/layout/virtue/index.js b/src/packages/icons/src/block-icons/post-grid/layout/virtue/index.js deleted file mode 100644 index d0b27df4f..000000000 --- a/src/packages/icons/src/block-icons/post-grid/layout/virtue/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export default - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/posts/index.js b/src/packages/icons/src/block-icons/posts/index.js deleted file mode 100644 index b9d8dbb58..000000000 --- a/src/packages/icons/src/block-icons/posts/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/product-carousel/index.js b/src/packages/icons/src/block-icons/product-carousel/index.js deleted file mode 100644 index b0cb4ec9a..000000000 --- a/src/packages/icons/src/block-icons/product-carousel/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default - - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/progress-bar/circle-bar-layout/index.js b/src/packages/icons/src/block-icons/progress-bar/circle-bar-layout/index.js deleted file mode 100644 index 54ecb66c3..000000000 --- a/src/packages/icons/src/block-icons/progress-bar/circle-bar-layout/index.js +++ /dev/null @@ -1,48 +0,0 @@ -export default - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/progress-bar/line-bar-layout/index.js b/src/packages/icons/src/block-icons/progress-bar/line-bar-layout/index.js deleted file mode 100644 index 2c7579f87..000000000 --- a/src/packages/icons/src/block-icons/progress-bar/line-bar-layout/index.js +++ /dev/null @@ -1,32 +0,0 @@ -export default - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/progress-bar/line-mask-layout/index.js b/src/packages/icons/src/block-icons/progress-bar/line-mask-layout/index.js deleted file mode 100644 index 36713849c..000000000 --- a/src/packages/icons/src/block-icons/progress-bar/line-mask-layout/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - - - - - - - - - \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/progress-bar/primary-icon/index.js b/src/packages/icons/src/block-icons/progress-bar/primary-icon/index.js deleted file mode 100644 index bf8bda6e5..000000000 --- a/src/packages/icons/src/block-icons/progress-bar/primary-icon/index.js +++ /dev/null @@ -1,41 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/progress-bar/semi-circle-bar-layout/index.js b/src/packages/icons/src/block-icons/progress-bar/semi-circle-bar-layout/index.js deleted file mode 100644 index ba272bc52..000000000 --- a/src/packages/icons/src/block-icons/progress-bar/semi-circle-bar-layout/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export default - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/restaurant-menu/index.js b/src/packages/icons/src/block-icons/restaurant-menu/index.js deleted file mode 100644 index 63a4f00aa..000000000 --- a/src/packages/icons/src/block-icons/restaurant-menu/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/center-half/index.js b/src/packages/icons/src/block-icons/row-layout/center-half/index.js deleted file mode 100644 index 86f490bcf..000000000 --- a/src/packages/icons/src/block-icons/row-layout/center-half/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/collapse-row-five/index.js b/src/packages/icons/src/block-icons/row-layout/collapse-row-five/index.js deleted file mode 100644 index ad61d9ab4..000000000 --- a/src/packages/icons/src/block-icons/row-layout/collapse-row-five/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/collapse-row-four/index.js b/src/packages/icons/src/block-icons/row-layout/collapse-row-four/index.js deleted file mode 100644 index 665e76e24..000000000 --- a/src/packages/icons/src/block-icons/row-layout/collapse-row-four/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/collapse-row-six/index.js b/src/packages/icons/src/block-icons/row-layout/collapse-row-six/index.js deleted file mode 100644 index 539e77716..000000000 --- a/src/packages/icons/src/block-icons/row-layout/collapse-row-six/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/collapse-row-three/index.js b/src/packages/icons/src/block-icons/row-layout/collapse-row-three/index.js deleted file mode 100644 index 5bd6a63f0..000000000 --- a/src/packages/icons/src/block-icons/row-layout/collapse-row-three/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/collapse-row/index.js b/src/packages/icons/src/block-icons/row-layout/collapse-row/index.js deleted file mode 100644 index 704355b2c..000000000 --- a/src/packages/icons/src/block-icons/row-layout/collapse-row/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/ex-wide-center/index.js b/src/packages/icons/src/block-icons/row-layout/ex-wide-center/index.js deleted file mode 100644 index e19046287..000000000 --- a/src/packages/icons/src/block-icons/row-layout/ex-wide-center/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/first-row/index.js b/src/packages/icons/src/block-icons/row-layout/first-row/index.js deleted file mode 100644 index 5de7b5b13..000000000 --- a/src/packages/icons/src/block-icons/row-layout/first-row/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/five-col/index.js b/src/packages/icons/src/block-icons/row-layout/five-col/index.js deleted file mode 100644 index d3d52fe1c..000000000 --- a/src/packages/icons/src/block-icons/row-layout/five-col/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/four-col/index.js b/src/packages/icons/src/block-icons/row-layout/four-col/index.js deleted file mode 100644 index 655a2ba53..000000000 --- a/src/packages/icons/src/block-icons/row-layout/four-col/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/l-four-forty/index.js b/src/packages/icons/src/block-icons/row-layout/l-four-forty/index.js deleted file mode 100644 index 40b08a611..000000000 --- a/src/packages/icons/src/block-icons/row-layout/l-four-forty/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/last-row/index.js b/src/packages/icons/src/block-icons/row-layout/last-row/index.js deleted file mode 100644 index fcba2a32d..000000000 --- a/src/packages/icons/src/block-icons/row-layout/last-row/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/left-half/index.js b/src/packages/icons/src/block-icons/row-layout/left-half/index.js deleted file mode 100644 index 981c4da1b..000000000 --- a/src/packages/icons/src/block-icons/row-layout/left-half/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/r-four-forty/index.js b/src/packages/icons/src/block-icons/row-layout/r-four-forty/index.js deleted file mode 100644 index 2259a9579..000000000 --- a/src/packages/icons/src/block-icons/row-layout/r-four-forty/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/right-half/index.js b/src/packages/icons/src/block-icons/row-layout/right-half/index.js deleted file mode 100644 index 460a8ce51..000000000 --- a/src/packages/icons/src/block-icons/row-layout/right-half/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/six-col/index.js b/src/packages/icons/src/block-icons/row-layout/six-col/index.js deleted file mode 100644 index 99fb27318..000000000 --- a/src/packages/icons/src/block-icons/row-layout/six-col/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/three-col/index.js b/src/packages/icons/src/block-icons/row-layout/three-col/index.js deleted file mode 100644 index 2d6465268..000000000 --- a/src/packages/icons/src/block-icons/row-layout/three-col/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/three-grid/index.js b/src/packages/icons/src/block-icons/row-layout/three-grid/index.js deleted file mode 100644 index 222ed00ab..000000000 --- a/src/packages/icons/src/block-icons/row-layout/three-grid/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/two-col/index.js b/src/packages/icons/src/block-icons/row-layout/two-col/index.js deleted file mode 100644 index 830a35194..000000000 --- a/src/packages/icons/src/block-icons/row-layout/two-col/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/two-left-golden/index.js b/src/packages/icons/src/block-icons/row-layout/two-left-golden/index.js deleted file mode 100644 index a29d456c4..000000000 --- a/src/packages/icons/src/block-icons/row-layout/two-left-golden/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/two-right-golden/index.js b/src/packages/icons/src/block-icons/row-layout/two-right-golden/index.js deleted file mode 100644 index 908471e88..000000000 --- a/src/packages/icons/src/block-icons/row-layout/two-right-golden/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/row-layout/wide-center/index.js b/src/packages/icons/src/block-icons/row-layout/wide-center/index.js deleted file mode 100644 index f2f34dd68..000000000 --- a/src/packages/icons/src/block-icons/row-layout/wide-center/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/block-icons/slider/index.js b/src/packages/icons/src/block-icons/slider/index.js deleted file mode 100644 index eed87b423..000000000 --- a/src/packages/icons/src/block-icons/slider/index.js +++ /dev/null @@ -1,31 +0,0 @@ -export default - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/spacer/index.js b/src/packages/icons/src/block-icons/spacer/index.js deleted file mode 100644 index 897334877..000000000 --- a/src/packages/icons/src/block-icons/spacer/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/block-icons/split-content/index.js b/src/packages/icons/src/block-icons/split-content/index.js deleted file mode 100644 index 3f2384870..000000000 --- a/src/packages/icons/src/block-icons/split-content/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/tab/icon/index.js b/src/packages/icons/src/block-icons/tab/icon/index.js deleted file mode 100644 index 4fae30f8f..000000000 --- a/src/packages/icons/src/block-icons/tab/icon/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/table-of-contents/bullets/index.js b/src/packages/icons/src/block-icons/table-of-contents/bullets/index.js deleted file mode 100644 index bbb523eec..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/bullets/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/table-of-contents/icon/index.js b/src/packages/icons/src/block-icons/table-of-contents/icon/index.js deleted file mode 100644 index c2e40fd5b..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/icon/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/block-icons/table-of-contents/none/index.js b/src/packages/icons/src/block-icons/table-of-contents/none/index.js deleted file mode 100644 index aa54a57a8..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/none/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -;; diff --git a/src/packages/icons/src/block-icons/table-of-contents/numbered/index.js b/src/packages/icons/src/block-icons/table-of-contents/numbered/index.js deleted file mode 100644 index d73bca14b..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/numbered/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/table-of-contents/one-column/index.js b/src/packages/icons/src/block-icons/table-of-contents/one-column/index.js deleted file mode 100644 index 8e87593e3..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/one-column/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/table-of-contents/three-column/index.js b/src/packages/icons/src/block-icons/table-of-contents/three-column/index.js deleted file mode 100644 index a97db8a3e..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/three-column/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/table-of-contents/two-column/index.js b/src/packages/icons/src/block-icons/table-of-contents/two-column/index.js deleted file mode 100644 index 506130bb4..000000000 --- a/src/packages/icons/src/block-icons/table-of-contents/two-column/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/tabs/icon/index.js b/src/packages/icons/src/block-icons/tabs/icon/index.js deleted file mode 100644 index 7f5a2c80b..000000000 --- a/src/packages/icons/src/block-icons/tabs/icon/index.js +++ /dev/null @@ -1,25 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/tabs/tabs-bold/index.js b/src/packages/icons/src/block-icons/tabs/tabs-bold/index.js deleted file mode 100644 index 521d0d696..000000000 --- a/src/packages/icons/src/block-icons/tabs/tabs-bold/index.js +++ /dev/null @@ -1,18 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/tabs/tabs-center/index.js b/src/packages/icons/src/block-icons/tabs/tabs-center/index.js deleted file mode 100644 index d793f1964..000000000 --- a/src/packages/icons/src/block-icons/tabs/tabs-center/index.js +++ /dev/null @@ -1,19 +0,0 @@ -export default - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/tabs/tabs-simple/index.js b/src/packages/icons/src/block-icons/tabs/tabs-simple/index.js deleted file mode 100644 index f4ae76dcf..000000000 --- a/src/packages/icons/src/block-icons/tabs/tabs-simple/index.js +++ /dev/null @@ -1,20 +0,0 @@ -export default - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/tabs/tabs-vertical/index.js b/src/packages/icons/src/block-icons/tabs/tabs-vertical/index.js deleted file mode 100644 index 22bc60b74..000000000 --- a/src/packages/icons/src/block-icons/tabs/tabs-vertical/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/testimonial/testimonial-basic/index.js b/src/packages/icons/src/block-icons/testimonial/testimonial-basic/index.js deleted file mode 100644 index 1ff1306d5..000000000 --- a/src/packages/icons/src/block-icons/testimonial/testimonial-basic/index.js +++ /dev/null @@ -1,21 +0,0 @@ -export default - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/testimonial/testimonial-block/index.js b/src/packages/icons/src/block-icons/testimonial/testimonial-block/index.js deleted file mode 100644 index 0f792ee82..000000000 --- a/src/packages/icons/src/block-icons/testimonial/testimonial-block/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/block-icons/testimonial/testimonial-bubble/index.js b/src/packages/icons/src/block-icons/testimonial/testimonial-bubble/index.js deleted file mode 100644 index 5e3358792..000000000 --- a/src/packages/icons/src/block-icons/testimonial/testimonial-bubble/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/testimonial/testimonial-card/index.js b/src/packages/icons/src/block-icons/testimonial/testimonial-card/index.js deleted file mode 100644 index d86844c2d..000000000 --- a/src/packages/icons/src/block-icons/testimonial/testimonial-card/index.js +++ /dev/null @@ -1,22 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/testimonial/testimonial-in-line/index.js b/src/packages/icons/src/block-icons/testimonial/testimonial-in-line/index.js deleted file mode 100644 index 16f5529b2..000000000 --- a/src/packages/icons/src/block-icons/testimonial/testimonial-in-line/index.js +++ /dev/null @@ -1,21 +0,0 @@ -export default - - - - - - - - - - -; diff --git a/src/packages/icons/src/block-icons/testimonial/testimonial-single/index.js b/src/packages/icons/src/block-icons/testimonial/testimonial-single/index.js deleted file mode 100644 index fb94f56ad..000000000 --- a/src/packages/icons/src/block-icons/testimonial/testimonial-single/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/block-icons/user-info/index.js b/src/packages/icons/src/block-icons/user-info/index.js deleted file mode 100644 index 9eac4afb3..000000000 --- a/src/packages/icons/src/block-icons/user-info/index.js +++ /dev/null @@ -1,24 +0,0 @@ -export default - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-icons/video-popup/index.js b/src/packages/icons/src/block-icons/video-popup/index.js deleted file mode 100644 index e0675dcd7..000000000 --- a/src/packages/icons/src/block-icons/video-popup/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/block-row/index.js b/src/packages/icons/src/block-row/index.js deleted file mode 100644 index 83ba34dcb..000000000 --- a/src/packages/icons/src/block-row/index.js +++ /dev/null @@ -1,16 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/block-tabs/index.js b/src/packages/icons/src/block-tabs/index.js deleted file mode 100644 index 6171e7e17..000000000 --- a/src/packages/icons/src/block-tabs/index.js +++ /dev/null @@ -1,25 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/bottom-left/index.js b/src/packages/icons/src/bottom-left/index.js deleted file mode 100644 index 0610fcb65..000000000 --- a/src/packages/icons/src/bottom-left/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/bottom-right/index.js b/src/packages/icons/src/bottom-right/index.js deleted file mode 100644 index 0d7b90fd9..000000000 --- a/src/packages/icons/src/bottom-right/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/brand-icons/kadence-blocks/index.js b/src/packages/icons/src/brand-icons/kadence-blocks/index.js deleted file mode 100644 index 6e725b761..000000000 --- a/src/packages/icons/src/brand-icons/kadence-blocks/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/brand-icons/kadence-bw/index.js b/src/packages/icons/src/brand-icons/kadence-bw/index.js deleted file mode 100644 index 37715af93..000000000 --- a/src/packages/icons/src/brand-icons/kadence-bw/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/brand-icons/kadence-cat-new/index.js b/src/packages/icons/src/brand-icons/kadence-cat-new/index.js deleted file mode 100644 index 07bbfe1cf..000000000 --- a/src/packages/icons/src/brand-icons/kadence-cat-new/index.js +++ /dev/null @@ -1,65 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/brand-icons/kadence-cat/index.js b/src/packages/icons/src/brand-icons/kadence-cat/index.js deleted file mode 100644 index 7e5290aa4..000000000 --- a/src/packages/icons/src/brand-icons/kadence-cat/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/brand-icons/kadence-cloud/index.js b/src/packages/icons/src/brand-icons/kadence-cloud/index.js deleted file mode 100644 index fdde13270..000000000 --- a/src/packages/icons/src/brand-icons/kadence-cloud/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/brand-icons/kadence-new/index.js b/src/packages/icons/src/brand-icons/kadence-new/index.js deleted file mode 100644 index 2bb0bddfd..000000000 --- a/src/packages/icons/src/brand-icons/kadence-new/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/brand-icons/kadence/index.js b/src/packages/icons/src/brand-icons/kadence/index.js deleted file mode 100644 index 0fd425d86..000000000 --- a/src/packages/icons/src/brand-icons/kadence/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/brush/index.js b/src/packages/icons/src/brush/index.js deleted file mode 100644 index 1d570cd39..000000000 --- a/src/packages/icons/src/brush/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/captcha/index.js b/src/packages/icons/src/captcha/index.js deleted file mode 100644 index 00ffc7465..000000000 --- a/src/packages/icons/src/captcha/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/categories/index.js b/src/packages/icons/src/categories/index.js deleted file mode 100644 index 5ecb66a73..000000000 --- a/src/packages/icons/src/categories/index.js +++ /dev/null @@ -1 +0,0 @@ -export default ; diff --git a/src/packages/icons/src/chat-bubble/index.js b/src/packages/icons/src/chat-bubble/index.js deleted file mode 100644 index 4d320c450..000000000 --- a/src/packages/icons/src/chat-bubble/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/check/index.js b/src/packages/icons/src/check/index.js deleted file mode 100644 index 2d05d1a36..000000000 --- a/src/packages/icons/src/check/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/click/index.js b/src/packages/icons/src/click/index.js deleted file mode 100644 index b9c8de0b8..000000000 --- a/src/packages/icons/src/click/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/comments/index.js b/src/packages/icons/src/comments/index.js deleted file mode 100644 index 894d20c4d..000000000 --- a/src/packages/icons/src/comments/index.js +++ /dev/null @@ -1 +0,0 @@ -export default ; diff --git a/src/packages/icons/src/copy-styles/index.js b/src/packages/icons/src/copy-styles/index.js deleted file mode 100644 index df1887ebc..000000000 --- a/src/packages/icons/src/copy-styles/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/copy/index.js b/src/packages/icons/src/copy/index.js deleted file mode 100644 index 5d8a945ce..000000000 --- a/src/packages/icons/src/copy/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/duplicate/index.js b/src/packages/icons/src/duplicate/index.js deleted file mode 100644 index 7597a4cbd..000000000 --- a/src/packages/icons/src/duplicate/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/dynamic/index.js b/src/packages/icons/src/dynamic/index.js deleted file mode 100644 index be86d7cb8..000000000 --- a/src/packages/icons/src/dynamic/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; \ No newline at end of file diff --git a/src/packages/icons/src/em/index.js b/src/packages/icons/src/em/index.js deleted file mode 100644 index 9832a1fc8..000000000 --- a/src/packages/icons/src/em/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/eye/index.js b/src/packages/icons/src/eye/index.js deleted file mode 100644 index af7969ec1..000000000 --- a/src/packages/icons/src/eye/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/font-family/index.js b/src/packages/icons/src/font-family/index.js deleted file mode 100644 index 20306b9bc..000000000 --- a/src/packages/icons/src/font-family/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/gallery-icons/carousel/index.js b/src/packages/icons/src/gallery-icons/carousel/index.js deleted file mode 100644 index 4293f1d9b..000000000 --- a/src/packages/icons/src/gallery-icons/carousel/index.js +++ /dev/null @@ -1,22 +0,0 @@ -export default - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/gallery-icons/fluid/index.js b/src/packages/icons/src/gallery-icons/fluid/index.js deleted file mode 100644 index 6aed0c2df..000000000 --- a/src/packages/icons/src/gallery-icons/fluid/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/gallery-icons/grid/index.js b/src/packages/icons/src/gallery-icons/grid/index.js deleted file mode 100644 index e876815b8..000000000 --- a/src/packages/icons/src/gallery-icons/grid/index.js +++ /dev/null @@ -1,33 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/gallery-icons/masonry/index.js b/src/packages/icons/src/gallery-icons/masonry/index.js deleted file mode 100644 index 3c96fd1fa..000000000 --- a/src/packages/icons/src/gallery-icons/masonry/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default - - - - - - - - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/gallery-icons/slider/index.js b/src/packages/icons/src/gallery-icons/slider/index.js deleted file mode 100644 index d06341cbf..000000000 --- a/src/packages/icons/src/gallery-icons/slider/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/gallery-icons/tiles/index.js b/src/packages/icons/src/gallery-icons/tiles/index.js deleted file mode 100644 index 772be1ffe..000000000 --- a/src/packages/icons/src/gallery-icons/tiles/index.js +++ /dev/null @@ -1,22 +0,0 @@ -export default - - - - - - - - - - - - - -; \ No newline at end of file diff --git a/src/packages/icons/src/gradient/index.js b/src/packages/icons/src/gradient/index.js deleted file mode 100644 index 44d4e1493..000000000 --- a/src/packages/icons/src/gradient/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/grid/index.js b/src/packages/icons/src/grid/index.js deleted file mode 100644 index 2df8bbe58..000000000 --- a/src/packages/icons/src/grid/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/hover/index.js b/src/packages/icons/src/hover/index.js deleted file mode 100644 index 1607e8649..000000000 --- a/src/packages/icons/src/hover/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/index.js b/src/packages/icons/src/index.js deleted file mode 100644 index 8b429450f..000000000 --- a/src/packages/icons/src/index.js +++ /dev/null @@ -1,230 +0,0 @@ -// General Icons -export { default as blockRowIcon } from './block-row' -export { default as fontFamilyIcon } from './font-family' -export { default as showMoreIcon } from './show-more' -export { default as rowIcon } from './row' -export { default as gridIcon } from './grid' -export { default as radiusLinkedIcon } from './radius-linked' -export { default as radiusIndividualIcon } from './radius-individual' -export { default as topLeftIcon } from './top-left' -export { default as topRightIcon } from './top-right' -export { default as bottomLeftIcon } from './bottom-left' -export { default as bottomRightIcon } from './bottom-right' -export { default as alignTopIcon } from './align-top' -export { default as alignBottomIcon } from './align-bottom' -export { default as alignMiddleIcon } from './align-middle' -export { default as outlineBottomIcon } from './outline-bottom' -export { default as outlineLeftIcon } from './outline-left' -export { default as outlineRightIcon } from './outline-right' -export { default as outlineTopIcon } from './outline-top' -export { default as percentIcon } from './percent' -export { default as lockedIcon } from './locked' -export { default as pxIcon } from './px' -export { default as emIcon } from './em' -export { default as remIcon } from './rem' -export { default as vhIcon } from './vh' -export { default as vwIcon } from './vw' -export { default as linkedIcon } from './linked' -export { default as individualIcon } from './individual' -export { default as blockTabsIcon } from './block-tabs' -export { default as accordionIcon } from './accordion' -export { default as tabsIcon } from './tabs'; -export { default as vTabsIcon } from './vtabs' -export { default as opacityIcon } from './opacity' -export { default as infoSimpleIcon } from './info-simple' -export { default as infoImageIcon } from './info-image' -export { default as infoBackgroundIcon } from './info-background' -export { default as infoStartIcon } from './info-start' -export { default as infoBasicIcon } from './info-basic' -export { default as infoLeftAboveIcon } from './info-left-above' -export { default as infoLeftIcon } from './info-left' -export { default as infoTopOverlayIcon } from './info-top-overlay' -export { default as infoLeftOverlayIcon } from './info-left-overlay' -export { default as slider } from './slider' -export { default as video } from './video' -export { default as gradient } from './gradient' -export { default as brush } from './brush' -export { default as hoverToggle } from './hover' -export { default as duplicate } from './duplicate' -export { default as copy } from './copy' -export { default as copyStyles } from './copy-styles' -export { default as paste } from './paste' -export { default as click } from './click' -export { default as dynamicIcon } from './dynamic'; -export { default as dynamic } from './dynamic'; -export { default as aiIcon } from './ai'; -export { default as aiSettings } from './ai-settings'; -export { default as autoFix } from './auto-fix'; -export { default as subject } from './subject'; -export { default as notes } from './notes'; -export { default as playlist } from './playlist'; -export { default as check } from './check'; -export { default as chatBubble } from './chat-bubble'; -export { default as eye } from './eye'; -export { default as tooltip } from './tooltip'; - -// Block Icons -export { default as restaurantMenuIcon } from './block-icons/restaurant-menu' -export { default as advancedHeadingIcon } from './block-icons/advanced-heading' -export { default as countUpIcon } from './block-icons/count-up' -export { default as iconIcon } from './block-icons/icon' -export { default as postsIcon } from './block-icons/posts' -export { default as spacerIcon } from './block-icons/spacer' -export { default as tabIcon } from './block-icons/tab/icon' -export { default as tabsBlockIcon } from './block-icons/tabs/icon' -export { default as accordionBlockIcon } from './block-icons/accordion-block/icon' -export { default as iconListBlockIcon } from './block-icons/icon-list-block' -export { default as iconListItemBlockIcon } from './block-icons/icon-list-item-block' -export { default as formBlockIcon } from './block-icons/form-block' -export { default as blockColumnIcon } from './block-icons/column' -export { default as advancedBtnIcon } from './block-icons/advanced-btn' -export { default as googleMapsIcon } from './block-icons/google-maps' -export { default as imageIcon } from './block-icons/image' -export { default as galleryIcon } from './block-icons/advanced-gallery/icon' -export { default as infoboxIcon } from './block-icons/infobox' -export { default as lottieIcon } from './block-icons/lottie' -export { default as tableOfContentsIcon } from './block-icons/table-of-contents/icon' - -// Accordion Block -export { default as accord1Icon } from './block-icons/accordion-block/accord-1' -export { default as accord2Icon } from './block-icons/accordion-block/accord-2' -export { default as accord3Icon } from './block-icons/accordion-block/accord-3' -export { default as accord4Icon } from './block-icons/accordion-block/accord-4' - -// Countdown Block -export { default as countdownSectionIcon } from './block-icons/countdown-block/section' -export { default as countdownInnerIcon } from './block-icons/countdown-block/inner-countdown' -export { default as countdownIcon } from './block-icons/countdown-block/countdown' - -// Testimonial Block -export { default as testimonialBubbleIcon } from './block-icons/testimonial/testimonial-bubble' -export { default as testimonialInLineIcon } from './block-icons/testimonial/testimonial-in-line' -export { default as testimonialBasicIcon } from './block-icons/testimonial/testimonial-basic' -export { default as testimonialBlockIcon } from './block-icons/testimonial/testimonial-block' -export { default as testimonialSingleBlockIcon } from './block-icons/testimonial/testimonial-single' -export { default as testimonialCardIcon } from './block-icons/testimonial/testimonial-card' - -// Tabs Block -export { default as tabsSimpleIcon } from './block-icons/tabs/tabs-simple' -export { default as tabsBoldIcon } from './block-icons/tabs/tabs-bold' -export { default as tabsCenterIcon } from './block-icons/tabs/tabs-center' -export { default as tabsVerticalIcon } from './block-icons/tabs/tabs-vertical' - -// Brand Icons -export { default as kadenceIcon } from './brand-icons/kadence' -export { default as kadenceCatIcon } from './brand-icons/kadence-cat' -export { default as KadenceBwIcon } from './brand-icons/kadence-bw' -export { default as kadenceNewIcon } from './brand-icons/kadence-new' -export { default as kadenceCatNewIcon } from './brand-icons/kadence-cat-new' -export { default as kadenceCloudIcon} from './brand-icons/kadence-cloud' -export { default as kadenceBlocksIcon } from './brand-icons/kadence-blocks' - -// Row Layout -export { default as collapseRowIcon } from './block-icons/row-layout/collapse-row' -export { default as collapseRowThreeIcon } from './block-icons/row-layout/collapse-row-three' -export { default as collapseRowFourIcon } from './block-icons/row-layout/collapse-row-four' -export { default as collapseRowFiveIcon } from './block-icons/row-layout/collapse-row-five' -export { default as collapseRowSixIcon } from './block-icons/row-layout/collapse-row-six' -export { default as leftHalfIcon } from './block-icons/row-layout/left-half' -export { default as rightHalfIcon } from './block-icons/row-layout/right-half' -export { default as centerHalfIcon } from './block-icons/row-layout/center-half' -export { default as wideCenterIcon } from './block-icons/row-layout/wide-center' -export { default as exWideCenterIcon } from './block-icons/row-layout/ex-wide-center' -export { default as fourColIcon } from './block-icons/row-layout/four-col' -export { default as threeColIcon } from './block-icons/row-layout/three-col' -export { default as threeGridIcon } from './block-icons/row-layout/three-grid' -export { default as lastRowIcon } from './block-icons/row-layout/last-row' -export { default as firstRowIcon } from './block-icons/row-layout/first-row' -export { default as twoLeftGoldenIcon } from './block-icons/row-layout/two-left-golden' -export { default as twoRightGoldenIcon } from './block-icons/row-layout/two-right-golden' -export { default as lFourFortyIcon } from './block-icons/row-layout/l-four-forty' -export { default as rFourFortyIcon } from './block-icons/row-layout/r-four-forty' -export { default as fiveColIcon } from './block-icons/row-layout/five-col' -export { default as sixColIcon } from './block-icons/row-layout/six-col' -export { default as twoColIcon } from './block-icons/row-layout/two-col' - -// Advanced Gallery -export { default as galleryCarouselIcon } from './block-icons/advanced-gallery/gal-carousel' -export { default as galleryFluidIcon } from './block-icons/advanced-gallery/gal-fluid' -export { default as galleryGridIcon } from './block-icons/advanced-gallery/gal-grid' -export { default as galleryMasonryIcon } from './block-icons/advanced-gallery/gal-masonry' -export { default as gallerySliderIcon } from './block-icons/advanced-gallery/gal-slider' -export { default as galleryTilesIcon } from './block-icons/advanced-gallery/gal-tiles' -export { default as galleryThumbSliderIcon } from './thumbs-slider' - -// Table of contents -export { default as noneIcon } from './block-icons/table-of-contents/none' -export { default as oneColumnIcon } from './block-icons/table-of-contents/one-column' -export { default as twoColumnIcon } from './block-icons/table-of-contents/two-column' -export { default as threeColumnIcon } from './block-icons/table-of-contents/three-column' -export { default as bulletsIcon } from './block-icons/table-of-contents/bullets' -export { default as numberedIcon } from './block-icons/table-of-contents/numbered' - -// Advanced From -export { default as advancedFormIcon } from './block-icons/advanced-form/block' -export { default as acceptInputIcon } from './block-icons/advanced-form/accept' -export { default as checkboxInputIcon } from './block-icons/advanced-form/checkbox' -export { default as dateInputIcon } from './block-icons/advanced-form/date' -export { default as emailInputIcon } from './block-icons/advanced-form/email' -export { default as fileInputIcon } from './block-icons/advanced-form/file' -export { default as hiddenInputIcon } from './block-icons/advanced-form/hidden' -export { default as numberInputIcon } from './block-icons/advanced-form/number' -export { default as phoneInputIcon } from './block-icons/advanced-form/phone' -export { default as radioInputIcon } from './block-icons/advanced-form/radio' -export { default as selectInputIcon } from './block-icons/advanced-form/select' -export { default as textInputIcon } from './block-icons/advanced-form/text' -export { default as textareaInputIcon } from './block-icons/advanced-form/textarea' -export { default as timeInputIcon } from './block-icons/advanced-form/time' -export { default as captchaIcon } from './captcha' -export { - formTemplateContactIcon, - formTemplateContactAdvancedIcon, - formTemplateContactInFieldIcon, - formTemplateContactDarkIcon, - formTemplateContactUnderlineIcon, - formTemplateSubscribeIcon, - formTemplateSubscribeAdvancedIcon, - formTemplateContactAdvancedDarkIcon, - formTemplateContactAdvancedUnderlineIcon, - formTemplateContactAdvancedInFieldIcon, - formTemplateSubscribeDarkIcon, - formTemplateSubscribeUnderlineIcon, - formTemplateSubscribeInFieldIcon, - formTemplateSubscribeAdvancedDarkIcon, - formTemplateSubscribeAdvancedUnderlineIcon, - formTemplateSubscribeAdvancedInFieldIcon, -} from './block-icons/advanced-form/templates' - - -// Pro Block Icons -export { default as dynamicHTMLIcon } from './block-icons/dynamic-html' -export { default as dynamicListIcon } from './block-icons/dynamic-list' -export { default as imageOverlayIcon } from './block-icons/image-overlay' -export { default as modalIcon } from './block-icons/modal' -export { default as portfolioGridIcon } from './block-icons/portfolio-grid' -export { default as postGridIcon } from './block-icons/post-grid' -export { default as productCarouselIcon } from './block-icons/product-carousel' -export { default as sliderIcon } from './block-icons/slider' -export { default as splitContentIcon } from './block-icons/split-content' -export { default as userInfoIcon } from './block-icons/user-info' -export { default as videoPopupIcon } from './block-icons/video-popup' - -// Post Grid Layout Icons -export { default as postVirtueIcon } from './block-icons/post-grid/layout/virtue' -export { default as postBoldIcon } from './block-icons/post-grid/layout/bold' -export { default as postAscendIcon } from './block-icons/post-grid/layout/ascend' -export { default as postListIcon } from './block-icons/post-grid/layout/list' - -// Pro Misc Icons -export { default as categoriesIcon } from './categories' -export { default as tagsIcon } from './tags' -export { default as userIcon } from './user' -export { default as commentsIcon } from './comments' -export { default as linkIcon } from './link' - -// Progress Bar Icons -export { default as progressIcon } from './block-icons/progress-bar/primary-icon' -export { default as circleBar } from './block-icons/progress-bar/circle-bar-layout' -export { default as lineBar } from './block-icons/progress-bar/line-bar-layout' -export { default as semiCircleBar } from './block-icons/progress-bar/semi-circle-bar-layout' -export { default as lineMask } from './block-icons/progress-bar/line-mask-layout' diff --git a/src/packages/icons/src/individual/index.js b/src/packages/icons/src/individual/index.js deleted file mode 100644 index 68a159364..000000000 --- a/src/packages/icons/src/individual/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/info-background/index.js b/src/packages/icons/src/info-background/index.js deleted file mode 100644 index 19caf364d..000000000 --- a/src/packages/icons/src/info-background/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/info-basic/index.js b/src/packages/icons/src/info-basic/index.js deleted file mode 100644 index 2e5aa5895..000000000 --- a/src/packages/icons/src/info-basic/index.js +++ /dev/null @@ -1,31 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/info-image/index.js b/src/packages/icons/src/info-image/index.js deleted file mode 100644 index 2af159be6..000000000 --- a/src/packages/icons/src/info-image/index.js +++ /dev/null @@ -1,22 +0,0 @@ -export default - - - - - - - - - - -; diff --git a/src/packages/icons/src/info-left-above/index.js b/src/packages/icons/src/info-left-above/index.js deleted file mode 100644 index 7c7bbc5ae..000000000 --- a/src/packages/icons/src/info-left-above/index.js +++ /dev/null @@ -1,34 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/info-left-overlay/index.js b/src/packages/icons/src/info-left-overlay/index.js deleted file mode 100644 index 11bf75b9d..000000000 --- a/src/packages/icons/src/info-left-overlay/index.js +++ /dev/null @@ -1,36 +0,0 @@ -export default - - - - - - -; diff --git a/src/packages/icons/src/info-left/index.js b/src/packages/icons/src/info-left/index.js deleted file mode 100644 index ec582a9c2..000000000 --- a/src/packages/icons/src/info-left/index.js +++ /dev/null @@ -1,29 +0,0 @@ -export default - - - - - -; diff --git a/src/packages/icons/src/info-simple/index.js b/src/packages/icons/src/info-simple/index.js deleted file mode 100644 index 67fae121b..000000000 --- a/src/packages/icons/src/info-simple/index.js +++ /dev/null @@ -1,19 +0,0 @@ -export default - - - - - - - - -; diff --git a/src/packages/icons/src/info-start/index.js b/src/packages/icons/src/info-start/index.js deleted file mode 100644 index 9a0fa1bf6..000000000 --- a/src/packages/icons/src/info-start/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/info-top-overlay/index.js b/src/packages/icons/src/info-top-overlay/index.js deleted file mode 100644 index 1fed8af93..000000000 --- a/src/packages/icons/src/info-top-overlay/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default - - - - - - - -; diff --git a/src/packages/icons/src/link/index.js b/src/packages/icons/src/link/index.js deleted file mode 100644 index f2052df99..000000000 --- a/src/packages/icons/src/link/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/linked/index.js b/src/packages/icons/src/linked/index.js deleted file mode 100644 index 79beb88a8..000000000 --- a/src/packages/icons/src/linked/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/locked/index.js b/src/packages/icons/src/locked/index.js deleted file mode 100644 index 40fd38447..000000000 --- a/src/packages/icons/src/locked/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/notes/index.js b/src/packages/icons/src/notes/index.js deleted file mode 100644 index 61a91474f..000000000 --- a/src/packages/icons/src/notes/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/opacity/index.js b/src/packages/icons/src/opacity/index.js deleted file mode 100644 index e6874daaa..000000000 --- a/src/packages/icons/src/opacity/index.js +++ /dev/null @@ -1,16 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/outline-bottom/index.js b/src/packages/icons/src/outline-bottom/index.js deleted file mode 100644 index 0f5ed55ca..000000000 --- a/src/packages/icons/src/outline-bottom/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/outline-left/index.js b/src/packages/icons/src/outline-left/index.js deleted file mode 100644 index e45046766..000000000 --- a/src/packages/icons/src/outline-left/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/outline-right/index.js b/src/packages/icons/src/outline-right/index.js deleted file mode 100644 index d66765def..000000000 --- a/src/packages/icons/src/outline-right/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/outline-top/index.js b/src/packages/icons/src/outline-top/index.js deleted file mode 100644 index c403d2a4c..000000000 --- a/src/packages/icons/src/outline-top/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/paste/index.js b/src/packages/icons/src/paste/index.js deleted file mode 100644 index 42d7725a8..000000000 --- a/src/packages/icons/src/paste/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/percent/index.js b/src/packages/icons/src/percent/index.js deleted file mode 100644 index d1480f908..000000000 --- a/src/packages/icons/src/percent/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/playlist/index.js b/src/packages/icons/src/playlist/index.js deleted file mode 100644 index 547752742..000000000 --- a/src/packages/icons/src/playlist/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/px/index.js b/src/packages/icons/src/px/index.js deleted file mode 100644 index 7a75a1d3c..000000000 --- a/src/packages/icons/src/px/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/radius-individual/index.js b/src/packages/icons/src/radius-individual/index.js deleted file mode 100644 index 68a159364..000000000 --- a/src/packages/icons/src/radius-individual/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/radius-linked/index.js b/src/packages/icons/src/radius-linked/index.js deleted file mode 100644 index 082ccf8d9..000000000 --- a/src/packages/icons/src/radius-linked/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/rem/index.js b/src/packages/icons/src/rem/index.js deleted file mode 100644 index e93195132..000000000 --- a/src/packages/icons/src/rem/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/row/index.js b/src/packages/icons/src/row/index.js deleted file mode 100644 index 63eba516e..000000000 --- a/src/packages/icons/src/row/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/show-more/index.js b/src/packages/icons/src/show-more/index.js deleted file mode 100644 index e568f298e..000000000 --- a/src/packages/icons/src/show-more/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/slider/index.js b/src/packages/icons/src/slider/index.js deleted file mode 100644 index 6d769362b..000000000 --- a/src/packages/icons/src/slider/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export default - - -; diff --git a/src/packages/icons/src/subject/index.js b/src/packages/icons/src/subject/index.js deleted file mode 100644 index 03de45040..000000000 --- a/src/packages/icons/src/subject/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/tabs/index.js b/src/packages/icons/src/tabs/index.js deleted file mode 100644 index 9398f3180..000000000 --- a/src/packages/icons/src/tabs/index.js +++ /dev/null @@ -1,78 +0,0 @@ -export default - - - - - - - - - - - -; diff --git a/src/packages/icons/src/tags/index.js b/src/packages/icons/src/tags/index.js deleted file mode 100644 index e96f9757d..000000000 --- a/src/packages/icons/src/tags/index.js +++ /dev/null @@ -1 +0,0 @@ -export default ; diff --git a/src/packages/icons/src/thumbs-slider/index.js b/src/packages/icons/src/thumbs-slider/index.js deleted file mode 100644 index d9aeaa0ff..000000000 --- a/src/packages/icons/src/thumbs-slider/index.js +++ /dev/null @@ -1,26 +0,0 @@ -export default - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/tooltip/index.js b/src/packages/icons/src/tooltip/index.js deleted file mode 100644 index 66be96cd2..000000000 --- a/src/packages/icons/src/tooltip/index.js +++ /dev/null @@ -1,10 +0,0 @@ -export default - - ; diff --git a/src/packages/icons/src/top-left/index.js b/src/packages/icons/src/top-left/index.js deleted file mode 100644 index af7304df6..000000000 --- a/src/packages/icons/src/top-left/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/top-right/index.js b/src/packages/icons/src/top-right/index.js deleted file mode 100644 index eca1538ff..000000000 --- a/src/packages/icons/src/top-right/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default - - - - -; diff --git a/src/packages/icons/src/user/index.js b/src/packages/icons/src/user/index.js deleted file mode 100644 index e77e1e15b..000000000 --- a/src/packages/icons/src/user/index.js +++ /dev/null @@ -1 +0,0 @@ -export default ; diff --git a/src/packages/icons/src/vh/index.js b/src/packages/icons/src/vh/index.js deleted file mode 100644 index 4c73536c1..000000000 --- a/src/packages/icons/src/vh/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - -; diff --git a/src/packages/icons/src/video/index.js b/src/packages/icons/src/video/index.js deleted file mode 100644 index a960d2ea4..000000000 --- a/src/packages/icons/src/video/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/visibility/index.js b/src/packages/icons/src/visibility/index.js deleted file mode 100644 index 227ba3c8e..000000000 --- a/src/packages/icons/src/visibility/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export default - -; diff --git a/src/packages/icons/src/vtabs/index.js b/src/packages/icons/src/vtabs/index.js deleted file mode 100644 index 50fa54ecf..000000000 --- a/src/packages/icons/src/vtabs/index.js +++ /dev/null @@ -1,133 +0,0 @@ -export default - - - - - - - - - - - - - - - - - -; diff --git a/src/packages/icons/src/vw/index.js b/src/packages/icons/src/vw/index.js deleted file mode 100644 index e45ef0175..000000000 --- a/src/packages/icons/src/vw/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export default - - - -; From f2de3594b8d3708e60330c29b90190dea3d15ba2 Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 12:58:53 -0500 Subject: [PATCH 05/10] KAD-3233 Use icons from dedicated repo --- .gitmodules | 3 +++ package.json | 1 + src/packages/helpers | 2 +- src/packages/icons | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) create mode 160000 src/packages/icons diff --git a/.gitmodules b/.gitmodules index 07ee95e26..99f9f7400 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ [submodule "src/packages/helpers"] path = src/packages/helpers url = https://github.com/stellarwp/kadence-helpers/ +[submodule "src/packages/icons"] + path = src/packages/icons + url = https://github.com/stellarwp/kadence-icons/ diff --git a/package.json b/package.json index e2e84d30a..1477a14c5 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@floating-ui/react": "^0.26.16", "@hcaptcha/react-hcaptcha": "^1.8.1", "@kadence/helpers": "file:src/packages/helpers", + "@kadence/icons": "file:src/packages/icons", "@react-google-maps/api": "^2.12.0", "@splidejs/react-splide": "^0.7.12", "@wordpress/icons": "^9.25.0", diff --git a/src/packages/helpers b/src/packages/helpers index 8ba361dd0..42548f907 160000 --- a/src/packages/helpers +++ b/src/packages/helpers @@ -1 +1 @@ -Subproject commit 8ba361dd0c137f1da4fbb0960a4b4aa1227f845d +Subproject commit 42548f90768da5b5875b1e46957d30ba421589b5 diff --git a/src/packages/icons b/src/packages/icons new file mode 160000 index 000000000..637e05fa6 --- /dev/null +++ b/src/packages/icons @@ -0,0 +1 @@ +Subproject commit 637e05fa6d2d990f8433087e97d8bbf8f3bd816a From 3b70bbba4c12af8d6736494bc0bd54ee1cb0ae5e Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 13:20:10 -0500 Subject: [PATCH 06/10] Use components from repo --- .../src/background-control/editor.scss | 69 -- .../src/background-control/index.js | 188 ----- .../src/background-size-control/editor.scss | 30 - .../src/background-size-control/index.js | 163 ---- .../src/background-type-control/editor.scss | 46 -- .../src/background-type-control/index.js | 104 --- .../components/src/block-defaults/index.js | 207 ----- .../src/border/border-control/editor.scss | 181 ---- .../src/border/border-control/index.js | 264 ------ .../border/border-control/single-control.js | 210 ----- .../border/responsive-border-control/index.js | 283 ------- .../src/box-shadow-control/editor.scss | 38 - .../src/box-shadow-control/index.js | 136 --- .../components/src/color-fields/index.js | 207 ----- .../components/src/color-icons/index.js | 53 -- .../components/src/color-picker/index.js | 127 --- .../advanced-color-control-palette/index.js | 84 -- .../color/border-color-control/editor.scss | 8 - .../src/color/border-color-control/index.js | 212 ----- .../components/src/color/css/editor.css | 7 - .../src/column-drag-resizer/constants.js | 85 -- .../src/column-drag-resizer/editor.scss | 255 ------ .../src/column-drag-resizer/index.js | 252 ------ .../src/column-drag-resizer/utils.js | 145 ---- .../src/common/image-controls/editor.scss | 19 - .../src/common/image-controls/index.js | 113 --- .../src/common/image-size-controls/index.js | 161 ---- .../src/common/media-placeholder/index.js | 443 ---------- .../src/common/radio-buttons/editor.scss | 59 -- .../src/common/radio-buttons/index.js | 77 -- .../src/common/subsection-wrap/editor.scss | 9 - .../src/common/subsection-wrap/index.js | 28 - .../src/common/vertical-align-icon/index.js | 21 - .../src/common/video-control/editor.scss | 19 - .../src/common/video-control/index.js | 102 --- .../src/copy-paste-attributes/index.js | 93 --- .../src/divider-select-control/editor.scss | 145 ---- .../src/drop-shadow-control/index.js | 108 --- .../src/dynamic-background-control/index.js | 85 -- .../src/dynamic-gallery-control/index.js | 80 -- .../src/dynamic-image-control/index.js | 85 -- .../dynamic-inline-replace-control/index.js | 19 - .../src/dynamic-text-control/index.js | 86 -- .../dynamic-text-input-control/editor.scss | 46 -- .../src/dynamic-text-input-control/index.js | 96 --- .../src/dynamic-text-popover/index.js | 68 -- src/packages/components/src/editor.scss | 102 --- .../components/src/focal-picker/editor.scss | 63 -- .../components/src/focal-picker/index.js | 78 -- .../components/src/font-size/constants.js | 41 - .../components/src/font-size/editor.scss | 79 -- .../components/src/font-size/index.js | 299 ------- .../components/src/font-size/responsive.js | 211 ----- .../components/src/form-conditionals/index.js | 26 - .../components/src/gap-controls/editor.scss | 54 -- .../components/src/gap-controls/index.js | 290 ------- .../components/src/gap-controls/responsive.js | 208 ----- .../src/gradient-control/constants.js | 66 -- .../src/gradient-control/editor.scss | 224 ----- .../gradient-bar/constants.js | 10 - .../gradient-bar/control-points.js | 773 ------------------ .../gradient-control/gradient-bar/index.js | 176 ---- .../gradient-control/gradient-bar/utils.js | 187 ----- .../components/src/gradient-control/index.js | 439 ---------- .../components/src/gradient-control/parser.js | 517 ------------ .../src/gradient-control/serializer.js | 55 -- .../components/src/gradient-control/utils.js | 109 --- .../src/heading-level-icon/index.js | 33 - .../components/src/hover-toggle/editor.scss | 65 -- .../components/src/hover-toggle/index.js | 132 --- .../components/src/icon-picker/editor.scss | 279 ------- .../components/src/icon-picker/index.js | 349 -------- .../src/icon-picker/svg-add-modal.js | 206 ----- .../src/icon-picker/svg-delete-modal.js | 59 -- .../components/src/icons/gen-icon/index.js | 66 -- .../components/src/icons/icon-render/index.js | 111 --- .../src/icons/icon-span-tag/index.js | 25 - src/packages/components/src/index.js | 111 --- .../components/src/inline-pop-color/index.js | 326 -------- .../src/inspector-control-tabs/editor.scss | 102 --- .../src/inspector-control-tabs/index.js | 128 --- .../src/inspector-controls/index.js | 26 - .../src/kadence-web-font-loader/index.js | 69 -- .../src/links/dynamic-link-control/index.js | 84 -- .../links/get-post-search-results/index.js | 55 -- .../image-url-input-link-controls/index.js | 363 -------- .../src/links/inline-link-control/editor.scss | 192 ----- .../src/links/inline-link-control/index.js | 180 ---- .../src/links/input-search/index.js | 484 ----------- .../src/links/link-control/editor.scss | 183 ----- .../src/links/link-control/index.js | 190 ----- .../src/links/text-highlight/index.js | 29 - .../measurement-range-control/constants.js | 82 -- .../src/measurement-range-control/editor.scss | 259 ------ .../src/measurement-range-control/index.js | 350 -------- .../measurement-range-control/responsive.js | 389 --------- .../single-control.js | 343 -------- .../src/measurement-range-control/utils.js | 92 --- .../measurement-control/editor.scss | 336 -------- .../measurement/measurement-control/index.js | 230 ------ .../responsive-measurement-control/index.js | 247 ------ .../measurement/single-input-control/index.js | 122 --- .../src/obfuscate-text-control/editor.scss | 20 - .../src/obfuscate-text-control/index.js | 108 --- .../components/src/opacity-control/index.js | 85 -- .../components/src/panel-body/index.js | 66 -- .../components/src/panels/color-group.js | 16 - .../components/src/panels/editor.scss | 31 - .../components/src/panels/two-column.js | 12 - .../src/pop-color-control/editor.scss | 165 ---- .../components/src/pop-color-control/index.js | 138 ---- .../src/post-select-terms-control/index.js | 94 --- .../src/range/radio-range-control/index.js | 165 ---- .../src/range/range-control/index.js | 87 -- .../editor.scss | 54 -- .../responsive-radio-range-control/index.js | 167 ---- .../range/responsive-range-control/index.js | 158 ---- .../src/range/single-range-control/index.js | 103 --- .../src/responsive-align-control/editor.scss | 27 - .../src/responsive-align-control/index.js | 465 ----------- .../src/responsive-control/editor.scss | 3 - .../src/responsive-control/index.js | 101 --- .../src/select-parent-block/editor.scss | 11 - .../src/select-parent-block/index.js | 82 -- .../src/select-posts-controls/index.js | 122 --- .../src/select-terms-control/index.js | 122 --- .../src/single-pop-color-control/index.js | 320 -------- .../src/small-responsive-control/editor.scss | 41 - .../src/small-responsive-control/index.js | 99 --- .../components/src/step-control/editor.scss | 18 - .../components/src/step-control/index.js | 72 -- .../components/src/tag-select/editor.scss | 78 -- .../components/src/tag-select/index.js | 179 ---- .../components/src/taxonomy-select/index.js | 147 ---- .../components/src/tooltip/editor.scss | 92 --- src/packages/components/src/tooltip/index.js | 104 --- .../inline-typography-control/editor.scss | 209 ----- .../inline-typography-control/index.js | 609 -------------- .../typography/text-shadow-control/index.js | 98 --- .../typography/typography-control/editor.scss | 55 -- .../typography/typography-control/index.js | 733 ----------------- src/packages/components/src/unit/editor.scss | 28 - src/packages/components/src/unit/index.js | 133 --- .../components/src/unit/responsive.js | 202 ----- .../src/visualizer/block-popover.js | 199 ----- .../components/src/visualizer/editor.scss | 23 - .../components/src/visualizer/spacing.js | 136 --- .../components/src/web-font-loader/index.js | 106 --- 148 files changed, 21703 deletions(-) delete mode 100644 src/packages/components/src/background-control/editor.scss delete mode 100644 src/packages/components/src/background-control/index.js delete mode 100644 src/packages/components/src/background-size-control/editor.scss delete mode 100644 src/packages/components/src/background-size-control/index.js delete mode 100644 src/packages/components/src/background-type-control/editor.scss delete mode 100644 src/packages/components/src/background-type-control/index.js delete mode 100644 src/packages/components/src/block-defaults/index.js delete mode 100644 src/packages/components/src/border/border-control/editor.scss delete mode 100644 src/packages/components/src/border/border-control/index.js delete mode 100644 src/packages/components/src/border/border-control/single-control.js delete mode 100644 src/packages/components/src/border/responsive-border-control/index.js delete mode 100644 src/packages/components/src/box-shadow-control/editor.scss delete mode 100644 src/packages/components/src/box-shadow-control/index.js delete mode 100644 src/packages/components/src/color-fields/index.js delete mode 100644 src/packages/components/src/color-icons/index.js delete mode 100644 src/packages/components/src/color-picker/index.js delete mode 100644 src/packages/components/src/color/advanced-color-control-palette/index.js delete mode 100644 src/packages/components/src/color/border-color-control/editor.scss delete mode 100644 src/packages/components/src/color/border-color-control/index.js delete mode 100644 src/packages/components/src/color/css/editor.css delete mode 100644 src/packages/components/src/column-drag-resizer/constants.js delete mode 100644 src/packages/components/src/column-drag-resizer/editor.scss delete mode 100644 src/packages/components/src/column-drag-resizer/index.js delete mode 100644 src/packages/components/src/column-drag-resizer/utils.js delete mode 100644 src/packages/components/src/common/image-controls/editor.scss delete mode 100644 src/packages/components/src/common/image-controls/index.js delete mode 100644 src/packages/components/src/common/image-size-controls/index.js delete mode 100644 src/packages/components/src/common/media-placeholder/index.js delete mode 100644 src/packages/components/src/common/radio-buttons/editor.scss delete mode 100644 src/packages/components/src/common/radio-buttons/index.js delete mode 100644 src/packages/components/src/common/subsection-wrap/editor.scss delete mode 100644 src/packages/components/src/common/subsection-wrap/index.js delete mode 100644 src/packages/components/src/common/vertical-align-icon/index.js delete mode 100644 src/packages/components/src/common/video-control/editor.scss delete mode 100644 src/packages/components/src/common/video-control/index.js delete mode 100644 src/packages/components/src/copy-paste-attributes/index.js delete mode 100644 src/packages/components/src/divider-select-control/editor.scss delete mode 100644 src/packages/components/src/drop-shadow-control/index.js delete mode 100644 src/packages/components/src/dynamic-background-control/index.js delete mode 100644 src/packages/components/src/dynamic-gallery-control/index.js delete mode 100644 src/packages/components/src/dynamic-image-control/index.js delete mode 100644 src/packages/components/src/dynamic-inline-replace-control/index.js delete mode 100644 src/packages/components/src/dynamic-text-control/index.js delete mode 100644 src/packages/components/src/dynamic-text-input-control/editor.scss delete mode 100644 src/packages/components/src/dynamic-text-input-control/index.js delete mode 100644 src/packages/components/src/dynamic-text-popover/index.js delete mode 100644 src/packages/components/src/editor.scss delete mode 100644 src/packages/components/src/focal-picker/editor.scss delete mode 100644 src/packages/components/src/focal-picker/index.js delete mode 100644 src/packages/components/src/font-size/constants.js delete mode 100644 src/packages/components/src/font-size/editor.scss delete mode 100644 src/packages/components/src/font-size/index.js delete mode 100644 src/packages/components/src/font-size/responsive.js delete mode 100644 src/packages/components/src/form-conditionals/index.js delete mode 100644 src/packages/components/src/gap-controls/editor.scss delete mode 100644 src/packages/components/src/gap-controls/index.js delete mode 100644 src/packages/components/src/gap-controls/responsive.js delete mode 100644 src/packages/components/src/gradient-control/constants.js delete mode 100644 src/packages/components/src/gradient-control/editor.scss delete mode 100644 src/packages/components/src/gradient-control/gradient-bar/constants.js delete mode 100644 src/packages/components/src/gradient-control/gradient-bar/control-points.js delete mode 100644 src/packages/components/src/gradient-control/gradient-bar/index.js delete mode 100644 src/packages/components/src/gradient-control/gradient-bar/utils.js delete mode 100644 src/packages/components/src/gradient-control/index.js delete mode 100644 src/packages/components/src/gradient-control/parser.js delete mode 100644 src/packages/components/src/gradient-control/serializer.js delete mode 100644 src/packages/components/src/gradient-control/utils.js delete mode 100644 src/packages/components/src/heading-level-icon/index.js delete mode 100644 src/packages/components/src/hover-toggle/editor.scss delete mode 100644 src/packages/components/src/hover-toggle/index.js delete mode 100644 src/packages/components/src/icon-picker/editor.scss delete mode 100644 src/packages/components/src/icon-picker/index.js delete mode 100644 src/packages/components/src/icon-picker/svg-add-modal.js delete mode 100644 src/packages/components/src/icon-picker/svg-delete-modal.js delete mode 100644 src/packages/components/src/icons/gen-icon/index.js delete mode 100644 src/packages/components/src/icons/icon-render/index.js delete mode 100644 src/packages/components/src/icons/icon-span-tag/index.js delete mode 100644 src/packages/components/src/index.js delete mode 100644 src/packages/components/src/inline-pop-color/index.js delete mode 100644 src/packages/components/src/inspector-control-tabs/editor.scss delete mode 100644 src/packages/components/src/inspector-control-tabs/index.js delete mode 100644 src/packages/components/src/inspector-controls/index.js delete mode 100644 src/packages/components/src/kadence-web-font-loader/index.js delete mode 100644 src/packages/components/src/links/dynamic-link-control/index.js delete mode 100644 src/packages/components/src/links/get-post-search-results/index.js delete mode 100644 src/packages/components/src/links/image-url-input-link-controls/index.js delete mode 100644 src/packages/components/src/links/inline-link-control/editor.scss delete mode 100644 src/packages/components/src/links/inline-link-control/index.js delete mode 100644 src/packages/components/src/links/input-search/index.js delete mode 100644 src/packages/components/src/links/link-control/editor.scss delete mode 100644 src/packages/components/src/links/link-control/index.js delete mode 100644 src/packages/components/src/links/text-highlight/index.js delete mode 100644 src/packages/components/src/measurement-range-control/constants.js delete mode 100644 src/packages/components/src/measurement-range-control/editor.scss delete mode 100644 src/packages/components/src/measurement-range-control/index.js delete mode 100644 src/packages/components/src/measurement-range-control/responsive.js delete mode 100644 src/packages/components/src/measurement-range-control/single-control.js delete mode 100644 src/packages/components/src/measurement-range-control/utils.js delete mode 100644 src/packages/components/src/measurement/measurement-control/editor.scss delete mode 100644 src/packages/components/src/measurement/measurement-control/index.js delete mode 100644 src/packages/components/src/measurement/responsive-measurement-control/index.js delete mode 100644 src/packages/components/src/measurement/single-input-control/index.js delete mode 100644 src/packages/components/src/obfuscate-text-control/editor.scss delete mode 100644 src/packages/components/src/obfuscate-text-control/index.js delete mode 100644 src/packages/components/src/opacity-control/index.js delete mode 100644 src/packages/components/src/panel-body/index.js delete mode 100644 src/packages/components/src/panels/color-group.js delete mode 100644 src/packages/components/src/panels/editor.scss delete mode 100644 src/packages/components/src/panels/two-column.js delete mode 100644 src/packages/components/src/pop-color-control/editor.scss delete mode 100644 src/packages/components/src/pop-color-control/index.js delete mode 100644 src/packages/components/src/post-select-terms-control/index.js delete mode 100644 src/packages/components/src/range/radio-range-control/index.js delete mode 100644 src/packages/components/src/range/range-control/index.js delete mode 100644 src/packages/components/src/range/responsive-radio-range-control/editor.scss delete mode 100644 src/packages/components/src/range/responsive-radio-range-control/index.js delete mode 100644 src/packages/components/src/range/responsive-range-control/index.js delete mode 100644 src/packages/components/src/range/single-range-control/index.js delete mode 100644 src/packages/components/src/responsive-align-control/editor.scss delete mode 100644 src/packages/components/src/responsive-align-control/index.js delete mode 100644 src/packages/components/src/responsive-control/editor.scss delete mode 100644 src/packages/components/src/responsive-control/index.js delete mode 100644 src/packages/components/src/select-parent-block/editor.scss delete mode 100644 src/packages/components/src/select-parent-block/index.js delete mode 100644 src/packages/components/src/select-posts-controls/index.js delete mode 100644 src/packages/components/src/select-terms-control/index.js delete mode 100644 src/packages/components/src/single-pop-color-control/index.js delete mode 100644 src/packages/components/src/small-responsive-control/editor.scss delete mode 100644 src/packages/components/src/small-responsive-control/index.js delete mode 100644 src/packages/components/src/step-control/editor.scss delete mode 100644 src/packages/components/src/step-control/index.js delete mode 100644 src/packages/components/src/tag-select/editor.scss delete mode 100644 src/packages/components/src/tag-select/index.js delete mode 100644 src/packages/components/src/taxonomy-select/index.js delete mode 100644 src/packages/components/src/tooltip/editor.scss delete mode 100644 src/packages/components/src/tooltip/index.js delete mode 100644 src/packages/components/src/typography/inline-typography-control/editor.scss delete mode 100644 src/packages/components/src/typography/inline-typography-control/index.js delete mode 100644 src/packages/components/src/typography/text-shadow-control/index.js delete mode 100644 src/packages/components/src/typography/typography-control/editor.scss delete mode 100644 src/packages/components/src/typography/typography-control/index.js delete mode 100644 src/packages/components/src/unit/editor.scss delete mode 100644 src/packages/components/src/unit/index.js delete mode 100644 src/packages/components/src/unit/responsive.js delete mode 100644 src/packages/components/src/visualizer/block-popover.js delete mode 100644 src/packages/components/src/visualizer/editor.scss delete mode 100644 src/packages/components/src/visualizer/spacing.js delete mode 100644 src/packages/components/src/web-font-loader/index.js diff --git a/src/packages/components/src/background-control/editor.scss b/src/packages/components/src/background-control/editor.scss deleted file mode 100644 index 9205bc041..000000000 --- a/src/packages/components/src/background-control/editor.scss +++ /dev/null @@ -1,69 +0,0 @@ -.kadence-image-background-control{ - .kadence-image-upload { - margin: 0; - min-height: 0; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 2px; - box-shadow: none; - .components-placeholder__fieldset { - flex-direction: row; - flex-wrap: wrap; - } - .components-button.is-primary { - height: 100px; - width: 100%; - justify-content: center; - background: rgba(0,0,0,.04); - color: var(--wp-admin-theme-color); - &:hover:not(:disabled) { - background: var(--wp-admin-theme-color-darker-10); - color: #fff; - } - } - } - .kb-dynamic-background-sidebar-wrap { - display: inline-block; - } - > .kb-dynamic-background-sidebar-wrap .kb-dynamic-background-sidebar.has-icon, > .kb-dynamic-background-sidebar-top .kb-dynamic-background-sidebar.has-icon { - border: 1px solid var(--kb-border-color, #859CB6 ); - margin-bottom: 10px; - margin-left: 5px; - color: #1e1e1e; - border-radius: 4px; - &.is-pressed { - color:white; - } - svg { - max-width: 14px; - } - } - > .kb-dynamic-background-sidebar-top .kb-dynamic-background-sidebar.has-icon { - margin-left: 0; - } - .components-kadence-image-background__label { - margin-bottom: 6px; - } - .block-editor-media-placeholder__dynamic-input-container { - margin-left: auto; - margin-right: 0; - } -} -.kadence-image-background-control .block-editor-media-placeholder__dynamic-input-container .kb-dynamic-background-sidebar { - margin-bottom: 0; -} -.kadence-image-background-control .block-editor-media-placeholder__dynamic-input-container .kb-dynamic-background-sidebar svg { - max-width: 16px; -} -.kadence-image-background-control .kadence-image-upload .components-placeholder__label:empty { - padding: 0; - margin: 0; -} -.block-editor-media-placeholder__dynamic-input-container { - margin-left: 12px; -} -.block-editor-media-placeholder__dynamic-input-container svg { - max-width: 14px; -} -.kadence-image-upload { - margin-bottom: 24px; -} \ No newline at end of file diff --git a/src/packages/components/src/background-control/index.js b/src/packages/components/src/background-control/index.js deleted file mode 100644 index e6ecc3164..000000000 --- a/src/packages/components/src/background-control/index.js +++ /dev/null @@ -1,188 +0,0 @@ -/** - * Basic Background Control. - */ - -/** - * Import Css - */ -import './editor.scss'; -/** - * Import Kadence Components - */ -import DynamicBackgroundControl from '../dynamic-background-control'; -import ImageSizeControl from '../common/image-size-controls'; -import KadenceMediaPlaceholder from '../common/media-placeholder'; -import KadenceRadioButtons from '../common/radio-buttons'; -import KadenceFocalPicker from '../focal-picker'; -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; -import { MediaUpload } from '@wordpress/block-editor'; -import { Button, ToggleControl } from '@wordpress/components'; -import { - image, - closeSmall, - plusCircleFilled, -} from '@wordpress/icons'; -import BackgroundSizeControl from '../background-size-control'; -const ALLOWED_MEDIA_TYPES = [ 'image' ]; -/** - * Basic Background Control. - */ -const BackgroundControl = ( props ) => { - const { - label, - hasImage, - onSaveImage, - onRemoveImage, - onSaveURL, - onSavePosition, - onSaveSize, - onSaveRepeat, - onSaveAttachment, - disableMediaButtons, - imageURL, - imageID, - imagePosition, - imageSize, - imageRepeat, - imageAttachment, - imageAttachmentParallax = false, - imageAttachmentFixed = true, - inlineImage, - onSaveInlineImage, - dynamicAttribute = '', - attributes - } = props; - - let attachmentOptions = [ - { value: 'scroll', label: __( 'Scroll', 'kadence-blocks' ) } - ]; - if ( imageAttachmentFixed ) { - attachmentOptions.push({ value: 'fixed', label: __( 'Fixed', 'kadence-blocks' ) }); - } - if ( imageAttachmentParallax ) { - attachmentOptions.push({ value: 'parallax', label: __( 'Parallax', 'kadence-blocks' ) }); - } - return ( -
- { ! hasImage && ( - - { label && ( -
{ label }
- ) } - onSaveImage( img ) } - onSelectURL={ ( newURL ) => onSaveURL( newURL) } - accept="image/*" - className={ 'kadence-image-upload' } - allowedTypes={ ALLOWED_MEDIA_TYPES } - disableMediaButtons={ disableMediaButtons } - dynamicControl={ ( dynamicAttribute && kadence_blocks_params.dynamic_enabled ? : undefined ) } - /> - - ) } - { hasImage && ( - - { label && ( -
{ label }
- ) } - { dynamicAttribute && kadence_blocks_params.dynamic_enabled && attributes.kadenceDynamic && attributes.kadenceDynamic[ dynamicAttribute ] && attributes.kadenceDynamic[ dynamicAttribute ].enable ? ( -
- -
- ) : ( - - onSaveImage( img ) } - type="image" - value={ ( imageID ? imageID : '' ) } - render={ ( { open } ) => ( - - ) } - /> -
- ); -} - -export default BackgroundControl; diff --git a/src/packages/components/src/background-size-control/editor.scss b/src/packages/components/src/background-size-control/editor.scss deleted file mode 100644 index 431932e85..000000000 --- a/src/packages/components/src/background-size-control/editor.scss +++ /dev/null @@ -1,30 +0,0 @@ -.kadence-background-size-control .kadence-controls-content .kadence-radio-container-control { - width: 100%; -} -.kadence-small-radio-container { - max-width: 40px; -} -.kadence-background-size-control { - .kadence-radio-container-control .components-button.radio-custom.only-icon svg { - width: 20px; - margin: 0; - } - .kadence-radio-control-label { - display: block; - margin-bottom: 6px; - } - .kadence-controls-content { - gap: 12px; - align-items: end; - .components-unit-control-wrapper { - flex-grow: 1; - margin: 0; - .components-input-control__label { - font-size: 11px; - font-weight: 500; - text-transform: uppercase; - margin: 0 0 3px; - } - } - } -} \ No newline at end of file diff --git a/src/packages/components/src/background-size-control/index.js b/src/packages/components/src/background-size-control/index.js deleted file mode 100644 index 583d50f3b..000000000 --- a/src/packages/components/src/background-size-control/index.js +++ /dev/null @@ -1,163 +0,0 @@ -/** - * Basic Background Control. - */ - -/** - * Import External - */ -import { get, map } from 'lodash'; -import classnames from 'classnames'; -/** - * WordPress dependencies - */ - import { useInstanceId } from '@wordpress/compose'; - import { useState, useEffect } from '@wordpress/element'; -/** - * Import Css - */ -import './editor.scss'; -/** - * Import Kadence Icons - */ - import { settings } from '@wordpress/icons'; -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button, ButtonGroup, Icon, __experimentalUnitControl as UnitControl } from '@wordpress/components'; -function isCustomOption( optionsArray, value ) { - if ( ! value ) { - return false; - } - if ( ! optionsArray ) { - return false; - } - return ( - ! optionsArray.find( ( option ) => option.value === value ) - ); -} - -/** - * Tabs for Background Control. - */ - export default function BackgroundSizeControl( { - label, - value, - onChange, - options = [ - { value: 'cover', label: __( 'Cover', 'kadence-blocks' ) }, - { value: 'contain', label: __( 'Contain', 'kadence-blocks' ) }, - { value: 'auto', label: __( 'Auto', 'kadence-blocks' ) }, - ], - allowCustom = true, -} ) { - const instanceId = useInstanceId( BackgroundSizeControl ); - const id = `inspector-background-size-control-${ instanceId }`; - const [ isCustom, setIsCustom ] = useState( false ); - useEffect( () => { - setIsCustom( isCustomOption( options, value ) ); - }, [] ); - let width = 'auto'; - let height = 'auto'; - const sizeArray = value.split( ' ' ); - if ( undefined !== sizeArray[0] ) { - width = ( undefined !== sizeArray[0] && sizeArray[0] ? sizeArray[0] : 'auto' ); - height = ( undefined !== sizeArray[1] && sizeArray[1] ? sizeArray[1] : 'auto' ); - } - const onWidthChange = ( newWidth ) => { - const sizeArray = value.split( ' ' ); - let newHeight = 'auto'; - if ( undefined !== sizeArray[0] ) { - newHeight = ( undefined !== sizeArray[1] && sizeArray[1] ? sizeArray[1] : 'auto' ); - } - onChange( newWidth + ' ' + newHeight ); - } - const onHeightChange = ( newHeight ) => { - const sizeArray = value.split( ' ' ); - let newWidth = 'auto'; - if ( undefined !== sizeArray[0] ) { - newWidth = ( undefined !== sizeArray[0] && sizeArray[0] ? sizeArray[0] : 'auto' ); - } - onChange( newWidth + ' ' + newHeight ); - } - return ( -
- { label && ( - - ) } - { ! isCustom && ( -
- - { options.map( ( option, index ) => - - )} - { allowCustom && ( -
- ) } - { isCustom && ( -
- - - { allowCustom && ( - -
- ) } -
- ) -} diff --git a/src/packages/components/src/background-type-control/editor.scss b/src/packages/components/src/background-type-control/editor.scss deleted file mode 100644 index b857f0ad8..000000000 --- a/src/packages/components/src/background-type-control/editor.scss +++ /dev/null @@ -1,46 +0,0 @@ -.kadence-background-type-container{ - display:flex; - align-items: center; - .components-background-type-control__label { - flex: 1; - } - .kadence-background-type-radio-container { - display: flex; - .components-button { - height: 32px; - flex: 1 1 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - font-weight: 600; - font-style: normal; - text-transform: uppercase; - line-height: 1.2; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 2px; - background: transparent; - color: #4A5568; - padding: 4px; - box-shadow: none; - white-space: normal; - } - .components-button.is-primary { - border-color: var(--wp-admin-theme-color, #00669b); - background: var(--wp-admin-theme-color, #00669b); - color: #fff; - box-shadow: none; - } - .components-button:not(:first-child) { - margin-left: 4px; - } - } -} -.kadence-background-type-control .kadence-background-type-container .kadence-background-type-radio-container { - margin-bottom: 0; -} - -.kadence-background-type-radio-container .components-button svg { - width: 1em; - height: 1em; -} diff --git a/src/packages/components/src/background-type-control/index.js b/src/packages/components/src/background-type-control/index.js deleted file mode 100644 index 26ef089da..000000000 --- a/src/packages/components/src/background-type-control/index.js +++ /dev/null @@ -1,104 +0,0 @@ -/** - * Basic Background Control. - */ - -/** - * Import External - */ -import { get, map } from 'lodash'; -import classnames from 'classnames'; -/** - * WordPress dependencies - */ - import { useInstanceId } from '@wordpress/compose'; -/** - * Import Css - */ -import './editor.scss'; -/** - * Import Kadence Icons - */ -import { - slider, - brush, - video, - gradient, -} from '@kadence/icons'; -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button, ButtonGroup, Icon } from '@wordpress/components'; - -/** - * Tabs for Background Control. - */ - export default function BackgroundTypeControl( { - label, - type, - onChange, - allowedTypes = null, - types = null, -} ) { - const defaultTabs = [ - { - key : 'normal', - title: __( 'Classic', 'kadence-blocks' ), - icon : brush, - }, - { - key : 'gradient', - title: __( 'Gradient', 'kadence-blocks' ), - icon : gradient, - }, - { - key : 'slider', - title: __( 'Slider', 'kadence-blocks' ), - icon : slider, - }, - { - key : 'video', - title: __( 'Video', 'kadence-blocks' ), - icon : video, - }, - ]; - const typeKeys = [ 'normal', 'gradient', 'slider', 'video' ]; - const allowedTypeKeys = allowedTypes ? allowedTypes : typeKeys; - const typesMap = types ? types : defaultTabs; - const instanceId = useInstanceId( BackgroundTypeControl ); - const id = `inspector-background-type-control-${ instanceId }`; - return ( -
-
- { label && ( - - ) } - - { typesMap.map( ( { - key, title, icon, - }, i ) => { - if ( allowedTypeKeys.includes( key ) ) { - return ( -
-
- ) -} diff --git a/src/packages/components/src/block-defaults/index.js b/src/packages/components/src/block-defaults/index.js deleted file mode 100644 index b2a03ec20..000000000 --- a/src/packages/components/src/block-defaults/index.js +++ /dev/null @@ -1,207 +0,0 @@ -import {useEffect, useState} from '@wordpress/element'; -import {useSelect} from '@wordpress/data'; -import KadencePanelBody from '../panel-body/index.js'; -import {__} from "@wordpress/i18n"; -import {omit, head, get, isEqual} from 'lodash'; -import {useDispatch} from '@wordpress/data'; -import {store as noticesStore} from '@wordpress/notices'; -import { - Button, - Modal, - __experimentalConfirmDialog as ConfirmDialog -} from '@wordpress/components'; -import apiFetch from '@wordpress/api-fetch'; -import { - SafeParseJSON, - getTransferableAttributes -} from '@kadence/helpers' -/** - * Display Kadence Block Default settings -- intended for use in Inspector Controls. - * - * @param {object} attributes Block attributes. - * @param {object} defaultAttributes The blocks default attributs for comparison on what is new. - * @param {string} blockSlug Block slug. - * @param {object} attributeNamePair Key value pair of attribute name and attribute label. - * @param {array} excludedAttrs Keys to exclude from saved block defaults. An array of strings. - * @param {array} preventMultiple Keys that should not have more than one subitem. An array of strings. - * - * @public - */ -export default function KadenceBlockDefaults( { - attributes, - defaultAttributes = {}, - blockSlug, - excludedAttrs = [], - preventMultiple = [] -} ) { - - const [ user, setUser ] = useState( ( kadence_blocks_params.userrole ? kadence_blocks_params.userrole : 'admin' ) ); - if( user !== 'admin' ) { - return null; - } - - const {createErrorNotice, createSuccessNotice} = useDispatch(noticesStore); - - const [isOpenResetConfirm, setIsOpenResetConfirm] = useState(false); - const [isOpenSaveConfirm, setIsOpenSaveConfirm] = useState(false); - const [isOpenModify, setIsOpenModify] = useState(false); - - const currentDefaults = SafeParseJSON(get(kadence_blocks_params, ['configuration'], {}), true ); - const currentBlockDefaults = get(currentDefaults, blockSlug, {}); - - const [tmpDefaults, setTmpDefaults] = useState(currentBlockDefaults); - const hasConfig = Object.keys(currentBlockDefaults).length !== 0; - - const calculate = () => { - //grab all block attributes, minus the exclusions - return getTransferableAttributes( attributes, defaultAttributes, excludedAttrs, preventMultiple ); - } - - const reset = () => { - let config = (kadence_blocks_params.configuration ? SafeParseJSON(kadence_blocks_params.configuration, true) : {}); - config = omit(config, blockSlug); - - apiFetch( { - path: '/wp/v2/settings', - method: 'POST', - data: { kadence_blocks_config_blocks: JSON.stringify(config)}, - } ).then( () => { - createSuccessNotice(__('Block default saved', 'kadence-blocks'), { - type: 'snackbar', - }) - setIsOpenResetConfirm(false); - kadence_blocks_params.configuration = JSON.stringify(config); - setTmpDefaults({}); - }); - - } - - const saveAll = () => { - - const newConfig = calculate(); - - const config = (kadence_blocks_params.configuration ? SafeParseJSON(kadence_blocks_params.configuration, true) : {}); - config[blockSlug] = newConfig; - apiFetch( { - path: '/wp/v2/settings', - method: 'POST', - data: { kadence_blocks_config_blocks: JSON.stringify(config)}, - } ).then( () => { - createSuccessNotice(__('Block default saved', 'kadence-blocks'), { - type: 'snackbar', - }) - setIsOpenSaveConfirm(false); - kadence_blocks_params.configuration = JSON.stringify(config); - setTmpDefaults(newConfig); - }); - } - - const saveModified = () => { - - const config = (kadence_blocks_params.configuration ? SafeParseJSON(kadence_blocks_params.configuration, true) : {}); - config[blockSlug] = tmpDefaults; - apiFetch( { - path: '/wp/v2/settings', - method: 'POST', - data: { kadence_blocks_config_blocks: JSON.stringify(config)}, - } ).then( () => { - createSuccessNotice(__('Block default saved', 'kadence-blocks'), { - type: 'snackbar', - }) - kadence_blocks_params.configuration = JSON.stringify(config); - }); - } - - return ( - <> - - {__('This will set the current block attributes as the default styles for this block type.', 'kadence-blocks')}  - {__('This will not modify any blocks that have already been created.', 'kadence-blocks')}  - {__('Block content is not included.', 'kadence-blocks')}  - -

- - - - {hasConfig && ( - <> -

- - setIsOpenModify(true)}>{__('Modify attributes', 'kadence-blocks')} - - setIsOpenResetConfirm(true)}>{__('Reset defaults', 'kadence-blocks')} - - )} - - - - reset()} - onCancel={() => setIsOpenResetConfirm(false)} - > - {__('Are you sure you\'d like to reset this blocks default attributes?', 'kadence-blocks')} - - - saveAll()} - onCancel={() => setIsOpenSaveConfirm(false)} - > - {__('Are you sure you\'d like to save this as the blocks default attributes?', 'kadence-blocks')} - - - {isOpenModify ? - { - setTmpDefaults(currentBlockDefaults); - setIsOpenModify(false); - }}> - - { - Object.keys(tmpDefaults).map((key, i) => { - - return ( - <> -
- - {key} -
- - ) - }) - } - -
- - - -
- - : null} - - ); -} \ No newline at end of file diff --git a/src/packages/components/src/border/border-control/editor.scss b/src/packages/components/src/border/border-control/editor.scss deleted file mode 100644 index 8f211c142..000000000 --- a/src/packages/components/src/border/border-control/editor.scss +++ /dev/null @@ -1,181 +0,0 @@ - -.kadence-border-control__header { - display: flex; - justify-content: space-between; - margin-bottom: 8px; - color: #1e1e1e; - font-size: 13px; - font-weight: 500; - gap: 2px; - align-items: center; - .components-button.border-control-toggle.has-icon { - background: transparent; - height: auto; - border: 0; - box-shadow: none; - padding: 2px 4px; - margin-bottom: 0; - outline: 0; - color: #A0AEC0; - width: auto; - font-size: 18px; - min-width: 0; - svg { - width:1em; - height: 1em; - } - &.is-pressed { - background: var(--wp-admin-theme-color, #00669b); - color: white; - } - } -} -.kadence-border-control > .kadence-controls-content { - display: block; - position: relative; -} -.kadence-single-border-control-wrap { - display: flex; - align-items: center; - border-radius: 2px; - border: 1px solid var(--kb-border-color, #859CB6 ); - background: white; -} -.kadence-border-control .kadence-single-border-control-wrap .components-base-control { - margin-bottom: 0; -} -.kadence-border-control .kadence-single-border-control-wrap > .kadence-single-unit-control .components-unit-control-wrapper { - width: 100%; -} -.kadence-border-control .kadence-single-border-control-wrap > .kadence-single-unit-control { - flex-grow: 1; -} -.kadence-border-control .kadence-single-border-control-wrap { - .kadence-pop-color-control { - padding: 0 2px; - .kadence-pop-color-icon-indicate .kadence-pop-color-indicate { - width: 24px; - height: 24px; - } - } -} - -.kadence-border-control .kadence-single-border-control-wrap .kadence-measure-control-select.components-unit-control__select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - border-radius: 0px 2px 2px 0px; - display: block; - outline: none; - margin: 0px; - min-height: auto; - font-family: inherit; - box-sizing: border-box; - padding: 2px 1px; - width: 20px; - color: rgb(47, 47, 47); - font-size: 10px; - line-height: 1; - letter-spacing: -0.5px; - text-transform: uppercase; - -moz-text-align-last: center; - text-align-last: center; - height: 100%; - border: 0; - transition: box-shadow 0.1s linear 0s, border 0.1s linear 0s; - cursor: pointer; - &:hover { - background-color: #F8F9FB; - } -} - -.kadence-border-control .kadence-single-border-control-wrap .components-dropdown-menu__toggle { - min-width: auto; - height: 30px; - border-radius: 0px; - display: block; - outline: none; - margin: 0px; - min-height: auto; - box-sizing: border-box; - padding: 2px 2px; - color: rgb(47, 47, 47); - font-size: 10px; - line-height: 1; - border: 0; - border-right: 1px solid var(--kb-border-color, #859CB6 ); - border-left: 1px solid var(--kb-border-color, #859CB6 ); - transition: box-shadow 0.1s linear 0s, border 0.1s linear 0s; - cursor: pointer; -} - -.kadence-border-control .kadence-single-border-control-wrap .border-control-style-select { - display: block; -} -.kadence-border-control .components-base-control.kadence-single-border-control { - margin-bottom: 0; -} - -.kadence-border-control .kadence-single-border-control-wrap .components-dropdown-menu__toggle svg { - width:12px -} -.border-control-style-select__popover .components-menu-item__button .components-menu-item__item { - display:none; -} -.border-control-style-select__popover .components-menu-item__button .components-menu-items__item-icon.has-icon-right { - margin:0; - display:block; -} -.kadence-border-control .kadence-single-border-control-wrap .kadence-single-unit-control { - border: 0; - border-radius: 0px; - .components-input-control__backdrop { - display: none; - } - input::-webkit-outer-spin-button, - input::-webkit-inner-spin-button { - /* display: none; <- Crashes Chrome on hover */ - -webkit-appearance: none; - margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ - } - - input[type=number] { - -moz-appearance:textfield; /* Firefox */ - } -} -.kadence-border-controls-grid-wrap { - display: grid; - gap: calc(16px); - grid-template-columns: repeat(2, 1fr); - position: relative; -} -.kadence-border-controls-grid-wrap .kadence-single-border-control:nth-child(2) { - border: 0px; - padding: 0px; - box-sizing: border-box; - grid-column: span 2 / auto; - margin: 0px auto; -} -.kadence-border-controls-grid-wrap .kadence-single-border-control:nth-child(4) { - margin: 0 0 0 auto; -} -.kadence-border-controls-grid-wrap .kadence-single-border-control:nth-child(5) { - grid-column: span 2 / auto; - margin: 0px auto; -} -.kadence-border-control-grid-visualizer { - position: absolute; - inset: 15px 15px; - border-width: 0px; - border-style: solid; - border-color: transparent; -} -.kadence-border-controls-grid-wrap .kadence-single-border-control { - position: relative; -} -.kadence-single-border-control-wrap span.color-indicator-icon .dashicons-admin-site { - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} diff --git a/src/packages/components/src/border/border-control/index.js b/src/packages/components/src/border/border-control/index.js deleted file mode 100644 index c71528345..000000000 --- a/src/packages/components/src/border/border-control/index.js +++ /dev/null @@ -1,264 +0,0 @@ -/** - * Border control Component - * - */ - -/** - * Internal block libraries - */ -import { useState, useRef } from '@wordpress/element'; -import { map, isEqual } from 'lodash'; -import { __ } from '@wordpress/i18n'; -import { UnitControl, DropdownMenu, Flex, FlexItem, Button } from '@wordpress/components'; -import { KadenceColorOutput } from '@kadence/helpers' -/** -* WordPress dependencies -*/ -import { useInstanceId } from '@wordpress/compose'; -/** -* Import Css -*/ -import './editor.scss'; -import { - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, - individualIcon, - linkedIcon, - topLeftIcon, - topRightIcon, - bottomRightIcon, - bottomLeftIcon, - radiusLinkedIcon, - radiusIndividualIcon -} from '@kadence/icons'; -import { settings, link, linkOff } from '@wordpress/icons'; -import SingleBorderControl from './single-control'; -/** -* Build the Border controls -* @returns {object} Border Control. -*/ -export default function BorderControl( { - label, - onChange, - onControl, - value = '', - className = '', - help = '', - defaultValue = { - top: { - color: '', - style: 'solid', - width: '', - }, - right: { - color: '', - style: 'solid', - width: '', - }, - bottom: { - color: '', - style: 'solid', - width: '', - }, - left: { - color: '', - style: 'solid', - width: '', - }, - unit: '', - }, - control = 'individual', - units = [ 'px', 'em', 'rem' ], - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = link, - unlinkIcon = linkOff, - styles = ['solid', 'dashed', 'dotted', 'double'], - reset, -} ) { - const instanceId = useInstanceId( BorderControl ); - const [ theControl, setTheControl ] = useState( control ); - const realControl = onControl ? control : theControl; - const realSetOnControl = onControl ? onControl : setTheControl; - const measureIcons = { - first: firstIcon, - second: secondIcon, - third: thirdIcon, - fourth: fourthIcon, - link: linkIcon, - unlink: unlinkIcon, - } - const containerRef = useRef(); - const currentObject = value?.[0] || defaultValue; - const step = currentObject.unit !== 'px' ? 0.1 : 1; - const max = currentObject.unit !== 'px' && currentObject.unit !== '' ? 12 : 200; - const min = 0; - const onChangeAll = ( newBorder ) => { - currentObject.top = newBorder; - currentObject.bottom = newBorder; - currentObject.right = newBorder; - currentObject.left = newBorder; - const newVal = JSON.parse(JSON.stringify(currentObject)); - onChange( [ newVal ] ); - } - const onChangeSide = ( newBorder, side ) => { - currentObject[side] = newBorder; - const newVal = JSON.parse(JSON.stringify(currentObject)); - onChange( [ newVal ] ); - } - const onChangeUnit = ( newUnit ) => { - currentObject.unit = newUnit; - const newVal = JSON.parse(JSON.stringify(currentObject)); - onChange( [ newVal ] ); - } - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - onChange( [ defaultValue ] ); - } - } - return [ - onChange && ( -
- { label && ( -
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - { realSetOnControl && ( -
- ) } -
- { realControl !== 'individual' && ( - <> - onChangeAll( newVal ) } - min={ min } - max={ max } - step={ step } - help={ help } - styles={ styles } - unit={ currentObject?.unit || 'px' } - units={ units } - onUnit={ ( unit ) => onChangeUnit( unit ) } - defaultValue={ defaultValue.top } - allowReset={ false } - /> - - ) } - { realControl === 'individual' && ( -
-
- onChangeSide( newVal, 'top' ) } - min={ min } - max={ max } - step={ step } - help={ help } - styles={ styles } - unit={ currentObject?.unit || 'px' } - units={ units } - onUnit={ ( unit ) => onChangeUnit( unit ) } - defaultValue={ defaultValue.top } - allowReset={ false } - /> - onChangeSide( newVal, 'left' ) } - min={ min } - max={ max } - step={ step } - help={ help } - styles={ styles } - unit={ currentObject?.unit || 'px' } - units={ units } - onUnit={ ( unit ) => onChangeUnit( unit ) } - defaultValue={ defaultValue.left } - allowReset={ false } - /> - onChangeSide( newVal, 'right' ) } - min={ min } - max={ max } - step={ step } - help={ help } - styles={ styles } - unit={ currentObject?.unit || 'px' } - units={ units } - onUnit={ ( unit ) => onChangeUnit( unit ) } - defaultValue={ defaultValue.right } - allowReset={ false } - /> - onChangeSide( newVal, 'bottom' ) } - min={ min } - max={ max } - step={ step } - help={ help } - styles={ styles } - unit={ currentObject?.unit || 'px' } - units={ units } - onUnit={ ( unit ) => onChangeUnit( unit ) } - defaultValue={ defaultValue.bottom } - allowReset={ false } - /> -
- ) } -
-
- ), - ]; -} diff --git a/src/packages/components/src/border/border-control/single-control.js b/src/packages/components/src/border/border-control/single-control.js deleted file mode 100644 index e46b8763c..000000000 --- a/src/packages/components/src/border/border-control/single-control.js +++ /dev/null @@ -1,210 +0,0 @@ -/** - * Single Border Component - * - */ -import { - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, - individualIcon, - linkedIcon, - topLeftIcon, - topRightIcon, - bottomRightIcon, - bottomLeftIcon, - radiusLinkedIcon, - radiusIndividualIcon -} from '@kadence/icons'; -import { settings, link, linkOff } from '@wordpress/icons'; -import { flow } from 'lodash'; -/** - * WordPress dependencies - */ -import { useInstanceId } from '@wordpress/compose'; -/** - * Import Externals - */ -import PopColorControl from '../../pop-color-control'; -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { __experimentalUnitControl as UnitControl, DropdownMenu, Flex, FlexItem, MenuGroup, MenuItem } from '@wordpress/components'; -/** - * Build the Border controls - * @returns {object} Border Control. - */ - export default function SingleBorderControl( { - label, - onChange, - value = '', - className = '', - step = 1, - max = 200, - min = 0, - unit = 'px', - onUnit, - units = [ 'px', 'em', 'rem' ], - styles = ['solid', 'dashed', 'dotted', 'double'], - defaultLinked = true, -} ) { - const instanceId = useInstanceId( SingleBorderControl ); - const onChangeStyle = ( style ) => { - const newVal = value; - newVal[1] = style; - onChange( newVal ); - } - const currentStyle = value?.[1] || 'solid'; - const onChangeColor = ( color ) => { - const newVal = value; - newVal[0] = color; - onChange( newVal ); - } - const currentColor = value?.[0] || ''; - const currentSize = undefined !== value?.[2] && '' !== value?.[2] ? value[2] : ''; - const onChangeSize = ( size ) => { - const isNumeric = ! isNaN( parseFloat( size ) ); - const nextValue = isNumeric ? parseFloat( size ) : ''; - const newVal = value; - newVal[2] = nextValue; - onChange( newVal ); - } - const styleIcons = { - solid: - - , - dashed: - - , - dotted: - - - - - , - double: - - , - } - const styleLabels = { - solid: __( 'Solid', 'kadence-blocks' ), - dashed: __( 'Dashed', 'kadence-blocks' ), - dotted: __( 'Dotted', 'kadence-blocks' ), - double: __( 'Double', 'kadence-blocks' ), - } - const controlUnits = units.map( ( unitItem ) => ( { - value: unitItem, - label: unitItem, - } ) ); - return [ - onChange && ( -
- { label && ( - - - - - - ) } -
- onChangeColor( value ) } - /> - - { ( { onClose } ) => ( - <> - - { styles.map( ( style ) => ( - { - onClose(); - onChangeStyle( style ); - } } - label={ styleLabels[ style ] } - /> - ) ) } - - - ) } - -
- onChangeSize( newVal ) } - /> -
- -
-
-
-
- ), - ]; -} diff --git a/src/packages/components/src/border/responsive-border-control/index.js b/src/packages/components/src/border/responsive-border-control/index.js deleted file mode 100644 index 9c847506e..000000000 --- a/src/packages/components/src/border/responsive-border-control/index.js +++ /dev/null @@ -1,283 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useRef, useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map, isEqual } from 'lodash'; -import BorderControl from '../border-control'; -import { capitalizeFirstLetter } from '@kadence/helpers'; -import { undo } from '@wordpress/icons'; -/** -* WordPress dependencies -*/ -import { useInstanceId } from '@wordpress/compose'; -import { - Dashicon, - Button, - ButtonGroup, -} from '@wordpress/components'; -import { - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, -} from '@kadence/icons'; -import { settings, link, linkOff } from '@wordpress/icons'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveBorderControl( { - label, - onChange, - onChangeTablet, - onChangeMobile, - onControl, - mobileValue = '', - tabletValue = '', - value = '', - control = 'individual', - units = [ 'px', 'em', 'rem' ], - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = link, - unlinkIcon = linkOff, - styles = ['solid', 'dashed', 'dotted', 'double'], - deskDefault = { - top: ['','',''], - right: ['','',''], - bottom: ['','',''], - left: ['','',''], - unit: 'px', - }, - tabletDefault = { - top: ['','',''], - right: ['','',''], - bottom: ['','',''], - left: ['','',''], - unit: '', - }, - mobileDefault = { - top: ['','',''], - right: ['','',''], - bottom: ['','',''], - left: ['','',''], - unit: '', - }, - reset = true, - defaultLinked = true, - } ) { - const instanceId = useInstanceId( ResponsiveBorderControl ); - const measureIcons = { - first: firstIcon, - second: secondIcon, - third: thirdIcon, - fourth: fourthIcon, - link: linkIcon, - unlink: unlinkIcon, - } - const [ theControl, setTheControl ] = useState( control ); - const realControl = onControl ? control : theControl; - const realSetOnControl = onControl ? onControl : setTheControl; - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - useEffect( () => { - if ( defaultLinked ) { - if ( theDevice === 'Mobile' ) { - if ( isEqual( mobileValue?.[0]?.top, mobileValue?.[0]?.bottom ) && isEqual( mobileValue?.[0]?.top, mobileValue?.[0]?.bottom ) && isEqual( mobileValue?.[0]?.top, mobileValue?.[0]?.right ) && isEqual( mobileValue?.[0]?.top, mobileValue?.[0]?.left ) ) { - realSetOnControl( 'linked' ); - } - } else if ( theDevice === 'Tablet' ) { - if ( isEqual( tabletValue?.[0]?.top, tabletValue?.[0]?.bottom ) && isEqual( tabletValue?.[0]?.top, tabletValue?.[0]?.bottom ) && isEqual( tabletValue?.[0]?.top, tabletValue?.[0]?.right ) && isEqual( tabletValue?.[0]?.top, tabletValue?.[0]?.left ) ) { - realSetOnControl( 'linked' ); - } - } else { - if ( isEqual( value?.[0]?.top, value?.[0]?.bottom ) && isEqual( value?.[0]?.top, value?.[0]?.bottom ) && isEqual( value?.[0]?.top, value?.[0]?.right ) && isEqual( value?.[0]?.top, value?.[0]?.left ) ) { - realSetOnControl( 'linked' ); - } - } - } - - //if the mobile or tablet units are the same as desktop, unset them so they now inherit / follow desktop. - if ( mobileValue && isEqual( value?.[0]?.unit, mobileValue?.[0]?.unit ) ) { - mobileValue[0].unit = ''; - onChangeMobile( mobileValue ); - } - if ( tabletValue && isEqual( value?.[0]?.unit, tabletValue?.[0]?.unit ) ) { - tabletValue[0].unit = ''; - onChangeTablet( tabletValue ); - } - }, [] ); - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - let liveValue = ( value?.[0] ? value[0] : deskDefault ); - if ( deviceType === 'Tablet' ) { - liveValue = ( tabletValue?.[0] ? tabletValue[0] : tabletDefault ); - } else if ( deviceType === 'Mobile' ) { - liveValue = ( mobileValue?.[0] ? mobileValue[0] : mobileDefault ); - } - const onReset = () => { - if ( deviceType === 'Tablet' ) { - onChangeTablet( [ tabletDefault ] ); - } else if ( deviceType === 'Mobile' ) { - onChangeMobile( [ mobileDefault ] ); - } else { - onChange( [ deskDefault ] ); - } - } - const output = {}; - const mobileUnit = mobileValue?.[0]?.unit ? mobileValue[0].unit : value?.[0]?.unit ? value[0].unit : 'px'; - const tabletUnit = tabletValue?.[0]?.unit ? tabletValue[0].unit : value?.[0]?.unit ? value[0].unit : 'px'; - - output.Mobile = ( - onChangeMobile( size ) } - control={ realControl } - onControl={ ( value ) => realSetOnControl( value ) } - defaultValue={ mobileDefault } - styles={ styles } - units={ [ mobileUnit ] } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - /> - ); - output.Tablet = ( - onChangeTablet( size ) } - control={ realControl } - onControl={ ( value ) => realSetOnControl( value ) } - defaultValue={ tabletDefault } - styles={ styles } - units={ [ tabletUnit ] } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - - /> - ); - output.Desktop = ( - onChange( size ) } - control={ realControl } - onControl={ ( value ) => realSetOnControl( value ) } - defaultValue={ deskDefault } - styles={ styles } - units={ units } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - /> - ); - let currentDefault = deskDefault; - if ( 'Mobile' === deviceType ) { - currentDefault = mobileDefault; - } else if ( 'Mobile' === deviceType ) { - currentDefault = tabletDefault; - } - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - - { realSetOnControl && ( -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ), - ]; -} diff --git a/src/packages/components/src/box-shadow-control/editor.scss b/src/packages/components/src/box-shadow-control/editor.scss deleted file mode 100644 index 98aa10e5f..000000000 --- a/src/packages/components/src/box-shadow-control/editor.scss +++ /dev/null @@ -1,38 +0,0 @@ -.kt-box-shadow-label .components-base-control.components-toggle-control, .kt-box-shadow-label .components-toggle-control .components-base-control__field { - margin-bottom: 0 !important; -} -.kt-box-shadow-label h2.kt-beside-color-label { - flex-grow: 1; - margin: 12px 0; - font-weight: 400; -} -.kt-box-shadow-label { - display: flex; - align-items: center; -} -.kt-inner-sub-section-row { - display: flex; - margin-bottom: 10px; -} -.kt-inner-sub-section { - border: 1px solid var(--kb-border-color, #859CB6 ); - border-top: 0; - padding: 25px 10px 10px 10px; - margin-bottom: 15px; - margin-top: -12px; -} -.kt-box-shadow-subset { - padding: 0 2px; - text-align: center; -} -.kt-box-shadow-subset .kt-box-shadow-title { - font-size:12px; -} - -.kt-box-shadow-subset .kt-advanced-color-settings-container { - flex-direction: column-reverse; -} -.kt-box-shadow-subset input.components-text-control__input { - padding: 0 1px; - border: 1px solid var(--kb-border-color, #859CB6 ); -} \ No newline at end of file diff --git a/src/packages/components/src/box-shadow-control/index.js b/src/packages/components/src/box-shadow-control/index.js deleted file mode 100644 index b26bd89d8..000000000 --- a/src/packages/components/src/box-shadow-control/index.js +++ /dev/null @@ -1,136 +0,0 @@ -/** - * BoxShadow Component - * - */ - -/** - * Import Externals - */ -import PopColorControl from '../pop-color-control'; -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; -/** - * Import Css - */ -import './editor.scss'; -/** - * Build the BoxShadow controls - * @returns {object} BoxShadow settings. - */ -class BoxShadowControl extends Component { - constructor( label, enable = true, color, colorDefault, opacity, spread, blur, hOffset, vOffset, inset, onColorChange, onOpacityChange, onSpreadChange, onBlurChange, onHOffsetChange, onVOffsetChange, onInsetChange, onEnableChange ) { - super( ...arguments ); - } - render() { - return ( -
- { this.props.label && ( -
-

{ this.props.label }

- { this.props.onEnableChange && ( - this.props.onEnableChange( value ) } - /> - ) } -
- ) } - { this.props.enable && ( -
-
-
-

{ __( 'Color' ) }

- this.props.onColorChange( value ) } - opacityValue={ this.props.opacity } - onOpacityChange={ value => this.props.onOpacityChange( value ) } - onArrayChange={ this.props.onArrayChange ? ( color, opacity ) => this.props.onArrayChange( color, opacity ) : undefined } - /> -
-
-

{ __( 'X' ) }

-
-
- this.props.onHOffsetChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ __( 'Y' ) }

-
-
- this.props.onVOffsetChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ __( 'Blur' ) }

-
-
- this.props.onBlurChange( Number( event.target.value ) ) } - min={ 0 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ __( 'Spread' ) }

-
-
- this.props.onSpreadChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
- { this.props.onInsetChange && ( -
- this.props.onInsetChange( value ) } - /> -
- ) } -
- ) } -
- ); - } -} -export default ( BoxShadowControl ); diff --git a/src/packages/components/src/color-fields/index.js b/src/packages/components/src/color-fields/index.js deleted file mode 100644 index a32d83fc1..000000000 --- a/src/packages/components/src/color-fields/index.js +++ /dev/null @@ -1,207 +0,0 @@ -import { isValidHex } from 'react-color/lib/helpers/color' -import { EditableInput } from 'react-color/lib/components/common'; - -import { Component, Fragment } from '@wordpress/element'; -import { Dashicon } from '@wordpress/components'; - -class ColorFields extends Component { - constructor( props ) { - super( props ); - this.toggleViews = this.toggleViews.bind( this ); - this.handleChange = this.handleChange.bind( this ); - this.state = { - view: 'rgb', - }; - } - toggleViews() { - if ( this.state.view === 'hsl' ) { - this.setState( { view: 'rgb' } ); - } else if ( this.state.view === 'rgb' ) { - this.setState( { view: 'hsl' } ); - } - } - handleChange( data, e ) { - if ( data.hex && isValidHex( data.hex ) ) { - this.props.onChange( { - hex: data.hex, - source: 'hex', - }, e ); - } else if ( data.r || data.g || data.b ) { - this.props.onChange( { - r: data.r || this.props.rgb.r, - g: data.g || this.props.rgb.g, - b: data.b || this.props.rgb.b, - a: this.props.rgb.a, - source: 'rgb', - }, e ); - } else if ( data.a ) { - if ( data.a < 0 ) { - data.a = 0; - } else if ( data.a > 1 ) { - data.a = 1; - } - - this.props.onChange( { - h: this.props.hsl.h, - s: this.props.hsl.s, - l: this.props.hsl.l, - a: Math.round( data.a * 100 ) / 100, - source: 'rgb', - }, e ); - } else if ( data.h || data.s || data.l ) { - // Remove any occurances of '%'. - if ( typeof( data.s ) === 'string' ) { data.s = data.s.replace( '%', '' ); } - if ( typeof( data.l ) === 'string' ) { data.l = data.l.replace( '%', '' ); } - this.props.onChange( { - h: data.h || this.props.hsl.h || 0, - s: Number( ( data.s && data.s / 100 ) || this.props.hsl.s || 0.0 ), - l: Number( ( data.l && data.l / 100 ) || this.props.hsl.l || 0.0 ), - a: Math.round( data.a * 100 ) / 100 || this.props.rgb.a || 1, - source: 'hsl', - }, e ); - } - } - render() { - const styles = { - fields: { - display: 'flex', - paddingTop: '4px', - }, - single: { - flex: '1', - paddingLeft: '6px', - }, - alpha: { - flex: '1', - paddingLeft: '6px', - }, - double: { - flex: '2', - }, - input: { - width: '100%', - padding: '4px 10% 3px', - border: 'none', - borderRadius: '2px', - boxShadow: 'rgb(218, 218, 218) 0px 0px 0px 1px inset', - fontSize: '11px', - }, - label: { - display: 'block', - textAlign: 'center', - fontSize: '11px', - color: '#222', - paddingTop: '3px', - paddingBottom: '4px', - textTransform: 'capitalize', - }, - toggle: { - width: '32px', - textAlign: 'right', - position: 'relative', - }, - }; - return ( -
-
- -
- { this.state.view === 'rgb' && ( - -
- -
-
- -
-
- -
-
- -
- - ) } - { this.state.view === 'hsl' && ( - -
- -
-
- -
-
- -
-
- -
- - ) } -
-
this.icon = icon }> - - -
-
-
- ); - } -} - -export default ColorFields; diff --git a/src/packages/components/src/color-icons/index.js b/src/packages/components/src/color-icons/index.js deleted file mode 100644 index 255a1843d..000000000 --- a/src/packages/components/src/color-icons/index.js +++ /dev/null @@ -1,53 +0,0 @@ -const ColorIcons = { - inherit: - - - - - - -}; -export default ColorIcons; diff --git a/src/packages/components/src/color-picker/index.js b/src/packages/components/src/color-picker/index.js deleted file mode 100644 index 07a57289e..000000000 --- a/src/packages/components/src/color-picker/index.js +++ /dev/null @@ -1,127 +0,0 @@ -import { CustomPicker } from 'react-color'; -import { Hue, Saturation, Alpha, Checkboard } from 'react-color/lib/components/common'; -import { ChromePointerCircle } from 'react-color/lib/components/chrome/ChromePointerCircle'; -import { ChromePointer } from 'react-color/lib/components/chrome/ChromePointer'; -import ColorFields from '../color-fields'; - -const ColorPicker = ( { rgb, hex, hsv, hsl, onChange, renderers } ) => { - const styles = { - picker: { - width: 300, - position: 'relative', - marginBottom: 10, - }, - hue: { - height: 10, - position: 'relative', - marginBottom: '8px', - }, - Hue: { - radius: '2px', - }, - alpha: { - height: '10px', - position: 'relative', - }, - Alpha: { - radius: '2px', - }, - input: { - height: 34, - border: `1px solid ${ hex }`, - paddingLeft: 10, - }, - body: { - padding: '10px 0', - }, - controls: { - display: 'flex', - }, - color: { - width: '30px', - height: '30px', - position: 'relative', - marginTop: '3px', - marginLeft: '10px', - borderRadius: '50%', - overflow: 'hidden', - }, - activeColor: { - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - borderRadius: '50%', - background: `rgba(${ rgb.r },${ rgb.g },${ rgb.b },${ rgb.a })`, - boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)', - }, - swatch: { - width: 54, - height: 38, - background: hex, - }, - sliders: { - padding: '4px 0', - flex: '1', - }, - saturation: { - width: '100%', - paddingBottom: '50%', - position: 'relative', - overflow: 'hidden', - }, - Saturation: { - radius: '2px 2px 0 0', - shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)', - }, - }; - return ( -
-
- -
-
-
-
-
- -
-
- -
-
-
- -
-
-
-
- -
- ); -}; -export default CustomPicker( ColorPicker ); diff --git a/src/packages/components/src/color/advanced-color-control-palette/index.js b/src/packages/components/src/color/advanced-color-control-palette/index.js deleted file mode 100644 index 6c49ca520..000000000 --- a/src/packages/components/src/color/advanced-color-control-palette/index.js +++ /dev/null @@ -1,84 +0,0 @@ -/** - * Measure Component - * - */ - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { - Button, - Popover, - ColorIndicator, - ColorPicker, - TextControl, - Tooltip, -} from '@wordpress/components'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -class AdvancedColorControlPalette extends Component { - constructor( label, colorValue, onSave ) { - super( ...arguments ); - this.state = { - isVisible: false, - color: '', - name: '', - }; - } - componentDidMount() { - this.setState( { color: this.props.colorValue } ); - this.setState( { name: this.props.nameValue } ); - } - render() { - const toggleVisible = () => { - this.setState( { isVisible: true } ); - }; - const toggleClose = () => { - if ( this.state.isVisible === true ) { - this.setState( { isVisible: false } ); - this.props.onSave( this.state.color, this.state.name ); - } - }; - const changeColor = ( value ) => { - this.setState( { color: value } ); - }; - return ( -
- { this.state.isVisible && ( - - changeColor( color.hex ) } - disableAlpha - /> - this.setState( { name: value } ) } - /> - - ) } - { this.state.isVisible && ( - - - - ) } - { ! this.state.isVisible && ( - - - - ) } -
- ); - } -} -export default ( AdvancedColorControlPalette ); diff --git a/src/packages/components/src/color/border-color-control/editor.scss b/src/packages/components/src/color/border-color-control/editor.scss deleted file mode 100644 index a8485a5df..000000000 --- a/src/packages/components/src/color/border-color-control/editor.scss +++ /dev/null @@ -1,8 +0,0 @@ -.kadence-controls-content-border .components-base-control.kadence-pop-color-control { - margin-bottom:0; -} -.kadence-controls-content-border .kadence-pop-color-control .kadence-beside-label { - margin: 0.7em 0; - align-items: center; - display: flex; -} \ No newline at end of file diff --git a/src/packages/components/src/color/border-color-control/index.js b/src/packages/components/src/color/border-color-control/index.js deleted file mode 100644 index 4d2e1a3ef..000000000 --- a/src/packages/components/src/color/border-color-control/index.js +++ /dev/null @@ -1,212 +0,0 @@ -/** - * Measure Component - * - */ - -import PopColorControl from '../../pop-color-control'; - -/** - * Import External - */ -import { map } from 'lodash'; - - -/** - * Import Css - */ - import './editor.scss'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; -import { - Button, - ButtonGroup, - Tooltip, -} from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useRef } from '@wordpress/element'; - -import { - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, - individualIcon, - linkedIcon, - topLeftIcon, - topRightIcon, - bottomRightIcon, - bottomLeftIcon, - radiusLinkedIcon, - radiusIndividualIcon -} from '@kadence/icons'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function BorderColorControls( { - label, - swatchLabel = '', - value, - onChange, - defaultColor = '', - value2, - swatchLabel2 = '', - onChange2, - defaultColor2 = '', - value3, - swatchLabel3 = '', - onChange3, - defaultColor3 = '', - control, - onControl, - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = linkedIcon, - unlinkIcon = individualIcon, - className = '', - reset = false, - } ) { - const measureIcons = { - first: firstIcon, - second: secondIcon, - third: thirdIcon, - fourth: fourthIcon, - link: linkIcon, - unlink: unlinkIcon, - } - const [ localControl, setLocalControl ] = useState( 'individual' ); - const realControl = control ? control : localControl; - const realOnChangeControl = onControl ? onControl : setLocalControl; - const containerRef = useRef(); - return ( -
-
- { label && ( - { label } - ) } - { realOnChangeControl && ( -
- { realControl !== 'individual' ? ( - - - - ) : ( - - - - ) } -
- ) } -
-
- { realControl !== 'individual' && ( - - onChange( [ update, update, update, update ] ) } - swatchLabel2={ swatchLabel2 ? swatchLabel2 : '' } - value2={ ( value2 && value2[ 0 ] ? value2[ 0 ] : '' ) } - default2={ defaultColor2 ? defaultColor2 : '' } - onChange2={ onChange2 ? update => onChange2( [ update, update, update, update ] ) : undefined } - swatchLabel3={ swatchLabel3 ? swatchLabel3 : '' } - value3={ ( value3 && value3[ 0 ] ? value3[ 0 ] : '' ) } - default3={ defaultColor3 ? defaultColor3 : '' } - onChange3={ onChange3 ? update => onChange3( [ update, update, update, update ] ) : undefined } - /> - - ) } - { realControl === 'individual' && ( -
- onChange( [ update, value[ 1 ], value[ 2 ], value[ 3 ] ] ) } - swatchLabel2={ swatchLabel2 ? swatchLabel2 : '' } - value2={ ( value2 && value2[ 0 ] ? value2[ 0 ] : '' ) } - default2={ defaultColor2 ? defaultColor2 : '' } - onChange2={ onChange2 ? update => onChange2( [ update, value2[ 1 ], value2[ 2 ], value2[ 3 ] ] ) : undefined } - value3={ ( value3 && value3[ 0 ] ? value3[ 0 ] : '' ) } - swatchLabel3={ swatchLabel3 ? swatchLabel3 : '' } - default3={ defaultColor3 ? defaultColor3 : '' } - onChange3={ onChange3 ? update => onChange3( [ update, value3[ 1 ], value3[ 2 ], value3[ 3 ] ] ) : undefined } - /> - onChange( [ value[ 0 ], update, value[ 2 ], value[ 3 ] ] ) } - swatchLabel2={ swatchLabel2 ? swatchLabel2 : '' } - value2={ ( value2 && value2[ 1 ] ? value2[ 1 ] : '' ) } - default2={ defaultColor2 ? defaultColor2 : '' } - onChange2={ onChange2 ? update => onChange2( [ value2[ 0 ], update, value2[ 2 ], value2[ 3 ] ] ) : undefined } - value3={ ( value3 && value3[ 1 ] ? value3[ 1 ] : '' ) } - swatchLabel3={ swatchLabel3 ? swatchLabel3 : '' } - default3={ defaultColor3 ? defaultColor3 : '' } - onChange3={ onChange3 ? update => onChange3( [ value3[ 0 ], update, value3[ 2 ], value3[ 3 ] ] ) : undefined } - /> - onChange( [ value[ 0 ], value[ 1 ], update, value[ 3 ] ] ) } - value2={ ( value2 && value2[ 2 ] ? value2[ 2 ] : '' ) } - swatchLabel2={ swatchLabel2 ? swatchLabel2 : '' } - default2={ defaultColor2 ? defaultColor2 : '' } - onChange2={ onChange2 ? update => onChange2( [ value2[ 0 ], value2[ 1 ], update, value2[ 3 ] ] ) : undefined } - value3={ ( value3 && value3[ 2 ] ? value3[ 2 ] : '' ) } - swatchLabel3={ swatchLabel3 ? swatchLabel3 : '' } - default3={ defaultColor3 ? defaultColor3 : '' } - onChange3={ onChange3 ? update => onChange3( [ value3[ 0 ], value3[ 1 ], update, value3[ 3 ] ] ) : undefined } - /> - onChange( [ value[ 0 ], value[ 1 ], value[ 2 ], update ] ) } - value2={ ( value2 && value2[ 3 ] ? value2[ 3 ] : '' ) } - swatchLabel2={ swatchLabel2 ? swatchLabel2 : '' } - default2={ defaultColor2 ? defaultColor2 : '' } - onChange2={ onChange2 ? update => onChange2( [ value2[ 0 ], value2[ 1 ], value2[ 2 ], update ] ) : undefined } - value3={ ( value3 && value3[ 3 ] ? value3[ 3 ] : '' ) } - swatchLabel3={ swatchLabel3 ? swatchLabel3 : '' } - default3={ defaultColor3 ? defaultColor3 : '' } - onChange3={ onChange3 ? update => onChange3( [ value3[ 0 ], value3[ 1 ], value3[ 2 ], update ] ) : undefined } - /> -
- ) } -
-
- ); -} diff --git a/src/packages/components/src/color/css/editor.css b/src/packages/components/src/color/css/editor.css deleted file mode 100644 index fe374c124..000000000 --- a/src/packages/components/src/color/css/editor.css +++ /dev/null @@ -1,7 +0,0 @@ -.kadence-controls-content-border .components-base-control.kadence-pop-color-control { - margin-bottom: 0; } - -.kadence-controls-content-border .kadence-pop-color-control .kadence-beside-label { - margin: 0.7em 0; - align-items: center; - display: flex; } diff --git a/src/packages/components/src/column-drag-resizer/constants.js b/src/packages/components/src/column-drag-resizer/constants.js deleted file mode 100644 index 99e853860..000000000 --- a/src/packages/components/src/column-drag-resizer/constants.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; - -export const SPACING_SIZES_MAP = [ - { - value: '0', - label: __('None', 'kadence-blocks'), - size: 0, - name: __('None', 'kadence-blocks'), - }, - { - value: 'xxs', - output: 'var(--global-kb-spacing-xxs, 0.5rem)', - size: 8, - label: __('XXS', 'kadence-blocks'), - name: __('2X Small', 'kadence-blocks'), - }, - { - value: 'xs', - output: 'var(--global-kb-spacing-xs, 1rem)', - size: 16, - label: __('XS', 'kadence-blocks'), - name: __('X Small', 'kadence-blocks'), - }, - { - value: 'sm', - output: 'var(--global-kb-spacing-sm, 1.5rem)', - size: 24, - label: __('SM', 'kadence-blocks'), - name: __('Small', 'kadence-blocks'), - }, - { - value: 'md', - output: 'var(--global-kb-spacing-md, 2rem)', - size: 32, - label: __('MD', 'kadence-blocks'), - name: __('Medium', 'kadence-blocks'), - }, - { - value: 'lg', - output: 'var(--global-kb-spacing-lg, 3rem)', - size: 48, - label: __('LG', 'kadence-blocks'), - name: __('Large', 'kadence-blocks'), - }, - { - value: 'xl', - output: 'var(--global-kb-spacing-xl, 4rem)', - size: 64, - label: __('XL', 'kadence-blocks'), - name: __('X Large', 'kadence-blocks'), - }, - { - value: 'xxl', - output: 'var(--global-kb-spacing-xxl, 5rem)', - size: 80, - label: __('XXL', 'kadence-blocks'), - name: __('2X Large', 'kadence-blocks'), - }, - { - value: '3xl', - output: 'var(--global-kb-spacing-3xl, 6.5rem)', - size: 104, - label: __('3XL', 'kadence-blocks'), - name: __('3X Large', 'kadence-blocks'), - }, - { - value: '4xl', - output: 'var(--global-kb-spacing-4xl, 8rem)', - size: 128, - label: __('4XL', 'kadence-blocks'), - name: __('4X Large', 'kadence-blocks'), - }, - { - value: '5xl', - output: 'var(--global-kb-spacing-5xl, 10rem)', - size: 160, - label: __('5XL', 'kadence-blocks'), - name: __('5X Large', 'kadence-blocks'), - }, -]; - -export const PADDING_RESIZE_MAP = [0, 8, 16, 24, 32, 48, 64, 80, 104, 128, 160]; diff --git a/src/packages/components/src/column-drag-resizer/editor.scss b/src/packages/components/src/column-drag-resizer/editor.scss deleted file mode 100644 index fb1ef3641..000000000 --- a/src/packages/components/src/column-drag-resizer/editor.scss +++ /dev/null @@ -1,255 +0,0 @@ -.block-editor-block-list__block.is-selected[data-type="kadence/rowlayout"] { - > .innerblocks-wrap > .kt-resizeable-column-container .components-resizable-box__container { - .components-button.kt-fluid-grid-btn { - opacity: 1; - } - .left-column-width-size { - z-index: 100; - opacity: 1; - } - .right-column-width-size { - z-index: 100; - opacity: 1; - } - .components-resizable-box__handle { - display: block; - } - &:hover .editor-row-controls-container.kadence-resize-extra-controls { - opacity: 1; - } - } -} -.kt-resizeable-column-container .components-button.kt-fluid-grid-btn { - position: absolute; - opacity: 0; - right: -12px; - top: 0; - text-align: center; - background: var(--wp-admin-theme-color); - border: 0; - height: 20px; - line-height: 20px; - padding: 0; - width: 24px; - color: white; - z-index: 1010; - box-shadow: none; - padding: 2px; - border-radius: 2px; - svg { - fill: currentColor; - circle { - stroke: currentColor; - } - } -} -.editor-row-column__resizer { - position: absolute !important; - left: 0; - height: 100% !important; - background: transparent; - top: 0; - .components-resizable-box__handle { - z-index: 1000; - &:after { - display: block; - content: ""; - width: 15px; - height: 15px; - border-radius: 50%; - background: #fff; - cursor: inherit; - position: absolute; - top: calc(50% - 8px); - right: calc(50% - 8px); - box-shadow: inset 0 0 0 3px; - color: var(--wp-admin-theme-color); - outline: 2px solid transparent; - left: 50%; - transform: translateX(-50%); - } - &:before { - display: block; - border-radius: 2px; - content: ""; - width: 3px; - height: 10%; - background: var(--wp-admin-theme-color); - cursor: inherit; - position: absolute; - top: 0; - transition: transform 0.1s ease-in; - opacity: 1; - left: 50%; - transform: translate(-50%, -50%); - top: 50%; - transition: height 0.1s ease; - } - } -} -.block-editor-block-list__block.is-selected[data-type="kadence/rowlayout"] { - > .innerblocks-wrap - > .kt-resizeable-column-container - > .components-resizable-box__container - > .editor-row-controls-container - > .components-resizable-box__handle:hover:before { - height: 100%; - } -} -.kt-resizeable-column-container, -.kb-inner-resize-row { - margin-left: 0px; - margin-right: 0px; - position: absolute !important; - height: auto; - width: auto; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; -} -.editor-row-controls-container { - position: absolute; - right: 0; - height: 100%; - .column-width-size-handle { - opacity: 0; - position: absolute; - top: 50%; - font-size: 11px; - background: rgba(255, 255, 255, 0.9); - z-index: -1; - width: 50px; - height: 30px; - color: black; - text-align: center; - line-height: 30px; - margin-top: -15px; - &.right-column-width-size { - left: 100%; - padding-left: 2px; - margin-left: 0px; - } - &.left-column-width-size { - right: 0; - padding-right: 2px; - margin-left: 0; - } - } -} -.editor-row-controls-container.kadence-resize-extra-controls { - opacity: 0; - transition: opacity 0.2s ease; -} -.block-editor-block-list__block[data-type="kadence/rowlayout"] - .kt-resizeable-column-container - .components-resizable-box__container - .components-resizable-box__handle { - height: 100%; - top: 0px; - display: none; -} -// spacing controls: -.kt-padding-resize-box { - z-index: -1; -} -.kt-row-padding { - display: flex; - width: 100%; - height: 100%; - justify-content: center; - align-items: center; - color: #000; - opacity: 0; - transition: opacity 0.3s ease; - background: rgba(190, 228, 174, 0.7); - span { - padding: 0 6px; - font-size: 11px; - } -} -.block-editor-block-list__block.is-selected[data-type="kadence/rowlayout"] - > .kt-padding-resize-box:hover - .kt-row-padding { - opacity: 1; -} -.wp-block-kadence-rowlayout-handler-top { - top: 0px !important; -} -.wp-block-kadence-rowlayout-handler-top, -.wp-block-kadence-rowlayout-handler-bottom { - display: none; - border-radius: 0; - border: 0; - min-height: 20px; - width: 100%; - height: 100% !important; - position: absolute; - background: transparent; - padding: 0; - z-index: 1000; - cursor: se-resize; - left: 0px; - margin-left: 0px; -} -.wp-block-kadence-rowlayout-handler-bottom { - bottom: 0px !important; -} -.block-editor-block-list__block[data-type="kadence/rowlayout"].is-selected > .kt-padding-resize-box { - z-index: 10; - .wp-block-kadence-rowlayout-handler-top, - .wp-block-kadence-rowlayout-handler-bottom { - display: block; - } -} - -.rtl { - .editor-row-column__resizer { - left: auto; - right: 0; - } - .kt-resizeable-column-container .components-button.kt-fluid-grid-btn { - left: -12px; - right: auto; - } - .editor-row-column__resizer .components-resizable-box__handle:after { - left: 50; - right: auto; - } - .editor-row-controls-container { - .editor-row-controls-container { - right: auto; - } - .column-width-size-handle.left-column-width-size { - right: auto; - left: 0; - padding-right: 0; - padding-left: 2px; - margin-left: auto; - margin-right: 0; - } - .column-width-size-handle.right-column-width-size { - right: 100%; - left: auto; - padding-left: 0; - padding-right: 2px; - margin-left: auto; - margin-right: 0; - } - } -} - -.kt-resizeable-column-inactive { - &.kt-resizeable-column-container .components-button.kt-fluid-grid-btn { - background: gray; - } - - .components-resizable-box__handle { - &:after { - color: gray; - } - &:before { - background: gray; - } - } -} diff --git a/src/packages/components/src/column-drag-resizer/index.js b/src/packages/components/src/column-drag-resizer/index.js deleted file mode 100644 index 743601430..000000000 --- a/src/packages/components/src/column-drag-resizer/index.js +++ /dev/null @@ -1,252 +0,0 @@ -import { Button, Tooltip, ResizableBox } from '@wordpress/components'; -import { isRTL } from '@kadence/helpers'; -import classnames from 'classnames'; -import { debounce, throttle } from 'lodash'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { getPreviewGutterSize, getGutterTotal } from './utils'; -import ContainerDimensions from 'react-container-dimensions'; -import { getPreviewSize } from '@kadence/helpers'; - -/** - * Import Css - */ -import './editor.scss'; - -export default function ColumnDragResizer(props) { - //columns a number of columns - //column widths and array of - const { - attributes, - setAttributes, - previewDevice, - columns, - columnWidths, - columnGap, - columnsUnlocked, - onColumnsUnlocked, - onResize, - onResizeStop, - onResizeTablet, - onResizeStopTablet, - onResizeMobile, - onResizeStopMobile, - active, - } = props; - const { uniqueID, columnGutter, customGutter, gutterType } = attributes; - // const currentGutter = getPreviewGutterSize(previewDevice, columnGutter, customGutter, gutterType); - // const currentGutterTotal = getGutterTotal(currentGutter, columns); - // const gutterAdjuster = `calc( -1 * ( ${currentGutter} / 3 ) / 2)`; - - //TODO use actual mobile values - const previewColumnWidths = getPreviewSize(previewDevice, columnWidths, columnWidths, columnWidths); - - const localOnResizeStop = (event, direction, elt) => { - const newColumnWidths = packageWidths(event, direction, elt); - if (onResizeStopMobile && previewDevice == 'Mobile') { - onResizeStopMobile(newColumnWidths); - } else if (onResizeStopTablet && previewDevice == 'Tablet') { - onResizeStopTablet(newColumnWidths); - } else { - onResizeStop(newColumnWidths); - } - }; - const localOnResize = (event, direction, elt) => { - const newColumnWidths = packageWidths(event, direction, elt); - if (onResizeMobile && previewDevice == 'Mobile') { - onResizeMobile(newColumnWidths); - } else if (onResizeTablet && previewDevice == 'Tablet') { - onResizeTablet(newColumnWidths); - } else { - onResize(newColumnWidths); - } - }; - - const packageWidths = (event, direction, elt) => { - let tempColumnW; - let tempChange; - let tempNextColumnW; - const currentElementWidth = elt.style.width; - const currentColumn = parseInt(elt.dataset?.column); - const currentColumnWidth = previewColumnWidths[currentColumn]; - const nextColumn = currentColumn + 1; - const nextColumnWidth = previewColumnWidths[nextColumn]; - const sumPreviousColumnWidths = - currentColumn == 0 - ? 0 - : previewColumnWidths.slice(0, currentColumn).reduce((partialSum, a) => partialSum + a, 0); - - //calculate width changes depending on unlocked status - if (columnsUnlocked) { - tempColumnW = Math.round(parseFloat(currentElementWidth) * 10) / 10 - sumPreviousColumnWidths; - tempChange = tempColumnW - (!currentColumnWidth ? 10 : currentColumnWidth); - tempNextColumnW = Math.round(Math.abs((!nextColumnWidth ? 10 : nextColumnWidth) - tempChange) * 10) / 10; - } else { - tempColumnW = Math.round(parseInt(currentElementWidth) / 5) * 5 - sumPreviousColumnWidths; - tempChange = tempColumnW - (!currentColumnWidth ? 10 : currentColumnWidth); - tempNextColumnW = Math.round(Math.abs((!nextColumnWidth ? 10 : nextColumnWidth) - tempChange) / 5) * 5; - } - - //package new widths to be dispatched - var newColumnWidths = [...previewColumnWidths]; - newColumnWidths[currentColumn] = tempColumnW; - newColumnWidths[nextColumn] = tempNextColumnW; - - //if this row had previously assumed column widths like 33.33%, than moving this column may have made it so the whole thing doesn't add up to 100% anymore. - //For instance now the columns are [30,35,33.33] - //this ensures the grid adds up to 100% and is in 5% incriments if it was set to snap - if (columns > 2) { - //make sure all column values are rounded - newColumnWidths = newColumnWidths.map((x) => - columnsUnlocked ? Math.round(parseFloat(x) * 10) / 10 : Math.round(parseInt(x) / 5) * 5 - ); - - //if we don't add to one hundred, add that to the last other column - const sumAllColumnWidths = newColumnWidths.reduce((partialSum, a) => partialSum + a, 0); - const needToAddToLast = 100 - sumAllColumnWidths; - - //need to add some to a column not just adjusted to make us equal 100 - const columnToAddTo = currentColumn == columns - 2 ? 0 : newColumnWidths.length - 1; - newColumnWidths[columnToAddTo] = newColumnWidths[columnToAddTo] + needToAddToLast; - } - - return newColumnWidths; - }; - - const innerResizeClasses = classnames({ - 'kt-resizeable-column-container': true, - [`kt-resizeable-column-container${uniqueID}`]: uniqueID, - 'kt-resizeable-column-inactive': !active, - }); - - var resizableBoxes = (width) => { - var resizableBoxArray = []; - for (let column = 0; column < columns - 1; column++) { - const columnWidth = previewColumnWidths?.[column]; - const nextColumnWidth = previewColumnWidths?.[column + 1]; - const sumPreviousColumnWidths = - column == 0 ? 0 : previewColumnWidths.slice(0, column).reduce((partialSum, a) => partialSum + a, 0); - const minWidth = 10; - //This takes out the column's portion of the gap from the overall percent width. - //the preset columns aren't actually displayed as percents on the frontend for the row layout. They use fr's. - //This also adjusts for the difference in how gaps are potioned out between fr's and % grids. - //The same calculation is run for the row layout grid. - //It's in the form of a left offset because I can't calc() the width of a ResizableBox - //It attempts to place the edge of the resizable box right in the middle of the joint. - const gutterAdjustment = - 'calc(((((' + - columnGap + - ' * ' + - (columns - 1) + - ')) / ' + - columns + - ') * ' + - -1 * (column + 1) + - ') + ( (' + - columnGap + - ' * ' + - column + - ') + (' + - columnGap + - ' / 2 ) ) )'; - - const columnBox = ( - - - {columnsUnlocked && ( - - - - )} - {!columnsUnlocked && ( - - - - )} - - {columnWidth + '%'} - - - {nextColumnWidth + '%'} - - - - ); - resizableBoxArray.push(columnBox); - } - return resizableBoxArray; - }; - - return ( -
- {({ width }) => <>{resizableBoxes(width)}} -
- ); -} diff --git a/src/packages/components/src/column-drag-resizer/utils.js b/src/packages/components/src/column-drag-resizer/utils.js deleted file mode 100644 index 0fb6f4185..000000000 --- a/src/packages/components/src/column-drag-resizer/utils.js +++ /dev/null @@ -1,145 +0,0 @@ -import { __ } from '@wordpress/i18n'; - -import { SPACING_SIZES_MAP } from './constants'; -export function getGutterPercentUnit(columnGutter, customGutter, gutterType) { - const columnGutterString = undefined !== columnGutter ? columnGutter : 'default'; - let gutter = parseFloat(30 / 100); - switch (columnGutterString) { - case 'none': - gutter = 0; - break; - case 'skinny': - gutter = parseFloat(10 / 100); - break; - case 'wider': - gutter = parseFloat(60 / 100); - break; - case 'custom': - let custom = undefined !== customGutter && undefined !== customGutter[0] ? customGutter[0] : 30; - const gutterUnit = undefined !== gutterType && gutterType ? gutterType : 'px'; - if ('px' !== gutterUnit) { - custom = parseFloat(custom * 16); - } - gutter = parseFloat(custom / 100); - break; - } - return gutter; -} -export function getGutterTotal(gutter, columns) { - if (gutter && columns > 1) { - return `(${gutter} * ${columns - 1})`; - } - return 0; -} -export function getPreviewGutterSize(previewDevice, columnGutter, customGutter, gutterType) { - const columnGutterString = undefined !== columnGutter ? columnGutter : 'default'; - let gutter = 'var(--global-row-gutter-md, 2rem)'; - switch (columnGutterString) { - case 'none': - gutter = 0; - break; - case 'skinny': - gutter = 'var(--global-row-gutter-sm, 1rem)'; - break; - case 'wider': - gutter = 'var(--global-row-gutter-lg, 4rem)'; - break; - case 'custom': - const gutterUnit = undefined !== gutterType && gutterType ? gutterType : 'px'; - let custom = undefined !== customGutter && undefined !== customGutter[0] ? customGutter[0] : 30; - if ('Tablet' === previewDevice) { - custom = - undefined !== customGutter && undefined !== customGutter[1] && '' !== customGutter[1] - ? customGutter[1] - : custom; - } else if ('Mobile' === previewDevice) { - custom = - undefined !== customGutter && undefined !== customGutter[2] && '' !== customGutter[2] - ? customGutter[2] - : custom; - } - if (custom) { - custom = custom + gutterUnit; - } - gutter = custom; - break; - } - return gutter; -} -export function getSpacingOptionName(value, unit) { - if (!value) { - return __('None', 'kadence-blocks'); - } - if (!SPACING_SIZES_MAP) { - return __('Unset', 'kadence-blocks'); - } - if (value === '0') { - return __('None', 'kadence-blocks'); - } - const found = SPACING_SIZES_MAP.find((option) => option.value === value); - if (!found) { - return value + unit; - } - return found.name; -} -export function getSpacingOptionOutput(value, unit) { - if (undefined === value) { - return ''; - } - if (!SPACING_SIZES_MAP) { - return value; - } - if (value === '0') { - return '0' + unit; - } - if (value === 0) { - return '0' + unit; - } - const found = SPACING_SIZES_MAP.find((option) => option.value === value); - if (!found) { - return value + unit; - } - return found.output; -} -export function getSpacingOptionSize(value) { - if (!value) { - return 0; - } - if (!SPACING_SIZES_MAP) { - return value; - } - if (value === '0') { - return 0; - } - const found = SPACING_SIZES_MAP.find((option) => option.value === value); - if (!found) { - return value; - } - return found.size; -} -export function getSpacingNameFromSize(value) { - if (!value) { - return ''; - } - if (value === '0') { - return '0'; - } - const found = SPACING_SIZES_MAP.find((option) => option.size === value); - if (!found) { - return value + 'px'; - } - return found.name; -} -export function getSpacingValueFromSize(value) { - if (!value) { - return ''; - } - if (value === '0') { - return '0'; - } - const found = SPACING_SIZES_MAP.find((option) => option.size === value); - if (!found) { - return value; - } - return found.value; -} diff --git a/src/packages/components/src/common/image-controls/editor.scss b/src/packages/components/src/common/image-controls/editor.scss deleted file mode 100644 index 7d53672aa..000000000 --- a/src/packages/components/src/common/image-controls/editor.scss +++ /dev/null @@ -1,19 +0,0 @@ -button.components-button.kb-sidebar-image { - width: 150px; - margin-right: 5px; - background-position: center; - color: white; - text-shadow: 1px 1px 1px #000; - position: relative; - z-index: 1; -} -button.components-button.kb-sidebar-image:before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(0,0,0,.3); - z-index: -1; -} \ No newline at end of file diff --git a/src/packages/components/src/common/image-controls/index.js b/src/packages/components/src/common/image-controls/index.js deleted file mode 100644 index 5a3f670a4..000000000 --- a/src/packages/components/src/common/image-controls/index.js +++ /dev/null @@ -1,113 +0,0 @@ -/** - * Basic Image Control. - */ - -/** - * Import Kadence Components - */ -import KadenceMediaPlaceholder from '../media-placeholder'; -import DynamicImageControl from '../../dynamic-image-control'; -/** - * Import Css - */ - import './editor.scss'; -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Fragment, Component } from '@wordpress/element'; -import { - MediaUpload, -} from '@wordpress/block-editor'; -import { Button } from '@wordpress/components'; -import { - image, - closeSmall, - plusCircleFilled, -} from '@wordpress/icons'; -const ALLOWED_MEDIA_TYPES = [ 'image' ]; -/** - * Basic Image Control. - */ -class KadenceImageControl extends Component { - constructor() { - super( ...arguments ); - } - render() { - const { - label, - hasImage, - onSaveImage, - onRemoveImage, - disableMediaButtons, - imageURL, - imageID, - kadenceDynamic, - dynamicAttribute = '' } = this.props; - return ( -
- { ! hasImage && ( - - { label && ( -
{ label }
- ) } - onSaveImage( img ) } - accept="image/*" - className={ 'kadence-image-upload' } - allowedTypes={ ALLOWED_MEDIA_TYPES } - disableMediaButtons={ disableMediaButtons } - dynamicControl={ ( dynamicAttribute && kadence_blocks_params.dynamic_enabled ? : undefined ) } - /> - - ) } - { hasImage && ( - - { label && ( -
{ label }
- ) } - { dynamicAttribute && kadence_blocks_params.dynamic_enabled && kadenceDynamic && kadenceDynamic[ dynamicAttribute ] && kadenceDynamic[ dynamicAttribute ].enable ? ( -
- -
- ) : ( - - onSaveImage( img ) } - type="image" - value={ ( imageID ? imageID : '' ) } - render={ ( { open } ) => ( - - ) } - /> -
- ); - } -} -export default KadenceImageControl; diff --git a/src/packages/components/src/common/image-size-controls/index.js b/src/packages/components/src/common/image-size-controls/index.js deleted file mode 100644 index a15badffa..000000000 --- a/src/packages/components/src/common/image-size-controls/index.js +++ /dev/null @@ -1,161 +0,0 @@ -/** - * Measure Component - * - */ - -/** - * Import Icons - */ -import { isEmpty, compact, get, map } from 'lodash'; -import Select from 'react-select'; -/** - * Internal block libraries - */ -import { useState, useEffect } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -const ImageSizeControl = (props) => { - const [imageSizeOptions, setImageSizeOptions] = useState({}); - const { label, id, url, slug, onChange, fullSelection = true, selectByValue = true } = props; - const { image } = useSelect( - (select) => { - const { getMedia } = select('core'); - return { - image: id ? getMedia(id, { context: 'view' }) : null, - }; - }, - [id] - ); - const getImageSizeOptions = () => { - if (image) { - const sizes = undefined !== image.media_details.sizes ? image.media_details.sizes : []; - const imgSizes = Object.keys(sizes).map((item) => { - return { slug: item, name: item }; - }); - return compact( - map(imgSizes, ({ name, slug }) => { - const type = get(image, ['mime_type']); - if ('image/svg+xml' === type) { - return null; - } - const sizeUrl = get(image, ['media_details', 'sizes', slug, 'source_url']); - if (!sizeUrl) { - return null; - } - const sizeWidth = get(image, ['media_details', 'sizes', slug, 'width']); - if (!sizeWidth) { - return null; - } - const sizeHeight = get(image, ['media_details', 'sizes', slug, 'height']); - if (!sizeHeight) { - return null; - } - return { - value: sizeUrl, - label: name + ' (' + sizeWidth + 'x' + sizeHeight + ')', - slug: slug, - width: sizeWidth, - height: sizeHeight, - }; - }) - ); - } - return null; - }; - const getSmallImageSizeOptions = () => { - if (image) { - const sizes = undefined !== image.media_details.sizes ? image.media_details.sizes : []; - const standardSizes = []; - for (let i = 0; i < Object.keys(sizes).length; i++) { - const item = Object.keys(sizes)[i]; - if ( - 'thumbnail' === item || - 'medium' === item || - 'medium_large' === item || - 'large' === item || - 'full' === item - ) { - standardSizes.push({ slug: item, name: item }); - } - } - return compact( - map(standardSizes, ({ name, slug }) => { - const type = get(image, ['mime_type']); - if ('image/svg+xml' === type) { - return null; - } - const sizeUrl = get(image, ['media_details', 'sizes', slug, 'source_url']); - if (!sizeUrl) { - return null; - } - const sizeWidth = get(image, ['media_details', 'sizes', slug, 'width']); - if (!sizeWidth) { - return null; - } - const sizeHeight = get(image, ['media_details', 'sizes', slug, 'height']); - if (!sizeHeight) { - return null; - } - return { - value: sizeUrl, - label: name + ('full' === slug ? '' : ' (' + sizeWidth + 'x' + sizeHeight + ')'), - slug: slug, - width: sizeWidth, - height: sizeHeight, - }; - }) - ); - } - return null; - }; - - useEffect(() => { - if (undefined === fullSelection || true === fullSelection) { - setImageSizeOptions(getImageSizeOptions()); - } else { - setImageSizeOptions(getSmallImageSizeOptions()); - } - }, [image]); - return ( -
- {!isEmpty(imageSizeOptions) && (undefined === selectByValue || true === selectByValue) && ( - <> -

{label}

-
- imgSize.slug === slug)} - isMulti={false} - maxMenuHeight={250} - isClearable={false} - placeholder={''} - onChange={onChange} - /> -
- - )} -
- ); -}; - -export default ImageSizeControl; diff --git a/src/packages/components/src/common/media-placeholder/index.js b/src/packages/components/src/common/media-placeholder/index.js deleted file mode 100644 index 082b2d6c6..000000000 --- a/src/packages/components/src/common/media-placeholder/index.js +++ /dev/null @@ -1,443 +0,0 @@ -/** - * Focal Point control. - * - */ -import classnames from 'classnames'; -import { every, get, isArray, noop, startsWith } from 'lodash'; - -import { keyboardReturn } from '@wordpress/icons'; -import { Component, Fragment } from '@wordpress/element'; -import { - MediaUpload, - URLPopover, - MediaUploadCheck, -} from '@wordpress/block-editor'; -import { - Button, - FormFileUpload, - Placeholder, - DropZone, -} from '@wordpress/components'; - -import { withSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => ( - -
- -
- ) - ); - } - - renderUrlSelectionUI() { - const { onSelectURL } = this.props; - if ( ! onSelectURL ) { - return null; - } - const { isURLInputVisible, src } = this.state; - return ( -
- - { isURLInputVisible && ( - - ) } -
- ); - } - renderDynamicSelectionUI() { - const { dynamicControl } = this.props; - if ( ! dynamicControl ) { - return null; - } - return ( -
- { dynamicControl } -
- ); - } - - renderMediaUploadChecked() { - const { - selectLabel = __( 'Select Image', 'kadence-blocks' ), - selectIcon, - accept, - addToGallery, - allowedTypes = [], - isAppender, - mediaUpload, - multiple = false, - onSelect, - value = {}, - } = this.props; - - const mediaLibraryButton = ( - id ) : value.id - } - render={ ( { open } ) => { - return ( - - ); - } } - /> - ); - - if ( mediaUpload && isAppender ) { - return ( - - { this.renderDropZone() } - { - const content = ( - - { mediaLibraryButton } - { this.renderUrlSelectionUI() } - { this.renderCancelLink() } - { this.renderDynamicSelectionUI() } - - ); - return this.renderPlaceholder( - content, - openFileDialog - ); - } } - /> - - ); - } - - if ( mediaUpload ) { - const content = ( - - { this.renderDropZone() } - { mediaLibraryButton } - { this.renderUrlSelectionUI() } - { this.renderCancelLink() } - { this.renderDynamicSelectionUI() } - - ); - return this.renderPlaceholder( content ); - } - - return this.renderPlaceholder( mediaLibraryButton ); - } - - render() { - const { disableMediaButtons, dropZoneUIOnly } = this.props; - - if ( dropZoneUIOnly || disableMediaButtons ) { - return ( - { this.renderDropZone() } - ); - } - - return ( - - { this.renderMediaUploadChecked() } - - ); - } -} -export default withSelect( ( select ) => { - const { getSettings } = select( 'core/block-editor' ); - return { - mediaUpload: getSettings().mediaUpload, - }; -} )( KadenceMediaPlaceholder ); diff --git a/src/packages/components/src/common/radio-buttons/editor.scss b/src/packages/components/src/common/radio-buttons/editor.scss deleted file mode 100644 index 8a5247311..000000000 --- a/src/packages/components/src/common/radio-buttons/editor.scss +++ /dev/null @@ -1,59 +0,0 @@ -.kadence-radio-container-control { - display: flex; - position: relative; - z-index: 0; -} -.kadence-radio-container-control.components-button-group .components-button { - flex: 1 1 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 10px; - font-weight: 600; - font-style: normal; - text-transform: uppercase; - height: 40px; - line-height: 1.2; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 2px; - background: transparent; - color: #4A5568; - padding: 4px; - box-shadow: none; - white-space: normal; -} -.kadence-radio-container-control.components-button-group .components-button:not(:first-child) { - margin-left: 4px; -} -.kadence-radio-container-control.components-button-group .components-button.is-primary { - border-color: var( --wp-admin-theme-color,#00669b); - background: var( --wp-admin-theme-color,#00669b); - color: #fff; - box-shadow: none; -} -.kadence-radio-container-control.components-button-group .components-button.has-icon { - flex-direction: column; -} -.kadence-radio-container-control.components-button-group .components-button.has-icon svg {margin: 0 0 8px 0;} -.kadence-radio-container-control.components-button-group .components-button.has-icon.radio-no-label svg { - margin: 0; - * { - fill: currentColor !important; - } -} -.kadence-radio-control-flexwrap { - flex-wrap: wrap; - gap: 4px; -} -.kadence-radio-container-control.components-button-group.kadence-radio-control-flexwrap .components-button { - flex: 0 1 calc( 33.33% - ( 8px / 3 ) ); - margin: 0; - svg { - width: 100%; - } -} -.kadence-radio-container-control.components-button-group .components-button.kb-disabled-btn { - opacity: 0.6; - box-shadow: none !important; - color: #4A5568 !important; -} \ No newline at end of file diff --git a/src/packages/components/src/common/radio-buttons/index.js b/src/packages/components/src/common/radio-buttons/index.js deleted file mode 100644 index ebcd36167..000000000 --- a/src/packages/components/src/common/radio-buttons/index.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * Radio Buttons control. - * - */ -/** - * Import Css - */ - import './editor.scss'; - -import { - Button, - ButtonGroup, -} from '@wordpress/components'; -/** - * WordPress dependencies - */ - import { useInstanceId } from '@wordpress/compose'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function KadenceRadioButtons( { - label, - value, - onChange, - options = [], - className, - hideLabel=false, - wrap=false, - allowClear = false, - ...props - } ) { - const instanceId = useInstanceId( KadenceRadioButtons ); - const id = `inspector-radio-control-${ instanceId }`; - return ( -
- { label && ( -
- -
- ) } - - { options.map( ( option, index ) => - - )} - -
- ); -} diff --git a/src/packages/components/src/common/subsection-wrap/editor.scss b/src/packages/components/src/common/subsection-wrap/editor.scss deleted file mode 100644 index cfbf3f7fc..000000000 --- a/src/packages/components/src/common/subsection-wrap/editor.scss +++ /dev/null @@ -1,9 +0,0 @@ -.kadence-subsection-wrap .subsection-wrap-title { - font-weight: 500; - margin: 0 0 6px; -} -.kadence-subsection-wrap .kt-inner-subsection { - border: 1px solid var(--kb-border-color, #859CB6 ); - padding: 10px; - border-radius: 2px; -} \ No newline at end of file diff --git a/src/packages/components/src/common/subsection-wrap/index.js b/src/packages/components/src/common/subsection-wrap/index.js deleted file mode 100644 index e60ac2323..000000000 --- a/src/packages/components/src/common/subsection-wrap/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Radio Buttons control. - * - */ -/** - * Import Css - */ - import './editor.scss'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function SubsectionWrap( { - label, - className, - children, - } ) { - return ( -
- { label && ( -

{ label }

- ) } -
- { children } -
-
- ); -} diff --git a/src/packages/components/src/common/vertical-align-icon/index.js b/src/packages/components/src/common/vertical-align-icon/index.js deleted file mode 100644 index cc8324380..000000000 --- a/src/packages/components/src/common/vertical-align-icon/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * WordPress dependencies - */ -import { Path, SVG } from '@wordpress/components'; - -export default function VerticalAlignmentIcon( { value, isPressed = false } ) { - const iconToPath = { - top: 'M19.5 19.5H.5V.5h19v19zM1.607 18.392h16.786V1.608H1.607v16.784zM17.178 2.888H2.822v3.275h14.356V2.888z', - middle: 'M19.5 19.482H.5V.5h19v18.982zM1.607 18.375h16.786V1.607H1.607v16.768zm15.571-10.02H2.822v3.272h14.356V8.355z', - bottom: 'M19.518 19.5H.5V.5h19.018v19zm-17.91-1.108H18.41V1.608H1.608v16.784zm15.586-4.739H2.824v3.275h14.37v-3.275z', - }; - if ( ! iconToPath.hasOwnProperty( value ) ) { - return null; - } - - return ( - - - - ); -} diff --git a/src/packages/components/src/common/video-control/editor.scss b/src/packages/components/src/common/video-control/editor.scss deleted file mode 100644 index cca6750bc..000000000 --- a/src/packages/components/src/common/video-control/editor.scss +++ /dev/null @@ -1,19 +0,0 @@ -.kb-video-edit svg { - width: 1em; - height: 1em; -} -.components-kadence-video-btns { - display: flex; - align-items: center; -} -.components-kadence-video-btns .kb-cta-upload-btn { - border: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 2px; -} -.components-kadence-video-background__label { - display: block; - margin-bottom: 6px; -} -.kb-remove-video.kb-cta-upload-btn { - margin-left: 5px; -} \ No newline at end of file diff --git a/src/packages/components/src/common/video-control/index.js b/src/packages/components/src/common/video-control/index.js deleted file mode 100644 index 1e62e8628..000000000 --- a/src/packages/components/src/common/video-control/index.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - * Basic Image Control. - */ - -/** - * Import Kadence Components - */ -import KadenceMediaPlaceholder from '../media-placeholder'; -/** - * Import Css - */ - import './editor.scss'; -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Fragment, Component } from '@wordpress/element'; -import { - MediaUpload, -} from '@wordpress/block-editor'; -import { Button } from '@wordpress/components'; -/** - * Import Icons - */ - import { - video -} from '@kadence/icons'; -import { - image, - closeSmall, - plusCircleFilled, -} from '@wordpress/icons'; -const ALLOWED_MEDIA_TYPES = [ 'video' ]; -/** - * Basic Video Control. - */ -class KadenceVideoControl extends Component { - constructor() { - super( ...arguments ); - } - render() { - const { - label, - hasVideo, - onSaveVideo, - onRemoveVideo, - disableMediaButtons, - videoURL, - videoID } = this.props; - return ( -
- { ! hasVideo && ( - - { label && ( -
{ label }
- ) } - onSaveVideo( img ) } - accept="video/*" - className={ 'kadence-image-upload' } - allowedTypes={ ALLOWED_MEDIA_TYPES } - disableMediaButtons={ disableMediaButtons } - /> - - ) } - { hasVideo && ( - - { label && ( -
{ label }
- ) } -
- onSaveVideo( video ) } - type="video" - value={ ( videoID ? videoID : '' ) } - render={ ( { open } ) => ( - - ) } - /> -
- - ) } -
- ); - } -} -export default KadenceVideoControl; diff --git a/src/packages/components/src/copy-paste-attributes/index.js b/src/packages/components/src/copy-paste-attributes/index.js deleted file mode 100644 index 063b52324..000000000 --- a/src/packages/components/src/copy-paste-attributes/index.js +++ /dev/null @@ -1,93 +0,0 @@ -/** - * Copy and Paste Block Styles Component - * - */ -import { flow } from 'lodash'; -import { __ } from '@wordpress/i18n'; -import { - MenuGroup, - MenuItem, - ToolbarDropdownMenu, -} from '@wordpress/components'; - -import { - getTransferableAttributes, -} from '@kadence/helpers'; - -/** - * Import Icons - */ - import { - copy, - paste, - copyStyles, -} from '@kadence/icons'; - - -const { - localStorage, -} = window; - -/** - * Build the copy and paste controls - * @returns {object} The copy and paste controls. - */ -export default function CopyPasteAttributes ( { - attributes, - defaultAttributes = {}, - blockSlug, - excludedAttrs = [], - preventMultiple = [], - onPaste, -} ) { - - const storageKey = blockSlug + '-style'; - const currentCopiedStyles = JSON.parse( localStorage.getItem( storageKey ) ); - - const copyAction = () => { - //grab all block attributes, minus the exclusions - //store the attributes to be pasted later - localStorage.setItem( storageKey, JSON.stringify( getTransferableAttributes( attributes, defaultAttributes, excludedAttrs, preventMultiple ) ) ); - }; - - const pasteAction = () => { - const pasteItem = JSON.parse( localStorage.getItem( storageKey ) ); - - if ( pasteItem ) { - onPaste( pasteItem ); - } - }; - - return ( - - { ( { onClose } ) => ( - <> - - - { __( 'Copy Styles', 'kadence-blocks' ) } - - - { __( 'Paste Styles', 'kadence-blocks' ) } - - - - ) } - - ); -} diff --git a/src/packages/components/src/divider-select-control/editor.scss b/src/packages/components/src/divider-select-control/editor.scss deleted file mode 100644 index 60f152a89..000000000 --- a/src/packages/components/src/divider-select-control/editor.scss +++ /dev/null @@ -1,145 +0,0 @@ -// Button -.rfipbtn.rfipbtn--dividers { - background-color: #fff; - border: 1px solid #e0e0e0; - width: 96%; - &:active, - &:focus { - border: 1px solid #bdbdbd; - } - // dropdown button - .rfipbtn__current { - flex: 100%; - justify-content: flex-start; - padding: 0; - svg.top-icon { - transform: rotate(180deg) !important; - } - .rfipbtn__icon { - width: 100%; - .rfipbtn__elm { - width: 100%; - } - } - } - .rfipbtn__button { - border: 0 none transparent; - border-left: 1px solid #e0e0e0; - background-color: #f5f5f5; - color: #424242; - - &:hover { - background-color: #bdbdbd; - } - - &:active { - box-shadow: inset 0 0 10px 0 #e0e0e0; - } - } - - // icon - .rfipbtn__icon { - border: 0; - color: #424242; - - // empty - &--empty { - color: #555d66; - text-transform: none; - text-align: left; - } - } - - // del - .rfipbtn__del { - background-color: #eee; - - &:hover { - background-color: #e0e0e0; - } - - &:focus, - &:active { - outline: 1px solid #e0e0e0; - } - } -} -.rfipdropdown.rfipdropdown--dividers { - max-height: 240px; - overflow: scroll; -} -.rfipdropdown.rfipdropdown--dividers { - background-color: #fff; - border: 1px solid #e0e0e0; - .rfipdropdown__selector { - overflow: hidden; - padding: 8px; - } - .rfipicons__pager { - display: none; - } - // Icons box - .rfipicons { - // current page - &__cp { - border-bottom:1px solid #bdbdbd; - &:focus { - border-bottom-color: #9e9e9e; - } - } - - &__left, - &__right { - background-color: #eee; - border: 1px solid #eee; - color: #424242; - &:hover { - background-color: #bdbdbd; - border: 1px solid #bdbdbd; - } - &:focus, - &:active { - border: 1px solid #bdbdbd; - } - } - - // Individual icon box - &__ibox { - background-color: #f5f5f5; - border: 1px solid #f5f5f5; - color: #424242; - &:hover { - background-color: #bdbdbd; - border: 1px solid #bdbdbd; - } - &:focus, - &:active { - border: 1px solid #bdbdbd; - } - &--error { - color: red; - } - } - - // Invidual icons - &__icon { - width:100%; - height: 50px; - margin: 2px 0; - svg { - fill: #000; - width: 100%; - transform: scale(1); - } - svg.top-icon { - transform: rotate(180deg) !important; - } - // selected - &--selected { - .rfipicons__ibox { - background-color: #eee; - } - } - } - } -} \ No newline at end of file diff --git a/src/packages/components/src/drop-shadow-control/index.js b/src/packages/components/src/drop-shadow-control/index.js deleted file mode 100644 index a318157f1..000000000 --- a/src/packages/components/src/drop-shadow-control/index.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * DropShadow Component - * - */ - -/** - * Import Externals - */ -import PopColorControl from '../pop-color-control'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; -/** - * Build the DropShadow controls - * @returns {object} DropShadow settings. - */ -class DropShadowControl extends Component { - constructor( label, enable = true, color, colorDefault, opacity, blur, hOffset, vOffset, onColorChange, onOpacityChange, onBlurChange, onHOffsetChange, onVOffsetChange, onEnableChange ) { - super( ...arguments ); - } - render() { - return ( -
- { this.props.label && ( -
-

{ this.props.label }

- { this.props.onEnableChange && ( - this.props.onEnableChange( value ) } - /> - ) } -
- ) } - { this.props.enable && ( -
-
-
-

{ __( 'Color' ) }

- this.props.onColorChange( value ) } - opacityValue={ this.props.opacity } - onOpacityChange={ value => this.props.onOpacityChange( value ) } - onArrayChange={ this.props.onArrayChange ? ( color, opacity ) => this.props.onArrayChange( color, opacity ) : undefined } - /> -
-
-

{ __( 'X' ) }

-
-
- this.props.onHOffsetChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ __( 'Y' ) }

-
-
- this.props.onVOffsetChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ __( 'Blur' ) }

-
-
- this.props.onBlurChange( Number( event.target.value ) ) } - min={ 0 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-
- ) } -
- ); - } -} -export default ( DropShadowControl ); diff --git a/src/packages/components/src/dynamic-background-control/index.js b/src/packages/components/src/dynamic-background-control/index.js deleted file mode 100644 index dbeabb7f4..000000000 --- a/src/packages/components/src/dynamic-background-control/index.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * External Dependencies - */ -import { debounce } from 'lodash'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { Button, withFilters, Popover, ExternalLink } from '@wordpress/components'; -import { createRef } from '@wordpress/element'; - -/** - * Internal Dependencies - */ - -/** - * Build the Dynamic Background controls - */ -class DynamicBackgroundControl extends Component { - constructor() { - super( ...arguments ); - - this.toggle = this.toggle.bind( this ); - this.state = { - open: false, - }; - this.popRef = createRef(); - this.debouncedToggle = debounce( this.toggle.bind( this ), 100 ); - } - toggle() { - this.setState( { open: ! this.state.open } ); - } - render() { - const { open } = this.state; - - // @todo: Replace with icon from @kadence/icons once created - let icons = {}; - icons.dynamic = - - ; - - return ( -
-
- ); - } -}; - -export default withFilters( 'kadence.BackgroundDynamicControl' )( DynamicBackgroundControl ); diff --git a/src/packages/components/src/dynamic-gallery-control/index.js b/src/packages/components/src/dynamic-gallery-control/index.js deleted file mode 100644 index 13e4c0ca0..000000000 --- a/src/packages/components/src/dynamic-gallery-control/index.js +++ /dev/null @@ -1,80 +0,0 @@ - /** - * External Dependencies - */ - import { debounce } from 'lodash'; - - /** - * WordPress dependencies - */ - import { __ } from '@wordpress/i18n'; - import { Component } from '@wordpress/element'; - import { Button, withFilters, Popover, ExternalLink } from '@wordpress/components'; - import { createRef } from '@wordpress/element'; - - /** - * Build the Dynamic Image controls - */ -class DynamicGalleryControl extends Component { - constructor() { - super( ...arguments ); - - this.toggle = this.toggle.bind( this ); - this.state = { - open: false, - }; - this.popRef = createRef(); - this.debouncedToggle = debounce( this.toggle.bind( this ), 100 ); - } - toggle() { - this.setState( { open: ! this.state.open } ); - } - render() { - const { open } = this.state; - // @todo: Replace with icon from @kadence/icons once created - let icons = {}; - icons.dynamic = - - ; - return ( -
-
- ); - } - }; - - export default withFilters( 'kadence.GalleryDynamicControl' )( DynamicGalleryControl ); - \ No newline at end of file diff --git a/src/packages/components/src/dynamic-image-control/index.js b/src/packages/components/src/dynamic-image-control/index.js deleted file mode 100644 index 912b1c251..000000000 --- a/src/packages/components/src/dynamic-image-control/index.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * External Dependencies - */ - import { debounce } from 'lodash'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button, withFilters, Popover, ExternalLink } from '@wordpress/components'; -import { createRef, Component } from '@wordpress/element'; - -/** - * Internal Dependencies - */ - - -/** - * Build the Dynamic Image controls - */ -class DynamicImageControl extends Component { - constructor() { - super( ...arguments ); - - this.toggle = this.toggle.bind( this ); - this.state = { - open: false, - }; - this.popRef = createRef(); - this.debouncedToggle = debounce( this.toggle.bind( this ), 100 ); - } - toggle() { - this.setState( { open: ! this.state.open } ); - } - render() { - const { open } = this.state; - - // @todo: Replace with icon from @kadence/icons once created - let icons = {}; - icons.dynamic = - - ; - - return ( -
-
- ); - } -}; - -export default withFilters( 'kadence.ImageDynamicControl' )( DynamicImageControl ); diff --git a/src/packages/components/src/dynamic-inline-replace-control/index.js b/src/packages/components/src/dynamic-inline-replace-control/index.js deleted file mode 100644 index 15ff95696..000000000 --- a/src/packages/components/src/dynamic-inline-replace-control/index.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; -import { withFilters } from '@wordpress/components'; - -/** - * Build the Dynamic Inline Replace controls (all replaced by Pro) - */ -class DynamicInlineReplaceControl extends Component { - constructor() { - super( ...arguments ); - } - render() { - return; - } -}; - -export default withFilters( 'kadence.InlineReplaceDynamicControl' )( DynamicInlineReplaceControl ); diff --git a/src/packages/components/src/dynamic-text-control/index.js b/src/packages/components/src/dynamic-text-control/index.js deleted file mode 100644 index 0e809d0cf..000000000 --- a/src/packages/components/src/dynamic-text-control/index.js +++ /dev/null @@ -1,86 +0,0 @@ -/** - * External Dependencies - */ - import { debounce } from 'lodash'; - - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { Button, withFilters, Popover, ExternalLink, ToolbarGroup, ToolbarButton } from '@wordpress/components'; -import { createRef } from '@wordpress/element'; - -/** - * Internal Dependencies - */ - - -/** - * Build the Dynamic Link controls - */ -class DynamicTextControl extends Component { - constructor() { - super( ...arguments ); - - this.toggle = this.toggle.bind( this ); - this.state = { - open: false, - }; - this.popRef = createRef(); - this.debouncedToggle = debounce( this.toggle.bind( this ), 100 ); - } - toggle() { - this.setState( { open: ! this.state.open } ); - } - render() { - const { open } = this.state; - - // @todo: Replace with icon from @kadence/icons once created - let icons = {}; - icons.dynamic = - - ; - - return ( - - this.debouncedToggle() } - isPressed={ false } - aria-haspopup="true" - aria-expanded={ open } - label={ __( 'Dynamic Content', 'kadence-blocks' ) } - showTooltip={ true } - /> - { open && ( - {} } - expandOnMobile={ true } - onClose={ () => this.debouncedToggle() } - ref={ this.popRef } - > -
-
-

{ __( 'Dynamic Content', 'kadence-blocks' ) }

-

{ __( 'Create dynamic sites by populating content from various sources.', 'kadence-blocks' ) }

- { __( 'Upgrade to Pro', 'kadence-blocks' ) } -
-
- - ) } - - ); - } -}; - -export default withFilters( 'kadence.TextDynamicControl' )( DynamicTextControl ); diff --git a/src/packages/components/src/dynamic-text-input-control/editor.scss b/src/packages/components/src/dynamic-text-input-control/editor.scss deleted file mode 100644 index f95c42ae2..000000000 --- a/src/packages/components/src/dynamic-text-input-control/editor.scss +++ /dev/null @@ -1,46 +0,0 @@ -.components-base-control.kadence-form-input-control - .kadence-controls-content - .components-button.kb-dynamic-form-input-sidebar.has-icon { - border: 1px solid var(--kb-border-color, #859cb6); - height: 30px; - border-radius: 0; - height: 100%; - - svg { - height: 16px; - width: 16px; - } -} -.kadence-form-input-control__title { - font-weight: 500; - line-height: 1.4; - display: inline-block; - margin-bottom: calc(8px); - padding: 0px; -} -.components-base-control.kadence-form-input-control .kadence-controls-content { - width: 100%; - display: flex; -} -.components-base-control.kadence-form-input-control .kadence-controls-content .components-base-control__field { - margin: 0; -} -.components-base-control.kadence-form-input-control .kadence-controls-content .components-base-control { - margin: 0; - width: 100%; -} -.kadence-form-input-control__dynamic__label { - border: 1px solid #949494; - border-radius: 0px; - border-right: 0; - padding: 6px 8px; - width: 100%; - background-color: #f0f0f1; - min-height: 30px; - font-size: 13px; - line-height: normal; -} -.kadence-form-input-control__dynamic__label .kb-dynamic-link-label svg { - height: 13px; - max-width: 13px; -} diff --git a/src/packages/components/src/dynamic-text-input-control/index.js b/src/packages/components/src/dynamic-text-input-control/index.js deleted file mode 100644 index f8eddec8d..000000000 --- a/src/packages/components/src/dynamic-text-input-control/index.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * WordPress dependencies - */ -import DynamicTextPopover from '../dynamic-text-popover'; - -import { __ } from '@wordpress/i18n'; -import { Button, TextControl } from '@wordpress/components'; -import { map, isEqual } from 'lodash'; -/** - * WordPress dependencies - */ -import { useInstanceId } from '@wordpress/compose'; -import { applyFilters } from '@wordpress/hooks'; - -/** - * Import Css - */ -import './editor.scss'; -export default function DynamicTextInputControl({ - value, - onChange, - label, - className, - reset, - defaultValue = '', - dynamicAttribute, - isSelected, - attributes, - setAttributes, - name, - clientId, - context, -}) { - const instanceId = useInstanceId(DynamicTextInputControl); - const onReset = () => { - if (typeof reset === 'function') { - reset(); - } else { - onChange(defaultValue); - } - }; - const { kadenceDynamic } = attributes; - const hasDynamic = - undefined !== kadenceDynamic && - undefined !== kadenceDynamic[dynamicAttribute] && - undefined !== kadenceDynamic[dynamicAttribute].enable && - '' !== kadenceDynamic[dynamicAttribute].enable - ? kadenceDynamic[dynamicAttribute].enable - : false; - return ( -
- {label && ( -
- {label && ( -
- - {reset && ( -
-
- )} -
- )} -
- )} -
- {hasDynamic && ( -
- {applyFilters('kadence.formInputDisplay', value, attributes, dynamicAttribute)} -
- )} - {!hasDynamic && onChange(value)} />} - -
-
- ); -} diff --git a/src/packages/components/src/dynamic-text-popover/index.js b/src/packages/components/src/dynamic-text-popover/index.js deleted file mode 100644 index 8b0f5e0c7..000000000 --- a/src/packages/components/src/dynamic-text-popover/index.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button, withFilters, Popover, ExternalLink } from '@wordpress/components'; -import { createRef, Fragment, Component } from '@wordpress/element'; -import { debounce } from 'lodash'; -import { applyFilters } from '@wordpress/hooks'; -import { useState } from '@wordpress/element'; - -/** - * External dependencies - */ -import { dynamic } from '@kadence/icons'; - -function DynamicTextPopover() { - const [popoverAnchor, setPopoverAnchor] = useState(); - const [isVisible, setIsVisible] = useState(false); - const toggleVisible = () => { - setIsVisible(!isVisible); - }; - const debounceToggle = debounce(toggleVisible, 100); - return ( -
-
- ); -} -export default withFilters('kadence.FormInputDynamicControl')(DynamicTextPopover); diff --git a/src/packages/components/src/editor.scss b/src/packages/components/src/editor.scss deleted file mode 100644 index e713e7faf..000000000 --- a/src/packages/components/src/editor.scss +++ /dev/null @@ -1,102 +0,0 @@ -svg { - --kadence-color: #0058b0; - --kadence-color-white: #fff; -} -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents svg, .components-button.is-pressed .block-editor-block-icon svg { - --kadence-color: currentColor; - --kadence-color-white: var(--wp-admin-theme-color); -} -// Kadence Custom CSS -.components-modal__frame.kadence-css-modal { - width: 80%; - max-width: 1200px; - height: 80%; - max-height: 800px; -} - -.components-modal__frame.kadence-css-modal .components-button.is-secondary { - position: absolute; - bottom: 20px; - right: 32px; -} -.components-modal__frame.kadence-css-modal .components-modal__content { - padding-bottom: 50px; -} -.components-button.kadence-css-modal-open.has-text.has-icon { - box-shadow: none !important; -} -// Kadence Range CSS -.kadence-range-control-inner { - box-sizing: border-box; - align-items: flex-start; - display: flex; - -webkit-box-pack: start; - justify-content: flex-start; - padding: 0px; - position: relative; - width: 100%; -} -.kadence-controls-content .kadence-range-control-inner .components-base-control { - margin-bottom: 0; -} - -.kadence-range-control-inner .components-range-control.kadence-range-control-range { - flex-grow: 1; - margin-bottom: 0; -} -.kadence-range-control-inner .components-flex.components-input-control.components-number-control.components-range-control__number { - display: flex; -} -.kadence-range-control-inner .components-base-control.kt-range-number-input{ - margin-left: 16px; - margin-bottom: 0; - flex: 0 1 65px; -} -// link. -.kb-side-link-control .components-base-control__label { - margin-bottom: 6px; - display: block; -} -.kb-letter-case .kadence-radio-container-control.components-button-group .components-button { - height: 32px; - text-transform:none; -} -.kadence-two-column-group .components-base-control > .kadence-component__header, .kadence-font-size-control.components-base-control > .kadence-component__header { - font-size: 11px; - font-weight: 500; - text-transform: uppercase; -} -// Copy Paste Styles -.kb-copy-paste-styles__popover .components-menu-item__button svg { - width: 16px; - height: 16px; -} -// Vertical Align -.components-toolbar-group.kb-vertical-align .components-button svg { - width: 18px; - height: 18px; - min-width: 0; -} - -/// Old size type, needs to be updated to new radio component. -.kt-btn-size-settings-container .kt-button-size-type-options { - margin-bottom: 0; - display: flex; -} -.kt-btn-size-settings-container { - display: flex; - align-items: center; - margin: 20px 0; -} -.kt-btn-size-settings-container .kt-beside-btn-group { - flex-grow: 1; - margin: 0; -} -.kt-button-size-type-options .dashicon { - width: 14px; - height: 14px; - font-size: 14px; -} -.kt-btn-size-settings-container .components-button-group .components-button.is-primary svg { - fill: white; -} \ No newline at end of file diff --git a/src/packages/components/src/focal-picker/editor.scss b/src/packages/components/src/focal-picker/editor.scss deleted file mode 100644 index 37b8dba11..000000000 --- a/src/packages/components/src/focal-picker/editor.scss +++ /dev/null @@ -1,63 +0,0 @@ -.kadence-image-background-control{ - .kadence-image-upload { - margin: 0; - min-height: 0; - .components-placeholder__fieldset { - flex-direction: row; - flex-wrap: wrap; - } - .components-button.is-primary { - height: 100px; - width: 100%; - justify-content: center; - background: rgba(0,0,0,.04); - color: var(--wp-admin-theme-color); - &:hover:not(:disabled) { - background: var(--wp-admin-theme-color-darker-10); - color: #fff; - } - } - } - .kb-dynamic-background-sidebar-wrap { - display: inline-block; - } - > .kb-dynamic-background-sidebar-wrap .kb-dynamic-background-sidebar.has-icon, > .kb-dynamic-background-sidebar-top .kb-dynamic-background-sidebar.has-icon { - border: 1px solid var(--kb-border-color, #859CB6 ); - margin-bottom: 10px; - margin-left: 5px; - color: #1e1e1e; - border-radius: 4px; - &.is-pressed { - color:white; - } - svg { - max-width: 14px; - } - } - > .kb-dynamic-background-sidebar-top .kb-dynamic-background-sidebar.has-icon { - margin-left: 0; - } - .components-kadence-image-background__label { - margin-bottom: 6px; - } - .block-editor-media-placeholder__dynamic-input-container { - margin-left: auto; - margin-right: 0; - } -} -.kadence-image-background-control .block-editor-media-placeholder__dynamic-input-container .kb-dynamic-background-sidebar { - margin-bottom: 0; -} -.kadence-image-background-control .block-editor-media-placeholder__dynamic-input-container .kb-dynamic-background-sidebar svg { - max-width: 16px; -} -.kadence-image-background-control .kadence-image-upload .components-placeholder__label:empty { - padding: 0; - margin: 0; -} -.block-editor-media-placeholder__dynamic-input-container { - margin-left: 12px; -} -.block-editor-media-placeholder__dynamic-input-container svg { - max-width: 14px; -} \ No newline at end of file diff --git a/src/packages/components/src/focal-picker/index.js b/src/packages/components/src/focal-picker/index.js deleted file mode 100644 index cac64a7d0..000000000 --- a/src/packages/components/src/focal-picker/index.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * Focal Point control. - */ -import { Component } from '@wordpress/element'; -import { FocalPointPicker } from '@wordpress/components'; -/** - * Focal Point control - */ -class KadenceFocalPicker extends Component { - constructor() { - super( ...arguments ); - this.onPositionChange = this.onPositionChange.bind( this ); - this.convertPosition = this.convertPosition.bind( this ); - this.state = { - position: null, - }; - } - convertPosition( position ) { - if ( ! position ) { - return { x: 0.5, y: 0.5 }; - } - let positionX = 0.5; - let positionY = 0.5; - const positionArray = position.split( ' ' ); - if ( positionArray && positionArray[ 0 ] ) { - switch ( positionArray[ 0 ] ) { - case 'left': - positionX = 0; - break; - case 'right': - positionX = 1; - break; - case 'center': - positionX = 0.5; - break; - default: - positionX = parseInt( positionArray[ 0 ], 10 ) / 100; - break; - } - } - if ( positionArray && positionArray[ 1 ] ) { - switch ( positionArray[ 1 ] ) { - case 'top': - positionY = 0; - break; - case 'bottom': - positionY = 1; - break; - case 'center': - positionY = 0.5; - break; - default: - positionY = parseInt( positionArray[ 1 ], 10 ) / 100; - break; - } - } - return { x: positionX, y: positionY }; - } - onPositionChange( position ) { - this.setState( { position: position } ); - let focalPoint; - if ( position && undefined !== position.x && '' !== position.x ) { - focalPoint = ( position.x * 100 ) + '% ' + ( position.y * 100 ) + '%'; - } - this.props.onChange( focalPoint ); - } - render() { - const imagePosition = this.state.position ? this.state.position : this.convertPosition( this.props.value ); - return ( - this.onPositionChange( focalPoint ) } - /> - ); - } -} -export default ( KadenceFocalPicker ); diff --git a/src/packages/components/src/font-size/constants.js b/src/packages/components/src/font-size/constants.js deleted file mode 100644 index 01f916bb6..000000000 --- a/src/packages/components/src/font-size/constants.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Internal block libraries - */ - import { __ } from '@wordpress/i18n'; -export const OPTIONS_MAP = [ - { - value: 'sm', - output: 'var(--global-kb-font-size-sm, 0.9rem)', - size: 14, - label: __( 'SM', 'kadence-blocks' ), - name: __( 'Small', 'kadence-blocks' ), - }, - { - value: 'md', - output: 'var(--global-kb-font-size-md, 1.2rem)', - size: 32, - label: __( 'MD', 'kadence-blocks' ), - name: __( 'Medium', 'kadence-blocks' ), - }, - { - value: 'lg', - output: 'var(--global-kb-font-size-lg, 3rem)', - size: 48, - label: __( 'LG', 'kadence-blocks' ), - name: __( 'Large', 'kadence-blocks' ), - }, - { - value: 'xl', - output: 'var(--global-kb-font-size-xl, 4rem)', - size: 64, - label: __( 'XL', 'kadence-blocks' ), - name: __( 'X Large', 'kadence-blocks' ), - }, - { - value: 'xxl', - output: 'var(--global-kb-font-size-xxl, 5rem)', - size: 80, - label: __( 'XXL', 'kadence-blocks' ), - name: __( '2X Large', 'kadence-blocks' ), - }, -]; \ No newline at end of file diff --git a/src/packages/components/src/font-size/editor.scss b/src/packages/components/src/font-size/editor.scss deleted file mode 100644 index f0f0998d8..000000000 --- a/src/packages/components/src/font-size/editor.scss +++ /dev/null @@ -1,79 +0,0 @@ -.kadence-font-size-control .components-button-group.kadence-radio-container-control { - flex: 1; -} -.kadence-font-size-control .kadence-single-unit-control .components-button-group.kadence-radio-container-control { - flex:0; -} -.kadence-font-size-control .kadence-radio-container-control.components-button-group .components-button { - height: 32px; - min-width: 20px; -} -.kadence-font-size-control .kadence-radio-container-control.components-button-group .components-button.has-icon.only-icon svg { - margin: 0; - width: 1em; - height: 1em; - font-size: 18px; -} -.kadence-font-size-control .kadence-single-unit-control .components-unit-control-wrapper { - flex-grow: 2; -} -.kadence-font-size-control .kadence-single-unit-control { - gap: 0; -} -.kadence-controls-content.kadence-single-unit-control { - > .components-base-control { - margin-bottom: 0; - } -} -.kadence-font-size-control .kadence-single-unit-control .components-unit-control-wrapper .components-input-control__backdrop { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border: 1px solid var(--kb-border-color, #859CB6 ) !important; - border-right: 0 !important; -} -.kb-responsive-unit-control .kadence-component__header__title.kadence-unit__title { - white-space: nowrap; - overflow: hidden; -} -.kadence-font-size-control .kadence-single-unit-control .components-input-control__input:not(.specific) { - height: 32px; -} -.kadence-font-size-control .kadence-single-unit-control .kadence-measure-control-select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - border-radius: 0px 2px 2px 0px; - display: block; - outline: none; - margin: 0px; - min-height: auto; - font-family: inherit; - box-sizing: border-box; - padding: 2px 1px; - width: 20px; - color: rgb(47, 47, 47); - font-size: 10px; - line-height: 1; - letter-spacing: -0.5px; - text-transform: uppercase; - -moz-text-align-last: center; - text-align-last: center; - height: 100%; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - transition: box-shadow 0.1s linear 0s, border 0.1s linear 0s; - cursor: pointer; - &:hover { - background-color: #F8F9FB; - } - &[disabled] { - cursor: not-allowed; - background: transparent; - &:hover { - background: transparent; - } - } -} \ No newline at end of file diff --git a/src/packages/components/src/font-size/index.js b/src/packages/components/src/font-size/index.js deleted file mode 100644 index 3c9141f26..000000000 --- a/src/packages/components/src/font-size/index.js +++ /dev/null @@ -1,299 +0,0 @@ -/** - * Range Control - * - */ -/** - * WordPress dependencies - */ - import { useState, useEffect } from '@wordpress/element'; - import { map, isEqual } from 'lodash'; - -/** - * Import Css - */ -import './editor.scss'; -/** - * Internal block libraries - */ - import { __ } from '@wordpress/i18n'; -import { - Flex, - FlexBlock, - FlexItem, - Button, - DropdownMenu, - Popover, - SelectControl, - ButtonGroup, - __experimentalUnitControl as UnitControl -} from '@wordpress/components'; -import { settings, link, linkOff, undo } from '@wordpress/icons'; -import { FONT_SIZES_MAP } from '@kadence/helpers'; -function isCustomOption( optionsArray, value ) { - if ( ! value ) { - return false; - } - if ( ! optionsArray ) { - return false; - } - return ( - ! optionsArray.find( ( option ) => option.value === value ) - ); -} -function getOptionSize( optionsArray, value ) { - if ( ! value ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( value === '0' ) { - return 0; - } - const found = optionsArray.find( ( option ) => option.value === value ); - if ( ! found ) { - return ''; - } - return found.size; -} -function getOptionFromSize( optionsArray, size ) { - if ( ! size ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( size === '0' ) { - return ''; - } - const found = optionsArray.find( ( option ) => option.size === size ); - if ( ! found ) { - return ''; - } - return found.value; -} -function getOptionValue( optionsArray, value ) { - if ( ! value ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( value === '0' ) { - return 0; - } - const found = optionsArray.find( ( option ) => option.value === value ); - if ( ! found ) { - return ''; - } - return found.value; -} -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function FontSizeControl( { - label, - onChange, - value = '', - className = '', - options = FONT_SIZES_MAP, - step = 1, - max = 200, - min = 0, - defaultValue = '', - unit = 'px', - onUnit, - units = [ 'px', 'em', 'rem' ], - disableCustomSizes = false, - customControl = false, - setCustomControl = null, - parentLabel = null, - reset = true, - radio = true, - preventUnitSelection = false, -} ) { - const [ isCustom, setIsCustom ] = useState( false ); - useEffect( () => { - setIsCustom( isCustomOption( options, value ) ); - }, [] ); - const realIsCustomControl = setCustomControl ? customControl : isCustom; - const realSetIsCustom = setCustomControl ? setCustomControl : setIsCustom; - const onChangeCustom = ( newSize ) => { - const isNumeric = ! isNaN( parseFloat( newSize ) ); - const nextValue = isNumeric ? parseFloat( newSize ) : undefined; - onChange( nextValue ); - }; - const controlUnits = units.map( ( unitItem ) => ( { - value: unitItem, - label: unitItem, - } ) ); - const currentValue = ! realIsCustomControl ? getOptionValue( options, value ) : value; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - onChange( defaultValue ); - } - } - const selectOptions = [ { - value: '', - output: '', - size: '', - label: __( 'Inherit', 'kadence-blocks' ), - name: __( 'Inherit', 'kadence-blocks' ), - }, ...options ];; - return [ - onChange && ( -
- { ! setCustomControl && label && ( -
-
- - { reset && ( -
-
- ) } -
-
- ) } - { ! realIsCustomControl && radio && ( -
- - { options.map( ( option, index ) => - - )} - { ! disableCustomSizes && ( -
- ) } - { ! realIsCustomControl && ! radio && ( -
- { - if ( currentValue == value && defaultValue == '' ) { - onChange( '' ); - } else { - onChange( value )} - } - } - /> - { ! disableCustomSizes && ( - -
- ) } - { realIsCustomControl && ( -
- onChangeCustom( newVal ) } - /> -
- -
- { ! disableCustomSizes && ( - -
- ) } -
- ), - ]; -} diff --git a/src/packages/components/src/font-size/responsive.js b/src/packages/components/src/font-size/responsive.js deleted file mode 100644 index d8c4fd10b..000000000 --- a/src/packages/components/src/font-size/responsive.js +++ /dev/null @@ -1,211 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ - import { useSelect, useDispatch } from '@wordpress/data'; - import { useState, useRef } from '@wordpress/element'; - import { __ } from '@wordpress/i18n'; - import { map, isEqual } from 'lodash'; - import FontSizeControl from './index'; - import { capitalizeFirstLetter, FONT_SIZES_MAP } from '@kadence/helpers'; - import { undo } from '@wordpress/icons'; - import { - Dashicon, - Button, - DropdownMenu, - ButtonGroup, - } from '@wordpress/components'; - import { settings, link, linkOff } from '@wordpress/icons'; - /** - * Build the Measure controls - * @returns {object} Measure settings. - */ - export default function ResponsiveFontSizeControl( { - label, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - units = [ 'px', 'em', 'rem' ], - onUnit, - options = FONT_SIZES_MAP, - step = 1, - max = 200, - min = 0, - unit = 'px', - defaultValue = [ '', '', '' ], - reset = true, - radio = true, - compressedDevice = false, - } ) { - const ref = useRef(); - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const currentValue = [ value, tabletValue, mobileValue ]; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - if ( deviceType === 'Mobile' ) { - onChangeMobile( defaultValue[2] ); - } else if ( deviceType === 'Tablet' ) { - onChangeTablet( defaultValue[1] ); - } else { - onChange( defaultValue[0] ); - } - } - } - const output = {}; - output.Mobile = ( - onChangeMobile( size ) } - options={ options } - onUnit={ onUnit } - defaultValue={ defaultValue[2] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - radio={ radio } - preventUnitSelection={ true } - /> - ); - output.Tablet = ( - onChangeTablet( size ) } - options={ options } - onUnit={ onUnit } - defaultValue={ defaultValue[1] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - radio={ radio } - preventUnitSelection={ true } - /> - ); - output.Desktop = ( - onChange( size ) } - options={ options } - onUnit={ onUnit } - defaultValue={ defaultValue[0] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - radio={ radio } - /> - ); - const icons = { - Desktop: , - Tablet: , - Mobile: , - } - const createLevelControlToolbar = ( mappedDevice ) => { - return [ { - title: mappedDevice.name, - icon: mappedDevice.title, - isActive: deviceType === mappedDevice.name, - onClick: () => { - customSetPreviewDeviceType( mappedDevice.name ); - }, - } ]; - }; - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - { ! compressedDevice && ( - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - - )} - { compressedDevice && ( - createLevelControlToolbar( singleDevice ) ) } - /> - ) } -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ), - ]; - } - \ No newline at end of file diff --git a/src/packages/components/src/form-conditionals/index.js b/src/packages/components/src/form-conditionals/index.js deleted file mode 100644 index 0434af985..000000000 --- a/src/packages/components/src/form-conditionals/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * External Dependencies - */ - import { debounce } from 'lodash'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button, withFilters, Popover, ExternalLink } from '@wordpress/components'; -import { createRef, Component } from '@wordpress/element'; - -/** - * Internal Dependencies - */ - - -/** - * Build the Dynamic Image controls - */ -function KadenceFormConditionals ( props ) { - return ( - <> - ); -} -export default withFilters( 'kadence.FormConditionals' )( KadenceFormConditionals ); diff --git a/src/packages/components/src/gap-controls/editor.scss b/src/packages/components/src/gap-controls/editor.scss deleted file mode 100644 index a95a0f241..000000000 --- a/src/packages/components/src/gap-controls/editor.scss +++ /dev/null @@ -1,54 +0,0 @@ -.kadence-gap-size-control .components-button-group.kadence-radio-container-control { - flex: 1; -} -.kadence-gap-size-control .kadence-single-unit-control .components-button-group.kadence-radio-container-control { - flex:0; -} -.kadence-gap-size-control .kadence-radio-container-control.components-button-group .components-button { - height: 32px; - min-width: 20px; -} -.kadence-gap-size-control .kadence-radio-container-control.components-button-group .components-button.has-icon.only-icon svg { - margin: 0; - width: 1em; - height: 1em; - font-size: 18px; -} -.kadence-gap-size-control .kadence-single-unit-control .components-unit-control-wrapper { - flex-grow: 2; -} -.kadence-gap-size-control .kadence-single-unit-control { - gap: 2px; -} -.kadence-gap-size-control .kadence-single-unit-control .kadence-measure-control-select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - border-radius: 0px 2px 2px 0px; - display: block; - outline: none; - margin: 0px; - min-height: auto; - font-family: inherit; - box-sizing: border-box; - padding: 2px 1px; - width: 20px; - color: rgb(47, 47, 47); - font-size: 10px; - line-height: 1; - letter-spacing: -0.5px; - text-transform: uppercase; - -moz-text-align-last: center; - text-align-last: center; - height: 100%; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - transition: box-shadow 0.1s linear 0s, border 0.1s linear 0s; - cursor: pointer; - &:hover { - background-color: #F8F9FB; - } -} \ No newline at end of file diff --git a/src/packages/components/src/gap-controls/index.js b/src/packages/components/src/gap-controls/index.js deleted file mode 100644 index 5dad45345..000000000 --- a/src/packages/components/src/gap-controls/index.js +++ /dev/null @@ -1,290 +0,0 @@ -/** - * Range Control - * - */ -/** - * WordPress dependencies - */ -import { useState, useEffect } from '@wordpress/element'; -import { map, isEqual } from 'lodash'; - -/** -* Import Css -*/ -import './editor.scss'; -/** -* Internal block libraries -*/ -import { __ } from '@wordpress/i18n'; -import { - Flex, - FlexBlock, - FlexItem, - Button, - DropdownMenu, - Popover, - SelectControl, - ButtonGroup, - __experimentalUnitControl as UnitControl -} from '@wordpress/components'; -import { settings, link, linkOff, undo } from '@wordpress/icons'; -import { GAP_SIZES_MAP } from '@kadence/helpers'; -function isCustomOption( optionsArray, value ) { - if ( ! value ) { - return false; - } - if ( ! optionsArray ) { - return false; - } - return ( - ! optionsArray.find( ( option ) => option.value === value ) - ); -} -function getOptionSize( optionsArray, value ) { - if ( ! value ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( value === '0' ) { - return 0; - } - const found = optionsArray.find( ( option ) => option.value === value ); - if ( ! found ) { - return ''; - } - return found.size; -} -function getOptionFromSize( optionsArray, size ) { - if ( ! size ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( size === '0' ) { - return ''; - } - const found = optionsArray.find( ( option ) => option.size === size ); - if ( ! found ) { - return ''; - } - return found.value; -} -function getOptionValue( optionsArray, value ) { - if ( ! value ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( value === '0' ) { - return 0; - } - const found = optionsArray.find( ( option ) => option.value === value ); - if ( ! found ) { - return ''; - } - return found.value; -} -/** -* Build the Measure controls -* @returns {object} Measure settings. -*/ -export default function GapSizeControl( { - label, - onChange, - value = '', - className = '', - options = GAP_SIZES_MAP, - step = 1, - max = 200, - min = 0, - defaultValue = '', - unit = 'px', - onUnit, - units = [ 'px', 'em', 'rem' ], - disableCustomSizes = false, - customControl = false, - setCustomControl = null, - parentLabel = null, - reset = true, - radio = true, -} ) { - const [ isCustom, setIsCustom ] = useState( false ); - useEffect( () => { - setIsCustom( isCustomOption( options, value ) ); - }, [] ); - const realIsCustomControl = setCustomControl ? customControl : isCustom; - const realSetIsCustom = setCustomControl ? setCustomControl : setIsCustom; - const onChangeCustom = ( newSize ) => { - const isNumeric = ! isNaN( parseFloat( newSize ) ); - const nextValue = isNumeric ? parseFloat( newSize ) : undefined; - onChange( nextValue ); - }; - const controlUnits = units.map( ( unitItem ) => ( { - value: unitItem, - label: unitItem, - } ) ); - const currentValue = ! realIsCustomControl ? getOptionValue( options, value ) : value; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - onChange( defaultValue ); - } - } - const selectOptions = [ { - value: '', - output: '', - size: '', - label: __( 'Inherit', 'kadence-blocks' ), - name: __( 'Inherit', 'kadence-blocks' ), - }, ...options ];; - return [ - onChange && ( -
- { ! setCustomControl && label && ( -
-
- - { reset && ( -
-
- ) } -
-
- ) } - { ! realIsCustomControl && radio && ( -
- - { options.map( ( option, index ) => - - )} - { ! disableCustomSizes && ( -
- ) } - { ! realIsCustomControl && ! radio && ( -
- { - if ( currentValue == value && defaultValue == '' ) { - onChange( '' ); - } else { - onChange( value )} - } - } - /> - { ! disableCustomSizes && ( - -
- ) } - { realIsCustomControl && ( -
- onChangeCustom( newVal ) } - /> -
- -
- { ! disableCustomSizes && ( - -
- ) } -
- ), - ]; -} diff --git a/src/packages/components/src/gap-controls/responsive.js b/src/packages/components/src/gap-controls/responsive.js deleted file mode 100644 index e492598d5..000000000 --- a/src/packages/components/src/gap-controls/responsive.js +++ /dev/null @@ -1,208 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useRef } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map, isEqual } from 'lodash'; -import GapSizeControl from './index'; -import { capitalizeFirstLetter, GAP_SIZES_MAP } from '@kadence/helpers'; -import { undo } from '@wordpress/icons'; -import { - Dashicon, - Button, - DropdownMenu, - ButtonGroup, -} from '@wordpress/components'; -import { settings, link, linkOff } from '@wordpress/icons'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveGapSizeControl( { - label, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - units = [ 'px', 'em', 'rem' ], - onUnit, - options = GAP_SIZES_MAP, - step = 1, - max = 200, - min = 0, - unit = 'px', - defaultValue = [ '', '', '' ], - reset = true, - radio = true, - compressedDevice = false, - } ) { - const ref = useRef(); - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const currentValue = [ value, tabletValue, mobileValue ]; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - if ( deviceType === 'Mobile' ) { - onChangeMobile( defaultValue[2] ); - } else if ( deviceType === 'Tablet' ) { - onChangeTablet( defaultValue[1] ); - } else { - onChange( defaultValue[0] ); - } - } - } - const output = {}; - output.Mobile = ( - onChangeMobile( size ) } - options={ options } - onUnit={ onUnit } - defaultValue={ defaultValue[2] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - radio={ radio } - /> - ); - output.Tablet = ( - onChangeTablet( size ) } - options={ options } - onUnit={ onUnit } - defaultValue={ defaultValue[1] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - radio={ radio } - /> - ); - output.Desktop = ( - onChange( size ) } - options={ options } - onUnit={ onUnit } - defaultValue={ defaultValue[0] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - radio={ radio } - /> - ); - const icons = { - Desktop: , - Tablet: , - Mobile: , - } - const createLevelControlToolbar = ( mappedDevice ) => { - return [ { - title: mappedDevice.name, - icon: mappedDevice.title, - isActive: deviceType === mappedDevice.name, - onClick: () => { - customSetPreviewDeviceType( mappedDevice.name ); - }, - } ]; - }; - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - { ! compressedDevice && ( - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - - )} - { compressedDevice && ( - createLevelControlToolbar( singleDevice ) ) } - /> - ) } -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ), - ]; -} diff --git a/src/packages/components/src/gradient-control/constants.js b/src/packages/components/src/gradient-control/constants.js deleted file mode 100644 index b696927ec..000000000 --- a/src/packages/components/src/gradient-control/constants.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -export const DEFAULT_GRADIENT = - 'linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(20, 39, 109) 100%)'; - -export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180; - -export const HORIZONTAL_GRADIENT_ORIENTATION = { - type: 'angular', - value: 90, -}; -export const DEFAULT_RADIAL_GRADIENT_POSITION = 'center center'; - -export const RADIAL_GRADIENT_ORIENTATION = [ { - type: 'shape', - value: 'ellipse', - at: { - type: 'position', - value: { - x: { - type: 'position-keyword', - value: 'center' - }, - y: { - type: 'position-keyword', - value: 'center' - } - } - } -} ]; - -export const DEFAULT_RADIAL_GRADIENT_SHAPE = 'ellipse'; -export const GRADIENT_OPTIONS = [ - { value: 'linear-gradient', label: __( 'Linear', 'kadence-blocks' ) }, - { value: 'radial-gradient', label: __( 'Radial', 'kadence-blocks' ) }, -]; - -export const GRADIENT_POSITION_OPTIONS = [ - { value: 'center top', label: __( 'Center Top', 'kadence-blocks' ) }, - { value: 'center center', label: __( 'Center Center', 'kadence-blocks' ) }, - { value: 'center bottom', label: __( 'Center Bottom', 'kadence-blocks' ) }, - { value: 'left top', label: __( 'Left Top', 'kadence-blocks' ) }, - { value: 'left center', label: __( 'Left Center', 'kadence-blocks' ) }, - { value: 'left bottom', label: __( 'Left Bottom', 'kadence-blocks' ) }, - { value: 'right top', label: __( 'Right Top', 'kadence-blocks' ) }, - { value: 'right center', label: __( 'Right Center', 'kadence-blocks' ) }, - { value: 'right bottom', label: __( 'Right Bottom', 'kadence-blocks' ) }, -]; - -export const DIRECTIONAL_ORIENTATION_ANGLE_MAP = { - top: 0, - 'top right': 45, - 'right top': 45, - right: 90, - 'right bottom': 135, - 'bottom right': 135, - bottom: 180, - 'bottom left': 225, - 'left bottom': 225, - left: 270, - 'top left': 315, - 'left top': 315, -}; diff --git a/src/packages/components/src/gradient-control/editor.scss b/src/packages/components/src/gradient-control/editor.scss deleted file mode 100644 index 4b4055f69..000000000 --- a/src/packages/components/src/gradient-control/editor.scss +++ /dev/null @@ -1,224 +0,0 @@ -.components-custom-gradient-picker__item { - display: block; - flex:5 1 0%; - max-height: 100%; - max-width: 100%; - min-height: 0px; - min-width: 0px; - .kadence-controls-content { - gap: 12px; - } - .kadence-controls-content .components-base-control { - margin-bottom: 0; - flex: 10 0 0; - } - .kadence-pop-gradient-color-picker { - padding-bottom: 10px; - } - .kadence-control-toggle-advanced.only-icon { - flex: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 10px; - font-weight: 600; - font-style: normal; - text-transform: uppercase; - height: 30px; - line-height: 1.2; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 2px; - background: transparent; - color: #4A5568; - padding: 4px; - box-shadow: none; - white-space: normal; - svg { - width: 20px; - } - &.is-primary { - border-color: var(--wp-admin-theme-color, #00669b); - background: var(--wp-admin-theme-color, #00669b); - color: #fff; - box-shadow: none; - } - } -} -.block-editor-block-inspector .components-custom-gradient-picker__item .kadence-select-large .components-select-control__input { - height: 40px; - min-height: 40px; -} -.kadence-gradient-position-control .kadence-gradient-position_header .kadence-gradient-position__label { - margin: 0px 0px 8px; - display:block; -} -.kadence-gradient-position-control .components-unit-control-wrapper { - flex-grow: 1; -} -// .kadence-gradient-control .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button { -// border-radius: 50%; -// width: 30px; -// height: 30px; -// bottom: 100%; -// top: auto; -// margin-left: -15px; -// } -.kadence-gradient-control .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown { - position: absolute; - height: 16px; - width: 16px; - top: 16px; - display: flex; -} -.kadence-gradient-control .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button { - height: inherit; - width: inherit; - border-radius: 50%; - padding: 0; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff,0 0 1px 0 rgba(0, 0, 0, 0.25); - outline: 2px solid transparent; - position: static; - top: auto; - filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3)); -} -// $grid-unit-20: 20px; -// $grid-unit-60: 40px; -// $radius-block-ui: 4px; -// $grid-unit-15: 15px; -// $grid-unit-30: 30px; -// $grid-unit-10: 10px; -// $border-width-tab: 1px; -// $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6. - -// .components-custom-gradient-picker { -// &:not(.is-next-has-no-margin) { -// margin-top: $grid-unit-15; -// margin-bottom: $grid-unit-30; -// } -// } - -// .components-custom-gradient-picker__gradient-bar:not(.has-gradient) { -// opacity: 0.4; -// } -.kadence-gradient-control .components-custom-gradient-picker__gradient-bar:not(.has-gradient) { - opacity: 0.4; -} -.kadence-select-no-margin-after { - -} -.kadence-gradient-control { - .components-custom-gradient-picker__ui-line .components-base-control { - margin-bottom: 0; - } - .components-custom-gradient-picker__ui-line .components-base-control .components-base-control__field { - margin-bottom: 0; - } -} -.kadence-gradient-control .components-custom-gradient-picker__gradient-bar { - border-radius: 2px; - width: 100%; - height: 48px; - margin-bottom: 16px; - padding-right: 0; - - .components-custom-gradient-picker__markers-container { - position: relative; - width: calc(100% - 48px); - margin-left: auto; - margin-right: auto; - } - - .components-custom-gradient-picker__control-point-dropdown { - position: absolute; - height: 16px; - width: 16px; - top: 16px; - display: flex; - } - - .components-custom-gradient-picker__insert-point-dropdown { - position: relative; - - // Same size as the .components-custom-gradient-picker__control-point-dropdown parent - height: inherit; - width: inherit; - min-width: 16px; - border-radius: 50%; - - background: #fff; - padding: 2px; - - color: #111; - - svg { - height: 100%; - width: 100%; - } - } -} -.kadence-gradient-control .components-angle-picker-control .components-input-control__container .components-input-control__input { - height: 32px; - padding-left: 8px; - padding-right: 8px; -} -// .components-custom-gradient-picker__control-point-button { -// // Same size as the .components-custom-gradient-picker__control-point-dropdown parent -// height: inherit; -// width: inherit; -// border-radius: 50%; -// padding: 0; - -// // Shadow and stroke. -// box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 4px 0 rgba(#000, 0.25); - -// // Windows High Contrast mode will show this outline, but not the box-shadow. -// outline: 2px solid transparent; - -// &:focus, -// &.is-active { -// box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 4px 0 rgba(#000, 0.25); - -// // Windows High Contrast mode will show this outline, but not the box-shadow. -// outline: $border-width-tab solid transparent; -// } -// } -// } - -// .components-custom-gradient-picker__remove-control-point-wrapper { -// padding-bottom: $grid-unit-10; -// } - -// .components-custom-gradient-picker__inserter { -// /*rtl:ignore*/ -// direction: ltr; -// } - -// .components-custom-gradient-picker__liner-gradient-indicator { -// display: inline-block; -// flex: 0 auto; -// width: 20px; -// height: 20px; -// } - -// .components-custom-gradient-picker .components-custom-gradient-picker__toolbar { -// border: none; - -// // Work-around to target the inner button containers rendered by -// > div + div { -// margin-left: 1px; -// } - -// button { -// &.is-pressed { -// > svg { -// background: #fff; -// border: 1px solid #565656; -// border-radius: 2px; -// } -// } -// } -// } - -.kadence-gradient-control .components-custom-gradient-picker__item.components-custom-gradient-picker-position { - margin-top: 12px; -} \ No newline at end of file diff --git a/src/packages/components/src/gradient-control/gradient-bar/constants.js b/src/packages/components/src/gradient-control/gradient-bar/constants.js deleted file mode 100644 index 0e7dd7d0b..000000000 --- a/src/packages/components/src/gradient-control/gradient-bar/constants.js +++ /dev/null @@ -1,10 +0,0 @@ -export const GRADIENT_MARKERS_WIDTH = 16; -export const INSERT_POINT_WIDTH = 16; -export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10; -export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0; -export const MINIMUM_SIGNIFICANT_MOVE = 5; - -export const KEYBOARD_CONTROL_POINT_VARIATION = - MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; -export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = - ( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2; diff --git a/src/packages/components/src/gradient-control/gradient-bar/control-points.js b/src/packages/components/src/gradient-control/gradient-bar/control-points.js deleted file mode 100644 index bf71f5896..000000000 --- a/src/packages/components/src/gradient-control/gradient-bar/control-points.js +++ /dev/null @@ -1,773 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { colord } from 'colord'; -import { map } from 'lodash'; - -/** - * WordPress dependencies - */ - import { useSetting } from '@wordpress/block-editor'; -import { useInstanceId, useMergeRefs } from '@wordpress/compose'; -import { useEffect, useRef, useState, useMemo } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; -import { plus } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -// import { HStack } from '../../h-stack'; -// import { ColorPicker } from '../../color-picker'; -// import { VisuallyHidden } from '../../visually-hidden'; -import ColorPicker from '../../color-picker'; -import { __experimentalHStack as HStack, Button, VisuallyHidden, Popover, Dashicon, Tooltip, __experimentalNumberControl as NumberControl } from '@wordpress/components'; -import { - addControlPoint, - clampPercent, - removeControlPoint, - updateControlPointColor, - updateControlPointColorByPosition, - updateControlPointPosition, - getHorizontalRelativeGradientPosition, -} from './utils'; -import { - MINIMUM_SIGNIFICANT_MOVE, - KEYBOARD_CONTROL_POINT_VARIATION, -} from './constants'; - -function useObservableState( initialState, onStateChange ) { - const [ state, setState ] = useState( initialState ); - return [ - state, - ( value ) => { - setState( value ); - if ( onStateChange ) { - onStateChange( value ); - } - }, - ]; -} - -function CustomDropdown( props ) { - const { - renderContent, - renderToggle, - className, - contentClassName, - expandOnMobile, - headerTitle, - focusOnMount, - position, - popoverProps, - onClose, - onToggle, - style, - } = props; - // Use internal state instead of a ref to make sure that the component - // re-renders when the popover's anchor updates. - const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] = - useState( null ); - const containerRef = useRef(); - const [ isOpen, setIsOpen ] = useObservableState( false, onToggle ); - - useEffect( - () => () => { - if ( onToggle && isOpen ) { - onToggle( false ); - } - }, - [ onToggle, isOpen ] - ); - - function toggle() { - setIsOpen( ! isOpen ); - } - - /** - * Closes the popover when focus leaves it unless the toggle was pressed or - * focus has moved to a separate dialog. The former is to let the toggle - * handle closing the popover and the latter is to preserve presence in - * case a dialog has opened, allowing focus to return when it's dismissed. - */ - function closeIfFocusOutside() { - const { ownerDocument } = containerRef.current; - const dialog = ownerDocument.activeElement.closest( '[role="dialog"]' ); - if ( - ! containerRef.current.contains( ownerDocument.activeElement ) && - ( ! dialog || dialog.contains( containerRef.current ) ) - ) { - close(); - } - } - - function close() { - if ( onClose ) { - onClose(); - } - setIsOpen( false ); - } - - const args = { isOpen, onToggle: toggle, onClose: close }; - const popoverPropsHaveAnchor = - !! popoverProps?.anchor || - // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and - // be removed from `Popover` from WordPress 6.3 - !! popoverProps?.anchorRef || - !! popoverProps?.getAnchorRect || - !! popoverProps?.anchorRect; - - return ( -
- { renderToggle( args ) } - { isOpen && ( - - { renderContent( args ) } - - ) } -
- ); -} - -function CustomColorPickerDropdown( { - isRenderedInSidebar, - popoverProps: receivedPopoverProps, - ...props -} ) { - const popoverProps = useMemo( - () => ( { - shift: true, - ...( isRenderedInSidebar - ? { - // When in the sidebar: open to the left (stacking), - // leaving the same gap as the parent popover. - placement: 'left-start', - offset: 34, - } - : { - // Default behavior: open below the anchor - placement: 'bottom', - offset: 8, - } ), - ...receivedPopoverProps, - } ), - [ isRenderedInSidebar, receivedPopoverProps ] - ); - - return ( - - ); -} - -function ControlPointButton( { isOpen, position, color, ...additionalProps } ) { - const instanceId = useInstanceId( ControlPointButton ); - const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`; - return ( - <> -
- ); - } ) } - - ) } - { point?.position !== undefined && ( - { - onChange( - updateControlPointPosition( - controlPoints, - index, - clampPercent( - parseFloat( value ) - ) - ) - ); - }} - min={0} - step={1} - max={100} - /> - ) } - { ! disableRemove && controlPoints.length > 2 && ( - - - - ) } - - ) } - style={ { - left: `${ point.position }%`, - transform: 'translateX( -50% )', - } } - /> - ) - ); - } ); -} - -function InsertPoint( { - value: controlPoints, - onChange, - onOpenInserter, - onCloseInserter, - insertPosition, - isRenderedInSidebar, -} ) { - const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false ); - const disableCustomColors = ! useSetting( 'color.custom' ); - const colors = useSetting( 'color.palette' ); - const [ tempColor, setTempColor ] = useState( '' ); - const pointColor = getReadableColor( tempColor, colors ); - return ( - { - onCloseInserter(); - } } - renderToggle={ ( { isOpen, onToggle } ) => ( - - )} - { active && ( - - )} - -
- { isHover && ( -
{ hover }
- )} - { isActive && ( -
{ active }
- )} - { !isHover && !isActive && ( - <>{ normal } - )} -
- - ]; -} diff --git a/src/packages/components/src/icon-picker/editor.scss b/src/packages/components/src/icon-picker/editor.scss deleted file mode 100644 index 5b4c0cbb8..000000000 --- a/src/packages/components/src/icon-picker/editor.scss +++ /dev/null @@ -1,279 +0,0 @@ -.kadence-icon-picker { - margin-bottom: 24px; -} - -.kadence-icon-picker-selection { - display: block; -} - -.kadence-icon-picker-search { - position: fixed; - z-index: 999; - background-color: #fff; - padding: 10px 10px 5px 10px; - width: 350px; - border-bottom: 1px solid #e0e0e0; -} - -.kadence-icon-picker-content.has-search { - padding-top: 91px; -} - -.kadence-icon-picker-container { - min-width: 350px; - height: 50vh; - max-height: 400px; -} - -.kadence-icon-grid-wrap { - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr) ); - gap: 2px; -} - -.kadence-icon-picker-link { - display: flex; - align-items: center; - justify-content: center; - background: #f5f5f5; - color: #424242; - border: 0; - padding: 8px; - min-height: 60px; - min-width: 60px; - margin: 0; - font-size: 24px; - box-shadow: none; - text-align: center; - - &:hover { - background: #e5e5e5; - cursor: pointer; - } - - > * { - transform: scale(1); - transition: transform .25s; - transform-origin: center; - } - - &:hover > * { - transform: scale(1.3); - } - - svg { - width: 1em; - height: 1em; - } - - &.add-custom-svg { - background: #FFF; - border: 2px dashed #f5f5f5; - color: #f5f5f5; - } -} - -.kadence-icon-picker-link.kadence-icon-picker-selection-toggle { - padding-right: 40px; - padding-left: 12px; - position: relative; - background: white; - width: 100%; - justify-content: flex-start; - border: 1px solid var(--kb-border-color, #859CB6); - - .kadence-icon-picker-selection-value { - display: flex; - transform: scale(1) rotate(0) !important; - } - - .kadence-icon-picker-selection-arrow { - position: absolute; - top: 0; - bottom: 0; - right: 0; - display: flex; - align-items: center; - width: 34px; - background: #F8F9FB; - justify-content: center; - transform: scale(1) rotate(0) !important; - transition: background .25s; - border-left: 1px solid var(--kb-border-color, #859CB6); - } - - &:hover .kadence-icon-picker-selection-arrow { - background: #EBEFF3; - } -} - -.kadence-icon-picker-link.kadence-icon-picker-selection-toggle .kadence-icon-picker-selection-value.kadence-icon-picker-placeholder { - font-size: 14px; - color: #6280A1; -} - -.kadence-icon-picker-toggle-wrap { - display: block; - width: 100%; - position: relative; -} - -.kadence-icon-picker-toggle-wrap .kadence-icon-picker-clear { - position: absolute; - top: 50%; - right: 40px; - transform: translate(0px, -50%); - border: 0; - padding: 0; - background: #EBEFF3; - display: flex; - - &:hover { - background: #D2DAE4; - cursor: pointer; - } -} - -.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-content { - padding: 12px; -} - -.kadence-icon-picker-pop-theme-dividers .kadence-icon-grid-wrap { - grid-template-columns: minmax(0, 1fr); - gap: 6px; -} - -.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-link { - overflow: hidden; - min-height: 40px; -} - -.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-link svg { - width: auto; - height: auto; - max-height: 30px; - transform: scale(1) !important; -} - -.kadence-icon-picker-theme-dividers .kadence-icon-picker-link.kadence-icon-picker-selection-toggle .kadence-icon-picker-selection-value { - flex-grow: 1; -} - -.kadence-icon-picker-theme-dividers .kadence-icon-picker-link.kadence-icon-picker-selection-toggle .kadence-icon-picker-selection-value svg { - max-width: calc(100% - 30px); - width: auto; - max-height: 30px; - height: auto; -} - -.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-link svg.kadence-row-divider-top { - transform: rotate(180deg) !important; -} - -.kadence-icon-picker-theme-dividers .kadence-icon-picker-selection-value svg.kadence-row-divider-top { - transform: rotate(180deg) !important; -} - -.upload-svg-modal { - .modal-body { - padding-left: 32px; - padding-right: 32px; - } - - .security-notice { - border: 1px solid #AD9D08; - background-color: #FDF9D3; - color: #000; - padding: 10px 20px; - border-radius: 5px; - margin-bottom: 25px; - - h4 { - margin-bottom: 5px; - } - - p { - margin: 0; - } - } - - .drag-drop-container { - text-align: center; - margin-bottom: 25px; - - .drag-drop-target { - border: 4px dashed #f5f5f5; - padding: 20px 15px 15px 15px; - } - } - - .paste-container { - text-align: center; - margin-bottom: 25px; - - } - - .footer { - display: flex; - justify-content: space-between; - border-top: 1px solid #e0e0e0; - padding: 10px 20px; - } - - .components-modal__content{ - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - } - - .error-message{ - text-align: center; - padding: 15px; - font-size: 15px; - } -} - -.kb-custom-svg { - position: relative; - - .custom-svg-delete { - position: absolute; - top: -10px; - right: 0; - background-color: #ff0000; - border-radius: 10px; - width: 20px; - height: 20px; - display: none; - z-index: 2; - - svg { - display: none; - fill: #FFF; - } - } - - .custom-svg-delete:hover { - display: block; - cursor: pointer; - - svg { - display: block !important; - } - } - - .kadence-icon-picker-link { - - } - -} - -.kb-custom-svg:hover { - .custom-svg-delete { - display: block !important; - } - - svg { - display: block !important; - } -} diff --git a/src/packages/components/src/icon-picker/index.js b/src/packages/components/src/icon-picker/index.js deleted file mode 100644 index 7f64dbb09..000000000 --- a/src/packages/components/src/icon-picker/index.js +++ /dev/null @@ -1,349 +0,0 @@ -import { - Popover, - TextControl, - PanelBody, - SelectControl, - Icon -} from '@wordpress/components'; -import {__} from '@wordpress/i18n' -import { debounce, isEqual, has, get } from 'lodash'; -import {applyFilters} from '@wordpress/hooks' -import { useState, useMemo, useEffect, useCallback } from '@wordpress/element'; -import {default as GenIcon} from '../icons/gen-icon'; -import { plus } from '@wordpress/icons'; -import './editor.scss'; -import SvgAddModal from './svg-add-modal'; -import SvgDeleteModal from './svg-delete-modal'; -import { compareVersions } from '@kadence/helpers'; -import { - chevronDown, - closeSmall, -} from '@wordpress/icons'; -import { default as IconRender } from '../icons/icon-render'; -export default function KadenceIconPicker({ - value, - onChange, - label, - placeholder = __( 'Select Icon', 'kadence-blocks' ), - showSearch = true, - renderFunc = null, - className, - theme = 'default', - allowClear = false, - icons = null - }) { - const [ popoverAnchor, setPopoverAnchor ] = useState(); - const [ isVisible, setIsVisible ] = useState( false ); - const [ search, setSearch ] = useState( '' ); - const [ filter, setFilter ] = useState( 'all' ); - const [ isOpen, setIsOpen ] = useState( false ); - const [ isDeleteOpen, setIsDeleteOpen ] = useState( false ); - const [ deleteId, setDeleteId ] = useState( null ); - const [ customSvgs, setCustomSvgs ] = useState( false ); - const [ customSvgTitles, setCustomSvgTitles ] = useState( [] ); - const [ isLoading, setIsLoading ] = useState( false ); - // Make sure user has pro and the appropriate version that has the rest endpoint to accept SVGs - const hasPro = kadence_blocks_params.pro && kadence_blocks_params.pro === 'true' ? true : false; - const proVersion = window?.kbpData ? get( window.kbpData, ['pVersion'], '1.0.0' ) : '1.0.0'; - const isSupportedProVersion = compareVersions(proVersion, '2.4.0') >= 0; - const toggleVisible = () => { - setIsVisible( !isVisible ); - } - const debounceToggle = debounce( toggleVisible, 100 ); - - const getCustomSvgs = async ( force = false) => { - if ( force || ( hasPro && isSupportedProVersion && customSvgs === false && !isLoading ) ) { - try { - setIsLoading( true ); - const response = await fetchCustomSvgs( force ); - - if( response.length > 0 ) { - const svgIds = response.map( svg => svg.id.toString() ); - const svgTitles = {}; - response.forEach( item => { - svgTitles[ item.id.toString() ] = item.title.rendered.toLowerCase(); - }); - - if ( !isEqual( svgIds, customSvgs ) && svgIds.length > 0 ) { - setCustomSvgs( svgIds ); - setCustomSvgTitles( svgTitles ); - } - } else { - setCustomSvgs( [] ); - } - } catch ( error ) { - setCustomSvgs( [] ); - console.error( 'Failed to fetch custom SVGs (picker):', error ); - } - setIsLoading( false ); - } - }; - useEffect( () => { getCustomSvgs(), [] } ); - - const deleteCallback = () => { - getCustomSvgs( true ); - setDeleteId( null ); - }; - - const addCallback = () => { - getCustomSvgs( true ); - }; - - const translatedCustomSvgString = __( 'My Icons', 'kadence-blocks' ); - - const iconNames = useMemo( () => { - - if ( icons ) { - const iconNames = icons.map( ( slug ) => { - return { value: slug, label: slug } - } ); - - if ( customSvgs.length > 0 ) { - return { [translatedCustomSvgString]: customSvgs, ...iconNames }; - } else if( hasPro && isSupportedProVersion ) { - return { [translatedCustomSvgString]: [ 'placeholder' ], ...iconNames }; - } else { - return iconNames; - } - } - const svgs = applyFilters( 'kadence.icon_options_names', kadence_blocks_params.icon_names ); - - if ( customSvgs.length > 0 ) { - return { [translatedCustomSvgString]: customSvgs, ...svgs }; - } else if( hasPro && isSupportedProVersion ) { - return { [translatedCustomSvgString]: [ 'placeholder' ], ...svgs }; - } - - return svgs; - }, [ kadence_blocks_params.icon_names, icons, customSvgs ] ); - - const iconOptions = useMemo( () => { - return applyFilters( 'kadence.icon_options', { ...kadence_blocks_params_ico.icons, ...kadence_blocks_params_fa.icons } ) - }, [ kadence_blocks_params_ico.icons, kadence_blocks_params_fa.icons, customSvgs ] ) - const iconFilterOptions = useMemo( () => { - let options = Object.keys( iconNames ).map( ( label, index ) => { - return { value: index, label: label } - } ) - - return [ { value: 'all', label: __( 'Show All', 'kadence-blocks' ) }, ...options ] - }, [ kadence_blocks_params.icon_names, iconNames ] ) - - const iconRenderFunc = useCallback( ( iconSlug ) => { - // Using GenIcon directly is less overhead, but IconRender allows for custom SVGs to be fetched and rendered - if( iconSlug.startsWith( 'kb-custom' ) ) { - return ; - } - - return ; - }, [ iconOptions ] ); - - const iconRenderFunction = renderFunc ? renderFunc : iconRenderFunc; - - const results = useMemo( () => { - let results = {} - if ( !icons ) { - const searchLower = search.toLowerCase(); - Object.keys( iconNames ).map( ( label, groupIndex ) => { - if ( filter === 'all' || groupIndex === parseInt( filter ) ) { - { - iconNames[ label ].map( ( icon, iconIndex ) => { - const iconLower = icon.toLowerCase(); - - if ( search === '' || iconLower.includes( searchLower ) || ( groupIndex === 0 && has(customSvgTitles, iconLower.toString()) && customSvgTitles[iconLower.toString() ].includes( searchLower ) ) ) { - - results = { - ...results, [ groupIndex ]: { - label: label, - icons: { ...results[ groupIndex ]?.icons, [ icon ]: iconOptions[ icon ] } - } - } - - return icon - } - } ) - } - } - } ) - } - return results - }, [ search, filter, iconNames ] ); - - return ( -
- - -
- {label && ( -
- -
- )} -
- - {value && allowClear && ( - - )} -
-
- - {isVisible && - -
- {showSearch && ( -
- setSearch( value )} - /> - -
- )} -
- {icons && ( -
- {( icons ).map( ( iconKey ) => { - return ( - - ) - } )} -
- )} - {!icons && ( - <> - {Object.keys( results ).length === 0 && -
-

{__( 'No icons found', 'kadence-blocks' )}

-
- } - {Object.keys( results ).map( ( groupKey ) => { - return ( - -
- {results[ groupKey ].label === translatedCustomSvgString && search === '' && isSupportedProVersion && hasPro && ( - - )} - {Object.keys( results[ groupKey ].icons ).map( ( iconKey ) => { - if ( results[ groupKey ].label === translatedCustomSvgString ) { - if( iconKey === 'placeholder'){ - return; - } - - return ( -
- { hasPro && isSupportedProVersion && (
{ - setDeleteId( iconKey ); - setIsDeleteOpen( true ); - }}> - -
) } - -
- ); - } else { - return ( - - ); - } - } ) - } -
- - - ) - } )} - - )} -
-
- - } -
- ) -} - -const fetchCustomSvgs = async ( cacheBust = false ) => { - const params = { - per_page: 100, - }; - - if ( cacheBust ) { - params.cache_bust = new Date().getTime(); - } - - const urlParams = new URLSearchParams( params ); - - const response = await fetch( `/wp-json/wp/v2/kadence_custom_svg?${ urlParams.toString() }`, { - method: 'GET', - } ); - - if ( ! response.ok ) { - throw new Error( 'Network response was not ok' ); - } - - return response.json(); -}; diff --git a/src/packages/components/src/icon-picker/svg-add-modal.js b/src/packages/components/src/icon-picker/svg-add-modal.js deleted file mode 100644 index fb1414806..000000000 --- a/src/packages/components/src/icon-picker/svg-add-modal.js +++ /dev/null @@ -1,206 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { Button, Modal, TextareaControl, DropZone, FormFileUpload, TextControl } from '@wordpress/components'; -import { has, get } from 'lodash'; -import apiFetch from '@wordpress/api-fetch'; -import { useDispatch } from '@wordpress/data'; -import { store as noticesStore } from '@wordpress/notices'; - -export default function SvgAddModal( { isOpen, setIsOpen, callback } ) { - const [ uploadView, setUploadView ] = useState( 'upload' ); - const [ pastedSVG, setPastedSVG ] = useState( '' ); - const [ error, setError ] = useState( '' ); - const [ file, setFile ] = useState( null ); - const [ title, setTitle ] = useState( '' ); - const { createSuccessNotice } = useDispatch( noticesStore ); - - function parseAndUpload() { - const fileread = new FileReader(); - const source = file !== null ? 'upload' : 'paste'; - - let fileBlob; - if ( source === 'upload' ) { - if ( !file || file.length === 0 ) { - setError( __( 'No file selected', 'kadence-blocks' ) ); - return; - } - fileBlob = file[ 0 ]; - - // Check MIME type - if ( fileBlob.type !== 'image/svg+xml' ) { - setError( __( 'The selected file is not an SVG', 'kadence-blocks' ) ); - return; - } - } else { - if ( !pastedSVG.trim() ) { - setError( __( 'No SVG content pasted', 'kadence-blocks' ) ); - return; - } - fileBlob = new Blob( [ pastedSVG ], { type: 'image/svg+xml' } ); - } - - fileread.onload = function( e ) { - const fileContent = e.target.result; - - if ( fileContent !== '' ) { - apiFetch( { - path : '/kb-custom-svg/v1/manage', - data : { file: fileContent, title: title }, - method: 'POST', - } ).then( ( response ) => { - if ( has( response, 'value' ) && has( response, 'label' ) ) { - createSuccessNotice( __( 'SVG Saved.', 'kadence-blocks' ), { - type: 'snackbar', - } ); - callback(); - setIsOpen( false ); - } else if ( has( response, 'error' ) && has( response, 'message' ) ) { - setError( response.message ); - } else { - setError( __( 'An error occurred when uploading your file', 'kadence-blocks' ) ); - } - } ); - } - }; - - fileread.readAsText( fileBlob ); - } - - return ( - <> - {isOpen && ( - setIsOpen( false )} - > -
-
-

{__( 'Important: SVG Safety', 'kadence-blocks' )}

-

- {__( - 'SVGs can contain malicious code. For your security, we suggest sanitizing your files before uploading.', - 'kadence-blocks', - )} -   - - {__( 'Learn more about SVG security and supported SVG formatting.', 'kadence-blocks' )} - -

-
- - {error !== '' &&
{error}
} - - {uploadView === 'upload' && ( -
- setTitle( value )} - /> - { - setFile( event.currentTarget.files ); - if ( title === '' ) { - setTitle( - get( event.currentTarget.files, [ '0', 'name' ], '' ).replace( - '.svg', - '', - ), - ); - } - }} - render={( { openFileDialog } ) => ( -
- { - setFile( file ); - if ( title === '' ) { - setTitle( - get( file, [ '0', 'name' ], '' ).replace( '.svg', '' ), - ); - } - }} - /> - {file === null || file.length === 0 ? ( - <> -

{__( 'Select a file or drop it here', 'kadence-blocks' )}

-

{__( 'SVG dimensions: 24px by 24px', 'kadence-blocks' )}

- - ) : ( - <> -

{__( 'File Selected', 'kadence-blocks' )}

-

{get( file, [ '0', 'name' ], '' )}

- - )} - - -
- )} - /> - - -
- )} - - {uploadView === 'paste' && ( -
-

{__( 'Paste your SVG', 'kadence-blocks' )}

- setTitle( value )} - /> - setPastedSVG( value )}/> - - -
- )} -
- -
- - - -
- - )} - - ); -} diff --git a/src/packages/components/src/icon-picker/svg-delete-modal.js b/src/packages/components/src/icon-picker/svg-delete-modal.js deleted file mode 100644 index b3bc0662a..000000000 --- a/src/packages/components/src/icon-picker/svg-delete-modal.js +++ /dev/null @@ -1,59 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { - Button, - Modal, -} from '@wordpress/components'; -import { has, get } from 'lodash'; -import { useDispatch } from '@wordpress/data'; -import { store as noticesStore } from '@wordpress/notices'; -import apiFetch from '@wordpress/api-fetch'; - -export default function SvgDeleteModal( { isOpen, setIsOpen, id, callback } ) { - const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore); - - const deleteFailedSnacbkar = () => { - createErrorNotice(__('There was an error deleting the SVG.', 'kadence-blocks'), { - type: 'snackbar', - }); - }; - - const handleDelete = ( id ) => { - apiFetch({ - path: `/wp/v2/kadence_custom_svg/${id}`, - method: 'DELETE', - }).then((response) => { - if ( get( response, 'id', false ) ) { - createSuccessNotice(__('SVG Deleted.', 'kadence-blocks'), { - type: 'snackbar', - }); - callback(); - } else if (has(response, 'error') && has(response, 'message')) { - console.log(response.message); - deleteFailedSnacbkar(); - } else { - console.log('An error occurred when delete your svg'); - deleteFailedSnacbkar(); - } - }).catch((error) => { - console.log(error); - deleteFailedSnacbkar(); - }); - }; - - return ( - <> - {isOpen && id !== null && ( - setIsOpen( false )}> - - - - - )} - - ); - -} diff --git a/src/packages/components/src/icons/gen-icon/index.js b/src/packages/components/src/icons/gen-icon/index.js deleted file mode 100644 index d6f9d3c40..000000000 --- a/src/packages/components/src/icons/gen-icon/index.js +++ /dev/null @@ -1,66 +0,0 @@ -import PropTypes from 'prop-types'; - -import { createElement } from '@wordpress/element'; - -const walkChildren = ( children ) => { - return children.map( ( child, idx ) => { - const { nE, aBs: attribsMap, children: gchildren = null } = child; - - //fill, stroke - const attribs = Object.keys( attribsMap ) - .filter( key => key !== 'fill' && key !== 'stroke' && attribsMap[ key ] !== 'none' ) - .reduce( ( partial, key ) => { - - //partial[camelcase(key)] = attribsMap[key]; - partial[ key ] = attribsMap[ key ]; - return partial; - }, {} ); - //special case, it has fill and stroke at the same time - let merge = {}; - if ( attribsMap.fill === 'none' && attribsMap.stroke ) { - merge = { fill: 'none', stroke: 'currentColor' }; - } - return createElement( nE, { key: idx, ...attribs, ...merge }, gchildren === null ? gchildren : walkChildren( gchildren ) ); - } ); -}; - -export const GenIcon = ( props ) => { - const { style, className, icon, name, htmltag, ...others } = props; - const type = name.substring( 0, 2 ); - const typeL = name.substring( 0, 3 ); - const lineIcon = ( type && 'fe' == type ? true : false ); - const fill = ( lineIcon ? 'none' : 'currentColor' ); - const strokeWidth = ( lineIcon ? props.strokeWidth : undefined ); - const stroke = ( lineIcon ? 'currentColor' : undefined ); - const strokeLinecap = ( lineIcon ? 'round' : undefined ); - const strokeLinejoin = ( lineIcon ? 'round' : undefined ); - const ariaHidden = ( props.ariaHidden ? 'true' : undefined ); - const HtmlTagOut = ( htmltag ? htmltag : 'div' ); - const viewB = ( props.icon && props.icon.vB ? props.icon.vB.split( ' ' ) : false ); - return ( - - - { props.title ? { props.title } : null } - { props.icon && ( - walkChildren( props.icon.cD ) - ) } - - - ); -}; - -GenIcon.defaultProps = { - size: 24, - xmlns: 'http://www.w3.org/2000/svg', - strokeWidth: 2, - htmltag: 'div', -}; - -GenIcon.propTypes = { - icon: PropTypes.object.isRequired, - size: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ), - style: PropTypes.object, - className: PropTypes.string, -}; - -export default GenIcon; diff --git a/src/packages/components/src/icons/icon-render/index.js b/src/packages/components/src/icons/icon-render/index.js deleted file mode 100644 index 2a6f212a2..000000000 --- a/src/packages/components/src/icons/icon-render/index.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Icon Render Component - * - */ -import GenIcon from '../gen-icon'; -import { applyFilters } from '@wordpress/hooks'; -import { Spinner } from '@wordpress/components'; - -import { Fragment, Component, useEffect, useState } from '@wordpress/element'; - -const fetchCustomSvg = async ( id ) => { - const response = await fetch(`/wp-json/wp/v2/kadence_custom_svg/${id}`, { - method: 'GET' - }); - - if (!response.ok) { - throw new Error('Network response was not ok'); - } - - return response.json(); -}; - - - -/** - * Build the typography controls - * @returns {object} typography settings. - */ -class IconRender extends Component { - constructor() { - super( ...arguments ); - this.updateIcons = this.updateIcons.bind( this ); - this.getCustomSvg = this.getCustomSvg.bind( this ); - this.state = { - iconOptions: undefined, - isLoading: false, - customSvg: '', - }; - } - componentDidMount() { - const icons = { ...kadence_blocks_params_ico.icons, ...kadence_blocks_params_fa.icons }; - this.setState( { iconOptions: applyFilters( 'kadence.icon_options', icons ) } ); - if( this.props.name.startsWith('kb-custom') ) { - this.getCustomSvg( this.props.name.replace('kb-custom-', '') ); - } - } - - componentDidUpdate( prevProps, prevState, snapshot ) { - if ( this.props.name !== prevProps.name && this.props.name.startsWith( 'kb-custom' ) ) { - this.getCustomSvg( this.props.name.replace( 'kb-custom-', '' ) ); - } - } - - getCustomSvg = async ( id ) => { - try { - // Check if the SVG is in localStorage - const cachedSvg = localStorage.getItem(`kb-custom-${id}`); - if (cachedSvg) { - this.setState( { customSvg: JSON.parse(cachedSvg) }); - return; - } - this.setState( { isLoading: true }); - const response = await fetchCustomSvg( id ); - - if ( response ) { - const svgContent = response.content.rendered - .replace( '

', '' ) - .replace( '

', '' ) - .replace( /“/g, '"' ) - .replace( /”/g, '"' ) - .replace( /„/g, '"' ) - .replace( /″/g, '"' ); - - const jsonObject = JSON.parse(svgContent); - - // Save the fetched SVG to localStorage - localStorage.setItem(`kb-custom-${id}`, JSON.stringify(jsonObject)); - this.setState( { customSvg:jsonObject }); - - } else { - this.setState( { customSvg:'' }); - } - } catch ( error ) { - this.setState( { customSvg:'' }); - console.error( 'Failed to fetch custom SVGs:', error ); - } - this.setState( { isLoading:false }); - }; - updateIcons() { - const icons = { ...kadence_blocks_params_ico.icons, ...kadence_blocks_params_fa.icons }; - const filteredIcons = applyFilters( 'kadence.icon_options', icons ); - return filteredIcons; - } - render() { - const { - name, - } = this.props; - let { iconOptions, isLoading, customSvg } = this.state; - if ( ! iconOptions ) { - iconOptions = this.updateIcons(); - } - if( name.startsWith('kb-custom') && isLoading ) { - return ; - } else if ( name.startsWith('kb-custom') && customSvg !== '' ) { - return ; - } - return ; - } -} -export default ( IconRender ); - diff --git a/src/packages/components/src/icons/icon-span-tag/index.js b/src/packages/components/src/icons/icon-span-tag/index.js deleted file mode 100644 index aa0b23e91..000000000 --- a/src/packages/components/src/icons/icon-span-tag/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Icon Span Tag Component - * - */ - -export default function IconSpanTag( { - name, - title, - extraClass, - strokeWidth = false, - tooltipID = '', - tooltipPlacement = '', - } ) { - return ( - - ); -} diff --git a/src/packages/components/src/index.js b/src/packages/components/src/index.js deleted file mode 100644 index d66a5fe40..000000000 --- a/src/packages/components/src/index.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Import General Editor CSS - */ -import './editor.scss'; - -export { default as PopColorControl } from './pop-color-control'; -export { default as SinglePopColorControl } from './single-pop-color-control'; -export { default as ColorIcons } from './color-icons'; -export { default as ColorPicker } from './color-picker'; -export { default as ColorFields } from './color-fields'; -export { default as InlinePopColorControl } from './inline-pop-color'; -export { default as ResponsiveAlignControls } from './responsive-align-control'; -export { default as KadenceSelectPosts } from './select-posts-controls'; -export { default as WebfontLoader } from './web-font-loader'; -export { default as KadenceWebfontLoader } from './kadence-web-font-loader'; -export { default as KadenceFormConditionals } from './form-conditionals'; -export { default as HeadingLevelIcon } from './heading-level-icon'; -export { default as BoxShadowControl } from './box-shadow-control'; -export { default as DynamicImageControl } from './dynamic-image-control'; -export { default as DynamicTextControl } from './dynamic-text-control'; -export { default as DynamicInlineReplaceControl } from './dynamic-inline-replace-control'; -export { default as DynamicBackgroundControl } from './dynamic-background-control'; -export { default as DynamicGalleryControl } from './dynamic-gallery-control'; -export { default as DropShadowControl } from './drop-shadow-control'; -export { default as BackgroundSizeControl } from './background-size-control'; -export { default as BackgroundControl } from './background-control'; -export { default as BackgroundTypeControl } from './background-type-control'; -export { default as GradientControl } from './gradient-control'; -export { default as MeasureRangeControl } from './measurement-range-control'; -export { default as ResponsiveMeasureRangeControl } from './measurement-range-control/responsive'; -export { default as SpacingVisualizer } from './visualizer/spacing'; -export { default as KadenceFocalPicker } from './focal-picker'; -export { default as KadenceRadioButtons } from './common/radio-buttons'; -export { default as KadenceMediaPlaceholder } from './common/media-placeholder'; -export { default as ImageSizeControl } from './common/image-size-controls'; -export { default as VerticalAlignmentIcon } from './common/vertical-align-icon'; -export { default as KadenceImageControl } from './common/image-controls'; -export { default as KadenceVideoControl } from './common/video-control'; -export { default as SubsectionWrap } from './common/subsection-wrap'; -export { default as KadencePanelBody } from './panel-body'; -export { default as KadenceInspectorControls } from './inspector-controls'; -export { default as KadenceSelectTerms } from './select-terms-control'; -export { default as KadencePostSelectTerms } from './post-select-terms-control'; -export { default as SmallResponsiveControl } from './small-responsive-control'; -export { default as ResponsiveControl } from './responsive-control'; -export { default as StepControls } from './step-control'; -export { default as OpacityControl } from './opacity-control'; -export { default as BorderControl } from './border/border-control'; -export { default as ResponsiveBorderControl } from './border/responsive-border-control'; -export { default as FontSizeControl } from './font-size'; -export { default as ResponsiveFontSizeControl } from './font-size/responsive'; -export { default as ResponsiveUnitControl } from './unit/responsive'; -export { default as InspectorControlTabs } from './inspector-control-tabs'; -export { default as HoverToggleControl } from './hover-toggle'; -export { default as TagSelect } from './tag-select'; -export { default as GapSizeControl } from './gap-controls'; -export { default as ResponsiveGapSizeControl } from './gap-controls/responsive'; -export { default as CopyPasteAttributes } from './copy-paste-attributes'; -export { default as DynamicTextInputControl } from './dynamic-text-input-control'; -export { default as Tooltip } from './tooltip'; - -/* Panels */ -export { default as ColorGroup } from './panels/color-group'; -export { default as TwoColumn } from './panels/two-column'; - -/* Links */ -export { default as DynamicLinkControl } from './links/dynamic-link-control'; -export { default as fetchSearchResults } from './links/get-post-search-results'; -export { default as KadenceImageURLInputUI } from './links/image-url-input-link-controls'; -export { default as URLInputInline } from './links/inline-link-control'; -export { default as InputSearch } from './links/input-search'; -export { default as URLInputControl } from './links/link-control'; -export { default as TextHighlight } from './links/text-highlight'; - -/* Icons */ -export { default as GenIcon } from './icons/gen-icon'; -export { default as IconRender } from './icons/icon-render'; -export { default as IconSpanTag } from './icons/icon-span-tag'; - -/* Typography */ -export { default as TypographyControls } from './typography/typography-control'; -export { default as InlineTypographyControls } from './typography/inline-typography-control'; -export { default as TextShadowControl } from './typography/text-shadow-control'; - -/* Range */ -export { default as RangeControl } from './range/range-control'; -export { default as RadioRangeControl } from './range/radio-range-control'; -export { default as ResponsiveRangeControls } from './range/responsive-range-control'; -export { default as ResponsiveRadioRangeControls } from './range/responsive-radio-range-control'; -export { default as ResponsiveSingleRangeControl } from './range/single-range-control'; - -/* Measurement */ -export { default as ResponsiveMeasurementControls } from './measurement/responsive-measurement-control'; -export { default as MeasurementControls } from './measurement/measurement-control'; -export { default as MeasurementSingleControl } from './measurement/single-input-control'; - -/* Color */ -export { default as AdvancedColorControlPalette } from './color/advanced-color-control-palette'; -export { default as BorderColorControls } from './color/border-color-control'; - -/* Block Defaults */ -export { default as KadenceBlockDefaults } from './block-defaults'; - -export { default as KadenceIconPicker } from './icon-picker'; - -export { default as TaxonomySelect } from './taxonomy-select'; - -export { default as SelectParentBlock } from './select-parent-block'; -export { default as ObfuscateTextControl } from './obfuscate-text-control'; - -export { default as ColumnDragResizer } from './column-drag-resizer'; diff --git a/src/packages/components/src/inline-pop-color/index.js b/src/packages/components/src/inline-pop-color/index.js deleted file mode 100644 index 8c31196c7..000000000 --- a/src/packages/components/src/inline-pop-color/index.js +++ /dev/null @@ -1,326 +0,0 @@ -/** - * Advanced Color Control. - * - */ - -/** - * Import Icons - */ -import ColorPicker from '../color-picker'; -import { hexToRGBA } from '@kadence/helpers'; -import { map }from 'lodash'; -import { useSetting } from '@wordpress/block-editor'; -import { useState } from '@wordpress/element'; - - /** - * Internal block libraries - */ - import { __, sprintf } from '@wordpress/i18n'; -import { - Button, - ToolbarGroup, - Tooltip, - Dashicon, - SVG, - Dropdown, - Path, -} from '@wordpress/components'; - import { DOWN } from '@wordpress/keycodes'; - /* global kadence_blocks_params */ - // eslint-disable-next-line camelcase - const ColorSelectorSVGIcon = () => ( - - - - ); - export default function InlinePopColorControl( { - label, - opacityValue = '', - opacityUnit = '', - onOpacityChange = null, - value, - onChange, - reload, - reloaded, - defaultValue, - onClassChange, - onArrayChange = null, - disableCustomColors = false, -} ) { - const [ isVisible, setIsVisible ] = useState( false ); - const [ classSat, setClassSat ] = useState( 'first' ); - const [ currentColor, setCurrentColor ] = useState( '' ); - const [ currentOpacity, setCurrentOpacity ] = useState( opacityValue !== '' ? opacityValue : 1 ); - const [ isPalette, setIsPalette ] = useState( value && value.startsWith( 'palette' ) ? true : false ); - const colors = useSetting( 'color.palette' ); - const toggleVisible = () => { - setIsVisible( true ); - }; - const toggleClose = () => { - if ( isVisible === true ) { - setIsVisible( false ); - } - }; - if ( reload ) { - reloaded( true ); - setTimeout(() => { - setCurrentColor( '' ); - setCurrentOpacity( '' ); - setIsPalette( false ); - }, 100); - } - const convertOpacity = ( value ) => { - let val = 1; - if ( value ) { - val = value / 100; - } - return val; - }; - const convertedOpacityValue = ( 100 === opacityUnit ? convertOpacity( currentOpacity ) : currentOpacity ); - const colorVal = ( currentColor ? currentColor : value ); - let currentColorString = ( isPalette && colors && colors[ parseInt( colorVal.slice( -1 ), 10 ) - 1 ] ? colors[ parseInt( colorVal.slice( -1 ), 10 ) - 1 ].color : colorVal ); - if ( ! isPalette && currentColorString && currentColorString.startsWith( 'var(' ) ) { - currentColorString = window.getComputedStyle( document.documentElement ).getPropertyValue( value.replace( 'var(', '' ).split(',')[0].replace( ')', '' ) ); - } - if ( currentColorString && currentColorString.startsWith( 'var(' ) ) { - let temp_currentColorString = window.getComputedStyle( document.documentElement ).getPropertyValue( currentColorString.replace( 'var(', '' ).replace( ' ', '' ).replace( ')', '' ) ); - if ( '' === temp_currentColorString ) { - temp_currentColorString = window.getComputedStyle( document.documentElement ).getPropertyValue( currentColorString.replace( 'var(', '' ).replace( ' ', '' ).split(',')[0].replace( ')', '' ) ); - } - currentColorString = temp_currentColorString; - } - if ( '' === currentColorString ) { - currentColorString = defaultValue; - } - // if ( '' !== currentColorString && this.props.onOpacityChange && ! this.state.isPalette ) { - // currentColorString = hexToRGBA( ( undefined === currentColorString ? '' : currentColorString ), ( convertedOpacityValue !== undefined && convertedOpacityValue !== '' ? convertedOpacityValue : 1 ) ); - // } - if ( onOpacityChange && ! isPalette ) { - if ( Number( convertedOpacityValue !== undefined && convertedOpacityValue !== '' ? convertedOpacityValue : 1 ) !== 1 ) { - currentColorString = hexToRGBA( ( undefined === currentColorString ? '' : currentColorString ), ( convertedOpacityValue !== undefined && convertedOpacityValue !== '' ? convertedOpacityValue : 1 ) ); - } - } - let previewColorString = currentColorString; - if (isPalette && colorVal) { - switch (colorVal) { - case 'palette1': - previewColorString = 'var(--global-palette1,#2B6CB0)'; - break; - case 'palette2': - previewColorString = 'var(--global-palette2,#215387)'; - break; - case 'palette3': - previewColorString = 'var(--global-palette3,#1A202C)'; - break; - case 'palette4': - previewColorString = 'var(--global-palette4,#2D3748)'; - break; - case 'palette5': - previewColorString = 'var(--global-palette5,#4A5568)'; - break; - case 'palette6': - previewColorString = 'var(--global-palette6,#718096)'; - break; - case 'palette7': - previewColorString = 'var(--global-palette7,#EDF2F7)'; - break; - case 'palette8': - previewColorString = 'var(--global-palette8,#F7FAFC)'; - break; - case 'palette9': - previewColorString = 'var(--global-palette9,#ffffff)'; - break; - } - } - const onChangeState = ( tempColor, tempPalette ) => { - let newColor; - let opacity = ( 100 === opacityUnit ? 100 : 1 ); - if ( tempPalette ) { - newColor = tempPalette; - } else if ( undefined !== tempColor.rgb && undefined !== tempColor.rgb.a && 1 !== tempColor.rgb.a ) { - if ( onOpacityChange ) { - if ( tempColor.hex === 'transparent' ) { - newColor = '#000000'; - } else { - newColor = tempColor.hex; - } - opacity = ( 100 === opacityUnit ? unConvertOpacity( tempColor.rgb.a ) : tempColor.rgb.a ); - } else { - newColor = 'rgba(' + tempColor.rgb.r + ',' + tempColor.rgb.g + ',' + tempColor.rgb.b + ',' + tempColor.rgb.a + ')'; - } - } else if ( undefined !== tempColor.hex ) { - newColor = tempColor.hex; - } else { - newColor = tempColor; - } - setCurrentColor( newColor ); - setCurrentOpacity( opacity ); - setIsPalette( tempPalette ? true : false ); - } - const onChangeComplete = ( tempColorCom, tempPalettCom ) => { - let newColor; - let opacity = ( 100 === opacityUnit ? 100 : 1 ); - if ( tempPalettCom ) { - newColor = tempPalettCom; - } else if ( undefined !== tempColorCom.rgb && undefined !== tempColorCom.rgb.a && 1 !== tempColorCom.rgb.a ) { - if ( onOpacityChange ) { - if ( tempColorCom.hex === 'transparent' ) { - newColor = '#000000'; - } else { - newColor = tempColorCom.hex; - } - opacity = ( 100 === opacityUnit ? unConvertOpacity( tempColorCom.rgb.a ) : tempColorCom.rgb.a ); - } else { - newColor = 'rgba(' + tempColorCom.rgb.r + ',' + tempColorCom.rgb.g + ',' + tempColorCom.rgb.b + ',' + tempColorCom.rgb.a + ')'; - } - } else if ( undefined !== tempColorCom.hex ) { - newColor = tempColorCom.hex; - } else { - newColor = tempColorCom; - } - setCurrentColor( newColor ); - setCurrentOpacity( opacity ); - setIsPalette( tempPalettCom ? true : false ); - if ( null !== onArrayChange ) { - onArrayChange( newColor, opacity ); - } else { - onChange( newColor ); - if ( null !== onOpacityChange ) { - setTimeout( () => { - onOpacityChange( opacity ); - }, 50 ); - } - } - } - const renderToggleComponent = () => ( { - onToggle, - isOpen, - } ) => { - const openOnArrowDown = ( event ) => { - if ( ! isOpen && event.keyCode === DOWN ) { - event.preventDefault(); - event.stopPropagation(); - onToggle(); - } - }; - return ( - - - - ) } - renderContent={ () => ( -
- { classSat === 'first' && ( - onChangeState( color, '' ) } - onChangeComplete={ ( color ) => { - onChangeComplete( color, '' ); - if ( onClassChange ) { - onClassChange( '' ); - } - } } - /> - ) } - { classSat !== 'first' && ( - onChangeState( color, '' ) } - onChangeComplete={ ( color ) => { - onChangeComplete( color, '' ); - if ( onClassChange ) { - onClassChange( '' ); - } - } } - /> - ) } - { colors && ( -
- { map( colors, ( { color, slug, name } ) => { - const style = { color }; - const palette = slug.replace( 'theme-', '' ); - const isActive = ( ( palette === value ) || ( ! slug.startsWith( 'theme-palette' ) && value === color ) ); - return ( -
- -
- ); - } ) } -
- ) } -
- ) } - /> - ); -} diff --git a/src/packages/components/src/inspector-control-tabs/editor.scss b/src/packages/components/src/inspector-control-tabs/editor.scss deleted file mode 100644 index 542ebe28c..000000000 --- a/src/packages/components/src/inspector-control-tabs/editor.scss +++ /dev/null @@ -1,102 +0,0 @@ -$color-gray-200: #EDF2F7; -$color-gray-300: #E2E8F0; -$color-gray-400: #CBD5E0; -$color-gray-500: #A0AEC0; -$color-gray-600: #718096; -$color-gray-700: #4A5568; -$color-gray-800: #2D3748; -.kadence-blocks-inspector-tabs{ - display: flex; - //margin-bottom: -1px; - div { - background: #efefef; - border: 1px solid #333; - } - - button { - display: flex; - flex: 1; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #FFF; - height: 75px; - color:#4A5568; - line-height: 1.8; - border: 0; - background: #EDF2F7; - border-top: 1px solid #CBD5E0; - //border-bottom: 1px solid #e0e0e0; - svg { - fill: currentColor; - } - &:hover { - color: #2D3748; - } - } - - .is-active { - box-shadow: inset 0 -3px 0px 0px var(--wp-admin-theme-color, #00669b); - //background-color: #f0f0f0; - color: #2D3748; - background: white; - //border-bottom: 3px solid var(--wp-admin-theme-color, #00669b); - svg { - // color: var(--wp-admin-theme-color, #00669b); - } - } - - -} - -[data-kadence-hide-advanced="true"] { - .block-editor-block-inspector__advanced { - display: none; - } -} -.components-panel[data-kadence-hide-advanced] .block-editor-block-card__description { - display: none; -} -.components-panel[data-kadence-hide-advanced] .block-editor-block-card__content .block-editor-block-card__title { - margin: 0; -} -.components-panel[data-kadence-hide-advanced] .block-editor-block-card__content { - margin: 0; -} -.components-panel[data-kadence-hide-advanced] .block-editor-block-inspector .components-panel__body { - border-color: #CBD5E0; -} -.components-panel[data-kadence-hide-advanced] .components-base-control__label { - font-size: inherit; - text-transform: inherit; -} - -// Hover Tab Styles -.components-panel__body { - .kt-hover-tabs { - padding-top: 0; - } - .kt-hover-tabs .components-tab-panel__tabs { - margin-bottom: 15px; - border: 0; - } - .kt-hover-tabs .components-tab-panel__tabs button { - border: 1px solid #CBD5E0; - height: 34px; - padding: 4px 5px 4px; - color: #575757; - font-weight: normal; - margin: 0; - width: 50%; - background: transparent; - box-shadow: none !important; - color: #4A5568; - } - .kt-hover-tabs .components-tab-panel__tabs button.active-tab { - box-shadow: none; - color: #2D3748; - background: rgba(0, 0, 0, 0.04); - background: #EDF2F7; - border-color: var(--wp-admin-theme-color, #00669b); - } -} \ No newline at end of file diff --git a/src/packages/components/src/inspector-control-tabs/index.js b/src/packages/components/src/inspector-control-tabs/index.js deleted file mode 100644 index a110ce699..000000000 --- a/src/packages/components/src/inspector-control-tabs/index.js +++ /dev/null @@ -1,128 +0,0 @@ -/** - * Inspector Controls - * - */ - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import classnames from 'classnames'; -import { Icon } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { createRef, useEffect } from '@wordpress/element'; -import { - blockDefault, - brush, - settings, -} from '@wordpress/icons'; -import './editor.scss'; - -function InspectorControlTabs( { allowedTabs = null, activeTab, setActiveTab, openedTab, toggleOpened, tabs = null } ) { - - const defaultTabs = [ - { - key : 'general', - title: __( 'General', 'kadence-blocks' ), - icon : blockDefault, - }, - { - key : 'style', - title: __( 'Style', 'kadence-blocks' ), - icon : brush, - }, - { - key : 'advanced', - title: __( 'Advanced', 'kadence-blocks' ), - icon : settings, - }, - ]; - - const tabKeys = [ 'general', 'style', 'advanced' ]; - const allowedTabKeys = allowedTabs ? allowedTabs : tabKeys; - const tabsMap = tabs ? tabs : defaultTabs; - const tabsContainer = createRef(); - - let componentsPanel; - - useEffect( () => { - componentsPanel = tabsContainer.current.closest( '.components-panel' ); - } ); - - if ( activeTab !== openedTab ) { - setActiveTab( openedTab ); - } - - const setDataAttr = ( key ) => { - if ( componentsPanel ) { - componentsPanel.setAttribute( 'data-kadence-hide-advanced', ( key !== 'advanced' ) ); - componentsPanel.setAttribute( 'data-kadence-active-tab', key ); - } - }; - - const switchTab = ( key ) => { - toggleOpened( key ); - setActiveTab( key ); - }; - - useEffect( () => { - setDataAttr( activeTab ); - return () => { - - if( componentsPanel ) { - const kadenceInspectorTabs = componentsPanel.querySelector( - '.kadence-blocks-inspector-tabs' - ); - - if( ! kadenceInspectorTabs || null === kadenceInspectorTabs ) { - componentsPanel.removeAttribute( 'data-kadence-hide-advanced' ); - componentsPanel.removeAttribute( 'data-kadence-active-tab' ); - } - } - }; - - - }, [ activeTab ] ); - - return ( -
- {tabsMap.map( ( { - key, title, icon, - }, i ) => { - if ( allowedTabKeys.includes( key ) ) { - return ( - - ); - } - } )} -
- ); -} - -export default compose( [ - withSelect( ( select, ownProps ) => { - const initialOpen = ( undefined !== ownProps.initialOpen ? ownProps.initialOpen : 'general' ); - return { - openedTab: select( 'kadenceblocks/data' ).getOpenSidebarTabKey( ownProps.panelName + select( 'core/block-editor' ).getSelectedBlockClientId(), initialOpen ), - }; - } ), - withDispatch( ( dispatch, ownProps, { select } ) => { - const { getSelectedBlockClientId } = select( 'core/block-editor' ); - - return { - toggleOpened: ( key ) => { - dispatch( 'kadenceblocks/data' ).switchEditorTabOpened( ownProps.panelName + getSelectedBlockClientId(), key ); - }, - }; - } ), -] )( InspectorControlTabs ); diff --git a/src/packages/components/src/inspector-controls/index.js b/src/packages/components/src/inspector-controls/index.js deleted file mode 100644 index 2895c0f8b..000000000 --- a/src/packages/components/src/inspector-controls/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * WordPress dependencies - */ -import {InspectorControls} from '@wordpress/block-editor'; -import {showSettings} from '@kadence/helpers'; - -function KadenceInspectorControls({ - children, - blockSlug = false, - settingSlug = 'allSettings' - } ) { - - /* If the block slug is set, check the panel name against the allowed settings for the user */ - if ( blockSlug !== false && ! showSettings( settingSlug, blockSlug ) ) { - return null; - } - - return ( - - {children} - - ) -} - -export default KadenceInspectorControls; - diff --git a/src/packages/components/src/kadence-web-font-loader/index.js b/src/packages/components/src/kadence-web-font-loader/index.js deleted file mode 100644 index 66af60be0..000000000 --- a/src/packages/components/src/kadence-web-font-loader/index.js +++ /dev/null @@ -1,69 +0,0 @@ -import { useEffect, useState } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; -import WebFont from "webfontloader"; -const statuses = { - inactive: 'inactive', - active: 'active', - loading: 'loading', -}; - -export default function KadenceWebfontLoader( { - typography, - clientId, - id, - children -} ) { - const [ status, setStatus ] = useState( undefined ); - const { addWebFont } = useDispatch( 'kadenceblocks/data' ); - const [ device, setDevice ] = useState( 'desktop' ); - const { previewDevice, isUniqueFont } = useSelect( - ( select ) => { - return { - isUniqueFont: ( value, frame ) => select( 'kadenceblocks/data' ).isUniqueFont( value, frame ), - previewDevice: select( 'kadenceblocks/data' ).getPreviewDeviceType(), - }; - }, - [] - ); - const nConfig = { - google: { - families: [ typography[ 0 ].family + ( typography?.[ 0 ]?.variant ? ':' + typography[ 0 ].variant : '' ) ], - }, - }; - const loadFonts = () => { - setTimeout( () => { - if ( undefined !== nConfig?.google?.families?.[ 0 ] && isUniqueFont( nConfig?.google?.families?.[ 0 ], ( frames['editor-canvas'] ? 'Desktop' : 'iframe' ) ) ) { - WebFont.load( { - ...nConfig, - loading: handleLoading, - active: handleActive, - inactive: handleInactive, - context: frames['editor-canvas'], - } ); - addWebFont( nConfig?.google?.families?.[ 0 ], ( frames['editor-canvas'] ? 'Desktop' : 'iframe' ) ); - } - }, 50 ); - } - useEffect( () => { - setDevice( previewDevice ); - }, [] ); - useEffect( () => { - if ( device !== previewDevice ) { - setDevice( previewDevice ); - loadFonts(); - } - }, [previewDevice] ); - useEffect( () => { - loadFonts(); - }, [ nConfig ] ); - const handleLoading = () => { - setStatus( statuses.loading ); - } - const handleActive = () => { - setStatus( statuses.active ); - } - const handleInactive = () => { - setStatus( statuses.inactive ); - } - return children || null; -} \ No newline at end of file diff --git a/src/packages/components/src/links/dynamic-link-control/index.js b/src/packages/components/src/links/dynamic-link-control/index.js deleted file mode 100644 index 3c50eea0c..000000000 --- a/src/packages/components/src/links/dynamic-link-control/index.js +++ /dev/null @@ -1,84 +0,0 @@ - /** - * External Dependencies - */ - import { debounce } from 'lodash'; - - /** - * WordPress dependencies - */ - import { __ } from '@wordpress/i18n'; - import { Fragment, Component } from '@wordpress/element'; - import { Button, withFilters, Popover, ExternalLink } from '@wordpress/components'; - import { createRef } from '@wordpress/element'; - - /** - * Internal Dependencies - */ - - /** - * Build the Dynamic Link controls - */ -class DynamicLinkControl extends Component { - constructor() { - super( ...arguments ); - - this.toggle = this.toggle.bind( this ); - this.state = { - open: false, - }; - this.popRef = createRef(); - this.debouncedToggle = debounce( this.toggle.bind( this ), 100 ); - } - toggle() { - this.setState( { open: ! this.state.open } ); - } - render() { - const { open } = this.state; - - // @todo: Replace with icon from @kadence/icons once created - let icons = {}; - icons.dynamic = - - ; - - return ( - - - ) ) } - - - ); - } - return null; - } - } - - export default compose( - withSafeTimeout, - withInstanceId - )( InputSearch ); diff --git a/src/packages/components/src/links/link-control/editor.scss b/src/packages/components/src/links/link-control/editor.scss deleted file mode 100644 index ef4ca1064..000000000 --- a/src/packages/components/src/links/link-control/editor.scss +++ /dev/null @@ -1,183 +0,0 @@ -.kb-dynamic-popover-inner-wrap { - min-width: 280px; - padding: 20px; - h2 { - font-size: 13px; - margin-top:1em; - margin-bottom: 0.3em; - } -} -.kb-dynamic-menu.has-icon svg { - width: 20px; -} -.kb-side-link-control .kb-search-selection-name .kb-search-url-clear.has-icon { - position: absolute; - top: 0; - right: 28px; - z-index: 1; - display: block; -} -.block-editor-block-toolbar .components-toolbar .components-button.kb-dynamic-menu.has-icon svg { - width: 20px; - min-width:20px; -} -.block-editor-block-toolbar .components-toolbar .components-button.kb-dynamic-menu:first-child, .block-editor-block-toolbar .components-toolbar .components-button.kb-dynamic-menu:last-child { - min-width: 48px; - padding-left: 12px; - padding-right: 12px; -} -.block-editor-block-toolbar .components-toolbar .components-button.kb-dynamic-menu:first-child:before, .block-editor-block-toolbar .components-toolbar .components-button.kb-dynamic-menu:last-child:before { - left: 8px; - right: 8px; -} -.kb-pro-notice { - padding:12px; -} -.kb-pro-notice h2 { - margin-top: 0; -} -.kb-side-link-control { - .components-base-control { - margin:0; - } - .kb-search-selection-name { - display: flex; - flex-grow: 1; - max-width: calc( 100% - 30px ); - .components-base-control__field { - margin: 0; - display: flex; - flex-grow: 1; - border: 1px solid var(--kb-border-color, #859CB6 ); - max-width: 100%; - position: relative; - .components-spinner { - position: absolute; - right: 30px; - top: 9px; - margin: 0; - } - } - } - .kb-search-url-input { - display: flex; - width: 100%; - input { - border: 0; - border-radius: 0; - padding-right: 30px; - width: 100%; - } - } - .kb-search-selection-name .kb-search-url-submit.has-icon { - position: absolute; - top: 0; - right: 0; - z-index: 1; - display: block; - } - .kb-side-link-control-inner-row .kb-search-selection-name .components-button.has-icon { - border: 0; - height: 36px; - } - &.has-dynamic-support .kb-search-selection-name { - max-width: calc( 100% - 60px ); - } - .kb-side-link-control-inner-row { - display: flex; - max-width: 100%; - .components-button.has-icon { - border: 1px solid var(--kb-border-color, #859CB6 ); - height: 38px; - border-radius: 0; - } - .components-button.has-icon { - min-width: 28px; - padding: 6px; - } - .components-button svg { - height: 16px; - width: 16px; - } - } - .components-external-link { - margin: 7px; - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - min-width: 50px; - max-width: 500px; - } - .block-editor-format-toolbar__link-container-content { - display: flex; - flex-grow: 1; - border: 1px solid var(--kb-border-color, #859CB6 ); - max-width: 100%; - } - .kb-search-selection-suggestions { - margin: 0; - padding: 0px 0px; - max-height: 200px; - overflow-y: auto; - .kb-search-selection-suggestion { - position: relative; - display: flex; - align-items: center; - font-size: 13px; - cursor: pointer; - background: #fff; - width: 100%; - border: none; - text-align: left; - padding: 8px 6px; - border-radius: 0px; - height: auto; - &:focus, &:hover { - background-color: #eee; - } - } - .kb-search-selection-search-item-header { - display: block; - margin-right: 8px; - overflow: hidden; - white-space: nowrap; - } - .kb-search-selection-search-item-title { - overflow: hidden; - text-overflow: ellipsis; - padding-right: 24px; - display: block; - margin-bottom: .2em; - font-weight: 500; - position: relative; - mark { - font-weight: 700; - color: #000; - background-color: transparent; - } - } - .kb-search-selection-search-item-info { - display: block; - color: #757575; - font-size: .9em; - line-height: 1.3; - } - .kb-search-selection-search-item-type { - display: block; - padding: 3px 8px; - margin-left: auto; - font-size: .9em; - background-color: #f0f0f0; - border-radius: 2px; - } - } -} -.kb-side-link-control .kb-side-link-control-inner-row .components-button.kb-dynamic-url-sidebar.has-icon { - border-left: 0; - border-right: 0; -} -.components-toolbar-group .components-button.kb-dynamic-menu.has-icon svg { - min-width: 18px; -} \ No newline at end of file diff --git a/src/packages/components/src/links/link-control/index.js b/src/packages/components/src/links/link-control/index.js deleted file mode 100644 index ac2047982..000000000 --- a/src/packages/components/src/links/link-control/index.js +++ /dev/null @@ -1,190 +0,0 @@ -/** - * External dependencies - */ - import classnames from 'classnames'; - /** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Fragment, Component } from '@wordpress/element'; -import { ToggleControl, TextControl, SelectControl } from '@wordpress/components'; -import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; - /** - * Import Css - */ - import './editor.scss'; - /** - * Internal dependencies - */ -import InputSearch from '../input-search'; - - /** - * Build the typography controls - * @returns {object} typography settings. - */ -class URLInputControl extends Component { - constructor() { - super( ...arguments ); - this.state = { - isEditingLink: false, - isSettingsExpanded: false, - urlInput: null, - }; - } - render() { - const { label, - onChangeUrl, - url, - additionalControls = true, - opensInNewTab, - onChangeTarget, - linkNoFollow, - onChangeFollow, - linkSponsored, - onChangeSponsored, - linkDownload, - onChangeDownload, - linkTitle, - onChangeTitle, - onChangeLinkClass, - linkClass, - changeTargetType = false, - allowClear = false, - dynamicAttribute = '' } = this.props; - const { urlInput, isEditingLink, isSettingsExpanded } = this.state; - const stopPropagation = ( event ) => { - event.stopPropagation(); - }; - - const stopPropagationRelevantKeys = ( event ) => { - if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) { - // Stop the key event from propagating up to ObserveTyping.startTypingInTextField. - event.stopPropagation(); - } - }; - - const stopEditLink = () => { - this.setState( { isEditingLink: false } ); - }; - const setUrlInput = ( value ) => { - this.setState( { urlInput: value } ); - }; - const toggleSettingsVisibility = () => { - this.setState( { isSettingsExpanded: ! isSettingsExpanded } ); - }; - - const onSubmitLinkChange = ( url ) => { - onChangeUrl( url ); - }; - const onSetNewTab = ( value ) => { - onChangeTarget( value ); - }; - - const onSetLinkNoFollow = ( value ) => { - onChangeFollow( value ); - }; - - const onSetLinkSponsored = ( value ) => { - onChangeSponsored( value ); - }; - - const onSetLinkDownload = ( value ) => { - onChangeDownload( value ); - }; - const onSetLinkTitle = ( value ) => { - onChangeTitle( value ); - }; - const onSetLinkClass = ( value ) => { - onChangeLinkClass( value ); - }; - - const advancedOptions = ( - - { onChangeTarget && ( - - { changeTargetType && ( - - - { opensInNewTab === 'video' && ( -

{ __( 'NOTE: Video popup only works with youtube and vimeo links.', 'kadence-blocks' ) }

- ) } - - ) } - { ! changeTargetType && ( - - ) } - - ) } - { onChangeFollow && ( - - ) } - { onChangeSponsored && ( - - ) } - { onChangeDownload && ( - - ) } - { onChangeTitle && ( - - ) } - { onChangeLinkClass && ( - - ) } - - ); - const linkEditorValue = urlInput !== null ? urlInput : url; - return ( -
- { label && ( - - ) } - onSubmitLinkChange( url ) } - attributes={ this.props.attributes } - dynamicAttribute={ dynamicAttribute } - additionalControls={ additionalControls } - advancedOptions={ advancedOptions } - isSettingsExpanded={ isSettingsExpanded } - onExpandSettings={ toggleSettingsVisibility } - allowClear={ allowClear } - { ...this.props } - /> -
- ); - } - }; - export default URLInputControl; diff --git a/src/packages/components/src/links/text-highlight/index.js b/src/packages/components/src/links/text-highlight/index.js deleted file mode 100644 index 5eac801e9..000000000 --- a/src/packages/components/src/links/text-highlight/index.js +++ /dev/null @@ -1,29 +0,0 @@ - -/** - * External dependencies - */ -import { escapeRegExp } from 'lodash'; - - /** - * WordPress dependencies - */ - import { createInterpolateElement } from '@wordpress/element'; - - const TextHighlight = ( { text = '', highlight = '' } ) => { - const trimmedHighlightText = highlight.trim(); - - if ( ! trimmedHighlightText ) { - return text; - } - - const regex = new RegExp( - `(${ escapeRegExp( trimmedHighlightText ) })`, - 'gi' - ); - - return createInterpolateElement( text.replace( regex, '$&' ), { - mark: , - } ); - }; - - export default TextHighlight; \ No newline at end of file diff --git a/src/packages/components/src/measurement-range-control/constants.js b/src/packages/components/src/measurement-range-control/constants.js deleted file mode 100644 index f008eca57..000000000 --- a/src/packages/components/src/measurement-range-control/constants.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Internal block libraries - */ - import { __ } from '@wordpress/i18n'; -export const OPTIONS_MAP = [ - { - value: '0', - label: __( 'None', 'kadence-blocks' ), - size: 0, - name: __( 'None', 'kadence-blocks' ), - }, - { - value: 'xxs', - output: 'var(--global-kb-spacing-xxs, 0.5rem)', - size: 8, - label: __( 'XXS', 'kadence-blocks' ), - name: __( '2X Small', 'kadence-blocks' ), - }, - { - value: 'xs', - output: 'var(--global-kb-spacing-xs, 1rem)', - size: 16, - label: __( 'XS', 'kadence-blocks' ), - name: __( 'X Small', 'kadence-blocks' ), - }, - { - value: 'sm', - output: 'var(--global-kb-spacing-sm, 1.5rem)', - size: 24, - label: __( 'SM', 'kadence-blocks' ), - name: __( 'Small', 'kadence-blocks' ), - }, - { - value: 'md', - output: 'var(--global-kb-spacing-md, 2rem)', - size: 32, - label: __( 'MD', 'kadence-blocks' ), - name: __( 'Medium', 'kadence-blocks' ), - }, - { - value: 'lg', - output: 'var(--global-kb-spacing-lg, 3rem)', - size: 48, - label: __( 'LG', 'kadence-blocks' ), - name: __( 'Large', 'kadence-blocks' ), - }, - { - value: 'xl', - output: 'var(--global-kb-spacing-xl, 4rem)', - size: 64, - label: __( 'XL', 'kadence-blocks' ), - name: __( 'X Large', 'kadence-blocks' ), - }, - { - value: 'xxl', - output: 'var(--global-kb-spacing-xxl, 5rem)', - size: 80, - label: __( 'XXL', 'kadence-blocks' ), - name: __( '2X Large', 'kadence-blocks' ), - }, - { - value: '3xl', - output: 'var(--global-kb-spacing-3xl, 6.5rem)', - size: 104, - label: __( '3XL', 'kadence-blocks' ), - name: __( '3X Large', 'kadence-blocks' ), - }, - { - value: '4xl', - output: 'var(--global-kb-spacing-4xl, 8rem)', - size: 128, - label: __( '4XL', 'kadence-blocks' ), - name: __( '4X Large', 'kadence-blocks' ), - }, - { - value: '5xl', - output: 'var(--global-kb-spacing-5xl, 10rem)', - size: 160, - label: __( '5XL', 'kadence-blocks' ), - name: __( '5X Large', 'kadence-blocks' ), - }, -]; \ No newline at end of file diff --git a/src/packages/components/src/measurement-range-control/editor.scss b/src/packages/components/src/measurement-range-control/editor.scss deleted file mode 100644 index 3a249c4ad..000000000 --- a/src/packages/components/src/measurement-range-control/editor.scss +++ /dev/null @@ -1,259 +0,0 @@ -.components-base-control > .kadence-component__header { - margin-bottom: 6px; - color: #1e1e1e; - font-size: 13px; - font-weight: 400; - gap: 2px; - display:flex; - .kadence-component__header__title { - flex-grow: 1; - display: flex; - align-items: center; - } - .title-reset-wrap { - width: 20px; - overflow: hidden; - } - .components-button.is-small.has-icon.is-reset { - background: transparent; - height: auto; - border: 0; - box-shadow: none; - padding: 2px 4px; - outline: 0; - color: #A0AEC0; - font-size: 18px; - width: 20px; - min-width: 20px; - padding: 0; - margin: 0 0 0 -20px; - display: flex; - height: 18px; - } - .kadence-component__header__title:hover { - .components-button.is-small.has-icon.is-reset { - margin: 0 0px 0 0px; - } - } - .components-button.has-icon.kadence-control-toggle { - background: transparent; - height: auto; - border: 0; - box-shadow: none; - padding: 2px 4px; - margin-bottom: 0; - outline: 0; - color: #A0AEC0; - width: auto; - font-size: 18px; - min-width: 0; - svg { - width: 1em; - height: 1em; - } - } -} - -.kadence-controls-content .components-spacing-sizes-control__range-control { - flex-grow: 1; -} -.component-spacing-sizes-control.kadence-measure-range-control { - display: block; - padding: 0; -} -.component-spacing-sizes-control .kadence-controls-content .components-spacing-sizes-control__range-control { - flex-grow: 1; -} -.kadence-measure-range-control .kadence-single-measure-range-control { - flex: 1; - display: block; - margin: 0; - padding: 0; -} -.kadence-measure-range-control .kadence-single-measure-range-control .kadence-controls-content { - display: block; - margin: 0; - padding: 0; - align-items: center; -} -.kadence-measure-range-control .kadence-single-measure-range-control .kadence-controls-content .kadence-popover-spacing-btn { - border: 1px solid var(--kb-border-color, #859CB6 ); - background: transparent; - color: inherit; - padding: 0px; - text-align: left; - width: 100%; - box-shadow: none; - display: block; - height: auto; - .kadence-spacing-btn-val { - display: block; - height: 30px; - line-height: 22px; - padding: 4px; - } -} -.kadence-measure-range-control > .kadence-controls-content { - gap:2px; -} -.kadence-measure-range-control > .kadence-radio-range__header .components-flex-item { - flex-grow: 1; -} -.kadence-measure-range-control > .kadence-radio-range__header .components-button.is-small.has-icon { - background: transparent; - height: auto; - border: 0; - box-shadow: none; - padding: 2px 4px; - margin-bottom: 0; - outline: 0; - color: #A0AEC0; - width: auto; - font-size: 18px; - min-width: 0; - svg { - width: 1em; - height: 1em; - } - &.is-pressed { - background:var(--wp-admin-theme-color, #00669b); - color:white; - } -} - -.kadence-measure-range-control { - .kadence-spacing-btn-placeholder { - opacity: .4; - } - .kadence-range-popover-settings .components-base-control__field { - margin-bottom: 0; - } - .kadence-range-popover-settings .components-range-control__wrapper { - margin-bottom: 0; - } - .components-unit-control-wrapper .components-input-control .components-input-control__label, .kadence-placement-label { - width: 100%; - height: 16px; - padding: 0; - line-height: 15px; - font-size: 7px !important; - margin: 0; - font-weight: 500; - display: block; - border: 0; - border-bottom: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 0; - text-align: center; - text-transform: uppercase; - } - .components-unit-control-wrapper > .components-input-control { - gap: 0; - .components-input-control__input { - padding-left: 4px; - padding-right: 4px; - } - } - .components-unit-control-wrapper .components-input-control > .components-flex-item { - max-width: 100%; - } - .components-unit-control-wrapper { - border: 1px solid var(--kb-border-color, #859CB6 ); - border-radius: 2px; - .components-input-control__container { - .components-input-control__backdrop { - border: 0; - border-radius: 0; - } - } - } - .kadence-single-measure-range-control.kb-measure-box-left { - .components-unit-control-wrapper .components-input-control__backdrop, .kadence-spacing-btn-val { - box-shadow: inset 2px 0 var(--kb-border-color, #859CB6 ); - } - } - .kadence-single-measure-range-control.kb-measure-box-top{ - .components-unit-control-wrapper .components-input-control__backdrop, .kadence-spacing-btn-val { - box-shadow: inset 0px 2px var(--kb-border-color, #859CB6 ); - } - } - .kadence-single-measure-range-control.kb-measure-box-right { - .components-unit-control-wrapper .components-input-control__backdrop, .kadence-spacing-btn-val { - box-shadow: inset -2px 0px var(--kb-border-color, #859CB6 ); - } - } - .kadence-single-measure-range-control.kb-measure-box-bottom { - .components-unit-control-wrapper .components-input-control__backdrop, .kadence-spacing-btn-val { - box-shadow: inset 0px -2px var(--kb-border-color, #859CB6 ); - } - } - .kadence-measure-control-select { - appearance: none; - background: transparent; - border-radius: 0px 2px 2px 0px; - display: block; - outline: none; - margin: 0px; - min-height: auto; - font-family: inherit; - box-sizing: border-box; - padding: 2px 1px; - width: 20px; - color: rgb(47, 47, 47); - font-size: 10px; - line-height: 1; - letter-spacing: -0.5px; - text-transform: uppercase; - text-align-last: center; - height: 100%; - border: 1px solid var(--kb-border-color, #859CB6 ); - transition: box-shadow 0.1s linear 0s, border 0.1s linear 0s; - cursor: pointer; - &:not(:disabled):hover { - background-color: #EDF2F7; - } - &:focus { - border: 1px solid var( --wp-admin-theme-color-darker-10, #006ba1); - box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10, #006ba1); - outline-offset: 0px; - outline: transparent solid 2px; - z-index: 1; - } - &:disabled { - background-image: none; - } - } -} -.kadence-measure-range-control .kadence-single-measure-range-control.kb-measure-input-all-inputs .kadence-single-unit-control { - display: flex; - .components-unit-control-wrapper { - flex: 1; - } -} -.kadence-range-popover-settings-inner { - display: flex; - flex-direction: row; - align-items: flex-end; - gap: 8px; -} - -.kadence-range-popover-settings-inner .components-base-control.components-range-control.components-spacing-sizes-control__range-control { - flex-grow: 1; -} - -.kadence-range-popover-settings-inner .components-button.is-secondary { - height:30px; - min-height:30px; - margin-bottom:8px -} -.kadence-measure-range-control .kadence-single-measure-range-control.kb-measure-input-all-inputs .kadence-measure-control-select-wrapper { - height: 32px; -} -.kadence-range-popover-settings-inner .components-range-control .components-range-control__wrapper { - margin-bottom: 0; -} -.kadence-range-popover-settings-inner .components-range-control .components-base-control__field { - margin-bottom: 0; -} -.kadence-measure-range-control .kadence-single-measure-range-control.kb-measure-input-all-inputs .kadence-measure-control-select-wrapper .kadence-measure-control-select { - width: 26px; -} \ No newline at end of file diff --git a/src/packages/components/src/measurement-range-control/index.js b/src/packages/components/src/measurement-range-control/index.js deleted file mode 100644 index 2e7cededa..000000000 --- a/src/packages/components/src/measurement-range-control/index.js +++ /dev/null @@ -1,350 +0,0 @@ -/** - * Range Control - * - */ -/** - * WordPress dependencies - */ - import { useInstanceId } from '@wordpress/compose'; - import { useState, useEffect } from '@wordpress/element'; - import SingleMeasureRangeControl from './single-control'; - import { map, isEqual } from 'lodash'; -/** - * Import Css - */ -import './editor.scss'; -/** - * Internal block libraries - */ - import { __ } from '@wordpress/i18n'; -import { - Flex, - FlexBlock, - FlexItem, - Button, - DropdownMenu, - ButtonGroup, - RangeControl as CoreRangeControl, - __experimentalUnitControl as UnitControl -} from '@wordpress/components'; -import { - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, - individualIcon, - linkedIcon, - topLeftIcon, - topRightIcon, - bottomRightIcon, - bottomLeftIcon, - radiusLinkedIcon, - radiusIndividualIcon -} from '@kadence/icons'; -import { settings, link, linkOff } from '@wordpress/icons'; -import { OPTIONS_MAP } from './constants'; -import { isCustomOption, getOptionIndex, getOptionFromSize, getOptionSize } from './utils'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function MeasureRangeControl( { - label, - onChange, - onControl, - value = '', - className = '', - options = OPTIONS_MAP, - step = 1, - max = 200, - min = 0, - beforeIcon = '', - help = '', - placeholder = [ '', '', '', '' ], - defaultValue = [ '', '', '', '' ], - control = 'individual', - unit = '', - onUnit, - units = [ 'px', 'em', 'rem' ], - disableCustomSizes = false, - isBorderRadius= false, - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = link, - unlinkIcon = linkOff, - customControl = false, - setCustomControl = null, - parentLabel = null, - reset, - onMouseOver, - onMouseOut, - allowAuto = false, -} ) { - const measureIcons = { - first: isBorderRadius ? topLeftIcon : firstIcon, - second: isBorderRadius ? topRightIcon : secondIcon, - third: isBorderRadius ? bottomRightIcon : thirdIcon, - fourth: isBorderRadius ? bottomLeftIcon : fourthIcon, - link: isBorderRadius ? radiusLinkedIcon : linkIcon, - unlink: isBorderRadius ? radiusIndividualIcon : unlinkIcon, - } - const [ isCustom, setIsCustom ] = useState( false ); - const [ theControl, setTheControl ] = useState( control ); - const reviewOptions = JSON.parse(JSON.stringify(options)); - reviewOptions.push( { - value: 'ss-auto', - output: 'var(--global-kb-spacing-auto, auto)', - label: __( 'Auto', 'kadence-blocks' ), - size: 0, - name: __( 'Auto', 'kadence-blocks' ), - } ); - useEffect( () => { - setIsCustom( isCustomOption( reviewOptions, value ) ); - }, [] ); - const realIsCustomControl = setCustomControl ? customControl : isCustom; - const realSetIsCustom = setCustomControl ? setCustomControl : setIsCustom; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - onChange( defaultValue ); - } - } - const onSetIsCustom = () => { - if ( ! realIsCustomControl ) { - const newValue = [ - getOptionSize( options, ( value ? value[ 0 ] : '' ), unit ), - getOptionSize( options, ( value ? value[ 1 ] : '' ), unit ), - getOptionSize( options, ( value ? value[ 2 ] : '' ), unit ), - getOptionSize( options, ( value ? value[ 3 ] : '' ), unit ), - ]; - onChange( newValue ); - } else { - const newValue = [ - getOptionFromSize( options, ( value ? value[ 0 ] : '' ), unit ), - getOptionFromSize( options, ( value ? value[ 1 ] : '' ), unit ), - getOptionFromSize( options, ( value ? value[ 2 ] : '' ), unit ), - getOptionFromSize( options, ( value ? value[ 3 ] : '' ), unit ), - ]; - onChange( newValue ); - } - realSetIsCustom( ! realIsCustomControl ); - } - const realControl = onControl ? control : theControl; - const realSetOnControl = onControl ? onControl : setTheControl; - return [ - onChange && ( -
- { label && ( - - { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - { ! disableCustomSizes && ( -
- ), - ]; -} diff --git a/src/packages/components/src/measurement-range-control/responsive.js b/src/packages/components/src/measurement-range-control/responsive.js deleted file mode 100644 index 8a2ea5864..000000000 --- a/src/packages/components/src/measurement-range-control/responsive.js +++ /dev/null @@ -1,389 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useRef, useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map, isEqual } from 'lodash'; -import MeasureRangeControl from './index'; -import { capitalizeFirstLetter, objectSameFill, clearNonMatchingValues } from '@kadence/helpers'; -import { undo } from '@wordpress/icons'; -/** - * Import Css - */ - import './editor.scss'; -import { - Dashicon, - Button, - ButtonGroup, - Flex, -} from '@wordpress/components'; -import { - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, -} from '@kadence/icons'; -import { OPTIONS_MAP } from './constants'; -import { settings, link, linkOff } from '@wordpress/icons'; -import { isCustomOption, getOptionIndex, getOptionFromSize, getOptionSize } from './utils'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveMeasureRangeControl( { - label, - subLabel, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - onControl, - control = 'individual', - options = OPTIONS_MAP, - step = 1, - max = 100, - min = 0, - unit = '', - onUnit, - showUnit = false, - units = [ 'px', 'em', 'rem' ], - isBorderRadius = false, - disableCustomSizes = false, - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = link, - unlinkIcon = linkOff, - deskDefault = [ '', '', '', '' ], - tabletDefault = [ '', '', '', '' ], - mobileDefault = [ '', '', '', '' ], - reset = true, - setCustomControl = null, - onMouseOver, - onMouseOut, - allowAuto = false, - } ) { - const ref = useRef(); - const measureIcons = { - first: isBorderRadius ? topLeftIcon : firstIcon, - second: isBorderRadius ? topRightIcon : secondIcon, - third: isBorderRadius ? bottomRightIcon : thirdIcon, - fourth: isBorderRadius ? bottomLeftIcon : fourthIcon, - link: isBorderRadius ? radiusLinkedIcon : linkIcon, - unlink: isBorderRadius ? radiusIndividualIcon : unlinkIcon, - } - const [ isCustom, setIsCustom ] = useState( false ); - const [ theControl, setTheControl ] = useState( control ); - const realIsCustomControl = setCustomControl ? customControl : isCustom; - const realSetIsCustom = setCustomControl ? setCustomControl : setIsCustom; - const reviewOptions = JSON.parse(JSON.stringify(options)); - reviewOptions.push( { - value: 'ss-auto', - output: 'var(--global-kb-spacing-auto, auto)', - label: __( 'Auto', 'kadence-blocks' ), - size: 0, - name: __( 'Auto', 'kadence-blocks' ), - } ); - const onSetIsCustom = () => { - convertValueToFromCustomByDeviceType() - - realSetIsCustom( ! realIsCustomControl ); - } - - const convertValueToFromCustomByDeviceType = () => { - if ( deviceType == 'Mobile' ) { - const newValue = convertValueToFromCustom( mobileValue ); - if ( objectSameFill( mobileValue, newValue ) ) { - onChangeMobile( newValue ); - } - } else if ( deviceType == 'Tablet' ) { - const newValue = convertValueToFromCustom( tabletValue ); - if ( objectSameFill( tabletValue, newValue ) ) { - onChangeTablet( newValue ); - } - } else { - const newValue = convertValueToFromCustom( value ); - if ( objectSameFill( value, newValue ) ) { - onChange( newValue ); - } - } - } - - const convertValueToFromCustom = ( valueToConvert ) => { - let convertedValue = []; - //convert to custom - if ( ! realIsCustomControl ) { - convertedValue = [ - getOptionSize( options, ( valueToConvert ? valueToConvert[ 0 ] : '' ), unit ), - getOptionSize( options, ( valueToConvert ? valueToConvert[ 1 ] : '' ), unit ), - getOptionSize( options, ( valueToConvert ? valueToConvert[ 2 ] : '' ), unit ), - getOptionSize( options, ( valueToConvert ? valueToConvert[ 3 ] : '' ), unit ), - ]; - //convert to option - } else { - convertedValue = [ - getOptionFromSize( options, ( valueToConvert ? valueToConvert[ 0 ] : '' ), unit ), - getOptionFromSize( options, ( valueToConvert ? valueToConvert[ 1 ] : '' ), unit ), - getOptionFromSize( options, ( valueToConvert ? valueToConvert[ 2 ] : '' ), unit ), - getOptionFromSize( options, ( valueToConvert ? valueToConvert[ 3 ] : '' ), unit ), - ]; - } - return convertedValue; - } - - const realControl = onControl ? control : theControl; - const realSetOnControl = onControl ? onControl : setTheControl; - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - useEffect( () => { - let valueToCheck = value; - if ( theDevice == 'Tablet' ) { - valueToCheck = tabletValue; - }else if ( theDevice == 'Mobile' ) { - valueToCheck = mobileValue; - } - setIsCustom( isCustomOption( reviewOptions, valueToCheck ) ); - }, [theDevice] ); - - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - let liveValue = ( value ? value : [ '', '', '', '' ] ); - if ( deviceType === 'Tablet' ) { - liveValue = ( tabletValue ? tabletValue : [ '', '', '', '' ] ); - } else if ( deviceType === 'Mobile' ) { - liveValue = ( mobileValue ? mobileValue : [ '', '', '', '' ] ); - } - const onReset = () => { - if ( deviceType === 'Tablet' ) { - onChangeTablet( tabletDefault ); - } else if ( deviceType === 'Mobile' ) { - onChangeMobile( mobileDefault ); - } else { - onChange( deskDefault ); - } - } - let mobilePlaceholder = tabletValue ? JSON.parse( JSON.stringify( tabletValue ) ) : [ '', '', '', '' ]; - if ( ! mobilePlaceholder?.[0] ) { - mobilePlaceholder[0] = value?.[0] ? value[0] : ''; - } - if ( ! mobilePlaceholder?.[1] ) { - mobilePlaceholder[1] = value?.[1] ? value[1] : ''; - } - if ( ! mobilePlaceholder?.[2] ) { - mobilePlaceholder[2] = value?.[2] ? value[2] : ''; - } - if ( ! mobilePlaceholder?.[3] ) { - mobilePlaceholder[3] = value?.[3] ? value[3] : ''; - } - const output = {}; - output.Mobile = ( - onChangeMobile( clearNonMatchingValues( mobileValue, size ) ) } - control={ realControl } - onControl={ ( value ) => realSetOnControl( value ) } - setCustomControl={ realSetIsCustom } - customControl={ realIsCustomControl } - options={ options } - defaultValue={ mobileDefault } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ ( onUnit ? onUnit : undefined ) } - showUnit={ true } - units={ [ unit ] } - isBorderRadius={ isBorderRadius } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - onMouseOver={ onMouseOver } - onMouseOut={ onMouseOut } - allowAuto={ allowAuto } - /> - ); - output.Tablet = ( - onChangeTablet( clearNonMatchingValues( tabletValue, size ) ) } - control={ realControl } - onControl={ ( value ) => realSetOnControl( value ) } - setCustomControl={ realSetIsCustom } - customControl={ realIsCustomControl } - options={ options } - defaultValue={ tabletDefault } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ ( onUnit ? onUnit : undefined ) } - showUnit={ true } - units={ [ unit ] } - isBorderRadius={ isBorderRadius } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - onMouseOver={ onMouseOver } - onMouseOut={ onMouseOut } - allowAuto={ allowAuto } - /> - ); - output.Desktop = ( - onChange( clearNonMatchingValues( value, size ) ) } - control={ realControl } - onControl={ ( value ) => realSetOnControl( value ) } - setCustomControl={ realSetIsCustom } - customControl={ realIsCustomControl } - options={ options } - defaultValue={ deskDefault } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ ( onUnit ? onUnit : undefined ) } - showUnit={ showUnit } - units={ units } - isBorderRadius={ isBorderRadius } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - onMouseOver={ onMouseOver } - onMouseOut={ onMouseOut } - allowAuto={ allowAuto } - /> - ); - let currentDefault = deskDefault; - if ( 'Mobile' === deviceType ) { - currentDefault = mobileDefault; - } else if ( 'Mobile' === deviceType ) { - currentDefault = tabletDefault; - } - return [ - onChange && onChangeTablet && onChangeMobile && ( -
- - { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - - { ! disableCustomSizes && ! subLabel && ( -
- ), - ]; -} diff --git a/src/packages/components/src/measurement-range-control/single-control.js b/src/packages/components/src/measurement-range-control/single-control.js deleted file mode 100644 index 265f6b838..000000000 --- a/src/packages/components/src/measurement-range-control/single-control.js +++ /dev/null @@ -1,343 +0,0 @@ -/** - * Range Control - * - */ -/** - * WordPress dependencies - */ - import { useInstanceId } from '@wordpress/compose'; - import { useState, useEffect } from '@wordpress/element'; -/** - * Import Css - */ -import './editor.scss'; -/** - * Internal block libraries - */ - import { __ } from '@wordpress/i18n'; -import { - Flex, - FlexBlock, - FlexItem, - Button, - DropdownMenu, - Popover, - ButtonGroup, - RangeControl as CoreRangeControl, - __experimentalUnitControl as UnitControl -} from '@wordpress/components'; -import { - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, -} from '@kadence/icons'; -import { settings, link, linkOff } from '@wordpress/icons'; -import { OPTIONS_MAP } from './constants'; -let icons = { - px: pxIcon, - em: emIcon, - rem: remIcon, - vh: vhIcon, - vw: vwIcon, - percent: percentIcon, -}; -function isCustomOption( optionsArray, value ) { - if ( ! value ) { - return false; - } - if ( ! optionsArray ) { - return false; - } - return ( - ! optionsArray.find( ( option ) => option.value === value ) - ); -} -function getOptionIndex( optionsArray, value ) { - if ( ! value ) { - return; - } - if ( ! optionsArray ) { - return; - } - if ( value === '0' || value === 'default' ) { - return 0; - } - const found = optionsArray.findIndex( ( option ) => option.value === value ); - if ( ! found ) { - return; - } - return found; -} -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function SingleMeasureRangeControl( { - label, - onChange, - value = '', - placeholder = '', - className = '', - options = OPTIONS_MAP, - step = 1, - max = 200, - min = 0, - beforeIcon = '', - help = '', - defaultValue = 0, - unit = '', - onUnit, - units = [ 'px', 'em', 'rem' ], - disableCustomSizes = false, - customControl = false, - setCustomControl = null, - isPopover = false, - isSingle = false, - parentLabel = null, - onMouseOver, - onMouseOut, - allowAuto = false, -} ) { - const [ isCustom, setIsCustom ] = useState( false ); - const [ isOpen, setIsOpen ] = useState( false ); - const reviewOptions = JSON.parse(JSON.stringify(options)); - reviewOptions.push( { - value: 'ss-auto', - output: 'var(--global-kb-spacing-auto, auto)', - label: __( 'Auto', 'kadence-blocks' ), - size: 0, - name: __( 'Auto', 'kadence-blocks' ), - } ); - useEffect( () => { - setIsCustom( isCustomOption( reviewOptions, value ) ); - }, [] ); - const realIsCustomControl = setCustomControl ? customControl : isCustom; - const realSetIsCustom = setCustomControl ? setCustomControl : setIsCustom; - function toggle() { - setIsOpen( ! isOpen ); - } - function close() { - setIsOpen( false ); - } - const getNewPresetValue = ( newSize ) => { - if ( undefined === newSize ) { - return ''; - } - const size = parseInt( newSize, 10 ); - if ( size === 0 ) { - return '0'; - } - return `${ options[ newSize ]?.value }`; - }; - const onChangeCustom = ( newSize ) => { - const isNumeric = ! isNaN( parseFloat( newSize ) ); - const nextValue = isNumeric ? parseFloat( newSize ) : undefined; - // if ( onUnit && ! parentLabel ) { - // const newUnit = newSize.replace(/[0-9]/g, ''); - // if ( newUnit !== unit ) { - // onUnit( newUnit ); - // } - // } - onChange( nextValue ); - }; - const marks = options.map( ( newValue, index ) => ( { - value: index, - label: undefined, - } ) ); - const controlUnits = units.map( ( unitItem ) => ( { - value: unitItem, - label: unitItem, - } ) ); - const currentValue = ! realIsCustomControl ? getOptionIndex( reviewOptions, value ) : Number( value ); - const currentPlaceholder = ! realIsCustomControl ? getOptionIndex( reviewOptions, placeholder ) : Number( placeholder ) - const setInitialValue = () => { - if ( value === undefined ) { - onChange( '0' ); - } - }; - const customTooltipContent = ( newValue ) => { - return reviewOptions[ newValue ]?.label; - } - const currentValueLabel = reviewOptions[ currentValue ]?.label ? reviewOptions[ currentValue ]?.label : __( 'Unset', 'kadence-blocks' ); - const currentValueName = reviewOptions[ currentValue ]?.name ? reviewOptions[ currentValue ]?.name + ' ' + reviewOptions[ currentValue ]?.size + 'px' : __( 'Unset', 'kadence-blocks' ); - const addParent = parentLabel ? parentLabel + ' ' : ''; - let rangeLabel = label; - if ( isSingle ) { - rangeLabel = currentValueName; - } else if ( label && addParent ) { - rangeLabel = addParent + label + ' ' + currentValueLabel - } - const customRange = ( - <> - { - if ( undefined === newVal ) { - onChange( defaultValue ); - } else { - onChange( getNewPresetValue( newVal ) ) - } - }} - min={ 0 } - max={ options.length - 1 } - marks={ marks } - step={ 1 } - help={ help } - withInputField={ false } - aria-valuenow={ currentValue } - aria-valuetext={ options[ currentValue ]?.label } - renderTooltipContent={ customTooltipContent } - initialPosition={ defaultValue ? defaultValue : 0 } - allowReset={ isSingle ? true : false } - hideLabelFromVision={ ( isPopover || isSingle ) ? false : true } - onMouseOver={ onMouseOver } - onMouseOut={ onMouseOut } - onMouseDown={ ( event ) => { - // If mouse down is near start of range set initial value to 0, which - // prevents the user have to drag right then left to get 0 setting. - if ( event?.nativeEvent?.offsetX < 35 ) { - setInitialValue(); - } - } } - /> - { ! disableCustomSizes && ( - - { isOpen && ( - - -
- { customRange } - { allowAuto && ( -
- - ) } - - )} - { ! isPopover && ( - <>{ customRange } - ) } - - ) } - { realIsCustomControl && ( -
- onChangeCustom( newVal ) } - onMouseOver={ onMouseOver } - onMouseOut={ onMouseOut } - /> - { ! parentLabel && ( -
- -
- ) } - { ! disableCustomSizes && ( - -
- ) } - - ), - ]; -} diff --git a/src/packages/components/src/measurement-range-control/utils.js b/src/packages/components/src/measurement-range-control/utils.js deleted file mode 100644 index 960659eed..000000000 --- a/src/packages/components/src/measurement-range-control/utils.js +++ /dev/null @@ -1,92 +0,0 @@ -import { __ } from '@wordpress/i18n'; - -import { OPTIONS_MAP } from "./constants"; -export function isCustomOption( optionsArray, value ) { - if ( ! value ) { - return false; - } - if ( ! optionsArray ) { - return false; - } - // If empty lets default to options instead of custom. - if ( undefined !== value[0] && '' === value[0] && undefined !== value[1] && ( '' === value[1] || 'auto' === value[1] ) && undefined !== value[2] && '' === value[2] && undefined !== value[3] && ( '' === value[3] || 'auto' === value[3] ) ) { - return false; - } - if ( undefined !== value[0] && '' !== value[0] ) { - return ( - ! optionsArray.find( ( option ) => option.value === value[0] ) - ); - } - if ( undefined !== value[1] && '' !== value[1] && 'auto' !== value[1] ) { - return ( - ! optionsArray.find( ( option ) => option.value === value[1] ) - ); - } - if ( undefined !== value[2] && '' !== value[2] ) { - return ( - ! optionsArray.find( ( option ) => option.value === value[2] ) - ); - } - if ( undefined !== value[3] && '' !== value[3] && 'auto' !== value[3] ) { - return ( - ! optionsArray.find( ( option ) => option.value === value[3] ) - ); - } - return ( - ! optionsArray.find( ( option ) => option.value === value ) - ); -} -export function getOptionIndex( optionsArray, value ) { - if ( ! value ) { - return; - } - if ( ! optionsArray ) { - return; - } - if ( value === '0' || value === 'default' ) { - return 0; - } - const found = optionsArray.findIndex( ( option ) => option.value === value ); - if ( ! found ) { - return; - } - return found; -} -export function getOptionSize( optionsArray, value, unit ) { - if ( ! value ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( value === '0') { - return 0; - } - if ( unit !== 'px' ) { - return ''; - } - const found = optionsArray.find( ( option ) => option.value === value ); - if ( ! found ) { - return ''; - } - return found.size; -} -export function getOptionFromSize( optionsArray, value, unit ) { - if ( ! value ) { - return ''; - } - if ( ! optionsArray ) { - return ''; - } - if ( value === 0 ) { - return '0'; - } - if ( unit !== 'px' ) { - return ''; - } - const found = optionsArray.find( ( option ) => option.size.toString() === value.toString() ); - if ( ! found ) { - return ''; - } - return found.value; -} \ No newline at end of file diff --git a/src/packages/components/src/measurement/measurement-control/editor.scss b/src/packages/components/src/measurement/measurement-control/editor.scss deleted file mode 100644 index 396fafc7c..000000000 --- a/src/packages/components/src/measurement/measurement-control/editor.scss +++ /dev/null @@ -1,336 +0,0 @@ -/* Measurements */ -.kadence-title-bar { - margin-bottom: 8px; - display: flex; - align-items: center; - .kadence-control-title { - flex-grow: 1; - display: flex; - align-items: center; - } - button.components-button.has-icon.is-reset { - width: 20px; - min-width: 20px; - padding: 0 3px; - margin: 0 5px 0 0; - } - .kadence-control-title button.components-button.is-reset.has-icon { - margin: 0 0 0 5px; - } -} -.kadence-range-control-range .components-range-control__root svg { - margin-top: 2px; -} -.kadence-range-control-inner { - .components-base-control__field { - margin: 0; - display: flex; - } - .components-range-control__wrapper { - height: 32px; - } - .components-input-control__input { - height: 32px; - } -} -.kadence-range-control-inner .components-base-control__field > .components-flex { - width: 100%; -} -.kadence-range-control-inner .components-base-control__field > .components-flex .components-input-control__input { - height: 32px; -} -.kadence-controls-content .measure-input-wrap .input-setting-toggle { - height: 14px; - .components-button.input-setting-toggle-btn { - width:100%; - height:14px; - padding:0; - line-height: 12px; - font-size: 7px !important; - margin: 0; - display: block; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-bottom:0; - border-radius: 0; - border-top-right-radius: 2px; - border-top-left-radius: 2px; - text-transform: uppercase; - background-color: #fff; - } -} -.kb-measure-control .kadence-controls-content { - align-items: flex-end; -} -.components-popover.kadence-range-popover-settings .components-popover__content>div { - padding: 30px 20px; - min-width: 280px; -} -.components-button-group.kb-preset-size-options { - display: flex; - flex-flow: wrap; - margin: -1%; -} -.components-button-group.kb-preset-size-options button.components-button.kb-preset-sizes { - flex-basis:18%; - width:auto; - min-width:auto; - margin:1%; - border-radius:0; - text-align: center; - padding: 0 2px; - justify-content: center; -} -.components-button-group.kb-measure-responsive-options { - .components-button.kb-responsive-btn { - background: transparent; - height: auto; - border: 0; - box-shadow: none; - padding: 2px 4px; - margin-bottom: 0; - outline: 0; - color: #A0AEC0; - width: auto; - font-size: 10px; - &:hover { - color: #718096; - } - &.is-active { - color: var(--wp-admin-theme-color, #00669b); - background: transparent; - } - .dashicon { - width: 15px; - height: 15px; - font-size: 15px; - } - } -} -.kadence-controls-content { - display: flex; - .kadence-range-control { - flex-grow: 1; - margin-right: 2px; - margin-bottom: 0; - .components-base-control__field { - margin-bottom: 0; - display: flex; - } - } - .measure-input-wrap { - margin-right: 2px; - flex-grow: 1; - .components-base-control.measure-inputs { - margin:0; - position: relative; - .components-base-control__field{ - margin-bottom: 0; - } - input[type=number] { - padding: 0 5px; - margin:0; - border: 1px solid var(--kb-border-color, #859CB6 ); - border-top-right-radius: 0; - border-top-left-radius: 0; - -moz-appearance: textfield; - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } - &[disabled] { - background: #e4e7ea; - } - } - } - } - - .measure-label { - display: none; - font-size: 11px; - line-height: 16px; - padding: 3px 0; - text-align: center; - svg { - height: 16px; - width: 16px; - } - } -} -.kb-measure-control { - .measure-input-top .measure-inputs .components-base-control__field:before { - content: ''; - display: block; - border-top:3px solid var(--kb-border-dark-color, #6F8094 ); - width: 100%; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - position: absolute; - left: 0; - top: 0; - } - &.kb-measure-corners-control .measure-input-top .measure-inputs .components-base-control__field:before { - width: 15px; - height: 15px; - border-left: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-top: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-top-right-radius: 0px; - } - .measure-input-right .measure-inputs .components-base-control__field:before { - content: ''; - display: block; - border-right:3px solid var(--kb-border-dark-color, #6F8094 ); - width: 0; - height: 100%; - border-bottom-right-radius: 2px; - border-top-right-radius: 2px; - position: absolute; - right: 0; - top: 0; - } - &.kb-measure-corners-control .measure-input-right .measure-inputs .components-base-control__field:before { - width: 15px; - height: 15px; - border-right: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-top: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-bottom-right-radius: 0px; - } - .measure-input-bottom .measure-inputs .components-base-control__field:before { - content: ''; - display: block; - border-bottom:3px solid var(--kb-border-dark-color, #6F8094 ); - width: 100%; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - position: absolute; - right: 0; - bottom: 0; - } - &.kb-measure-corners-control .measure-input-bottom .measure-inputs .components-base-control__field:before { - width: 15px; - height: 15px; - border-right: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-bottom: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-bottom-left-radius: 0px; - } - .measure-input-left .measure-inputs .components-base-control__field:before { - content: ''; - display: block; - border-left:3px solid var(--kb-border-dark-color, #6F8094 ); - height: 100%; - width:0; - border-bottom-left-radius: 2px; - border-top-left-radius: 2px; - position: absolute; - left: 0; - bottom: 0; - } - &.kb-measure-corners-control .measure-input-left .measure-inputs .components-base-control__field:before { - width: 15px; - height: 15px; - border-left: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-bottom: 3px solid var(--kb-border-dark-color, #6F8094 ); - border-top-left-radius: 0px; - } -} -.kadence-units { - max-width: 60px; - display: flex; - .components-button { - padding-top: 2px; - padding-bottom: 2px; - svg { - width: 16px; - } - } -} -.kadence-units button.components-button.is-active.is-single.is-small { - min-width: 20px; - height: 30px; - border: 1px solid #e2e4e7; - background-color: #fff; - display: flex; - margin-right: 2px; -} -.kadence-units .kadence-units-group .components-button { - min-width: 20px; - height: 32px; - border: 1px solid #e2e4e7; - background-color: #fff; - display: flex; - margin-right: 2px; -} -.kadence-units .components-dropdown.components-dropdown-menu.components-toolbar { - background-color: transparent; - display: flex; - height: 30px; - min-height: 30px; - border: 1px solid #e2e4e7; - .components-button { - height: 30px; - min-width: 10px; - padding-top: 2px; - padding-left: 4px; - padding-right: 4px; - padding-bottom: 2px; - margin-left: 2px; - &:before { - display: none; - } - } -} -.kadence-locked .components-button.is-single { - border: 1px solid #e2e4e7; - background-color: #fff; - display: flex; - height: 30px; -} -.components-dropdown__content.kadence-units-popover .components-popover__content { - min-width: 48px; - width: 48px; - .components-button.components-dropdown-menu__menu-item { - min-width: 30px; - } - >div { - padding:5px - } -} -.kadence-range-control-inner .components-range-control__reset { - display: none; -} -.kb-measure-control .kadence-measure-control-select-wrapper { - align-self: normal; -} -.kadence-measure-control-select-wrapper .kadence-measure-control-select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - border-radius: 0px 2px 2px 0px; - display: block; - outline: none; - margin: 0px; - min-height: auto; - font-family: inherit; - box-sizing: border-box; - padding: 2px 1px; - width: 20px; - color: rgb(47, 47, 47); - font-size: 10px; - line-height: 1; - letter-spacing: -0.5px; - text-transform: uppercase; - -moz-text-align-last: center; - text-align-last: center; - height: 100%; - border: 1px solid var(--kb-border-color, #859CB6 ); - transition: box-shadow 0.1s linear 0s, border 0.1s linear 0s; - cursor: pointer; - &:hover { - background-color: #f0f0f0; - } - - &:disabled { - background-image: none; - } -} \ No newline at end of file diff --git a/src/packages/components/src/measurement/measurement-control/index.js b/src/packages/components/src/measurement/measurement-control/index.js deleted file mode 100644 index 4b753f384..000000000 --- a/src/packages/components/src/measurement/measurement-control/index.js +++ /dev/null @@ -1,230 +0,0 @@ -/** - * Measure Component - * - */ - -/** - * Import Css - */ -import './editor.scss'; - -/** - * Import External - */ -import { isEqual } from 'lodash'; -import MeasurementSingleControl from '../single-input-control'; -import RangeControl from '../../range/range-control'; -import { undo } from '@wordpress/icons'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { useState, Fragment } from '@wordpress/element'; -import { - Button, - DropdownMenu, - ButtonGroup, - Tooltip, -} from '@wordpress/components'; - -import { - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, - individualIcon, - linkedIcon, - topLeftIcon, - topRightIcon, - bottomRightIcon, - bottomLeftIcon, - radiusLinkedIcon, - radiusIndividualIcon -} from '@kadence/icons'; - -import { settings, link, linkOff } from '@wordpress/icons'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function MeasurementControls( { - label, - measurement, - control = 'individual', - onChange, - onControl = false, - step = 1, - max = 100, - min = 0, - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = link, - unlinkIcon = linkOff, - isBorderRadius = false, - unit = '', - onUnit, - showUnit = false, - units = [ 'px', 'em', 'rem' ], - allowEmpty = false, - key, - className = '', - reset, - preset = '', -} ) { - const measureIcons = { - first: isBorderRadius ? topLeftIcon : firstIcon, - second: isBorderRadius ? topRightIcon : secondIcon, - third: isBorderRadius ? bottomRightIcon : thirdIcon, - fourth: isBorderRadius ? bottomLeftIcon : fourthIcon, - link: isBorderRadius ? radiusLinkedIcon : linkIcon, - unlink: isBorderRadius ? radiusIndividualIcon : unlinkIcon, - } - const liveValue = ( measurement ? measurement : [ '', '', '', '' ] ); - const zero = ( allowEmpty ? '' : 0 ); - const [ localControl, setLocalControl ] = useState( control ); - const realControl = onControl ? control : localControl; - const realSetOnControl = onControl ? onControl : setLocalControl; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - onChange( [ '', '', '', '' ] ); - } - } - return ( - <> - { onChange && ( -
- { label && ( -
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - { realSetOnControl && ( -
- ) } -
- { realControl !== 'individual' && ( - onChange( [ value, value, value, value ] ) } - min={ min } - max={ max } - step={ step } - /> - ) } - { realControl === 'individual' && ( - - onChange( [ ( value ? Number( value ) : value ), ( measurement && undefined !== measurement[ 1 ] && '' !== measurement[ 1 ] ? measurement[ 1 ] : zero ), ( measurement && undefined !== measurement[ 2 ] && '' !== measurement[ 2 ] ? measurement[ 2 ] : zero ), ( measurement && undefined !== measurement[ 3 ] && '' !== measurement[ 3 ] ? measurement[ 3 ] : zero ) ] ) } - min={ min } - max={ max } - step={ step } - icon={ measureIcons.first } - unit={ unit } - allowEmpty={ allowEmpty } - preset={ preset } - /> - onChange( [ ( measurement && undefined !== measurement[ 0 ] && '' !== measurement[ 0 ] ? measurement[ 0 ] : zero ), ( value ? Number( value ) : value ), ( measurement && undefined !== measurement[ 2 ] && '' !== measurement[ 2 ] ? measurement[ 2 ] : zero ), ( measurement && undefined !== measurement[ 3 ] && '' !== measurement[ 3 ] ? measurement[ 3 ] : zero ) ] ) } - min={ min } - max={ max } - step={ step } - icon={ measureIcons.second } - unit={ unit } - allowEmpty={ allowEmpty } - preset={ preset } - /> - onChange( [ ( measurement && undefined !== measurement[ 0 ] && '' !== measurement[ 0 ] ? measurement[ 0 ] : zero ), ( measurement && undefined !== measurement[ 1 ] && '' !== measurement[ 1 ] ? measurement[ 1 ] : zero ), ( value ? Number( value ) : value ), ( measurement && undefined !== measurement[ 3 ] && '' !== measurement[ 3 ] ? measurement[ 3 ] : zero ) ] ) } - min={ min } - max={ max } - step={ step } - icon={ measureIcons.third } - unit={ unit } - allowEmpty={ allowEmpty } - preset={ preset } - /> - onChange( [ ( measurement && undefined !== measurement[ 0 ] && '' !== measurement[ 0 ] ? measurement[ 0 ] : zero ), ( measurement && undefined !== measurement[ 1 ] && '' !== measurement[ 1 ] ? measurement[ 1 ] : zero ), ( measurement && undefined !== measurement[ 2 ] && '' !== measurement[ 2 ] ? measurement[ 2 ] : zero ), ( value ? Number( value ) : value ) ] ) } - min={ min } - max={ max } - step={ step } - icon={ measureIcons.fourth } - unit={ unit } - allowEmpty={ allowEmpty } - preset={ preset } - /> - - ) } - { ( onUnit || showUnit ) && ( -
- -
- ) } -
-
- ) } - - ); -} diff --git a/src/packages/components/src/measurement/responsive-measurement-control/index.js b/src/packages/components/src/measurement/responsive-measurement-control/index.js deleted file mode 100644 index 0989a64f7..000000000 --- a/src/packages/components/src/measurement/responsive-measurement-control/index.js +++ /dev/null @@ -1,247 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useRef } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map, isEqual } from 'lodash'; -import MeasurementControls from '../measurement-control'; -import { capitalizeFirstLetter } from '@kadence/helpers'; -import { undo } from '@wordpress/icons'; -import { - Dashicon, - Button, - ButtonGroup, -} from '@wordpress/components'; -import { - outlineTopIcon, - outlineRightIcon, - outlineBottomIcon, - outlineLeftIcon, - individualIcon, - linkedIcon, -} from '@kadence/icons'; -import { settings, link, linkOff } from '@wordpress/icons'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveMeasurementControls( { - label, - subLabel, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - onChangeControl = false, - control = 'individual', - step = 1, - max = 100, - min = 0, - unit = '', - onUnit, - showUnit = false, - units = [ 'px', 'em', 'rem' ], - allowEmpty = true, - preset = '', - isBorderRadius = false, - firstIcon = outlineTopIcon, - secondIcon = outlineRightIcon, - thirdIcon = outlineBottomIcon, - fourthIcon = outlineLeftIcon, - linkIcon = link, - unlinkIcon = linkOff, - reset = true, - } ) { - const ref = useRef(); - const [ localControl, setLocalControl ] = useState( control ); - const realControl = onChangeControl ? control : localControl; - const realSetOnControl = onChangeControl ? onChangeControl : setLocalControl; - const zero = ( allowEmpty ? true : false ); - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - let liveValue = ( value ? value : [ '', '', '', '' ] ); - if ( deviceType === 'Tablet' ) { - liveValue = ( tabletValue ? tabletValue : [ '', '', '', '' ] ); - } else if ( deviceType === 'Mobile' ) { - liveValue = ( mobileValue ? mobileValue : [ '', '', '', '' ] ); - } - const onReset = () => { - if ( deviceType === 'Tablet' ) { - onChangeTablet( [ '', '', '', '' ] ); - } else if ( deviceType === 'Mobile' ) { - onChangeMobile( [ '', '', '', '' ] ); - } else { - onChange( [ '', '', '', '' ] ); - } - } - const output = {}; - output.Mobile = ( - onChangeMobile( size ) } - onControl={ ( sizeControl ) => realSetOnControl( sizeControl ) } - min={ min } - max={ max } - step={ step } - allowEmpty={ zero } - unit={ unit } - showUnit={ true } - units={ [ unit ] } - preset={ preset } - isBorderRadius={ isBorderRadius } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - /> - ); - output.Tablet = ( - onChangeTablet( size ) } - onControl={ ( sizeControl ) => realSetOnControl( sizeControl ) } - min={ min } - max={ max } - step={ step } - allowEmpty={ zero } - unit={ unit } - showUnit={ true } - units={ [ unit ] } - preset={ preset } - isBorderRadius={ isBorderRadius } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - /> - ); - output.Desktop = ( - onChange( size ) } - onControl={ ( sizeControl ) => realSetOnControl( sizeControl ) } - min={ min } - max={ max } - step={ step } - allowEmpty={ zero } - unit={ unit } - onUnit={ ( onUnit ? onUnit : undefined ) } - showUnit={ showUnit } - units={ units } - preset={ preset } - isBorderRadius={ isBorderRadius } - firstIcon={ firstIcon } - secondIcon={ secondIcon } - thirdIcon={ thirdIcon } - fourthIcon={ fourthIcon } - linkIcon={ linkIcon } - unlinkIcon={ unlinkIcon } - /> - ); - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - - { realSetOnControl && ( -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ), - ]; -} diff --git a/src/packages/components/src/measurement/single-input-control/index.js b/src/packages/components/src/measurement/single-input-control/index.js deleted file mode 100644 index 69010fad8..000000000 --- a/src/packages/components/src/measurement/single-input-control/index.js +++ /dev/null @@ -1,122 +0,0 @@ -/** - * Measure Single Component - * - */ - -/** - * Import External - */ -import { map } from 'lodash'; -import RangeControl from '../../range/range-control'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { - Button, - Popover, - TextControl, - ButtonGroup, -} from '@wordpress/components'; - -function useObservableState( initialState ) { - const [ state, setState ] = useState( initialState ); - return [ - state, - ( value ) => { - setState( value ); - }, - ]; -} -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function MeasurementSingleControl( { - label, - placement = 'top', - measurement, - onChange, - step = 1, - max = 100, - min = 0, - icon, - unit = '', - allowEmpty = false, - className = '', - preset = '', - } ) { - const zero = ( allowEmpty ? '' : 0 ); - const [ isOpen, setIsOpen ] = useObservableState( false ); - - function toggle() { - setIsOpen( ! isOpen ); - } - function close() { - setIsOpen( false ); - } - const presetSizes = { - px: [ 0, 10, 20, 40, 60, 80, 100, 140, 160, 200 ], - em: [ 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 ], - rem: [ 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 ], - '%': [ 0, 2, 5, 8, 10, 20, 30, 40, 50, 60 ], - vh: [ 0, 2, 5, 8, 10, 20, 30, 40, 50, 60 ], - vw: [ 0, 2, 5, 8, 10, 20, 30, 40, 50, 60 ], - }; - return ( -
-
- - { isOpen && ( - - onChange( ( value ? parseFloat( value ) : value ) ) } - min={ min } - max={ max } - step={ step } - /> - { unit !== '' || ( preset && Array.isArray( preset ) && preset.length > 1 ) && ( - - { map( ( preset && Array.isArray( preset ) && preset.length > 1 ? preset : presetSizes[ unit ] ), ( size ) => ( - - ) ) } - - ) } - - ) } -
- onChange( ( value ? Number( value ) : value ) ) } - min={ min } - max={ max } - step={ step } - /> - { icon } -
- ); -} diff --git a/src/packages/components/src/obfuscate-text-control/editor.scss b/src/packages/components/src/obfuscate-text-control/editor.scss deleted file mode 100644 index 438907f76..000000000 --- a/src/packages/components/src/obfuscate-text-control/editor.scss +++ /dev/null @@ -1,20 +0,0 @@ -.kadence-obfuscate-text-control-inner { - display: flex; - gap:8px -} -.kadence-obfuscate-text-control-inner .components-base-control, .kadence-obfuscate-text-control-inner .components-base-control .components-base-control__field { - margin-bottom:0; -} -.kadence-obfuscate-text-control .components-background-obfuscate-text-control__label { - margin-bottom: 8px; - display: block; -} -.kadence-obfuscate-text-control-inner .kb-obfuscate-save { - min-width:90px; - justify-content: center; - min-height: 30px; - &.components-button svg { - margin-top: 0; - margin-right: 0; - } -} \ No newline at end of file diff --git a/src/packages/components/src/obfuscate-text-control/index.js b/src/packages/components/src/obfuscate-text-control/index.js deleted file mode 100644 index 64f5261c1..000000000 --- a/src/packages/components/src/obfuscate-text-control/index.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * Range Control - * - */ - -/** - * Internal block libraries - */ -import { - Spinner, - TextControl, - Button, -} from '@wordpress/components'; -import { useInstanceId } from '@wordpress/compose'; -import { useEffect, useState, Fragment } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import './editor.scss'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ObfuscateTextControl( { - label, - onChange, - isSaving, - value = '', - placeholder = null, - className = '', - obfuscate = true, - help = '', -} ) { - const [ tempValue, setTempValue ] = useState( '' ); - const instanceId = useInstanceId( ObfuscateTextControl ); - const id = `inspector-obfuscate-text-control-${instanceId}`; - return [ - onChange && ( -
- {label && ( - - )} -
- {!value && ( - <> - setTempValue( value )} - /> - - - )} - {value && obfuscate && ( - <> - - - - )} - {value && !obfuscate && ( - <> - - - - )} -
-
- ), - ]; -} \ No newline at end of file diff --git a/src/packages/components/src/opacity-control/index.js b/src/packages/components/src/opacity-control/index.js deleted file mode 100644 index 90182497b..000000000 --- a/src/packages/components/src/opacity-control/index.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * Measure Component - * - */ - -/** - * Internal block libraries - */ -import { Component } from '@wordpress/element'; -import { - Button, - Popover, - RangeControl, - Tooltip, -} from '@wordpress/components'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -class OpacityControl extends Component { - constructor( label, value, onChanged ) { - super( ...arguments ); - this.state = { - isVisible: false, - }; - } - - render() { - const toggleVisible = () => { - this.setState( { isVisible: true } ); - }; - const toggleClose = () => { - this.setState( { isVisible: false } ); - }; - - // @todo: Replace with icon from @kadence/icons once created - let icons = {}; - icons.opacity = - - - - - - - - - - - - ; - - return ( -
- { this.state.isVisible && ( - - - - ) } - - { ! this.state.isVisible && ( - - ) } - { this.state.isVisible && ( - - ) } - -
- ); - } -} -export default ( OpacityControl ); diff --git a/src/packages/components/src/panel-body/index.js b/src/packages/components/src/panel-body/index.js deleted file mode 100644 index f51f01abc..000000000 --- a/src/packages/components/src/panel-body/index.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * WordPress dependencies - */ -import { PanelBody } from '@wordpress/components' -import { compose } from '@wordpress/compose' -import { withSelect, withDispatch } from '@wordpress/data' -import { showSettings } from '@kadence/helpers'; -import { get } from 'lodash'; - -function KadencePanelBody ({ - children, - title, - initialOpen = true, - isOpened, - toggleOpened, - className = '', - icon = '', - buttonProps = {}, - blockSlug = false, - index = false, - panelName - }) { - - /* If the block slug is set, check the panel name against the allowed settings for the user */ - if( blockSlug !== false && !showSettings( panelName, blockSlug ) ) { - return null; - } - - return ( - - { children } - - ) -} - -export default compose([ - withSelect( (select, ownProps ) => { - const initialOpen = ( undefined !== ownProps.initialOpen ? ownProps.initialOpen : true ); - const index = get(ownProps, ['index'], ''); - - return { - isOpened: select( 'kadenceblocks/data' ).isEditorPanelOpened( ownProps.panelName + index + select('core/block-editor').getSelectedBlockClientId(), initialOpen ), - } - }), - withDispatch((dispatch, ownProps, { select }) => { - const { getSelectedBlockClientId } = select('core/block-editor') - const initialOpen = ( undefined !== ownProps.initialOpen ? ownProps.initialOpen : true ); - const index = get(ownProps, ['index'], ''); - - return { - toggleOpened: () => { - dispatch('kadenceblocks/data').toggleEditorPanelOpened( ownProps.panelName + index + getSelectedBlockClientId(), initialOpen ) - }, - } - }) -])(KadencePanelBody) - - diff --git a/src/packages/components/src/panels/color-group.js b/src/packages/components/src/panels/color-group.js deleted file mode 100644 index 72618b36c..000000000 --- a/src/packages/components/src/panels/color-group.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Import Css - */ - import './editor.scss'; - -export default function ColorGroup({ - children, - }) { - return ( -
- { children } -
- ) -} - - diff --git a/src/packages/components/src/panels/editor.scss b/src/packages/components/src/panels/editor.scss deleted file mode 100644 index a670d182d..000000000 --- a/src/packages/components/src/panels/editor.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Colors -.kadence-color-group .components-base-control.kadence-pop-color-control { - margin-bottom:0; - border:1px solid var(--kb-border-color, #859CB6 ); - border-bottom:0; - padding:4px 8px; -} -.kadence-color-group .components-base-control.kadence-pop-color-control:last-child { - border-bottom:1px solid var(--kb-border-color, #859CB6 ); -} -.kadence-color-group .kadence-pop-color-control .kadence-pop-color-icon-indicate .kadence-pop-color-indicate { - width: 24px; - height: 24px; -} -.kadence-color-group .kadence-pop-color-control .kadence-pop-color-clear span.dashicon { - width: 14px; - font-size: 14px; - height: 14px; -} -.kadence-color-group .kadence-pop-color-control .color-indicator-icon .dashicons-admin-site { - left: 4px; - top: 4px; -} -.components-base-control.kadence-two-column-group { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} -.components-base-control.kadence-two-column-group > .components-base-control { - margin-bottom:0 -} \ No newline at end of file diff --git a/src/packages/components/src/panels/two-column.js b/src/packages/components/src/panels/two-column.js deleted file mode 100644 index c2e3283a4..000000000 --- a/src/packages/components/src/panels/two-column.js +++ /dev/null @@ -1,12 +0,0 @@ - -export default function TwoColumn({ - children, - }) { - return ( -
- { children } -
- ) -} - - diff --git a/src/packages/components/src/pop-color-control/editor.scss b/src/packages/components/src/pop-color-control/editor.scss deleted file mode 100644 index ee320286d..000000000 --- a/src/packages/components/src/pop-color-control/editor.scss +++ /dev/null @@ -1,165 +0,0 @@ -/** - * #.# Editor Styles - * - * CSS for just Backend enqueued after style.scss - * which makes it higher in priority. - */ - .kadence-pop-color-control { - .kadence-pop-color-container { - display: flex; - align-items: center; - } - .kadence-beside-label { - flex-grow: 1; - font-weight: 400; - } - .kadence-pop-color-clear { - background: transparent; - padding: 4px; - height: auto; - box-shadow: none; - border: 1px solid transparent; - margin-right: 4px; - line-height: 1; - span.dashicon { - font-size: 16px; - width: 16px; - height: 16px; - } - } - .kadence-pop-color-popovers { - display: flex; - align-items: center; - } - .single-pop-color { - margin-left: 8px; - display: flex; - } - .single-pop-color:first-child { - margin-left: 0; - } - .kadence-pop-color-icon-indicate { - height: auto; - position: relative; - transform: scale(1); - transition: transform .1s ease; - border-radius: 50%; - padding: 0; - &.kadence-has-alpha { - background-image: linear-gradient( - 45deg, #ddd 25%, transparent 0),linear-gradient( - -45deg, #ddd 25%, transparent 0),linear-gradient( - 45deg, transparent 75%, #ddd 0),linear-gradient( - -45deg, transparent 75%, #ddd 0); - background-size: 10px 10px; - background-position: 0 0,0 5px,5px -5px,-5px 0; - } - .kadence-pop-color-indicate { - width: 28px; - height: 28px; - border-radius: 50%; - margin: 0; - } - } -} -.components-popover.kadence-pop-color-popover { - .components-popover__content { - padding: 10px 10px 0; - } - .kadence-pop-color-palette-swatches { - padding: 2px 0 10px; - display: flex; - justify-content: flex-start; - flex-wrap: wrap; - min-width: 290px; - .kadence-color-palette__item-wrapper { - margin-right: 2px; - margin-left: 2px; - margin-bottom: 4px; - transform: scale(1); - display: inline-block; - height: 28px; - width: 28px; - transition: transform .1s ease; - background-image: linear-gradient( - 45deg, #ddd 25%, transparent 0), linear-gradient( - -45deg, #ddd 25%, transparent 0), linear-gradient( - 45deg, transparent 75%, #ddd 0), linear-gradient( - -45deg, transparent 75%, #ddd 0); - background-size: 10px 10px; - background-position: 0 0, 0 5px, 5px -5px, -5px 0; - border-radius: 50%; - &:hover { - transform: scale(1.1); - } - .kadence-color-palette__item { - display: inline-block; - vertical-align: top; - height: 100%; - width: 100%; - border: none; - border-radius: 50%; - background: transparent; - box-shadow: inset 0 0 0 14px; - transition: box-shadow .1s ease; - cursor: pointer; - &.is-active { - box-shadow: inset 0 0 0 4px; - position: relative; - z-index: 1; - } - &.is-active + .dashicons-admin-site { - position: absolute; - left: 6px; - top: 6px; - width: 18px; - font-size: 18px; - height: 18px; - z-index: 1; - } - &.is-active + .dashicons-saved { - position: absolute; - left: 5px; - top: 5px; - width: 18px; - font-size: 18px; - height: 18px; - z-index: 1; - } - &:after { - content: ""; - position: absolute; - top: -1px; - left: -1px; - bottom: -1px; - right: -1px; - border-radius: 50%; - box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); - border: 1px solid transparent; - } - } - } - } -} -span.color-indicator-icon { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - .dashicons-admin-site { - position: absolute; - left: 6px; - top: 6px; - color: #444; - background: #fff; - width: 16px; - font-size: 14px; - height: 16px; - border: 1px solid #fff; - border-radius: 100%; - box-sizing: border-box; - padding-left: 1px; - padding-top: 1px; - } -} diff --git a/src/packages/components/src/pop-color-control/index.js b/src/packages/components/src/pop-color-control/index.js deleted file mode 100644 index 9aed34c89..000000000 --- a/src/packages/components/src/pop-color-control/index.js +++ /dev/null @@ -1,138 +0,0 @@ -/** - * Advanced Color Control. - * - */ - -/** - * Import Icons - */ -import SinglePopColorControl from '../single-pop-color-control'; - -/** - * Import Css - */ -import './editor.scss'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { Button, Dashicon } from '@wordpress/components'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default class extends Component { - constructor() { - super( ...arguments ); - this.state = { - reload: false, - } - } - render() { - let showClear = false; - // Adds backward compatablity. - const defaultColor = ( this.props.colorDefault ? this.props.colorDefault : this.props.default ); - const defaultColor2 = ( this.props.colorDefault2 ? this.props.colorDefault2 : this.props.default2 ); - const defaultColor3 = ( this.props.colorDefault3 ? this.props.colorDefault3 : this.props.default3 ); - const valueColor = ( this.props.colorValue ? this.props.colorValue : this.props.value ); - const valueColor2 = ( this.props.colorValue2 ? this.props.colorValue2 : this.props.value2 ); - const valueColor3 = ( this.props.colorValue3 ? this.props.colorValue3 : this.props.value3 ); - const onChange = ( this.props.onColorChange ? this.props.onColorChange : this.props.onChange ); - const onChange2 = ( this.props.onColorChange2 ? this.props.onColorChange2 : this.props.onChange2 ); - const onChange3 = ( this.props.onColorChange3 ? this.props.onColorChange3 : this.props.onChange3 ); - if ( valueColor && valueColor !== defaultColor ) { - showClear = true; - } - if ( valueColor2 && valueColor2 !== defaultColor2 ) { - showClear = true; - } - if ( valueColor3 && valueColor3 !== defaultColor3 ) { - showClear = true; - } - return ( -
-
- { this.props.label && ( - - ) } - { showClear && ! this.props.hideClear && ( - - ) } -
- onChange( value ) } - onOpacityChange={ this.props.onOpacityChange ? value => this.props.onOpacityChange( value ) : undefined } - onArrayChange={ this.props.onArrayChange ? ( value, opacity ) => this.props.onArrayChange( value, opacity ) : undefined } - onClassChange={ this.props.onClassChange ? value => this.props.onClassChange( value ) : undefined } - value={ valueColor } - opacityValue={ this.props.opacityValue ? this.props.opacityValue : undefined } - opacityUnit={ this.props.opacityUnit ? this.props.opacityUnit : undefined } - defaultValue={ defaultColor ? defaultColor : '' } - reload={ this.state.reload } - reloaded={ value => this.setState( { reload: false } ) } - /> - { onChange2 && ( - onChange2( value ) } - onOpacityChange={ this.props.onOpacityChange2 ? value => this.props.onOpacityChange2( value ) : undefined } - onArrayChange={ this.props.onArrayChange2 ? ( value, opacity ) => this.props.onArrayChange2( value, opacity ) : undefined } - onClassChange={ this.props.onClassChange2 ? value => this.props.onClassChange2( value ) : undefined } - value={ valueColor2 } - opacityValue={ this.props.opacityValue2 ? this.props.opacityValue2 : undefined } - opacityUnit={ this.props.opacityUnit2 ? this.props.opacityUnit2 : undefined } - defaultValue={ defaultColor2 ? defaultColor2 : '' } - reload={ this.state.reload } - reloaded={ value => this.setState( { reload: false } ) } - /> - ) } - { onChange3 && ( - onChange3( value ) } - onOpacityChange={ this.props.onOpacityChange3 ? value => this.props.onOpacityChange3( value ) : undefined } - onArrayChange={ this.props.onArrayChange3 ? ( value, opacity ) => this.props.onArrayChange3( value, opacity ) : undefined } - onClassChange={ this.props.onClassChange3 ? value => this.props.onClassChange3( value ) : undefined } - value={ valueColor3 } - opacityValue={ this.props.opacityValue3 ? this.props.opacityValue3 : undefined } - opacityUnit={ this.props.opacityUnit3 ? this.props.opacityUnit3 : undefined } - defaultValue={ defaultColor3 ? defaultColor3 : '' } - reload={ this.state.reload } - reloaded={ value => this.setState( { reload: false } ) } - /> - ) } -
-
-
- ); - } -} diff --git a/src/packages/components/src/post-select-terms-control/index.js b/src/packages/components/src/post-select-terms-control/index.js deleted file mode 100644 index a18fbd769..000000000 --- a/src/packages/components/src/post-select-terms-control/index.js +++ /dev/null @@ -1,94 +0,0 @@ -/* global wp */ -/** - * External dependencies - */ -import Select from 'react-select'; -import { __ } from '@wordpress/i18n'; -import { useState, useRef, useEffect } from '@wordpress/element'; -import { Spinner } from '@wordpress/components'; -import { addQueryArgs } from '@wordpress/url'; -import apiFetch from '@wordpress/api-fetch'; - -export default function KadencePostSelectTerms( { - value, - onChange, - source, - isMulti = false, - } ) { - const [ isLoading, setIsLoading ] = useState( true ); - const [ terms, setTerms ] = useState( [] ); - const [ page, setPage ] = useState( 1 ); - const [ hasMore, setHasMore ] = useState( false ); - const theValue = value; - useEffect( () => { - if( source && typeof(window.kadence_blocks_params.taxonomies[source]) != 'undefined' && window.kadence_blocks_params.taxonomies[source] ){ - setTerms( Array.from(window.kadence_blocks_params.taxonomies[source]) ); - setIsLoading( false ); - } else { - const options = { - source: source, - page: page, - per_page: 50, - }; - setIsLoading( true ); - apiFetch( { - path: addQueryArgs( - window.kadence_blocks_params.termEndpoint, - options - ), - } ) - .then( ( taxonomyItems ) => { - if ( ! taxonomyItems ) { - setTerms( [] ); - window.kadence_blocks_params.taxonomies[source] = []; - } else { - setTerms( taxonomyItems ); - window.kadence_blocks_params.taxonomies[source] = taxonomyItems; - } - setIsLoading( false ); - } ) - .catch( () => { - setIsLoading( false ); - setTerms( [] ); - window.kadence_blocks_params.taxonomies[source] = []; - } ); - } - }, [ source ] ); - if ( isLoading ) { - return ( - - ); - } - const customStyles = { - menuPortal: (provided) => ({ - ...provided, - zIndex: 99999999, - }) - } - return ( -
- { - if ( onUnit ) { - onUnit( event.target.value ); - } - } } - value={ unit } - disabled={ units.length === 1 } - > - { units.map( ( option, index ) => ( - - ) ) } - -
- ) } - { ! disableCustomSizes && ( - - - )} - {label && {label}} - -
-
- onChange(newVal)} - min={min} - max={max} - step={step} - help={help} - allowReset={true} - /> -
- {(onUnit || showUnit) && ( -
- -
- )} -
- - ), - ]; -} diff --git a/src/packages/components/src/range/responsive-radio-range-control/editor.scss b/src/packages/components/src/range/responsive-radio-range-control/editor.scss deleted file mode 100644 index 815c73b7d..000000000 --- a/src/packages/components/src/range/responsive-radio-range-control/editor.scss +++ /dev/null @@ -1,54 +0,0 @@ -.kadence-radio-range-control .kadence-radio-container-control.components-button-group .components-button { - flex: 0 1 1; -} -.kadence-radio-range-control .kadence-radio-container-control { - flex-grow: 1; -} -.kadence-radio-range-control .kadence-radio-container-control.components-button-group .components-button.has-icon.only-icon svg { - margin: 0; - width: 1em; - height: 1em; - font-size: 18px; -} -.kadence-radio-range-control .kadence-radio-container-control.components-button-group .components-button { - height: 32px; -} -.kadence-range-control-range .components-range-control__number .components-input-control__backdrop { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border: 1px solid var(--kb-border-color, #859CB6 ); -} -.kadence-range-control-range .components-range-control__root > span:nth-child(3) { - margin: 0; -} -.kadence-range-control .kadence-measure-control-select-wrapper .kadence-measure-control-select { - border-left: 0; -} -.kadence-radio-range-control .kadence-units.kadence-measure-control-select-wrapper { - display: block; - min-width: 24px; -} -.kadence-radio-range-control .kadence-units.kadence-measure-control-select-wrapper select { - min-width: 24px; -} -.kadence-controls-content.kadence-single-unit-control > .components-base-control .components-flex { - gap:0; -} -.kadence-controls-content.kadence-single-unit-control > .components-base-control .components-flex .components-input-control__label { - width: 100%; - height: 16px; - padding: 0; - line-height: 15px; - font-size: 7px !important; - margin: 0; - font-weight: 500; - display: block; - border: 0; - border-bottom: 1px solid var(--kb-border-color, #859CB6); - border-radius: 0; - text-align: center; - text-transform: uppercase; -} -.kadence-controls-content.kadence-single-unit-control > .components-base-control .components-flex .components-flex-item { - max-width: 100%; -} \ No newline at end of file diff --git a/src/packages/components/src/range/responsive-radio-range-control/index.js b/src/packages/components/src/range/responsive-radio-range-control/index.js deleted file mode 100644 index 12acdb5c5..000000000 --- a/src/packages/components/src/range/responsive-radio-range-control/index.js +++ /dev/null @@ -1,167 +0,0 @@ -/** - * Responsive Range Component - * - */ -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map, isEqual } from 'lodash'; -import { undo } from '@wordpress/icons'; -import { capitalizeFirstLetter } from '@kadence/helpers' -import RadioRangeControl from '../radio-range-control'; -import { settings } from '@wordpress/icons'; -import './editor.scss'; -import { - Dashicon, - Button, - ButtonGroup, -} from '@wordpress/components'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveRadioRangeControls( { - label, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - options = [], - step = 1, - max = 100, - min = 0, - unit = '', - onUnit, - defaultValue = 'default', - defaultTablet = '', - defaultMobile = '', - showUnit = false, - units = [ 'px', 'em', 'rem' ], - allowEmpty = true, - className = '', - disableCustomSizes = false, - reset, -} ) { - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - key: 'desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - key: 'tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const output = {}; - output.Mobile = ( - onChangeMobile( value, size ) } - options={ options } - defaultValue={ defaultMobile } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ onUnit } - showUnit={ showUnit } - units={ units } - disableCustomSizes={ disableCustomSizes } - /> - ); - output.Tablet = ( - onChangeTablet( value, size ) } - options={ options } - defaultValue ={ defaultTablet } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ onUnit } - showUnit={ showUnit } - units={ units } - disableCustomSizes={ disableCustomSizes } - /> - ); - output.Desktop = ( - onChange( value, size ) } - options={ options } - defaultValue={ defaultValue } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ onUnit } - showUnit={ showUnit } - units={ units } - disableCustomSizes={ disableCustomSizes } - /> - ); - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { reset && ( - - ) } - { label && ( - { label } - ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - -
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
- ), - ]; -} diff --git a/src/packages/components/src/range/responsive-range-control/index.js b/src/packages/components/src/range/responsive-range-control/index.js deleted file mode 100644 index ba86f8a80..000000000 --- a/src/packages/components/src/range/responsive-range-control/index.js +++ /dev/null @@ -1,158 +0,0 @@ -/** - * Responsive Range Component - * - */ -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map, isEqual } from 'lodash'; -import { undo } from '@wordpress/icons'; -import { capitalizeFirstLetter } from '@kadence/helpers' -import RangeControl from '../range-control'; - -import { - Dashicon, - Button, - ButtonGroup, -} from '@wordpress/components'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveRangeControls( { - label, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - step = 1, - max = 100, - min = 0, - unit = '', - onUnit, - allowResponsiveUnitChange = false, - showUnit = false, - units = [ 'px', 'em', 'rem' ], - allowEmpty = true, - className = '', - reset, -} ) { - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - key: 'desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - key: 'tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const output = {}; - output.Mobile = ( - onChangeMobile( size ) } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ onUnit } - showUnit={ showUnit } - units={ units } - lockUnits={ allowResponsiveUnitChange ? false : true } - /> - ); - output.Tablet = ( - onChangeTablet( size ) } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ onUnit } - showUnit={ showUnit } - units={ units } - lockUnits={ allowResponsiveUnitChange ? false : true } - /> - ); - output.Desktop = ( - onChange( size ) } - min={ min } - max={ max } - step={ step } - unit={ unit } - onUnit={ onUnit } - showUnit={ showUnit } - units={ units } - /> - ); - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( - - { label } - { reset && ( - - ) } - - ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - -
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
- ), - ]; -} diff --git a/src/packages/components/src/range/single-range-control/index.js b/src/packages/components/src/range/single-range-control/index.js deleted file mode 100644 index ab5f0c480..000000000 --- a/src/packages/components/src/range/single-range-control/index.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import RangeControl from '../range-control'; -import { - Button, - DropdownMenu, -} from '@wordpress/components'; - -import { - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, -} from '@kadence/icons'; - -let icons = { - px: pxIcon, - em: emIcon, - rem: remIcon, - vh: vhIcon, - vw: vwIcon, - percent: percentIcon, -}; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveSingleRangeControl( { - device = 'device', - onChange, - value, - step = 1, - max = 100, - min = 0, - unit = '', - onUnit, - showUnit = false, - units = [ 'px', 'em', 'rem' ], - lockUnits = false, - className = '', - } ) { - /** - * Build Toolbar Items. - * - * @param {string} mappedUnit the unit. - * @returns {array} the unit array. - */ - const createLevelControlToolbar = ( mappedUnit ) => { - return [ { - icon: ( mappedUnit === '%' ? icons.percent : icons[ mappedUnit ] ), - isActive: unit === mappedUnit, - onClick: () => { - onUnit( mappedUnit ); - }, - } ]; - }; - const POPOVER_PROPS = { - className: 'kadence-units-popover', - }; - - return [ - onChange && ( -
- onChange( size ) } - min={ min } - max={ max } - step={ step } - /> - { ( onUnit || showUnit ) && ( -
- { ( units.length === 1 || lockUnits ) ? ( - - ) : ( - createLevelControlToolbar( singleUnit ) ) } - className={ 'kadence-units-group' } - popoverProps={ POPOVER_PROPS } - /> - ) } -
- ) } -
- ), - ]; -} diff --git a/src/packages/components/src/responsive-align-control/editor.scss b/src/packages/components/src/responsive-align-control/editor.scss deleted file mode 100644 index 40d01476d..000000000 --- a/src/packages/components/src/responsive-align-control/editor.scss +++ /dev/null @@ -1,27 +0,0 @@ -.kb-responsive-align-control-inner { - position: relative; - z-index: 0; - .components-toolbar { - border: 1px solid var(--kb-border-color, #859CB6 ); - min-height: 38px; - .components-button { - height: 36px; - padding-top: 4px; - padding-bottom: 4px; - color: #4A5568; - &.is-pressed { - color: white; - &:before { - background: var(--wp-admin-theme-color, #00669b); - } - } - } - } -} -.kb-responsive-align-justify-column .components-toolbar .components-button.has-icon, .kb-responsive-align-justify-vertical .components-toolbar .components-button.has-icon { - min-width: 28px; - &:before { - left:4px; - right:4px; - } -} \ No newline at end of file diff --git a/src/packages/components/src/responsive-align-control/index.js b/src/packages/components/src/responsive-align-control/index.js deleted file mode 100644 index 677e445cc..000000000 --- a/src/packages/components/src/responsive-align-control/index.js +++ /dev/null @@ -1,465 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map } from 'lodash'; -import { capitalizeFirstLetter } from '@kadence/helpers' -const alignBottom = ( - - - -); - -const alignCenter = ( - - - -); - -const alignTop = ( - - - -); - -const alignStretch = ( - - - -); - -const verticalSpaceBetween = ( - - - -); -const verticalSpaceEvenly = ( - - - -); -const verticalSpaceAround = ( - - - -); -const spaceAround = ( - - - - - -); - -const spaceEvenly = ( - - - - - -); - -import { - arrowUp, - arrowLeft, - arrowRight, - arrowDown, - justifyLeft, - justifyCenter, - justifyRight, - justifySpaceBetween, - justifyStretch, -} from '@wordpress/icons'; -import { - Dashicon, - Button, - ButtonGroup, - Path, SVG -} from '@wordpress/components'; -import { AlignmentToolbar, JustifyToolbar, BlockVerticalAlignmentToolbar } from '@wordpress/blockEditor'; -import './editor.scss'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveAlignControls( { - label, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - isCollapsed = false, - type = 'textAlign', - reverse = false, -} ) { - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - let alignmentControls = ''; - let UIComponent = AlignmentToolbar; - if ( type === 'justify' ) { - UIComponent = JustifyToolbar; - } else if ( type === 'vertical' ) { - UIComponent = BlockVerticalAlignmentToolbar; - } else if ( type === 'orientation' ) { - alignmentControls = [ - { - icon: arrowRight, - title: __( 'Horizontal Direction', 'kadence-blocks' ), - align: 'row', - }, - { - icon: arrowDown, - title: __( 'Vertical Direction', 'kadence-blocks' ), - align: 'column', - }, - { - icon: arrowLeft, - title: __( 'Horizontal Reverse', 'kadence-blocks' ), - align: 'row-reverse', - }, - { - icon: arrowUp, - title: __( 'Vertical Reverse', 'kadence-blocks' ), - align: 'column-reverse', - }, - ] - } else if ( type === 'vertical-column' ) { - alignmentControls = [ - { - icon: alignTop, - title: __( 'Top', 'kadence-blocks' ), - align: 'top', - }, - { - icon: alignCenter, - title: __( 'Middle', 'kadence-blocks' ), - align: 'middle', - }, - { - icon: alignBottom, - title: __( 'Bottom', 'kadence-blocks' ), - align: 'bottom', - }, - { - icon: alignStretch, - title: __( 'Stretch', 'kadence-blocks' ), - align: 'stretch', - }, - ] - } else if ( type === 'orientation-column' ) { - alignmentControls = [ - { - icon: arrowDown, - title: __( 'Vertical Direction', 'kadence-blocks' ), - align: 'vertical', - }, - { - icon: arrowRight, - title: __( 'Horizontal Direction', 'kadence-blocks' ), - align: 'horizontal', - }, - { - icon: arrowUp, - title: __( 'Vertical Reverse', 'kadence-blocks' ), - align: 'vertical-reverse', - }, - { - icon: arrowLeft, - title: __( 'Horizontal Reverse', 'kadence-blocks' ), - align: 'horizontal-reverse', - }, - ] - } else if ( type === 'justify-align' ) { - if ( reverse ) { - alignmentControls = [ - { - icon: justifyRight, - title: __( 'Start', 'kadence-blocks' ), - align: 'flex-start', - }, - { - icon: justifyCenter, - title: __( 'Center', 'kadence-blocks' ), - align: 'center', - }, - { - icon: justifyLeft, - title: __( 'End', 'kadence-blocks' ), - align: 'flex-end', - }, - { - icon: justifyStretch, - title: __( 'Stretch', 'kadence-blocks' ), - align: 'stretch', - }, - ] - } else { - alignmentControls = [ - { - icon: justifyLeft, - title: __( 'Start', 'kadence-blocks' ), - align: 'flex-start', - }, - { - icon: justifyCenter, - title: __( 'Center', 'kadence-blocks' ), - align: 'center', - }, - { - icon: justifyRight, - title: __( 'End', 'kadence-blocks' ), - align: 'flex-end', - }, - { - icon: justifyStretch, - title: __( 'Stretch', 'kadence-blocks' ), - align: 'stretch', - }, - ] - } - } else if ( type === 'justify-column' ) { - if ( reverse ) { - alignmentControls = [ - { - icon: justifyRight, - title: __( 'Start', 'kadence-blocks' ), - align: 'flex-start', - }, - { - icon: justifyCenter, - title: __( 'Center', 'kadence-blocks' ), - align: 'center', - }, - { - icon: justifyLeft, - title: __( 'End', 'kadence-blocks' ), - align: 'flex-end', - }, - { - icon: justifySpaceBetween, - title: __( 'Space Between', 'kadence-blocks' ), - align: 'space-between', - }, - { - icon: spaceAround, - title: __( 'Space Around', 'kadence-blocks' ), - align: 'space-around', - }, - { - icon: spaceEvenly, - title: __( 'Space Evenly', 'kadence-blocks' ), - align: 'space-evenly', - }, - ] - } else { - alignmentControls = [ - { - icon: justifyLeft, - title: __( 'Start', 'kadence-blocks' ), - align: 'flex-start', - }, - { - icon: justifyCenter, - title: __( 'Center', 'kadence-blocks' ), - align: 'center', - }, - { - icon: justifyRight, - title: __( 'End', 'kadence-blocks' ), - align: 'flex-end', - }, - { - icon: justifySpaceBetween, - title: __( 'Space Between', 'kadence-blocks' ), - align: 'space-between', - }, - { - icon: spaceAround, - title: __( 'Space Around', 'kadence-blocks' ), - align: 'space-around', - }, - { - icon: spaceEvenly, - title: __( 'Space Evenly', 'kadence-blocks' ), - align: 'space-evenly', - }, - ] - } - } else if ( type === 'justify-vertical' ) { - if ( reverse ) { - alignmentControls = [ - { - icon: alignBottom, - title: __( 'Bottom', 'kadence-blocks' ), - align: 'top', - }, - { - icon: alignCenter, - title: __( 'Middle', 'kadence-blocks' ), - align: 'middle', - }, - { - icon: alignTop, - title: __( 'Top', 'kadence-blocks' ), - align: 'bottom', - }, - { - icon: verticalSpaceBetween, - title: __( 'Space Between', 'kadence-blocks' ), - align: 'space-between', - }, - { - icon: verticalSpaceAround, - title: __( 'Space Around', 'kadence-blocks' ), - align: 'space-around', - }, - { - icon: verticalSpaceEvenly, - title: __( 'Space Evenly', 'kadence-blocks' ), - align: 'space-evenly', - }, - ] - } else { - alignmentControls = [ - { - icon: alignTop, - title: __( 'Top', 'kadence-blocks' ), - align: 'top', - }, - { - icon: alignCenter, - title: __( 'Middle', 'kadence-blocks' ), - align: 'middle', - }, - { - icon: alignBottom, - title: __( 'Bottom', 'kadence-blocks' ), - align: 'bottom', - }, - { - icon: verticalSpaceBetween, - title: __( 'Space Between', 'kadence-blocks' ), - align: 'space-between', - }, - { - icon: verticalSpaceAround, - title: __( 'Space Around', 'kadence-blocks' ), - align: 'space-around', - }, - { - icon: verticalSpaceEvenly, - title: __( 'Space Evenly', 'kadence-blocks' ), - align: 'space-evenly', - }, - ] - } - } - - const devices = [ - { - name: 'Desktop', - key: 'desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - key: 'tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const output = {}; - output.Mobile = ( - onChangeMobile( align ) } - alignmentControls={ alignmentControls ? alignmentControls : undefined } - /> - ); - output.Tablet = ( - onChangeTablet( align ) } - alignmentControls={ alignmentControls ? alignmentControls : undefined } - /> - ); - output.Desktop = ( - onChange( align ) } - alignmentControls={ alignmentControls ? alignmentControls : undefined } - /> - ); - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( - { label } - ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ), - ]; -} diff --git a/src/packages/components/src/responsive-control/editor.scss b/src/packages/components/src/responsive-control/editor.scss deleted file mode 100644 index 13b3ad8f1..000000000 --- a/src/packages/components/src/responsive-control/editor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.kb-responsive-control-inner .components-select-control { - max-height: 60px; -} \ No newline at end of file diff --git a/src/packages/components/src/responsive-control/index.js b/src/packages/components/src/responsive-control/index.js deleted file mode 100644 index a5f2d3173..000000000 --- a/src/packages/components/src/responsive-control/index.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map } from 'lodash'; -import { capitalizeFirstLetter } from '@kadence/helpers' -import { - Dashicon, - Button, - ButtonGroup, -} from '@wordpress/components'; -/** - * Import Css - */ - import './editor.scss'; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function ResponsiveControl( { - desktopChildren, - tabletChildren, - mobileChildren, - } ) { - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - key: 'desktop', - label: __( 'Desktop', 'kadence-blocks' ), - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - key: 'tablet', - label: __( 'Tablet', 'kadence-blocks' ), - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - label: __( 'Mobile', 'kadence-blocks' ), - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const output = {}; - output.Mobile = ( - mobileChildren - ); - output.Tablet = ( - tabletChildren - ); - output.Desktop = ( - desktopChildren - ); - return ( -
-
- - { map( devices, ( { name, key, title, itemClass, label } ) => ( - - ) ) } - -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ); -} diff --git a/src/packages/components/src/select-parent-block/editor.scss b/src/packages/components/src/select-parent-block/editor.scss deleted file mode 100644 index ec14c28ac..000000000 --- a/src/packages/components/src/select-parent-block/editor.scss +++ /dev/null @@ -1,11 +0,0 @@ -.kadence-blocks-block-parent-selector { - border-top: 1px solid #CBD5E0; -} -.kadence-blocks-block-parent-selector .kadence-blocks-block-parent-selector__button.components-button { - width: 100%; - padding: 0 16px; - height: 44px; -} -.kadence-blocks-block-parent-selector .kadence-blocks-block-parent-selector__button.components-button:hover { - background: rgba(237,242, 247, .4); -} \ No newline at end of file diff --git a/src/packages/components/src/select-parent-block/index.js b/src/packages/components/src/select-parent-block/index.js deleted file mode 100644 index eeeb7aa91..000000000 --- a/src/packages/components/src/select-parent-block/index.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * WordPress dependencies - */ - import { __ } from '@wordpress/i18n'; - import { - useState, - useRef, - useEffect, - useMemo, - } from '@wordpress/element'; - import { - Panel, - ToggleControl, - Button, -} from '@wordpress/components'; -import { - useBlockDisplayInformation, - store as blockEditorStore, - BlockIcon, -} from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; -/** - * Import Css - */ -import './editor.scss'; - -/** - * Supplying only a client ID will select the first parent block. - * - * Supplying a parentSlug will select the first parent with that slug for the given client ID. - * - * @param clientId - * @param label - * @param parentSlug - * @returns {JSX.Element|null} - * @constructor - */ -export default function SelectParentBlock( { clientId, label = null, parentSlug = null } ) { - - const { selectBlock } = useDispatch( blockEditorStore ); - const { firstParentClientId } = useSelect( - ( select ) => { - const { - getBlockParents, - getBlockParentsByBlockName - } = select( blockEditorStore ); - - let parentClientId, parents; - - if( parentSlug !== null ){ - parents = getBlockParentsByBlockName(clientId, parentSlug); - parentClientId = parents[0]; - } else { - parents = getBlockParents( clientId ); - parentClientId = parents[ parents.length - 1 ]; - } - - return { - firstParentClientId: parentClientId, - }; - }, - [] - ); - if ( firstParentClientId === undefined ) { - return null; - } - const blockInformation = useBlockDisplayInformation( firstParentClientId ); - return ( -
- -
- ); -} diff --git a/src/packages/components/src/select-posts-controls/index.js b/src/packages/components/src/select-posts-controls/index.js deleted file mode 100644 index 5de951165..000000000 --- a/src/packages/components/src/select-posts-controls/index.js +++ /dev/null @@ -1,122 +0,0 @@ -/* global wp */ - -import PropTypes from 'prop-types'; - -import { uniqBy } from 'lodash'; -import Select from 'react-select'; -import { fetchJson } from '@kadence/helpers'; - -import { addQueryArgs } from '@wordpress/url'; -import { Component } from '@wordpress/element'; - -class KadenceSelectPosts extends Component { - constructor() { - super( ...arguments ); - this.state = { - options: [], - isLoading: false, - page: 1, - hasMore: false, - }; - } - componentDidMount() { - this.fetchPostAbortController = new AbortController(); - this.fetchTerms(); - } - - componentWillUnmount() { - this.fetchPostAbortController && this.fetchPostAbortController.abort(); - } - - fetchTerms() { - const { restBase } = this.props; - const { page, options, search } = this.state; - - const query = { - page, - per_page: 10, - }; - - if ( search && search.length >= 3 ) { - query.search = search; - } - - this.setState( { isLoading: true } ); - - fetchJson( { - path: addQueryArgs( `${ restBase }/`, query ), - signal: this.fetchPostAbortController.signal, - } ).then( ( [ terms, headers ] ) => { - const newOptions = uniqBy( [ ...options, ...terms.map( term => ( { - value: term.id, - label: term.title.rendered, - } ) ) ], 'value' ); - - this.setState( { - options: newOptions, - hasMore: parseInt( headers[ 'x-wp-totalpages' ], 10 ) > page, - isLoading: false, - } ); - } ); - } - - fetchMoreTerms() { - const { page, hasMore, isLoading } = this.state; - - if ( ! hasMore || isLoading ) { - return; - } - - this.setState( { page: page + 1 }, () => this.fetchTerms() ); - } - - updateSearch( search ) { - if ( search.length >= 3 ) { - this.setState( { - search, - page: 1, - }, () => this.fetchTerms() ); - } - } - - handleChange( value ) { - const { onChange } = this.props; - this.setState( { - search: null, - page: 1, - } ); - onChange( value ); - } - - render() { - return ( -
- - this.handleChange( value ) } - id={ this.props.fieldId } - options={ this.state.options } - isMulti={ true } - classNamePrefix="kt-tax-select" - isLoading={ this.state.isLoading } - onMenuScrollToBottom={ () => this.fetchMoreTerms() } - onInputChange={ s => this.updateSearch( s ) } - maxMenuHeight={ 300 } - placeholder={ this.props.placeholder } - /> -
- ); - } -} - -KadenceSelectTerms.propTypes = { - fieldId: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - restBase: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, -} - -export default KadenceSelectTerms; diff --git a/src/packages/components/src/single-pop-color-control/index.js b/src/packages/components/src/single-pop-color-control/index.js deleted file mode 100644 index eef56006b..000000000 --- a/src/packages/components/src/single-pop-color-control/index.js +++ /dev/null @@ -1,320 +0,0 @@ -/** - * Advanced Color Control. - * - */ - -/** - * Import Icons - */ -import ColorPicker from '../color-picker'; -import ColorIcons from '../color-icons'; -import { hexToRGBA } from '@kadence/helpers'; - -import { get, map } from 'lodash'; -import { useSetting } from '@wordpress/block-editor'; -import { useState } from '@wordpress/element'; -/** - * Internal block libraries - */ -import { __, sprintf } from '@wordpress/i18n'; -import { withSelect } from '@wordpress/data'; -import { Button, Popover, ColorIndicator, Tooltip, Dashicon } from '@wordpress/components'; - -function unConvertOpacity(value) { - let val = 100; - if (value) { - val = value * 100; - } - return val; -} - -export default function SinglePopColorControl({ - label, - alpha = true, - opacityValue = '', - opacityUnit = '', - onOpacityChange = null, - value, - onChange, - reload, - reloaded, - defaultValue, - onClassChange, - onArrayChange = null, - disableCustomColors = false, -}) { - const [isVisible, setIsVisible] = useState(false); - const [classSat, setClassSat] = useState('first'); - const [currentColor, setCurrentColor] = useState(''); - const [currentOpacity, setCurrentOpacity] = useState(opacityValue !== '' ? opacityValue : 1); - const [isPalette, setIsPalette] = useState(value && value.startsWith('palette') ? true : false); - const isDisableCustomColors = !disableCustomColors ? !useSetting('color.custom') : true; - const colors = useSetting('color.palette'); - const toggleVisible = () => { - setIsVisible(true); - }; - const toggleClose = () => { - if (isVisible === true) { - setIsVisible(false); - } - }; - if (reload) { - reloaded(true); - setTimeout(() => { - setCurrentColor(''); - setCurrentOpacity(''); - setIsPalette(false); - }, 100); - } - const convertOpacity = (value) => { - let val = 1; - if (value) { - val = value / 100; - } - return val; - }; - const convertedOpacityValue = 100 === opacityUnit ? convertOpacity(currentOpacity) : currentOpacity; - const colorVal = currentColor ? currentColor : value; - let currentColorString = - isPalette && colors && colorVal && colors[parseInt(colorVal.slice(-1), 10) - 1] - ? colors[parseInt(colorVal.slice(-1), 10) - 1].color - : colorVal; - if (!isPalette && currentColorString && currentColorString.startsWith('var(')) { - currentColorString = window - .getComputedStyle(document.documentElement) - .getPropertyValue(value.replace('var(', '').split(',')[0].replace(')', '')); - } - if (currentColorString && currentColorString.startsWith('var(')) { - let temp_currentColorString = window - .getComputedStyle(document.documentElement) - .getPropertyValue(currentColorString.replace('var(', '').replace(' ', '').replace(')', '')); - if ('' === temp_currentColorString) { - temp_currentColorString = window - .getComputedStyle(document.documentElement) - .getPropertyValue( - currentColorString.replace('var(', '').replace(' ', '').split(',')[0].replace(')', '') - ); - } - currentColorString = temp_currentColorString; - } - if ('' === currentColorString) { - currentColorString = defaultValue; - } - // if ( '' !== currentColorString && this.props.onOpacityChange && ! this.state.isPalette ) { - // currentColorString = hexToRGBA( ( undefined === currentColorString ? '' : currentColorString ), ( convertedOpacityValue !== undefined && convertedOpacityValue !== '' ? convertedOpacityValue : 1 ) ); - // } - if (onOpacityChange && !isPalette) { - if ( - Number(convertedOpacityValue !== undefined && convertedOpacityValue !== '' ? convertedOpacityValue : 1) !== - 1 - ) { - currentColorString = hexToRGBA( - undefined === currentColorString ? '' : currentColorString, - convertedOpacityValue !== undefined && convertedOpacityValue !== '' ? convertedOpacityValue : 1 - ); - } - } - let previewColorString = currentColorString; - if (isPalette && colorVal) { - switch (colorVal) { - case 'palette1': - previewColorString = 'var(--global-palette1,#2B6CB0)'; - break; - case 'palette2': - previewColorString = 'var(--global-palette2,#215387)'; - break; - case 'palette3': - previewColorString = 'var(--global-palette3,#1A202C)'; - break; - case 'palette4': - previewColorString = 'var(--global-palette4,#2D3748)'; - break; - case 'palette5': - previewColorString = 'var(--global-palette5,#4A5568)'; - break; - case 'palette6': - previewColorString = 'var(--global-palette6,#718096)'; - break; - case 'palette7': - previewColorString = 'var(--global-palette7,#EDF2F7)'; - break; - case 'palette8': - previewColorString = 'var(--global-palette8,#F7FAFC)'; - break; - case 'palette9': - previewColorString = 'var(--global-palette9,#ffffff)'; - break; - } - } - const onChangeState = (tempColor, tempPalette) => { - let newColor; - let opacity = 100 === opacityUnit ? 100 : 1; - if (tempPalette) { - newColor = tempPalette; - } else if (undefined !== tempColor.rgb && undefined !== tempColor.rgb.a && 1 !== tempColor.rgb.a) { - if (onOpacityChange) { - if (tempColor.hex === 'transparent') { - newColor = '#000000'; - } else { - newColor = tempColor.hex; - } - opacity = 100 === opacityUnit ? unConvertOpacity(tempColor.rgb.a) : tempColor.rgb.a; - } else { - newColor = - 'rgba(' + - tempColor.rgb.r + - ',' + - tempColor.rgb.g + - ',' + - tempColor.rgb.b + - ',' + - tempColor.rgb.a + - ')'; - } - } else if (undefined !== tempColor.hex) { - newColor = tempColor.hex; - } else { - newColor = tempColor; - } - setCurrentColor(newColor); - setCurrentOpacity(opacity); - setIsPalette(tempPalette ? true : false); - }; - const onChangeComplete = (tempColorCom, tempPalettCom) => { - let newColor; - let opacity = 100 === opacityUnit ? 100 : 1; - if (tempPalettCom) { - newColor = tempPalettCom; - } else if (undefined !== tempColorCom.rgb && undefined !== tempColorCom.rgb.a && 1 !== tempColorCom.rgb.a) { - if (onOpacityChange) { - if (tempColorCom.hex === 'transparent') { - newColor = '#000000'; - } else { - newColor = tempColorCom.hex; - } - opacity = 100 === opacityUnit ? unConvertOpacity(tempColorCom.rgb.a) : tempColorCom.rgb.a; - } else { - newColor = - 'rgba(' + - tempColorCom.rgb.r + - ',' + - tempColorCom.rgb.g + - ',' + - tempColorCom.rgb.b + - ',' + - tempColorCom.rgb.a + - ')'; - } - } else if (undefined !== tempColorCom.hex) { - newColor = tempColorCom.hex; - } else { - newColor = tempColorCom; - } - setCurrentColor(newColor); - setCurrentOpacity(opacity); - setIsPalette(tempPalettCom ? true : false); - if (null !== onArrayChange) { - onArrayChange(newColor, opacity); - } else { - onChange(newColor); - if (null !== onOpacityChange) { - setTimeout(() => { - onOpacityChange(opacity); - }, 50); - } - } - }; - return ( -
- {isVisible && ( - - onChangeState(color, '')} - onChangeComplete={(color) => { - onChangeComplete(color, ''); - if (onClassChange) { - onClassChange(''); - } - }} - /> - {colors && ( -
- {map(colors, ({ color, slug, name }) => { - const style = { color }; - const palette = slug.replace('theme-', ''); - const isActive = - palette === value || (!slug.startsWith('theme-palette') && value === color); - return ( -
- -
- ); - })} -
- )} - - )} - {isVisible && ( - - )} - {!isVisible && ( - - )} -
- ); -} diff --git a/src/packages/components/src/small-responsive-control/editor.scss b/src/packages/components/src/small-responsive-control/editor.scss deleted file mode 100644 index 2ecc9ded4..000000000 --- a/src/packages/components/src/small-responsive-control/editor.scss +++ /dev/null @@ -1,41 +0,0 @@ -.kb-small-responsive-control .kb-small-responsive-options { - margin-bottom: 0px; - .kb-responsive-btn { - background: transparent; - border: 0; - height: auto; - border-bottom: 0; - padding: 2px 4px; - margin-bottom: 0; - outline: 0; - color: #A0AEC0; - width: auto; - font-size: 10px; - box-shadow: none; - &.is-active { - color: var( --wp-admin-theme-color, #007cba ); - background: transparent; - } - .dashicon { - width: 15px; - height: 15px; - font-size: 15px; - } - } -} -.kb-small-responsive-control.responsive-title-area-spacing .kadence-title-bar { - margin-bottom: 24px; -} -.kb-small-responsive-control .kb-small-responsive-options .kb-responsive-btn { - background: transparent; - border: 0; - height: auto; - border-bottom: 0; - padding: 2px 4px; - margin-bottom: 0; - outline: 0; - color: #A0AEC0; - width: auto; - font-size: 10px; - box-shadow: none; -} \ No newline at end of file diff --git a/src/packages/components/src/small-responsive-control/index.js b/src/packages/components/src/small-responsive-control/index.js deleted file mode 100644 index 00bf420eb..000000000 --- a/src/packages/components/src/small-responsive-control/index.js +++ /dev/null @@ -1,99 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { map } from 'lodash'; -import { capitalizeFirstLetter } from '@kadence/helpers' -import { - Dashicon, - Button, - ButtonGroup, -} from '@wordpress/components'; -import './editor.scss'; - -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function SmallResponsiveControl( { - label, - desktopChildren, - tabletChildren, - mobileChildren, - hasPadding = false, - } ) { - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const output = {}; - output.Mobile = ( - mobileChildren - ); - output.Tablet = ( - tabletChildren - ); - output.Desktop = ( - desktopChildren - ); - return ( -
-
- { label && ( - { label } - ) } - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ); -} diff --git a/src/packages/components/src/step-control/editor.scss b/src/packages/components/src/step-control/editor.scss deleted file mode 100644 index 0060cd081..000000000 --- a/src/packages/components/src/step-control/editor.scss +++ /dev/null @@ -1,18 +0,0 @@ -.kb-step-control input.components-step-control__number { - height:36px; - flex-grow: 1; - text-align: center; -} -.kb-flex-center { - display: flex; - align-items: center; -} -.kb-step-control { - gap: 3px; -} -.kb-step-control .components-button.kb-step-btn { - color: #4A5568; -} -.kb-step-control .components-button.kb-step-btn:not(:hover) { - box-shadow: none; -} \ No newline at end of file diff --git a/src/packages/components/src/step-control/index.js b/src/packages/components/src/step-control/index.js deleted file mode 100644 index 9a1211694..000000000 --- a/src/packages/components/src/step-control/index.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Step Component - * - */ - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { - Button, - Dashicon, -} from '@wordpress/components'; -import './editor.scss'; -import { - chevronLeftSmall, - chevronRightSmall, -} from '@wordpress/icons'; -/** - * Build the Step controls - * @returns {object} Step settings. - */ -export default function StepControls( { - label, - value, - onChange, - min, - max, - step = 1, - } ) { - const onMinus = () => { - if ( value > min ) { - onChange( value - step ); - } - }; - const onPlus = () => { - if ( value < max ) { - onChange( value + step ); - } - }; - return [ - onChange && ( -
-

{ label }

-
-
-
- ), - ]; -} diff --git a/src/packages/components/src/tag-select/editor.scss b/src/packages/components/src/tag-select/editor.scss deleted file mode 100644 index 952085f3b..000000000 --- a/src/packages/components/src/tag-select/editor.scss +++ /dev/null @@ -1,78 +0,0 @@ -.kb-tag-level-control .components-toolbar__control.components-button[data-subscript]:after { - line-height: 15px; - font-size: 12px; -} -.kb-tag-level-control .components-icon-button:not(:disabled).is-active:hover:after, .kb-tag-level-control .components-button:not(:disabled).is-active:hover:after { - color:#191e23; -} -.kb-tag-level-control .components-toolbar__control.components-button:before { - left: -1px; - right: 0px; -} -.kb-tag-level-control .components-icon-button.is-active, .kb-tag-level-control .components-button.is-active { - outline: none; - color: #fff; - box-shadow: none; - background: #555d66; -} -.kb-tag-level-control .components-toolbar { - width: 100%; - display: grid; - padding:0 1px; - /* autoprefixer: ignore next */ - grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); - min-height: 40px; -} -.kb-tag-level-control div.has-left-divider .components-toolbar__control.components-button[aria-label="Paragraph"] svg { - max-height: 14px; -} -.kb-tag-level-control div.has-left-divider .components-toolbar__control.components-button[aria-label="Paragraph"] svg path { - transform: translate(-2px, -1px); -} -.kb-tag-level-control .components-toolbar > div { - flex: 1; - justify-content: center; - align-items: center; -} -.kb-tag-level-control .components-toolbar>div+div.has-left-divider { - margin-left: 0; -} -.kb-tag-level-control .components-toolbar>div+div.has-left-divider:before { - top: 9px; - left: -1px; -} -.kb-tag-level-control .components-toolbar__control.components-button { - width: 100%; - min-width: 20px !important; - height: 34px; - border-radius: 2px; - padding-left: 0 !important; - padding-right: 0 !important; - svg { - width: 16px; - height: 16px; - } - &:focus:before { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 0 0 2px #fff; - outline: 2px solid transparent; - } -} -.kb-tag-level-control .kb-tag-select-control-inner { - position: relative; - z-index: 0; - .components-toolbar { - border: 1px solid var(--kb-border-color, #859CB6 ); - .components-button { - color: #4A5568; - &.is-pressed { - color: white; - &:before { - background: var(--wp-admin-theme-color, #00669b); - } - } - } - > div+div.has-left-divider:before { - background-color: var(--kb-border-color, #859CB6 ); - } - } -} \ No newline at end of file diff --git a/src/packages/components/src/tag-select/index.js b/src/packages/components/src/tag-select/index.js deleted file mode 100644 index d487882ff..000000000 --- a/src/packages/components/src/tag-select/index.js +++ /dev/null @@ -1,179 +0,0 @@ -/** - * Range Control - * - */ - -/** - * Internal block libraries - */ - import { __ } from '@wordpress/i18n'; -import { useInstanceId } from '@wordpress/compose'; -import { range } from 'lodash'; -import { - Button, - ToolbarGroup, -} from '@wordpress/components'; -/** - * Import Css - */ - import './editor.scss'; -import HeadingLevelIcon from './../heading-level-icon' -import { - pxIcon, - emIcon, - remIcon, - vhIcon, - vwIcon, - percentIcon, -} from '@kadence/icons'; - -let icons = { - px: pxIcon, - em: emIcon, - rem: remIcon, - vh: vhIcon, - vw: vwIcon, - percent: percentIcon, -}; -/** - * Build the Measure controls - * @returns {object} Measure settings. - */ -export default function tagSelect( { - label, - onChange, - value = '', - className = '', - isCollapsed = false, - ariaLabel = __( 'Change HTML Tag', 'kadence-blocks' ), - reset = false, - headingOnly = false, - tagLowLevel = 1, - tagHighLevel = 7, -} ) { - const level = ( value !== 'span' && value !== 'div' && value !== 'p' ? value : 2 ); - const htmlTag = ( value === 'span' || value === 'div' || value === 'p' ? value : 'heading' ); - const headingOptions = [ - [ - { - icon : , - title : __( 'Heading 1', 'kadence-blocks' ), - isActive: ( 1 === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick : () => onChange( 1 ), - }, - ], - [ - { - icon : , - title : __( 'Heading 2', 'kadence-blocks' ), - isActive: ( 2 === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick : () => onChange( 2 ), - }, - ], - [ - { - icon : , - title : __( 'Heading 3', 'kadence-blocks' ), - isActive: ( 3 === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick : () => onChange( 3 ), - }, - ], - [ - { - icon : , - title : __( 'Heading 4', 'kadence-blocks' ), - isActive: ( 4 === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick : () => onChange( 4 ), - }, - ], - [ - { - icon : , - title : __( 'Heading 5', 'kadence-blocks' ), - isActive: ( 5 === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick : () => onChange( 5 ), - }, - ], - [ - { - icon : , - title : __( 'Heading 6', 'kadence-blocks' ), - isActive: ( 6 === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick : () => onChange( 6 ), - }, - ], - [ - { - icon : , - title : __( 'Paragraph', 'kadence-blocks' ), - isActive: ( htmlTag && htmlTag === 'p' ? true : false ), - onClick : () => onChange( 'p' ), - }, - ], - [ - { - icon : , - title : __( 'Span', 'kadence-blocks' ), - isActive: ( htmlTag && htmlTag === 'span' ? true : false ), - onClick : () => onChange( 'span' ), - }, - ], - [ - { - icon : , - title : __( 'div', 'kadence-blocks' ), - isActive: ( htmlTag && htmlTag === 'div' ? true : false ), - onClick : () => onChange( 'div' ), - }, - ], - ]; - const createhtmlTagControl = ( targetLevel ) => { - return [ { - icon: , - title: sprintf( - /* translators: %d: heading level e.g: "1", "2", "3" */ - __( 'Heading %d', 'kadence-blocks' ), - targetLevel - ), - isActive: ( targetLevel === level && htmlTag && htmlTag === 'heading' ? true : false ), - onClick: () => onChange( targetLevel ), - } ]; - }; - const headingOnlyOptions = range( tagLowLevel, tagHighLevel ).map( createhtmlTagControl ); - const UIComponent = isCollapsed ? ToolbarDropdownMenu : ToolbarGroup; - return [ - onChange && ( -
- { label && ( -
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } -
- ) } -
- -
-
- ), - ]; -} diff --git a/src/packages/components/src/taxonomy-select/index.js b/src/packages/components/src/taxonomy-select/index.js deleted file mode 100644 index 6f3db2935..000000000 --- a/src/packages/components/src/taxonomy-select/index.js +++ /dev/null @@ -1,147 +0,0 @@ -/* global wp */ -/** - * External dependencies - */ -import Select from 'react-select'; -import { __ } from '@wordpress/i18n'; -import { useState, useEffect } from '@wordpress/element'; -import { Spinner } from '@wordpress/components'; -import { addQueryArgs } from '@wordpress/url'; -import apiFetch from '@wordpress/api-fetch'; -import KadencePostSelectTerms from '../post-select-terms-control'; -import { useInstanceId } from '@wordpress/compose'; -import { isArrayLike, has, isEmpty } from 'lodash'; -import { tryParseJSON } from '@kadence/helpers'; - -export default function TaxonomySelect( { - label, - value, - onChange, - source, - contextPost = null, - className = null, - termIsMulti = false, - taxOnly = false, - termIsOptional = false, - } ) { - const instanceId = useInstanceId( TaxonomySelect ); - const id = `inspector-taxonomy-select-control-${ instanceId }`; - const [ isLoading, setIsLoading ] = useState( true ); - const [ taxonomies, setTaxonomies ] = useState( [] ); - let taxStart = ''; - if( taxOnly || ( termIsOptional && typeof(value) == 'string' ) ) { - taxStart = value; - } else { - if( isArrayLike(value) && has(value, [0, 'value']) && !isEmpty(value) ) { - taxStart = value[0].value.split('|'); - } else if ( value && !isEmpty(value) ) { - taxStart = value.split('|'); - } else { - taxStart = ['']; - } - } - const [ tax, setTax ] = useState( typeof(taxStart) == 'object' ? taxStart[0] : taxStart ); - useEffect( () => { - let theSource = source ? source : contextPost; - if ( wp.data.select( 'core/editor' ) && ! theSource ) { - if ( kadence_blocks_params.isKadenceE && kadenceElementParams.previewPostID ) { - const postId = tryParseJSON( kadenceElementParams.previewPostID ); - theSource = postId && postId.id ? postId.id : ''; - } else { - theSource = wp.data.select( 'core/editor' ).getCurrentPostId(); - } - } - const options = { - source: theSource, - }; - setIsLoading( true ); - apiFetch( { - path: addQueryArgs( - window.kadence_blocks_params.taxonomiesEndpoint, - options - ), - } ) - .then( ( taxonomyItems ) => { - if ( ! taxonomyItems ) { - setTaxonomies( [] ); - } else { - setTaxonomies( taxonomyItems ); - } - setIsLoading( false ); - } ) - .catch( () => { - setIsLoading( false ); - setTaxonomies( [] ); - } ); - }, [ source ] ); - if ( isLoading ) { - return ( - - ); - } - const customStyles = { - menuPortal: (provided) => ({ - ...provided, - zIndex: 99999999, - }) - } - return ( -
- { label && ( - - ) } - -
- - ) } -
- { onFontWeight && ( - - ) } - { onTextTransform && ( - onTextTransform( value ) } - /> - ) } - { fontFamily && onFontStyle && ( - - ) } -
-
- { onLetterSpacing && ( -
-
-
- - -
-
- { __( 'px' ) } -
- ) } - { fontFamily && googleFont && onFontSubset && ( - onFontSubset( value ) } - /> - ) } - { fontFamily && googleFont && onLoadGoogleFont && ( - - ) } -
-
- { onFontSize && onFontSizeType && ! fontSizeArray && ( -
- { onFontSize && ( -
- onFontSize( value ) } - tabletValue={ ( tabSize ? tabSize : '' ) } - onChangeTablet={ ( value ) => onTabletSize( value ) } - mobileValue={ ( mobileSize ? mobileSize : '' ) } - onChangeMobile={ ( value ) => onMobileSize( value ) } - min={ 0 } - max={ fontSizeType !== 'px' ? 12 : 300 } - step={ fontSizeType !== 'px' ? 0.001 : 1 } - unit={ ( fontSizeType ? fontSizeType : 'px' ) } - onUnit={ ( value ) => onFontSizeType( value ) } - units={[ 'px', 'em', 'rem', 'vw' ]} - radio={ false } - compressedDevice={ true } - /> -
- ) } -
- ) } - { onLineHeight && onLineHeightType && ! fontSizeArray && ( -
-
- onLineHeight( value )} - tabletValue={( tabLineHeight ? tabLineHeight : '' )} - onChangeTablet={( value ) => onTabLineHeight( value )} - mobileValue={( mobileLineHeight ? mobileLineHeight : '' )} - onChangeMobile={( value ) => onMobileLineHeight( value )} - min={0} - max={( lineHeightType === 'px' ? 300 : 12 )} - step={( lineHeightType === 'px' ? 1 : 0.1 )} - unit={ lineHeightType ? lineHeightType : '' } - onUnit={( value ) => onLineHeightType( value )} - units={[ '-', 'px', 'em', 'rem' ]} - compressedDevice={ true } - /> -
-
- ) } -
- - ) } - /> - - ); - } -} -export default ( InlineTypographyControls ); diff --git a/src/packages/components/src/typography/text-shadow-control/index.js b/src/packages/components/src/typography/text-shadow-control/index.js deleted file mode 100644 index 97901b0ac..000000000 --- a/src/packages/components/src/typography/text-shadow-control/index.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * BoxShadow Component - * - */ - -/** - * Import Externals - */ -import PopColorControl from '../../pop-color-control'; - -/** - * Internal block libraries - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { ToggleControl } from '@wordpress/components'; -/** - * Build the BoxShadow controls - * @returns {object} BoxShadow settings. - */ -const TextShadowControl = ( { label, enable = true, color, colorDefault, blur, hOffset, vOffset, onColorChange, onBlurChange, onHOffsetChange, onVOffsetChange, onEnableChange } ) => ( -
- { label && ( -
-

{ label }

- { onEnableChange && ( - onEnableChange( value ) } - /> - ) } -
- ) } - { enable && ( -
-
-
-

{ __( 'Color', 'kadence-blocks' ) }

- onColorChange( value ) } - /> -
-
-

{ 'X' }

-
-
- onHOffsetChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ 'Y' }

-
-
- onVOffsetChange( Number( event.target.value ) ) } - min={ -200 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-

{ 'Blur' }

-
-
- onBlurChange( Number( event.target.value ) ) } - min={ 0 } - max={ 200 } - step={ 1 } - type="number" - className="components-text-control__input" - /> -
-
-
-
-
- ) } -
-); -export default TextShadowControl; diff --git a/src/packages/components/src/typography/typography-control/editor.scss b/src/packages/components/src/typography/typography-control/editor.scss deleted file mode 100644 index fbb110f39..000000000 --- a/src/packages/components/src/typography/typography-control/editor.scss +++ /dev/null @@ -1,55 +0,0 @@ -.typography-family-select-form-row { - z-index: 200; - position: relative; - .kt-typography__control input { - min-height: 18px; - } - .kb-react-select__indicator { - svg{ - width: 16px; - height: 16px; - } - } - .kb-react-select__input input { - min-height: 24px; - border-radius:0; - } - .kb-react-select__value-container { - padding: 0px 8px 0px 4px; - } -} -.kb-typography-control .components-base-control > .kadence-component__header, .kb-typography-control .components-base-control > .components-base-control__label { - font-size: 11px; - font-weight: 500; - text-transform: uppercase; -} -.typography-family-select-form-row { - .kb-react-select__control { - border-color: var(--kb-border-color, #859CB6 ); - min-height: 32px; - &:hover{ - border-color: var(--kb-border-dark-color, #6F8094 ); - } - } - .kb-react-select__indicator-separator { - width: 0; - } - .kb-react-select__dropdown-indicator { - color: var(--kb-border-color, #859CB6 ); - } -} - -.kb-select-style .components-input-control__backdrop:not(.specific):not(.more-specific) { - border-color: var(--kb-border-color, #859CB6 ); -} -.kb-textbox-style { - .components-base-control__label { - font-weight: 400; - } - .components-text-control__input { - border-color: var(--kb-border-color, #859CB6 ); - } - .components-input-control__backdrop:not(.specific):not(.more-specific) { - border-color: var(--kb-border-color, #859CB6 ); - } -} \ No newline at end of file diff --git a/src/packages/components/src/typography/typography-control/index.js b/src/packages/components/src/typography/typography-control/index.js deleted file mode 100644 index 0ce0ebaf2..000000000 --- a/src/packages/components/src/typography/typography-control/index.js +++ /dev/null @@ -1,733 +0,0 @@ -/** - * Typography Component - * - */ - -/* global kadence_blocks_params */ - -/** - * Internal block libraries - */ -import { __, sprintf } from '@wordpress/i18n'; -import './editor.scss'; -/** - * Import External - */ -import { capitalizeFirstLetter } from '@kadence/helpers' -import RangeControl from '../../range/range-control'; -import ResponsiveFontSizeControl from '../../font-size/responsive'; -import KadenceRadioButtons from '../../common/radio-buttons'; -import MeasurementControls from '../../measurement/measurement-control'; -import ResponsiveUnitControl from '../../unit/responsive'; -import TwoColumn from '../../panels/two-column'; -import TagSelect from '../../tag-select'; - -import Select from 'react-select'; -import { range } from 'lodash'; -import HeadingLevelIcon from '../../heading-level-icon'; - -import { applyFilters } from '@wordpress/hooks'; - -import { Component } from '@wordpress/element'; -import { - ToolbarGroup, - ToggleControl, - SelectControl, -} from '@wordpress/components'; - -/** - * Build the typography controls - * @returns {object} typography settings. - */ -class TypographyControls extends Component { - constructor() { - super( ...arguments ); - this.state = { - typographyOptions: [], - typographySelectOptions: [], - typographyWeights: [], - typographyStyles: [], - typographySubsets: '', - }; - } - componentDidMount() { - const fontsarray = typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.g_font_names ? kadence_blocks_params.g_font_names.map( ( name ) => { - return { label: name, value: name, google: true }; - } ) : {}; - let options = [ - { - type: 'group', - label: __( 'Standard Fonts', 'kadence-blocks' ), - options: [ - { label: 'System Default', value: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', google: false }, - { label: 'Arial, Helvetica, sans-serif', value: 'Arial, Helvetica, sans-serif', google: false }, - { label: '"Arial Black", Gadget, sans-serif', value: '"Arial Black", Gadget, sans-serif', google: false }, - { label: 'Helvetica, sans-serif', value: 'Helvetica, sans-serif', google: false }, - { label: '"Comic Sans MS", cursive, sans-serif', value: '"Comic Sans MS", cursive, sans-serif', google: false }, - { label: 'Impact, Charcoal, sans-serif', value: 'Impact, Charcoal, sans-serif', google: false }, - { label: '"Lucida Sans Unicode", "Lucida Grande", sans-serif', value: '"Lucida Sans Unicode", "Lucida Grande", sans-serif', google: false }, - { label: 'Tahoma, Geneva, sans-serif', value: 'Tahoma, Geneva, sans-serif', google: false }, - { label: '"Trebuchet MS", Helvetica, sans-serif', value: '"Trebuchet MS", Helvetica, sans-serif', google: false }, - { label: 'Verdana, Geneva, sans-serif', value: 'Verdana, Geneva, sans-serif', google: false }, - { label: 'Georgia, serif', value: 'Georgia, serif', google: false }, - { label: '"Palatino Linotype", "Book Antiqua", Palatino, serif', value: '"Palatino Linotype", "Book Antiqua", Palatino, serif', google: false }, - { label: '"Times New Roman", Times, serif', value: '"Times New Roman", Times, serif', google: false }, - { label: 'Courier, monospace', value: 'Courier, monospace', google: false }, - { label: '"Lucida Console", Monaco, monospace', value: '"Lucida Console", Monaco, monospace', google: false }, - ], - }, - { - type: 'group', - label: __( 'Google Fonts', 'kadence-blocks' ), - options: fontsarray, - }, - ]; - if ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.c_fonts ) { - const newOptions = []; - Object.keys( kadence_blocks_params.c_fonts ).forEach(function ( font ) { - const name = kadence_blocks_params.c_fonts[font].name; - const weights = []; - Object.keys( kadence_blocks_params.c_fonts[font].weights ).forEach(function ( weight ) { - weights.push( { - value: kadence_blocks_params.c_fonts[font].weights[weight], - label: kadence_blocks_params.c_fonts[font].weights[weight], - } ); - } ); - const styles = []; - Object.keys( kadence_blocks_params.c_fonts[font].styles ).forEach(function ( style ) { - styles.push( { - value: kadence_blocks_params.c_fonts[font].weights[style], - label: kadence_blocks_params.c_fonts[font].weights[style], - } ); - } ); - newOptions.push( { - label: name, - value: name, - google: false, - weights: weights, - styles: styles, - } ); - } ); - const custom_fonts = [ - { - type: 'group', - label: __( 'Custom Fonts', 'kadence-blocks' ), - options: newOptions, - }, - ]; - options = custom_fonts.concat( options ); - } - if ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params?.isKadenceT ) { - const themeOptions = [ - { label: 'Inherit Heading Font Family', value: 'var( --global-heading-font-family, inherit )', google: false }, - { label: 'Inherit Body Font Family', value: 'var( --global-body-font-family, inherit )', google: false }, - ]; - const theme_fonts = [ - { - type: 'group', - label: __( 'Theme Global Fonts', 'kadence-blocks' ), - options: themeOptions, - }, - ]; - options = theme_fonts.concat( options ); - } - let typographyOptions = applyFilters( 'kadence.typography_options', options ); - let typographySelectOptions = [].concat.apply( [], typographyOptions.map( option => option.options ) ); - const blockConfigObject = ( kadence_blocks_params.configuration ? JSON.parse( kadence_blocks_params.configuration ) : [] ); - if ( blockConfigObject[ 'kadence/typography' ] !== undefined && typeof blockConfigObject[ 'kadence/typography' ] === 'object' ) { - if ( blockConfigObject[ 'kadence/typography' ].showAll !== undefined && ! blockConfigObject[ 'kadence/typography' ].showAll ) { - typographyOptions = blockConfigObject[ 'kadence/typography' ].choiceArray; - typographySelectOptions = blockConfigObject[ 'kadence/typography' ].choiceArray; - } - } - this.setState( { typographyOptions: typographyOptions } ); - this.setState( { typographySelectOptions: typographySelectOptions } ); - this.setTypographyOptions( typographySelectOptions ); - } - componentDidUpdate( prevProps ) { - if ( this.props.fontFamily !== prevProps.fontFamily ) { - this.setTypographyOptions( this.state.typographySelectOptions ); - } - } - setTypographyOptions( typographySelectOptions ) { - let standardWeights = [ - { value: 'inherit', label: __( 'Inherit', 'kadence-blocks' ) }, - { value: '400', label: __( 'Normal', 'kadence-blocks' ) }, - { value: 'bold', label: __( 'Bold', 'kadence-blocks' ) }, - ]; - const systemWeights = [ - { value: 'inherit', label: __( 'Inherit', 'kadence-blocks' ) }, - { value: '100', label: __( 'Thin 100', 'kadence-blocks' ) }, - { value: '200', label: __( 'Extra-Light 200', 'kadence-blocks' ) }, - { value: '300', label: __( 'Light 300', 'kadence-blocks' ) }, - { value: '400', label: __( 'Regular', 'kadence-blocks' ) }, - { value: '500', label: __( 'Medium 500', 'kadence-blocks' ) }, - { value: '600', label: __( 'Semi-Bold 600', 'kadence-blocks' ) }, - { value: '700', label: __( 'Bold 700', 'kadence-blocks' ) }, - { value: '800', label: __( 'Extra-Bold 800', 'kadence-blocks' ) }, - { value: '900', label: __( 'Ultra-Bold 900', 'kadence-blocks' ) }, - ]; - const isKadenceT = ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.isKadenceT ? true : false ); - const headingWeights = ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.headingWeights ? kadence_blocks_params.headingWeights : [] ); - const bodyWeights = ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.bodyWeights ? kadence_blocks_params.bodyWeights : [] ); - const buttonWeights = ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.buttonWeights ? kadence_blocks_params.buttonWeights : [] ); - if ( isKadenceT && this.props.fontGroup === 'heading' && headingWeights && Array.isArray( headingWeights ) && headingWeights.length ) { - standardWeights = headingWeights; - } - if ( isKadenceT && this.props.fontGroup === 'body' && bodyWeights && Array.isArray( bodyWeights ) && bodyWeights.length ) { - standardWeights = bodyWeights; - } - if ( isKadenceT && this.props.fontGroup === 'button' && buttonWeights && Array.isArray( buttonWeights ) && buttonWeights.length ) { - standardWeights = buttonWeights; - } - const standardStyles = [ - { value: 'normal', label: __( 'Normal', 'kadence-blocks' ) }, - { value: 'italic', label: __( 'Italic', 'kadence-blocks' ) }, - ]; - const activeFont = ( typographySelectOptions ? typographySelectOptions.filter( ( { value } ) => value === this.props.fontFamily ) : '' ); - let fontStandardWeights = standardWeights; - let fontStandardStyles = standardStyles; - let typographySubsets = ''; - if ( activeFont && activeFont[ 0 ] ) { - if ( undefined !== activeFont[ 0 ].weights ) { - fontStandardWeights = activeFont[ 0 ].weights; - } - if ( undefined !== activeFont[ 0 ].styles ) { - fontStandardStyles = activeFont[ 0 ].styles; - } - } - if ( this.props.fontFamily === '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' ) { - fontStandardWeights = systemWeights; - } else if ( this.props.fontFamily === 'var( --global-heading-font-family, inherit )' ) { - fontStandardWeights = headingWeights; - } else if ( this.props.fontFamily === 'var( --global-body-font-family, inherit )' ) { - fontStandardWeights = bodyWeights; - } else if ( this.props.googleFont && this.props.fontFamily && typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.g_fonts && kadence_blocks_params.g_fonts[ this.props.fontFamily ] ) { - fontStandardWeights = kadence_blocks_params.g_fonts[ this.props.fontFamily ].w.map( opt => ( { label: capitalizeFirstLetter( opt ), value: opt } ) ); - fontStandardStyles = kadence_blocks_params.g_fonts[ this.props.fontFamily ].i.map( opt => ( { label: capitalizeFirstLetter( opt ), value: opt } ) ); - typographySubsets = kadence_blocks_params.g_fonts[ this.props.fontFamily ].s.map( opt => ( { label: capitalizeFirstLetter( opt ), value: opt } ) ); - } - this.setState( { typographyWeights: fontStandardWeights } ); - this.setState( { typographyStyles: fontStandardStyles } ); - this.setState( { typographySubsets: typographySubsets } ); - this.setState( { fontFamilyValue: activeFont } ); - } - render() { - const { tagLevel, - label, - htmlTag = 'heading', - tagLowLevel = 1, - tagHighLevel = 7, - lineHeight, - lineHeightType = '', - fontSize, - fontSizeType = 'px', - googleFont, - loadGoogleFont, - fontFamily, - fontVariant, - fontWeight, - fontStyle, - fontSubset, - letterSpacing, - margin, - marginControl, - padding, - paddingControl, - onTagLevel, - onTagLevelHTML, - onLineHeight, - onFontSize, - onFontFamily, - onFontVariant, - onFontWeight, - onFontStyle, - onFontSubset, - onFontChange, - onFontArrayChange, - onLoadGoogleFont, - onGoogleFont, - onLetterSpacing, - onFontSizeType, - onLineHeightType, - onPadding, - onPaddingControl, - onMargin, - onMarginControl, - loadItalic, - onLoadItalic, - textTransform, - onTextTransform, - reLetterSpacing = false, - letterSpacingType = 'px', - otherTags = [], - onLetterSpacingType, - reset, - defaultValue = { - size: [ '', '', '' ], - sizeType: 'px', - lineHeight: [ '', '', '' ], - lineType: 'px', - letterSpacing: [ '', '', '' ], - letterType: 'px', - textTransform: '', - family: '', - google: false, - style: '', - weight: '', - variant: '', - subset: '', - loadGoogle: true, - } - } = this.props; - const { controlSize, typographySelectOptions, typographyOptions, typographySubsets, typographyStyles, typographyWeights, fontFamilyValue } = this.state; - const createhtmlTagControl = ( targetLevel ) => { - return [ { - icon: , - title: sprintf( - /* translators: %d: heading level e.g: "1", "2", "3" */ - __( 'Heading %d', 'kadence-blocks' ), - targetLevel - ), - isActive: ( targetLevel === tagLevel && htmlTag && htmlTag === 'heading' ? true : false ), - onClick: () => onTagLevelHTML( targetLevel, 'heading' ), - } ]; - }; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - onFontArrayChange( defaultValue ); - } - } - const currentValue = { - size: fontSize, - sizeType: fontSizeType, - lineHeight: lineHeight, - lineType: lineHeightType, - letterSpacing: letterSpacing, - letterType: letterSpacingType, - textTransform: textTransform, - family: fontFamily, - google: googleFont, - style: fontStyle, - weight: fontWeight, - variant: fontVariant, - subset: fontSubset, - loadGoogle: loadGoogleFont, - }; - const headingOptions = range( tagLowLevel, tagHighLevel ).map( createhtmlTagControl ); - if ( otherTags.p ) { - headingOptions.push( [ - { - icon: , - title: __( 'Paragraph', 'kadence-blocks' ), - isActive: ( htmlTag && htmlTag === 'p' ? true : false ), - onClick: () => onTagLevelHTML( 2, 'p' ), - }, - ] ); - } - if ( otherTags.span ) { - headingOptions.push( [ - { - icon: , - title: __( 'Span', 'kadence-blocks' ), - isActive: ( htmlTag && htmlTag === 'span' ? true : false ), - onClick: () => onTagLevelHTML( 2, 'span' ), - }, - ] ); - } - if ( otherTags.div ) { - headingOptions.push( [ - { - icon: , - title: __( 'Div', 'kadence-blocks' ), - isActive: ( htmlTag && htmlTag === 'div' ? true : false ), - onClick: () => onTagLevelHTML( 2, 'div' ), - }, - ] ); - } - - const onTypoFontChange = ( select ) => { - if ( select === null ) { - onTypoFontClear(); - } else { - let variant; - let weight; - let subset; - if ( select.google ) { - if ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.g_fonts && ! kadence_blocks_params.g_fonts[ select.value ].v.includes( 'regular' ) ) { - variant = kadence_blocks_params.g_fonts[ select.value ].v[ 0 ]; - } else { - variant = 'regular'; - } - if ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.g_fonts && ! kadence_blocks_params.g_fonts[ select.value ].w.includes( 'regular' ) ) { - weight = kadence_blocks_params.g_fonts[ select.value ].w[ 0 ]; - } else { - weight = '400'; - } - if ( typeof kadence_blocks_params !== 'undefined' && kadence_blocks_params.g_fonts && kadence_blocks_params.g_fonts[ select.value ].s.length > 1 ) { - subset = 'latin'; - } else { - subset = ''; - } - } else { - subset = ''; - variant = ''; - weight = undefined !== select.weights?.[0]?.value ? select.weights[0].value : 'inherit'; - } - if ( onFontArrayChange ) { - onFontArrayChange( { google: select.google, family: select.value, variant: variant, weight: weight, style: 'normal', subset: subset } ); - } else { - onFontChange( select ); - onFontVariant( variant ); - onFontWeight( weight ); - onFontStyle( 'normal' ); - onFontSubset( subset ); - } - } - }; - const onTypoFontClear = () => { - if ( onFontArrayChange ) { - onFontArrayChange( { google: false, family: '', variant: '', weight: 'inherit', style: 'normal', subset: '' } ); - } else { - onGoogleFont( false ); - onFontFamily( '' ); - onFontVariant( '' ); - onFontWeight( 'inherit' ); - onFontStyle( 'normal' ); - onFontSubset( '' ); - } - }; - const onTypoFontWeightChange = ( select ) => { - if ( googleFont ) { - let variant; - if ( 'italic' === fontStyle ) { - if ( 'regular' === select ) { - variant = 'italic'; - } else { - variant = select + 'italic'; - } - } else { - variant = select; - } - if ( onFontArrayChange ) { - onFontArrayChange( { variant: variant, weight: ( 'regular' === select ? '400' : select ) } ); - } else { - onFontVariant( variant ); - onFontWeight( ( 'regular' === select ? '400' : select ) ); - } - } else if ( onFontArrayChange ) { - onFontArrayChange( { variant: '', weight: ( 'regular' === select ? '400' : select ) } ); - } else { - onFontVariant( '' ); - onFontWeight( ( 'regular' === select ? '400' : select ) ); - } - }; - const onTypoFontStyleChange = ( select ) => { - if ( googleFont ) { - let variant; - if ( 'italic' === select ) { - if ( ! fontWeight || 'regular' === fontWeight ) { - variant = 'italic'; - } else { - variant = fontWeight + 'italic'; - } - } else { - variant = ( fontWeight ? fontWeight : 'regular' ); - } - if ( onFontArrayChange ) { - onFontArrayChange( { variant: variant, style: select } ); - } else { - onFontVariant( variant ); - onFontStyle( select ); - } - } else if ( onFontArrayChange ) { - onFontArrayChange( { variant: '', style: select } ); - } else { - onFontVariant( '' ); - onFontStyle( select ); - } - }; - const createLevelControl = ( targetLevel ) => { - return [ { - icon: , - title: sprintf( - /* translators: %d: heading level e.g: "1", "2", "3" */ - __( 'Heading %d', 'kadence-blocks' ), - targetLevel - ), - isActive: targetLevel === tagLevel, - onClick: () => onTagLevel( targetLevel ), - } ]; - }; - const textTransformOptions = [ - { value: 'none', label: __( '-', 'kadence-blocks' ), tooltip: __( 'None', 'kadence-blocks' ) }, - { value: 'uppercase', label: __( 'AB', 'kadence-blocks' ), tooltip: __( 'Uppercase', 'kadence-blocks' ) }, - { value: 'lowercase', label: __( 'ab', 'kadence-blocks' ), tooltip: __( 'Lowercase', 'kadence-blocks' ) }, - { value: 'capitalize', label: __( 'Ab', 'kadence-blocks' ), tooltip: __( 'Capitalize', 'kadence-blocks' ) }, - ]; - const fontMin = ( fontSizeType !== 'px' ? 0.2 : 5 ); - const fontMax = ( fontSizeType !== 'px' ? 120 : 3000 ); - const fontStep = ( fontSizeType !== 'px' ? 0.001 : 1 ); - const lineMin = ( lineHeightType !== 'px' ? 0.2 : 5 ); - const lineMax = ( lineHeightType !== 'px' ? 120 : 3000 ); - const lineStep = ( lineHeightType !== 'px' ? 0.001 : 1 ); - const usingReg = typographyWeights.some(function(el) { - return el.value === 'regular'; - }); - - return ( - <> -
- { label && ( -
- -
- ) } -
- { label && ( -

{ label }

- // { label } - ) } - { reset && ( - - ) } -
- { onTagLevel && ( - <> - { onTagLevelHTML && ( - { - if ( 'div' === value || 'p' === value || 'span' === value ) { - onTagLevelHTML( 2, value ); - } else { - onTagLevelHTML( value, 'heading' ); - } - } } - /> - ) } - { ! onTagLevelHTML && ( - { - onTagLevel( value); - } } - /> - ) } - - ) } - { onFontSize && onFontSizeType && ( - onFontSize( [ value, ( fontSize && undefined !== fontSize[ 1 ] ? fontSize[ 1 ] : '' ), ( fontSize && undefined !== fontSize[ 2 ] ? fontSize[ 2 ] : '' ) ] ) } - tabletValue={ ( fontSize && undefined !== fontSize[ 1 ] ? fontSize[ 1 ] : '' ) } - onChangeTablet={ ( value ) => onFontSize( [ ( fontSize && undefined !== fontSize[ 0 ] ? fontSize[ 0 ] : '' ), value, ( fontSize && undefined !== fontSize[ 2 ] ? fontSize[ 2 ] : '' ) ] ) } - mobileValue={ ( fontSize && undefined !== fontSize[ 2 ] ? fontSize[ 2 ] : '' ) } - onChangeMobile={ ( value ) => onFontSize( [ ( fontSize && undefined !== fontSize[ 0 ] ? fontSize[ 0 ] : '' ), ( fontSize && undefined !== fontSize[ 1 ] ? fontSize[ 1 ] : '' ), value ] ) } - min={ 0 } - max={ fontMax } - step={ fontStep } - unit={ ( fontSizeType ? fontSizeType : 'px' ) } - onUnit={ ( value ) => onFontSizeType( value ) } - units={[ 'px', 'em', 'rem', 'vw' ]} - /> - ) } - { ! onTextTransform && onLineHeight && onLineHeightType && ( - onLineHeight( [ value, ( lineHeight && undefined !== lineHeight[ 1 ] ? lineHeight[ 1 ] : '' ), ( lineHeight && undefined !== lineHeight[ 2 ] ? lineHeight[ 2 ] : '' ) ] ) } - tabletValue={ ( lineHeight && undefined !== lineHeight[ 1 ] ? lineHeight[ 1 ] : '' ) } - onChangeTablet={ ( value ) => onLineHeight( [ ( lineHeight && undefined !== lineHeight[ 0 ] ? lineHeight[ 0 ] : '' ), value, ( lineHeight && undefined !== lineHeight[ 2 ] ? lineHeight[ 2 ] : '' ) ] ) } - mobileValue={ ( lineHeight && undefined !== lineHeight[ 2 ] ? lineHeight[ 2 ] : '' ) } - onChangeMobile={ ( value ) => onLineHeight( [ ( lineHeight && undefined !== lineHeight[ 0 ] ? lineHeight[ 0 ] : '' ), ( lineHeight && undefined !== lineHeight[ 1 ] ? lineHeight[ 1 ] : '' ), value ] ) } - min={ lineMin } - max={ lineMax } - step={ lineStep } - unit={ ( lineHeightType ? lineHeightType : '-' ) } - onUnit={ ( value ) => onLineHeightType( value ) } - units={ [ '-', 'px', 'em', 'rem' ] } - /> - )} - { onTextTransform && onLineHeight && onLineHeightType && ( - - onLineHeight( [ value, ( lineHeight && undefined !== lineHeight[ 1 ] ? lineHeight[ 1 ] : '' ), ( lineHeight && undefined !== lineHeight[ 2 ] ? lineHeight[ 2 ] : '' ) ] ) } - tabletValue={ ( lineHeight && undefined !== lineHeight[ 1 ] ? lineHeight[ 1 ] : '' ) } - onChangeTablet={ ( value ) => onLineHeight( [ ( lineHeight && undefined !== lineHeight[ 0 ] ? lineHeight[ 0 ] : '' ), value, ( lineHeight && undefined !== lineHeight[ 2 ] ? lineHeight[ 2 ] : '' ) ] ) } - mobileValue={ ( lineHeight && undefined !== lineHeight[ 2 ] ? lineHeight[ 2 ] : '' ) } - onChangeMobile={ ( value ) => onLineHeight( [ ( lineHeight && undefined !== lineHeight[ 0 ] ? lineHeight[ 0 ] : '' ), ( lineHeight && undefined !== lineHeight[ 1 ] ? lineHeight[ 1 ] : '' ), value ] ) } - min={ lineMin } - max={ lineMax } - step={ lineStep } - unit={ ( lineHeightType ? lineHeightType : '-' ) } - onUnit={ ( value ) => onLineHeightType( value ) } - units={ [ '-', 'px', 'em', 'rem' ] } - compressedDevice={ true } - /> - onTextTransform( value ) } - /> - - )} - { onTextTransform && ( ! onLineHeight || ! onLineHeightType ) && ( - onTextTransform( value ) } - /> - )} - { onFontFamily && onTypoFontClear && ( - <> -
-
- -
-
- { - if ( '-' === event.target.value ) { - onUnit( '' ); - } else { - onUnit( event.target.value ); - } - } } - value={ unit } - disabled={ preventUnitSelection ? true : false } - > - { units.map( ( option ) => ( - !preventUnitSelection - ? - - : - unit === option && - - ) ) } - -
-
-
- ), - ]; -} diff --git a/src/packages/components/src/unit/responsive.js b/src/packages/components/src/unit/responsive.js deleted file mode 100644 index a8536bddf..000000000 --- a/src/packages/components/src/unit/responsive.js +++ /dev/null @@ -1,202 +0,0 @@ -/** - * Responsive Range Component - * - */ - -/** - * Internal block libraries - */ - import { useSelect, useDispatch } from '@wordpress/data'; - import { useState, useRef } from '@wordpress/element'; - import { __ } from '@wordpress/i18n'; - import { map, isEqual } from 'lodash'; - import UnitControl from './index'; - import { capitalizeFirstLetter } from '@kadence/helpers'; - import { undo } from '@wordpress/icons'; - import { - Dashicon, - Button, - ButtonGroup, - DropdownMenu, - } from '@wordpress/components'; - /** - * Build the Measure controls - * @returns {object} Measure settings. - */ - export default function ResponsiveUnitControl( { - label, - onChange, - onChangeTablet, - onChangeMobile, - mobileValue, - tabletValue, - value, - units = [ 'px', 'em', 'rem' ], - onUnit, - step = 1, - max = 200, - min = 0, - unit = '', - defaultValue = [ '', '', '' ], - compressedDevice = false, - reset = true, - } ) { - const ref = useRef(); - const [ deviceType, setDeviceType ] = useState( 'Desktop' ); - const theDevice = useSelect( ( select ) => { - return select( 'kadenceblocks/data' ).getPreviewDeviceType(); - }, [] ); - if ( theDevice !== deviceType ) { - setDeviceType( theDevice ); - } - const { - setPreviewDeviceType, - } = useDispatch( 'kadenceblocks/data' ); - const customSetPreviewDeviceType = ( device ) => { - setPreviewDeviceType( capitalizeFirstLetter( device ) ); - setDeviceType( capitalizeFirstLetter( device ) ); - }; - const devices = [ - { - name: 'Desktop', - title: , - itemClass: 'kb-desk-tab', - }, - { - name: 'Tablet', - title: , - itemClass: 'kb-tablet-tab', - }, - { - name: 'Mobile', - key: 'mobile', - title: , - itemClass: 'kb-mobile-tab', - }, - ]; - const icons = { - Desktop: , - Tablet: , - Mobile: , - } - const createLevelControlToolbar = ( mappedDevice ) => { - return [ { - title: mappedDevice.name, - icon: mappedDevice.title, - isActive: deviceType === mappedDevice.name, - onClick: () => { - customSetPreviewDeviceType( mappedDevice.name ); - }, - } ]; - }; - const currentValue = [ value, tabletValue, mobileValue ]; - const onReset = () => { - if ( typeof reset === 'function' ){ - reset(); - } else { - if ( deviceType === 'Mobile' ) { - onChangeMobile( defaultValue[2] ); - } else if ( deviceType === 'Tablet' ) { - onChangeTablet( defaultValue[1] ); - } else { - onChange( defaultValue[0] ); - } - } - } - const output = {}; - output.Mobile = ( - onChangeMobile( size ) } - onUnit={ onUnit } - defaultValue={ defaultValue[2] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - preventUnitSelection={ true } - /> - ); - output.Tablet = ( - onChangeTablet( size ) } - onUnit={ onUnit } - defaultValue={ defaultValue[1] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - preventUnitSelection={ true } - /> - ); - output.Desktop = ( - onChange( size ) } - onUnit={ onUnit } - defaultValue={ defaultValue[0] } - units={ units } - step={ step } - max={ max } - min={ min } - unit={ unit } - /> - ); - return [ - onChange && onChangeTablet && onChangeMobile && ( -
-
- { label && ( -
- - { reset && ( -
-
- ) } -
- ) } - { ! compressedDevice && ( - - { map( devices, ( { name, key, title, itemClass } ) => ( - - ) ) } - - )} - { compressedDevice && ( - createLevelControlToolbar( singleDevice ) ) } - /> - ) } -
-
- { ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) } -
-
- ), - ]; - } - \ No newline at end of file diff --git a/src/packages/components/src/visualizer/block-popover.js b/src/packages/components/src/visualizer/block-popover.js deleted file mode 100644 index d2e09d8dd..000000000 --- a/src/packages/components/src/visualizer/block-popover.js +++ /dev/null @@ -1,199 +0,0 @@ -/** - * External dependencies - */ - import classnames from 'classnames'; - - /** - * WordPress dependencies - */ - import { useMergeRefs, useRefEffect } from '@wordpress/compose'; - import { Popover } from '@wordpress/components'; - import { - useContext, - createContext, - forwardRef, - useMemo, - useReducer, - useState, - useLayoutEffect, - useRef, - } from '@wordpress/element'; - export const BlockRefs = createContext( { - refs: new Map(), - callbacks: new Map(), -} ); -/** - * Allow scrolling "through" popovers over the canvas. This is only called for - * as long as the pointer is over a popover. Do not use React events because it - * will bubble through portals. - * - * @param {Object} scrollableRef - */ - function usePopoverScroll( scrollableRef ) { - return useRefEffect( - ( node ) => { - if ( ! scrollableRef ) { - return; - } - - function onWheel( event ) { - const { deltaX, deltaY } = event; - scrollableRef.current.scrollBy( deltaX, deltaY ); - } - // Tell the browser that we do not call event.preventDefault - // See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners - const options = { passive: true }; - node.addEventListener( 'wheel', onWheel, options ); - return () => { - node.removeEventListener( 'wheel', onWheel, options ); - }; - }, - [ scrollableRef ] - ); -} - - const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER; - - function BlockPopover( - { - selectedElementRef, - children, - __unstableRefreshSize, - __unstableCoverTarget = false, - __unstablePopoverSlot, - __unstableContentRef, - shift = true, - ...props - }, - ref - ) { - const selectedElement = selectedElementRef.current; - const mergedRefs = useMergeRefs( [ - ref, - usePopoverScroll( __unstableContentRef ), - ] ); - - const [ - popoverDimensionsRecomputeCounter, - forceRecomputePopoverDimensions, - ] = useReducer( - // Module is there to make sure that the counter doesn't overflow. - ( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER, - 0 - ); - - // When blocks are moved up/down, they are animated to their new position by - // updating the `transform` property manually (i.e. without using CSS - // transitions or animations). The animation, which can also scroll the block - // editor, can sometimes cause the position of the Popover to get out of sync. - // A MutationObserver is therefore used to make sure that changes to the - // selectedElement's attribute (i.e. `transform`) can be tracked and used to - // trigger the Popover to rerender. - useLayoutEffect( () => { - if ( ! selectedElement ) { - return; - } - - const observer = new window.MutationObserver( - forceRecomputePopoverDimensions - ); - observer.observe( selectedElement, { attributes: true } ); - - return () => { - observer.disconnect(); - }; - }, [ selectedElement ] ); - - const style = useMemo( () => { - if ( - // popoverDimensionsRecomputeCounter is by definition always equal or greater - // than 0. This check is only there to satisfy the correctness of the - // exhaustive-deps rule for the `useMemo` hook. - popoverDimensionsRecomputeCounter < 0 || - ! selectedElement - ) { - return {}; - } - - return { - position: 'absolute', - width: selectedElement.offsetWidth, - height: selectedElement.offsetHeight, - }; - }, [ - selectedElement, - __unstableRefreshSize, - popoverDimensionsRecomputeCounter, - ] ); - - const popoverAnchor = useMemo( () => { - if ( - // popoverDimensionsRecomputeCounter is by definition always equal or greater - // than 0. This check is only there to satisfy the correctness of the - // exhaustive-deps rule for the `useMemo` hook. - popoverDimensionsRecomputeCounter < 0 || - ! selectedElement - ) { - return undefined; - } - - return { - getBoundingClientRect() { - const selectedBCR = selectedElement.getBoundingClientRect(); - - // Get the biggest rectangle that encompasses completely the currently - // selected element and the last selected element: - // - for top/left coordinates, use the smaller numbers - // - for the bottom/right coordinates, use the largest numbers - const left = Math.min( - selectedBCR.left ?? Infinity - ); - const top = Math.min( - selectedBCR.top ?? Infinity - ); - const right = Math.max( - selectedBCR.right ?? -Infinity - ); - const bottom = Math.max( - selectedBCR.bottom ?? -Infinity - ); - const width = right - left; - const height = bottom - top; - - return new window.DOMRect( left, top, width, height ); - }, - ownerDocument: selectedElement.ownerDocument, - }; - }, [ - selectedElement, - popoverDimensionsRecomputeCounter, - ] ); - if ( ! selectedElement ) { - return null; - } - return ( - - { __unstableCoverTarget &&
{ children }
} - { ! __unstableCoverTarget && children } - - ); - } - - export default forwardRef( BlockPopover ); \ No newline at end of file diff --git a/src/packages/components/src/visualizer/editor.scss b/src/packages/components/src/visualizer/editor.scss deleted file mode 100644 index 741e27043..000000000 --- a/src/packages/components/src/visualizer/editor.scss +++ /dev/null @@ -1,23 +0,0 @@ -.kb__spacing-visualizer { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: 0 auto; - pointer-events: none; - box-sizing: border-box; -} -.kb__spacing-visualizer { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - opacity: 0.5; - border-color: var(--wp-admin-theme-color); - border-color: #bee4ae; - border-style: solid; - pointer-events: none; - box-sizing: border-box; -} \ No newline at end of file diff --git a/src/packages/components/src/visualizer/spacing.js b/src/packages/components/src/visualizer/spacing.js deleted file mode 100644 index 4a27c3243..000000000 --- a/src/packages/components/src/visualizer/spacing.js +++ /dev/null @@ -1,136 +0,0 @@ -/** - * WordPress dependencies - */ - import { __ } from '@wordpress/i18n'; - import { - useState, - useRef, - useEffect, - useMemo, - } from '@wordpress/element'; - import { isShallowEqualArrays } from '@wordpress/is-shallow-equal'; -/** - * Import Css - */ - import './editor.scss'; - -export default function SpacingVisualizer( { style, type = 'inside', spacing, forceShow = false, forceHide = false, offset= true } ) { - const outputSpacing = { - top: spacing[0], - right: spacing[1], - bottom: spacing[2], - left: spacing[3], - } - const outputStyling = useMemo( () => { - - if ( type === 'outside' ) { - const spacingTop = outputSpacing?.top - ? outputSpacing?.top - : 0; - const spacingRight = outputSpacing?.right - ? outputSpacing?.right - : 0; - const spacingBottom = outputSpacing?.bottom - ? outputSpacing?.bottom - : 0; - const spacingLeft = outputSpacing?.left - ? outputSpacing?.left - : 0; - - return { - borderTopWidth: spacingTop, - borderRightWidth: spacingRight, - borderBottomWidth: spacingBottom, - borderLeftWidth: spacingLeft, - top: offset && spacingTop ? `calc(${ spacingTop } * -1)` : 0, - right: offset && spacingRight ? `calc(${ spacingRight } * -1)` : 0, - bottom: offset && spacingBottom ? `calc(${ spacingBottom } * -1)` : 0, - left: offset && spacingLeft ? `calc(${ spacingLeft } * -1)` : 0, - }; - } else if ( type === 'outsideVertical' ) { - const spacingTop = outputSpacing?.top - ? outputSpacing?.top - : 0; - const spacingRight = outputSpacing?.right - ? outputSpacing?.right - : 0; - const spacingBottom = outputSpacing?.bottom - ? outputSpacing?.bottom - : 0; - const spacingLeft = outputSpacing?.left - ? outputSpacing?.left - : 0; - - return { - borderTopWidth: spacingTop, - borderRightWidth: spacingRight, - borderBottomWidth: spacingBottom, - borderLeftWidth: spacingLeft, - top: offset && spacingTop ? `calc(${ spacingTop } * -1)` : 0, - //right: offset && spacingRight ? `calc(${ spacingRight } * -1)` : 0, - bottom: offset && spacingBottom ? `calc(${ spacingBottom } * -1)` : 0, - //left: offset && spacingLeft ? `calc(${ spacingLeft } * -1)` : 0, - }; - } else { - return { - borderTopWidth: outputSpacing?.top - ? outputSpacing?.top - : 0, - borderRightWidth: outputSpacing?.right - ? outputSpacing?.right - : 0, - borderBottomWidth: outputSpacing?.bottom - ? outputSpacing?.bottom - : 0, - borderLeftWidth: outputSpacing?.left - ? outputSpacing?.left - : 0, - marginLeft: style?.marginLeft - ? style.marginLeft - : 0, - marginRight: style?.marginRight - ? style.marginRight - : 0, - }; - } - }, [ spacing ] ); - - const [ isActive, setIsActive ] = useState( false ); - const valueRef = useRef( spacing ); - const timeoutRef = useRef(); - - const clearTimer = () => { - if ( timeoutRef.current ) { - window.clearTimeout( timeoutRef.current ); - } - }; - useMemo( () => { - if ( forceHide ) { - valueRef.current = spacing; - } - if ( ! isShallowEqualArrays( spacing, valueRef.current ) && ! forceShow && ! forceHide ) { - setIsActive( true ); - valueRef.current = spacing; - - clearTimer(); - timeoutRef.current = setTimeout( () => { - setIsActive( false ); - }, 400 ); - } - - return () => clearTimer(); - }, [ spacing, forceShow, forceHide ] ); - - if ( ( ! isActive && ! forceShow ) || forceHide ) { - return null; - } - - return ( -
-
-
- ); -} \ No newline at end of file diff --git a/src/packages/components/src/web-font-loader/index.js b/src/packages/components/src/web-font-loader/index.js deleted file mode 100644 index 37b73212c..000000000 --- a/src/packages/components/src/web-font-loader/index.js +++ /dev/null @@ -1,106 +0,0 @@ -if ( ktgooglefonts === undefined ) { - var ktgooglefonts = []; -} -import { Component } from '@wordpress/element'; -import PropTypes from "prop-types"; -import WebFont from "webfontloader"; -import { withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; -const statuses = { - inactive: 'inactive', - active: 'active', - loading: 'loading', -}; - -const noop = () => {}; - -class WebfontLoader extends Component { - constructor() { - super( ...arguments ); - this.handleLoading = this.handleLoading.bind( this ); - this.handleActive = this.handleActive.bind( this ); - this.handleInactive = this.handleInactive.bind( this ); - this.loadFonts = this.loadFonts.bind( this ); - this.state = { - status: undefined, - mounted: false, - }; - } - addFont( font ) { - if ( ! ktgooglefonts.includes( font ) ) { - ktgooglefonts.push( font ); - } - } - handleLoading() { - this.setState( { status: statuses.loading } ); - } - - handleActive() { - this.setState( { status: statuses.active } ); - } - - handleInactive() { - this.setState( { status: statuses.inactive } ); - } - - loadFonts() { - if ( this.state.mounted ) { - if ( ! ktgooglefonts.includes( this.props.config.google.families[ 0 ] ) ) { - WebFont.load( { - ...this.props.config, - loading: this.handleLoading, - active: this.handleActive, - inactive: this.handleInactive, - context: frames['editor-canvas'], - } ); - this.addFont( this.props.config.google.families[ 0 ] ); - } - } - } - - componentDidMount() { - ktgooglefonts = []; - this.setState( { mounted: true, device: this.props.getPreviewDevice } ); - this.loadFonts(); - } - - componentDidUpdate( prevProps, prevState ) { - const { onStatus, config, getPreviewDevice } = this.props; - - if ( prevState.status !== this.state.status ) { - onStatus( this.state.status ); - } - if ( this.state.device !== getPreviewDevice ) { - ktgooglefonts = []; - this.setState( { device: getPreviewDevice } ); - this.loadFonts(); - } else if ( prevProps.config !== config ) { - this.loadFonts(); - } - } - componentWillUnmount() { - this.setState( { mounted: false } ); - } - render() { - const { children } = this.props; - return children || null; - } -} - -WebfontLoader.propTypes = { - config: PropTypes.object.isRequired, - children: PropTypes.element, - onStatus: PropTypes.func.isRequired, -}; - -WebfontLoader.defaultProps = { - onStatus: noop, -}; - -export default compose( [ - withSelect( ( select ) => { - return { - getPreviewDevice: select( 'kadenceblocks/data' ).getPreviewDeviceType(), - }; - } ), -] )( WebfontLoader ); From 9d64e8f4823d2263b05831e8abc79b02925bc723 Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 13:23:15 -0500 Subject: [PATCH 07/10] KAD-3233 Use components from repo --- .gitmodules | 3 +++ package.json | 1 + src/packages/components | 1 + 3 files changed, 5 insertions(+) create mode 160000 src/packages/components diff --git a/.gitmodules b/.gitmodules index 99f9f7400..9af6c4992 100644 --- a/.gitmodules +++ b/.gitmodules @@ -4,3 +4,6 @@ [submodule "src/packages/icons"] path = src/packages/icons url = https://github.com/stellarwp/kadence-icons/ +[submodule "src/packages/components"] + path = src/packages/components + url = https://github.com/stellarwp/kadence-components/ diff --git a/package.json b/package.json index 1477a14c5..12111cfee 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@dr-kobros/react-webfont-loader": "^8.0.0", "@floating-ui/react": "^0.26.16", "@hcaptcha/react-hcaptcha": "^1.8.1", + "@kadence/components": "file:src/packages/components", "@kadence/helpers": "file:src/packages/helpers", "@kadence/icons": "file:src/packages/icons", "@react-google-maps/api": "^2.12.0", diff --git a/src/packages/components b/src/packages/components new file mode 160000 index 000000000..2d22ee960 --- /dev/null +++ b/src/packages/components @@ -0,0 +1 @@ +Subproject commit 2d22ee96043e310a7d57703d08ffdd62bb97235e From af3f5ef5cf9276d527773258b2b1ee2292e34f27 Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 13:40:46 -0500 Subject: [PATCH 08/10] KAD-3233 Use repo based packages --- package-lock.json | 70 +++++++++++++++++++++++++++++++++++++++++------ webpack.config.js | 12 -------- 2 files changed, 62 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c16ed610..c962500ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "requires": true, "packages": { "": { - "name": "kadence-blocks", "version": "1.1.0", "dependencies": { "@algolia/autocomplete-js": "^1.10.0", @@ -13,6 +12,9 @@ "@dr-kobros/react-webfont-loader": "^8.0.0", "@floating-ui/react": "^0.26.16", "@hcaptcha/react-hcaptcha": "^1.8.1", + "@kadence/components": "file:src/packages/components", + "@kadence/helpers": "file:src/packages/helpers", + "@kadence/icons": "file:src/packages/icons", "@react-google-maps/api": "^2.12.0", "@splidejs/react-splide": "^0.7.12", "@wordpress/icons": "^9.25.0", @@ -3368,6 +3370,18 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@kadence/components": { + "resolved": "src/packages/components", + "link": true + }, + "node_modules/@kadence/helpers": { + "resolved": "src/packages/helpers", + "link": true + }, + "node_modules/@kadence/icons": { + "resolved": "src/packages/icons", + "link": true + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -6706,6 +6720,8 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -6721,7 +6737,9 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/ajv-keywords": { "version": "3.5.2", @@ -25238,6 +25256,25 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "src/packages/components": { + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "@kadence/helpers": "file:../helpers", + "@kadence/icons": "file:../icons" + } + }, + "src/packages/helpers": { + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "@kadence/icons": "file:../icons" + } + }, + "src/packages/icons": { + "version": "1.0.1", + "license": "ISC" } }, "dependencies": { @@ -27660,6 +27697,22 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@kadence/components": { + "version": "file:src/packages/components", + "requires": { + "@kadence/helpers": "file:../helpers", + "@kadence/icons": "file:../icons" + } + }, + "@kadence/helpers": { + "version": "file:src/packages/helpers", + "requires": { + "@kadence/icons": "file:../icons" + } + }, + "@kadence/icons": { + "version": "file:src/packages/icons" + }, "@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -30050,15 +30103,14 @@ "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", "dev": true, - "requires": { - "ajv": "^8.0.0" - }, + "requires": {}, "dependencies": { "ajv": { - "version": "8.11.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", + "version": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", "dev": true, + "optional": true, + "peer": true, "requires": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -30070,7 +30122,9 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "dev": true, + "optional": true, + "peer": true } } }, diff --git a/webpack.config.js b/webpack.config.js index c8d807e90..920b4a4f2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,9 +12,6 @@ function camelCaseDash(string) { module.exports = { ...defaultConfig, entry: { - icons: './src/packages/icons/src/index.js', - components: './src/packages/components/src/index.js', - helpers: './src/packages/helpers/src/index.js', 'blocks-googlemaps': './src/blocks/googlemaps/block.js', 'blocks-lottie': './src/blocks/lottie/index.js', 'blocks-image': './src/blocks/image/index.js', @@ -63,15 +60,6 @@ module.exports = { if (request.endsWith('.css')) { return false; } - - if (request.startsWith(PROJECT_NAMESPACE)) { - return [EXTERNAL_NAME, camelCaseDash(request.substring(PROJECT_NAMESPACE.length))]; - } - }, - requestToHandle(request) { - if (request.startsWith(PROJECT_NAMESPACE)) { - return `${HANDLE_NAME}-${request.substring(PROJECT_NAMESPACE.length)}`; - } }, }), ], From c60fce068c0d12142cb2b92fccf1a17f8d643b0b Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Wed, 14 Aug 2024 13:44:59 -0500 Subject: [PATCH 09/10] KAD-3233 Use repo based packages Checkout submodules Update tests.yml Update package-lock.json Testing with npm Testing with bun Update components Update components Update components Update package-lock.json Add workspace Delete bun.lockb Create bun.lockb Update tests.yml Update lock Optimization Update package lock npmrc Icon does not exist and is not referenced --- .distignore | 1 + .github/workflows/tests.yml | 6 +- .npmrc | 1 + includes/assets/js/splide.min.js | 2 +- package-lock.json | 31180 +++++++----------- package.json | 4 + src/extension/image-picker/constants/API.js | 3 - src/packages/components | 2 +- src/packages/icons | 2 +- webpack.config.js | 10 +- 10 files changed, 11738 insertions(+), 19473 deletions(-) create mode 100644 .npmrc diff --git a/.distignore b/.distignore index f442d93e4..bab791b59 100644 --- a/.distignore +++ b/.distignore @@ -11,6 +11,7 @@ .eslintignore .eslintrc.js .prettierrc.js +.npmrc composer.json composer.lock gulpfile.js diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index ba3f99cfa..cd9c01bbb 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -28,16 +28,18 @@ jobs: steps: - name: Checkout the repository uses: actions/checkout@v4 + with: + submodules: 'true' - name: Checkout slic uses: actions/checkout@v4 with: repository: stellarwp/slic - ref: 1.5.4 + ref: 1.7.0 path: slic fetch-depth: 1 - - uses: oven-sh/setup-bun@v1 + - uses: oven-sh/setup-bun@v2 with: bun-version: latest diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..521a9f7c0 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/includes/assets/js/splide.min.js b/includes/assets/js/splide.min.js index f25df27e6..ff8b6727d 100644 --- a/includes/assets/js/splide.min.js +++ b/includes/assets/js/splide.min.js @@ -3,4 +3,4 @@ function r(a,b){for(var c,d=0;da)}function na(a,b){return m(b,function(b){a=a.replace("%s",""+b)}),a}function oa(a){return 10>a?"0"+a:""+a}function pa(){function a(a,b,c){m(a,function(a){a&&m(b,function(b){b.split(" ").forEach(function(b){b=b.split("."),c(a,b[0],b[1])})})})}var b=[];return{bind:function(c,d,f,g){a(c,d,function(a,c,d){var e=("addEventListener"in a),h=e?a.removeEventListener.bind(a,c,f,g):a.removeListener.bind(a,f);e?a.addEventListener(c,f,g):a.addListener(f),b.push([a,c,d,f,h])})},unbind:function(c,d,e){a(c,d,function(a,c,d){b=b.filter(function(b){return!!(b[0]!==a||b[1]!==c||b[2]!==d||e&&b[3]!==e)||(b[4](),!1)})})},dispatch:function(a,b,c){var d;return"function"==typeof CustomEvent?d=new CustomEvent(b,{bubbles:!0,detail:c}):(d=document.createEvent("CustomEvent")).initCustomEvent(b,!0,!1,c),a.dispatchEvent(d),d},destroy:function(){b.forEach(function(a){a[4]()}),G(b)}}}function qa(b){var d=b?b.event.bus:document.createDocumentFragment(),e=pa();return b&&b.event.on("destroy",e.destroy),ea(e,{bus:d,on:function(a,b){e.bind(d,c(a).join(" "),function(a){b.apply(b,p(a.detail)?a.detail:[])})},off:aa(e.unbind,d),emit:function(b){e.dispatch(d,b,a(arguments,1))}})}function Q(b,g,h,i){function j(){if(!q){if(e=b?ya((p()-d)/b,1):1,h&&h(e),1<=e&&(g(),d=p(),i&&++n>=i))return k();m=D(j)}}function k(){q=!0}function l(){m&&cancelAnimationFrame(m),q=!(m=e=0)}var d,m,p=Date.now,e=0,q=!0,n=0;return{start:function(a){a||l(),d=p()-(a?e*b:0),q=!1,m=D(j)},rewind:function(){d=p(),e=0,h&&h(e)},pause:k,cancel:l,set:function(a){b=a},isPaused:function(){return q}}}function ra(a){var b=a;return{set:function(a){b=a},is:function(a){return g(c(a),b)}}}function sa(q,o,r,A){function t(){var a=q.splides.map(function(a){return a=a.splide.Components.Slides.getAt(o),a?a.slide.id:""}).join(" ");P(A,Ra,na(i.slideX,(b?r:o)+1)),P(A,$,a),P(A,"role",p?"button":""),p&&fa(A,Va)}function u(){D||B()}function B(){var a,c,d;D||(a=q.index,(d=C())!==z(A,"is-active")&&(k(A,"is-active",d),P(A,Pa,l&&d||""),G(d?"active":"inactive",x)),d=function(){if(q.is("fade"))return C();var a=S(f.Elements.track),b=S(A),c=g("left",!0),d=g("right",!0);return za(a[c])<=Aa(b[c])&&za(b[d])<=Aa(a[d])}(),c=!d&&(!C()||b),q.state.is([4,5])||P(A,Ta,c||""),P(F(A,s.focusableNodes||""),"tabindex",c?-1:""),p&&P(A,"tabindex",c?-1:0),d!==z(A,"is-visible")&&(k(A,"is-visible",d),G(d?"visible":"hidden",x)),d||document.activeElement!==A||(c=f.Slides.getAt(q.index))&&y(c.slide),k(A,"is-prev",o===a-1),k(A,"is-next",o===a+1))}function C(){var a=q.index;return a===o||s.cloneStatus&&a===r}var D,E=qa(q),n=E.on,G=E.emit,c=E.bind,f=q.Components,a=q.root,s=q.options,l=s.isNavigation,d=s.updateOnMove,i=s.i18n,h=s.pagination,p=s.slideFocus,g=f.Direction.resolve,m=_(A,"style"),v=_(A,Ra),b=-1k.perPage}}},Layout:function(q,t,z){function A(){E=z.direction===Ma,j(s,"maxWidth",ja(z.width)),j(l,I("paddingLeft"),i(!1)),j(l,I("paddingRight"),i(!0)),g(!0)}function g(a){var d=S(s);(a||F.width!==d.width||F.height!==d.height)&&(j(l,"height",function(){var a="";return E&&(W(a=m(),"height or heightRatio is missing."),a="calc("+a+" - "+i(!1)+" - "+i(!0)+")"),a}()),h(I("marginRight"),ja(z.gap)),h("width",z.autoWidth?null:ja(z.fixedWidth)||(E?"":b())),h("height",ja(z.fixedHeight)||(E?z.autoHeight?null:b():m()),!0),F=d,c(Da),G!==(G=D())&&(k(s,qb,G),c("overflow",G)))}function i(a){var b=z.padding,a=I(a?"right":"left");return b&&ja(b[a]||(ba(b)?0:b))||"0px"}function m(){return ja(z.height||S(d).width*z.heightRatio)}function b(){var a=ja(z.gap);return"calc((100%"+(a&&" + "+a)+")/"+(z.perPage||1)+(a&&" - "+a)+")"}function w(){return S(d)[I("width")]}function x(a,b){return a=v(a||0),a?S(a.slide)[I("width")]+(b?0:C()):0}function y(a,b){var c,a=v(a);return a?(a=S(a.slide)[I("right")],c=S(d)[I("left")],Ba(a-c)+(b?0:C())):0}function B(a){return y(q.length-1)-y(0)+x(0,a)}function C(){var a=v(0);return a&&parseFloat(j(a.slide,I("marginRight")))||0}function D(){return q.is(xb)||B(!0)>w()}var E,F,G,H=(f=qa(q)).on,e=f.bind,c=f.emit,f=t.Slides,I=t.Direction.resolve,s=(t=t.Elements).root,l=t.track,d=t.list,v=f.getAt,h=f.style;return{mount:function(){var a,b,d;A(),e(window,"resize load",(a=aa(c,K),d=Q(b||0,a,null,1),function(){d.isPaused()&&d.start()})),H([J,Ca],A),H(K,g)},resize:g,listSize:w,slideSize:x,sliderSize:B,totalSize:y,getPadding:function(a){return parseFloat(j(l,I("padding"+(a?"Right":"Left"))))||0},isOverflow:D}},Clones:function(g,c,i){function f(){if(p(Ca,j),p([J,K],k),h=m()){var d=h,f=a.get().slice(),l=f.length;if(l){for(;f.lengthz.Controller.getEnd(),(0>c||d)&&(a=b(a,d)))}return a}(a),j(h,"transform","translate"+d("X")+"("+c+"px)"),a!==c&&G("sh"))}function b(a,b){var c=a-C(b),d=l();return a-=v(d*(Aa(Ba(c)/d)||1))*(b?1:-1)}function w(){y(A(),!0),D.cancel()}function r(a){for(var b=z.Slides.get(),c=0,d=1/0,f=0;fv(C(!0));return c||a},reposition:o}},Controller:function(j,o,q){function e(){K=h(!0),L=q.perMove,M=q.perPage,I=A();var a=ma(w,0,p?I:K-1);a!==w&&(w=a,P.reposition())}function u(){I!==A()&&t("ei")}function B(a,b){var c=L||(G()?1:M),c=C(w+c*(a?-1:1),w,!(L||G()));return-1===c&&m&&!ka(l(),d(!a),1)?a?0:I:b?c:E(c)}function C(a,b,c){var d;return v()||G()?((d=function(a){if(m&&"move"===q.trimSpace&&a!==w)for(var b=l();b===i(a,!0)&&la(a,0,j.length-1,!q.rewind);)aa||Ia?-(K%M||M):K:a:q.rewind?0>a?I:0:-1:c&&a!==b&&(a=F(z(b)+(a])(\d+)?/)||[],d=e[1],e=e[2],"+"===d||"-"===d?c=C(w+ +(""+d+(+e||1)),w):">"===d?c=e?F(+e):y(!0):"<"===d&&(c=b(!0))):c=g?a:ma(a,0,I)}return c}(a)))&&(c||e!==w)&&(D(e),P.move(a,e,Q,d))},scroll:function(a,b,c,d){o.Scroll.scroll(a,b,c,function(){var a=E(P.toIndex(l()));D(p?ya(a,I):a),d&&d()})},getNext:y,getPrev:b,getAdjacent:B,getEnd:A,setIndex:D,getIndex:function(a){return a?Q:w},toIndex:F,toPage:z,toDest:function(a){return a=P.toIndex(a),m?ma(a,0,I):a},hasFocus:G,isBusy:H}},Arrows:function(j,o,q){function n(){var a=q.arrows;!a||D&&E||(h=d||I("div",f.arrows),D=k(!0),E=k(!1),z=!0,A(h,[D,E]),d||L(h,v)),D&&E&&(ea(F,{prev:D,next:E}),ga(h,a?"":"none"),ca(h,B=eb+"--"+q.direction),a&&(u([U,H,Ca,Fa,"ei"],x),e(E,"click",aa(w,">")),e(D,"click",aa(w,"<")),x(),P([D,E],$,v.id),c("arrows:mounted",D,E))),u(J,b)}function b(){t(),n()}function t(){C.destroy(),ia(h,B),z?(N(d?[D,E]:h),D=E=null):fa([D,E],Za)}function w(a){l.go(a,!0)}function k(a){return T("