Twig templates for custom block

thanks @lucabravo from unsplash
Share this

These days I am testing Drupal 8, and to be honest the jump from Drupal 7 is very significant, with the introduction of twig templates everything become easier, not only for developers but also for the performance of the site.

A very useful implementation of Drupal 8 is the custom modules. With them, we can create blocks, and paste important information all on the site. It could be a Paypal donation button, or a social link, or a complex design in HTML for an event.

I will share with you my custom module base for theming block on git hub, and also on this blog, I will explain how this work:

So, if you are in your root folder, please go to /modules, and according to the README.txt file from there, place downloaded and custom modules in this directory separate downloaded and custom modules from Drupal core's modules. This allows Drupal core to be updated without overwriting these files.

You may create subdirectories in this directory, to organize your added modules, without breaking the site. Some common subdirectories include "contrib" for contributed modules, and "custom" for custom modules. Note that if you move a module to a subdirectory after it has been enabled, you may need to clear the Drupal cache so it can be found.

Check the source on GitHub:

So it is something very simple, lets me explain this:

Inside the twig_block.info.yml I define the module with a name and a description. Now in the file twig_block.module I define two functions, one for the help page, which will be really helpfully for your developers, and the twig_block_theme where I define the template.

 


/**
 * @file
 * Contains twig_block.module..
 */

use Drupal\Core\Routing\RouteMatchInterface;
// 
/**
 * Implements hook_help().
 */
function twig_block_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    // Main module help for the twig_block module.
    case 'help.page.twig_block':
      $output = '';
      $output .= t('About');
      $output .= t('custom module to add your own blocks');
      return $output;

    default:
  }
}
help

and the twig_block_theme function:

 

function twig_block_theme($existing, $type, $theme, $path) {


$variables = array(
    'bloque' =>array(
      'variables' => array(
                  'title' => 'Default title',
                  'description' => null
                  ),
      'template' => 'bloque',
    ),             
  );

  return $variables;


}

Then come the Bloque.php inside the src/Plugin/Block/ , here the comments also mean something.

namespace Drupal\twig_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'Custom' Block
 *
 * @Block(
 *   id = "acquia_block",
 *   admin_label = @Translation("bloques de bloque"),
 *	 category = @Translation("twig_block") * )
 */

class bloque extends BlockBase {

    public function build() {
        return array(
            '#theme' => 'bloque',
            '#title' => 'My custom block',
            '#description' => ''
        );
   }

}

And at the end of the templates folder is the twig template of  bloque.html.twig i add a simple <p> Code me </p>

photo

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.