How do I pass multiple block configurations to a behavior?

Question

I am trying to create a Drupal 8 module that implements a Curator IO widget, so I created a block plugin with its own custom configuration.

public function blockForm($form, FormStateInterface $form_state) {
  $form['curator_io_settings'] = array(
    '#type' => 'fieldset',
    '#title' => t('Curator IO Settings'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
  );

  $form['curator_io_settings']['feed_id'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Enter your unique Feed Id'),
    '#default_value' => $this->configuration['feed_id'],
    '#maxlength' => 256,
    '#size' => 64,
    '#description' => t('Set your unique feed id found at curator io'),
  ];

  return $form;
}

I attached my library from the build method and passed a variable so I can work with it in jQuery.

public function build() {
  $build = [
    '#theme' => 'curatorio_io',
    '#attached' => [
      'library' => [
        'curatorio/curatorio_assets',
      ],
      'drupalSettings' => [
        'curatorio' => [
          'feed_id' => $this->configuration['feed_id'],
        ]
      ]
    ],
  ];

  return $build;
}

I am getting this variable value in JavaScript using the following code.

(function ($, Drupal, drupalSettings) {
  'use strict';
  Drupal.behaviors.curatorio = {
    attach: function (context, settings) {
      console.log(drupalSettings.curatorio);
    }
  }
};

It is working fine for one instance of the block.

When I add 2 or more instances of this block, only the first block works. I can understand that no matter how many instance I create for this block, the JavaScript will always get included once, so how do I pass multiple values for feed_id to the JavaScript behavior?

Answer 1

So as Leigh suggested I send this data values into a twig file

  public function build() {

    $build = [
      '#theme' => 'curatorio_io',
      '#id' => uniqid(),
      '#feed_id' => $this->configuration['feed_id'],
      '#widget_type' => $this->configuration['widget_type'],
      '#attached' => [
        'library' => [
          'curatorio/curatorio_assets',
        ],
      ],
    ];

    return $build;
  }

Now in my twig file, I put those values into data attributes

<div class ="curator-feed"  id = "{{ id }}" data-feed-id = "{{ feed_id }}"  data-widget-type = "{{ widget_type }}" >

</div>

and in js I attached my JS logic to get attribute value and attach Plugin into it.