Remove unused $id and $zebra variables from templates

I suppose we're waiting for front-ender feedback? I see no reason not to rtbc this patch in its current form.

Eclipse

Zebra striping on blocks is an anachronism from a more civilized past. It's time to let it go. We can achieve this effect with CSS.

And this is just bizarre:

$variables['id'] = $count[$hook]++;

A random id is not the solid ground you want to build your styling on. I think these IDs were intended to provide hooks for styling that we can now emulate with CSS :nth-child selectors.

+1 for patches that remove more code than they introduce!

Here's an image of what we're removing (the code shown in the image is given below it. The data- attributes provide examples of the data that will be removed).

<div class="region region-sidebar-first">
  <div id="block-search" class="block block-search contextual-region" role="search" data-block-id="1" data-id="2" data-zebra="even" data-block-zebra="odd"></div>
  <div id="block-tools" class="block block-system contextual-region" data-block-id="2" data-id="3" data-zebra="odd" data-block-zebra="even"></div>
</div>

Oh, sorry. They're not in any core code. I just added them to illustrate what it is that we're removing.

+1

The thing is, you can achieve this using nth-child. But that's not supported in ie8. So we could be leaving some % of people in the cold by removing those 'odd even' classes. And you can't say its always going to be purely aesthetic like rounded corners.

How hard would it be for a someone to add these classes back in?

It'd probably be a bit of a pain, but I think we have to accept a "progressive enhancement" approach here. It's basically the only sane way to handle IE anymore, and I think that's a pretty realistic expectation for front-enders.

No?

Eclipse

So we could be leaving some % of people in the cold by removing those 'odd even' classes.

Lewis, it's a fair point. One could get the odd/even classes by using JavaScript. Something like this.

(function ($) {
  $(function () {
    var blockCount = 0;
    $('.region').each(function (index, element) {
      var $region = $(this);
      $region.find('.block').each(function (index, element) {
          var $block = $(this);
          $block
            // Even/odd in this region
            .addClass((index % 2 === 0) ? 'block-odd' : 'block-even')
            // Even/odd of all blocks
            .addClass((blockCount % 2 === 0) ? 'blocks-all-odd' : 'blocks-all-even')
            // ID of the block in this region.
            .addClass('block-id-' + (index + 1))
            // ID of the block among all blocks
            .addClass('blocks-all-id-' + (blockCount + 1));

            // Increment the total block count.
            blockCount++;
        });
    });
  });
}(jQuery));

Thats a nice js solution. As a front end tell you: usage of odd/even property on everything except views-row and tables is a very rare occasion. The same fir id - its so random, that its really hard to control.
Most of the site use panels or custom block classes or theme with own regions etc. So I see no need in those things.
I wish drupal 8 didn't support ie8 nativly, but had a module which added support for ie7-8 in core.

I can get behind this. They really are not needed and the minimal amount of php to recreate it can be done by anyone if needed.

+1

+1 lets us do the work with css :)

These overly generic odd/even classes and variables are definitely needless and can be safely removed.

Well, that's a pretty resounding vote for "kill it with fire!" :)

Committed and pushed to 8.x. Thanks!

This'll need a change notice, and it'd be great if the workaround code from #10 makes it in there, because people who really really need their zebra striped blocks fix would be unlikely to find it otherwise.

@webchick awesome!

Regarding the follow up code for legacy support in the change notice. I'd like to provide feedback from #10.

@jessebeach:
Would it just be easier and more performant if you used CSS3 selectors for jQuery to manage adding your block classes?

Let me know if I'm missing something or if there's a reason why that wouldn't work:

e.g.

var mytheme.zebraizr = (function ($, context) {
  if (context === undefined) return;
  $(':even', context).addClass('even');
  $(':odd', context).addClass('odd');
})(jQuery);

You then call this in your theme and provide it context. E.g.

Or it could you could even go as far as skipping the odd class; since if it's not even it has to be odd:

var mytheme.zebraizr = (function ($, context) {
  if (context === undefined) return;
  // Add classes to only even rows
  $(':even', context).addClass('even');
})(jQuery);

@jessebeach:
Would it just be easier and more performant if you used CSS3 selectors to manage adding your block classes?

Definitely. It depends on what your browser support requirements are.

The example code in #10 polyfills the region/block context behavior that this issue removed. It's a way of getting back what was taken. There are certainly more concise ways of writing this code if you don't need, for instance, total block count striping.

Oops sorry. accidently removed tag.

@jessebeach oh i see what you're getting at. That's the reason for interating over the rows with $.each() and finding each block / region. I didn't totally understand the reason for doing that at first.

Added change notice at https://drupal.org/node/2011412