Using custom twig template in Drupal8 custom block

Question

I'm very new to Drupal and started learning with Drupal8 can anyone please provide me an example of Using custom twig template in Drupal8 custom block.

Answer 1

Follow the next steps:

Create your custom .module file if you don't have one and add hook_theme() with defined variables names, and Twig template name.

/**
 * Implements hook_theme().
 */
function custom_theme() {
  return array(
   'custom_block' => array(
            'variables' => array('title' => NULL, 'description' => NULL),
            'template' => 'block--ws-custom',
        ),
  );
}

Next step is to create a block file and place the code. Go to your custom module folder, open /src/Plugin/Block/ and create file e.g. Custom.php. Include some core functions and build your custom block. Define id for your block and admin label, so you can easily find it in Structure -> Block layout and place to a region.

Create a class and extend BlockBase. Use build() function and return an array of variables:

namespace Drupal\custom\Plugin\Block;
use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'ws custom' block.
 *
 * @Block(
 *   id = "custom_block",
 *   admin_label = @Translation("Custom Block"),
 *
 * )
 */
class Custom extends BlockBase {
  /**
   * {@inheritdoc}
   */
  public function build() {
  // do something
    return array(
      '#title' => 'Title',
      '#description' => 'Description'
    );
  }
}

Now clear cache and go to Structure -> Block layout. Find your block and place it in the region you want.

Next step is to create Twig file and render variables. In your themes folder open the theme that you use e.g. wstheme and open folder templates/block. Now, create a file block--custom.html.twig.

Render variables to Twig HTML:

{#
/**
 * @file
 * Profile custom block.
 */
#}
 <div class="custom--block">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
 </div>

Good luck!