Adding configuration form for block

Now let’s say we want to allow the site builder to enter some configuration for each instance of our custom block. Always keep in mind that all site-building configuration in Drupal 8 can be exported from a development site and imported into a live site (known as Configuration Management). As a module builder, you can also provide default configuration to pre-fill the form when a site builder creates a new block.

In the existing HelloBlock class from the previous page, add these use statements following any already present:

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

Update the class declaration to include the new interface implementation:

class HelloBlock extends BlockBase implements BlockPluginInterface {

Then add the following method to the class. A similar full file is available elsewhere, but note that the form name and config keys may differ from those in this guide.

This code will only add the form; form processing and saving will follow on later pages.

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

  $config = $this->getConfiguration();

  $form['hello_block_name'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Who'),
    '#description' => $this->t('Who do you want to say hello to?'),
    '#default_value' => isset($config['hello_block_name']) ? $config['hello_block_name'] : '',
  ];

  return $form;
}

In this example, the form is first defined by referencing its parent class using $form = parent::blockForm($form, $form_state);. Then we add a new field to the form. This process is called polymorphism and is one of the key benefits of using object-oriented programming (OOP) methods.

Next, we must instruct Drupal to save the values from our form to the configuration for this block. Here’s an example:

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

To view the form, go to the previously added block instance at Admin → Structure → Block Layout and click Configure for the (Hello World) block.

To add multiple submit buttons to the same form:

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

  $config = $this->getConfiguration();

  $form['hello_block_name'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Who'),
    '#description' => $this->t('Who do you want to say hello to?'),
    '#default_value' => isset($config['hello_block_name']) ? $config['hello_block_name'] : '',
  ];

  $form['actions']['custom_submit'] = [
    '#type' => 'submit',
    '#name' => 'custom_submit',
    '#value' => $this->t('Custom Submit'),
    '#submit' => [[$this, 'custom_submit_form']],
  ];    

  return $form;
}

New custom submit action:

/**
 * Custom submit actions.
 */
public function custom_submit_form($form, FormStateInterface $form_state) {
  $values = $form_state->getValues();
  // Perform the required actions.
}