Grid Block in core

[sneridagh]

PLIP (Plone Improvement Proposal)

Responsible Persons

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

Seconder:

Abstract

Implement a Row/Grid block, blocks container block in core.

Motivation

Historically there are several implementations by the community that aimed to solve the problem of building complex layouts in Volto. There was a consensus that such a block is of importance in order to build compelling layouts for Volto and it should be in core, by default. There was also an agreement that such implementation will be based initially in the work done in @kitconcept/volto-blocks-grid.

Assumptions

It would be nice to develop #4206 and #4204 at the same time, integrate them all at once. However, it is not necessary for the first implementation.

Proposal & Implementation

There is an open PR with the MVP: #3180

The inner implementation, unlike the @kitconcept/volto-blocks-grid one, should match the standard de facto implementation of nested blocks and blocks_layout fields. So applying recursively known Volto components for managing inner blocks is possible.

Ideally, they should adopt Quanta Toolbar (see #4206) by default, although we might also consider to use the next-to-be legacy way of managing blocks in Volto. It should provide a way to use effectively the toolbar to interact with the inner blocks in a neat and elegant way. This way is still TBD, but we have the idea of how WP and others are doing it (by overloading the toolbar with the inner block settings).

It should be able to adopt easily the new drag and drop infrastructure, developed in #4204.

UPDATE 09.June.2023: After discussion in the Beethoven Sprint these decisions were made for short term (affecting #3180):

• This PR is about the porting of the current state of @kitconcept/volto-blocks-grid (in its version in 7.x.x series).
• The name of the PR is decided to continue being Grid, as it was before to be consistent in what we are porting.
• The internal name will be renamed to gridBlock to allow coexistence between both blocks (the core and the add-on one) at the same time, in order to avoid migrations.
• This PR won't be backported to 16.x.x series (for marketing reasons). People willing to use the grid in 16 should continue using the add-on version.
• Improvements of the container primitive will be done in subsequent PLIPs/PRs.

Deliverables

• Main port for grid block from @kitconcept/volto-blocks-grid
• Cleanup internal naming (classnames, Component names, etc)
• Uses Volto's default blocks-in-blocks architecture
• Unified Style wrapper compatible
• Unknown block problem, if block is "empty"
• Cypress tests
• StoryBook

Risks

Since it will be a new block, there are no risks with existing stuff.

Participants

@sneridagh: I am willing to champion and lead this, but I need hands to help with it. Please contact me.

[stevepiercy]

For consideration of the name:

• Row means a single line of columns.
• Grid originates from "intersecting perpendicular lines" such as a city's street layout as in "grid street system" or grid paper. Its meaning has been morphed in the context of CSS to mean the blocks contained by the grid of lines, or more simply a grid layout. Grid layouts have from one to many rows, each of which may have a varying number of columns. Examples can be visualized in Twitter Bootstrap Grid.

[sneridagh]

FTR, I'm on the opinion that the naming we use should be "Row".

A Grid is the result of assembling two or more Rows, but not a feature of the block itself.

[tisto]

Note: discussion at BeethovenSprint @albertcasado, @sneridagh, @tisto, @fredvd, Irene:

We will keep the Grid Block name for the current implementation.