0

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?

2 Answers 2

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.
}
0

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";
}

enter image description here

4
  • Thank you for the suggestion, but I would prefer to use PHP to render the classes server-side in order to avoid the content shifting around on the frontend
    – Gutengerd
    Jul 17, 2023 at 20:48
  • Yep, I wouldn't recommend JS, but FWIW, CSS will not cause the content to shift.
    – Caleb
    Jul 17, 2023 at 20:50
  • The issue there is that the block content is at the same level in the DOM as the rest of the page content (i.e. the page header and other blocks). Is there a way to add a wrapper in the block template that encompasses all blocks of a certain block name?
    – Gutengerd
    Jul 17, 2023 at 20:59
  • Your custom block should already have a unique class name being applied. If you replace .block with your block's class name, the CSS above will only apply to siblings of the same parent, so as long as the blocks are all siblings, it should work, regardless of other blocks (as proved by the .advert usage).
    – Caleb
    Jul 17, 2023 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.