Quanta Toolbar

[sneridagh]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba @sneridagh

Seconder:

Abstract

The Quanta Design System for Volto features a common interface to interact with blocks in the block engine, called the Quanta Toolbar. It's a Volto CMSUI artifact that acts as a placeholder of buttons, handlers and menus that allows the user to interact with a block's settings.

Motivation

The current implementation of the "move" and "delete" handler is showing its age, and limitations. The move to a thing that can hold more CMSUI real estate is due since a very long time. Also, the Quanta toolbar implementation will solve other long standing issues, like the placement of additional controls for the blocks, and the block container use case UX.

Assumptions

There is no special precondition, the Quanta toolbar implementation will happen on the top of the existing one.

Proposal & Implementation

There is a PoC initial implementation led by @tiberiuichim in this PR: #3161. The proposal is to include the feature as experimental in Volto 16, and make it default once the implementation and initial feedback is reviewed and initial issues fixed. The implementation should provide standard components so a block can interact with its own Quanta Toolbar, add more settings or modify the common ones.

This implementation could be tied to the one happening in #4204 , and should be adjusted accordingly, depending on which one is happening first.

Please observe that the Quanta Toolbar is coupled with the last (+) icon in the engine, and we could also experiment to include a visual handler on hover for the insert inline a block between blocks (a la WP).

If possible, the CSS should not be entangled or tightly coupled to SemanticUI components/classnames. (see next section)

Mockups

https://www.figma.com/file/YpaRSKjFcFaAkVYnTSVGuz/Volto-UI-%E2%80%93-Quanta?node-id=1782%3A470&t=ojoCCLXSYoeVkmdw-4
https://www.figma.com/file/YpaRSKjFcFaAkVYnTSVGuz/Volto-UI-%E2%80%93-Quanta?node-id=1782%3A579&t=ojoCCLXSYoeVkmdw-4
https://www.figma.com/file/YpaRSKjFcFaAkVYnTSVGuz/Volto-UI-%E2%80%93-Quanta?node-id=1790%3A868&t=ojoCCLXSYoeVkmdw-4

Optional

Evaluate if it's worth the effort not to use SemanticUI in the components that will include this implementation. This is thinking forward since the future CMSUI in Volto should not rely on any component library, but on core components. If we can't do it now, we will have to do it when we tackle this.

Deliverables

New set of components that supports the Quanta Toolbar, if the experimental switch is on, then the default UX for the block engine will be to use it.

Risks

We have to document well the feature for devs and the user part as well.

Participants

@sneridagh: I can champion the PLIP but I'll need help, please contact me if you want to jump in.