diff --git a/readme.txt b/readme.txt index 0dacd0ee3..99d0791c0 100644 --- a/readme.txt +++ b/readme.txt @@ -63,10 +63,12 @@ e.g. == Changelog == + +[ Bug fix ][ Outer(Pro) ] cope with custom color palette + = 1.26.2 = [ Other ] Rerelease -= 1.26.1 = [ Bugfix ][ Spacer ] fix spacer = 1.26.0 = diff --git a/src/blocks/_pro/outer/GenerateBgImage.js b/src/blocks/_pro/outer/GenerateBgImage.js new file mode 100644 index 000000000..21703a997 --- /dev/null +++ b/src/blocks/_pro/outer/GenerateBgImage.js @@ -0,0 +1,102 @@ +const GenerateBgImage = (props) => { + const { attributes, clientId, prefix } = props; + const { bgImageMobile, bgImageTablet, bgImage, bgSize } = 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/component-divider.js b/src/blocks/_pro/outer/component-divider.js index 424809c98..4978d6e4d 100644 --- a/src/blocks/_pro/outer/component-divider.js +++ b/src/blocks/_pro/outer/component-divider.js @@ -1,8 +1,23 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import { isHexColor } from '@vkblocks/utils/is-hex-color'; + const componentDivider = (level, color, whichSide, dividerType) => { 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) { @@ -10,7 +25,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { ); } else if (level < 0) { @@ -21,7 +37,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { ); } @@ -34,7 +51,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { ); } else if (level < 0) { @@ -42,7 +60,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { ); } @@ -57,7 +76,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { 100 - level / 2 } q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`} strokeWidth="0" - fill={color} + fill={isHexColor(color) ? color : 'currentColor'} + className={pathClassNames} /> ); } else if (level < 0) { @@ -67,7 +87,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { level / 2 + 100 } q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`} strokeWidth="0" - fill={color} + fill={isHexColor(color) ? color : 'currentColor'} + className={pathClassNames} /> ); } @@ -85,7 +106,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { 50 - DivideAbs4 } l${DivideAbs4},-${absLevel} l${DivideAbs4},${absLevel} h${DivideAbs4} v100 h-100 z`} strokeWidth="0" - fill={color} + fill={isHexColor(color) ? color : 'currentColor'} + className={pathClassNames} /> ); } else if (level < 0) { @@ -97,7 +119,8 @@ const componentDivider = (level, color, whichSide, dividerType) => { 50 - DivideAbs4 } v${absLevel + 1} h-100 z`} strokeWidth="0" - fill={color} + fill={isHexColor(color) ? color : 'currentColor'} + className={pathClassNames} /> ); } diff --git a/src/blocks/_pro/outer/deprecated/1.26.0/component-divider.js b/src/blocks/_pro/outer/deprecated/1.26.0/component-divider.js new file mode 100644 index 000000000..313ab0409 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/1.26.0/component-divider.js @@ -0,0 +1,164 @@ +const componentDivider = (level, color, whichSide, dividerType) => { + let sectionPadding; + let sectionClass; + let lenderDivider; + + // 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 ( + + ); + } + }; + + //背景色をクリアした時は、白に変更 + if (!color) { + color = '#fff'; + } + + //Paddingの条件分岐を追加 + if (dividerType === 'tilt') { + sectionPadding = Math.abs(level); + lenderDivider = tiltSectionStyle(level, color); + } else if (dividerType === 'curve') { + if (level > 0) { + sectionPadding = Math.abs(level); + } else if (level < 0) { + sectionPadding = Math.abs(level) * 2; + } + lenderDivider = curveSectionStyle(level, color); + } else if (dividerType === 'wave') { + sectionPadding = Math.abs(level); + lenderDivider = waveSectionStyle(level, color); + } else if (dividerType === 'triangle') { + sectionPadding = Math.abs(level); + lenderDivider = triangleSectionStyle(level, color); + } + + //classにdividerTypeを追加 + // eslint-disable-next-line prefer-const + sectionClass = dividerType; + + //upper-paddingを追加 + if (whichSide === 'upper') { + return ( +
+ + {lenderDivider} + +
+ ); + //lower-paddingを追加 + } else if (whichSide === 'lower') { + return ( +
+ + {lenderDivider} + +
+ ); + } +}; + +export { componentDivider }; diff --git a/src/blocks/_pro/outer/deprecated/1.26.0/save.js b/src/blocks/_pro/outer/deprecated/1.26.0/save.js new file mode 100644 index 000000000..956a0fa48 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/1.26.0/save.js @@ -0,0 +1,133 @@ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { componentDivider } from './component-divider'; +import GenerateBgImage from '@vkblocks/utils/GenerateBgImage'; + +export default function save(props) { + const { attributes } = props; + const { + bgPosition, + outerWidth, + padding_left_and_right, //eslint-disable-line camelcase + padding_top_and_bottom, //eslint-disable-line camelcase + upper_level, //eslint-disable-line camelcase + lower_level, //eslint-disable-line camelcase + upperDividerBgColor, + lowerDividerBgColor, + dividerType, + borderWidth, + borderStyle, + borderColor, + borderRadius, + clientId, + } = attributes; + + let classPaddingLR; + let classPaddingVertical; + let classBgPosition; + let whichSideUpper; + let whichSideLower; + + //幅のクラス切り替え + const classWidth = `vk_outer-width-${outerWidth}`; + + //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 (upper_level) { + whichSideUpper = 'upper'; + } + + //下側セクションの傾き切り替 + //eslint-disable-next-line camelcase + if (lower_level) { + whichSideLower = 'lower'; + } + + //編集画面とサイト上の切り替え + const containerClass = 'vk_outer_container'; + + //Dividerエフェクトがない時のみ枠線を追 + let borderStyleProperty = {}; + //eslint-disable-next-line camelcase + if ( + upper_level === 0 && //eslint-disable-line camelcase + lower_level === 0 && //eslint-disable-line camelcase + borderWidth > 0 && + borderStyle !== 'none' + ) { + borderStyleProperty = { + border: `${borderWidth}px ${borderStyle} ${borderColor}`, + 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`, + }; + } + + const blockProps = useBlockProps.save({ + className: `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, + style: borderStyleProperty, + }); + return ( +
+ +
+ {componentDivider( + upper_level, + upperDividerBgColor, + whichSideUpper, + dividerType + )} +
+ +
+ {componentDivider( + lower_level, + lowerDividerBgColor, + whichSideLower, + dividerType + )} +
+
+ ); +} diff --git a/src/blocks/_pro/outer/deprecated/component-divider.js b/src/blocks/_pro/outer/deprecated/component-divider.js index 80976b7b7..c22f9624b 100644 --- a/src/blocks/_pro/outer/deprecated/component-divider.js +++ b/src/blocks/_pro/outer/deprecated/component-divider.js @@ -1,3 +1,5 @@ +// 区切り設定 0系で使用 + const componentDivider = (level, color, whichSide, dividerType) => { let sectionPadding; let sectionClass; diff --git a/src/blocks/_pro/outer/deprecated/hooks/0.0.1/index.js b/src/blocks/_pro/outer/deprecated/hooks/0.0.1/index.js new file mode 100644 index 000000000..4162bf90e --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/hooks/0.0.1/index.js @@ -0,0 +1,3 @@ +export default function OuterHook({ el, attributes }) { + return el +} diff --git a/src/blocks/_pro/outer/deprecated/hooks/1.26.0/index.js b/src/blocks/_pro/outer/deprecated/hooks/1.26.0/index.js new file mode 100644 index 000000000..090cd32e0 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/hooks/1.26.0/index.js @@ -0,0 +1,53 @@ +const generateInlineCss = (attributes) => { + let { + clientId, + innerSideSpaceValuePC, + innerSideSpaceValueTablet, + innerSideSpaceValueMobile, + innerSideSpaceUnit, + } = attributes; + + //For recovering block. + if (undefined === innerSideSpaceUnit) { + innerSideSpaceUnit = 'px'; + } + if (undefined === innerSideSpaceValueMobile) { + innerSideSpaceValueMobile = 0; + } + if (undefined === innerSideSpaceValueTablet) { + innerSideSpaceValueTablet = 0; + } + if (undefined === innerSideSpaceValuePC) { + innerSideSpaceValuePC = 0; + } + + const containerSelector = `.vkb-outer-${clientId} .vk_outer_container`; + return ` + ${containerSelector}{ + padding-left:${innerSideSpaceValueMobile}${innerSideSpaceUnit}; + padding-right:${innerSideSpaceValueMobile}${innerSideSpaceUnit}; + } + @media (min-width: 577px) { + ${containerSelector}{ + padding-left:${innerSideSpaceValueTablet}${innerSideSpaceUnit}; + padding-right:${innerSideSpaceValueTablet}${innerSideSpaceUnit}; + } + } + @media (min-width: 769px) { + ${containerSelector}{ + padding-left:${innerSideSpaceValuePC}${innerSideSpaceUnit}; + padding-right:${innerSideSpaceValuePC}${innerSideSpaceUnit}; + } + } + `; +}; + +export default function OuterHook({ el, attributes }) { + const cssTag = generateInlineCss(attributes); + return ( + <> + {el} + + + ); +} diff --git a/src/blocks/_pro/outer/deprecated/hooks/index.js b/src/blocks/_pro/outer/deprecated/hooks/index.js new file mode 100644 index 000000000..f6e135984 --- /dev/null +++ b/src/blocks/_pro/outer/deprecated/hooks/index.js @@ -0,0 +1,21 @@ +import OuterHook1_26_0 from './1.26.0/' +import OuterHook0_0_1 from './0.0.1' + +// saveの数分必要 +export default [, + OuterHook1_26_0, + // 後方互換 + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, + OuterHook0_0_1, +]; diff --git a/src/blocks/_pro/outer/deprecated/index.js b/src/blocks/_pro/outer/deprecated/index.js index 717d54656..211f24010 100644 --- a/src/blocks/_pro/outer/deprecated/index.js +++ b/src/blocks/_pro/outer/deprecated/index.js @@ -11,6 +11,7 @@ import save009 from './0.0.9/save'; import save0_37_1 from './0.37.1/save'; import save0_60_0 from './0.60.0/save'; import save1_0_13 from './1.0.13/save'; +import save1_26_0 from './1.26.0/save'; const blockAttributes = { bgColor: { @@ -81,6 +82,44 @@ const blockAttributes = { const deprecated = [ //ブロックテンプレート用のdeprecated + { + attributes: { + ...blockAttributes, + defaultBgColor: { + type: 'string', + default: '#f3f4f5', + }, + bgImageTablet: { + type: 'string', + default: null, + }, + bgImageMobile: { + type: 'string', + default: null, + }, + clientId: { + type: 'string', + default: null, + }, + innerSideSpaceValuePC: { + type: "number", + default: 0 + }, + innerSideSpaceValueTablet: { + type: "number", + default: 0 + }, + innerSideSpaceValueMobile: { + type: "number", + default: 0 + }, + innerSideSpaceUnit: { + type: "string", + default: "px" + }, + }, + save: save1_26_0, + }, { attributes: { ...blockAttributes, diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index 515ddedf6..e2b74327b 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/src/blocks/_pro/outer/edit.js @@ -1,5 +1,22 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ import toNumber from '@vkblocks/utils/to-number'; import { AdvancedMediaUpload } from '@vkblocks/components/advanced-media-upload'; +import { componentDivider } from './component-divider'; +import GenerateBgImage from './GenerateBgImage'; +import { isHexColor } from '@vkblocks/utils/is-hex-color'; +import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette'; +const prefix = 'vkb-outer'; + +/** + * WordPress dependencies + */ import { __ } from '@wordpress/i18n'; import { RangeControl, @@ -12,19 +29,19 @@ import { } from '@wordpress/components'; import { InspectorControls, - ColorPalette, InnerBlocks, useBlockProps, } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import { dispatch } from '@wordpress/data'; -import { componentDivider } from './component-divider'; -import GenerateBgImage from '@vkblocks/utils/GenerateBgImage'; export default function OuterEdit(props) { const { attributes, setAttributes, clientId } = props; const { bgColor, + bgImage, + bgImageTablet, + bgImageMobile, bgPosition, outerWidth, padding_left_and_right, //eslint-disable-line camelcase @@ -89,6 +106,35 @@ export default function OuterEdit(props) { }); } + const opacityClass = opacity && opacity * 10; + const bgColorClasses = classnames({ + [`has-background`]: bgColor !== undefined, + [`has-${bgColor}-background-color`]: + bgColor !== undefined && !isHexColor(bgColor), + [`has-background-dim`]: opacity !== undefined, + [`has-background-dim-${opacityClass}`]: opacityClass !== undefined, + }); + + const bgColorStyles = { + backgroundColor: isHexColor(bgColor) ? bgColor : undefined, + }; + + const GetBgImage = ( + <> + {(bgImage || bgImageTablet || bgImageMobile) && ( + + )} + + + ); + //幅のクラス切り替え // eslint-disable-next-line prefer-const const classWidth = `vk_outer-width-${outerWidth}`; @@ -143,11 +189,6 @@ export default function OuterEdit(props) { setAttributes({ borderColor: '#fff' }); } - //bgColorクリア時に白をセットする - if (bgColor === null || bgColor === undefined) { - setAttributes({ bgColor: '#f3f4f5' }); - } - //Dividerエフェクトがない時のみ枠線を追 let borderStyleProperty = {}; @@ -158,7 +199,12 @@ export default function OuterEdit(props) { borderStyle !== 'none' ) { borderStyleProperty = { - border: `${borderWidth}px ${borderStyle} ${borderColor}`, + borderWidth: `${borderWidth}px`, + borderStyle: `${borderStyle}`, + borderColor: + isHexColor(borderColor) && borderColor + ? borderColor + : undefined, borderRadius: `${borderRadius}px`, }; //eslint-disable-next-line camelcase @@ -171,7 +217,14 @@ export default function OuterEdit(props) { } const blockProps = useBlockProps({ - className: `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, + className: classnames( + `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, + { + [`has-border-color`]: borderColor !== undefined, + [`has-${borderColor}-border-color`]: + borderColor !== undefined && !isHexColor(borderColor), + } + ), style: borderStyleProperty, }); @@ -190,12 +243,7 @@ export default function OuterEdit(props) { 'vk-blocks' )} > - - setAttributes({ bgColor: value }) - } - /> + - - setAttributes({ - upperDividerBgColor: value, - }) - } + - - setAttributes({ - lowerDividerBgColor: value, - }) - } + @@ -520,11 +560,9 @@ export default function OuterEdit(props) { /> - - setAttributes({ borderColor: value }) - } +
- + {GetBgImage}
{componentDivider( upper_level, diff --git a/src/blocks/_pro/outer/index.js b/src/blocks/_pro/outer/index.js index 49043288d..853b0aa58 100644 --- a/src/blocks/_pro/outer/index.js +++ b/src/blocks/_pro/outer/index.js @@ -10,6 +10,7 @@ import metadata from './block.json'; import edit from './edit'; import save from './save'; import deprecated from './deprecated/'; +import deprecatedHooks from './deprecated/hooks/'; const { name } = metadata; @@ -51,13 +52,13 @@ const generateInlineCss = (attributes) => { padding-left:${innerSideSpaceValueMobile}${innerSideSpaceUnit}; padding-right:${innerSideSpaceValueMobile}${innerSideSpaceUnit}; } - @media (min-width: 577px) { + @media (min-width: 576px) { ${containerSelector}{ padding-left:${innerSideSpaceValueTablet}${innerSideSpaceUnit}; padding-right:${innerSideSpaceValueTablet}${innerSideSpaceUnit}; } } - @media (min-width: 769px) { + @media (min-width: 992px) { ${containerSelector}{ padding-left:${innerSideSpaceValuePC}${innerSideSpaceUnit}; padding-right:${innerSideSpaceValuePC}${innerSideSpaceUnit}; @@ -115,6 +116,16 @@ addFilter( ); } + + //後方互換 + let DeprecatedHook; + // Deprecated Hooks が Deprecated Save関数より少ない場合にエラーが出ないように。 + if (deprecatedHooks.length > deprecatedFuncIndex) { + DeprecatedHook = deprecatedHooks[deprecatedFuncIndex]; + } else { + DeprecatedHook = deprecatedHooks[deprecatedHooks.length - 1]; + } + return ; } return el; }, diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js index 956a0fa48..89609b1c3 100644 --- a/src/blocks/_pro/outer/save.js +++ b/src/blocks/_pro/outer/save.js @@ -1,14 +1,33 @@ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ import { componentDivider } from './component-divider'; -import GenerateBgImage from '@vkblocks/utils/GenerateBgImage'; +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, upper_level, //eslint-disable-line camelcase lower_level, //eslint-disable-line camelcase upperDividerBgColor, @@ -27,6 +46,35 @@ export default function save(props) { let whichSideUpper; let whichSideLower; + const opacityClass = opacity && opacity * 10; + const bgColorClasses = classnames({ + [`has-background`]: bgColor !== undefined, + [`has-${bgColor}-background-color`]: + bgColor !== undefined && !isHexColor(bgColor), + [`has-background-dim`]: opacity !== undefined, + [`has-background-dim-${opacityClass}`]: opacityClass !== undefined, + }); + + const bgColorStyles = { + backgroundColor: isHexColor(bgColor) && bgColor ? bgColor : undefined, + }; + + const GetBgImage = ( + <> + {(bgImage || bgImageTablet || bgImageMobile) && ( + + )} + + + ); + //幅のクラス切り替え const classWidth = `vk_outer-width-${outerWidth}`; @@ -88,7 +136,12 @@ export default function save(props) { borderStyle !== 'none' ) { borderStyleProperty = { - border: `${borderWidth}px ${borderStyle} ${borderColor}`, + borderWidth: `${borderWidth}px`, + borderStyle: `${borderStyle}`, + borderColor: + isHexColor(borderColor) && borderColor + ? borderColor + : undefined, borderRadius: `${borderRadius}px`, }; //eslint-disable-next-line camelcase @@ -101,16 +154,19 @@ export default function save(props) { } const blockProps = useBlockProps.save({ - className: `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, + className: classnames( + `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`, + { + [`has-border-color`]: borderColor !== undefined, + [`has-${borderColor}-border-color`]: + borderColor !== undefined && !isHexColor(borderColor), + } + ), style: borderStyleProperty, }); return (
- + {GetBgImage}
{componentDivider( upper_level, diff --git a/src/blocks/_pro/outer/style.scss b/src/blocks/_pro/outer/style.scss index c9243229b..68ad0f904 100644 --- a/src/blocks/_pro/outer/style.scss +++ b/src/blocks/_pro/outer/style.scss @@ -20,12 +20,41 @@ $media-xxl-down: 1399.98px; background-repeat: no-repeat; position: relative; transform: translateZ(0); // Safari 1px bug 対応 + + .has-background-dim::before { + content: ""; + z-index: 1; + } + + // 背景色が選択されていない時 + .vk_outer-background-area:not([class*=-background-color]) { + background-color: #f3f4f5; + } + + .vk_outer-background-area, + .has-background-dim::before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0.5; + } + + @for $i from 0 through 10 { + .has-background-dim-#{ $i } { + opacity: $i * 0.1; + } + } + .vk_outer_container { + position: relative; min-height: 40px; - h1:first-child, - h2:first-child, - h3:first-child, - h4:first-child, + z-index: 1; + h1:first-child, + h2:first-child, + h3:first-child, + h4:first-child, h5:first-child {//他テーマ用 margin-top: 0; } @@ -33,7 +62,7 @@ $media-xxl-down: 1399.98px; } // これがないとレスポンシブスペーサーの共通高さが検出しない。 .vk_outer{ - display:block; + display:block; overflow:hidden; } //iOS Safari での1pxズレの予防のため　Only Safari 10.1+ diff --git a/src/utils/GenerateBgImage.js b/src/utils/GenerateBgImage.js index ab89baccf..7462e6c6e 100644 --- a/src/utils/GenerateBgImage.js +++ b/src/utils/GenerateBgImage.js @@ -1,3 +1,13 @@ +/** + * GenerateBgImage deprecated + * + * save.jsに反映される内容がutils内にあると互換性対応が出来ないので各ブロック内に移植 + * + * 以下で使用 + * Outer 0.60.0-1.26.0 + * Slider Item 0.0.0-1.22.1 + * 関連 #925 #950 #1032 + */ import hex2rgba from './hex-to-rgba'; const GenerateBgImage = (props) => { const { attributes, clientId, prefix } = props; diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html index b0561f421..9c658a91e 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html @@ -1,30 +1,30 @@ - -
+ \ No newline at end of file diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-25-0.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-25-0.html new file mode 100644 index 000000000..b0561f421 --- /dev/null +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-25-0.html @@ -0,0 +1,30 @@ + +
+ \ No newline at end of file