Merge pull request #2458 from vektor-inc/fix/apiVersion3/iframe

[ 投稿リスト / 投稿リストスライダー / タブ /スライダー ] 編集画面の環境がiframeであるかないか関わらずエラーが出たり機能が安定して動作するよう修正
vektor-inc · Feb 21, 2025 · de7b192 · de7b192
2 parents 675f65f + 5a01230
commit de7b192
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 61 deletions.
diff --git a/readme.txt b/readme.txt
@@ -108,6 +108,8 @@ e.g.
 
 == Changelog ==
 
+[ Bug fix ][ Post list (Pro) / Post list slider (Pro) / Tab (Pro) / Slider ] Fixed errors occurring regardless of whether the editing screen environment is in an iframe and improved the stability of feature performance.
+
 = 1.96.1 =
 [ Other ] Rollback 1.95.0.3
 

diff --git a/src/blocks/_pro/post-list-slider/edit.js b/src/blocks/_pro/post-list-slider/edit.js
@@ -65,40 +65,39 @@ export default function PostListSliderEdit(props) {
 		}
 	}, [layout]);
 
+	// リンクを無効にする関数
 	const disableLinks = () => {
-		// iframe内のドキュメントを取得
+		// iframe の有無を確認して適切なドキュメントを取得
 		const iframe = document.querySelector(
 			'.block-editor-iframe__container iframe'
 		);
+		const targetDocument = iframe?.contentWindow?.document || document;
 
-		const iframeDocument = iframe.contentWindow.document;
-
-		const links = iframeDocument.querySelectorAll(
-			'.vk_post  a, .card-intext .card-intext-inner, .postListText_singleTermLabel_inner'
+		const links = targetDocument.querySelectorAll(
+			'.vk_post_imgOuter a, .vk_post .vk_post_title a, .postListText_title a, .card-intext .card-intext-inner, .postListText_singleTermLabel_inner, .vk_post_btnOuter a'
 		);
 		links.forEach((link) => {
 			link.addEventListener('click', (event) => {
 				event.preventDefault();
 			});
 			link.style.cursor = 'default';
 			link.style.boxShadow = 'unset';
-
 			// ホバー効果を無効化
 			link.style.textDecorationColor = 'inherit';
 		});
 	};
 
 	useEffect(() => {
 		// MutationObserverでDOMの変化を監視
-		const observer = new MutationObserver(disableLinks);
-
-		// iframeの中身を監視
 		const iframe = document.querySelector(
 			'.block-editor-iframe__container iframe'
 		);
-		if (iframe && iframe.contentWindow) {
-			const iframeDocument = iframe.contentWindow.document;
-			observer.observe(iframeDocument.body, {
+		const targetDocument = iframe?.contentWindow?.document || document;
+		const observerTarget = targetDocument.querySelector('body');
+
+		const observer = new MutationObserver(disableLinks);
+		if (observerTarget) {
+			observer.observe(observerTarget, {
 				childList: true,
 				subtree: true,
 			});

diff --git a/src/blocks/_pro/post-list/edit.js b/src/blocks/_pro/post-list/edit.js
@@ -17,40 +17,39 @@ export default function PostListEdit(props) {
 
 	const blockProps = useBlockProps();
 
+	// リンクを無効にする関数
 	const disableLinks = () => {
-		// iframe内のドキュメントを取得
+		// iframe の有無を確認して適切なドキュメントを取得
 		const iframe = document.querySelector(
 			'.block-editor-iframe__container iframe'
 		);
+		const targetDocument = iframe?.contentWindow?.document || document;
 
-		const iframeDocument = iframe.contentWindow.document;
-
-		const links = iframeDocument.querySelectorAll(
-			'.vk_post  a, .card-intext .card-intext-inner, .postListText_singleTermLabel_inner'
+		const links = targetDocument.querySelectorAll(
+			'.vk_post_imgOuter a, .vk_post .vk_post_title a, .postListText_title a, .card-intext .card-intext-inner, .postListText_singleTermLabel_inner, .vk_post_btnOuter a'
 		);
 		links.forEach((link) => {
 			link.addEventListener('click', (event) => {
 				event.preventDefault();
 			});
 			link.style.cursor = 'default';
 			link.style.boxShadow = 'unset';
-
 			// ホバー効果を無効化
 			link.style.textDecorationColor = 'inherit';
 		});
 	};
 
 	useEffect(() => {
 		// MutationObserverでDOMの変化を監視
-		const observer = new MutationObserver(disableLinks);
-
-		// iframeの中身を監視
 		const iframe = document.querySelector(
 			'.block-editor-iframe__container iframe'
 		);
-		if (iframe && iframe.contentWindow) {
-			const iframeDocument = iframe.contentWindow.document;
-			observer.observe(iframeDocument.body, {
+		const targetDocument = iframe?.contentWindow?.document || document;
+		const observerTarget = targetDocument.querySelector('body');
+
+		const observer = new MutationObserver(disableLinks);
+		if (observerTarget) {
+			observer.observe(observerTarget, {
 				childList: true,
 				subtree: true,
 			});

diff --git a/src/blocks/_pro/tab/edit.js b/src/blocks/_pro/tab/edit.js
@@ -210,16 +210,28 @@ export default function TabEdit(props) {
 
 	const liOnClick = (e) => {
 		if (childBlocks) {
+			// iframeの有無を確認し、適切なdocumentを取得
 			const iframe = document.querySelector(
 				'.block-editor-iframe__container iframe'
 			);
-			const iframeDocument = iframe?.contentWindow?.document;
+			const targetDocument = iframe?.contentWindow?.document || document;
 
 			const vkTab = e.target.closest('.vk_tab');
+			if (!vkTab) {
+				return;
+			}
+
 			const vkTabLabels = vkTab.querySelector('.vk_tab_labels');
+			if (!vkTabLabels) {
+				return;
+			}
 
 			// ブロック ID を抽出
-			const TabLabelId = e.target.closest('.vk_tab_labels_label').id;
+			const TabLabelId = e.target.closest('.vk_tab_labels_label')?.id;
+			if (!TabLabelId) {
+				return;
+			}
+
 			const TabId = TabLabelId.replace('vk_tab_labels_label-', '');
 
 			/* ラベルの処理 */
@@ -249,23 +261,30 @@ export default function TabEdit(props) {
 			const newActiveLabel = vkTabLabels.querySelector(
 				`#vk_tab_labels_label-${TabId}`
 			);
-			newActiveLabel.classList.add('vk_tab_labels_label-state-active');
-			newActiveLabel.classList.remove(
-				'vk_tab_labels_label-state-inactive'
-			);
-			newActiveLabel.style.removeProperty('background-color');
+			if (newActiveLabel) {
+				newActiveLabel.classList.add(
+					'vk_tab_labels_label-state-active'
+				);
+				newActiveLabel.classList.remove(
+					'vk_tab_labels_label-state-inactive'
+				);
+				newActiveLabel.style.removeProperty('background-color');
+			}
 
-			const activeTabBody = iframeDocument.querySelector(
+			const activeTabBody = targetDocument.querySelector(
 				`#block-${TabId}`
 			);
-			const activeTabBodyStyle = window.getComputedStyle(activeTabBody);
-			if (
-				!newActiveLabel
-					.closest('.vk_tab')
-					.classList.contains('is-style-vk_tab_labels-line')
-			) {
-				newActiveLabel.style.backgroundColor =
-					activeTabBodyStyle.borderTopColor || '';
+			if (activeTabBody) {
+				const activeTabBodyStyle =
+					window.getComputedStyle(activeTabBody);
+				if (
+					!newActiveLabel
+						.closest('.vk_tab')
+						.classList.contains('is-style-vk_tab_labels-line')
+				) {
+					newActiveLabel.style.backgroundColor =
+						activeTabBodyStyle.borderTopColor || '';
+				}
 			}
 
 			/* 本体の処理 */

diff --git a/src/blocks/slider/edit-slider.js b/src/blocks/slider/edit-slider.js
@@ -75,6 +75,11 @@ const LaunchSwiper = (slider) => {
 				if (swiperButtonNext) {
 					swiperButtonNext.style.display = '';
 				}
+				const swiperPagination =
+					slider.querySelector('.swiper-pagination');
+				if (swiperPagination) {
+					swiperPagination.style.display = '';
+				}
 
 				// Sloder の設定を作成
 				const SwiperSetting = {};
@@ -211,7 +216,7 @@ const LaunchSwiper = (slider) => {
 				removeSwiperClassName(newSwiperDiv);
 			}
 
-			// 不要な wiper-wrapper クラスを削除
+			// 不要な swiper-wrapper クラスを削除
 			const newSwiperWrapper = slider.querySelector(
 				'.block-editor-block-list__layout'
 			);
@@ -243,6 +248,13 @@ const LaunchSwiper = (slider) => {
 			if (swiperButtonNext) {
 				swiperButtonNext.style.display = 'none';
 			}
+
+			// ページネーションの非表示
+			const swiperPagination = slider.querySelector('.swiper-pagination');
+			if (swiperPagination) {
+				swiperPagination.style.display = 'none';
+			}
+
 			if (swiper[sliderId]) {
 				swiper[sliderId].destroy();
 				swiper[sliderId] = null;
@@ -307,23 +319,21 @@ const editorRootLaunch = (editorRoot) => {
 };
 
 export const editSliderLaunch = () => {
-	const blockEditorRoot = document.querySelector(
-		'.block-editor__container iframe'
-	);
-	if (blockEditorRoot && blockEditorRoot.contentWindow) {
-		const editorRoot = blockEditorRoot.contentWindow.document.querySelector(
-			'.block-editor-block-list__layout'
-		);
-		if (editorRoot) {
-			editorRootLaunch(editorRoot);
-		}
+	const iframe = document.querySelector('.block-editor__container iframe');
+	const iframeDoc = iframe?.contentWindow?.document;
+	const editorRoot =
+		iframeDoc?.querySelector('.block-editor-block-list__layout') ||
+		document.querySelector('.block-editor-block-list__layout');
+
+	if (editorRoot) {
+		editorRootLaunch(editorRoot);
 	}
-	const iframe = document.querySelector('#site-editor iframe');
-	if (iframe) {
-		const siteEditorRoot =
-			iframe.contentWindow.document.querySelector('.is-root-container');
-		if (siteEditorRoot) {
-			editorRootLaunch(siteEditorRoot);
-		}
+
+	const siteIframe = document.querySelector('#site-editor iframe');
+	const siteEditorRoot =
+		siteIframe?.contentWindow?.document.querySelector('.is-root-container');
+
+	if (siteEditorRoot) {
+		editorRootLaunch(siteEditorRoot);
 	}
 };
diff --git a/src/blocks/slider/edit.js b/src/blocks/slider/edit.js
@@ -51,10 +51,16 @@ export default function SliderEdit(props) {
 		blockId,
 	} = attributes;
 
-	editSliderLaunch();
 	useEffect(() => {
-		editSliderLaunch();
-	}, [attributes]);
+		let timer;
+		if (editorMode) {
+			timer = setTimeout(() => {
+				editSliderLaunch();
+			}, 50);
+		}
+
+		return () => clearTimeout(timer);
+	}, [editorMode]);
 
 	useEffect(() => {
 		// attributes の clientId は使わなくなったので削除