Problem/Motivation

When a block whose form has a CKEditor 5 field, such as an inline block, is added or edited in a Blocks reaction, any CKEditor dialog opened from the editor destroys the block form. Confirming the dialog closes everything, and the block is not added. There is no error in the browser console or in the log.

The block library and the block forms open with data-dialog-type: modal, from AjaxFormTrait. Drupal has a single modal element, #drupal-modal, hardcoded in OpenModalDialogCommand. CKEditor dialogs such as "Insert Media" (core) or "Templates" (ckeditor_templates) open in that same element, so they replace the block form instead of stacking on top of it. The general core problem is #2741877, open since 2016.

Steps to reproduce

  1. Create a context with a Blocks reaction.
  2. Click "Place block" and choose "Basic block" in the Inline blocks category.
  3. Set the text format to Full HTML and click "Insert Media" in the editor toolbar.
  4. With the media dialog open, run in the browser console: document.querySelector('form[id^="context-reaction-blocks-add-block-form"]')
  5. Result: null. The block form no longer exists. Closing or confirming the media dialog leaves nothing on screen.

Proposed resolution

Open the block library and the block add, edit and delete forms in the off-canvas dialog instead of the modal. Off-canvas uses its own element, #drupal-off-canvas, so CKEditor dialogs can open on top of it. The condition and reaction forms stay modal, because they never contain an editor.

The attached patch:

  • adds getOffCanvasAttributes() and getOffCanvasButtonAttributes() to AjaxFormTrait, with data-dialog-type: dialog and data-dialog-renderer: off_canvas, 700px wide like the current block library. The existing modal methods are unchanged;
  • uses them in Blocks for the "Place block" button and the Edit and Delete operations, and in ContextReactionBlocksController for the library links, and attaches core/drupal.dialog.off_canvas;
  • replaces CloseModalDialogCommand with CloseDialogCommand('#drupal-off-canvas') in BlockFormBase and BlockDeleteForm. Otherwise they would close the wrong element and leave the tray open after saving.

Tested on Drupal 11.3.11 with 5.0.0-rc2. The patch applies cleanly to 5.x.

Remaining tasks

Review. Saving an inline block also needs the fixes in #3324098 and #3218342.

User interface changes

The block library and the block forms open in the off-canvas tray instead of a centered modal.

API changes

Two new methods on AjaxFormTrait. No existing method changes.

Data model changes

None.

Comments

davidlordwinc created an issue. See original summary.

davidlordwinc’s picture

StatusFileSize
new7.03 KB