• Hi,

    I’d like to restore the scrolling behavior and remove the resize handle for the meta box panel in the backend.

    Since the latest update, there is a resize handle that allows me to drag and resize the panel, but I would like to remove this feature and restore the default scrolling behavior.

    Is it possible to achieve this through CSS, JavaScript, or some other means? I would appreciate any guidance or suggestions on how to accomplish this.

    Thank you in advance for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter werunaff

    (@midasking777)

    you can try disabling conflicting plugins

    Isn’t that the normal behavior of WordPress? It doesn’t like a conflicting plugin.

    Bence Szalai

    (@grapestain)

    Gutenberg editor can run at the moment in two modes: Iframed and non-iframed. Iframed mode is the preferred one by the system as it offers many benefits for the styling consistency etc. But Iframed mode can only work with newer blocks. So as long as you install any plugins that contain Gutenberg blocks with the API version v2, the editor will switch to non-iframe mode. (https://make.www.ads-software.com/core/2023/07/18/miscellaneous-editor-changes-in-wordpress-6-3/#post-editor-iframed)

    As you can guess the Meta box behaviour depends on this. The old “scroll mode” is the non-iframed, and the “resize handle” mode is the new iframe mode.

    If your editor runs in iframed mode the good news is that you don’t have any v2 block plugins installed, so your system is up to date. The downside is you now have a handle for the meta boxes.

    It can be restored to a scroll mode using css:

    .edit-post-meta-boxes-main.is-resizable {
    height: unset !important;
    max-height: unset !important;
    }
    .edit-post-meta-boxes-main.is-resizable .edit-post-meta-boxes-main__presenter {
    pointer-events: none;
    }
    .interface-navigable-region:has(.edit-post-meta-boxes-main.is-resizable) {
    display: block;
    }
    .block-editor-iframe__scale-container iframe {
    padding: 40px;
    min-height: 85vh;
    }

    The problem here is that pure CSS cannot make an iframe grow its height to match the contents. That can only be done using scripts. But this workaround adds a bit of a padding around the content editor which helps the user understand how the two scroll-bars should be handled.

    With this the editor always fits the screen height (if not, tweak the min-height: 85vh; part) and still allows the meta boxes to be scrolled into the screen easily.

    To me it is still better than dragging the small handle every-time I need to look at either the editor or the meta boxes. That is painfully cumbersome.

    neoweiter

    (@neoweiter)

    If it can help someone. I figured out that by creating a custom block with ACF plugin, it will force the editor to stay in non-iframed mode, thus removing that annoying resize handle.

    Here is an example of custom block code to place in functions.php :

    /**
    * WP EDITOR WORKAROUND
    * add fake custom block to force gutenberg editor to stay in non-iframed mode
    */
    if( function_exists('acf_register_block_type') ){
    add_action('acf/init', function(){
    acf_register_block_type([
    'name' => 'my_custom_block',
    'title' => 'Custom Block',
    'mode' => 'edit'
    ]);
    });
    }

    Keep in mind that IFRAMED mode will be the only mode sooner or later, so any tricks that prevents the switch is only a temporary measure.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.