To those who are facing this issue, the issue is probably with the settings of the duplicated fields. Make sure you have set “Show in REST API?” to “Yes”. By default, ACF does not seem to be copying this setting from the original field. (Realization after 3-4 hours of debugging.)
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>';
}
Perfect. I had been simply ignoring that option all this while. Thanks a lot for your time.
