Drupal 8 custom block (module) create twig template file

Question

I have a custom Module that creates a custom Block which has field elements.

This all works fine but I need to theme this block. I have checked the other posts on here

Answer 1

To be able to add the twig file in your module, you need to make sure the module defines the reference, not the theme.

You can still implement hook_theme() in the module's .module file as follows:

function mymodule_theme($existing, $type, $theme, $path) {
  return [
    'mymodule_block'     => [
      'variables' => [
        // define defaults for any variables you want in the twig file
        'attributes' => [
           'class' => ['my-module-class'],
         ], //etc
      ],
    ],
  ];
}

Then in your block's build() implementation you can add a reference to the new theme function:

public function build() {
    // Load the configuration from the form
    $config = $this->getConfiguration();
    $test_value = isset($config['test']) ? $config['test'] : '';

    $build = [];
    $build['#theme'] = 'mymodule_block';

    // You would not do both of these things...
    $build['#test_value'] = $test_value;
    $build['module_block_test']['#markup'] = '<p>' . $test_value . '</p>';

    return $build;
}

Finally be careful about where you place your twig file and what you name it. Create a templates directory in your module directory, and replace the _ in the theme function name with -: mymodule-block.html.twig

Answer 2

UPDATE: So I just got it to work but I still need help. I moved the template block--my-module.html.twig to my theme directory and it worked.

How do I get it to work in my module directory?

You can create a directory called templates/ in your modules root. Place your template here.

Now let Drupal know you store the template in your module. in your_module.module add this function:

function YOUR_MODULE_theme($existing, $type, $theme, $path) {
  return array(
    'block__my_module' => array(
      'render element' => 'elements',
      'template' => 'block--my-module',
      'base hook' => 'block'
    )
  );
}

This is not tested. It´s the way it worked for my custom block.

Don´t forget to clear the cache.