diff --git a/src/blocks/_pro/outer/deprecated/save/1.93.0/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.93.0/GenerateBgImage.js deleted file mode 100644 index 53fb7e570..000000000 --- a/src/blocks/_pro/outer/deprecated/save/1.93.0/GenerateBgImage.js +++ /dev/null @@ -1,103 +0,0 @@ -const GenerateBgImage = (props) => { - const { attributes, prefix } = props; - const { bgImageMobile, bgImageTablet, bgImage, bgSize, blockId } = - attributes; - - const mobileViewport = 'max-width: 575.98px'; - const tabletViewport = 'min-width: 576px'; - const pcViewport = 'min-width: 992px'; - const underPcViewport = 'max-width: 992.98px'; - - let backgroundStyle; - const backgroundPosition = 'background-position:center!important;'; - if ('cover' === bgSize) { - backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`; - } else if ('repeat' === bgSize) { - backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`; - } else { - backgroundStyle = ``; - } - - //moible only - if (bgImageMobile && !bgImageTablet && !bgImage) { - return ( - - ); - } - //tablet only - if (!bgImageMobile && bgImageTablet && !bgImage) { - return ( - - ); - } - //pc only - if (!bgImageMobile && !bgImageTablet && bgImage) { - return ( - - ); - } - //pc -mobile - if (bgImageMobile && !bgImageTablet && bgImage) { - return ( - - ); - } - //pc -tablet - if (!bgImageMobile && bgImageTablet && bgImage) { - return ( - - ); - } - //tablet - mobile - if (bgImageMobile && bgImageTablet && !bgImage) { - return ( - - ); - } - //pc -tablet - mobile - if (bgImageMobile && bgImageTablet && bgImage) { - return ( - - ); - } -}; -export default GenerateBgImage; diff --git a/src/blocks/_pro/outer/deprecated/save/1.93.0/component-divider.js b/src/blocks/_pro/outer/deprecated/save/1.93.0/component-divider.js deleted file mode 100644 index f575d975e..000000000 --- a/src/blocks/_pro/outer/deprecated/save/1.93.0/component-divider.js +++ /dev/null @@ -1,390 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import { isHexColor } from '@vkblocks/utils/is-hex-color'; - -const componentDivider = ( - level, - color, - whichSide, - dividerType, - levelSettingPerDevice, - level_mobile, - level_tablet, - level_pc -) => { - let sectionPadding; - let sectionClass; - let lenderDivider; - - const pathClassNames = classnames({ - [`has-text-color`]: color !== undefined, - [`has-${color}-color`]: color !== undefined && !isHexColor(color), - }); - - // eslint-disable-next-line no-shadow - const tiltSectionStyle = (level, color) => { - if (level > 0) { - return ( - - ); - } else if (level < 0) { - const absLevel = Math.abs(level); - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const curveSectionStyle = (level, color) => { - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const waveSectionStyle = (level, color) => { - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const triangleSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - const DivideAbs4 = absLevel / 4; - - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const largeTriangleSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const serratedSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - const baseSerrationCount = 40; - const serrationCount = - level >= 0 - ? baseSerrationCount + Math.floor(absLevel / 5) - : Math.max(baseSerrationCount - Math.floor(absLevel / 5), 5); - const step = 100 / serrationCount; - const height = 10; - - const pathData = Array.from({ length: serrationCount + 1 }) - .map((_, i) => { - const x = i * step; - const y = i % 2 === 0 ? 100 - height : 100; - return `${x},${y}`; - }) - .join(' L '); - - return ( - - ); - }; - - // eslint-disable-next-line no-shadow - const bookSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - let pathData; - - if (level > 0) { - const controlPoint1X = 40; - const controlPoint1Y = 100 - level * 0.1; - const peakX = 50; - const peakY = 100 - level; - const controlPoint2X = 60; - const controlPoint2Y = 100 - level * 0.1; - - pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`; - } else if (level === 0) { - const controlPoint1X = 40; - const controlPoint1Y = 100; - const peakX = 50; - const peakY = 100; - const controlPoint2X = 60; - const controlPoint2Y = 100; - - pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`; - } else { - const controlPoint1X = 40; - const controlPoint1Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; - const peakX = 50; - const peakY = 100; - const controlPoint2X = 60; - const controlPoint2Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; - const startY = absLevel === 100 ? 0 : 100 - absLevel; - - pathData = `M0,${startY} H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,${startY} H100 V100 H0 Z`; - } - - return ( - - ); - }; - - // eslint-disable-next-line no-shadow - const pyramidSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - let pathData; - - if (level < 0) { - const firstPeakX = 25; - const firstPeakY = 100 - absLevel * 0.6; - const dipX = 40; - const dipY = 100 - absLevel * 0.2; - const secondPeakX = 75; - const secondPeakY = 100 - absLevel; - const rightEndY = 100 - absLevel * 0.5; - - pathData = `M0,100 H0 L${firstPeakX},${firstPeakY} ${dipX},${dipY} ${secondPeakX},${secondPeakY} 100,${rightEndY} H100 V100 H0 Z`; - } else if (level === 0) { - pathData = `M0,100 H0 L0,100 35,100 65,100 85,100 100,100 H100 V100 H0 Z`; - } else { - const firstPeakX = 75; - const firstPeakY = 100 - level * 0.6; - const dipX = 60; - const dipY = 100 - level * 0.2; - const secondPeakX = 25; - const secondPeakY = 100 - level; - const leftEndY = 100 - level * 0.5; - - pathData = `M0,${leftEndY} H0 L${secondPeakX},${secondPeakY} ${dipX},${dipY} ${firstPeakX},${firstPeakY} 100,100 H100 V100 H0 Z`; - } - - return ( - - ); - }; - //背景色をクリアした時は、白に変更 - if (!color) { - color = '#fff'; - } - - //Paddingの条件分岐を追加 - const getSectionStyle = (lvl) => { - if (dividerType === 'tilt') { - sectionPadding = Math.abs(lvl); - return tiltSectionStyle(lvl, color); - } else if (dividerType === 'curve') { - sectionPadding = lvl > 0 ? Math.abs(lvl) : Math.abs(lvl) * 2; - return curveSectionStyle(lvl, color); - } else if (dividerType === 'wave') { - sectionPadding = Math.abs(lvl); - return waveSectionStyle(lvl, color); - } else if (dividerType === 'triangle') { - sectionPadding = Math.abs(lvl); - return triangleSectionStyle(lvl, color); - } else if (dividerType === 'largeTriangle') { - sectionPadding = Math.abs(lvl); - return largeTriangleSectionStyle(lvl, color); - } else if (dividerType === 'serrated') { - sectionPadding = 10; - return serratedSectionStyle(lvl, color); - } else if (dividerType === 'book') { - sectionPadding = Math.abs(lvl); - return bookSectionStyle(lvl, color); - } else if (dividerType === 'pyramid') { - sectionPadding = Math.abs(lvl); - return pyramidSectionStyle(lvl, color); - } - }; - - lenderDivider = getSectionStyle(level); - - //classにdividerTypeを追加 - // eslint-disable-next-line prefer-const - sectionClass = dividerType; - - // vk_outerのクラス名をデバイスタイプに基づいて追加する - - const renderSVG = (lvl, side, deviceType) => { - lenderDivider = getSectionStyle(lvl); - const style = - side === 'upper' - ? { paddingBottom: sectionPadding + `px` } - : { paddingTop: sectionPadding + `px` }; - - let displayDeviceTypeClass; - if (deviceType === undefined) { - displayDeviceTypeClass = ''; - } else { - displayDeviceTypeClass = ` vk_outer-display-${deviceType}`; - } - - return ( -
- - {lenderDivider} - -
- ); - }; - - if (whichSide === 'upper') { - if (levelSettingPerDevice) { - return ( - <> - {level_pc !== 0 && - level_pc && - renderSVG(level_pc, 'upper', 'pc')} - {level_tablet !== 0 && - level_tablet && - renderSVG(level_tablet, 'upper', 'tablet')} - {level_mobile !== 0 && - level_mobile && - renderSVG(level_mobile, 'upper', 'mobile')} - - ); - } - return renderSVG(level, 'upper'); - } else if (whichSide === 'lower') { - if (levelSettingPerDevice) { - return ( - <> - {level_pc !== 0 && - level_pc && - renderSVG(level_pc, 'lower', 'pc')} - {level_tablet !== 0 && - level_tablet && - renderSVG(level_tablet, 'lower', 'tablet')} - {level_mobile !== 0 && - level_mobile && - renderSVG(level_mobile, 'lower', 'mobile')} - - ); - } - return renderSVG(level, 'lower'); - } -}; - -export { componentDivider }; diff --git a/src/blocks/_pro/outer/deprecated/save/1.93.0/save.js b/src/blocks/_pro/outer/deprecated/save/1.93.0/save.js deleted file mode 100644 index 3f4af27b0..000000000 --- a/src/blocks/_pro/outer/deprecated/save/1.93.0/save.js +++ /dev/null @@ -1,294 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import { __ } from '@wordpress/i18n'; -import { componentDivider } from './component-divider'; -import GenerateBgImage from './GenerateBgImage'; -import { isHexColor } from '@vkblocks/utils/is-hex-color'; -const prefix = 'vkb-outer'; - -/** - * WordPress dependencies - */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; - -export default function save(props) { - const { attributes } = props; - const { - bgColor, - bgPosition, - bgImageMobile, - bgImageTablet, - bgImage, - outerWidth, - padding_left_and_right, //eslint-disable-line camelcase - padding_top_and_bottom, //eslint-disable-line camelcase - opacity, - levelSettingPerDevice, - upper_level, //eslint-disable-line camelcase - upper_level_mobile, //eslint-disable-line camelcase - upper_level_tablet, //eslint-disable-line camelcase - upper_level_pc, //eslint-disable-line camelcase - lower_level, //eslint-disable-line camelcase - lower_level_mobile, //eslint-disable-line camelcase - lower_level_tablet, //eslint-disable-line camelcase - lower_level_pc, //eslint-disable-line camelcase - upperDividerBgColor, - lowerDividerBgColor, - dividerType, - borderWidth, - borderStyle, - borderColor, - borderRadius, - minHeightValuePC, - minHeightValueTablet, - minHeightValueMobile, - minHeightUnit, - blockId, - linkUrl, - linkTarget, - relAttribute, - linkDescription, - } = attributes; - - let classPaddingLR; - let classPaddingVertical; - let classBgPosition; - let whichSideUpper; - let whichSideLower; - - const bgColorClasses = classnames({ - [`has-background`]: bgColor !== undefined, - [`has-${bgColor}-background-color`]: - bgColor !== undefined && !isHexColor(bgColor), - [`has-background-dim`]: opacity !== undefined, - }); - - const bgColorStyles = { - backgroundColor: isHexColor(bgColor) ? bgColor : undefined, - opacity: opacity !== undefined ? opacity : undefined, - }; - - const GetBgImage = ( - <> - {(bgImage || bgImageTablet || bgImageMobile) && ( - - )} - - - ); - - //幅のクラス切り替え - const classWidth = - outerWidth === 'full' || outerWidth === 'wide' - ? `vk_outer-width-${outerWidth} align${outerWidth}` - : 'vk_outer-width-normal'; - - //classBgPositionのクラス切り替え - if (bgPosition === 'parallax') { - classBgPosition = 'vk_outer-bgPosition-parallax vk-prlx'; - } else if (bgPosition === 'fixed') { - classBgPosition = 'vk_outer-bgPosition-fixed'; - } else if (bgPosition === 'repeat') { - classBgPosition = 'vk_outer-bgPosition-repeat'; - } else { - classBgPosition = 'vk_outer-bgPosition-normal'; - } - - //classPaddingLRのクラス切り替え - classPaddingLR = ''; - //eslint-disable-next-line camelcase - if (padding_left_and_right === '0') { - classPaddingLR = 'vk_outer-paddingLR-none'; - //eslint-disable-next-line camelcase - } else if (padding_left_and_right === '1') { - classPaddingLR = 'vk_outer-paddingLR-use'; - //eslint-disable-next-line camelcase - } else if (padding_left_and_right === '2') { - // Fit to content area width - classPaddingLR = 'vk_outer-paddingLR-zero'; - } - - //classPaddingVerticalのクラス切り替 - //eslint-disable-next-line camelcase - if (padding_top_and_bottom === '1') { - classPaddingVertical = 'vk_outer-paddingVertical-use'; - } else { - classPaddingVertical = 'vk_outer-paddingVertical-none'; - } - - // 上側セクションの傾き切り替え - //eslint-disable-next-line camelcase - if (!levelSettingPerDevice) { - if (upper_level) { - whichSideUpper = 'upper'; - } - } else if (upper_level_mobile || upper_level_tablet || upper_level_pc) { - whichSideUpper = 'upper'; - } - - // 下側セクションの傾き切り替え - //eslint-disable-next-line camelcase - if (!levelSettingPerDevice) { - if (lower_level) { - whichSideLower = 'lower'; - } - } else if (lower_level_mobile || lower_level_tablet || lower_level_pc) { - whichSideLower = 'lower'; - } - - // 編集画面とサイト上の切り替え - const containerClass = 'vk_outer_container'; - - // Dividerエフェクトがない時のみ枠線を追 - let borderStyleProperty = {}; - //eslint-disable-next-line camelcase - if (!levelSettingPerDevice) { - if ( - upper_level === 0 && //eslint-disable-line camelcase - lower_level === 0 && //eslint-disable-line camelcase - borderWidth > 0 && - borderStyle !== 'none' - ) { - borderStyleProperty = { - borderWidth: `${borderWidth}px`, - borderStyle: `${borderStyle}`, - borderColor: - isHexColor(borderColor) && borderColor - ? borderColor - : undefined, - borderRadius: `${borderRadius}px`, - }; - //eslint-disable-next-line camelcase - } else if (upper_level !== 0 || lower_level !== 0) { - //eslint-disable-line camelcase - borderStyleProperty = { - border: `none`, - borderRadius: `0px`, - }; - } - } else if ( - upper_level_mobile === 0 && //eslint-disable-line camelcase - upper_level_tablet === 0 && //eslint-disable-line camelcase - upper_level_pc === 0 && //eslint-disable-line camelcase - lower_level_mobile === 0 && //eslint-disable-line camelcase - lower_level_tablet === 0 && //eslint-disable-line camelcase - lower_level_pc === 0 && //eslint-disable-line camelcase - borderWidth > 0 && - borderStyle !== 'none' - ) { - borderStyleProperty = { - borderWidth: `${borderWidth}px`, - borderStyle: `${borderStyle}`, - borderColor: - isHexColor(borderColor) && borderColor - ? borderColor - : undefined, - borderRadius: `${borderRadius}px`, - }; - //eslint-disable-next-line camelcase - } else if ( - upper_level_mobile !== 0 || - upper_level_tablet !== 0 || - upper_level_pc !== 0 || - lower_level_mobile !== 0 || - lower_level_tablet !== 0 || - lower_level_pc !== 0 - ) { - //eslint-disable-line camelcase - borderStyleProperty = { - border: `none`, - borderRadius: `0px`, - }; - } - - const blockProps = useBlockProps.save({ - className: classnames( - `vkb-outer-${blockId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, - { - [`has-border-color`]: - borderStyle !== 'none' && borderColor !== undefined, - [`has-${borderColor}-border-color`]: - borderStyle !== 'none' && - borderColor !== undefined && - !isHexColor(borderColor), - [`vk_outer-minHeight`]: - minHeightValuePC > 0 || - minHeightValueTablet > 0 || - minHeightValueMobile > 0, - } - ), - style: { - ...borderStyleProperty, - '--min-height-mobile': minHeightValueMobile - ? `${minHeightValueMobile}${minHeightUnit}` - : undefined, - '--min-height-tablet': minHeightValueTablet - ? `${minHeightValueTablet}${minHeightUnit}` - : undefined, - '--min-height-pc': minHeightValuePC - ? `${minHeightValuePC}${minHeightUnit}` - : undefined, - }, - }); - - const GetLinkUrl = ( - - - {linkDescription - ? linkDescription - : __('Outer link', 'vk-blocks-pro')} - - - ); - - return ( -
- {linkUrl && GetLinkUrl} - {GetBgImage} -
- {componentDivider( - upper_level, - upperDividerBgColor, - whichSideUpper, - dividerType, - levelSettingPerDevice, - upper_level_mobile, - upper_level_tablet, - upper_level_pc - )} -
- -
- {componentDivider( - lower_level, - lowerDividerBgColor, - whichSideLower, - dividerType, - levelSettingPerDevice, - lower_level_mobile, - lower_level_tablet, - lower_level_pc - )} -
-
- ); -} diff --git a/src/blocks/_pro/outer/deprecated/save/1.93.2/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.93.2/GenerateBgImage.js deleted file mode 100644 index 53fb7e570..000000000 --- a/src/blocks/_pro/outer/deprecated/save/1.93.2/GenerateBgImage.js +++ /dev/null @@ -1,103 +0,0 @@ -const GenerateBgImage = (props) => { - const { attributes, prefix } = props; - const { bgImageMobile, bgImageTablet, bgImage, bgSize, blockId } = - attributes; - - const mobileViewport = 'max-width: 575.98px'; - const tabletViewport = 'min-width: 576px'; - const pcViewport = 'min-width: 992px'; - const underPcViewport = 'max-width: 992.98px'; - - let backgroundStyle; - const backgroundPosition = 'background-position:center!important;'; - if ('cover' === bgSize) { - backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`; - } else if ('repeat' === bgSize) { - backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`; - } else { - backgroundStyle = ``; - } - - //moible only - if (bgImageMobile && !bgImageTablet && !bgImage) { - return ( - - ); - } - //tablet only - if (!bgImageMobile && bgImageTablet && !bgImage) { - return ( - - ); - } - //pc only - if (!bgImageMobile && !bgImageTablet && bgImage) { - return ( - - ); - } - //pc -mobile - if (bgImageMobile && !bgImageTablet && bgImage) { - return ( - - ); - } - //pc -tablet - if (!bgImageMobile && bgImageTablet && bgImage) { - return ( - - ); - } - //tablet - mobile - if (bgImageMobile && bgImageTablet && !bgImage) { - return ( - - ); - } - //pc -tablet - mobile - if (bgImageMobile && bgImageTablet && bgImage) { - return ( - - ); - } -}; -export default GenerateBgImage; diff --git a/src/blocks/_pro/outer/deprecated/save/1.93.2/component-divider.js b/src/blocks/_pro/outer/deprecated/save/1.93.2/component-divider.js deleted file mode 100644 index f575d975e..000000000 --- a/src/blocks/_pro/outer/deprecated/save/1.93.2/component-divider.js +++ /dev/null @@ -1,390 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import { isHexColor } from '@vkblocks/utils/is-hex-color'; - -const componentDivider = ( - level, - color, - whichSide, - dividerType, - levelSettingPerDevice, - level_mobile, - level_tablet, - level_pc -) => { - let sectionPadding; - let sectionClass; - let lenderDivider; - - const pathClassNames = classnames({ - [`has-text-color`]: color !== undefined, - [`has-${color}-color`]: color !== undefined && !isHexColor(color), - }); - - // eslint-disable-next-line no-shadow - const tiltSectionStyle = (level, color) => { - if (level > 0) { - return ( - - ); - } else if (level < 0) { - const absLevel = Math.abs(level); - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const curveSectionStyle = (level, color) => { - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const waveSectionStyle = (level, color) => { - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const triangleSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - const DivideAbs4 = absLevel / 4; - - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const largeTriangleSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - - if (level > 0) { - return ( - - ); - } else if (level < 0) { - return ( - - ); - } - }; - - // eslint-disable-next-line no-shadow - const serratedSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - const baseSerrationCount = 40; - const serrationCount = - level >= 0 - ? baseSerrationCount + Math.floor(absLevel / 5) - : Math.max(baseSerrationCount - Math.floor(absLevel / 5), 5); - const step = 100 / serrationCount; - const height = 10; - - const pathData = Array.from({ length: serrationCount + 1 }) - .map((_, i) => { - const x = i * step; - const y = i % 2 === 0 ? 100 - height : 100; - return `${x},${y}`; - }) - .join(' L '); - - return ( - - ); - }; - - // eslint-disable-next-line no-shadow - const bookSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - let pathData; - - if (level > 0) { - const controlPoint1X = 40; - const controlPoint1Y = 100 - level * 0.1; - const peakX = 50; - const peakY = 100 - level; - const controlPoint2X = 60; - const controlPoint2Y = 100 - level * 0.1; - - pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`; - } else if (level === 0) { - const controlPoint1X = 40; - const controlPoint1Y = 100; - const peakX = 50; - const peakY = 100; - const controlPoint2X = 60; - const controlPoint2Y = 100; - - pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`; - } else { - const controlPoint1X = 40; - const controlPoint1Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; - const peakX = 50; - const peakY = 100; - const controlPoint2X = 60; - const controlPoint2Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9; - const startY = absLevel === 100 ? 0 : 100 - absLevel; - - pathData = `M0,${startY} H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,${startY} H100 V100 H0 Z`; - } - - return ( - - ); - }; - - // eslint-disable-next-line no-shadow - const pyramidSectionStyle = (level, color) => { - const absLevel = Math.abs(level); - let pathData; - - if (level < 0) { - const firstPeakX = 25; - const firstPeakY = 100 - absLevel * 0.6; - const dipX = 40; - const dipY = 100 - absLevel * 0.2; - const secondPeakX = 75; - const secondPeakY = 100 - absLevel; - const rightEndY = 100 - absLevel * 0.5; - - pathData = `M0,100 H0 L${firstPeakX},${firstPeakY} ${dipX},${dipY} ${secondPeakX},${secondPeakY} 100,${rightEndY} H100 V100 H0 Z`; - } else if (level === 0) { - pathData = `M0,100 H0 L0,100 35,100 65,100 85,100 100,100 H100 V100 H0 Z`; - } else { - const firstPeakX = 75; - const firstPeakY = 100 - level * 0.6; - const dipX = 60; - const dipY = 100 - level * 0.2; - const secondPeakX = 25; - const secondPeakY = 100 - level; - const leftEndY = 100 - level * 0.5; - - pathData = `M0,${leftEndY} H0 L${secondPeakX},${secondPeakY} ${dipX},${dipY} ${firstPeakX},${firstPeakY} 100,100 H100 V100 H0 Z`; - } - - return ( - - ); - }; - //背景色をクリアした時は、白に変更 - if (!color) { - color = '#fff'; - } - - //Paddingの条件分岐を追加 - const getSectionStyle = (lvl) => { - if (dividerType === 'tilt') { - sectionPadding = Math.abs(lvl); - return tiltSectionStyle(lvl, color); - } else if (dividerType === 'curve') { - sectionPadding = lvl > 0 ? Math.abs(lvl) : Math.abs(lvl) * 2; - return curveSectionStyle(lvl, color); - } else if (dividerType === 'wave') { - sectionPadding = Math.abs(lvl); - return waveSectionStyle(lvl, color); - } else if (dividerType === 'triangle') { - sectionPadding = Math.abs(lvl); - return triangleSectionStyle(lvl, color); - } else if (dividerType === 'largeTriangle') { - sectionPadding = Math.abs(lvl); - return largeTriangleSectionStyle(lvl, color); - } else if (dividerType === 'serrated') { - sectionPadding = 10; - return serratedSectionStyle(lvl, color); - } else if (dividerType === 'book') { - sectionPadding = Math.abs(lvl); - return bookSectionStyle(lvl, color); - } else if (dividerType === 'pyramid') { - sectionPadding = Math.abs(lvl); - return pyramidSectionStyle(lvl, color); - } - }; - - lenderDivider = getSectionStyle(level); - - //classにdividerTypeを追加 - // eslint-disable-next-line prefer-const - sectionClass = dividerType; - - // vk_outerのクラス名をデバイスタイプに基づいて追加する - - const renderSVG = (lvl, side, deviceType) => { - lenderDivider = getSectionStyle(lvl); - const style = - side === 'upper' - ? { paddingBottom: sectionPadding + `px` } - : { paddingTop: sectionPadding + `px` }; - - let displayDeviceTypeClass; - if (deviceType === undefined) { - displayDeviceTypeClass = ''; - } else { - displayDeviceTypeClass = ` vk_outer-display-${deviceType}`; - } - - return ( -
- - {lenderDivider} - -
- ); - }; - - if (whichSide === 'upper') { - if (levelSettingPerDevice) { - return ( - <> - {level_pc !== 0 && - level_pc && - renderSVG(level_pc, 'upper', 'pc')} - {level_tablet !== 0 && - level_tablet && - renderSVG(level_tablet, 'upper', 'tablet')} - {level_mobile !== 0 && - level_mobile && - renderSVG(level_mobile, 'upper', 'mobile')} - - ); - } - return renderSVG(level, 'upper'); - } else if (whichSide === 'lower') { - if (levelSettingPerDevice) { - return ( - <> - {level_pc !== 0 && - level_pc && - renderSVG(level_pc, 'lower', 'pc')} - {level_tablet !== 0 && - level_tablet && - renderSVG(level_tablet, 'lower', 'tablet')} - {level_mobile !== 0 && - level_mobile && - renderSVG(level_mobile, 'lower', 'mobile')} - - ); - } - return renderSVG(level, 'lower'); - } -}; - -export { componentDivider }; diff --git a/src/blocks/_pro/outer/deprecated/save/1.93.2/save.js b/src/blocks/_pro/outer/deprecated/save/1.93.2/save.js deleted file mode 100644 index 38efb7f16..000000000 --- a/src/blocks/_pro/outer/deprecated/save/1.93.2/save.js +++ /dev/null @@ -1,288 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import { __ } from '@wordpress/i18n'; -import { componentDivider } from './component-divider'; -import GenerateBgImage from './GenerateBgImage'; -import { isHexColor } from '@vkblocks/utils/is-hex-color'; -const prefix = 'vkb-outer'; - -/** - * WordPress dependencies - */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; - -export default function save(props) { - const { attributes } = props; - const { - bgColor, - bgPosition, - bgImageMobile, - bgImageTablet, - bgImage, - outerWidth, - padding_left_and_right, //eslint-disable-line camelcase - padding_top_and_bottom, //eslint-disable-line camelcase - opacity, - levelSettingPerDevice, - upper_level, //eslint-disable-line camelcase - upper_level_mobile, //eslint-disable-line camelcase - upper_level_tablet, //eslint-disable-line camelcase - upper_level_pc, //eslint-disable-line camelcase - lower_level, //eslint-disable-line camelcase - lower_level_mobile, //eslint-disable-line camelcase - lower_level_tablet, //eslint-disable-line camelcase - lower_level_pc, //eslint-disable-line camelcase - upperDividerBgColor, - lowerDividerBgColor, - dividerType, - borderWidth, - borderStyle, - borderColor, - borderRadius, - minHeightValuePC, - minHeightValueTablet, - minHeightValueMobile, - minHeightUnit, - blockId, - linkUrl, - linkTarget, - } = attributes; - - let classPaddingLR; - let classPaddingVertical; - let classBgPosition; - let whichSideUpper; - let whichSideLower; - - const bgColorClasses = classnames({ - [`has-background`]: bgColor !== undefined, - [`has-${bgColor}-background-color`]: - bgColor !== undefined && !isHexColor(bgColor), - [`has-background-dim`]: opacity !== undefined, - }); - - const bgColorStyles = { - backgroundColor: isHexColor(bgColor) ? bgColor : undefined, - opacity: opacity !== undefined ? opacity : undefined, - }; - - const GetBgImage = ( - <> - {(bgImage || bgImageTablet || bgImageMobile) && ( - - )} - - - ); - - //幅のクラス切り替え - const classWidth = - outerWidth === 'full' || outerWidth === 'wide' - ? `vk_outer-width-${outerWidth} align${outerWidth}` - : 'vk_outer-width-normal'; - - //classBgPositionのクラス切り替え - if (bgPosition === 'parallax') { - classBgPosition = 'vk_outer-bgPosition-parallax vk-prlx'; - } else if (bgPosition === 'fixed') { - classBgPosition = 'vk_outer-bgPosition-fixed'; - } else if (bgPosition === 'repeat') { - classBgPosition = 'vk_outer-bgPosition-repeat'; - } else { - classBgPosition = 'vk_outer-bgPosition-normal'; - } - - //classPaddingLRのクラス切り替え - classPaddingLR = ''; - //eslint-disable-next-line camelcase - if (padding_left_and_right === '0') { - classPaddingLR = 'vk_outer-paddingLR-none'; - //eslint-disable-next-line camelcase - } else if (padding_left_and_right === '1') { - classPaddingLR = 'vk_outer-paddingLR-use'; - //eslint-disable-next-line camelcase - } else if (padding_left_and_right === '2') { - // Fit to content area width - classPaddingLR = 'vk_outer-paddingLR-zero'; - } - - //classPaddingVerticalのクラス切り替 - //eslint-disable-next-line camelcase - if (padding_top_and_bottom === '1') { - classPaddingVertical = 'vk_outer-paddingVertical-use'; - } else { - classPaddingVertical = 'vk_outer-paddingVertical-none'; - } - - // 上側セクションの傾き切り替え - //eslint-disable-next-line camelcase - if (!levelSettingPerDevice) { - if (upper_level) { - whichSideUpper = 'upper'; - } - } else if (upper_level_mobile || upper_level_tablet || upper_level_pc) { - whichSideUpper = 'upper'; - } - - // 下側セクションの傾き切り替え - //eslint-disable-next-line camelcase - if (!levelSettingPerDevice) { - if (lower_level) { - whichSideLower = 'lower'; - } - } else if (lower_level_mobile || lower_level_tablet || lower_level_pc) { - whichSideLower = 'lower'; - } - - // 編集画面とサイト上の切り替え - const containerClass = 'vk_outer_container'; - - // Dividerエフェクトがない時のみ枠線を追 - let borderStyleProperty = {}; - //eslint-disable-next-line camelcase - if (!levelSettingPerDevice) { - if ( - upper_level === 0 && //eslint-disable-line camelcase - lower_level === 0 && //eslint-disable-line camelcase - borderWidth > 0 && - borderStyle !== 'none' - ) { - borderStyleProperty = { - borderWidth: `${borderWidth}px`, - borderStyle: `${borderStyle}`, - borderColor: - isHexColor(borderColor) && borderColor - ? borderColor - : undefined, - borderRadius: `${borderRadius}px`, - }; - //eslint-disable-next-line camelcase - } else if (upper_level !== 0 || lower_level !== 0) { - //eslint-disable-line camelcase - borderStyleProperty = { - border: `none`, - borderRadius: `0px`, - }; - } - } else if ( - upper_level_mobile === 0 && //eslint-disable-line camelcase - upper_level_tablet === 0 && //eslint-disable-line camelcase - upper_level_pc === 0 && //eslint-disable-line camelcase - lower_level_mobile === 0 && //eslint-disable-line camelcase - lower_level_tablet === 0 && //eslint-disable-line camelcase - lower_level_pc === 0 && //eslint-disable-line camelcase - borderWidth > 0 && - borderStyle !== 'none' - ) { - borderStyleProperty = { - borderWidth: `${borderWidth}px`, - borderStyle: `${borderStyle}`, - borderColor: - isHexColor(borderColor) && borderColor - ? borderColor - : undefined, - borderRadius: `${borderRadius}px`, - }; - //eslint-disable-next-line camelcase - } else if ( - upper_level_mobile !== 0 || - upper_level_tablet !== 0 || - upper_level_pc !== 0 || - lower_level_mobile !== 0 || - lower_level_tablet !== 0 || - lower_level_pc !== 0 - ) { - //eslint-disable-line camelcase - borderStyleProperty = { - border: `none`, - borderRadius: `0px`, - }; - } - - const blockProps = useBlockProps.save({ - className: classnames( - `vkb-outer-${blockId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, - { - [`has-border-color`]: - borderStyle !== 'none' && borderColor !== undefined, - [`has-${borderColor}-border-color`]: - borderStyle !== 'none' && - borderColor !== undefined && - !isHexColor(borderColor), - [`vk_outer-minHeight`]: - minHeightValuePC > 0 || - minHeightValueTablet > 0 || - minHeightValueMobile > 0, - } - ), - style: { - ...borderStyleProperty, - '--min-height-mobile': minHeightValueMobile - ? `${minHeightValueMobile}${minHeightUnit}` - : undefined, - '--min-height-tablet': minHeightValueTablet - ? `${minHeightValueTablet}${minHeightUnit}` - : undefined, - '--min-height-pc': minHeightValuePC - ? `${minHeightValuePC}${minHeightUnit}` - : undefined, - }, - }); - - const relAttribute = - linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener'; - const GetLinkUrl = ( - - - {__('Outer link', 'vk-blocks-pro')} - - - ); - - return ( -
- {linkUrl && GetLinkUrl} - {GetBgImage} -
- {componentDivider( - upper_level, - upperDividerBgColor, - whichSideUpper, - dividerType, - levelSettingPerDevice, - upper_level_mobile, - upper_level_tablet, - upper_level_pc - )} -
- -
- {componentDivider( - lower_level, - lowerDividerBgColor, - whichSideLower, - dividerType, - levelSettingPerDevice, - lower_level_mobile, - lower_level_tablet, - lower_level_pc - )} -
-
- ); -} diff --git a/src/blocks/_pro/outer/deprecated/save/index.js b/src/blocks/_pro/outer/deprecated/save/index.js index d3040d532..bd55e5f65 100644 --- a/src/blocks/_pro/outer/deprecated/save/index.js +++ b/src/blocks/_pro/outer/deprecated/save/index.js @@ -10,8 +10,6 @@ import save1_71_0 from './1.71.0/save'; import save1_76_0 from './1.76.0/save'; import save1_89_0 from './1.89.0/save'; import save1_92_1 from './1.92.1/save'; -import save1_93_0 from './1.93.0/save'; -import save1_93_2 from './1.93.2/save'; const blockAttributes = { bgColor: { @@ -239,14 +237,6 @@ const blockAttributes8 = { */ const deprecated = [ - { - attributes: blockAttributes7, - save: save1_93_2, - }, - { - attributes: blockAttributes7, - save: save1_93_0, - }, { attributes: blockAttributes6, save: save1_92_1, diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-93-0.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-93-0.html deleted file mode 100644 index 0fa3779a7..000000000 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-93-0.html +++ /dev/null @@ -1,30 +0,0 @@ - -
Outer link
- \ No newline at end of file diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-93-2.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-93-2.html deleted file mode 100644 index dd999a301..000000000 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-93-2.html +++ /dev/null @@ -1,30 +0,0 @@ - -
Outer link
-