Can't add URL to Social Icons Block when inserted in a Widget Group block

[ciorici]

Description

When using a theme with widget areas, on the block-based widget screen, you can add a block called Widget Group.
Now, if you add a Social Icons block in this group, you can't click on each social icon to edit its URL, as the dropdown doesn't appear when clicking on an icon.
This happens only when a Social Icons block is a part of a Widget Group block.

The issue happens with all themes.
If you click on an individual icon from the Social Icons block, the Widget Group is selected instead.

<!-- wp:widget-group -->
<h2 class="widget-title"></h2><div class="wp-widget-group__inner-blocks"><!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"service":"wordpress"} /-->

<!-- wp:social-link {"service":"facebook"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:widget-group -->

The widget group block is not available in the editor in posts and pages, but I tried to manually copy it from the Widgets screen, and such an issue with social icons is not happening the post/page editor, only on the Widgets screen.

Step-by-step reproduction instructions

1. Install a theme with widget areas. e.g. Twenty Twenty
2. Go to Appearance > Widgets
3. Add the Widget Group block to a widget area
4. Add the Social Icons block in that widget group
5. Add a Social Icon in the block, e.g., Facebook.
6. Try clicking on the Facebook icon to add a URL.
7. You will notice that it's impossible to click on the icon to see the flyout where you can enter the URL

Screenshots, screen recording, code snippet

Environment info

WP 6.9, no plugins
PHP 8.3.28

Twenty Twenty theme
Chrome 143 on Mac Tahoe 26.2

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[miminari]

I was able to reproduce this issue in the following environment:

WP 6.9, no plugins
PHP 8.3.28
Twenty Twenty theme
Chrome 143 on Mac Tahoe 26.2

Kapture.2025-12-18.at.08.58.40.mp4

[Mamaduka]

I believe the problem is caused by the following CSS, which intercepts clicks in some cases and moves the selection to the parent block.

I think it's safe to remove; no other block displays an outline when its children are selected. The only other place I found using a similar selector is in #28283, which I think, after the recent Synced Patterns refactoring, can be considered unused CSS.

cc @WordPress/gutenberg-design

gutenberg/packages/widgets/src/blocks/widget-group/editor.scss

Lines 5 to 14 in b0eb899

	&.has-child-selected::after {
	border-radius: $radius-small;
	border: $border-width solid var(--wp-admin-theme-color);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	}

[jasmussen]

That is a bit of archeology you've done there. I'd tend to echo: let's try and remove it. Besides, we have #44776 to capture hover outline iterations where this can resurface if necessary.

[Mamaduka]

Thanks for the confirmation, @jasmussen! Here's the PR to fix the issue - #74107.

P.S. Git archeology is my hobby 😄