What use is anything without columns

As expected, Gutenberg blocks with inner blocks, eg columns, weren’t working. Like other bits, this was somewhat straightforward once I figured out how. It took me a while and with more than a few infinite loops thrown in to make it that much more frustrating.

What I ended up is copying the render_blocks function from php into js and making this little helper. As they say “It’s fine to translate php to js, there are absolutely no worries in doing this, go for it.”

// This copies the php function: https://developer.wordpress.org/reference/functions/render_block/
let renderBlock = indivBlock => {
  let index = 0
  let blockContent = ''
  let innerContent = indivBlock.innerContent
  innerContent.forEach(element => {
    let isString = typeof element === 'string'
    blockContent += isString
      ? element
      : renderBlock(indivBlock.innerBlocks[index++])
  })
  return blockContent
}

Once I had the blocks with inner blocks correct (maybe, I think?), I wanted the styles.

Instead of redoing them all, I thought I’d import them and then overwrite the bits I wanted to fit my theme (which is getting messy, I apologise).

And then instead of importing them properly, I copied and pasted over wp-includes/css/dist/block-library/style.min.css into a local file and imported that then overwrote particular styles using theme-ui.

(Thinking about it, it would probably be better to do this such that you could make a file to use in Gutenberg for editor styles so that they match what people will see. I leave that to the reader, ha.)

So here’s proof because I know you don’t believe me. Columns (nested columns even), a pull quote and no, core-embed still isn’t working.

This is a pull quote

Me, I said this