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.

A hippo surrounded by some sort of water fowl peaking out of a lake

I like hippos because they look goofy but will chase you down and kill you just because they can.

Here is a flower in another two column thing within the right hand column.

Close up of pink flowers on a shrub.

This is a pull quote

Me, I said this
Honey badger video from the BBC (core embeds still not figured out yet, hmmm)

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting this comment, you are agreeing to the use of Akismet which helps reduce spam. You can view Akismet’s privacy policy here. Your email, website and name are also stored on this site.