diff --git a/readme.txt b/readme.txt index b7ff5a9d9..8096dff2c 100644 --- a/readme.txt +++ b/readme.txt @@ -106,6 +106,7 @@ e.g. == Changelog == +[ Add function ][ Outer (Pro) ] Add book and pyramid in divider style. [ Bug fix ][ Slider ] Add alert message. = 1.89.0 = diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js index 24c93742f..a97f14fb0 100644 --- a/src/blocks/_pro/outer/component-divider.js +++ b/src/blocks/_pro/outer/component-divider.js @@ -187,6 +187,95 @@ const componentDivider = ( ); }; + // 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'; @@ -212,6 +301,12 @@ const componentDivider = ( } 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); } }; diff --git a/src/blocks/_pro/outer/deprecated/hooks/index.js b/src/blocks/_pro/outer/deprecated/hooks/index.js index c03e8733e..d5378a6d4 100644 --- a/src/blocks/_pro/outer/deprecated/hooks/index.js +++ b/src/blocks/_pro/outer/deprecated/hooks/index.js @@ -7,6 +7,7 @@ import OuterHook0_0_1 from './0.0.1' // saveの数分必要 export default [ // 後方互換 + OuterHook1_60_0, // 1.89.0 OuterHook1_60_0, // 1.76.0 OuterHook1_60_0, // 1.71.0 OuterHook1_60_0, // 1.64.0 diff --git a/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js new file mode 100644 index 000000000..53fb7e570 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js @@ -0,0 +1,103 @@ +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.89.0/component-divider.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/component-divider.js new file mode 100644 index 000000000..64a136b47 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.89.0/component-divider.js @@ -0,0 +1,447 @@ +/** + * 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) { + // 0 から -100 の場合のパスデータ（中央が下に移動） + 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) { + // 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 { + // 0 から 100 の場合のパスデータ（中央が上に移動） + 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) { + // -100 から 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) { + // 0 の場合はフラット + pathData = ` + M0,100 + H0 + L0,100 35,100 65,100 85,100 100,100 + H100 + V100 + H0 + Z + `; + } else { + // 0 から 100 の場合のパスデータ（左寄りのフタコブラクダの形状） + 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.89.0/save.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/save.js new file mode 100644 index 000000000..38efb7f16 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/save/1.89.0/save.js @@ -0,0 +1,288 @@ +/** + * 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 3d6571002..2f8fe98b3 100644 --- a/src/blocks/_pro/outer/deprecated/save/index.js +++ b/src/blocks/_pro/outer/deprecated/save/index.js @@ -20,6 +20,7 @@ import save1_61_2 from './1.61.2/save'; import save1_64_0 from './1.64.0/save'; 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'; const blockAttributes = { bgColor: { @@ -179,7 +180,6 @@ const blockAttributes7 = { }; // 1.71.0 から attributes を変更 -/* const blockAttributes8 = { ...blockAttributes7, linkUrl: { @@ -190,11 +190,14 @@ const blockAttributes8 = { default: '' }, }; -*/ const deprecated = [ { - attributes: blockAttributes7, + attributes: blockAttributes8, + save: save1_89_0, + }, + { + attributes: blockAttributes8, save: save1_76_0, }, { diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index 1f0973631..dc07e4c8e 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/src/blocks/_pro/outer/edit.js @@ -643,6 +643,14 @@ export default function OuterEdit(props) { value: 'serrated', label: __('Serrated', 'vk-blocks-pro'), }, + { + value: 'book', + label: __('Book', 'vk-blocks-pro'), + }, + { + value: 'pyramid', + label: __('Pyramid', 'vk-blocks-pro'), + }, ]} /> diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html index 0edec1965..a051f7e3f 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__default.html @@ -1,27 +1,27 @@ - -
Outer link
+ diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html index 059aaf8ea..0050fea2c 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider.html @@ -1,29 +1,29 @@ - -
Outer link

-
- -
Outer link

- \ No newline at end of file + + + +
Outer link
+

+
+ + + +
Outer link
+

+
+ diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider__deprecated-1-89-0.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider__deprecated-1-89-0.html new file mode 100644 index 000000000..059aaf8ea --- /dev/null +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__divider__deprecated-1-89-0.html @@ -0,0 +1,65 @@ + +
Outer link
+

+
+ + + +
Outer link
+

+
+ \ No newline at end of file