WP 5.7 editor sometimes has mysterious “gray bar”

  • Resolved dphiffer

    (@dphiffer)


    4 years, 1 month ago

    Hello friends,

    I’ve recently started experimenting with upgrading our self-hosted WordPress CMS to version 5.7 for The Markup. We have a few different environments running:

    – production with WordPress 5.6.2
    – staging with WordPress 5.7
    – local with WordPress 5.7

    I’m testing out version 5.7 on my local instance and on the staging. I noticed a weird “gray bar” at the top of the editor, but only on the staging instance not on my local instance. We’ve tried to keep the various instances in sync using Docker and composer, and I have the same plugins enabled for each, so this is a bit mysterious.

    Here are some screenshots that might help illustrate what I’m seeing:
    – https://mltshp-cdn.com/r/1L5B9 (a mysterious gray bar)
    – https://mltshp-cdn.com/r/1L5CE (DOM inspector on staging)
    – https://mltshp-cdn.com/r/1L5CF (DOM inspector on local)

    One thing that seems noteworthy is that the staging DOM has .editor-styles-wrapper div as a child of .edit-post-visual-editor whereas on my local instance the two are one and the same div.

    Has anyone else seen this? Any advice for how to debug it further? It seems kind of harmless, but I would like to know what it is before I consider putting this version onto our production CMS.

    Thanks,
    Dan

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator James Huff

    (@macmanx)

    4 years, 1 month ago

    Hm, that is odd. This may be a plugin or theme conflict, so let’s rule those out first. Please attempt to disable all plugins, and switch to the default Twenty Twenty-One theme. If the problem goes away, enable them one by one to identify the source of the problem.

    If you can install plugins, install Health Check. On the troubleshooting tab, you can click the button to disable all plugins and change the theme for you, while you’re still logged in, without affecting normal visitors to your site.

    Thread Starter dphiffer

    (@dphiffer)

    4 years, 1 month ago

    Thanks James! I switched to the twentytwentyone theme, which made the mystery bar go away, so it must be due to one of my editor customizations.

    I tried disabling all the CSS and JS I’m adding onto the editor page and that didn’t fix it. We do have hooks for admin_init, get_user_option_admin_color, admin_enqueue_scripts, admin_print_styles-post.php so there’s a lot of ways this might be breaking. Disabling them all did not make the gray bar disappear, sadly.

    The Health Check feature does not seem to like our style of running WordPress: headless, with the default REST API endpoints disabled, not accessible to the open internet, and behind an SSO reverse-proxy. So there are some issues reported, but none of them seem actionable without reconsidering some fundamental architecture decisions.

    Then again, I suspect that whatever makes my local environment different from staging is somehow endemic to the way we are running things. Or perhaps the editor is trying to imitate the look/feel of a front-end that doesn’t actually run in WordPress.

    I’m still baffled about the DOM being different in one than the other. I wish there were some way to ask wp.editor for a version number in the JS console.

    Thread Starter dphiffer

    (@dphiffer)

    4 years, 1 month ago

    Aha, I figured out the customization that is making the gray bar appear. Something I did before to work around some editor CSS that had been breaking our blocks.

    
add_filter( 'block_editor_settings', function( $editor_settings ) {
    // Remove the default editor styles
    array_shift( $editor_settings['styles'] );
    return $editor_settings;
});

    But I am still wondering why it doesn’t happen on my local environment.

    • This reply was modified 4 years, 1 month ago by dphiffer.
    Moderator James Huff

    (@macmanx)

    4 years, 1 month ago

    Nice find!

    I wonder, even in the headless environment, are the two running different “themes”?

    If so, this could be conflicting with the editor style of one of those themes, but not the other.

    Thread Starter dphiffer

    (@dphiffer)

    4 years, 1 month ago

    Ok, I have solved the one remaining mystery on this. It turns out we have a second WordPress installation on our nginx container that I did not know was there. I assume this was done to optimize for serving static files. The downside is that I didn’t know upgrading one WordPress install would only make my local environment half-upgraded!

    Thanks for your help, @macmanx.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘WP 5.7 editor sometimes has mysterious “gray bar”’ is closed to new replies.