Contrib.social

Full Screen button does not work when used in Layout Builder's sidebar

Open on Drupal.org →
Created on 5 March 2024, 4 months ago
Updated 26 March 2024, 3 months ago

Problem/Motivation

Drupal has a visual design tool called Layout Builder. When it's used, users can click links add blocks and sections to a page layout. When configuring the blocks and sections, a sidebar settings "tray" is displayed on the right of the page. If this settings tray has a CKEditor instance, the full screen button does not behave correctly.

Steps to reproduce

  1. Install a fresh Drupal 10.2.3 site using the "Standard" install profile.
  2. Download & Install the CKEditor 5 Premium Features module (use version 1.2.4 until 🐛 Full Screen button produces a JS error if not using any other premium modules Needs review is resolved)
  3. Install the Layout Builder module (it's provided by default, but must be installed)
  4. Configure the Basic HTML text format/editor (/admin/config/content/formats/manage/basic_html) and drag the Full Screen icon to the active toolbar. Save.
  5. Configure the display settings for the Basic page content type (/admin/structure/types/manage/page/display). Check the "Use Layout Builder" checkbox and the "Allow each content item to have its layout customized." Save.
  6. Create a new Basic page node (/node/add/page). Just put in a dummy title and Save.
  7. Click the "Layout" tab
  8. Scroll down and click "Add block" in the content area
  9. In the sidebar, click "Create content block"
  10. Observe that there's a CKEditor instance in the sidebar now. Click the Full Screen icon in the toolbar. It does not make the editor full screen, but some stuff does happen. The admin toolbar becomes hidden at least.

Here's what it looks like before clicking the Full Screen button:

And here's what it looks like after clicking it:

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

1.2

Component

Plugin: Full Screen Mode

Created by

🇺🇸United States bkosborne New Jersey, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bkosborne
  • Comment 4 months ago →
    🇵🇱Poland salmonek

    The patch I uploaded here: https://www.drupal.org/project/ckeditor5_premium_features/issues/3425804... 🐛 Full Screen button produces a JS error if not using any other premium modules Needs review
    is also adding a css rule that makes full screen usable on editors within off-canvas blocks

    I'll get back to this issue later as editor height isn't calculated correctly (around 100px short on bottom) and also premium features sidebars aren't working when editor is within off-canvas.

  • Comment 4 months ago →
    🇺🇸United States bkosborne New Jersey, USA

    Thank you! Confirmed the patch makes the button usable for off-canvas, but yeah, with that height issue still.

  • Comment 3 months ago →
    🇵🇱Poland salmonek

    Hi
    This patch extends the one posted in #3425804 with height fix within off-canvas scope.

  • Comment 3 months ago →
    🇺🇸United States bkosborne New Jersey, USA

    Thank you for continuing to help with this. Unfortunately, there's still some issues:

    1. The editor still shows some of the page below. Though it gets much higher than before!
    2. When opening a balloon dialog, like for inserting a link, it's positioned way off screen due to some inline styling setting top and left CSS values to -99999px.
    3. Buttons in the toolbar that use drop-menus are not displayed correctly. You only see the very bottom of the menus, like for table and format (heading, paragraph, etc)

        Here's a screenshot showing #1 and #2:

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024