testimonials-widget.php

<?php
// Prevent direct access to this file
defined( 'ABSPATH' ) or die( 'Nope.' );

/**
 * Register the widget with WordPress
 */
add_action( 'widgets_init', function(){
  register_widget( 'Testimonials_Widget' );
});

class Testimonials_Widget extends WP_Widget {

  public function __construct() {
   parent::__construct(
     false,
     'TBE Testimonials',
     array( 'description' => 'Repeatable Testimonials' )
   );
  }

 public function update( $new_instance, $old_instance ) {
  $instance                 = array();
  $instance['header']       = wp_kses_post( $new_instance['header'] );
  $instance['testimonials'] = $new_instance['testimonials'];
  return $instance;
 }

 public function form( $instance ) {
  // segment #1
  $header = empty( $instance['header'] ) ? 'Testimonials' : $instance['header'];
  $testimonials = isset( $instance['testimonials'] )
    ? array_values( $instance['testimonials'] )
    : array( array( 'id' => 1, 'quote' => '', 'author' => '', 'image' => '' ) );
?>

    <!— segment #2 —>
    <p>
      <label for="<?= $this->get_field_id( 'header' ); ?>">Header</label>
      <input class="widefat" id="<?= $this->get_field_id( 'header' ); ?>" name="<?= $this->get_field_name( 'header' ); ?>" type="text" value="<?= esc_attr( $header ); ?>" />
    </p>
    <!— segment #3 —>
    <script type="text/template" id="js-testimonial-<?= $this->id; ?>">
      <p>
        <label for="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-quote">Quote:</label>
        <textarea rows="4" class="widefat" id="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-quote" name="<?= $this->get_field_name( 'testimonials' ); ?>[<%- id %>][quote]"><%- quote %></textarea>
      </p>
      <p>
        <label for="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-author">Author:</label>
        <input class="widefat" id="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-author" name="<?= $this->get_field_name( 'testimonials' ); ?>[<%- id %>][author]" type="text" value="<%- author %>" />
      </p>
      <p>
        <input name="<?= $this->get_field_name( 'testimonials' ); ?>[<%- id %>][id]" type="hidden" value="<%- id %>" />
        <a href="#" class="js-remove-testimonial"><span class="dashicons dashicons-dismiss"></span>Remove Testimonial</a>
      </p>
    </script>

    <!— segment #4 —>
    <div id="js-testimonials-<?= $this->id; ?>">
      <div id="js-testimonials-list" style="padding: 0px 15px; background: #fafafa;"></div>
      <p>
        <a href="#" class="js-testimonials-add button">Add New Testimonial</a>
      </p>
    </div>

    <!— segment #5 —>
    <script type="text/javascript">
      var testimonialsJSON = <?= json_encode( $testimonials ) ?>;
      var widgetId = '<<?php echo $this->id; ?>>'.slice( 1, -1 );
      testimonialsWidget.render( widgetId, testimonialsJSON );
    </script>
<?php
  }

  public function widget( $args, $instance ) {

    $header = apply_filters( 'widget_title', empty( $instance['header'] ) ? '' : $instance['header'], $instance, $this->id_base ); ?>

    <h3><?= $header ?></h3>
    <?php foreach ( $instance['testimonials'] as $testimonial ): ?>
      <blockquote>
        <p><?= $testimonial['quote'] ?></p>
        <footer>— <?= $testimonial['author'] ?></footer>
      </blockquote>
    <?php endforeach;

  }
}
?>