Category: Back End

Currently a known issue with ACF and Gutenberg:
https://www.advancedcustomfields.com/resources/known-issues/

Solution

Write specialized JavaScript in functions.php or one of the include files that adds a click event on the publish button which will stop the page from saving when a validation error exists and gives the user an alert letting them know what to change.

add_action('admin_footer', 'update_fields');
function update_fields()
{
    global $pagenow;
    echo '<script>
    jQuery(window).on("load", function() {;
		';
    //If homepage or foundation home page
    //Check slider for anything that's not mp4 videos, give error and don't let submit
    if ( ('post.php' === $pagenow && isset($_GET['post']) && 'page' === get_post_type($_GET['post']) && $_GET['post'] == 53) || ('post.php' === $pagenow && isset($_GET['post']) && 'page' === get_post_type($_GET['post']) && $_GET['post'] == 141)) {
        if($_GET['post'] == 53){
            $sliderName = "main_slider";
        }else{
            $sliderName = "main_slider_foundation";
        }
        echo '
		// When click update, check that 
		// Checks if cat is selected when publish button is clicked
		jQuery( "body" ).on( "click", ".editor-post-publish-button", function( e ) {
			var slider = $("[data-name='.$sliderName.'] [data-name=video]");
			var errors = false;
			slider.each(function(i, obj) {
                var filename = $(this).find("[data-name=filename]").text();
                if (filename=="" || filename.indexOf(".mp4") !== -1) {
                }else{
                    errors = true;
                }
            });
            if(errors){
                alert("Please only upload mp4 videos");
                return false;
            }
		} );
		';
    }
    echo '});
    </script>';
}