Problem/Motivation
In future we may need a fluid grid editor to remain relevant. Squarespace introduced fluid grid with editor 7.1 in July 2022. It is now available for new sites (which I have tried), and for existing sites if users choose to trigger a complex, irreversible and potentially buggy migration (which I have not tested).
Fluid grid means:
- A grid layout such that columns are not bound by rows.
- The ability to change the number of rows and / or columns in a block with drag and drop.
- When a block is resized, its content is resized, so images and videos must scale; text will not scale but the area available for text will scale.
- The other blocks automatically rearrange themselves around a block whose size and / or aspect ratio is changed.
grape.js has a grid plugin which satisfies the first requirement (see https://github.com/artf/grapesjs/issues/3407, included in node package of grape.js plugins https://www.npmjs.com/package/grapesjs-plugin-toolbox?activeTab=readme)
A dev company whose website say they work for Squarespace and Wix demonstrate a fluid grid editor built on grape.js at https://www.youtube.com/watch?v=q6u7LGjPEic
Remaining tasks
Decide how to implement. Implement.
The challenges in JS, CSS, and possibly in Drupal API, are likely to be large, and it is new technology. On the other hand, others have achieved it using grape.js outside Drupal. Clients who have seen it on Squarespace will start to expect it. Therefore, we should start thinking about it.
User interface changes
New drag and drop resizing of grid-based blocks within the editor layout.
API changes
None.
Data model changes
To be researched.
Accessibility
Ideally we need keyboard drag and drop and keyboard resizing for users who cannot use a mouse. In the case of accessibility for visually impaired users, it is a question whether making a visual editor accessible is appropriate or possible, and specialist input on this question would be useful. A screen reader readout, triggered with a keypress, stating which area the cursor is in, is thinkable.