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.

Visible and invisible operations in the Layout Builder user interface

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".

Screenshot comparing hidden contextual links with a shown contextual links menu

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 #3037742: The toggle that makes Contextual Links visible at all times might not be sufficiently discoverable 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

CommentFileSizeAuthor
lb_contextual_links.png138.14 KBxjm
lb_operations.png209.77 KBxjm

Comments

xjm created an issue. See original summary.

xjm’s picture

xjm
she/her
Primary language English
commented
Title: Re-evaluate whether Contextual Links are the best interaction for configuring/moving/deletinh blocks in Layout Builder » Re-evaluate whether Contextual Links are the best interaction for configuring/moving/deleting blocks in Layout Builder
xjm’s picture

xjm
she/her
Primary language English
commented
Issue summary: View changes
andrewmacpherson’s picture

andrewmacpherson commented

The problem as I see it is that Layout Builder uses contextual module for something it wasn't built for. In other places that use contextual module, it just provides a convenience shortcut to something that can be achieved by using the main admin menu, e.g. a view can be configured by clicking "structure" then finding a link to views UI.

But the way layout builder uses contextual module, is that these visually-hidden buttons are the only way to achieve most tasks. You can't edit a custom LB "inline" block without it; those aren't shown in the block library, so there's no alternative route for the task.

The biggest accessibility impact of this is that speech control users cannot operate layout builder at all at present. Touchscreen users also face a barrier here, without a hover-capable pointer.

From the proposed resolution:

  1. Add always-visible buttons to configure and remove blocks, similar to those available for sections?

    This will solve the problem for sighted users well. However we should bear in mind the number of tab stops for keyboard users. Currently there is one tab stop per block: the contextual menu button. If we split this into two buttons like the section controls, we greatly increase the number of keypresses needed to get anywhere (and that's before contrib starts adding extra operations...). I'd say it's preferable to keep the single-button menu pattern. Elsewhere I proposed using a single-button menu for the section controls too (in #3037779: Configure section and Remove section links interrupt the flow for keyboard users and are visually distracting).

  2. Make a single click on the block open the sidebar tray with its configuration form?
    1. This is fine for pointer users, but it doesn't solve the problem for speech control users. To be able to operate anything, a sighted speech control user must be able to identify (i.e. see) the control they want to operate, and ideally know what to call it. Just putting a click handler on a large area won't convey that it is an operable control.
    2. Also, is this in addition to the current single-button menu, or a replacement for it? If we remove the contextual link button, we'll need an alternative way for keyboard users to activate it.

Another problem is that enabling layout builder means that contextual module gets added as a dependency, and contextual links start appearing everywhere, just because layout builder needs them. (A lot of sites I have worked on don't use contextual links or quick edit modules; they just aren't enabled in our starter profile, and I expect that's true of many digital agencies.) So if we want to start using layout builder suddenly there will be lots of contextual menu links where there weren't before. For keyboard users that means that lots of pages suddenly get more laborious because of layout builder functionality elsewhere.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

dqd’s picture

dqd
Location London | N.Y.C | Paris | Hamburg | Berlin
commented

The problem as I see it is that Layout Builder uses contextual module for something it wasn't built for.

Same for Quick Edit.

@xjm: I consider to open another child issue to this here for discussing the hard Quick Edit dependency of Layout Builder which makes it impossible to get Quick Edit out of the way for users, who don't want it but already use Layout Builder. My question is if we just merge it into this "re-evaluate" META issue or leave it seperately. Not sure yet ...

EDIT: After longer thinking about it I see 2 possible options to fix this, and one of them is not Layout Builder related, so maybe it becomes a separate one: We could extend the settings for Quick Edit to make it unvisible under certain conditions or we could discuss its usage and dependency on Layout Builder only. But I am not relly convinced that this should be solved from the Quick Edits side yet.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented

Layout Builder has no dependency on Quick Edit. It provides rudimentary integration for Quick Edit, if you have both installed. But nothing about LB itself needs or wants QE.

dqd’s picture

dqd
Location London | N.Y.C | Paris | Hamburg | Berlin
commented

Hey Tim! Thanks for chiming in. My assumption came from the fact that I wasn't able to disable Quick Edit if Layout Builder is enabled, but I feel sorry if this isn't true (no more) or is based on another issue. Let me test/reproduce what I was referring to. It is some weeks ago already.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
commented

+1 to this. This is probably the biggest issue our users have with the UX of layout builder. The experience of editing a layout is very confusing especially for new users.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

dqd’s picture

dqd
Location London | N.Y.C | Paris | Hamburg | Berlin
commented
Parent issue: » #3196068: Make Contextual links granular configurable and context aware

First things first: To come back to #7 -> I mistakenly mixed up QuickEdit and Contextual Links dependency of LB, to clarify that confusion.

Now to my final thoughts on this: From what I see the conclusion I come to from it is that the problem with Contextual links in this issue here is only the tip of the iceberg. I think this needs to be discussed and fixed in a more general manner within Contextual links regarding the fact that is completely misses configuration options in admin UI. Added META [#3196068: Make Contextual links granular configurable and context aware] for that.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

le72’s picture

le72
Location Yerevan 🇦🇲
commented

Agree with the author.
If I disable the contextual menu core module, I can't use the Layout Builder, can't edit, delete blocks.

xjm’s picture

xjm
she/her
Primary language English
commented

Thanks @le72. I'm curious how you were able to even use Layout Builder without Contextual enabled, since Layout Builder does correctly declare a dependency on Contextual:

dependencies:
  - drupal:layout_discovery
  - drupal:contextual

(If that dependency hadn't been there, this would actually be a critical bug.)

le72’s picture

le72
Location Yerevan 🇦🇲
commented

Well, I did say in theory.
But in that case another example: If for some role use contextual link access is disabled he/she can't use Layout Builder.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

dalemoore’s picture

dalemoore commented

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, especially if it uses Paragraphs.

maskedjellybean’s picture

maskedjellybean
Location Portland, OR
commented

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.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag211, +keyboard navigation

Adding for SC 2.1.1 https://www.w3.org/WAI/WCAG21/Understanding/keyboard

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.