Widget editor: In customizer, wide, tall widgets display poorly

[dreamwhisper]

Description

Step-by-step reproduction instructions

Please list the steps needed to reproduce the bug. For example:

1. Get Genesis & Genesis Sample
2. Go to Customizer > Widgets
3. Add a Genesis - Featured Posts widget to a widget area.
4. Note the position and whether all settings are accessible. Settings may be cut off on the top or bottom depending on the position of the widget.
5. Note the width of the widget and field display. It is narrower than the non-block-based widget areas.

Expected behaviour

Legacy widget settings will always be accessible & form will display similarly to previous display.

If the height wasn't enough, the widget was scrollable in the non-block-based widget areas in the customizer. (It's not currently scrollable due to #32969.)

Actual behaviour

The Genesis - Featured Post widget is:

• Narrower, so settings don't fit nicely.
• Positioned too high or too low to see or reach all settings.
• Not scrollable so settings are reachable.

Screenshots or screen recording (optional)

Original:

Block-based at the top:

Block-based pushed down:

Even if we were to fix #32969 in Genesis Framework, the position may not be correct:

Related

• Display wide widgets as modals in Customizer #32210

WordPress information

• WordPress version: 5.8-beta3-51224
• Gutenberg version: Not installed"
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No - Get Genesis

Device information

• Device: Mac
• Operating system: MacOS 10.15.x
• Browser: Chrome 91

[talldan]

Thanks for reporting this! #31736 was the previous improvement to wide widgets, looks like a few additional adjustments will be needed.

[tellthemachines]

There are two separate issues here:

1. The popover is partially cut off and not scrollable - this is due to the popover not containing the floated contents, and can be fixed easily.
2. The popover is too narrow - this is due to the widget itself not defining its width. This should be fixed in the theme/plugin supplying the widget, as wide widgets can come in many shapes and sizes so it would not be appropriate to set a width for them in the Customizer. At best we can set a min-width, but this is unlikely to work well for all cases.

[johnstonphilip]

@tellthemachines If an old plugin has to update its code (like to set widgets widths) in order to fix a new problem that never existed before, than this is not really backwards compatible, no?

[tellthemachines]

@johnstonphilip backward compatibility is ensured to the extent that these widgets are now usable, and we have also made it possible for themes to opt out of the new widgets editor.