Block Editor: Auto Expand Advanced & All Sidebar Panels

Block Editor Open Advanced Panel On Hover Image

🔔 This is the UPDATED version! You found it!
(this is a re-write of a previous popular script: Block Editor: Expand Advanced and All Sidebar Panels on Hover)

Ever find yourself grappling with those tiny accordion-like panels in the WordPress Block Editor sidebar? Like trying to fit your fingers through dollhouse doors, right? WHYYYYY??!! Just leave them open!

Here’s your time-saver: this clever little code snippet that’ll make those panels expand on their own accord (pun intended). 

[Previous versions of this snippet required you to hover your mouse over the sidebar. I got tired of that. So now, they just pop open on their own!]

What it does…

In the Gutenberg Block Editor, anytime content changes in the right side settings panel, this attempts to toggle open the all panels.  The code snippet introduces the class Expand_Sidebar_Panels_On_Mutation. Essentially, it ensures that when the sidebar is open, those panels inside will be open too!

Why it does it…

To save you the hassle of doing it yourself! Toggling those tiny panels just wastes your time! This script steps in to make your editing experience smoother by taking the tedium out of expanding each panel manually. Say ‘yes!’ to more intuitive UI, right? And save your clicking finger for egg games.

How it does it…

This Auto Expand Panels script operates as follows:

  1. Class Initialization: The script is encapsulated within a PHP class named Expand_Sidebar_Panels_On_Mutation.

  2. WordPress Action Hook: The script is hooked to the admin_footer action, ensuring its execution when the admin interface is being rendered.

  3. Detect Block Editor: It first checks if the current screen involves the Block Editor by utilizing the get_current_screen function.

  4. Inline JavaScript Initialization: When the Block Editor is confirmed, the script injects an inline JavaScript section into the admin footer.

  5. Timeout-based Execution: Within the inline script, a setTimeout function is employed. This delay mechanism allows users a brief moment to finish their interactions before the panel expansion takes place.

  6. Mutation Observer: The script employs the MutationObserver API to watch for changes within the Block Editor’s designated sidebar area.

  7. Detection and Action: When a mutation of type 'childList' is detected, specifically involving elements with the class block-editor-block-inspector, the observer triggers a series of actions.

  8. Clear Previous Timeout: If there was an existing delay timer (via activeTimer), it is cleared to reset the countdown.

  9. Setting Up Observer: The observer is established, targeting a persistent parent container (div.interface-navigable-region.interface-interface-skeleton__sidebar) within the sidebar.

  10. Delayed Action: The observer’s callback initiates a setTimeout to delay the expansion. This delay of 500 milliseconds allows users to complete their interactions before the expansion occurs.

  11. Panel Expansion: Upon delay completion, the expandPanels function is invoked. This function finds and expands all collapsed panels in the sidebar by simulating button clicks.

  12. Persistent Functionality: By observing a higher-level, persistent container, the script maintains its functionality even when individual panels are refreshed or re-rendered, as is the case when the sidebar is opened and closed.

 

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…

3 responses

  1. […] 🚨 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 […]

  2. I had to change the mutation conditional to check for ‘block-editor-block-inspector__tabs’ in the target’s classList, rather than ‘block-editor-block-inspector’. Thanks for the snippet!

    1. Ah! Thanks for the note. I’ll check that out and update. …it’s changed a couple times in the past few years. Hopefully not anymore!

Leave a Reply

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