What's wrong with my code to overwrite a block template?

Question

I want to render a template from a custom block.

When I check the source with Twig debug enabled, I see the following output.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--mozgraph.html.twig
   * block--moz-graph.html.twig
   * block--wk-elastic.html.twig
   x block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/wundertheme/templates/block/block.html.twig' -->
<div id="block-mozgraph" class="contextual-region block-wk-elastic block-moz-graph">

      <h2>Moz: Graph</h2>
    <div data-contextual-id="block:block=mozgraph:langcode=en"></div>

My module structure is the following.

wk_elastic
  Plugin
    Block 
     MozGraphBlock.php
  templates
    block--wk-elastic.html.twig
  wk_elastic.info.yml
  wk_elastic.services.yml

The code I use to build the block is the following.

/**
 * @file
 * Contains \Drupal\wk_elastic\Plugin\Block\MozGraphBlock.
 */

/**
 * Provides a 'MOZ: Graph' block.
 *
 * @Block(
 *   id = "moz_graph",
 *   admin_label = @Translation("Moz: Graph")
 * )
 */
namespace Drupal\wk_elastic\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Elasticsearch;

class MozGraphBlock extends BlockBase {
  /**
   * {@inheritdoc}
   */
  public function build() {
    $hosts = array(
      '192.168.10.10',
    );

    $client_builder = Elasticsearch\ClientBuilder::create();
    $client_builder->setHosts($hosts);
    $client = $client_builder->build();

    $query = array(
      'query' => array(
        'match_all' => array(),
      ),
    );

    $params = array(
      'index' => 'moz',
      'size' => 10000,
      'body' => $query,
    );


    $response = $client->search($params);

    return array(
      '#markup' => $this->t('Hello, World!'),
      '#theme' => 'block--wk-elastic',
    );
  }
}

What is wrong in my code?

Answer 1

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'
    )
  );
}

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

Don´t forget to clear the cache.

---

According to answer written by Nicensin in this post:
Drupal 8 custom block (module) create twig template file

Answer 2

If you want to override the block template you have to put block--wk-elastic.html.twig in your theme. This doesn't work in the module.

Overriding a block template is usually done to add additional containers around the block. Not to theme what is inside the block.

What you are trying to do is to theme your own output. Here is the documentation for this:

Create custom twig templates from custom module

Answer 3

block--wk-elastic is the wrong value for #theme. What you can use is a value that is acceptable as function name.
PHP function names cannot contain hyphens, but they can contain underscores. So, you can use '#theme' => 'block__wk_elastic'. It's the template filename that needs to replace the underscores with hyphens. It's correct for the template filename to be block--wk-elastic.html.twig.