Gutenberg fullscreen mode + Admin Toolbar >= 3.3.1 + Gin hides the submit buttons

Created on 4 May 2023, over 1 year ago
Updated 25 May 2023, over 1 year ago

Problem/Motivation

When using Gutenberg in full screen mode (or it's selected by default) and you use the following modules/themes.

  • Gutenberg 8.x-2.7, but version seem to not matter
  • Admin Toolbar >= 3.3.1
  • Gin admin theme

then using the Fullscreen Mode leads to issues because the Admin Toolbar will partially or completely hide the submit buttons and the Gutenberg features on top of the page. In the worst case you cannot even disable the fullscreen mode and you're stuck.

The reason is that in Admin Toolbar release 3.3.1 they introduced a quite aggressive z-index that makes the Gutenberg in full screenmode underlay the Admin Toolbar.

Although the z-index there is quite aggressive and there should not be a z-index battle, a quickfix for Gutenberg would be to introduce a higher z-index.

Steps to reproduce

Proposed resolution

Add a higher z-index for the Gutenberg editor if the fullscreen mode is active.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Closed: works as designed

Version

2.0

Component

Code

Created by

🇩🇪Germany szeidler Berlin

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

Comments & Activities

  • Issue created by @szeidler
  • 🇩🇪Germany szeidler Berlin

    It seems that this is actually not that straightforward to do, because a lot of dialog/toolbar styling in the Gutenberg library has defined z-indexes that are lower and would be in conflict with such a change. It might be easier to just reverse patch the admin_toolbar module in that case.

  • 🇨🇦Canada bgilhome Victoria

    How about just setting the z-index for the toolbar for fullscreen mode? Attached patch does this, it seems to work fine.

  • Status changed to Closed: works as designed over 1 year ago
  • 🇩🇪Germany szeidler Berlin

    Thanks.

    It seems to be obsolete today after the breaking changes have been reverted in the admin_toolbar module https://www.drupal.org/project/admin_toolbar/releases/3.4.0

  • 🇬🇧United Kingdom jeromebeckett

    Updating admin_toolbar to >= 3.4.0 fixes the issue, but then the toolbar is completely hidden. For those that want both the admin toolbar and the Gutenberg editor, one can include the following CSS in the admin theme (or include it as a module library):

    .gutenberg__editor .interface-interface-skeleton {
        position: relative;
    }
    
Production build 0.71.5 2024