CSS and JS for Cached Blocks (drupal_add_css incompatible with blocks)

ugly solution, I need o think of something else.

Moving this to the Drupal project as a core patch is required to allow cached blocks to have their own CSS and JS files included. Having the CSS and JS files added in hook_init doesn't seem like a clean solution.

Maybe something like this?

function mymodule_block($op = 'list', $delta = 0, $edit = array()) {
  $blocks = array();
  if ($op == 'list') {
    $blocks[0]['info'] = t("My module's block");
    $blocks[0]['cache'] = BLOCK_CACHE_PER_PAGE;
    $blocks[0]['css'] = array(drupal_get_path('module', 'mymodule') .'/mymodule.css');
    $blocks[0]['js'] = array(drupal_get_path('module', 'mymodule') .'/mymodule.js');
  }
  return $blocks;
}

$block['css'] provides an array of CSS files to be included when the block is shown. $block['js'] provides an array of JS files to be included when the block is shown.

subscribing - this nipped me with nice menus upgrade.

Wouldn't this be better with a callback rather than ['css'] or ['js']. For instance:

<?php
function mymodule_block($op = 'list', $delta = 0, $edit = array()) {
  $blocks = array();
  if ($op == 'list') {
    $blocks[0]['info'] = t("My module's block");
    $blocks[0]['cache'] = BLOCK_CACHE_PER_PAGE;
    $blocks[0]['init'] = 'mymodule_block_0_init';
  }
  return $blocks;
}

function mymodule_block_0_init() {
  drupal_add_css(drupal_get_path('module', 'mymodule') .'/mymodule.css'));
  drupal_add_js(drupal_get_path('module', 'mymodule') .'/mymodule.js'));
}
?>

There might be other things people want to do while still using cached blocks.

Good idea though. We've faced a simiiar question over at the Tagadelic module.

I'd like top see one more positive test before releasing a 1.0. If no-one finds time to test before end oàf the week, i'll release a beta version by then and a stable after the beta is tested.

@Bèr - Umm....

I don't find this necessary at all. A module should just do this in hook_init if the block is at all enabled. The cost is nearly free now that we aggregate css and send the right headers so the css is cached on client. This is overengineering.

@dmitry: yea, I was being stupid, commenting in the wrong thread. Sorry 'bout that.

This isn't critical.

moshe at #8: If the block is disabled, and the module is enabled, the CSS and the Javascript will still be included even though it isn't needed. Although the performance hit on the server side is negotiable, it would be better if it didn't even shoot it out to the user at all.

@robloach - true. yet the the proposed patch is uglier than the buglet it wants to fix.

Which one? $blocks[0]['css'] and $blocks[0]['js'], or $blocks[0]['init']?

If we're already returning keyed data in the block definition itself, wouldn't it make more sense to jam any CSS/JS data in there so that Drupal can keep the styles/scripts with it?

This is probably related to and better solved at: #257032: Split block $ops into separate functions

This issue is not necessarily limited to blocks, it is a generic issue with caching of page elements. We had the same issue with Panels SimpleCache. There, we performed a diff between drupal_add_js()/drupal_add_css() before the block/panel is built and after it has been built. Any added JS/CSS files are stored separately, and automatically added for cached versions. Since we cannot force a block being completely generated in hook_block() (other functions as well as module_invoke_all() may be involved), this seems to be the only valid solution for this issue.

$block['#attached']['css'] can be used now, right?

Yup! This is entirely and completely solved now. :)

We don't use #attached in some blocks that could use it though, hence #630100: Check non-preprocessed CSS/JS is loaded only when really needed.

Anyone finding this issue may be confused with the solution, as #attached has nothing to do with the block system. Instead, the solution leverages the fact that Drupal7 is now using renderable arrays for all content - including blocks.

So instead of:

/**
 * Implements hook_block_view().
 */
function example_block_view($delta) {
  $basepath = drupal_get_path('module', 'example');
  return array(
    'subject' => t('Example block'),
    'content' => '<p>Your blocks HTML</p>',
  );
}

Now we can write:

/**
 * Implements hook_block_view().
 */
function example_block_view($delta) {
  $basepath = drupal_get_path('module', 'example');
  return array(
    'subject' => t('Upcoming'),
    'content' => array(
      '#markup' => '<p>Your blocks HTML</p>',
      '#attached' => array(
        'css' => array($basepath . '/example.css'),
        'js'  => array($basepath . '/example.js'),
      ),
    ),
  );
}

Hope this helps.