WYSIWYG editor breaks media modal

[jonasbirkelof]

I have a Gutenberg block with the ACF wysiwyg-editor. When I add the block to a post, publish and refresh the edit page, I can no longer show the media modal via the block. It works fine prior to publishing and refreshing though.

Also, All other media modals for the post breaks. If I try to add an image, it looks like all styling and positioning for the media modal is removed. Se image below. Everything under the black "+" button is supposed to be the media modal.

ACF Pro 5.11.4
WP 5.9.1

[jonasbirkelof]

It seems as if this is caused by version 5.9.1 of WordPress. A rollback to 5.9 solved it for me temporarily.

https://support.advancedcustomfields.com/forums/topic/update-to-wp-5-9-1-breaks-media-selection/

[lgladdy]

Reopening this to make sure there isn't something we need to fix here in ACF :)

[lgladdy]

This issue seems to be happening because the REST API preload output by the block editor is somehow satisfying the enqueues for the media-views css.

We're working on a fix now. For now, something similar to:

function acf_filter_rest_api_preload_paths( $preload_paths ) {
	global $post;
	$rest_path    = rest_get_route_for_post( $post );
	$remove_paths = array(
		add_query_arg( 'context', 'edit', $rest_path ),
		sprintf( '%s/autosaves?context=edit', $rest_path ),
	);

	return array_filter(
		$preload_paths,
		function( $url ) use ( $remove_paths ) {
			return ! in_array( $url, $remove_paths, true );
		}
	);
}
add_filter( 'block_editor_rest_api_preload_paths', 'acf_filter_rest_api_preload_paths', 10, 1 );

Seems to fix the issue - but we'll keep looking into why this happening in the first place and what has changed in 5.9.1 to cause it, as this might be a bit of an aggressive way to fix the issue.

[adambichler]

It seems as if this is caused by version 5.9.1 of WordPress. A rollback to 5.9 solved it for me temporarily.

https://support.advancedcustomfields.com/forums/topic/update-to-wp-5-9-1-breaks-media-selection/

Spent a few hours on this too – rolling back to the previous version of Wordpress fixed the issue. Also, I think it has nothing to do with the WYSIWYG field, as for me, no image upload button is working.

I am also adding a few keywords here to make it easier for others to find this fix: wordpress media upload problem, acf add media, custom fields media upload, problem, media modal, media popup

[lgladdy]

Yeh, we've been tracking an issue in WordPress for a while now that WordPress will preload a REST API endpoint for an edit view as part of loading the block editor. This leads to huge DOM sizes, as ACF is outputting all the HTML for edit fields.

The main issue is this preload happens in the same context as the block editor load, and things like is_admin() return true because it's not a real REST API load, only internal function calls.

In WordPress 5.9.1, $wp_scripts and $wp_styles are now globals during that REST preload and because ACF can't determine the difference between the output for the REST preload, and the "real" block editor load, things are only enqueued once - so they end up being output in the REST preload, but not the real block editor output.

[lgladdy]

Updated the sample code fix above to use the same code WordPress does to generate the path - this should fix issues with CPTs and Pages.

[mahmoudayoub]

I'm facing the same issue with Wordpress 5.9.1 and ACF 5.11.4 and the suggested code doesn't fix the issue for me, it just shows a blank page when trying to edit a page.

[lgladdy]

We managed to get a fix into ACF 5.12 for this which is out now. Please reopen the issue if you're still having issues on ACF 5.12.