Add fields to a coded block and use them in a templated block

Question

I want to programmatically create a block to which I can add a body field, a link and an image and then create a block twig template file where I can use these fields. For the uploaded image ideally I would want to be able to use a responsive image style. Am hoping someone someone can tell me how I would do this?

Answer 1

Probably the easiest way to do this is a block with a settings form.

When you place a block of this class via the block layout, you can add your information in the settings. To have another block with different settings, just place another block.

Some sample code:

 public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['my_block_text'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Foo'),
      '#description' => $this->t('my desc'),
      '#default_value' => isset($config['my_block_text']) ? $config['my_block_text'] : '',
    );
    return $form;
  }
  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    parent::blockSubmit($form, $form_state);
    $values = $form_state->getValues();
    $this->configuration['my_block_text'] = $values['my_block_text'];
  }
  public function build() {
    $config = $this->getConfiguration();
    $text = $config['my_block_text'];
    ...
  $block = [
   '#theme' => 'my_module_my_theme',
    '#my_text' => $text,
    ... 
  ]; 
  return $block;
}

For images / files, you can just use the standard file form type. The config will get the fid of the image. In the build, you will need to load the file entity and generate the URL to the file. (Lots of existing examples of this).

To get it all to twig, you will need to use a hook_template() implementation that defines the twig template and variables. Then pass it to the theme using the render array created in the block build code.