How to render views and blocks in twig files using twig tweak module in Drupal

During customization of themes, developers face issues for rendering views, view results , blocks, forms and other entities in twig files. 

An easy way to render these elements makes developers to customize themes fast and reduce overall development time.

Here we are discussing about twig tweak module which helps developers for rendering views, block and entities etc in twig file.

Install twig tweak module 

https://www.drupal.org/project/twig_tweak

In this article we will discussing about rendering views and blocks and later in next articles we will be discussing various functions in twig tweak module.

How to embed view and view results in twig file in Drupal

Here we are discussing how we can embed views pages &  blocks inside our custom theme or in any of the twig template file. 

drupal _view() function of twig tweak module is used for rendering views  in twig file,

 {{ drupal_view(‘articles_view’, ‘block_1’) }}

Here articles_view is the view machine name and  block_1 is the display machine name. This may be the machine name of a  page or block.

Check view has result   as below. So in twig file, provide below 

{% set view = drupal_view_result(‘articles_view’, ‘block_1’)|length %}

{% if view > 0 %}

 {{ drupal_view(‘articles_view’, ‘block_1’) }}

{% endif %}

You can pass context filters as below to drupal_view twig function.

{ drupal_view(‘articles_view’, ‘block_1’, arg_1, arg_2, arg_3) }}

How to render blocks with twig teak module in Drupal.

In Drupal, there are different kind of blocks. Here we have to render each type of block with corresponding twig tweak function.

Rendering a block plug in :  Block plugins are custom block class that will be seen in below path of custom  and core modules.

/src/Plugin/Block/

In this block class you can see plugin id in below annotation, below plugin_id is sample_simple_block.

/**
* Provides a 'Sample: Simple Block' block.
*
* @Block(
*   id = "sample_simple_block",
*   admin_label = @Translation("Sample: Simple Block")
* )

Using this plugin id we can render the block as below in twig file.

{{ drupal_block(‘plugin_id’) }}

By default, blocks are rendered using block.html.twig template. This can be turned off by setting wrapper parameter to false.

{{ drupal_block(‘plugin_id’, wrapper=false) }}

Note that plugin_id should be wrapped inside quotes.

Rendering block configuration 

These are the blocks  you are seeing in /admin/structure/block

Mainly these blocks are storing configurations, these blocks we can render using below twig function.

{{ drupal_entity(‘block’, ‘block_id’) }}

Here dont confuse with block_id with plugin _id. This block_id is the machine_name of the configured blocks in path/admin/structure/block  block layout page.

So in block lay out page if you click on configure button of corresponding block, 

You can see machine name of the block as below.

You can render disabled block as below.

{{ drupal_entity(‘block’, ‘block_id’, check_access=false) }}

Rendering custom block content 

Here we are discussing how to render custom blocks created in below admin page,

/admin/structure/block/block-content.

As you know these are the blocks with multiple fields where users can add different fields in manage fields page.

Below provided the twig function to display custom block in twig file.

{{ drupal_entity(‘block_content’, ‘content_block_id’) }}

Here block_content is the key word that not going to change. Also content_block_id is the numeric number that represent the block id. You can see this in block edit page URL as below. In below screen, 2 is the block id.

Here this function does not use block template (`block.html.twig`)

You have to provide wapper div manually as below.

<div class="block">
 <h2>{{ 'Example'|t }}</h2>
 {{ drupal_entity('block_content', content_block_id) }}
</div>

In coming articles we will be discussing about rendering regions, forms, entities, images, menu etc.