Drupal 8 custom block (module) create twig template file - php

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 and tried with no luck.
I have enabled twig debug and got theme suggestions. Still no luck.
Can anyone please point me in the right direction.
This is what I have so far:
my_module/my_module.module
// nothing related in here
my_module/src/Plugin/Block/myModuleBlock.php
<?php
namespace Drupal\my_module\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Provides a 'ModuleBlock' block.
*
* #Block(
* id = "module_block",
* admin_label = #Translation("My Module"),
* )
*/
class ModuleBlock extends BlockBase {
public function blockForm($form, FormStateInterface $form_state) {
$form['test'] = array(
'#type' => 'select',
'#title' => $this->t('test'),
'#description' => $this->t('test list'),
'#options' => array(
'Test' => $this->t('Test'),
),
'#default_value' => isset($this->configuration['test']) ? $this->configuration['test'] : 'Test',
'#size' => 0,
'#weight' => '10',
'#required' => TRUE,
);
return $form;
}
/**
* {#inheritdoc}
*/
public function blockSubmit($form, FormStateInterface $form_state) {
$this->configuration['test'] = $form_state->getValue('test');
}
/**
* {#inheritdoc}
*/
public function build() {
$build = [];
$build['module_block_test']['#markup'] = '<p>' . $this->configuration['test'] . '</p>';
return $build;
}
}
my_module/templates/block--my-module.html.twig // as suggested by twig debug
<h1>This is a test</h1>
<div id="test-widget">{{ content }}</div>
I should also note that in my my_theme.theme I have this but I don;t think its relevant:
// Add content type suggestions.
function my_theme_theme_suggestions_page_alter(array &$suggestions, array $variables) {
if ($node = \Drupal::request()->attributes->get('node')) {
array_splice($suggestions, 1, 0, 'page__node__' . $node->getType());
}
}
As for what I've tried is this:
public function build() {
return array(
'#theme' => 'block--my-module'
);
}
But still no go.
Any help here is very much appreciated.
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?

Answer 1

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.

Answer 2

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