Block Editor: Expand Advanced and All Sidebar Panels on Hover

Block Editor Open Advanced Panel On Hover Image

🚨 New Version Available! 🚨 Stop hovering that mouse!
A way better version of this script is available here: 
Block Editor: Auto Expand Advanced & All Sidebar Panels

Ever felt like your sidebar panels are a tad… shy? Let’s sprinkle some magic to make them come out and play when you hover over them! 

What it does…

In the Gutenberg Block Editor, when you move your mouse into the right side settings panel, this attempts to toggle open the all panels.  The code snippet introduces the class Expand_Sidebar_Panels_On_MouseEnter. In layman’s terms, it’s that little backstage helper ensuring your sidebar panels in the WordPress block editor pop open with a flourish when you hover over them.

Why it does it…

To save you some clicks, dude! Imagine you’re in the WordPress block editor, surrounded by a sea of panels. Clicking each one to get a glimpse of what’s inside? Tedious. But what if they expanded as you hovered over, like a shopkeeper unveiling their wares? That’s a whole lot more intuitive and user-friendly, right? This snippet aims to boost the user experience in the dashboard by reducing needless clicks and making navigation feel more fluid and responsive.

How it does it…

  1. First, the code ensures our trusty class Expand_Sidebar_Panels_On_MouseEnter isn’t already out there doing its thing. No duplicates allowed in this magic show!
  2. It hooks a method, add_inline_script, into the admin_footer. This is where the real magic spell – an inline JavaScript – is cast.
  3. Within the script, there’s a cheeky function getRandomInt that pulls a random number between two values. This is used to create a random delay (between 60 and 90 seconds) before the hover magic starts. Keeps things a bit unpredictable and fun! (This is actually because I have waaay too many of these types of scripts and this prevents them all from firing at the same time. You could remove it, but it also is not that big of a deal.)
  4. The handleMouseEnterWithInterval function is our star performer. It waits patiently for its cue (the mouse hovering over a sidebar panel) and then dazzles the audience by expanding the panels.
  5. The entire act is given a headstart of precisely 7373 milliseconds (about 7.3 seconds) after the admin page loads. This ensures all props (UI elements) are set before the magic begins.

And there you have it! A sprinkle of unpredictability and a dash of utility combined in one spellbinding script. Enjoy the magic, and happy hovering!

Use the JSON file for easily importing into your CodeSnippetsPro plugin. Use the PHP file or just copy/paste the code sample into your functions.php if you’re not using CodeSnippetsPro.

Related Snips

See the code on github…

Leave a Reply

Your email address will not be published. Required fields are marked *