Customizer: Block can be deselected when clicking in the block insepector panel

[mattyrob]

Description

The new block style Widget editor in the Customizer page does not allow for collapsed setting elements to be opened. This works fine in the Widgets.php page, but a message saying no block selected appears when opening a collapsed panel in the customize.php page.

Step-by-step reproduction instructions

1/ Find a Widget block that has a collapsed side panel element.
2/ Place it in a sidebar in the Customizer.
3/ Try to open up the collapsed element
4/ See that you cannot open up the collapsed element, but get a message instead saying No block selected.

Expected behaviour

Collapsed panel should open and allow user interaction.

Actual behaviour

Collapsed panel doesn't open and it seems focus is taken off the block.

Screenshots or screen recording (optional)

Screen.Recording.2021-05-26.mp4

Code snippet (optional)

// Version 1.0 - Initial version

var subscriberCount = '4';

( function( blocks, i18n, element, components, editor ) {
	var el               = element.createElement,
		Fragment         = element.Fragment,
		PanelBody        = components.PanelBody,
		PanelRow         = components.PanelRow,
		TextControl      = components.TextControl,
		ColorPicker      = components.ColorPicker;

	blocks.registerBlockType(
		'subscribe2-html/counter',
		{
			title: i18n.__( 'Subscribe2 HTML Counter', 'subscribe2' ),
			icon: 'email',
			category: 'widgets',
			keywords: [
				i18n.__( 'counter', 'subscribe2' )
			],
			supports: {
				customClassName: false,
				className: false,
				multiple: false,
				html: false
			},
			transforms: {
				from: [
					{
						type: 'block',
						blocks: [ 'core/legacy-widget' ],
						transform: function( attributes ) {
							var attr = attributes.instance.raw;

							return blocks.createBlock(
								'subscribe2-html/counter',
								{
									title: attr.title,
									background: attr.s2w_bg,
									text: attr.s2w_fg,
									width: attr.s2w_width,
									height: attr.s2w_height,
									font: attr.s2w_font
								}
							);
						}
					}
				]
			},
			edit: function( props ) {
				var title         = props.attributes.title || i18n.__( 'Subscriber Count', 'subscribe2' ),
					background    = props.attributes.background || '#d1e4dd',
					text          = props.attributes.text || '#000000',
					width         = props.attributes.width || '82',
					height        = props.attributes.height || '24',
					font          = props.attributes.font || '11';

				function onChangeTitle( newTitle ) {
					props.setAttributes( { title: newTitle } );
				}
				function onChangeWidth( newWidth ) {
					props.setAttributes( { width: newWidth } );
				}
				function onChangeHeight( newHeight ) {
					props.setAttributes( { height: newHeight } );
				}
				function onChangeFont( newFont ) {
					props.setAttributes( { font: newFont } );
				}
				function onChangeBackground( newBackground ) {
					props.setAttributes( { background: newBackground.hex } );
				}
				function onChangeText( newText ) {
					props.setAttributes( { text: newText.hex } );
				}
				function editor_render() {
					var output = '<h2 class="widget-title" style="font-size:1.125rem;font-weight:700;">';
					output = output + title + '</h2><div style="margin:auto; text-align:center; background-color:' + background + '; ';
					output = output + 'color:' + text + '; width:' + width + 'px; height:' + height + 'px; font:' + font + 'pt ';
					output = output + ' Verdana, Arial, Helvetica, sans-serif; padding:3px; border:1px solid #444;">';
					output = output + subscriberCount.subscribers + '</div>';
					return output;
				}

				return el(
					Fragment,
					{},
					el(
						editor.InspectorControls,
						{ key: 'subscribe2-html/counter-inspector' },
						el(
							PanelBody,
							{
								title: i18n.__( 'Title And Sizes', 'subscribe2' ),
								initialOpen: true
							},
							el(
								PanelRow,
								{
									className: 's2html-block-panel'
								},
								el(
									TextControl,
									{
										type: 'string',
										label: i18n.__( 'Title', 'subscribe2' ),
										value: title,
										onChange: onChangeTitle
									}
								)
							),
							el(
								PanelRow,
								{
									className: 's2html-block-panel'
								},
								el(
									TextControl,
									{
										type: 'number',
										label: i18n.__( 'Width', 'subscribe2' ),
										value: width,
										onChange: onChangeWidth
									}
								)
							),
							el(
								PanelRow,
								{
									className: 's2html-block-panel'
								},
								el(
									TextControl,
									{
										type: 'number',
										label: i18n.__( 'Height', 'subscribe2' ),
										value: height,
										onChange: onChangeHeight
									}
								)
							),
							el(
								PanelRow,
								{
									className: 's2html-block-panel'
								},
								el(
									TextControl,
									{
										type: 'number',
										label: i18n.__( 'Font Size', 'subscribe2' ),
										value: font,
										onChange: onChangeFont
									}
								)
							)
						),
						el(
							PanelBody,
							{
								title: i18n.__( 'Background Color', 'subscribe2' ),
								initialOpen: false
							},
							el(
								PanelRow,
								{},
								el(
									ColorPicker,
									{
										type: 'string',
										color: background,
										onChangeComplete: onChangeBackground,
										disableAlpha: true
									}
								)
							)
						),
						el(
							PanelBody,
							{
								title: i18n.__( 'Text Color', 'subscribe2' ),
								initialOpen: false
							},
							el(
								PanelRow,
								{},
								el(
									ColorPicker,
									{
										type: 'string',
										color: text,
										onChangeComplete: onChangeText,
										disableAlpha: true
									}
								)
							)
						)
					),
					el(
						element.RawHTML,
						null,
						editor_render()

					)
				);
			}
		}
	);
} )(
	window.wp.blocks,
	window.wp.i18n,
	window.wp.element,
	window.wp.components,
	window.wp.blockEditor
);

WordPress information

• WordPress version: 5.8-alpha-51029
• Gutenberg version: Both 10.6.3, 10.7 and Deactivated
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes, Twenty Twenty-One

Device information

• Device:
• Operating system:
• Browser:

[talldan]

Thanks for catching and reporting this. I can reproduce also by clicking on the background area of the settings panel. Either the white or grey background area.

My guess is it's related to this react hook that we use to clear the selected block when clicking on some parts of the UI (e.g. the preview). That shouldn't happen when clicking on the block settings as it's part of the block:
https://github.com/WordPress/gutenberg/blob/trunk/packages/customize-widgets/src/components/customize-widgets/use-clear-selected-block.js