Correct Way in Adding JS/CSS to a Block in Drupal 7

In Drupal, drupal_add_js() and drupal_add_css() are great functions for adding JS/CSS to the module or theme layer. However, if you do this inside of the ‘#markup’ call in Drupal 7, you are doing it wrong.

This becomes obvious when you turn block caching or anonymous page caching on, because the JS/CSS won’t be included on the page. Here is the code in how to do it correctly.

 /**  * Implements hook_block_info().  */ function mymodule_block_info() {   $  blocks['testblock'] = array(     'info' => t('Testing Block'),   );    return $  blocks; }  /**  * Implements hook_block_view().  */ function mymodule_block_view($  delta = '') {   $  block = array();    switch ($  delta) {     case 'testblock':       $  block['subject'] = t('Testing block');       $  block['content'] = array(         '#markup' => mymodule_testblock_content(),         '#attached' => array(           'css' => array(             drupal_get_path('module', 'mymodule') . '/css/mymodule.css',           ),           'js' => array(             drupal_get_path('module', 'mymodule') . '/js/mymodule.js',           ),         ),       );       break;   }   return $  block; }  function mymodule_testblock_content() {   return '<p>This is a testing block!</p>'; }

This code will ultimately call drupal_add_js() and drupal_add_css(), but it is hit even with block caching on. It makes sense when you think about it, because block caching grabs the html generated in ‘#markup’ once, and doesn’t call it again when it is cached.

Here is a great article that goes through another example in how to do this.

Montana Programmer

[plinker]

HTML

AddingBlockCorrectDrupalJS/CSS

Leave a Reply

Your email address will not be published. Required fields are marked *