Contrib.social

Enhance visibility of drag & drop items

Open on Drupal.org →
Created on 19 June 2019, almost 6 years ago
Updated 8 February 2023, about 2 years ago

Problem/Motivation

As a content editor/site builder, I want to easily identify blocks that have been placed via Layout Builder, even when they are empty. Additionally, where possible via OS and browser functionality, I want the cursor to express itself as a “grab/grabbing” glove to indicate which items are grabbable/draggable.

Currently, Layout Builder doesn’t provide an outline of blocks that have been placed on a page. This makes it challenging to know how many blocks are in a given section, and where each block begins and ends. At present, a user must randomly mouse-around and discern where the “edit pencil” icon appears.

Additionally, as a Mac user, the cursor expresses as a move cursor, which doesn’t communicate draggability as much as the grab style of the “Mickey Mouse” glove.

Proposed resolution

Incorporate some aspects of UX patterns for drag and drop as exemplified in the article referenced below:

1. Add a purple outline (HEX #800080) around each block in Layout Builder

2. For items that are actively selected/moved:

  • Add a drop-shadow
  • Modify cursor for grab/grabbing

Referenced article -
https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d

Click on any pattern (from article above) to see GIFs -
https://projects.invisionapp.com/share/2MFBFWUY3NG#/screens

Our patch in action

✨ Feature request
Status

Closed: outdated

Version

10.1 ✨

Component
Layout builder  →

Last updated about 7 hours ago

Created by

🇺🇸United States texas_tater Austin, TX

Live updates comments and jobs are added and updated live.
  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

  • Needs screenshots

    The change alters the user interface, so before and after screenshots should be added to document the UI change. Make sure to capture the relevant region only. Use a tool such as Aviary on Windows or Skitch on Mac OS X.

  • Needs reroll

    The patch will have to be re-rolled with new suggestions/changes described in the comments in the issue.

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.

  • Comment about 2 years ago →
    🇺🇸United States smustgrave

    Closing this as outdated as additional information was requested in #6 3 years ago.

    If still a valid task please reopen addressing the point and updating issue summary following the default template.

    Layout builder seems to work fine now, in my opinion at least.

    Thanks!

  • Comment 5 days ago →
    🇺🇸United States johnpaul794

    Your proposal significantly improves Layout Builder’s usability by enhancing block visibility and drag interactions. A purple outline and drop shadows will provide clear structure, while a grab/grabbing cursor ensures precise control. Just as touchscreen gloves like these enhance dexterity and responsiveness, these UX updates will make editing more intuitive and efficient.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024