Spacing-Visualizer: Handle undefined blockElement

[epeicher]

What?

Closes Automattic/jetpack#39417

When creating the core/video block transformed from another block, e.g. videopress/video, the blockElement could not be created yet, so it is undefined. This code prevents an error, handing the undefined scenario.

Why?

There is an error when transforming from the VideoPress block to the video block and the error block is displayed with the message:

This block has encountered an error and cannot be previewed.

And the corresponding Javascript error in the console:

spacing-visualizer.js:84 Uncaught TypeError: Cannot read properties of undefined (reading 'ownerDocument')
    at getComputedCSS (spacing-visualizer.js:84:17)
    at computeStyle (spacing-visualizer.js:95:17)
    at spacing-visualizer.js:31:10
    at updateReducer (react-dom.js?ver=18:15855:24)
    at Object.useReducer (react-dom.js?ver=18:17089:18)
    at useReducer (react.js?ver=18:1616:23)
    at SpacingVisualizer (spacing-visualizer.js:21:43)
    at renderWithHooks (react-dom.js?ver=18:15496:20)
    at updateFunctionComponent (react-dom.js?ver=18:19627:22)
    at beginWork (react-dom.js?ver=18:21650:18)

How?

The code returns the passed state in the useReducer when the blockElement is undefined, keeping the previous state.

Testing Instructions

1. In a Jetpack connected site
2. Install VideoPress plugin
3. Add a post and add a video using the VideoPress block
4. Transform the VideoPress block to a core video block
5. An error message block is displayed

Testing Instructions for Keyboard

Screenshots or screencast

Before video

Kapture.2024-09-17.at.10.24.41.mp4

After video

CleanShot.2025-02-14.at.19.45.39.mp4

Before	After

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @epeicher! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: epeicher <[email protected]>
Co-authored-by: mrfoxtalbot <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.