Wordpress Gutenberg Block Editor: Keep Advanced Section Always Open

block-editor-open-advanced-on-mouseenter-code-snippets.json

{
   "generator":"Code Snippets v3.3.0",
   "date_created":"2023-04-08 21:52",
   "snippets":[
      {
         "name":"Block Editor: Open Advanced Panel on Hover [SnipSnip.pro]",
         "desc":"When using Gutenberg Block Editor, anytime your mouse enters the sidebar panel, if the \u201cAdvanced\u201d section is not open, then expand it. (Causes a minor annoyance where it scrolls to Advanced after expanding it.) (Includes a delay to ensure the sidebar is rendered... you might need to adjust the setTimeout delay if your site\/browser is slow to load the Block Editor.)\n\nCode revisions at: <a href=\"https:\/\/gist.github.com\/brandonjp\/bcfd56838359f12ef5c3ed2ecb6132dc\">https:\/\/gist.github.com\/brandonjp\/bcfd56838359f12ef5c3ed2ecb6132dc<\/a>\n\n<a href=\"https:\/\/snipsnip.pro\/s\/177\">https:\/\/snipsnip.pro\/s\/177<\/a>",
         "tags":[
            "admin",
            "gutenberg",
            "block editor",
            "js",
            "ux",
            "SnipSnip.pro"
         ],
         "scope":"admin",
         "code":"\/\/ Block Editor: Open Advanced Panel on Mouseenter\n\/\/ Code revisions at: https:\/\/gist.github.com\/brandonjp\/bcfd56838359f12ef5c3ed2ecb6132dc\n\/\/ https:\/\/snipsnip.pro\/s\/177\nif ( ! class_exists( 'BlockEditorOpenAdvancedOnHover' ) ) {\n    class BlockEditorOpenAdvancedOnHover {\n        public function block_editor_open_advanced_on_mouseenter(){\n            if ( !function_exists( '\\get_current_screen' ) ) { return false; }\n            $screen = \\get_current_screen();\n            \/\/ Check if Gutenberg Block Editor is active\n            if ( method_exists( $screen, 'is_block_editor' ) && $screen->is_block_editor() ) {\n            ?>\n                <script>\n                function W5Qa3P_openAdvancedOnMouseenter() {\n                    function addEventListener() {\n                        let sidebarPanel = document.querySelector('div.interface-interface-skeleton__sidebar');\n                        if (sidebarPanel) {\n                            sidebarPanel.addEventListener(\"mouseenter\", expandAdvancedSection, false);\n                        }\n                    }\n\n                    function expandAdvancedSection(){\n                        let inspectorPanel = document.querySelector('div.block-editor-block-inspector');\n                        if (inspectorPanel) {\n                            let advSection = inspectorPanel.querySelector('div.block-editor-block-inspector__advanced');\n                            if (advSection && !advSection.classList.contains('is-opened')) {\n                                advSection.querySelector('button').click();\n                            }\n                        }\n                    }\n\n                    console.log('Block Editor: Open Advanced Panel on Hover\/MouseEnter');\n\n                    if (typeof wp !== 'undefined' && wp.data && wp.data.subscribe) {\n                        wp.data.subscribe(addEventListener);\n                    } else {\n                        setTimeout(W5Qa3P_openAdvancedOnMouseenter, 200);\n                    }\n                }\n\n                window.addEventListener('DOMContentLoaded', (evt) => { setTimeout(W5Qa3P_openAdvancedOnMouseenter,2000) });\n                <\/script>\n            <?php\n            }\n        }\n    }\n    $blockEditorOpenAdvancedOnHover = new BlockEditorOpenAdvancedOnHover();\n    \\add_action( 'admin_print_footer_scripts', array( $blockEditorOpenAdvancedOnHover, 'block_editor_open_advanced_on_mouseenter' ) );\n}\n",
         "priority":"10"
      }
   ]
}

block-editor-open-advanced-on-mouseenter-code-snippets.php

<?php

/**
 * Block Editor: Open Advanced Panel on Hover [SnipSnip.pro]
 *
 * When using Gutenberg Block Editor, anytime your mouse enters the sidebar panel, if the “Advanced” section is not open, then expand it. (Causes a minor annoyance where it scrolls to Advanced after expanding it.) (Includes a delay to ensure the sidebar is rendered... you might need to adjust the setTimeout delay if your site/browser is slow to load the Block Editor.)
 * 
 * Code revisions at: https://gist.github.com/brandonjp/bcfd56838359f12ef5c3ed2ecb6132dc
 * 
 * https://snipsnip.pro/s/177
 */
// Block Editor: Open Advanced Panel on Mouseenter
// Code revisions at: https://gist.github.com/brandonjp/bcfd56838359f12ef5c3ed2ecb6132dc
// https://snipsnip.pro/s/177
if ( ! class_exists( 'BlockEditorOpenAdvancedOnHover' ) ) {
    class BlockEditorOpenAdvancedOnHover {
        public function block_editor_open_advanced_on_mouseenter(){
            if ( !function_exists( '\get_current_screen' ) ) { return false; }
            $screen = \get_current_screen();
            // Check if Gutenberg Block Editor is active
            if ( method_exists( $screen, 'is_block_editor' ) && $screen->is_block_editor() ) {
            ?>
                <script>
                function W5Qa3P_openAdvancedOnMouseenter() {
                    function addEventListener() {
                        let sidebarPanel = document.querySelector('div.interface-interface-skeleton__sidebar');
                        if (sidebarPanel) {
                            sidebarPanel.addEventListener("mouseenter", expandAdvancedSection, false);
                        }
                    }

                    function expandAdvancedSection(){
                        let inspectorPanel = document.querySelector('div.block-editor-block-inspector');
                        if (inspectorPanel) {
                            let advSection = inspectorPanel.querySelector('div.block-editor-block-inspector__advanced');
                            if (advSection && !advSection.classList.contains('is-opened')) {
                                advSection.querySelector('button').click();
                            }
                        }
                    }

                    console.log('Block Editor: Open Advanced Panel on Hover/MouseEnter');

                    if (typeof wp !== 'undefined' && wp.data && wp.data.subscribe) {
                        wp.data.subscribe(addEventListener);
                    } else {
                        setTimeout(W5Qa3P_openAdvancedOnMouseenter, 200);
                    }
                }

                window.addEventListener('DOMContentLoaded', (evt) => { setTimeout(W5Qa3P_openAdvancedOnMouseenter,2000) });
                </script>
            <?php
            }
        }
    }
    $blockEditorOpenAdvancedOnHover = new BlockEditorOpenAdvancedOnHover();
    \add_action( 'admin_print_footer_scripts', array( $blockEditorOpenAdvancedOnHover, 'block_editor_open_advanced_on_mouseenter' ) );
}

I hate how the Gutenberg Block Editor doesn't always keep the Advanced section expanded, so this will help with that. It's a bit aggressive, but works for a quick fix. Anytime your mouse enters the sidebar, the Advanced section will open.

If you use Code Snippets (which I highly recommend: https://wordpress.org/plugins/code-snippets/ & http://codesnippets.pro ), then you can import the JSON file above, or copy/paste code from the PHP file into a new snippet.

If you don't use Code Snippets, then you can copy the PHP file into your functions.php or a custom plugin.

This does have one minor annoyance... because I'm just doing a hacky .click() on the Advanced button, it attempts to scroll it into view every time you mouse into the side bar. For me... so far... it's not been too annoying, but might be worth fixing someday.

@brandonjp

Thanks for your great code!

I cannot get it to work because of the the 'namespace'.
"Namespace declaration statement has to be the very first statement or after any declare call in the script"

I wanted to try this without the code snippet plugin.
Can I just add the .json file to my child theme?

I cannot get it to work because of the the 'namespace'. "Namespace declaration statement has to be the very first statement or after any declare call in the script"

I wanted to try this without the code snippet plugin. Can I just add the .json file to my child theme?

@Frentzo Hello! Yea, sorry about that. You won't be able to add the .json to your theme. But, it totally makes sense why it wouldn't work. In general, I've stopped using namespaces on snippets like this for that very reason.

I've updated the PHP script to use a Class instead. It should be good to copy/paste that into your theme's functions.php file. The blog post has a more real info on what the code does. https://snipsnip.pro/s/177

@Frentzo after swapping the code, I've had a little trouble where sometimes it works on the Post edit screen, but not on the Theme Site Editor. I think I've got it fixed, but if you do try this out, feel free to drop me a line or let me know if it is/isn't working. Best

Thanks. Great snippet. Works as guided and is so useful.

This saves me time. Thanks.

@Frentzo @robz0 @shaunroot If you're interested...
I made some changes to make this expand ALL the side bar panels, instead of just the Advanced panel. And it happens automatically without needing to hover your mouse over the sidebar. Also, hopefully it works a little better when moving between the Post Editor and Full Site Editor.

• new gist is here: https://gist.github.com/brandonjp/21063ef787e33cea39a34d9613a8d626
• new blog post about it is here: https://snipsnip.pro/s/751