Getting index of a custom ACF block with PHP?

Question

I have created a custom block using Advanced Custom Fields. The blocks will have an alternating layout for even/odd blocks. I want to set this up automatically, rather than adding style options or another field to manually select the layout in the backend, so I was hoping to be able to add a class to every other block programmatically. Is there a way to get the index of a block on a page with PHP and conditionally add a class if it's an odd number? Or is there some other method of applying a class to every other block?

Answer 1

For those looking for a PHP solution. A good place to do this is in the render_callback function. One thing to keep in mind with this solution is that this only works on first load, which is good enough for the frontend, but it will not work accurately in the Gutenberg editor itself once you start editing and/or moving blocks.

acf_register_block_type([
  'name' => 'blockname,
  'render_callback'  => 'my_acf_block_render_callback',
]);

function my_acf_block_render_callback($block) {
  global $block_index;
  $index = $block_index++;

  // Do whatever else you need to do and make sure you pass the $data array to your template.
}

Answer 2

Or is there some other method of applying a class to every other block.

You could use JavaScript to apply classes to the block, but this should be doable with CSS' nth-child:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="advert"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

.block,
.advert {
  height: 100px;
}

* + .block,
* + .advert {
  margin-top: 10px;
}

.advert {
  background-color: #900;
}

.block {
  background-color: #00f;
}

.block::before {
  content: "EVEN";
}

.block:nth-child( odd of .block ) {
  background-color: #0f0;
}

.block:nth-child( odd of .block )::before {
  content: "ODD";
}