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
- Create a context with a Blocks reaction.
- Click "Place block" and choose "Basic block" in the Inline blocks category.
- Set the text format to Full HTML and click "Insert Media" in the editor toolbar.
- With the media dialog open, run in the browser console:
document.querySelector('form[id^="context-reaction-blocks-add-block-form"]') - 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()andgetOffCanvasButtonAttributes()toAjaxFormTrait, withdata-dialog-type: dialoganddata-dialog-renderer: off_canvas, 700px wide like the current block library. The existing modal methods are unchanged; - uses them in
Blocksfor the "Place block" button and the Edit and Delete operations, and inContextReactionBlocksControllerfor the library links, and attachescore/drupal.dialog.off_canvas; - replaces
CloseModalDialogCommandwithCloseDialogCommand('#drupal-off-canvas')inBlockFormBaseandBlockDeleteForm. 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.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | context-block-forms-off-canvas.patch | 7.03 KB | davidlordwinc |
Comments
Comment #2
davidlordwinc commented