Merge pull request #225 from blockeraai/fix/bugs 🏁

Fixes some bugs on editor features

composer.json

@@ -84,7 +84,8 @@
 		"blockera/http": "*",
 		"blockera/telemetry": "*",
 		"vlucas/phpdotenv": "^5.5@dev",
-		"illuminate/container": "8.x-dev"
+		"illuminate/container": "8.x-dev",
+		"psr/container": "1.x-dev"
 	},
 	"require-dev": {
 		"symfony/dom-crawler": "5.4.x-dev",

packages/editor/CHANGELOG.md

@@ -1,9 +1,12 @@
 ## Unreleased
 
+## Bug Fixes
+- Ensured compatibility with the React.js rendering pipeline [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/single-product-block-error-bXDiO88g7LsP0hV)].
+- Fixed the block mode callback handler to improve functionality and reliability [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/block-mode-switch-not-works-FsR1uwRuIcCakWp)].
+
 ### Improvements
 - Updated block sections to remove the "Powered by Blockera" icon from the bottom. Instead, an indicator was added at the top of the block to show whether it is in advanced mode, displayed only once per block. (Based on users feedback)
 
-
 ## 1.0.0 (2024-12-08)
 
 ### New Features:

packages/editor/js/extensions/components/block-base.js

@@ -134,10 +134,10 @@ export const BlockBase: ComponentType<any> = memo((): Element<any> | null => {
 	);
 	const setActive = useCallback(
 		(blockeraMode: 'advanced' | 'basic'): void => {
-			_setActive('advanced' === blockeraMode);
+			_setActive(blockeraMode);
 			setAttributes({
 				...attributes,
-				blockeraMode,
+				blockeraMode: blockeraMode ? 'advanced' : 'basic',
 			});
 		},
 		// eslint-disable-next-line

packages/editor/js/extensions/hooks/block-settings.js

@@ -5,7 +5,7 @@
 import { select } from '@wordpress/data';
 import type { MixedElement } from 'react';
 import { doAction } from '@wordpress/hooks';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect, useMemo, createElement } from '@wordpress/element';
 import { SlotFillProvider, Slot } from '@wordpress/components';
 
 /**
@@ -74,6 +74,14 @@ const EdiBlockWithoutExtensions = ({
 }: Object): MixedElement => {
 	useSharedBlockSideEffect();
 
+	// This approach ensures compatibility with React's rendering pipeline.
+	if (
+		typeof settings.edit === 'function' &&
+		/^class\s/.test(Function.prototype?.toString?.call(settings.edit))
+	) {
+		return createElement(settings.edit, props);
+	}
+
 	return settings.edit(props);
 };