I'm pulling some custom data into wp-block-columns with three columns in each row using this shortcode (example code):

$array_chunks = array_chunk($array_of_posts, 3);
foreach($array_chunks as $posts) {
  echo '<div class="wp-block-columns">';
  foreach($posts as $post) {
    echo '<div class="wp-block-column">';
      // entry
    echo '</div>';
  }
  echo '</div>';
}

Basically, chunking up the array of posts into groups of 3, creating a wp-block-columns for each set of three, then placing each entry inside a wp-block-column. Basically, making this as close to WP core functionality as possible.

However if I have less entries than a multiple of 3, the last row is either full-width (if there is one remaining) or half-width (if there are two remaining).

How do I keep the entries limited to 1/3 the column now that WP got rid of has-3-columns class?

I'm pulling some custom data into wp-block-columns with three columns in each row using this shortcode (example code):

$array_chunks = array_chunk($array_of_posts, 3);
foreach($array_chunks as $posts) {
  echo '<div class="wp-block-columns">';
  foreach($posts as $post) {
    echo '<div class="wp-block-column">';
      // entry
    echo '</div>';
  }
  echo '</div>';
}

Basically, chunking up the array of posts into groups of 3, creating a wp-block-columns for each set of three, then placing each entry inside a wp-block-column. Basically, making this as close to WP core functionality as possible.

However if I have less entries than a multiple of 3, the last row is either full-width (if there is one remaining) or half-width (if there are two remaining).

How do I keep the entries limited to 1/3 the column now that WP got rid of has-3-columns class?

• block-editor
• columns

• It's possible to do this with CSS grid or flex without creating any additional markup – Tom J Nowell ♦ Commented Jan 18, 2021 at 22:14
• Cool! I'd love to see that answer... – Trees4theForest Commented Jan 18, 2021 at 23:57

1 Answer 1

I've currently "solved" this by backfilling with empty divs:

$array_chunks = array_chunk($array_of_posts, 3);
foreach($array_chunks as $posts) {
  echo '<div class="wp-block-columns">';
  foreach($posts as $post) {
    echo '<div class="wp-block-column">';
      // entry
    echo '</div>';
    for ($i = 0; $i < ( 3 - count($posts)); $i++) {
      echo '<div class="wp-block-column">';
      echo '</div>';
    }
  }
  echo '</div>';
}

But that seems a little clunky. I'd love a more elegant solution.