WordPress Block Editor: Expand Advanced & All Sidebar Panels on MouseEnter [SnipSnip.pro]

Expand_Sidebar_Panels_On_MouseEnter.json

{
  "generator": "Code Snippets v3.4.2.2",
  "date_created": "2023-08-05 16:54",
  "snippets": [
    {
      "id": 53,
      "name": "Block Editor: Expand All Sidebar Panels on MouseEnter [SnipSnip.pro]",
      "desc": "<p>Block Editor: Expand All Sidebar Panels on MouseEnter [SnipSnip.pro] - When using Block Editor, move your mouse into the sidebar and any panels that are closed will open automatically. <a href=\"https://snipsnip.pro/s/177\">https://snipsnip.pro/s/177</a></p>",
      "code": "if (!class_exists('Expand_Sidebar_Panels_On_MouseEnter')) {\n  class Expand_Sidebar_Panels_On_MouseEnter {\n    public function __construct() {\n      add_action('admin_footer', array($this, 'add_inline_script'));\n    }\n\n    public function add_inline_script() {\n      if (!function_exists('\\get_current_screen')) {\n        return false;\n      }\n      $screen = \\get_current_screen();\n      if (method_exists($screen, 'is_block_editor') && $screen->is_block_editor()) {\n        ?>\n        <script type=\"text/javascript\">\n      setTimeout(() => {\n\n        (function () {\n          function handleMouseEnter() {\n            const panelBodies = document.querySelectorAll('div.components-panel__body:not(.is-opened)');\n            panelBodies.forEach((panelBody) => {\n              const buttons = panelBody.querySelectorAll('button.components-button');\n              buttons.forEach((button) => button.click());\n            });\n          }\n\n          function getRandomInt(min, max) {\n            min = Math.ceil(min);\n            max = Math.floor(max);\n            return Math.floor(Math.random() * (max - min) + min);\n          }\n\n          const randSec = getRandomInt(60, 90) * 1000;\n\n          function handleMouseEnterWithInterval() {\n            const panelContainer = document.querySelector('div.components-panel');\n            if (panelContainer) {\n              panelContainer.removeEventListener('mouseenter', handleMouseEnter);\n              panelContainer.addEventListener('mouseenter', handleMouseEnter);\n              console.log('Block Editor: Expand All Sidebar Panels on MouseEnter [SnipSnip.pro]', randSec);\n            }\n\n            setTimeout(handleMouseEnterWithInterval, randSec);\n          }\n\n          handleMouseEnterWithInterval();\n        })();\n      \n      \n      }, 7373);\n        </script>\n        <?php\n      }\n    }\n  }\n\n  new Expand_Sidebar_Panels_On_MouseEnter();\n}\n",
      "tags": [
        "admin",
        "gutenberg",
        "block editor",
        "essentials",
        "editor",
        "SnipSnip.pro",
        "favorites",
        "ux"
      ],
      "scope": "admin",
      "active": true,
      "modified": "2023-08-05 16:53:29"
    }
  ]
}

Expand_Sidebar_Panels_On_MouseEnter.php

if (!class_exists('Expand_Sidebar_Panels_On_MouseEnter')) {
  class Expand_Sidebar_Panels_On_MouseEnter {
    public function __construct() {
      add_action('admin_footer', array($this, 'add_inline_script'));
    }

    public function add_inline_script() {
      if (!function_exists('\get_current_screen')) {
        return false;
      }
      $screen = \get_current_screen();
      if (method_exists($screen, 'is_block_editor') && $screen->is_block_editor()) {
        ?>
        <script type="text/javascript">
      setTimeout(() => {

        (function () {
          function handleMouseEnter() {
            const panelBodies = document.querySelectorAll('div.components-panel__body:not(.is-opened)');
            panelBodies.forEach((panelBody) => {
              const buttons = panelBody.querySelectorAll('button.components-button');
              buttons.forEach((button) => button.click());
            });
          }

          function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min) + min);
          }

          const randSec = getRandomInt(60, 90) * 1000;

          function handleMouseEnterWithInterval() {
            const panelContainer = document.querySelector('div.components-panel');
            if (panelContainer) {
              panelContainer.removeEventListener('mouseenter', handleMouseEnter);
              panelContainer.addEventListener('mouseenter', handleMouseEnter);
              console.log('Block Editor: Expand All Sidebar Panels on MouseEnter [SnipSnip.pro]', randSec);
            }

            setTimeout(handleMouseEnterWithInterval, randSec);
          }

          handleMouseEnterWithInterval();
        })();
      
      
      }, 7373);
        </script>
        <?php
      }
    }
  }

  new Expand_Sidebar_Panels_On_MouseEnter();
}

UPDATE! There's (another) newer, better version!

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

When using WordPress Gutenberg / Block Editor / Full Site Editor / etc - I don't like having to always click on the different sections in the sidebar pane in order to expand them and get to the Advanced section (to enter anchor id) or other options. So this just auto opens them anytime your mouse enters the sidebar.