Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save brandonjp/21063ef787e33cea39a34d9613a8d626 to your computer and use it in GitHub Desktop.
Save brandonjp/21063ef787e33cea39a34d9613a8d626 to your computer and use it in GitHub Desktop.
Block Editor: Auto Expand Advanced & All Sidebar Panels [SnipSnip.pro] - When using Gutenberg Block Editor, anytime the content in the sidebar changes, any panels that are closed will open automatically - https://snipsnip.pro/s/751
{
"generator": "Code Snippets v3.4.2.2",
"date_created": "2023-08-08 16:17",
"snippets": [
{
"id": 53,
"name": "Block Editor: Auto Expand Advanced & All Sidebar Panels [SnipSnip.pro]",
"desc": "<p>Block Editor: Auto Expand Advanced &amp; All Sidebar Panels [SnipSnip.pro] - When using Block Editor, anytime the content in the sidebar changes, any panels that are closed will open automatically. <a href=\"https://snipsnip.pro/s/751\">https://snipsnip.pro/s/751</a></p>",
"code": "if (!class_exists('Expand_Sidebar_Panels_On_Mutation')) {\n class Expand_Sidebar_Panels_On_Mutation {\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 expandPanels() {\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 let activeTimer = null;\n let observer = null;\n\n function setupObserver() {\n const targetElement = document.querySelector('div.interface-navigable-region.interface-interface-skeleton__sidebar');\n\n if (targetElement) {\n if (observer) {\n observer.disconnect();\n }\n\n observer = new MutationObserver((mutationsList, observer) => {\n for (let mutation of mutationsList) {\n // Check if the mutation or its descendants match your desired criteria\n if (mutation.type === 'childList' && mutation.target.classList.contains('block-editor-block-inspector')) {\n if (activeTimer) {\n clearTimeout(activeTimer);\n }\n activeTimer = setTimeout(expandPanels, 500);\n }\n }\n });\n\n observer.observe(targetElement, { childList: true, subtree: true });\n } else {\n setTimeout(setupObserver, 100);\n }\n }\n\n setupObserver();\n console.log(\"Block Editor: Auto Expand Advanced & All Sidebar Panels [SnipSnip.pro]\");\n })();\n\n }, 7373);\n </script>\n <?php\n }\n }\n }\n\n new Expand_Sidebar_Panels_On_Mutation();\n}\n",
"tags": [
"admin",
"gutenberg",
"block editor",
"essentials",
"editor",
"SnipSnip.pro",
"favorites",
"ux"
],
"scope": "admin",
"active": true,
"modified": "2023-08-08 16:17:40"
}
]
}
<?php
/**
* Block Editor: Auto Expand Advanced & All Sidebar Panels [SnipSnip.pro]
*
* Block Editor: Auto Expand Advanced &amp; All Sidebar Panels [SnipSnip.pro] - When using Block Editor, anytime the content in the sidebar changes, any panels that are closed will open automatically. https://snipsnip.pro/s/751
*/
if (!class_exists('Expand_Sidebar_Panels_On_Mutation')) {
class Expand_Sidebar_Panels_On_Mutation {
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 expandPanels() {
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());
});
}
let activeTimer = null;
let observer = null;
function setupObserver() {
const targetElement = document.querySelector('div.interface-navigable-region.interface-interface-skeleton__sidebar');
if (targetElement) {
if (observer) {
observer.disconnect();
}
observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
// Check if the mutation or its descendants match your desired criteria
if (mutation.type === 'childList' && mutation.target.classList.contains('block-editor-block-inspector')) {
if (activeTimer) {
clearTimeout(activeTimer);
}
activeTimer = setTimeout(expandPanels, 500);
}
}
});
observer.observe(targetElement, { childList: true, subtree: true });
} else {
setTimeout(setupObserver, 100);
}
}
setupObserver();
console.log("Block Editor: Auto Expand Advanced & All Sidebar Panels [SnipSnip.pro]");
})();
}, 7373);
</script>
<?php
}
}
}
new Expand_Sidebar_Panels_On_Mutation();
}
@brandonjp
Copy link
Author

I hate clicking "Advanced" in the Block Editor, so after a couple old versions, I think I've finally landed on this solution which watches for the sidebar content to change and expands the Advanced (or any other) sections automatically.
Read all about on a blog post here: https://snipsnip.pro/s/751

@jrevillini
Copy link

OMG ... you are a life-saver. Gutenberg editing gets tedious as hell and on my multilingual site I always need the advanced tab open so I can set the dir attribute on blocks. Bonus points for the Code Snippets JSON. *****

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment