Social Icons: Change the block placeholder and use a button

[afercia]

Description

Splitting this out from https://github.com/WordPress/gutenberg/issues/56259 and https://github.com/WordPress/gutenberg/pull/59303#issuecomment-2020213013

Potentially solves also https://github.com/WordPress/gutenberg/issues/60120

Cc @getdave @WordPress/gutenberg-design

Currently, the Social Icons block shows two placeholders:

When the block is selected

The block shows a 'Click plus to add' text and a 'plus' icon button at the right edge of the block, labeled 'Add block'. This button is the standard 'block list appender toggle' used for other blocks as well. Screenshot:

This doesn't seem to be ideal for a few reasons:

• The text 'Click plus to add' is pretty unique in the editor. As such it is inconsistent and pretty confusing.
• It doesn't tell anything useful to blind screen reader users: with no vision, I have no idea what the 'plus' thinkg I am supposed to clik is and where it is. I can only perceive a button that is labeled 'Add block'. The word 'plus' only refers to the visual aspect of a control, as such it is inappropriate.
• Quoting from https://github.com/WordPress/gutenberg/issues/56259:
  • The instructional text contains the word "Click" which makes you assume you can click to add. This is not the case.
  • The plus icon is aligned to far right and is disconnected from where the user is naturally drawn

When the block is not selected

The placeholder changes to 3 colored squares. Screenshot:

This doesn't seem to be ideal for a few reasons:

• While I do understand the intent to _show something that resembles a sort of social icons preview, I'm not sure a placeholder should ever change dynamically in the first place. This is inconsistent with how many other placeholders work and I'd say it's unexpected and confusing
• To me, they just look like 3 colored squares. They don't suggest any particular meaning and I'm not sure they add great value.
• They are just empty <div> elements with a background color set. Note: they do contain a CSS generated ::before pseudo element. It is not visible and it's not clear to me what its purpose is. Maybe a leftover. In the screenshot below I set a black background color on it to better illustrate:

Proposal

Quoting from https://github.com/WordPress/gutenberg/issues/56259

• consider a placeholder state whereby a placeholder icon acts as the inserter

I'd totally agree the placeholder should be a button to 'add' social links. Other blocks already use similar placeholders, for example Row, Stack, Grid. They use a rectangular button with a plus icon. I'd like to propose to use the same kind of button and sytling, just making the button rounded in this case.

Very rough screenshots:

The new 'Add' button should show when first inserting the empty block and always shown at the end when the blosk is selected and being edited:

The button should not be shown when the block is not selected or not being edited:

Consider to make the button label visible (spacing to be improved):

Making the button available when editing would also solve the keyboard operability reported at https://github.com/WordPress/gutenberg/issues/60120

Step-by-step reproduction instructions

N/A

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

[t-hamano]

Thank you for your suggestion.

The new 'Add' button should show when first inserting the empty block and always shown at the end when the block is selected and being edited:

The two inserter buttons for inserting blocks feel a little strange to me since they have the same role.

The approach I suggest is to automatically insert one Social Link block when you insert a Social Links block:

The only block that can be included in a Social Links block is a Social Link block, and its initial behavior is the same as that of a Buttons block:

And if no Social Icon block exists, it will only show the default inserter:

This is also similar to the current Buttons block behavior:

Are there any accessibility concerns with this approach? Whichever direction we go in, I feel it's better to unify the behavior of the social icon block and the button block.

[t-hamano]

As another example, the specifications for the navigation block are as follows:

When a block is not selected: A dot border is displayed.

When a block is selected: A large inserter button is displayed.

[richtabor]

I think this is along what I was suggesting previously, by always having an icon inserter to the right of the icons, when interacting with the block.

https://github.com/WordPress/gutenberg/issues/56259#issuecomment-1841861841

[afercia]

The two inserter buttons for inserting blocks feel a little strange

I agree. I'm unsure whether the black 'plus' ineerter should be kept. It is worth noting that right now it is not operable with a keyboard after a first social link has been added. See https://github.com/WordPress/gutenberg/issues/60120 This block is not operable with a keyboard. As such, either we fix the inserter or we should replace it.

[afercia]

https://github.com/WordPress/gutenberg/pull/64877 solved some parts of this issue.

Seems to me the only thing left is this:

When there are no social links inserted yet and the block is not selected, the placeholder still shows a few colored boxes. Im not sure this is correct. The placeholder shouldn't 'preview' or attempt to provide a visual representation of the expected visuals when there's no links added yet. Also, I'm not sure thosee 3 colored boxes are consistent with other blocks and I'm not sure they help users in any way.

In this state, with no links added yet and no selection, I'd just suggest to just show the block appender button.