Customizer Widgets: small bugs and styling tweaks

[critterverse]

Hi all, I just completed the recent Widgets Call for Testing and compiled a list of bugs I noticed within the Customizer Widgets editor. I'm adding images as external links to keep this list easy to read!

Block-related:

• Paragraph block: The popover for adding a link is getting cut off on the right edge
• Paragraph block: Seeing some overlapping popover menus for link / inline text color
• Paragraph block: Seeing some alignment issues when a color is selected (ex. black color swatch is misaligned)
• Image block: Some of the color options are getting cut off within the duotone popover menu
• Navigation block: modal doesn’t open from the “block navigation” icon in the toolbar
• Group block: Focused outline is overlapping with “add block” button — can we hide the "add" button that's appearing within the group?

Legacy widget-related:

• Legacy widgets should switch back to “preview” mode when not selected

General:

• When adding a block, sometimes an extra “add” button appears on top of the block on the left edge of the screen
• It's confusing that the “patterns” tab is available within the Inserter but appears empty — could we just remove the tab entirely for now?

[kevin940726]

Thanks for testing! They're really helpful 😍. I did a triage for some of them below:

Paragraph block: Seeing some overlapping popover menus for link / inline text color

I'm seeing this too in the post editor though, can you confirm it's customizer only? Or maybe we can open a separate issue for it.

Navigation block: modal doesn’t open from the “block navigation” icon in the toolbar

It's opening during my testing though, can you confirm it's still happening on trunk?

Kapture.2021-05-21.at.01.38.25.mp4

Group block: Focused outline is overlapping with “add block” button — can we hide the "add" button that's appearing within the group?

I'm not seeing this either. Could you provide reproduction steps?

Legacy widgets should switch back to “preview” mode when not selected

I can't reproduce this either, do you have reproduction steps?

It's confusing that the “patterns” tab is available within the Inserter but appears empty — could we just remove the tab entirely for now?

I'm not seeing this on trunk either, maybe it has been fixed not long ago?

[critterverse]

Thanks so much for going through all of these notes @kevin940726, and sorry there were a few false alarms! 🙈

Double checked all, and everything not mentioned below is working as intended 😁

Overlapping pop-up menus:
Confirming that this does happen in the post editor as well and opened a new issue, #32221

Group block "add" button:
I am still seeing this overlapping issue — here's a quick video.

group-block-add.mov

[kevin940726]

@critterverse Thanks for confirming!

I also found out that the Group block "add" button issue can be reproduced in the post editor as well. I'm not sure whether it's the expected behavior though. Also seems like it can only be reproduced when the last block is an image block.

Kapture.2021-05-26.at.17.49.45.mp4

[critterverse]

I believe it is the expected behavior for container blocks like Group, Columns, etc have an extra add button that allow you to insert a new block within the container (so my suggestion to hide the add button wasn’t a great one).

But I'm unable to recreate the focus outline overlapping issue in the post editor, even within a narrow Column area. I think that bug is unique to the Customizer but I could be wrong!

post-editor-appender.mov

[kevin940726]

@critterverse This is also an issue in other editors (widgets screen) other than the post editor as well. The issue is because these editors don't load some of the styles loaded in the post editor. I don't have any idea how to fix it yet, might need to come back to it later 🤔.

[noisysocks]

What's left here? Can we close the issue?