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 ( +