WordPress
Standardize the block appender
Description
It appears there's some large inconsistency regarding the so called 'block appender'. A few examples:
Social Icons block:
Navigation block:
Buttons block:
I'm not sure such inconsistency helps in any way provide a cohesive, predictable, consistent user experience. These buttons have the same functionality. They should look and behave the same.
Social Icons: https://github.com/WordPress/gutenberg/pull/64877 introduced custom styling for the button appender and the appender is always "inline" next to last added block. To me this appears to be the best implementation because:
- The appender is there right after other blocks amd honors the proximitiy of controls principle.
- The target size is bigger.
- The tyling is closer to the overall styling for buttons and input fields e.g. the 40 pixels height.
Navigation block:
- In this case the appender button looks broken. It should be a square.
- The good part is that it's 'inline' right after the other inner blocks.
Buttons block and many other blocks:
- This used to be the default look and placement of the appender for inner blocks. To me, it isn't ideal.
- It's too small, for no reason. The target size should be larger.
- It's far from the other blocks. As such it's an accessibility issue because it doesn't honor the proximity of controls principle.
- It's inconsistent with the new styling of controls (inputs and buttons) in the editor.
Overall, amongst these 3 patterns, I'd suggest to standardize on the first one which looks to me superior in terms of usability, accessibility, interaction, and styling.
When the parent block doesn't have any innrer block yet, I'd suggest to use the appender as placeholder consistently for all blocks (where it makes sense) much like how the Social Icons block does. Screenshot:
Whatever the final decision will be, I'd strongly recommend to focus more on this kind of inconsistencies in the editor because they don't help provide a great user experience and ultimately make the editor feel largely unpolished and difficult to use.
Step-by-step reproduction instructions
- Add a Social icons block.
- Add a Navigation block.
- Add a Buttons block.
- Add other blocks that have inner blocks.
- Observe the appended inconsistencies.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
- [X] Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- [X] Yes
Note on the Navigation block: when it's completely empty, it does show the appender 'inline', with a styling that is similar to the Social Icons appender. It's inconsistent though, as its size is different. Screenshot:
The standardized appender styling and behavior across all blocks can match the Social Icons implementation. More consistent appender can look like this:
