Fix group block moving animation not working correctly.

[talldan]

Description

Fixes #23047

I noticed block moving animations were not working correctly for some blocks (I found Group was the easiest one to recreate the issue). Blocks overlap when clicking the mover buttons and an error was being thrown in the console:

TypeError: ref.current is undefined

Pointing to these lines:

gutenberg/packages/block-editor/src/components/use-moving-animation/index.js

Lines 138 to 142 in 2e814da

	ref.current.style.transformOrigin = 'center';
	ref.current.style.transform =
	x === 0 && y === 0 ? null : `translate3d(${ x }px,${ y }px,0)`;
	ref.current.style.zIndex =
	! isSelected || ( x === 0 && y === 0 ) ? null : '1';

Wrapping these lines in an if statement seems to solve the issue. I haven't looked too deeply into the root cause of the issue, but it might be that the Animated component that was in use before #22936 also had a similar check internally.

How has this been tested?

Steps to reproduce the behavior:

1. Create a new post and add some paragraphs
2. Move blocks around
3. Observe everything works ok
4. Group some of the paragraphs
5. Move blocks around
6. Observe an error is thrown and blocks overlap

Screenshots

Before

After

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: +4 B (0%)

Total Size: 1.13 MB

Filename	Size	Change
build/block-editor/index.js	106 kB	+4 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	3.4 kB	0 B
build/autop/index.js	2.83 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.77 kB	0 B
build/block-directory/style-rtl.css	892 B	0 B
build/block-directory/style.css	892 B	0 B
build/block-editor/style-rtl.css	12.1 kB	0 B
build/block-editor/style.css	12.1 kB	0 B
build/block-library/editor-rtl.css	7.88 kB	0 B
build/block-library/editor.css	7.89 kB	0 B
build/block-library/index.js	129 kB	0 B
build/block-library/style-rtl.css	7.96 kB	0 B
build/block-library/style.css	7.96 kB	0 B
build/block-library/theme-rtl.css	684 B	0 B
build/block-library/theme.css	686 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	48.1 kB	0 B
build/components/index.js	195 kB	0 B
build/components/style-rtl.css	19.5 kB	0 B
build/components/style.css	19.5 kB	0 B
build/compose/index.js	9.31 kB	0 B
build/core-data/index.js	11.4 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.44 kB	0 B
build/date/index.js	5.47 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	3.17 kB	0 B
build/edit-navigation/index.js	8.26 kB	0 B
build/edit-navigation/style-rtl.css	975 B	0 B
build/edit-navigation/style.css	974 B	0 B
build/edit-post/index.js	303 kB	0 B
build/edit-post/style-rtl.css	5.6 kB	0 B
build/edit-post/style.css	5.6 kB	0 B
build/edit-site/index.js	16.6 kB	0 B
build/edit-site/style-rtl.css	2.96 kB	0 B
build/edit-site/style.css	2.96 kB	0 B
build/edit-widgets/index.js	9.34 kB	0 B
build/edit-widgets/style-rtl.css	2.4 kB	0 B
build/edit-widgets/style.css	2.4 kB	0 B
build/editor/editor-styles-rtl.css	425 B	0 B
build/editor/editor-styles.css	428 B	0 B
build/editor/index.js	44.8 kB	0 B
build/editor/style-rtl.css	4.26 kB	0 B
build/editor/style.css	4.27 kB	0 B
build/element/index.js	4.64 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.72 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	710 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/media-utils/index.js	5.29 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.5 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	14.8 kB	0 B
build/server-side-render/index.js	2.68 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.85 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[ellatrix]

I still cannot reproduce the error. Regardless, it seems ok to have the check, though it would be good to understand the root problem.

[ellatrix]

@talldan Did you find any steps that trigger the error consistently?

[talldan]

@ellatrix Just the ones in the PR description. Both @draganescu and I could reproduce consistently using group blocks. Andrei mentioned he cleared all his caches and rebuilt from scratch before the issue appeared.

[ellatrix]

I rebuilt, the page is loading without cache in Chrome, and I still cannot reproduce it with a group block... 😄