How to Save Configuration Data for Custom Block

Question

I'm have a custom module that creates a custom block plugin, but am having trouble figuring out how to add some custom configuration settings to the block.

Just for understanding how to do this, I've got a checkboxes form element that I've added to my block creation code in my bootstrap_theme_toggler/src/Plugins/Block/themeToggler.php file as such:

<?php

namespace Drupal\bootstrap_theme_toggler\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Theme Toggler' Block.
 *
 * @Block(
 *   id = "theme_toggler",
 *   admin_label = @Translation("Theme Toggler"),
 *   category = @Translation("Theme Toggler Block"),
 * )
 */
class themeToggler extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#theme' => 'block__toggler',
      '#attached' => [
        'library' => ['bootstrap_theme_toggler/theme-toggler'],
      ],
      // 'label_display' => FALSE
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {

    // for checkbox, the values used are the option array keys, and the array values are the lables.
    $form['toggler_block_themes']['colors'] = array(
      '#type' => 'checkboxes',
      '#title' => $this->t('Color Theme Modes'),
      '#options' => array('blue' => $this->t('Blue'), 'red' => $this->t('Red')),
      '#description' => $this->t('Select the color theme modes to use on this toggler.'),
    );
    // kint($form['favorites']['colors']['#options']);

    // $form['toggler_block_themes']['colors']-> processCheckboxes;
    // kint($form_state);
    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    $values = $form_state->getValues();
    $this->configuration['toggler_block_themes'] = $values['toggler_block_themes'];
  }
  
}

This works fine to create the checkboxes form element on the block configuration page, however, it's not saving the boxes that are checked when I save the configuration. Do I need a bootstrap_theme_toggler.settings.yml and/or bootstrap_theme_toggler.schema.yml file in my modules config folder, and if so how do I structure those to support a checkboxes form element. If not what should I change for the checked boxes to save when saving the config. Perhaps it is saving and I'm not loading them correctly when I go back to the config form after saving, I can't tell.

Answer 1

It appears that it was saving the configuration data, but I was not recalling it properly when re-entering the configuration form. To correct this, I needed to get the checkboxes configuration values, or if they don't exist create default values, and set them as the #default_value for the form element as updated below:

<?php

namespace Drupal\bootstrap_theme_toggler\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Theme Toggler' Block.
 *
 * @Block(
 *   id = "theme_toggler",
 *   admin_label = @Translation("Theme Toggler"),
 *   category = @Translation("Theme Toggler Block"),
 * )
 */
class themeToggler extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#theme' => 'block__toggler',
      '#attached' => [
        'library' => ['bootstrap_theme_toggler/theme-toggler'],
      ],
      // 'label_display' => FALSE
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {

    $config = $this->configuration['toggler_block_themes']['colors'] ?? array('blue','red');
    // for checkbox, the values used are the option array keys, and the array values are the lables.
    $form['toggler_block_themes']['colors'] = array(
      '#type' => 'checkboxes',
      '#title' => $this->t('Color Theme Modes'),
      '#options' => array('blue' => $this->t('Blue'), 'red' => $this->t('Red')),
      '#description' => $this->t('Select the color theme modes to use on this toggler.'),
      '#default_value' => $config,
    );
    // kint($form['favorites']['colors']['#options']);

    // $form['toggler_block_themes']['colors']-> processCheckboxes;
    // kint($form_state);
    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    $values = $form_state->getValues();
    $this->configuration['toggler_block_themes'] = $values['toggler_block_themes'];
  }
  
}