Contrib.social

Re-evaluate whether Contextual Links are the best interaction for configuring/moving/deleting blocks in Layout Builder

Open on Drupal.org →
Created on 23 March 2019, over 5 years ago
Updated 16 May 2023, about 1 year ago

Problem/Motivation

Most available operations in the Layout Builder UI (adding a section, removing a section, configuring a section, adding a block, dragging and dropping a block) are always visible and require one click.

However, options to configure or remove a block are not visible by default. To discover and use them, the user must:

  1. Hover the cursor over the block.
  2. Click the pencil icon.
  3. Keep the cursor over the menu.
  4. Click on (e.g.) "Configure".

We used contextual links for these block operations because that's a pattern already used in core for configuring blocks from the frontend. However, the fact that the contextual links are hard to find compared to the other, intuitive operations available in the UI leads to various usability and accessibility problems, and even experienced Drupalists miss them. For example:

  • I myself often click the button to delete a whole section when I actually only want to remove a block, even though I know that the contextual link is the only way to actually remove a block. Only the confirmation form we added recently stops me from accidentally deleting data all the time.
  • Sometimes I click on the block expecting it to open the sidebar with the block configuration.
  • The difficulty in locating the contextual links also resulted in 🐛 The toggle that makes Contextual Links visible at all times might not be sufficiently discoverable Active being filed as an accessibility issue for the Layout Builder.

Proposed resolution

  • Add always-visible buttons to configure and remove blocks, similar to those available for sections?
  • Make a single click on the block open the sidebar tray with its configuration form?
  • Something else?

Remaining tasks

Needs discussion and design.

User interface changes

TBD

API changes

TBD

Data model changes

N/A

Release notes snippet

TBD

📌 Task
Status

Active

Version

10.1 ✨

Component
Layout builder  →

Last updated about 3 hours ago

Created by

🇺🇸United States xjm

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal 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 over 1 year ago →
    🇺🇸United States dalemoore

    It looks like it just uses the visually-hidden class to hide the pencil icon and removes that class on hover. Could we just always show the pencil icon instead, but set it to a low opacity (0.25-0.5) by default and on hover/focus it is opacity: 1? The little pencil icon doesn't take up much real estate and floats over everything as-is. I have more of an issue with that all block configuration happens in the sidebar. To me, only the section configuration should happen in the sidebar, and the block should popup in a modal. There's usually not enough room in that tray to edit fields.

  • Comment about 1 year ago →
    🇺🇸United States maskedjellybean Portland, OR

    FYI @dalemoore in case you didn't know, there's a module that opens the block configuration in a modal: https://www.drupal.org/project/layout_builder_modal →

    I agree with you that a modal should absolutely be the default behavior for editing a block in layout builder (although I know this isn't the issue for it). I've never worked on a site where there's enough horizontal space in the sidebar for the fields on the block. All but the most basic field types look wonky.

  • Comment about 1 year ago →
    🇨🇦Canada mgifford Ottawa, Ontario
contrib.social Blog FAQ Discussions
Production build 0.69.0 2024