gutenberg
gutenberg copied to clipboard
Improve Social Icons setup and appending
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