When you create components in Etch, they save to the block editor as synced patterns for your clients to use. The challenge? Synced patterns can’t be edited inline, so your clients need to open the sidebar to make any content changes.
Here’s where it gets tricky: the sidebar is state persistent. If it’s open, it stays open. If it’s closed, it stays closed. So when your client closes the sidebar and then clicks on a component, they’re left staring at content they can’t edit inline with no obvious way to access the settings. This snippet solves that by automatically opening the block inspector whenever an Etch Component is selected! See it in action:
On to the code!
Drop this into your theme’s functions.php file or a custom plugin. Now when your clients click on an Etch Component, the sidebar opens automatically, giving them immediate access to edit the content without needing to hunt for the settings panel.
/**
* Auto-open sidebar when Etch Components are selected
*
* Automatically opens the block inspector sidebar when an etch/component
* block is clicked, making it easier for editors to access block settings.
*/
add_action('admin_footer', function() {
?>
<script>
(function() {
if (!wp.data) {
return;
}
let previousSelectedBlock = null;
wp.data.subscribe(function() {
try {
const selectedBlock = wp.data.select('core/block-editor').getSelectedBlock();
if (selectedBlock === previousSelectedBlock) {
return;
}
previousSelectedBlock = selectedBlock;
// Check if this is an etch/component block
if (selectedBlock && selectedBlock.name === 'etch/component') {
setTimeout(function() {
try {
wp.data.dispatch('core/edit-post').openGeneralSidebar('edit-post/block');
} catch(e) {
// Silent fail
}
}, 100);
}
} catch(e) {
// Silent fail
}
});
})();
</script>
<?php
});
Found this Snippet useful?
Consider buying me a coffee! ☕️ Your support helps me create more free snippets for the WordPress community.
