gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Improve Social Icons setup and appending

Open getdave opened this issue 5 months ago • 5 comments

Fixes https://github.com/WordPress/gutenberg/issues/60120

What?

Improves the ability to add new social icons.

This will be nicely complemented by https://github.com/WordPress/gutenberg/pull/59303.

Why?

Currently the initial and subsequent states of the Social Icons block(s) can make it very challenging to add new social links. This PR seeks to improve that.

How?

  • Removes the Click + to add instruction. It was always a stop gap and provided a poor UX.
  • Utilise custom button appender similar to Nav block.
  • Make appender always "inline" next to last added block.
  • Show appender if either parent or any child block is selected - this allow the user to find the appender more easily.

Testing Instructions

  • Add a Social Icons block
  • Test whether it is intuitive to find a way to add new social links
  • Test that empty block shows appender when selected

Testing Instructions for Keyboard

  • Repeat steps above and ensure you can complete using only keyboard

My main concerns is how the focus move should work. I can use arrow keys to reach the appender but I'm not sure that resolves the problems in https://github.com/WordPress/gutenberg/issues/60120.

I'll do some more digging on this as I'm not confident it's good enough yet.

Screenshots or screencast

Before

https://github.com/user-attachments/assets/bd3a783a-cc5e-42e0-85fe-cfdbe1298020

After

https://github.com/user-attachments/assets/d743c798-8773-46c0-837e-70d59bf10426

getdave avatar Aug 28 '24 15:08 getdave