fixes #21018 : block preview throws error / fails

[larsgersmann]

This PR fixes #21018 - Block preview fails in Gutenberg for all block types containing just text like

• core/paragraph
• core/heading

For the same reason block styles for core/paragraph and core/heading will not get rendered in the Sidebar inspector panel.

The main reason is that in function ScaledBlockPreview (packages/block-editor/src/components/block-preview/scaled.js) previewElement is expected to be a Element (having method getBoundingClientRect) but the called method getBlockPreviewContainerDOMNode(block.clientId) will return a Text Node instead of an Element for 'core/paragraph' and 'core/heading'. And Text Node does'nt provide method 'getBoundingClientRect'.

Screenshots

How has this been tested?

The change ensures that the returned node is a DOM element node (not a DOM text node or anything else ...) having method getBoundingClientRect.

Since the changed function getBlockPreviewContainerDOMNode is only used once within a single source file (ScaledBlockPreview.js) its a side effect free change

[talldan]

Hi @larsgersmann. Welcome to the project as a first time contributor and thanks for your contribution!

I wasn't able to reproduce this issue with the preview when testing against the latest master. It might be that a fix has been applied already or I wasn't testing correctly. Would you be able to test this or add some steps for reproducing the issue?

[larsgersmann]

Hi @larsgersmann. Welcome to the project as a first time contributor and thanks for your contribution!

I wasn't able to reproduce this issue with the preview when testing against the latest master. It might be that a fix has been applied already or I wasn't testing correctly. Would you be able to test this or add some steps for reproducing the issue?

I'd checked the latest master - the code was'nt changed since gutenberg 7.7.1, so the issue is not fixed.

To reproduce the issue :

• open document in gutenberg
• click "add block" in the global gutenberg toolbar
• hover the core/paragraph or core/quote block and watch the preview of them - its empty / not rendered caused by function getBlockPreviewContainerDOMNode.

Function getBlockPreviewContainerDOMNode works fine if the provided Block returns a dom element containing at least another dom element but core/paragraph and core/quote contain just a text node not an element. thats why it fails.

Open Javascript developer console to see detailed stacktrace.

Kind regards,

Lars

[youknowriad]

It is indeed fixed in master because master is not using Scaled preview anymore and I'm considering removing it in #21096

[larsgersmann]

It is indeed fixed in master because master is not using Scaled preview anymore and I'm considering removing it in #21096

Ahhhh, I am sorry - I did'nt checked that too ...

Thank you !

[talldan]

Really appreciate the effort @larsgersmann. I'll close this now as we've identified the issue is resolved.