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 Advanced panel. 

The code checks if the Gutenberg Block Editor is active, and if it is, it adds a JavaScript event listener to the sidebar panel of the block editor. When the mouse enters the sidebar panel, it looks for the “Advanced” section of the block inspector and expands it if it’s not already open. The code also outputs a message to the browser console once, on page load, indicating that the feature has been added.

Why it does it…

I was working on a site where I kept needed to add custom classes or anchors or something and this sped up my data entry. Now I just keep it on because it is kinda helpful once for every 10th or 12th time that it’s annoying.

How it does it…

This code is designed to be added to a WordPress plugin or theme file, and it modifies the behavior of the block editor in the WordPress admin area.

The purpose of the code is to automatically expand the “Advanced” panel of the block editor when the user hovers their mouse over it. This can be useful for users who frequently use the advanced settings of blocks, as it saves them from having to manually expand the panel every time they need to access those settings.

The code is structured as a PHP class called BlockEditorOpenAdvancedOnHover. The class has one public method called block_editor_open_advanced_on_mouseenter, which is hooked to the admin_print_footer_scripts action. This means that the code will be executed when the admin footer is printed.

Within the block_editor_open_advanced_on_mouseenter method, the code first checks if the Gutenberg Block Editor is active by using the get_current_screen function to get information about the current admin screen. If the screen’s is_block_editor method is available and returns true, then the Block Editor is considered active.

If the Block Editor is active, the code outputs a script tag that contains JavaScript code. Here’s what takes place in the JavaScript portion:

1. The W5Qa3P_openAdvancedOnMouseenter function is defined. This function is called when the DOM is fully loaded (asynchronously, using setTimeout), and sets up the event listener that expands the “Advanced” panel when the mouse enters the sidebar panel.

2. A new function called addEventListener is defined inside the W5Qa3P_openAdvancedOnMouseenter function. This function is responsible for adding the event listener that expands the “Advanced” panel.

3. The addEventListener function starts by trying to find the sidebar panel using document.querySelector. If it finds the sidebar panel, it adds an event listener to it using addEventListener. The event listener listens for the mouseenter event, and calls the expandAdvancedSection function when triggered.

4. The expandAdvancedSection function is responsible for actually expanding the “Advanced” panel. It starts by trying to find the inspector panel using document.querySelector. If it finds the inspector panel, it tries to find the “Advanced” section inside it using querySelector. If it finds the “Advanced” section and it’s not already open (i.e., it doesn’t have the is-opened class), it simulates a click on the “Advanced” button using .querySelector('button').click().

5. After defining the addEventListener and expandAdvancedSection functions, the W5Qa3P_openAdvancedOnMouseenter function logs a message to the console indicating that it’s running.

6. The code then checks if the WP Block Editor is fully loaded by checking for the existence of wp.data.subscribe. If it exists, it means that the WP data store is ready, and the addEventListener function is subscribed to the WP data store using wp.data.subscribe(addEventListener).

7. If wp.data.subscribe doesn’t exist yet (which may happen if the WP Block Editor isn’t fully loaded yet), the code waits 200ms using setTimeout before trying again.

8. Finally, the W5Qa3P_openAdvancedOnMouseenter function is called asynchronously using setTimeout after the DOM is fully loaded (i.e., when the DOMContentLoaded event fires), with a delay of 2 seconds (2000ms). This delay gives the WP Block Editor some time to fully load before the event listener is added.

Overall, this code adds a small but useful feature to the block editor in the WordPress admin area, making it easier for users to access advanced settings for blocks