Block preview doesn't work in Firefox

[david-szabo97]

Description

Previews are failing in Firefox. I'm not sure what's causing it cause I can't reproduce it reliably. The instructions below seem to reproduce it consistently. What I noticed is I can't reproduce it at all if Inspector is open.

Step-by-step reproduction instructions

1. Close Firefox if you have it opened
2. Open Firefox
3. Open block editor by creating a new page
4. Click on the empty paragraph and start typing /button
5. Insert Buttons block
6. Select Buttons block
7. Open block inspector
8. Previews in the Styles panel are empty
9. Select Document using the footer breadcrumbs
10. Open inserter sidebar
11. Switch to Patterns tab
12. Patterns don't have any preview 😢

Expected behaviour

Previews 😄

Actual behaviour

No previews at all

Screenshots or screen recording (optional)

Screen.Recording.2021-03-01.at.14.17.45.mov

Tried with a smaller viewport and it's reproducible as well.

Screen.Recording.2021-03-01.at.14.20.34.mov

WordPress information

• WordPress version: You are using a development version (5.7-beta1-50176).
• Gutenberg version: d3b7629
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1B

Device information

• Device: MacBook Pro
• Operating system: macOS Big Sur 11.2.2
• Browser: Firefox 85.0 and 86.0

[youknowriad]

I'm not able to reproduce this issue personally. Could it be specific to your own setup somehow?

[david-szabo97]

Nothing special in my setup. Just rebuilt everything and it's still happening for me. It's really weird though. Sometimes I can't reproduce it at all. But then I just quit Firefox, reopen it, open the editor immediately and it's happening. But if I have multiple tabs open then it's not happening at all. 🤔

What I've noticed, height is 0 for the preview container. Blocks are there, but because of the height, they are not visible.

[david-szabo97]

Tried it on a fresh WP install 5.6.2, using built-in Gutenberg and I can reproduce it without any problems.

[carolinan]

The styling of block patterns and block styles are missing from the previews in the site editor when I use either Chrome or Firefox.

[devfle]

I am currently trying to fix this error. As @david-szabo97 had already correctly noted, there seems to be a problem with the calculation of the height. The whole thing is done here:

gutenberg/packages/block-editor/src/components/block-preview/auto.js

Line 36 in 3da717b

height: contentHeight * scale + 2 * __experimentalPadding,

When inspecting it, I noticed that the 'contentHeight' is not being received correctly. It is in some cases 0. This comes from this line:

gutenberg/packages/compose/src/hooks/use-resize-observer/index.native.js

Line 52 in 3da717b

<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />

onLayout is triggerd on mount and every time, a child item inside the view component changes his styles. It returns then a height, width, x and y position of the changed element. The height and width are then passed to the preview windows.. https://reactnative.dev/docs/view#onlayout

However.. I have a problem. When I make changes to this file (https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/compose/src/hooks/use-resize-observer/index.native.js), I don't get them displayed under compose/index.js. If I read correctly, the .native.js files are only used for the mobile app? Then how come we are importing the stuff here?

gutenberg/packages/block-editor/src/components/block-preview/auto.js

Line 5 in 3da717b

import { useResizeObserver, pure } from '@wordpress/compose';

PS: @carolinan my Block-Style / Pattern styles are loading correctly.

[atimmer]

I can reproduce this issue exactly the same as the topic starter.

Nothing special in my setup. Just rebuilt everything and it's still happening for me. It's really weird though. Sometimes I can't reproduce it at all. But then I just quit Firefox, reopen it, open the editor immediately and it's happening. But if I have multiple tabs open then it's not happening at all. 🤔

I can also confirm that it's not consistent. But it always pops back up after a while. Sometimes when I switch blocks the problem goes away. Then later the problem is back again. Edit: Firefox 88.0 on macOS 11.2.3.

However.. I have a problem. When I make changes to this file (https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/compose/src/hooks/use-resize-observer/index.native.js), I don't get them displayed under compose/index.js. If I read correctly, the .native.js files are only used for the mobile app? Then how come we are importing the stuff here?

My understanding is that every index.native.js always has a index.js alongside it. And that is the case here too: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/compose/src/hooks/use-resize-observer/index.js. In that file the react-resize-aware library is pulled in and exported. Not sure if the problem is with the library or with Gutenberg.

[devfle]

But what I don't understand then is that we don't import / use the react-resize-aware hook in the auto.js, but the custom useResizeObserver hook, which then returned the height. I have tried several things but unfortunately have not found a nice solution for the problem.

[oldrup]

Just pitching in that I'm able to reproduce this issue consequently in my Windows 10, Firefox 89, WordPress 5.8 beta 4, Gutenberg 10.9.1, PHP 8.0.6 install. Ping be if I can do anything to help test or troubleshoot.

Bjarne

[akmyta]

Reporting that I've replicated this issue in Chrome Version 94.0.4606.81 and FF Developer Edition - macOS Big Sur 11.6. Outcome appears fairly sporadic.
Block Pattern previews are either showing no images and only text or some images with others appearing only with text.

[pjoulot]

Block patterns previews are not working for me either on Firefox 96 and Chrome 97 on Ubuntu 20.
For me the update to wordpress 5.9 broke the feature because it was working on wordpresss 5.8.

[Mamaduka]

I'm no longer able to reproduce this issue with WP 6.0. Tested with Chrome and Firefox.

[mrwweb]

Works for me in Firefox 103 with WP6.0

[Mamaduka]

Thanks for confirmation, @mrwweb