Widget functional trought ACF fields doesn't work. Problem with image field.

• Fisher

• May 27, 2022 at 5:46 am

Hello.
I have a problem with creating and updating widget throught ACF PRO. I read many info on the support forums and tried more, but didn’t find the right way to fix it.
Namely problem appears in admin panel where styles for uploading media doesn’t load to the page when I want to edit widget with image field. Without ACF plugin all works fine.
To test it clearly I create clean WP installation with latest versions WP – 5.9.3 and your ACF PRO plugin – 5.12.2.
1) I create field group named “CTA widget” and add here just only one image field “CTA image”.
2) Then I add to theme file “/inc/theme-widgets.php” where I:
2.1) add file with new widget class – “/inc/widgets/cta-widget.php”

<?php
class cta_widget_1 extends WP_Widget {

  function __construct() {
    parent::__construct('cta_widget_1', 'CTA test widget', array( 'description' => 'Advanced Custom Fields Widget Example', ));
  }

  public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );
    $widget_id = $args['widget_id'];

    echo $args['before_widget'];

    echo '<div>';

    if ( ! empty( $title ) )
      echo $args['before_title'] . $title . $args['after_title'];

    /* Image */

    if ( get_field('cta_image', 'widget_' . $widget_id) ) {
      echo wp_get_attachment_image( get_field('cta_image', 'widget_' . $widget_id), 'large' );
    }

    echo '</div>';

    echo $args['after_widget'];
  }

  public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
      $title = $instance[ 'title' ];
    } else {
      $title = 'CTA test widget';
    }
    ?>
    <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title</label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php
  }

  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
  }

}

2.2) register this widget with standart WP function. –

// register theme widgets
function sharecompany_classic_register_widgets() {
    register_widget( 'cta_widget_1' );
}
add_action( 'widgets_init', 'sharecompany_classic_register_widgets' );

Thats all. After that I opened widgets page and try to add “Legacy widget” from ACF and select my widget named “CTA test widget”.
It opens for me and I click on image field to add it – media popup displayed without any problems, and I can upload image – and then save my widget. For this moment all was as I expected…
But when I update widget page and try to click on image filed to change image – mediad upload popup doesn’t opened as always. In code inspector I see that it opens but without any styles and scripts that must appear to the media upload popup.
So there is a problem and I can’t do anything after this on widget page because it styles is blroken.
I read your change log and see that in last versions you made some improvments and fixes for the widgets. But for now it is now working properly. And this widget functional throught ACF are very important for my projects, on which development goes to deadline because of this problem.
So I ask you help me as quick as you can. Also this fix will make improwments to future plugin version and updates.

Also I create a video for your understanding – You can see it here https://www.awesomescreenshot.com/video/8969084.

Thank you for any reply.
Regards.