Modifying the ACF TinyMCE editor using wysiwyg_tinymce_settings filter and the setup callback stops the field from saving and preview inside an ACF Gutenberg block.
The field will save successfully when used anywhere else i.e an options page or page meta outside of the Gutenberg editor.
Does anybody have an idea what the issue is here?
function custom_acf_tinymce() {
?>
<script>
acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
mceInit.setup = function(editor) {
editor.on('click', function(e) {
console.log('Editor was clicked');
});
};
return mceInit;
});
</script>
<?php
}
add_action('acf/input/admin_footer', 'custom_acf_tinymce');
The problem is that the custom “setup” function is overriding the ACF one, which prevents ACF from listening to the “change” event of the TinyMCE instance.
Without this listener, the ACF Block won’t be able to detect a “change”, which prevents it from saving/updating.
The solution is to create a backup of the original setup function and call that within the custom one. Like so:
function custom_acf_tinymce() {
?>
<script>
acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
var _setup = mceInit.setup;
mceInit.setup = function(editor) {
_setup.apply(this, arguments);
editor.on('click', function(e) {
console.log('Editor was clicked');
});
};
return mceInit;
});
</script>
<?php
}
add_action('acf/input/admin_footer', 'custom_acf_tinymce');
