diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 268a01bae..41c7b7b92 100644 --- 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 index 6c9abc25b..8e6ae7a72 100644 --- 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 index 9826d73b9..5f5271ed1 100644 --- 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 index d447e244b..5da6224d5 100644 --- a/packages/editor/js/extensions/components/block-base.js +++ b/packages/editor/js/extensions/components/block-base.js @@ -110,29 +110,22 @@ export const BlockBase: ComponentType = 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); @@ -140,7 +133,6 @@ export const BlockBase: ComponentType = memo( changeExtensionCurrentBlock: setCurrentBlock, changeExtensionCurrentBlockState: setCurrentState, changeExtensionInnerBlockState: setInnerBlockState, - setExtensionsActiveBlockVariation: setActiveBlockVariation, } = dispatch('blockera/extensions') || {}; const { getDeviceType } = select('blockera/editor'); @@ -287,37 +279,6 @@ export const BlockBase: ComponentType = 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']),