Legacy widgets are not visible on the widget screen until clicked

[carolinan]

Description

If I place widgets and then activate Gutenberg, the legacy widgets are not visible in the widget areas until I click on the widget
(I don't mean clicking on the widget area to expand a closed widget area, but clicking inside it).

Step-by-step reproduction instructions

1. Activate a theme with widget areas.
2. Place widgets.
3. Activate Gutenberg.
4. Go to the widget screen, see that the widget areas look empty.

Expected behaviour

I expect the widgets to be visible.

Actual behaviour

The legacy widget is not visible in the widget area until I click on the widget.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.7.2
• Gutenberg version: Tested with current trunk and 10.6.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Tested with both Twenty Twenty and Aaron.

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome Version 90.0.4430.212

[annezazu]

I also ran into this along with very strange spacing issues likely as a result of this bug. If that's a separate issue, happy to open a new one. I'm using WordPress 5.7.2, Gutenberg 10.6.1, and the Twenty Twenty theme:

Screen.Recording.2021-05-18.at.10.32.12.AM.mov

Will open a bug around the coloring and text color of the "Add a block" since that seems to be due to some CSS bleeding.

[tellthemachines]

I'm running into this issue only in the second of two available widget areas. Using TwentyTwenty theme, three legacy widgets added into each area, the first area displays fine in the new editor, but in the second none of the widgets are visible until focused.

[helen]

Adding a data point - I experienced this yesterday in a newly activated Twenty Sixteen after using a block-based theme, with what I believe were just the default widgets in the inactive area and no other widgets/blocks shown (search, recent posts, recent comments, archives, categories, meta).

GB: running from Git trunk, rev b6e3e1c
Core: running from trunk/src, SVN r50984 - WordPress/wordpress-develop@187c7fc
Screencast: https://youtu.be/JzBMyy1MCKo

[talldan]

I've looked into this and the cause is fairly straightforward. There's some logic for dynamically updating the height of the widget preview iframe when its content loads, but in collapsed widget areas that height is always calculated as 0 (because the widget area is collapsed and all the content in the widget area has no height).

It doesn't recalculate when the widget area is expanded, so the block looks empty.

Coming up with a fix shouldn't be too difficult. Just a matter of looking for the right solution.

[a4jp-com]

I've got this problem in WordPress 6.6.1.

[carolinan]

@a4jp-com I am not able to reproduce it, can you add any more information?

I did the following:
Activated Twenty Twenty-One
Added the "Meta" legacy widget to the footer widget area. Saved.
Activated Gutenberg (trunk)
Returned to the widget screen
-All widgets are visible, both blocks and legacy.