ベクトル製以外のテーマでは 編集画面の挙動がおかしいブロックがあるのを修正

inc/vk-blocks/load-vk-components.php

@@ -8,27 +8,57 @@
 use VektorInc\VK_Component\VK_Component_Posts;
 
 /**
- * Boostrapの読み込み
+ * VK Components(Bootstrap) を読み込むべきか判定
  *
- * @param string $hook_suffix hook suffix.
+ * @return bool 読み込む場合 true、読み込まない場合 false
  */
-function vk_blocks_load_vk_components( $hook_suffix ) {
+function vk_blocks_should_load_vk_components() {
 	$template = wp_get_theme()->Template;
-	// lightning 系（ベクトル）の場合 vk-components はテーマなどで読み込むので必要ない
-	if ( 'lightning' === $template || 'lightning-pro' === $template || 'katawara' === $template ) {
-		return;
-	}
+	// lightning 系（ベクトル）の場合 vk-components はテーマなどで読み込むので適用しない
+	$should_load = ! in_array( $template, array( 'lightning', 'lightning-pro', 'katawara' ), true );
+
+	return apply_filters( 'vk_blocks_should_load_vk_components', $should_load );
+}
+
+// 条件に合わなければここで return することで、以降の処理を実行しない
+if ( ! vk_blocks_should_load_vk_components() ) {
+	return;
+}
 
+/**
+ * VK Components(Bootstrap) の登録 & 読み込み
+ */
+function vk_blocks_register_vk_components_style() {
 	VK_Component_Posts::register_style( 'vk-components-style' );
+}
+add_action( 'init', 'vk_blocks_register_vk_components_style' );
 
+/**
+ * VK Components(Bootstrap) を管理画面とフロントに適用
+ *
+ * @param string $hook_suffix hook suffix.
+ */
+function vk_blocks_enqueue_vk_components_style( $hook_suffix ) {
 	// 管理画面
-	if ( is_admin() ) {
-		if ( 'post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) {
-			wp_enqueue_style( 'vk-components-style' );
-		}
-	} else {
+	if ( is_admin() && in_array( $hook_suffix, array( 'post.php', 'post-new.php' ), true ) ) {
 		wp_enqueue_style( 'vk-components-style' );
+	} elseif ( ! is_admin() ) {
+		wp_enqueue_style( 'vk-components-style' );
+	}
+}
+add_action( 'admin_enqueue_scripts', 'vk_blocks_enqueue_vk_components_style' );
+add_action( 'wp_enqueue_scripts', 'vk_blocks_enqueue_vk_components_style' );
+
+/**
+ * エディター用の VK Components(Bootstrap) を適用
+ */
+function vk_blocks_enqueue_vk_components_editor_style() {
+	// スタイルが登録されていない場合は登録
+	if ( ! wp_style_is( 'vk-components-style', 'registered' ) ) {
+		VK_Component_Posts::register_style( 'vk-components-style' );
 	}
+
+	// スタイルを適用
+	wp_enqueue_style( 'vk-components-style' );
 }
-add_action( 'admin_enqueue_scripts', 'vk_blocks_load_vk_components' );
-add_action( 'wp_enqueue_scripts', 'vk_blocks_load_vk_components' );
+add_action( 'enqueue_block_assets', 'vk_blocks_enqueue_vk_components_editor_style' );

src/blocks/_pro/post-list-slider/edit.js

@@ -1,4 +1,4 @@
-/* globals vk_block_post_type_params */
+/* globals MutationObserver, vk_block_post_type_params */
 // import WordPress Scripts
 import { __ } from '@wordpress/i18n';
 import {
@@ -65,6 +65,54 @@ export default function PostListSliderEdit(props) {
 		}
 	}, [layout]);
 
+	const disableLinks = () => {
+		// iframe内のドキュメントを取得
+		const iframe = document.querySelector(
+			'.block-editor-iframe__container iframe'
+		);
+
+		const iframeDocument = iframe.contentWindow.document;
+
+		const links = iframeDocument.querySelectorAll(
+			'.vk_post  a, .card-intext .card-intext-inner, .postListText_singleTermLabel_inner'
+		);
+		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, {
+				childList: true,
+				subtree: true,
+			});
+		}
+
+		// 初回およびattributesの変更時にリンクを無効化
+		disableLinks();
+
+		// クリーンアップ関数
+		return () => {
+			observer.disconnect(); // 監視を停止
+		};
+	}, [attributes]);
+
 	return (
 		<>
 			<BlockControls>
@@ -307,6 +355,7 @@ export default function PostListSliderEdit(props) {
 				<ServerSideRender
 					block="vk-blocks/post-list-slider"
 					attributes={attributes}
+					onRendered={disableLinks}
 				/>
 			</div>
 		</>

src/blocks/_pro/post-list/edit.js

@@ -17,10 +17,16 @@ export default function PostListEdit(props) {
 
 	const blockProps = useBlockProps();
 
-	// リンクを無効にする関数
 	const disableLinks = () => {
-		const links = document.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'
+		// iframe内のドキュメントを取得
+		const iframe = document.querySelector(
+			'.block-editor-iframe__container iframe'
+		);
+
+		const iframeDocument = iframe.contentWindow.document;
+
+		const links = iframeDocument.querySelectorAll(
+			'.vk_post  a, .card-intext .card-intext-inner, .postListText_singleTermLabel_inner'
 		);
 		links.forEach((link) => {
 			link.addEventListener('click', (event) => {
@@ -38,9 +44,17 @@ export default function PostListEdit(props) {
 		// MutationObserverでDOMの変化を監視
 		const observer = new MutationObserver(disableLinks);
 
-		// body全体を監視
-		const targetNode = document.querySelector('body');
-		observer.observe(targetNode, { childList: true, subtree: true });
+		// iframeの中身を監視
+		const iframe = document.querySelector(
+			'.block-editor-iframe__container iframe'
+		);
+		if (iframe && iframe.contentWindow) {
+			const iframeDocument = iframe.contentWindow.document;
+			observer.observe(iframeDocument.body, {
+				childList: true,
+				subtree: true,
+			});
+		}
 
 		// 初回およびattributesの変更時にリンクを無効化
 		disableLinks();

src/blocks/_pro/tab/edit.js

@@ -210,6 +210,11 @@ export default function TabEdit(props) {
 
 	const liOnClick = (e) => {
 		if (childBlocks) {
+			const iframe = document.querySelector(
+				'.block-editor-iframe__container iframe'
+			);
+			const iframeDocument = iframe?.contentWindow?.document;
+
 			const vkTab = e.target.closest('.vk_tab');
 			const vkTabLabels = vkTab.querySelector('.vk_tab_labels');
 
@@ -250,7 +255,9 @@ export default function TabEdit(props) {
 			);
 			newActiveLabel.style.removeProperty('background-color');
 
-			const activeTabBody = document.querySelector(`#block-${TabId}`);
+			const activeTabBody = iframeDocument.querySelector(
+				`#block-${TabId}`
+			);
 			const activeTabBodyStyle = window.getComputedStyle(activeTabBody);
 			if (
 				!newActiveLabel
@@ -392,23 +399,21 @@ export default function TabEdit(props) {
 							const activeTabBody = document.querySelector(
 								`#block-${childBlock.attributes.blockId}`
 							);
-							const activeTabBodyStyle =
-								window.getComputedStyle(activeTabBody);
-							if (
-								!e.currentTarget
-									.closest('.vk_tab')
-									.classList.contains(
-										'is-style-vk_tab_labels-line'
-									)
-							) {
-								e.currentTarget.style.backgroundColor =
-									activeTabBodyStyle.borderTopColor || '';
+							// Only proceed if activeTabBody is a valid element
+							if (activeTabBody) {
+								const activeTabBodyStyle = window.getComputedStyle(activeTabBody);
+								if (
+									!e.currentTarget
+										.closest('.vk_tab')
+										.classList.contains('is-style-vk_tab_labels-line')
+								) {
+									e.currentTarget.style.backgroundColor =
+										activeTabBodyStyle.borderTopColor || '';
+								}
 							}
-							e.currentTarget.classList.add(
-								'hovered-temp-active'
-							);
+							e.currentTarget.classList.add('hovered-temp-active');
 						}
-					}}
+					}}					
 					onMouseOut={(e) => {
 						if (
 							!e.currentTarget.classList.contains(
@@ -444,23 +449,21 @@ export default function TabEdit(props) {
 							const activeTabBody = document.querySelector(
 								`#block-${childBlock.attributes.blockId}`
 							);
-							const activeTabBodyStyle =
-								window.getComputedStyle(activeTabBody);
-							if (
-								!e.currentTarget
-									.closest('.vk_tab')
-									.classList.contains(
-										'is-style-vk_tab_labels-line'
-									)
-							) {
-								e.currentTarget.style.backgroundColor =
-									activeTabBodyStyle.borderTopColor || '';
+							// activeTabBodyが存在する場合のみ、getComputedStyleを実行する
+							if (activeTabBody) {
+								const activeTabBodyStyle = window.getComputedStyle(activeTabBody);
+								if (
+									!e.currentTarget
+										.closest('.vk_tab')
+										.classList.contains('is-style-vk_tab_labels-line')
+								) {
+									e.currentTarget.style.backgroundColor =
+										activeTabBodyStyle.borderTopColor || '';
+								}
 							}
-							e.currentTarget.classList.add(
-								'hovered-temp-active'
-							);
+							e.currentTarget.classList.add('hovered-temp-active');
 						}
-					}}
+					}}					
 					onBlur={(e) => {
 						if (
 							!e.currentTarget.classList.contains(

src/blocks/_pro/table-of-contents-new/style.scss

@@ -167,6 +167,9 @@ $toc-left-margin: 1rem;
 /*      編集画面
 /*-------------------------------------------*/
 .editor-styles-wrapper {
+	.vk_tableOfContents .vk_tableOfContents_openCloseBtn{ // apiVersion: 3 でinline-blockが効かなくなっていたため
+		display: inline-block;
+	}
 	input:checked~.button_status-open {
 		~ .tab_content-open {
 			max-height: 0;
@@ -179,4 +182,4 @@ $toc-left-margin: 1rem;
 			padding: 1em;
 		}
 	}
-}	
+}

src/blocks/slider/edit-slider.js

@@ -308,10 +308,15 @@ const editorRootLaunch = (editorRoot) => {
 
 export const editSliderLaunch = () => {
 	const blockEditorRoot = document.querySelector(
-		'.block-editor .is-root-container'
+		'.block-editor__container iframe'
 	);
-	if (blockEditorRoot) {
-		editorRootLaunch(blockEditorRoot);
+	if (blockEditorRoot && blockEditorRoot.contentWindow) {
+		const editorRoot = blockEditorRoot.contentWindow.document.querySelector(
+			'.block-editor-block-list__layout'
+		);
+		if (editorRoot) {
+			editorRootLaunch(editorRoot);
+		}
 	}
 	const iframe = document.querySelector('#site-editor iframe');
 	if (iframe) {