【確認中】スライダーアイテムをカスタムカラーパレットに対応

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

inc/vk-blocks/languages/vk-blocks.pot

@@ -2,16 +2,16 @@
 # This file is distributed under the same license as the VK Blocks Pro plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: VK Blocks Pro 1.22.0\n"
+"Project-Id-Version: VK Blocks Pro 1.22.1\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2022-01-24T14:09:53+00:00\n"
+"POT-Creation-Date: 2022-01-25T02:52:11+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
-"X-Generator: WP-CLI 2.5.0-alpha-3f4c34b\n"
+"X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
 
 #: src/blocks/_pro/accordion/index.js:22
@@ -293,7 +293,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 ""
 
@@ -436,38 +436,38 @@ 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 ""
 
@@ -492,7 +492,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 ""
@@ -758,32 +758,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

readme.txt

@@ -63,6 +63,8 @@ e.g.
 
 == Changelog ==
 
+[ fix ][ Slider(Pro) ] cope with custom color palette
+
 = 1.22.1 =
 Cope with WordPress 5.9
 [ fix ][ Heading ] Make text size not auto-include when changing heading level

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 (
+			<style>{`.${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//tablet only
+	if (!bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc only
+	if (!bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc -mobile
+	if (bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//pc -tablet
+	if (!bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//tablet - mobile
+	if (bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${mobileViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${tabletViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+        `}
+			</style>
+		);
+	}
+	//pc -tablet - mobile
+	if (bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+       }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+       }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}
+       }
+        `}
+			</style>
+		);
+	}
+};
+export default GenerateBgImage;

src/blocks/_pro/slider-item/block.json

@@ -12,8 +12,7 @@
 			"default": "center"
 		},
 		"bgColor": {
-			"type": "string",
-			"default": "#ffffff"
+			"type": "string"
 		},
 		"bgImage": {
 			"type": "string",