diff --git a/src/plugins/expressive-code/explain-code.js b/src/plugins/expressive-code/explain-code.js
index 4329b070578..b75f1c3b04c 100644
--- a/src/plugins/expressive-code/explain-code.js
+++ b/src/plugins/expressive-code/explain-code.js
@@ -157,14 +157,12 @@ export default () => {
 					context.renderData.blockAst
 				);
 
+				// Expressive Code frames plugin is required for explain button to work correctly. Ignore if it's not present.
 				if (
 					blockAst.tagName !== "figure" ||
 					!Array.isArray(blockAst.properties?.className) ||
 					!blockAst.properties.className.includes("frame")
 				) {
-					console.warn(
-						"Expressive Code frames plugin is required for explain button to work correctly",
-					);
 					return;
 				}
 
diff --git a/src/scripts/explain-code.ts b/src/scripts/explain-code.ts
index 320c0312c9b..26a0ace5fe8 100644
--- a/src/scripts/explain-code.ts
+++ b/src/scripts/explain-code.ts
@@ -1,8 +1,20 @@
 import "../components/explain-code-sheet/explain-code-sheet";
 
 function getCodeBlockPosition(button: HTMLElement): number {
-	const codeBlocks = document.querySelectorAll(".expressive-code");
-	const currentBlock = button.closest(".expressive-code");
+	const wrapperSelector = ".explain";
+	const codeSelector = "pre code";
+	const codeBlocks = document.querySelectorAll(codeSelector);
+	const wrapper = button.closest(wrapperSelector);
+
+	let currentBlock = wrapper?.previousElementSibling;
+	while (currentBlock) {
+		if (currentBlock.tagName === "PRE") {
+			currentBlock = currentBlock.querySelector(codeSelector);
+			console.log(currentBlock);
+			break;
+		}
+		currentBlock = currentBlock.previousElementSibling;
+	}
 	if (!currentBlock) return 1;
 	return Array.from(codeBlocks).indexOf(currentBlock) + 1;
 }