The placement of the toolbar component displayed at the top of different blocks in the Block Editor is inconsistent.
This affects the Bubble Menu (BubbleMenuButtonComponent) actions and marks.
Depending on how large the block is, and where it is in the field, the menu is displayed either above or below the block it applies to. This is confusing.
Proposed Solution
Change the toolbar component to always place the toolbar at the top.
When the top of the block scrolls out of the view, place the toolbar at the top of the Block Editor field.
Add an option to align the toolbar to the right instead of the left.
For long toolbars (with more than a handful of icons, or with longer fields like font names), it makes sense to align the toolbar to the left.
But for short toolbars (such as the one on the contentlet block), placing the icons on the left appears to be inconsistent with the rest of our UX, where a handful of action icons are placed on the right.
Acceptance Criteria
The proposed solutions above are just suggestions. Any design will work as long as:
Placement of the toolbar doesn't change for any block.
The toolbar for one block doesn't appear on top of another block.
The placement of the icons within the blocks appears consistent with the placement of icons in other places in the product.
Note: The placement of icons in the block editor does not currently match the placement of icons in other "card" views, such as the Content Search card view.
That may make sense, but I wanted to point out that I'm not sure if we have a consistent design for this in the product now.
Who's Facing the Problem?
All users of the block editor face this at times.
Ultimately, the amount of confusion this may cause varies based on the size and placement of the blocks in the Block Editor.
When the toolbar is placed below the block it applies to, it becomes even more confusing, since the toolbar is placed on top of the following block.
This can make it appear that the toolbar applies to the following block, instead of the block it's actually being displayed for.
In fact, this was a problem with the original dotAI blocks (the menus showed outside the blocks), which we spent a good amount of time to fix.
When the vertical height of the blocks are short - such as when using content item blocks - it's more confusing.
Because the toolbar for the block may be shown below the block, even though the top of the block is still visible in the view.
melissarojas-dotcms
commented
1 month ago
Define the Problem
Problem
The placement of the toolbar component displayed at the top of different blocks in the Block Editor is inconsistent.
This affects the Bubble Menu (BubbleMenuButtonComponent) actions and marks.
Depending on how large the block is, and where it is in the field, the menu is displayed either above or below the block it applies to. This is confusing.
Proposed Solution
Acceptance Criteria
The proposed solutions above are just suggestions. Any design will work as long as:
Who's Facing the Problem?
All users of the block editor face this at times.
Ultimately, the amount of confusion this may cause varies based on the size and placement of the blocks in the Block Editor.
Screenshot or Video
https://github.com/dotCMS/core/assets/13456955/3371224f-96e5-4173-8376-11dbb28517d4
Relevant Links and Resources
https://dotcms.slack.com/archives/C035XMEDQ4F/p1718117777094729
Assumptions & Initiation Needs
No response