Reply To: ACF blocks cramped in right sidebar of editor

• rahuladams

• February 23, 2021 at 6:27 pm

As a quick fix, I tried this solution where you increase the width of the block panel upon clicking on a “.wp-block” element.This way, the panel expands and the ACF fields are more accessible and big enough to enter the content. Clicking on the top panel exits the mode.

Please feel free to improve the code and use percentage based width if required.

Javascript:

window.addEventListener("load", function (event) {
    var wp_blocks_list = document.getElementsByClassName('wp-block');
    var get_tool_bar = document.getElementsByClassName('edit-post-header__toolbar');
    for (var i = 0; i < wp_blocks_list.length; i++) {
        this.addEventListener('click', elementclick, true);
    }
    get_tool_bar[0].addEventListener('click', function () {
        document.body.classList.remove('widen');
    })

});

function elementclick() {
    if (!document.body.classList.contains('widen')) {
        document.body.className += ' widen';
    }
}

CSS:

.widen .edit-post-sidebar{
		width: 500px;
   }

Functions:

function widen_block_panel_script($hook) {
    if ('post.php' !== $hook) {
        return;
    }
    wp_enqueue_script('custom-admin-js', get_stylesheet_directory_uri(). '/custom-admin.js');
}
add_action('admin_enqueue_scripts', 'widen_block_panel_script');

add_action('admin_head', 'widen_block_panel_style');
function widen_block_panel_style() {
  echo '<style>
   .widen .edit-post-sidebar{
		width: 500px;
   }
  </style>';
}