Move Social Icons size setting to the inspector

[afercia]

Description

The Social Icons block has a 'size' setting that is placed in a toolbar dropdown menu labeled 'Size':

I may be missing something but I couldn't think of any other 'size' setting placed in the block toolbar. All the 'size' settings I can think of are placed in the settings panel (the Inspector).
The Buttons block is very similar to the Social Icons one, which has its Size setting in the Insepctor.
Other size settings are in the Inspector, whether they're typograhy global sizes or the font size picker for some blocks.

As a user, I learnt to associate the concept of 'size' with the setting panel and I'd expect to find this setting always in the settings panel.

Is there any design reason to place the Social Icons size setting in the block toolbar? To me, this seems an unique case, an inconsistency that doesn't help provide a cohesive, consistent experience to users.

Cc @WordPress/gutenberg-design

Step-by-step reproduction instructions

• Add a Social Icons block.
• Observe the Size setting is in the block toolbar.
• Add a Buttons block.
• Observe the Size setting is in the settings panel (the Inspector).
• Observe other 'Size' settings are placed in the settings panel (the Inspector).

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[hanneslsm]

I may be missing something but I couldn't think of any other 'size' setting placed in the block toolbar.

Not size, but the search block has also display options in the toolbar. (Something that should be revisited also, though.)

[richtabor]

Curious, why is this labeled for accessibility?

[richtabor]

I agree, there's potential in moving this to the inspector (or potentially having both placements—not 100% sure on that though).

Are you thinking a ToggleGroup control, similar to font size?

[afercia]

Not size, but the search block has also display options in the toolbar. (Something that should be revisited also, though.)

@hanneslsm good point. Would you like to create an issue for the Search block when you have a chance? I'd suggest the design team to audit all 'display' settings for all blocks though, as I think there's more cases where the placement of settings related to 'display' is largely inconsistent. @WordPress/gutenberg-design

[afercia]

Looking a bit more into this, I'd think that before making any decision on the component to use, an evaluation should be made to consider whether the Size setting should evolve to a setting controlled by the theme. To my understanding, the current values are hardcoded:

gutenberg/packages/block-library/src/social-links/edit.js

Lines 33 to 38 in 0ae80bc

	const sizeOptions = [
	{ name: __( 'Small' ), value: 'has-small-icon-size' },
	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
	{ name: __( 'Large' ), value: 'has-large-icon-size' },
	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
	];

I'd think themes should be able to provide their own size values. In that case, the values may be more than 4, which is important to determine the control ot use. For example, the Font size picker is a toggle group and changes to a CustomSelectControl when the theme provides more than 5 values.

Also, I'd think users should be allowed to set a custom size.

[t-hamano]

Rather than the theme providing presets, what if we just let the RangeControl apply any size we want, like for example the Site Logo block?

[afercia]

Using the ToggleGroupControl as done in #65729 doesn't seem ideal to me. The ToggleGroupControl is designed for very short labels like the t-shirt sizes. It really doesn't work well with longer labels.
Also, I'm not sure I understand why the social icons should only have 4 sizes.

Screenshot in Spanish, Portuguese, Dutch:

The RangeControl is meant for values in a range. Potentially, users may want to use a value that is out of the provided range. To me, the RangeControl should only be used when there is a fixed, known, range. That means the usage of RangeControl should be audited across the whole UI including the Site Logo.

To me, this setting should allow users to set whatever size value they want. I think a UnitControl is the most appropriate one.

[t-hamano]

Allowing custom values ​​is a bit complicated because we need to consider backward compatibility.

Can't we address this in a follow-up after moving the settings to the Inspector? However, if there is no other suitable component than the UnitControl component, we will need to address it at the same time.