Created on 12 August 2022, over 2 years ago
Updated 19 April 2025, 9 days ago

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:

  1. A grid layout such that columns are not bound by rows.
  2. The ability to change the number of rows and / or columns in a block with drag and drop.
  3. 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.
  4. 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.

✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom John_B London (UK), Worthing (UK), Innsbruck (Tirol)

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States johnpaul794

    A fluid grid editor is key for staying relevant, as demonstrated by Squarespace's 7.1 update. It offers dynamic drag-and-drop resizing of blocks and flexible layouts. Using grape.js could help integrate this, though challenges with JS, CSS, and Drupal compatibility exist. Accessibility for visually impaired users is also a concern. To stay ahead, consider exploring professional services here to implement this feature effectively.

Production build 0.71.5 2024