Gutenberg: Bottom metaboxes float over the editing window in Chrome

Created on 16 Mar 2018  路  8Comments  路  Source: WordPress/gutenberg

Issue Overview

Metaboxes that appear at the bottom of the editing panel float over the editing blocks in Chrome 64/65

Steps to Reproduce (for bugs)

Tested with Chrome 65 / 66.0.3359.33
Does not appear in Edge 41.16299.248.0
Gutenberg Plugin 2.4.0

  1. Ensure you have a plugin that creates a metabox at the bottom of the main editing page (CoAuthor Plus for instance)
  2. Edit a post in Gutenberg that is longer than a single screen

Expected Behavior

The "Authors" metabox exists at the bottom of the page under all of the editing blocks

Current Behavior

The "Authors" metabox floats over the editing blocks

Possible Solution

It seems like the .edit-post-visual-editor element does not encompass all of the content, and instead just sets its height to 100% of the window. This means the footer metaboxes sit just under 100% height

Screenshots / Video


ss

Browser Issues [Status] Needs More Info [Type] Bug

Most helpful comment

Bump.

Still there on Version 77.0.3865.75 (Official Build) beta (64-bit)

All 8 comments

I can't reproduce this myself, any particularity about this setup or the post content?

Can't think of anything that is specific to my setup.

  • Deactivated all plugins except Gutenberg (2.5.0) and Co Authors Plus (3.2.2)
  • Switched to stock Twenty Seventeen theme
  • Created a new post and just dumped enough Lorum Ipsum to create a long post

  • Still seeing the issue in Chrome (66.0.3359.66)

capture

In DevTools, changing the .edit-post-visual-editor.editor-writing-flow element to remove the height:100% rule fixes the issue but creates a large space between the bottom of the actual post and the bottom metaboxes

So it turns out this appears to be related to the fact that the CoAuthors plugin. If I deactivate that plugin then the metaboxes appear to be fine.

The CoAuthors plugin currently produces a number of notices when activated with Gutenberg (#5654). It's currently unclear if this is due to the notices on the page or if the plugin itself is doing this.

If this plugin is deactivated, everything seems to behave, tested with a custom ACF metabox.

Unless I am mistaken this seems to be the plugin issue over Gutenberg. As a result going to close this, I would encourage reaching out to the plugin author. This can be reopened if needed.

Bump.

Still there on Version 77.0.3865.75 (Official Build) beta (64-bit)

We are having a similar issue. I have not been able to diagnose the root cause, but the symptom is the same. Works fine in Firefox but breaks in Chrome (macOS) If I mess with

.edit-post-layout__content .edit-post-visual-editor {
flex-basis: 100%;
}

it will modify how this is failing.

Hi. I can also reproduce this and so can my users. This might be some kind of a regression specifically with Chrome 77.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

franz-josef-kaiser picture franz-josef-kaiser  路  3Comments

ellatrix picture ellatrix  路  3Comments

davidsword picture davidsword  路  3Comments

aduth picture aduth  路  3Comments

spocke picture spocke  路  3Comments