Merge pull request #171 from blockeraai/bug/block-variation-and-displ…

…ay-sync 🏁 Bug: Group block variation control bug with updating `Layout Section → Flex Layout` control
blockeraai · Sep 14, 2024 · 6908fc8 · 6908fc8
2 parents 23aec1a + 974e24b
commit 6908fc8
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 55 deletions.
diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md
@@ -1 +1,9 @@
 ## Unreleased
+
+### Bug Fixes
+
+- Fixed an issue with test assertions.
+
+### Miscellaneous
+
+- Updated the changelog for the blockera/blocks-core package.
diff --git a/packages/blocks/core/js/wordpress/group/test/variation-switch.compatibility.e2e.cy.js b/packages/blocks/core/js/wordpress/group/test/variation-switch.compatibility.e2e.cy.js
@@ -90,6 +90,22 @@ describe('Group Block → Variation Switch Compatibility', () => {
 			);
 		});
 
+		cy.getParentContainer('Display')
+			.first()
+			.within(() => {
+				cy.getByAriaLabel('Flex')
+					.invoke('attr', 'aria-pressed')
+					.should('eq', 'true');
+			});
+
+		cy.getParentContainer('Flex Layout')
+			.first()
+			.within(() => {
+				cy.getByAriaLabel('Row')
+					.invoke('attr', 'aria-checked')
+					.should('eq', 'true');
+			});
+
 		//
 		// Test 3: Change Variation to `group-stack`
 		//
@@ -116,6 +132,22 @@ describe('Group Block → Variation Switch Compatibility', () => {
 			);
 		});
 
+		cy.getParentContainer('Display')
+			.first()
+			.within(() => {
+				cy.getByAriaLabel('Flex')
+					.invoke('attr', 'aria-pressed')
+					.should('eq', 'true');
+			});
+
+		cy.getParentContainer('Flex Layout')
+			.first()
+			.within(() => {
+				cy.getByAriaLabel('Column')
+					.invoke('attr', 'aria-checked')
+					.should('eq', 'true');
+			});
+
 		//
 		// Test 4: Change Variation to `group-grid`
 		//
@@ -143,6 +175,14 @@ describe('Group Block → Variation Switch Compatibility', () => {
 			);
 		});
 
+		cy.getParentContainer('Display')
+			.first()
+			.within(() => {
+				cy.getByAriaLabel('Grid')
+					.invoke('attr', 'aria-pressed')
+					.should('eq', 'true');
+			});
+
 		//
 		// Test 5: Change Variation to `group`
 		//
@@ -169,6 +209,18 @@ describe('Group Block → Variation Switch Compatibility', () => {
 				getSelectedBlock(data, 'blockeraFlexLayout')?.alignItems
 			);
 		});
+
+		cy.getParentContainer('Display')
+			.first()
+			.within(() => {
+				cy.getByAriaLabel('Grid')
+					.invoke('attr', 'aria-pressed')
+					.should('eq', 'false');
+
+				cy.getByAriaLabel('Flex')
+					.invoke('attr', 'aria-pressed')
+					.should('eq', 'false');
+			});
 	});
 
 	it('Variation Switch (`To WP` Compatibility)', () => {

diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Strange "0" character after Layout block section [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/strange-0-after-layout-block-section-tXhcZXMGMn631EH)]
 - Strange bug of flex layout that makes issue for inner blocks flex layout.
 - Wrong style generation for blocks in gap feature [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/wrong-style-generation-for-blocks-in-gap-feature-nkRSbYvjaK226Rh)]
+- Refactored BlockBase component to fix compatibility with WordPress problems. [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/group-block-variation-control-bug-with-updating-layout-section---flex-MSd1lhFdxAGDd2c)]
 
 ### Improvements
 

diff --git a/packages/editor/js/extensions/components/block-base.js b/packages/editor/js/extensions/components/block-base.js
@@ -110,37 +110,29 @@ export const BlockBase: ComponentType<BlockBaseProps> = memo(
 			currentInnerBlockState,
 		} = useExtensionsStore({ name, clientId });
 
-		const {
-			selectedBlock,
-			activeVariation,
-			availableAttributes,
-			isActiveBlockExtensions,
-		} = useSelect((select) => {
-			const { isActiveBlockExtensions, getActiveBlockVariation } = select(
-				'blockera/extensions'
-			);
-
-			const { getBlockType } = select('core/blocks');
-			const { getSelectedBlock } = select('core/block-editor');
-
-			return {
-				activeVariation: getActiveBlockVariation(),
-				selectedBlock: (getSelectedBlock() || {})?.name,
-				isActiveBlockExtensions: isActiveBlockExtensions(),
-				availableAttributes: getBlockType(name)?.attributes,
-			};
-		});
-
-		const isSelectedBlock = (name: string): boolean =>
-			selectedBlock === name;
+		const { availableAttributes, isActiveBlockExtensions } = useSelect(
+			(select) => {
+				const { isActiveBlockExtensions, getActiveBlockVariation } =
+					select('blockera/extensions');
+
+				const { getBlockType } = select('core/blocks');
+				const { getSelectedBlock } = select('core/block-editor');
+
+				return {
+					activeVariation: getActiveBlockVariation(),
+					selectedBlock: (getSelectedBlock() || {})?.name,
+					isActiveBlockExtensions: isActiveBlockExtensions(),
+					availableAttributes: getBlockType(name)?.attributes,
+				};
+			}
+		);
 
 		const [isActive, setActive] = useState(isActiveBlockExtensions);
 
 		const {
 			changeExtensionCurrentBlock: setCurrentBlock,
 			changeExtensionCurrentBlockState: setCurrentState,
 			changeExtensionInnerBlockState: setInnerBlockState,
-			setExtensionsActiveBlockVariation: setActiveBlockVariation,
 		} = dispatch('blockera/extensions') || {};
 
 		const { getDeviceType } = select('blockera/editor');
@@ -287,37 +279,6 @@ export const BlockBase: ComponentType<BlockBaseProps> = memo(
 			[currentAttributes]
 		);
 
-		// While change active block variation, we should clean up blockeraCompatId because we need to running compatibilities again.
-		useEffect(() => {
-			// We should not try to clean up blockeraCompatId while not selected block because still not executing compatibility on current block.
-			if (!isSelectedBlock(name)) {
-				return;
-			}
-
-			// Create mutable constant to prevent directly change to immutable state constant.
-			let filteredAttributes = { ...attributes };
-
-			if (!isEquals(activeVariation, activeBlockVariation)) {
-				setActiveBlockVariation(activeBlockVariation);
-
-				filteredAttributes = {
-					...attributes,
-					blockeraCompatId: '',
-				};
-
-				// Prevent redundant set state!
-				if (isEquals(attributes, filteredAttributes)) {
-					return;
-				}
-
-				// Prevent of bad set state!
-				if (!isEquals(attributes, filteredAttributes)) {
-					updateAttributes(filteredAttributes);
-				}
-			}
-			// eslint-disable-next-line
-		}, [activeBlockVariation]);
-
 		const originalAttributes = useMemo(() => {
 			return omitWithPattern(
 				omit(_attributes, ['content']),