removed deprecated element context mechanism

The new version of Gutenberg has removed the context element mechanism, so we can no longer use it. We replaced it with a classic ref with a search for the parent document of the DOM tree to get the context of the frame editor

assets/components/preview-server-callback/index.js

@@ -43,6 +43,7 @@ export default function PreviewServerCallback(props) {
 	const isMountedRef = useRef(true);
 	const currentFetchRequest = useRef(null);
 	const fetchTimeout = useRef();
+	const blockContentWrapper = useRef();
 
 	const prevProps = usePrevious(props);
 
@@ -228,12 +229,20 @@ export default function PreviewServerCallback(props) {
 		result = (
 			<>
 				{response ? (
-					<RenderBlockContent content={response} props={props} />
+					<RenderBlockContent
+						content={response}
+						props={props}
+						blockContentWrapper={blockContentWrapper}
+					/>
 				) : null}
 				{isLoading ? <Spinner /> : null}
 			</>
 		);
 	}
 
-	return <div className="lzb-preview-server">{result}</div>;
+	return (
+		<div ref={blockContentWrapper} className="lzb-preview-server">
+			{result}
+		</div>
+	);
 }

assets/components/preview-server-callback/render-block-content.js

@@ -15,17 +15,9 @@ import json5 from 'json5';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { isEqual } from 'lodash';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useEffect, useContext } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	InnerBlocks,
-	useInnerBlocksProps,
-	BlockList,
-} from '@wordpress/block-editor';
-
-const { elementContext: __stableElementContext, __unstableElementContext } =
-	BlockList;
-const elementContext = __stableElementContext || __unstableElementContext;
+import { InnerBlocks, useInnerBlocksProps } from '@wordpress/block-editor';
 
 const CONVERT_ATTRIBUTES = {
 	classname: 'className',
@@ -41,13 +33,10 @@ const CONVERT_TO_JSON = [
 ];
 
 function RenderScript(props) {
-	const { src = '', innerHTML = '' } = props;
-
-	const element = useContext(elementContext);
+	const { src = '', innerHTML = '', blockContentWrapper } = props;
 
 	useEffect(() => {
-		const doc = element?.ownerDocument || document;
-
+		const doc = blockContentWrapper.current?.ownerDocument || document;
 		const script = doc.createElement('script');
 
 		if (src) {
@@ -64,7 +53,7 @@ function RenderScript(props) {
 			// to prevent unwanted JS errors.
 			doc?.body?.removeChild(script);
 		};
-	}, [element, src, innerHTML]);
+	}, [blockContentWrapper, src, innerHTML]);
 }
 
 /**
@@ -116,7 +105,11 @@ function prepareAttributes(attrs) {
 	return newAttrs;
 }
 
-export default function RenderBlockContent({ content, props }) {
+export default function RenderBlockContent({
+	content,
+	props,
+	blockContentWrapper,
+}) {
 	const [innerBlocksOptions, setInnerBlocksOptions] = useState({});
 
 	const { hasChildBlocks } = useSelect(
@@ -207,6 +200,10 @@ export default function RenderBlockContent({ content, props }) {
 						scriptData.innerHTML = domNode.children[0].data;
 					}
 
+					if (typeof blockContentWrapper !== 'undefined') {
+						scriptData.blockContentWrapper = blockContentWrapper;
+					}
+
 					return <RenderScript {...scriptData} />;
 				}
 			},

assets/editor-constructor/boxes/code/fix-css-frame.js

@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useContext } from '@wordpress/element';
-import { BlockList } from '@wordpress/block-editor';
-
-const { elementContext: __stableElementContext, __unstableElementContext } =
-	BlockList;
-const elementContext = __stableElementContext || __unstableElementContext;
+import { useEffect } from '@wordpress/element';
 
 const STYLE_IDS = [
 	'autocompletion.css',
@@ -17,11 +12,11 @@ const STYLE_IDS = [
 	'ace_scrollbar.css',
 ];
 
-export default function FixCssFrame() {
-	const element = useContext(elementContext);
-
+export default function FixCssFrame(props) {
 	// Find available styles and save it to the state.
 	useEffect(() => {
+		const element = props.codeWrapper.current;
+
 		if (!element) {
 			return;
 		}
@@ -48,7 +43,7 @@ export default function FixCssFrame() {
 
 			documentFrame.head.appendChild(styleTag.cloneNode(true));
 		});
-	}, [element]);
+	}, [props]);
 
 	return null;
 }

assets/editor-constructor/boxes/code/index.js

@@ -7,7 +7,7 @@ import './editor.scss';
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
 import {
@@ -35,6 +35,7 @@ export default function CustomCodeSettings(props) {
 
 	const [showInfo, setShowInfo] = useState(false);
 	const [tab, setTab] = useState('frontend');
+	const $codeWrapper = useRef();
 
 	const { currentTheme } = useSelect(($select) => {
 		const { getCurrentTheme } = $select('core');
@@ -127,7 +128,7 @@ export default function CustomCodeSettings(props) {
 		`lzb.constructor.code-settings.output-code`,
 		data.code_output_method !== 'template' ? (
 			<>
-				<PanelBody>
+				<PanelBody ref={$codeWrapper}>
 					<BaseControl>
 						{tabs.length > 1 ? (
 							<TabPanel
@@ -152,7 +153,7 @@ export default function CustomCodeSettings(props) {
 								id: `lzb-editor-${data.code_output_method}`,
 							}}
 						/>
-						<FixCssFrame />
+						<FixCssFrame codeWrapper={$codeWrapper} />
 					</BaseControl>
 					<BaseControl>
 						{!showInfo ? (

assets/editor-constructor/boxes/controls/deselect-active-on-click-outside.js

@@ -1,19 +1,13 @@
 /**
  * WordPress dependencies.
  */
-import { useContext, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { select, dispatch } from '@wordpress/data';
-import { BlockList } from '@wordpress/block-editor';
-
-const { elementContext: __stableElementContext, __unstableElementContext } =
-	BlockList;
-
-const elementContext = __stableElementContext || __unstableElementContext;
-
-export default function DeselectActiveControlOnClickOutside() {
-	const element = useContext(elementContext);
 
+export default function DeselectActiveControlOnClickOutside(props) {
 	useEffect(() => {
+		const element = props.controlsWrapper.current;
+
 		if (!element) {
 			return;
 		}
@@ -77,7 +71,7 @@ export default function DeselectActiveControlOnClickOutside() {
 		return () => {
 			doc.removeEventListener('click', maybeDeselect);
 		};
-	}, [element]);
+	}, [props]);
 
 	return null;
 }

assets/editor-constructor/boxes/controls/index.js

@@ -19,7 +19,7 @@ import { SortableContext } from '@dnd-kit/sortable';
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { Tooltip, TabPanel } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 
@@ -37,6 +37,8 @@ let initialActiveTab = '';
 export default function ControlsSettings(props) {
 	const sensors = useSensors(useSensor(CustomPointerSensor));
 
+	const $controlsWrapper = useRef();
+
 	const { data } = props;
 
 	useEffect(() => {
@@ -296,8 +298,10 @@ export default function ControlsSettings(props) {
 	}
 
 	return (
-		<div className="lzb-constructor-controls">
-			<DeselectActiveControlOnClickOutside />
+		<div className="lzb-constructor-controls" ref={$controlsWrapper}>
+			<DeselectActiveControlOnClickOutside
+				controlsWrapper={$controlsWrapper}
+			/>
 			<TabPanel
 				className="lazyblocks-control-tabs"
 				activeClass="is-active"