Social Icons: Add placeholder state for unconfigured icons

[jasmussen]

What problem does this address?

In #28440, a setup state was added to the Navigation Block for individual menu items, making it so when you insert a menu item, you can't edit the label until you've chosen a link target first. This vastly improves the flow of creating custom menu items.

The social links block suffers from similar problems:

• If you insert a social link, it isn't clear enough that it hasn't been filled out yet (links nowhere)
• Clicking a social link immediately opens the URL dialog, transferring focus there and making it hard to delete/remove the block

What is your proposed solution?

Like what was done for the Navigation block, we should add a setup state for social link blocks. First, you'd insert the container block and click the "Add" button:

Once you choose an icon to insert, it's inserted as a placeholder, denoted by a dashed line when selected:

1. Clicking a placeholder icon immediately opens the URL dialog, like now, and transfers focus there. Note the standard URL component.
2. If you press Escape to deselect the placeholder icon, it's shown as gray to indicate it's not pointing anywhere. Clicking it again immediately opens the URL dialog.
3. Once you've added a profile URL, the icon gets its colors back, and notably, the URL dialog does not instantly pop up when clicked. To edit the URL of a fully configured social icon, you click the URL icon in the toolbar.

3 would make it easier to delete or move a block that's fully configured, as focus is on the block itself when selected, not the URL dialog.

[ntsekouras]

@jasmussen is this still relevant?

[jasmussen]

To an extent it is, but these mockups are way obsolete, and I think we can likely use an "inspector transform" interface, a la what Group has, in a way that subsumes this. Thanks!