Add transform scope to social link variations

[krokodok]

What?

This PR enables the block variation transformation API for the social-link block. The API is available since #50139, but has not been enabled yet for all blocks who have variations.

Why?

This issue was already brought up here: #46726. When changing the old twitter icon to the new "x" icon yesterday this function would have saved me some time.

How?

I simply extended the social-link block's variations' scope to transform, this way enabling the new API for the block.

Testing Instructions

1. Insert the "social-links" block.
2. Insert any "social-link" block as a child.
3. Select a variation by clicking on the block icon and choosing one from the dropdown – or alternatively – select a variation from the block settings sidebar.

Testing Instructions for Keyboard

You can do the same by keyboard.

Screenshots or screencast

Bildschirmaufnahme.2023-12-08.um.11.21.31.mov

Possible problems

The big number of variations for this block might look odd to some. I, personally, don't actually have a problem with how it looks.

It was already discussed in the PR #50139 (comment) that more than four items might look weird. I think there should be the possibility to enable an alternative UI for many items which shows them as a dropdown. This UI should be enabled automatically once a max number of items is exceeded (as suggested in the PR), or by configuration in the block's code.

A bigger problem could be A11y. Currently, you have to tab through all the block variations and can't skip the control. Does anyone think this is a showstopper? Does developing the alternative UI have priority before we can merge this PR? Or does the implementation of the variation transformation API already lead to better editor UX and the alternative UI can come afterwards?

[ntsekouras]

Thanks for the PR @krokodok! The reason it wasn't enabled for this block is the big number of the variations.

I think there should be the possibility to enable an alternative UI for many items which shows them as a dropdown. This UI should be enabled automatically once a max number of items is exceeded (as suggested in the PR)

I believe that was the approach designers wanted and what we were waiting for this one, was for the new Dropdown component to support nested menus. This work has advanced but not yet stabilized(see here).

[krokodok]

@ntsekouras Thank you for your feedback! So until then, we will have to wait? Is there a way to help with the development of the new dropdown?

[ntsekouras]

So until then, we will have to wait? Is there a way to help with the development of the new dropdown?

Probably, but since it's been a while and this is part of the transforms better organisation issue , I added the needs design feedback label.

Regarding the dropdown, @ciampo might know better where help is needed.

[jasmussen]

Hey, thanks for the PR. We did think about this, but it is indeed the number of variations pushing down important inspector stuff. I don't know that there's an easy fix, if we collapse more than n into a dropdown, then you'd always see the same n transforms at the start, giving undue emphasis.

Related: there are some conversations in #56259 (comment) that are related, about inferring the type based on the URL. What do you think?

[krokodok]

@jasmussen Thank you for your comment. The URL recognition looks very promising. I am happy to see, that this is actively being worked on. In this regard I will close this PR and observe the development in your linked issue.

As it seems, my code is not nearly ready to be merged, so I don't think the PR does add any benefit to Gutenberg by being open right now.