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' ) );
}

@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