diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot index 8e88cac82..43842d1cd 100644 --- a/inc/vk-blocks/languages/vk-blocks-js.pot +++ b/inc/vk-blocks/languages/vk-blocks-js.pot @@ -286,7 +286,7 @@ msgstr "" #: src/blocks/_pro/grid-column-item/edit.js:139 #: src/blocks/_pro/outer/edit.js:318 -#: src/blocks/_pro/slider-item/edit.js:78 +#: src/blocks/_pro/slider-item/edit.js:110 msgid "Padding (Left and Right)" msgstr "" @@ -425,40 +425,40 @@ msgid "Text" msgstr "" #: src/blocks/_pro/outer/edit.js:182 -#: src/blocks/_pro/slider-item/edit.js:125 +#: src/blocks/_pro/slider-item/edit.js:157 msgid "Background Setting" msgstr "" #: src/blocks/_pro/outer/edit.js:187 -#: src/blocks/_pro/slider-item/edit.js:129 +#: src/blocks/_pro/slider-item/edit.js:161 #: src/blocks/pr-content/edit.js:66 msgid "Color Setting" msgstr "" #: src/blocks/_pro/outer/edit.js:188 -#: src/blocks/_pro/slider-item/edit.js:131 +#: src/blocks/_pro/slider-item/edit.js:163 msgid "" "Color will overcome background image. If you want to display image, clear " "background color or set opacity 0." msgstr "" #: src/blocks/_pro/outer/edit.js:201 -#: src/blocks/_pro/slider-item/edit.js:144 +#: src/blocks/_pro/slider-item/edit.js:171 msgid "Opacity Setting" msgstr "" #: src/blocks/_pro/outer/edit.js:215 -#: src/blocks/_pro/slider-item/edit.js:179 +#: src/blocks/_pro/slider-item/edit.js:206 msgid "Background Image PC" msgstr "" #: src/blocks/_pro/outer/edit.js:231 -#: src/blocks/_pro/slider-item/edit.js:195 +#: src/blocks/_pro/slider-item/edit.js:222 msgid "Background Image Tablet" msgstr "" #: src/blocks/_pro/outer/edit.js:241 -#: src/blocks/_pro/slider-item/edit.js:205 +#: src/blocks/_pro/slider-item/edit.js:232 msgid "Background Image Mobile" msgstr "" @@ -483,7 +483,7 @@ msgid "Parallax (Non-guaranteed)" msgstr "" #: src/blocks/_pro/outer/edit.js:289 -#: src/blocks/_pro/slider-item/edit.js:73 +#: src/blocks/_pro/slider-item/edit.js:105 #: src/blocks/pr-content/edit.js:225 msgid "Layout Setting" msgstr "" @@ -750,32 +750,32 @@ msgstr "" msgid "Input Internal Post URL" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:111 -msgid "Vertical align" +#: src/blocks/_pro/slider-item/edit.js:114 +msgid "Fit to the Container area" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:158 -msgid "Background Image Size" +#: src/blocks/_pro/slider-item/edit.js:121 +msgid "Add padding to the Slider area" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:165 -msgid "cover" +#: src/blocks/_pro/slider-item/edit.js:128 +msgid "Remove padding from the Slider area" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:169 -msgid "repeat" +#: src/blocks/_pro/slider-item/edit.js:143 +msgid "Vertical align" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:82 -msgid "Fit to the Container area" +#: src/blocks/_pro/slider-item/edit.js:185 +msgid "Background Image Size" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:89 -msgid "Add padding to the Slider area" +#: src/blocks/_pro/slider-item/edit.js:192 +msgid "cover" msgstr "" -#: src/blocks/_pro/slider-item/edit.js:96 -msgid "Remove padding from the Slider area" +#: src/blocks/_pro/slider-item/edit.js:196 +msgid "repeat" msgstr "" #: src/blocks/_pro/slider/edit.js:106 diff --git a/readme.txt b/readme.txt index 9cf66b7f9..a1b08469c 100644 --- a/readme.txt +++ b/readme.txt @@ -63,6 +63,8 @@ e.g. == Changelog == +[ fix ][ Slider(Pro) ] cope with custom color palette + = 1.22.3 = [ Bug fix ][ core/heading ] fix width diff --git a/src/blocks/_pro/slider-item/GenerateBgImage.js b/src/blocks/_pro/slider-item/GenerateBgImage.js new file mode 100644 index 000000000..21703a997 --- /dev/null +++ b/src/blocks/_pro/slider-item/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/slider-item/block.json b/src/blocks/_pro/slider-item/block.json index 35903d8e8..96bebf2af 100644 --- a/src/blocks/_pro/slider-item/block.json +++ b/src/blocks/_pro/slider-item/block.json @@ -12,8 +12,7 @@ "default": "center" }, "bgColor": { - "type": "string", - "default": "#ffffff" + "type": "string" }, "bgImage": { "type": "string", diff --git a/src/blocks/_pro/slider-item/deprecated/1.22.1/save.js b/src/blocks/_pro/slider-item/deprecated/1.22.1/save.js new file mode 100644 index 000000000..8ab7a7547 --- /dev/null +++ b/src/blocks/_pro/slider-item/deprecated/1.22.1/save.js @@ -0,0 +1,43 @@ +/* eslint camelcase: 0 */ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import GenerateBgImage from '@vkblocks/utils/GenerateBgImage'; +const prefix = 'vk_slider_item'; + +export default function save(props) { + const { attributes } = props; + const { verticalAlignment, padding_left_and_right, clientId } = attributes; + let classPaddingLR; + let containerClass; + + //classPaddingLRのクラス切り替え + classPaddingLR = ''; + if (padding_left_and_right === '0') { + classPaddingLR = ` ${prefix}-paddingLR-none`; + } else if (padding_left_and_right === '1') { + classPaddingLR = ` ${prefix}-paddingLR-use`; + } else if (padding_left_and_right === '2') { + // Fit to content area width + classPaddingLR = ` ${prefix}-paddingLR-zero`; + } + + if ( + classPaddingLR === ` ${prefix}-paddingLR-none` || + classPaddingLR === '' + ) { + containerClass = `${prefix}_container container`; + } else { + containerClass = `${prefix}_container`; + } + + const blockProps = useBlockProps.save({ + className: `vk_slider_item swiper-slide vk_valign-${verticalAlignment} ${prefix}-${clientId} ${classPaddingLR} ${prefix}-paddingVertical-none`, + }); + return ( +
+ +
+ +
+
+ ); +} diff --git a/src/blocks/_pro/slider-item/deprecated/index.js b/src/blocks/_pro/slider-item/deprecated/index.js index 0b840651c..8cf3efec6 100644 --- a/src/blocks/_pro/slider-item/deprecated/index.js +++ b/src/blocks/_pro/slider-item/deprecated/index.js @@ -1,6 +1,7 @@ /* eslint camelcase: 0 */ import save0_0_0 from './0.0.0/save'; import save0_60_1 from './0.60.1/save'; +import save1_22_1 from './1.22.1/save'; const blockAttributes = { verticalAlignment: { @@ -68,7 +69,20 @@ const blockAttributes2 = { }, } +const blockAttributes3 = { + ...blockAttributes, + bgColor: { + type: 'string', + }, +} + export default [ + { + attributes: { + ...blockAttributes3 + }, + save: save1_22_1, + }, { attributes: { ... blockAttributes diff --git a/src/blocks/_pro/slider-item/edit.js b/src/blocks/_pro/slider-item/edit.js index cc5d98bcb..3b7d6b4e8 100644 --- a/src/blocks/_pro/slider-item/edit.js +++ b/src/blocks/_pro/slider-item/edit.js @@ -5,7 +5,6 @@ import { InspectorControls, BlockControls, BlockVerticalAlignmentToolbar, - ColorPalette, InnerBlocks, useBlockProps, } from '@wordpress/block-editor'; @@ -16,7 +15,10 @@ import { BaseControl, } from '@wordpress/components'; import { AdvancedMediaUpload } from '@vkblocks/components/advanced-media-upload'; -import GenerateBgImage from '@vkblocks/utils/GenerateBgImage'; +import GenerateBgImage from './GenerateBgImage'; +import { isHexColor } from '@vkblocks/utils/is-hex-color'; +import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette'; + const prefix = 'vk_slider_item'; export default function SliderItemEdit(props) { @@ -27,6 +29,9 @@ export default function SliderItemEdit(props) { opacity, padding_left_and_right, bgSize, + bgImageMobile, + bgImageTablet, + bgImage, } = attributes; useEffect(() => { @@ -54,8 +59,37 @@ export default function SliderItemEdit(props) { containerClass = `${prefix}_container`; } + const bgColorClasses = []; + let style; + if (bgColor !== undefined) { + bgColorClasses.push('has-background'); + if (!isHexColor(bgColor)) { + bgColorClasses.push(`has-${bgColor}-background-color`); + } else { + style = { backgroundColor: bgColor }; + } + } + + if (opacity !== undefined) { + const opacityClass = opacity * 10; + bgColorClasses.push('has-background-dim'); + bgColorClasses.push(`has-background-dim-${opacityClass}`); + } + + let GetBgImage; + if (bgImage || bgImageTablet || bgImageMobile) { + GetBgImage = ( + + ); + } else { + GetBgImage =
; + } + const blockProps = useBlockProps({ - className: `vk_slider_item swiper-slide vk_valign-${verticalAlignment} ${prefix}-${clientId} ${classPaddingLR} ${prefix}-paddingVertical-none`, + className: `vk_slider_item swiper-slide vk_valign-${verticalAlignment} ${prefix}-${clientId} ${classPaddingLR} ${prefix}-paddingVertical-none ${bgColorClasses.join( + ' ' + )}`, + style, }); return ( @@ -133,12 +167,7 @@ export default function SliderItemEdit(props) { 'vk-blocks' )} > - - setAttributes({ bgColor: value }) - } - /> +
- + {GetBgImage}
diff --git a/src/blocks/_pro/slider-item/save.js b/src/blocks/_pro/slider-item/save.js index 8ab7a7547..f4389412f 100644 --- a/src/blocks/_pro/slider-item/save.js +++ b/src/blocks/_pro/slider-item/save.js @@ -1,11 +1,21 @@ /* eslint camelcase: 0 */ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -import GenerateBgImage from '@vkblocks/utils/GenerateBgImage'; +import GenerateBgImage from './GenerateBgImage'; +import { isHexColor } from '@vkblocks/utils/is-hex-color'; const prefix = 'vk_slider_item'; export default function save(props) { const { attributes } = props; - const { verticalAlignment, padding_left_and_right, clientId } = attributes; + const { + verticalAlignment, + bgColor, + opacity, + padding_left_and_right, + bgImageMobile, + bgImageTablet, + bgImage, + clientId, + } = attributes; let classPaddingLR; let containerClass; @@ -29,12 +39,41 @@ export default function save(props) { containerClass = `${prefix}_container`; } + const bgColorClasses = []; + let style; + if (bgColor !== undefined) { + bgColorClasses.push('has-background'); + if (!isHexColor(bgColor)) { + bgColorClasses.push(`has-${bgColor}-background-color`); + } else { + style = { backgroundColor: bgColor }; + } + } + + if (opacity !== undefined) { + const opacityClass = opacity * 10; + bgColorClasses.push('has-background-dim'); + bgColorClasses.push(`has-background-dim-${opacityClass}`); + } + + let GetBgImage; + if (bgImage || bgImageTablet || bgImageMobile) { + GetBgImage = ( + + ); + } else { + GetBgImage =
; + } + const blockProps = useBlockProps.save({ - className: `vk_slider_item swiper-slide vk_valign-${verticalAlignment} ${prefix}-${clientId} ${classPaddingLR} ${prefix}-paddingVertical-none`, + className: `vk_slider_item swiper-slide vk_valign-${verticalAlignment} ${prefix}-${clientId} ${classPaddingLR} ${prefix}-paddingVertical-none ${bgColorClasses.join( + ' ' + )}`, + style, }); return (
- + {GetBgImage}
diff --git a/src/blocks/_pro/slider-item/style.scss b/src/blocks/_pro/slider-item/style.scss index bb89a64d5..83fa74774 100644 --- a/src/blocks/_pro/slider-item/style.scss +++ b/src/blocks/_pro/slider-item/style.scss @@ -4,7 +4,35 @@ /*-------------------------------------------*/ .vk_slider_item { + background-color: #ffffff; display: flex; + position: relative; + width: 100%; + @for $i from 0 through 10 { + &.has-background-dim-#{ $i }::before { + opacity: $i * 0.1; + } + } + + &.has-background-dim::before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + content: ""; + background-color: inherit; + } + + .vk_slider_item-background-area { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + } } .vk_slider_item-align-vertical- { @@ -47,6 +75,7 @@ $media-xxl-down: 1399.98px; .vk_slider_item_container { min-height: 40px; width: 100%; + z-index: 1; } } diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__slider__default.html b/test/e2e-tests/fixtures/blocks/vk-blocks__slider__default.html index 8d89a9b07..7ab3256d9 100644 --- a/test/e2e-tests/fixtures/blocks/vk-blocks__slider__default.html +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__slider__default.html @@ -1,37 +1,37 @@ - -
-

スライド1

- -
+ +

スライド2

diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__slider__deprecated-1-22-1.html b/test/e2e-tests/fixtures/blocks/vk-blocks__slider__deprecated-1-22-1.html new file mode 100644 index 000000000..8d89a9b07 --- /dev/null +++ b/test/e2e-tests/fixtures/blocks/vk-blocks__slider__deprecated-1-22-1.html @@ -0,0 +1,38 @@ + +
+
+

スライド1

+
+ + + +
+

スライド2

+
+
+ \ No newline at end of file