Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transform to: Clarify UI and make functionality work consistently #60166

Open
afercia opened this issue Mar 25, 2024 · 1 comment
Open

Transform to: Clarify UI and make functionality work consistently #60166

afercia opened this issue Mar 25, 2024 · 1 comment
Labels
Needs Design Needs design efforts. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Mar 25, 2024

Description

Blocks may have available 'transformations' ie. can be transformed to something else.

Under the hood, these fransformations can be, for example. variations of the block or different blocks. While I'm not sure this difference matters from an user perspective, the user interface doesn't do a great job in clarifying this feature. Overall, I think the 'Transform to' feature is pretty confusing: there are at least 3 different user interfaces where users can transform a block and they're largely inconsistent.

Note: in the screenshots below I added a couple dummy variations to the Group block by altering the Group block variations file, This isn't strictly necessary to reproduce the issue but it helps illustrate.

For example, go to the Site Editor and select a Group block or a Row.

First transform UI

  • Click the block switcher in the block toolbar to open the dropdown menu.
  • The menu has a visual title Transform to.
  • The menu contains both variations and other blocks e.g. Cover and Columns.
  • The menu doesn't distinguish between Transform to variation and Transform to block. As a user, I'm only interested in the ability to 'transform' so that I would say that's fine.

Second transform UI

  • The block inspector only shows variations and misses the Cover and Columns blocks.
  • Note: the variation buttons in the block inspector are withina fildset with a legend 'Transform to variation' so this UI seems intentionally be limited to variations.

Screenshot:

transform to blocks and variations

Overall, the editor UI may show at the same time two different block 'transform' lists that are inconsistent. The one in the block inspector provides a reduced functionality compared to the one in the block toolbar. As a user, I'd be pretty confused by this lack of consistency.

Third transform UI

  • With the block selected, press Cmd (or Control on Windows) + K to invoke the Command center.
  • Type 'transform;.
  • Observe the suggested commands only list 'Transform to Cover' and 'Transform to Columns'.

Screenshot:

Screenshot 2024-03-25 at 12 39 19

Overall there's three inconsistent cases:

  • A list with both block and variation transforms.
  • A list with only variation transforms.
  • A list with only block transforms.

I may be missing something (e.g. not sure what 'text transforms' are) but I'd think this is pretty confusing from an user perspective. Ideally, the editor should provide the ability to 'transform' a block to any of its transformations consistently across the editor UI.

Step-by-step reproduction instructions

N/A see above

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

@afercia afercia added [Type] Bug An existing feature does not function as intended Needs Design Needs design efforts. [Package] Block editor /packages/block-editor labels Mar 25, 2024
@afercia
Copy link
Contributor Author

afercia commented Mar 25, 2024

Noting that in #59916 I'm proposing to make the legend 'transform to variation' in the block inspector visible. Screenshot:

vsriations block inspector visible legend

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Needs design efforts. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant