Problem/Motivation

Currently some blocks are not draggable in the Layout Builder + UI, because they may contain interactive elements link oEmbeds, linked elements, form elements etc. #3424439: Disable block links already started to solve this, but only does it for links.

Steps to reproduce

  • Create an inline block type with remote video oEmebeds
  • Configure inline block type display to output the oEmbed content
  • Add on of these inline blocks to a layout and try to drag it around - e.g. for YouTube oEmbeds, dragging is not possible, but a click on the block starts the video

Proposed resolution

  • At best reuse core's implementation in layout_builder module's JS, where interactive elements are disabled in inline blocks (see layout_builder/js/layout-builder.js and especially behaviors.layoutBuilderDisableInteractiveElements

Remaining tasks

  • Create an issue fork an MR to solve this issue

User interface changes

  • Blocks with interactive elements will be draggable in Layout Builder + UI

API changes

n/a

Data model changes

n/a

Issue fork lb_plus-3424578

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

hctom created an issue. See original summary.

Tim Bozeman made their first commit to this issue’s fork.

tim bozeman’s picture

tim bozeman commented

That's a great call out! Thank you!

hctom’s picture

hctom
Primary language German
commented

You're welcome - I also like your UI much more than the core UI, hehe!

  • Tim Bozeman committed 7566d323 on 2.1.x 
    Issue #3424578 by Tim Bozeman, hctom: Disable interactive elements in...
tim bozeman’s picture

tim bozeman commented
Status: Active » Fixed

Fantastic! 😊

I took this opportunity to reorganize the files a bit too after including layout-builders behavior to disable interactive elements. Surprisingly I still needed the styling and link drag disabling stuff from #3424439: Disable block links cause it wasn't covered in cores behavior.

¯\_(ツ)_/¯

Thanks again!

hctom’s picture

hctom
Primary language German
commented

I'm sorry, but we missed one important thing: The JS from core's Layout Builder UI to disable those elements was unfortunately not enough. I digged a little more through the code and what the JS actually does is adding a tabindex="-1" to e.g. iFrame elements. But to get them draggable, there is the following CSS snippet needed as well (otherwise clicks on such elements will be handled by e.g. the iFrame content) - taken from layout_builder/css/layout-builder.css:

.layout-builder-block [tabindex="-1"] {
  pointer-events: none;
}

Maybe this even solves your "issue" that you had to add the custom stylings from #3424439: Disable block links additionally.

Should I create a follow up, or should this ticket be reopened again?

  • Tim Bozeman committed e124d1f6 on 2.1.x authored by hctom 
    Issue #3424578 by Tim Bozeman, hctom: Disable interactive elements in...

  • Tim Bozeman committed 9d6d0038 on 2.1.x authored by hctom 
    Issue #3424578 by Tim Bozeman, hctom: Disable interactive elements in...
tim bozeman’s picture

tim bozeman commented

Oh, that's right! I don't need the custom stylings now. 😅 Thank you very much!

hctom’s picture

hctom
Primary language German
commented

Yeah, now oEmbed are also draggable again as well - Thank you so much!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.