【outerのリンク設定が配信されるまで一旦draft/確認中】[ Outer ] 背景画像に焦点ピッカー追加

readme.txt

@@ -106,15 +106,17 @@ e.g.
 
 == Changelog ==
 
+[ Add function ][ Outer (Pro) ] Added the ability to set a focal point for background images.
+
 = 1.88.0 =
 [ Specification change ][ Grid Column Card (Pro) ] Changed the default settings of headerDisplay and footerDisplay from "Delete" to "Display".
 [ Specification change ] Add filter vk_post_taxonomies_html ( Update VK Components 1.6.1 )
 [ Bug fix ][ Link Component ] Fix adding "http://" with "tel:" and "mailto:" link.
 [ Bug fix ][ Slider ] Fix an issue where full width alignment does not work in tt4 and tt5.
 
 = 1.87.0 =
-[ Add function ][ Link Toolbar ] Added to skip retrieving metadata (title and favicon) for external links in link toolbar to prevent CORS errors.
 [ Add function ][ icon ] Add toolbar link for components.
+[ Bug fix ][ Link Toolbar ] Added to skip retrieving metadata (title and favicon) for external links in link toolbar to prevent CORS errors.
 [ Bug fix ][ Slider ] Adjusting the timing of loading swiper to prevent the slider from collapsing.
 [ Bug fix ][ Grid Column Card (Pro) ] Add translation.
 [ Bug fix ][ Category Badge (Pro) ] Added Pro label to the inserter.

src/blocks/_pro/outer/GenerateBgImage.js

@@ -1,103 +1,235 @@
 const GenerateBgImage = (props) => {
 	const { attributes, prefix } = props;
-	const { bgImageMobile, bgImageTablet, bgImage, bgSize, blockId } =
-		attributes;
+	const {
+		bgImageMobile,
+		bgImageTablet,
+		bgImage,
+		bgFocalPointPC,
+		bgFocalPointTablet,
+		bgFocalPointMobile,
+		bgSize,
+		blockId,
+		enableFocalPointPC,
+		enableFocalPointTablet,
+		enableFocalPointMobile,
+	} = attributes;
 
 	const mobileViewport = 'max-width: 575.98px';
 	const tabletViewport = 'min-width: 576px';
 	const pcViewport = 'min-width: 992px';
-	const underPcViewport = 'max-width: 992.98px';
+	// const underPcViewport = 'max-width: 992.98px'; FocalPoint設定のためにコメントアウト
+
+	// 背景位置の変換関数
+	const coordsToBackgroundPosition = (focalPoint) => {
+		if (!focalPoint || (isNaN(focalPoint.x) && isNaN(focalPoint.y))) {
+			return '50% 50%';
+		}
+		const x = isNaN(focalPoint.x) ? 0.5 : focalPoint.x;
+		const y = isNaN(focalPoint.y) ? 0.5 : focalPoint.y;
+		return `${x * 100}% ${y * 100}%`;
+	};
+
+	const defaultFocalPoint = { x: 0.5, y: 0.5 };
+	const getFocalPoint = (focalPoint, fallback) => focalPoint || fallback;
+
+	const focalPointPC = enableFocalPointPC
+		? getFocalPoint(bgFocalPointPC, defaultFocalPoint)
+		: defaultFocalPoint;
+
+	const focalPointTablet = enableFocalPointTablet
+		? getFocalPoint(bgFocalPointTablet, focalPointPC)
+		: focalPointPC;
+
+	const focalPointMobile = enableFocalPointMobile
+		? getFocalPoint(bgFocalPointMobile, focalPointTablet, focalPointPC)
+		: getFocalPoint(focalPointTablet, focalPointPC);
 
 	let backgroundStyle;
-	const backgroundPosition = 'background-position:center!important;';
 	if ('cover' === bgSize) {
-		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
+		backgroundStyle = `background-size:${bgSize}!important;`;
 	} else if ('repeat' === bgSize) {
-		backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`;
+		backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto;`;
 	} else {
 		backgroundStyle = ``;
 	}
 
-	//moible only
+	// モバイルのみ
 	if (bgImageMobile && !bgImageTablet && !bgImage) {
 		return (
-			<style>{`.${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+			<style>
+				{`
+				.${prefix}-${blockId} {
+					background-image: url(${bgImageMobile}) !important;
+					background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+					${backgroundStyle}
+					}
+				`}
+			</style>
 		);
 	}
-	//tablet only
+	// タブレットのみ
 	if (!bgImageMobile && bgImageTablet && !bgImage) {
 		return (
-			<style>{`.${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+			<style>
+				{`
+				.${prefix}-${blockId} {
+					background-image: url(${bgImageTablet}) !important;
+					background-position: ${coordsToBackgroundPosition(focalPointTablet)}!important;
+					${backgroundStyle}
+				}
+				@media screen and (${mobileViewport}) {
+				.${prefix}-${blockId} {
+					background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+					${backgroundStyle}
+				}
+				}
+				`}
+			</style>
 		);
 	}
-	//pc only
+	// PCのみ
 	if (!bgImageMobile && !bgImageTablet && bgImage) {
 		return (
-			<style>{`.${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}`}</style>
+			<style>
+				{`
+				.${prefix}-${blockId} {
+					background-image: url(${bgImage}) !important;
+					${backgroundStyle}
+				}
+				@media screen and (${mobileViewport}) {
+				.${prefix}-${blockId} {
+					background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+					${backgroundStyle}
+				}
+				}
+				@media screen and (${tabletViewport}) {
+				.${prefix}-${blockId} {
+					background-position: ${coordsToBackgroundPosition(focalPointTablet)}!important;
+					${backgroundStyle}
+				}
+				}
+				@media screen and (${pcViewport}) {
+				.${prefix}-${blockId} {
+					background-position: ${coordsToBackgroundPosition(focalPointPC)}!important;
+					${backgroundStyle}
+				}
+				}
+				`}
+			</style>
 		);
 	}
-	//pc -mobile
+	// PCとモバイル
 	if (bgImageMobile && !bgImageTablet && bgImage) {
 		return (
 			<style>
 				{`
-          @media screen and (${underPcViewport}) {
-            .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
-         }
-          @media screen and (${pcViewport}) {
-            .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
-         }
-          `}
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageMobile}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+            ${backgroundStyle}
+          }
+        }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${blockId} {
+            background-position: ${coordsToBackgroundPosition(focalPointTablet)}!important;
+            ${backgroundStyle}
+          }
+        }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImage}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointPC)}!important;
+            ${backgroundStyle}
+          }
+        }
+        `}
 			</style>
 		);
 	}
-	//pc -tablet
+	// PCとタブレット
 	if (!bgImageMobile && bgImageTablet && bgImage) {
 		return (
 			<style>
 				{`
-          @media screen and (${underPcViewport}) {
-            .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
-         }
-          @media screen and (${pcViewport}) {
-            .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
-         }
-          `}
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageTablet}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+            ${backgroundStyle}
+          }
+        }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageTablet}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointTablet)}!important;
+            ${backgroundStyle}
+          }
+        }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImage}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointPC)}!important;
+            ${backgroundStyle}
+          }
+        }
+        `}
 			</style>
 		);
 	}
-	//tablet - mobile
+	// タブレットとモバイル
 	if (bgImageMobile && bgImageTablet && !bgImage) {
 		return (
 			<style>
 				{`
-          @media screen and (${mobileViewport}) {
-            .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
-         }
-          @media screen and (${tabletViewport}) {
-            .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
-         }
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageMobile}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+            ${backgroundStyle}
+          }
+        }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageTablet}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointTablet)}!important;
+            ${backgroundStyle}
+          }
+        }
         `}
 			</style>
 		);
 	}
-	//pc -tablet - mobile
+	// PC、タブレット、モバイル
 	if (bgImageMobile && bgImageTablet && bgImage) {
 		return (
 			<style>
 				{`
         @media screen and (${mobileViewport}) {
-          .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
-       }
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageMobile}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointMobile)}!important;
+            ${backgroundStyle}
+          }
+        }
         @media screen and (${tabletViewport}) {
-          .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
-       }
+          .${prefix}-${blockId} {
+            background-image: url(${bgImageTablet}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointTablet)}!important;
+            ${backgroundStyle}
+          }
+        }
         @media screen and (${pcViewport}) {
-          .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
-       }
+          .${prefix}-${blockId} {
+            background-image: url(${bgImage}) !important;
+            background-position: ${coordsToBackgroundPosition(focalPointPC)}!important;
+            ${backgroundStyle}
+          }
+        }
         `}
 			</style>
 		);
 	}
 };
+
 export default GenerateBgImage;

src/blocks/_pro/outer/block.json

@@ -32,6 +32,30 @@
 			"type": "string",
 			"default": "normal"
 		},
+		"bgFocalPointPC": {
+			"type": "object",
+			"default": { "x": 0.5, "y": 0.5 }
+		},
+		"bgFocalPointTablet": {
+			"type": "object",
+			"default": { "x": 0.5, "y": 0.5 }
+		},
+		"bgFocalPointMobile": {
+			"type": "object",
+			"default": { "x": 0.5, "y": 0.5 }
+		},
+		"enableFocalPointPC": {
+			"type": "boolean",
+			"default": false
+		},
+		"enableFocalPointTablet": {
+			"type": "boolean",
+			"default": false
+		},
+		"enableFocalPointMobile": {
+			"type": "boolean",
+			"default": false
+		},
 		"padding_left_and_right": {
 			"type": "string",
 			"default": "0"

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.85.1
 	OuterHook1_60_0, // 1.76.0
 	OuterHook1_60_0, // 1.71.0
 	OuterHook1_60_0, // 1.64.0