I’ve figured out a way to do this; I doubt it’s the most efficient method, but it works and that was my main objective. My code and explanation are for dynamically populating a post_object ACF field, but I think it would be a similar process for an ACF select field.
I enqueue this Javascript code with the custom block to only load in the Admin:
(function($){
// the post_object ACF field in the custom ACF block that I want to filter
let post_object_field_key = 'field_624f5d2c6b97c';
// the ACF select field in the custom ACF block that I want to use to dynamically filter the ACF field above
let region_selector_field_key = 'field_6259a73fcf5ef';
let region_selector_field_name = 'my_region_selector';
// Callback for the ACF select fields
let selectFieldCallback = function( select_field ){
// get the field name for the ACF field that was changed (I found this by using the Web Inspector and noticed that the ACF field name was saved as data attribute)
let fieldName = select_field.$el[0].getAttribute('data-name');
// clear the manually selected posts if the "my_region_selector" select field is changed
if (fieldName === region_selector_field_name) {
select_field.on('change', function() {
// the ID is in the form of the current ACF block instance ID + ACF field_key (eg 'acf-block_624f300b806d1-field_624f5d2c6b97c')
let this_el_id = select_field.$el.find('select')[0].id;
// grab the first part of the ID which denotes the specific ACF block instance that this custom field is associated with
let block_el_id = this_el_id.split('-field_')[0];
// grab the post_object ACF field that is associated with the same ACF block instance
let adjacent_post_object_selector = document.getElementById(<code>${block_el_id}-${post_object_field_key}</code>);
// calls a custom function that I wrote to clear the existing values that were selected in the post_object ACF field
clearSelectFieldValue(adjacent_post_object_selector);
});
}
};
// Set ACF actions for the block (I have multiple ACF select fields that I am using to filter one post_object field which is why I use new_field/type=select, but you could use a more specific filter)
if ( window.acf ) {
window.acf.addAction( 'new_field/type=select', selectFieldCallback );
}
// Create an ACF filter to dynamically populate the post_object ACF field with the appropriate posts based on what is selected in the relevant ACF Select fields
acf.add_filter('select2_ajax_data', function( data, args, $input, field, instance ) {
// since the 'select2_ajax_data' ACF filter can't be set for a specfic field, use this conditional to only filter the field we care about
if ( data.field_key === post_object_field_key ) {
// the ID is in the form of the current ACF block instance ID + ACF field_key (eg 'acf-block_624f300b806d1-field_624f5d2c6b97c')
let this_el_id = instance.$el[0].id;
// grab the first part of the ID which denotes the specific ACF block instance that this custom field is associated with
let block_el_id = this_el_id.split('-field_')[0];
// grab the ACF select field in the custom ACF block that I want to use to dynamically filter the post_object field
let adjacent_region_selector = document.getElementById(<code>${block_el_id}-${region_selector_field_key}</code>);
if (adjacent_region_selector) {
// My field allows multi-select so I use a custom function to grab the currently selected values of this multi-select field
let selectedRegions = getSelectedOptions(adjacent_region_selector);
if (selectedRegions.length) {
data.regions = selectedRegions; // send the currently selected post_type to the AJAX WP_Query when fetching results to populate the post_object custom field
}
}
// You can add more ACF fields that you want to use to filter the post_object field here using a similar format above
}
//
return data;
});
})(jQuery);
Then I set up a PHP filter for the post_object field that I want to dynamically populate:
add_filter( 'acf/fields/post_object/query/key=field_624f5d2c6b97c', 'dynamically_set_acf_post_object_query', 10, 3 );
And here’s the corresponding function for the filter:
<?php
function dynamically_set_acf_post_object_query( $args, $field, $post_id ) {
// if the AJAX request sends regions use them for a taxonomy query
if (!empty($_POST['regions']) && is_array($_POST['regions'])) {
// if there are still region terms remaining in the array add a tax_query to the WP_Query arguments
if (count($filtered_regions) > 0) {
$args['tax_query'] = array(
'relation' => 'OR',
array(
'taxonomy' => 'my_regions_taxonomy',
'field' => 'slug',
'terms' => $_POST['regions'],
)
);
}
}
return $args;
}
